/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; function App() { const [image, setImage] = useState(null); const [analysis, setAnalysis] = useState(null); const [isLoading, setIsLoading] = useState(false); const handleImageUpload = (e: React.ChangeEvent) => { const file = e.target.files?.[0]; if (file) { setImage(file); } }; const processImage = async () => { if (!image) return; setIsLoading(true); const formData = new FormData(); formData.append('image', image); try { const response = await fetch('/analyze', { method: 'POST', body: formData }); const result = await response.text(); setAnalysis(result); } catch (error) { console.error('Analysis failed', error); setAnalysis('Failed to analyze the image. Please try again.'); } finally { setIsLoading(false); } }; return (

🩺 Medicine Label Analyzer

{analysis && (

Analysis Results

{analysis}

)}

View Source

); } 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 === '/analyze') { const { OpenAI } = await import("https://esm.town/v/std/openai"); const openai = new OpenAI(); try { const formData = await request.formData(); const imageFile = formData.get('image') as File; if (!imageFile) { return new Response('No image uploaded', { status: 400 }); } const imageBytes = await imageFile.arrayBuffer(); const base64Image = btoa( String.fromCharCode(...new Uint8Array(imageBytes)) ); const completion = await openai.chat.completions.create({ model: "gpt-4o-mini", messages: [ { role: "system", content: `You are a medical expert analyzing a medicine label. Provide comprehensive information including: 1. Medicine Name 2. Primary Uses 3. Potential Diseases/Conditions Treated 4. Dosage Guidelines 5. Potential Side Effects 6. Prevention Strategies 7. Precautions/Warnings` }, { role: "user", content: [ { type: "text", text: "Analyze this medicine label and provide detailed medical insights" }, { type: "image_url", image_url: { url: `data:image/jpeg;base64,${base64Image}` } } ] } ], max_tokens: 500 }); const analysis = completion.choices[0].message.content || "Unable to generate analysis from the image."; return new Response(analysis, { headers: { 'Content-Type': 'text/plain' } }); } catch (error) { console.error('Analysis error:', error); return new Response('Error processing image', { status: 500 }); } } return new Response(` Medicine Label Analyzer

`, { headers: { 'Content-Type': 'text/html' } }); }

medicineLabelAnalyzerApp