/** @jsxImportSource https://esm.sh/react */ import React, { useState } from "https://esm.sh/react"; import { createRoot } from "https://esm.sh/react-dom/client"; import ReactMarkdown from "https://esm.sh/react-markdown"; function App() { const [selectedFile, setSelectedFile] = useState(null); const [insectInfo, setInsectInfo] = useState(null); const [isLoading, setIsLoading] = useState(false); const handleFileUpload = (event) => { const file = event.target.files[0]; setSelectedFile(file); }; const identifyInsect = async () => { if (!selectedFile) return; setIsLoading(true); const formData = new FormData(); formData.append("image", selectedFile); try { const response = await fetch("/identify", { method: "POST", body: formData, }); const result = await response.json(); setInsectInfo(result); } catch (error) { console.error("Identification failed", error); } finally { setIsLoading(false); } }; return (

🐞 Insect Identifier

{selectedFile && (

)}

{insectInfo && (

{insectInfo.markdownContent}

)}

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

`, { headers: { "Content-Type": "text/html" }, }, ); } const css = ` body { background-color: #121212; color: #ffffff; font-family: 'Spotify', Arial, sans-serif; margin: 0; padding: 0; } .spotify-container { max-width: 600px; margin: 0 auto; padding: 20px; } header { text-align: center; margin-bottom: 30px; } .upload-section { display: flex; flex-direction: column; align-items: center; gap: 20px; } .file-input { color: #1DB954; background-color: #282828; padding: 10px; border-radius: 5px; } .preview-image { max-width: 300px; border-radius: 10px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); } .identify-button { background-color: #1DB954; color: black; border: none; padding: 10px 20px; border-radius: 20px; cursor: pointer; transition: background-color 0.3s; } .identify-button:hover { background-color: #1ED760; } .result-card { background-color: #282828; border-radius: 10px; padding: 20px; margin-top: 20px; text-align: left; max-height: 500px; overflow-y: auto; } .result-card h1, .result-card h2 { color: #1DB954; } .result-card ul { padding-left: 20px; } footer { text-align: center; margin-top: 20px; color: #B3B3B3; } footer a { color: #1DB954; text-decoration: none; } `;

Mashimi