🐞 Insect Identifier

\n \n {selectedFile && (\n \n )}\n \n {isLoading ? \"Identifying...\" : \"Identify Insect\"}\n \n

\n\n {insectInfo && (\n

\n {insectInfo.markdownContent}\n

\n )}\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 (request.method === \"POST\" && new URL(request.url).pathname === \"/identify\") {\n const formData = await request.formData();\n const imageFile = formData.get(\"image\");\n\n // Convert image to base64\n const imageBase64 = await imageFile.arrayBuffer()\n .then(buffer => btoa(String.fromCharCode.apply(null, new Uint8Array(buffer))));\n\n const prompt = `\n Identify this insect and provide a detailed markdown-formatted response including:\n - Common Name\n - Scientific Name\n - Habitat/Origin\n - Collector's Estimated Price Range\n - Detailed Description\n - Unique Characteristics\n - Conservation Status\n\n Format the response strictly in markdown, with clear sections and bullet points.\n `;\n\n try {\n // Grok API call\n const response = await fetch(\"https://api.grok.x.ai/v1/vision/generate\", {\n method: \"POST\",\n headers: {\n \"Authorization\": `Bearer ${Deno.env.get(\"GROK_API_KEY\")}`,\n \"Content-Type\": \"application/json\",\n },\n body: JSON.stringify({\n prompt: prompt,\n image: {\n data: imageBase64,\n mime_type: imageFile.type,\n },\n max_tokens: 1000,\n temperature: 0.7,\n }),\n });\n\n if (!response.ok) {\n throw new Error(`Grok API error: ${response.status}`);\n }\n\n const result = await response.json();\n\n const insectInfo = {\n markdownContent: result.choices[0].text, // Adjust based on actual Grok API response format\n };\n\n return new Response(JSON.stringify(insectInfo), {\n headers: { \"Content-Type\": \"application/json\" },\n });\n } catch (error) {\n return new Response(JSON.stringify({ error: error.message }), { status: 500 });\n }\n }\n\n return new Response(\n `\n \n \n Insect Identifier \n \n \n \n

\n \n \n \n \n `,\n {\n headers: { \"Content-Type\": \"text/html\" },\n },\n );\n}\n\nconst css = `\nbody {\n background-color: #121212;\n color: #ffffff;\n font-family: 'Spotify', Arial, sans-serif;\n margin: 0;\n padding: 0;\n}\n\n.spotify-container {\n max-width: 600px;\n margin: 0 auto;\n padding: 20px;\n}\n\nheader {\n text-align: center;\n margin-bottom: 30px;\n}\n\n.upload-section {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n}\n\n.file-input {\n color: #1DB954;\n background-color: #282828;\n padding: 10px;\n border-radius: 5px;\n}\n\n.preview-image {\n max-width: 300px;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.identify-button {\n background-color: #1DB954;\n color: black;\n border: none;\n padding: 10px 20px;\n border-radius: 20px;\n cursor: pointer;\n transition: background-color 0.3s;\n}\n\n.identify-button:hover {\n background-color: #1ED760;\n}\n\n.result-card {\n background-color: #282828;\n border-radius: 10px;\n padding: 20px;\n margin-top: 20px;\n text-align: left;\n max-height: 500px;\n overflow-y: auto;\n}\n\n.result-card h1, .result-card h2 {\n color: #1DB954;\n}\n\n.result-card ul {\n padding-left: 20px;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n color: #B3B3B3;\n}\n\nfooter a {\n color: #1DB954;\n text-decoration: none;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/Mashimi/insectIdentifier/code/main.tsx","extension","actionData","errors"]