🤖 Smart Image, Video & Document Recognition

\n \n \n \n \n \n \n \n \n \n

\n {selectedImage && (\n

\n \n

\n )}\n \n \n {result && (\n \n

Recognition Result:

{result}

\n \n )}\n \n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") client();\n\nexport default async function server(request: Request): Promise {\n if (\n request.method === \"POST\" && new URL(request.url).pathname === \"/recognize\"\n ) {\n try {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n const body = await request.json();\n const imageBase64 = body.image.split(\",\")[1];\n const mode = body.mode || \"image\";\n let prompt = \"\";\n if (mode === \"image\") prompt = \"Describe this image in detail.\";\n else if (mode === \"video\" || mode === \"videoUpload\") {\n prompt = \"Describe what is happening in this video frame or clip.\";\n } else if (mode === \"document\") {\n prompt =\n \"Read and summarize the contents of this document or image of a document.\";\n } else prompt = \"Describe this media content.\";\n\n const response = await openai.chat.completions.create({\n model: \"gpt-4o\",\n messages: [\n {\n role: \"user\",\n content: [\n { type: \"text\", text: prompt },\n {\n type: \"image_url\",\n image_url: { url: `data:image/jpeg;base64,${imageBase64}` },\n },\n ],\n },\n ],\n });\n return new Response(\n JSON.stringify({\n description: response.choices[0].message.content ||\n \"No description available\",\n }),\n { headers: { \"Content-Type\": \"application/json\" } },\n );\n } catch (err) {\n console.error(err);\n return new Response(\n JSON.stringify({ description: \"Recognition failed\" }),\n {\n status: 500,\n headers: { \"Content-Type\": \"application/json\" },\n },\n );\n }\n }\n return new Response(\n `\n \n \n Smart Recognition App\n \n \n \n \n

\n \n \n \n `,\n { headers: { \"Content-Type\": \"text/html\" } },\n );\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 0;\n display: flex;\n justify-content: center;\n align-items: center;\n}\nbutton {\n margin: 8px;\n padding: 10px 15px;\n background-color: #007bff;\n color: white;\n border: none;\n border-radius: 6px;\n cursor: pointer;\n}\nbutton:hover {\n background-color: #0056b3;\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/mprasadhv/Smart_Image_Recognition/code/main.ts","extension","actionData","errors"]