/** @jsxImportSource https://esm.sh/react@18.2.0 */ import React, { useState, useRef, useCallback } from "https://esm.sh/react@18.2.0"; import { createRoot } from "https://esm.sh/react-dom@18.2.0/client"; // Social Media Platform Configuration const SOCIAL_PLATFORMS = [ { name: 'WhatsApp', icon: '💬', shareUrl: (text: string) => `https://api.whatsapp.com/send?text=${encodeURIComponent(text)}` }, { name: 'X (Twitter)', icon: '𝕏', shareUrl: (text: string) => { // Truncate text to fit X's character limit const truncatedText = text.length > 280 ? text.substring(0, 277) + '...' : text; return `https://x.com/intent/tweet?text=${encodeURIComponent(truncatedText)}`; } }, { name: 'Telegram', icon: '📡', shareUrl: (text: string) => `https://t.me/share/url?url=&text=${encodeURIComponent(text)}` }, { name: 'Facebook', icon: '👥', shareUrl: (text: string) => `https://www.facebook.com/sharer/sharer.php?quote=${encodeURIComponent(text)}` } ]; // Language Configuration const INDIAN_LANGUAGES = [ { code: 'en', name: 'English' }, { code: 'hi', name: 'Hindi' }, { code: 'ta', name: 'Tamil' }, { code: 'te', name: 'Telugu' }, { code: 'ml', name: 'Malayalam' }, { code: 'kn', name: 'Kannada' }, { code: 'mr', name: 'Marathi' }, { code: 'gu', name: 'Gujarati' }, { code: 'bn', name: 'Bengali' }, { code: 'pa', name: 'Punjabi' } ]; // Language-specific translation instructions const LANGUAGE_INSTRUCTIONS: Record = { 'hi': 'Use formal Hindi, following standard medical terminology in Devanagari script.', 'ta': 'Use standard Tamil medical terminology, ensuring clarity for Tamil speakers.', 'te': 'Use clear Telugu medical terminology, maintaining professional medical language.', 'ml': 'Use standard Malayalam medical terms, ensuring precise medical communication.', 'kn': 'Use formal Kannada medical terminology, maintaining professional medical language.', 'mr': 'Use standard Marathi medical terms, ensuring clear and precise communication.', 'gu': 'Use formal Gujarati medical terminology, maintaining professional medical language.', 'bn': 'Use standard Bengali medical terms, ensuring clarity for Bengali speakers.', 'pa': 'Use formal Punjabi medical terminology, maintaining professional medical communication.', 'en': 'Use clear and professional English medical terminology.' }; function SocialShareModal({ analysis, onClose }: { analysis: string, onClose: () => void }) { const handleShare = (platform: { name: string, icon: string, shareUrl: (text: string) => string }) => { const sharePrefix = "🩺 Medicine Label Analysis: "; const shareText = sharePrefix + ( analysis.length > (280 - sharePrefix.length) ? analysis.substring(0, 280 - sharePrefix.length - 3) + '...' : analysis ); const shareUrl = platform.shareUrl(shareText); window.open(shareUrl, '_blank', 'width=600,height=400'); }; return (

Share Analysis

{SOCIAL_PLATFORMS.map(platform => ( ))}

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

🩺 Medicine Label Analyzer

{/* Language Selection */}

Output Language:

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

{errorMessage}

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

)} {/* Hidden Canvas for Photo Capture */}

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

Share Analysis

🩺 Medicine Label Analyzer

Analysis Results

sweetBlackHare