Share Analysis

\n {SOCIAL_PLATFORMS.map(platform => (\n handleShare(platform)}\n style={{\n background: platform.name === 'X (Twitter)' ? '#000' : 'none',\n color: platform.name === 'X (Twitter)' ? 'white' : 'inherit',\n border: 'none',\n fontSize: '2rem',\n cursor: 'pointer',\n transition: 'transform 0.2s',\n padding: platform.name === 'X (Twitter)' ? '5px 10px' : '0',\n borderRadius: platform.name === 'X (Twitter)' ? '5px' : '0'\n }}\n title={`Share on ${platform.name}`}\n >\n {platform.icon}\n \n ))}\n

\n \n Close\n \n

\n );\n}\n\nfunction App() {\n const [image, setImage] = useState(null);\n const [analysis, setAnalysis] = useState(null);\n const [isLoading, setIsLoading] = useState(false);\n const [cameraActive, setCameraActive] = useState(false);\n const [selectedLanguage, setSelectedLanguage] = useState('en');\n const [errorMessage, setErrorMessage] = useState(null);\n const [showShareModal, setShowShareModal] = useState(false);\n const videoRef = useRef(null);\n const canvasRef = useRef(null);\n const fileInputRef = useRef(null);\n\n const handleImageUpload = (e: React.ChangeEvent) => {\n const file = e.target.files?.[0];\n if (file) {\n // Reset previous states\n setErrorMessage(null);\n setAnalysis(null);\n\n // Validate image\n const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];\n const maxSize = 5 * 1024 * 1024; // 5MB\n\n if (!allowedTypes.includes(file.type)) {\n setErrorMessage('Invalid image format. Please upload a valid image.');\n return;\n }\n\n if (file.size > maxSize) {\n setErrorMessage('Image is too large. Maximum file size is 5MB.');\n return;\n }\n\n setImage(file);\n }\n };\n\n const startCamera = async () => {\n try {\n const stream = await navigator.mediaDevices.getUserMedia({ video: true });\n if (videoRef.current) {\n videoRef.current.srcObject = stream;\n setCameraActive(true);\n // Reset previous states\n setErrorMessage(null);\n setAnalysis(null);\n }\n } catch (error) {\n console.error('Camera access failed', error);\n setErrorMessage('Could not access camera. Please check permissions.');\n }\n };\n\n const capturePhoto = () => {\n if (videoRef.current && canvasRef.current) {\n const context = canvasRef.current.getContext('2d');\n const video = videoRef.current;\n \n // Set canvas to same dimensions as video\n canvasRef.current.width = video.videoWidth;\n canvasRef.current.height = video.videoHeight;\n \n // Draw current video frame to canvas\n context?.drawImage(video, 0, 0, video.videoWidth, video.videoHeight);\n \n // Convert canvas to file\n canvasRef.current.toBlob((blob) => {\n if (blob) {\n const file = new File([blob], 'captured-image.jpg', { type: 'image/jpeg' });\n \n // Reset previous states\n setErrorMessage(null);\n setAnalysis(null);\n\n setImage(file);\n setCameraActive(false);\n \n // Stop video stream\n const stream = video.srcObject as MediaStream;\n const tracks = stream.getTracks();\n tracks.forEach(track => track.stop());\n video.srcObject = null;\n }\n }, 'image/jpeg');\n }\n };\n\n const processImage = async () => {\n if (!image) {\n setErrorMessage('No image uploaded. Please select an image or take a photo.');\n return;\n }\n\n setIsLoading(true);\n setErrorMessage(null);\n setAnalysis(null);\n\n const formData = new FormData();\n formData.append('image', image);\n formData.append('language', selectedLanguage);\n\n try {\n const response = await fetch('/analyze', {\n method: 'POST',\n body: formData\n });\n\n if (!response.ok) {\n const errorText = await response.text();\n throw new Error(errorText || 'Network response was not ok');\n }\n\n const result = await response.text();\n \n // Check if result is empty or just whitespace\n if (!result || /^\\s*$/.test(result)) {\n setErrorMessage('No readable text detected on the medicine label.');\n setAnalysis(null);\n } else {\n setAnalysis(result);\n }\n } catch (error) {\n console.error('Analysis failed', error);\n setErrorMessage(error instanceof Error ? error.message : 'Network error. Please try again.');\n setAnalysis(null);\n } finally {\n setIsLoading(false);\n }\n };\n\n const handleShare = () => {\n if (analysis) {\n setShowShareModal(true);\n }\n };\n\n return (\n

🩺 Medicine Label Analyzer

\n \n {/* Language Selection */}\n

\n \n Output Language:\n \n \n

\n \n {/* Error Message Display */}\n {errorMessage && (\n

\n {errorMessage}\n

\n )}\n \n {/* File Upload */}\n \n\n {/* Camera Capture */}\n \n\n {/* Camera Preview */}\n {cameraActive && (\n

\n )}\n\n {/* Hidden Canvas for Photo Capture */}\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 === '/analyze') {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n try {\n const formData = await request.formData();\n const imageFile = formData.get('image') as File;\n const language = formData.get('language') as string || 'en';\n \n if (!imageFile) {\n return new Response('No image uploaded', { status: 400 });\n }\n\n // Additional server-side validation\n const allowedTypes = ['image/jpeg', 'image/png', 'image/webp'];\n const maxSize = 5 * 1024 * 1024; // 5MB\n\n if (!allowedTypes.includes(imageFile.type)) {\n return new Response('Invalid image type', { status: 400 });\n }\n\n if (imageFile.size > maxSize) {\n return new Response('Image too large', { status: 400 });\n }\n\n // Limit processing time and prevent stack overflow\n const controller = new AbortController();\n const timeoutId = setTimeout(() => controller.abort(), 25000); // 25 seconds timeout\n\n const imageBytes = await imageFile.arrayBuffer();\n const base64Image = btoa(\n String.fromCharCode(...new Uint8Array(imageBytes))\n );\n\n try {\n const completion = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: [\n {\n role: \"system\", \n content: `You are a medical expert analyzing a medicine label. \n STRICT REQUIREMENTS:\n 1. If no text is clearly visible, respond with a clear message about image quality.\n 2. Provide a COMPREHENSIVE medical analysis in the specified language: ${language}\n 3. Language-Specific Instruction: ${LANGUAGE_INSTRUCTIONS[language]}\n 4. Detailed Analysis Sections (ALL IN ${language.toUpperCase()}):\n a) दवा का नाम / Medicine Name\n b) मुख्य उपयोग / Primary Uses\n c) संभावित रोग / Potential Conditions Treated\n d) मात्रा निर्देश / Dosage Guidelines\n e) संभावित दुष्प्रभाव / Potential Side Effects\n f) रोकथाम रणनीतियाँ / Prevention Strategies\n g) सावधानियाँ / Precautions and Warnings\n\n CRITICAL: \n - Entire response MUST be in the target language with NO English mixing\n - Use professional, clear medical terminology\n - If image is unreadable, explain why in the target language`\n },\n {\n role: \"user\", \n content: [\n {\n type: \"text\", \n text: \"Analyze this medicine label and provide detailed medical insights\"\n },\n {\n type: \"image_url\", \n image_url: { url: `data:image/jpeg;base64,${base64Image}` }\n }\n ]\n }\n ],\n max_tokens: 500\n }, { signal: controller.signal });\n\n clearTimeout(timeoutId);\n\n const analysis = completion.choices[0].message.content || \n (language === 'en' \n ? \"Unable to generate analysis from the image.\" \n : \"इस छवि से विश्लेषण उत्पन्न करने में असमर्थ।\");\n\n return new Response(analysis, {\n headers: { \n 'Content-Type': 'text/plain; charset=utf-8',\n 'X-Analysis-Status': analysis ? 'success' : 'no_text_detected'\n }\n });\n } catch (processingError) {\n clearTimeout(timeoutId);\n \n // Handle specific error types\n if (processingError instanceof Error) {\n if (processingError.name === 'AbortError') {\n return new Response('Processing timed out', { status: 408 });\n }\n }\n\n console.error('OpenAI processing error:', processingError);\n return new Response(\n language === 'en' \n ? 'Error processing image' \n : 'चित्र को संसाधित करने में त्रुटि', \n { status: 500 }\n );\n }\n\n } catch (error) {\n console.error('Analysis error:', error);\n return new Response(\n 'Error processing image', \n { status: 500 }\n );\n }\n }\n\n return new Response(`\n \n \n Medicine Label Analyzer\n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html; charset=utf-8' }\n });\n}","deleted","label",[99],"permalink","https://www.val.town/x/imnk/sweetBlackHare/code/main.tsx","extension","actionData","errors"]

Share Analysis

🩺 Medicine Label Analyzer

Analysis Results