\n {/* App Name Section */}\n

MEDIANALIZE

\n\n

\n {imagePreview ? (\n <>\n $\"Preview\"$ \n \n \n ) : (\n

📷 Drag & Drop or Click to Upload Medical Image

\n Supported formats: PNG, JPEG, WEBP\n

\n )}\n \n

\n Age\n setAge(e.target.value)}\n />\n

\n Gender\n \n

\n \n

\n\n

\n {isLoading && (\n

Generating medical insights...

\n )}\n {!isLoading && Object.keys(analysisResult).length > 0 && (\n <>\n {analysisResult.diagnosis && (\n

🩺 Diagnosis

{analysisResult.diagnosis}

\n )}\n {analysisResult.possibleCauses && (\n

🔍 Possible Causes

{cause}

\n )}\n {analysisResult.symptoms && (\n

📋 Symptoms

{symptom}

\n )}\n {analysisResult.treatments && (\n

💊 Suggested Treatments

{treatment}

\n )}\n \n {/* Disclaimer Section */}\n

🚨 MEDIANALIZE AI can make mistakes—always consult your doctor.

\n \n )}\n

\n\n {/* Footer Section */}\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 === '/analyze') {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const body = await request.json();\n const { age, gender } = body;\n\n // Simulate OCR (in real-world, you'd use a proper OCR service)\n const mockOcrResult = \"Medical scan showing potential lung inflammation\";\n\n try {\n const completion = await openai.chat.completions.create({\n messages: [\n { \n role: \"system\", \n content: \"You are a medical AI assistant providing professional medical insights.\" \n },\n { \n role: \"user\", \n content: `Patient Details: Age ${age}, Gender ${gender}\n OCR Result: ${mockOcrResult}\n \n Please provide a comprehensive medical analysis including:\n 1. Potential Diagnosis\n 2. Possible Medical Causes\n 3. Relevant Symptoms\n 4. Suggested Treatments\n\n Be concise and professional.` \n }\n ],\n model: \"gpt-4o-mini\",\n max_tokens: 300,\n });\n\n const analysis = completion.choices[0].message.content;\n const parsedAnalysis = parseAnalysis(analysis);\n\n return new Response(JSON.stringify(parsedAnalysis), {\n headers: { 'Content-Type': 'application/json' }\n });\n } catch (error) {\n console.error('OpenAI Analysis Error:', error);\n return new Response(JSON.stringify({\n diagnosis: 'Unable to generate analysis',\n possibleCauses: ['System error'],\n symptoms: ['N/A'],\n treatments: ['Consult a healthcare professional']\n }), {\n status: 500,\n headers: { 'Content-Type': 'application/json' }\n });\n }\n }\n\n return new Response(`\n \n \n MEDIANALIZE - Medical AI Analyzer\n \n \n \n \n \n

\n \n \n \n \n `, {\n headers: { 'Content-Type': 'text/html' }\n });\n}\n\nfunction parseAnalysis(analysis: string) {\n // Basic parsing of OpenAI response\n const sections = analysis.split('\\n\\n');\n return {\n diagnosis: sections[0]?.replace('Diagnosis: ', ''),\n possibleCauses: sections[1]?.split('\\n').map(cause => cause.replace('- ', '')),\n symptoms: sections[2]?.split('\\n').map(symptom => symptom.replace('- ', '')),\n treatments: sections[3]?.split('\\n').map(treatment => treatment.replace('- ', ''))\n };\n}\n\nconst css = `\n:root {\n --primary-color: #3f51b5;\n --secondary-color: #ff4081;\n --background-color: #f4f4f4;\n --text-color: #333;\n}\n\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: 'Roboto', sans-serif;\n line-height: 1.6;\n color: var(--text-color);\n background-color: var(--background-color);\n}\n\n.medical-ai-container {\n max-width: 900px;\n margin: 20px auto;\n background: white;\n border-radius: 12px;\n box-shadow: 0 10px 25px rgba(0,0,0,0.1);\n overflow: hidden;\n padding: 25px;\n}\n\n.dropzone {\n position: relative;\n border: 3px dashed var(--primary-color);\n border-radius: 12px;\n padding: 40px;\n text-align: center;\n cursor: pointer;\n transition: all 0.3s ease;\n}\n\n.dropzone:hover {\n background-color: rgba(63, 81, 181, 0.05);\n border-color: var(--secondary-color);\n}\n\n.preview-image {\n max-width: 100%;\n max-height: 400px;\n object-fit: contain;\n border-radius: 8px;\n}\n\n.clear-image-btn {\n position: absolute;\n top: 10px;\n right: 10px;\n background: rgba(255,0,0,0.7);\n color: white;\n border: none;\n border-radius: 50%;\n width: 30px;\n height: 30px;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n}\n\n.patient-info {\n display: flex;\n gap: 15px;\n margin-top: 20px;\n}\n\n.input-group {\n flex: 1;\n display: flex;\n flex-direction: column;\n}\n\n.input-group label {\n margin-bottom: 5px;\n color: var(--primary-color);\n font-weight: 500;\n}\n\n.patient-info input, \n.patient-info select {\n padding: 12px;\n border: 1px solid #ddd;\n border-radius: 8px;\n font-size: 16px;\n}\n\n.analyze-btn {\n padding: 12px 20px;\n background-color: var(--primary-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.3s;\n align-self: flex-end;\n}\n\n.analyze-btn:disabled {\n background-color: #a0a0a0;\n cursor: not-allowed;\n}\n\n.analysis-section {\n margin-top: 25px;\n}\n\n.result-card {\n background-color: #f9f9f9;\n border-left: 6px solid var(--primary-color);\n padding: 20px;\n margin-bottom: 15px;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.05);\n}\n\n.result-card h3 {\n margin-bottom: 10px;\n color: var(--primary-color);\n}\n\n.result-card ul {\n padding-left: 20px;\n}\n\n.loading-spinner {\n display: flex;\n flex-direction: column;\n align-items: center;\n justify-content: center;\n padding: 50px;\n}\n\n.spinner {\n border: 4px solid rgba(63, 81, 181, 0.3);\n border-top: 4px solid var(--primary-color);\n border-radius: 50%;\n width: 50px;\n height: 50px;\n animation: spin 1s linear infinite;\n margin-bottom: 15px;\n}\n\n@keyframes spin {\n 0% { transform: rotate(0deg); }\n 100% { transform: rotate(360deg); }\n}\n\n/* App Name Styles */\n.app-name {\n text-align: center;\n margin-bottom: 25px;\n padding: 15px;\n background-color: var(--primary-color);\n color: white;\n border-radius: 8px;\n}\n\n.app-name h1 {\n font-size: 2.5rem;\n font-weight: bold;\n letter-spacing: 2px;\n}\n\n/* Disclaimer Styles */\n.disclaimer {\n background-color: #fff3cd;\n border: 1px solid #ffeeba;\n color: #856404;\n padding: 15px;\n margin-top: 20px;\n border-radius: 8px;\n text-align: center;\n}\n\n/* Footer Styles */\n.app-footer {\n text-align: center;\n padding: 15px;\n background-color: var(--primary-color);\n color: white;\n margin-top: 25px;\n border-radius: 0 0 8px 8px;\n}\n\n@media (max-width: 680px) {\n .medical-ai-container {\n margin: 10px;\n padding: 15px;\n }\n\n .patient-info {\n flex-direction: column;\n }\n\n .dropzone {\n padding: 20px;\n }\n}\n`;","deleted","subdomain",[102],"permalink","https://www.val.town/x/UndiscoverableERA/MEDIANALIZE_PRO/code/Medicalreport.tsx","extension","routes/embed","actionData","errors"]