\n \n

MEDIANALIZE

Your AI Medical Interpretation Assistant

Get expert medical insights, even with imperfect descriptions

\n \n

\n );\n}\n\nfunction App() {\n const [messages, setMessages] = useState([\n {\n role: \"assistant\", \n content: \"🩺 Welcome to MEDIANALIZE, your AI medical interpretation assistant. I can help clarify and understand your medical concerns, even if your message isn't perfectly written.\"\n }\n ]);\n const [input, setInput] = useState(\"\");\n const [isLoading, setIsLoading] = useState(false);\n const [theme, setTheme] = useState('light');\n const [isWelcomeScreen, setIsWelcomeScreen] = useState(true);\n const [error, setError] = useState(\"\");\n const messagesEndRef = useRef(null);\n\n const toggleTheme = () => {\n setTheme(prevTheme => prevTheme === 'light' ? 'dark' : 'light');\n };\n\n const scrollToBottom = () => {\n messagesEndRef.current?.scrollIntoView({ behavior: \"smooth\" });\n };\n\n useEffect(scrollToBottom, [messages]);\n\n const handleSubmit = async (e) => {\n e.preventDefault();\n setError(\"\");\n\n if (!input.trim()) return;\n\n const userMessage = { role: \"user\", content: input };\n const updatedMessages = [...messages, userMessage];\n setMessages(updatedMessages);\n setInput(\"\");\n setIsLoading(true);\n\n try {\n const response = await fetch(\"/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ \n messages: updatedMessages,\n rawInput: input \n })\n });\n\n if (!response.ok) {\n throw new Error(\"Medical consultation request failed\");\n }\n\n const reader = response.body?.getReader();\n const decoder = new TextDecoder();\n let aiMessage = { role: \"assistant\", content: \"\" };\n\n while (true) {\n const { done, value } = await reader.read();\n if (done) break;\n\n const chunk = decoder.decode(value);\n aiMessage.content += chunk;\n setMessages(prev => [...prev.slice(0, -1), aiMessage]);\n }\n } catch (error) {\n console.error(\"Error:\", error);\n setMessages(prev => [...prev, { \n role: \"assistant\", \n content: \"I apologize, but there was an issue processing your medical query. Please try again or consult a healthcare professional.\" \n }]);\n } finally {\n setIsLoading(false);\n }\n };\n\n if (isWelcomeScreen) {\n return (\n

\n setIsWelcomeScreen(false)} />\n

\n );\n }\n\n return (\n

\n \n

MEDIANALIZE

\n \n

\n {messages.map((msg, index) => (\n

\n {msg.content}\n

\n ))}\n {error && (\n

\n {error}\n

\n )}\n {isLoading && (\n

\n Analyzing and interpreting your message...\n

\n )}\n

\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 === \"/chat\") {\n const { OpenAI } = await import(\"https://esm.town/v/std/openai\");\n const openai = new OpenAI();\n\n const { messages, rawInput } = await request.json();\n\n // Preprocessing system message to interpret and correct input\n const constrainedMessages = [\n {\n role: \"system\", \n content: \"You are an advanced AI medical interpretation assistant. \" +\n \"Your primary task is to carefully analyze and interpret medical queries, \" +\n \"even if they are poorly written or contain errors. \" +\n \"Follow these steps:\\n\" +\n \"1. Identify the core medical concern in the input\\n\" +\n \"2. Correct any spelling or grammatical errors\\n\" +\n \"3. Clarify ambiguous medical terms or descriptions\\n\" +\n \"4. Provide a clear, professional medical interpretation\\n\" +\n \"5. If the input is unclear, ask clarifying questions\\n\" +\n \"6. Always maintain a compassionate and helpful tone\\n\\n\" +\n `Raw patient input: \"${rawInput}\"`\n },\n {\n role: \"user\",\n content: \"Help me interpret this medical input and provide the most accurate medical guidance possible.\"\n },\n ...messages\n ];\n\n const stream = await openai.chat.completions.create({\n model: \"gpt-4o-mini\",\n messages: constrainedMessages,\n stream: true,\n max_tokens: 300\n });\n\n const encoder = new TextEncoder();\n const readableStream = new ReadableStream({\n async start(controller) {\n for await (const chunk of stream) {\n const content = chunk.choices[0]?.delta?.content || \"\";\n if (content) {\n controller.enqueue(encoder.encode(content));\n }\n }\n controller.close();\n }\n });\n\n return new Response(readableStream, {\n headers: { \n \"Content-Type\": \"text/plain\",\n \"Cache-Control\": \"no-cache\"\n }\n });\n }\n\n return new Response(`\n \n \n MEDIANALIZE - Medical Input Interpreter\n \n \">\n \n \n \n

\n \n \n \n \n `, {\n headers: { \"Content-Type\": \"text/html\" }\n });\n}\n\nconst css = `\n:root {\n --bg-primary: #f4f4f4;\n --bg-secondary: #ffffff;\n --text-primary: #333;\n --text-secondary: #666;\n --accent-color: #4CAF50;\n --accent-hover: #45a049;\n}\n\n.dark {\n --bg-primary: #121212;\n --bg-secondary: #1E1E1E;\n --text-primary: #E0E0E0;\n --text-secondary: #B0B0B0;\n --accent-color: #81C784;\n --accent-hover: #66BB6A;\n}\n\nbody {\n font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;\n margin: 0;\n padding: 0;\n transition: background-color 0.3s ease;\n}\n\n.app-container {\n display: flex;\n flex-direction: column;\n height: 100vh;\n background-color: var(--bg-primary);\n color: var(--text-primary);\n transition: all 0.3s ease;\n background-image: linear-gradient(\n 135deg, \n rgba(76, 175, 80, 0.1) 0%, \n rgba(129, 199, 132, 0.1) 50%, \n rgba(69, 160, 73, 0.1) 100%\n );\n background-size: 400% 400%;\n animation: gradientBG 15s ease infinite;\n}\n\n@keyframes gradientBG {\n 0% { background-position: 0% 50%; }\n 50% { background-position: 100% 50%; }\n 100% { background-position: 0% 50%; }\n}\n\n.chat-header {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding: 15px;\n background-color: rgba(255, 255, 255, 0.9);\n box-shadow: 0 2px 5px rgba(0,0,0,0.1);\n}\n\n.logo-container {\n display: flex;\n align-items: center;\n gap: 10px;\n}\n\n.logo-container h2 {\n margin: 0;\n color: var(--accent-color);\n}\n\n.theme-toggle {\n background: none;\n border: none;\n font-size: 24px;\n cursor: pointer;\n transition: transform 0.3s ease;\n}\n\n.theme-toggle:hover {\n transform: scale(1.1);\n}\n\n.welcome-container {\n display: flex;\n flex-direction: column;\n justify-content: center;\n align-items: center;\n height: 100%;\n text-align: center;\n}\n\n.welcome-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 20px;\n padding: 40px;\n background-color: rgba(255, 255, 255, 0.9);\n border-radius: 15px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n}\n\n.welcome-content h1 {\n color: var(--accent-color);\n margin: 0;\n}\n\n.welcome-content button {\n background-color: var(--accent-color);\n color: white;\n border: none;\n padding: 10px 20px;\n border-radius: 5px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.welcome-content button:hover {\n background-color: var(--accent-hover);\n}\n\n.chat-container {\n flex-grow: 1;\n display: flex;\n flex-direction: column;\n max-width: 800px;\n margin: 0 auto;\n width: 100%;\n background-color: rgba(255, 255, 255, 0.9);\n}\n\n.messages {\n flex-grow: 1;\n overflow-y: auto;\n padding: 20px;\n display: flex;\n flex-direction: column;\n}\n\n.message {\n margin-bottom: 15px;\n padding: 12px;\n border-radius: 12px;\n max-width: 80%;\n line-height: 1.4;\n}\n\n.message.user {\n align-self: flex-end;\n background-color: var(--accent-color);\n color: white;\n margin-left: auto;\n}\n\n.message.assistant {\n align-self: flex-start;\n background-color: rgba(244, 244, 244, 0.7);\n color: var(--text-primary);\n margin-right: auto;\n}\n\n.message.loading {\n color: var(--text-secondary);\n font-style: italic;\n}\n\n.message.error {\n background-color: #ffdddd;\n color: #ff0000;\n border: 1px solid #ff0000;\n}\n\n.message.interpretation-note {\n background-color: #e6f3ff;\n color: #0066cc;\n font-style: italic;\n border-left: 4px solid #0066cc;\n}\n\n.input-area {\n display: flex;\n padding: 20px;\n background-color: rgba(255, 255, 255, 0.9);\n border-top: 1px solid var(--bg-primary);\n}\n\n.input-area input {\n flex-grow: 1;\n padding: 12px;\n border: 1px solid var(--bg-primary);\n border-radius: 8px;\n margin-right: 10px;\n background-color: rgba(244, 244, 244, 0.7);\n color: var(--text-primary);\n}\n\n.input-area button {\n padding: 12px 20px;\n background-color: var(--accent-color);\n color: white;\n border: none;\n border-radius: 8px;\n cursor: pointer;\n transition: background-color 0.3s ease;\n}\n\n.input-area button:hover {\n background-color: var(--accent-hover);\n}\n\n.input-area button:disabled {\n background-color: var(--text-secondary);\n cursor: not-allowed;\n}\n\n.app-footer {\n text-align: center;\n padding: 15px;\n background-color: rgba(255, 255, 255, 0.9);\n color: var(--text-secondary);\n font-size: 0.9em;\n border-top: 1px solid var(--bg-primary);\n}\n\n.footer-content {\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 10px;\n}\n\n.footer-links {\n display: flex;\n gap: 15px;\n}\n\n.footer-links a {\n color: var(--text-secondary);\n text-decoration: none;\n transition: color 0.3s ease;\n}\n\n.footer-links a:hover {\n color: var(--accent-color);\n}\n\n@media (max-width: 600px) {\n .chat-container {\n width: 100%;\n max-width: 100%;\n }\n \n .message {\n max-width: 90%;\n }\n\n .footer-links {\n flex-direction: column;\n align-items: center;\n }\n}\n`;","deleted","label",[99],"permalink","https://www.val.town/x/ritam_09/adaptableLimePelican/code/main.tsx","extension","actionData","errors"]