Spaces:
Running
Running
Here is your upgraded and precision-enhanced version of the prompt, transformed into a maximally detailed engineering blueprint request that will produce much longer, richer output when pasted into ChatGPT: Act like a senior full-stack developer, AI systems architect, and healthcare software compliance expert. You specialize in building clinical-grade AI interfaces using Retrieval Augmented Generation (RAG), structured agent workflows, and progressive web application (PWA) technologies. You have deep experience with React, Tailwind, LangChain, LangGraph, Supabase (pgvector), and clinical user experience design. You are now tasked with producing a fully detailed, production-ready system architecture and implementation plan for “NelsonGPT” — a PWA that functions as an AI-powered pediatric medical assistant. This app will replicate the ChatGPT mobile experience but is specifically tailored for pediatric clinicians, residents, and students. It integrates structured RAG pipelines using the Nelson Textbook of Pediatrics as its core evidence base and supports real-time clinical tools like dosage calculators and emergency lookups. Follow this structured, step-by-step instruction set: Step 1 - App Identity, Value Proposition & Clinical Use Case Mapping - Define NelsonGPT's brand identity, tagline, and key differentiators from general AI assistants. - Identify its primary clinical audience segments: pediatricians, residents, interns, final-year med students. - List and elaborate on its top 5 use cases, including: 1. Symptom-to-diagnosis reasoning 2. Weight-based pediatric drug dosage guidance 3. Emergency protocol retrieval (e.g., neonatal resuscitation, anaphylaxis) 4. Developmental milestone tracking 5. Growth chart interpretation Step 2 - UI/UX Architecture & Dark Mode Interface Design - Describe the full React + Tailwind UI hierarchy for a mobile-first, fullscreen app replicating the ChatGPT layout. - Include: - Sticky top navbar with logo, dropdown model selector - Central scrollable chat window (supports markdown, citation toggles) - Bottom persistent tab bar with 4 icons: New Chat, History, Settings, About - Chat interface with rounded input, paper plane icon, microphone placeholder - Smooth typing animation and assistant message fade-in - Toggle switches for timestamps and inline citation view - Apply the dark mode theme palette exactly: - Background: #1e1e1e - Chat container: #121212 - User message bubble: #2a2a2a - Assistant messages: glowing dark gray - Text: #f2f2f2 - Code blocks: dark slate with syntax highlighting (Prism.js or Shiki) Step 3 - PWA Capabilities & App Shell Optimization - Define how `vite-plugin-pwa` will be used to generate the manifest and register service workers. - Create full `manifest.json` with name, short_name, theme_color, icons, and `"display": "standalone"`. - Implement a custom `service-worker.js` for: - Pre-caching static assets - Cache-first for assets, network-first for API - Offline fallback (graceful degraded UI) - Design a loading splash screen with bold NelsonGPT text (centered), sans-serif font, minimal animation, and no logos. Step 4 - Backend & AI Stack Integration (LangChain + LangGraph) - Describe how user queries flow through the stack: 1. React frontend collects query 2. Embedding generated via Hugging Face model 3. Query matched with Supabase vector DB (pgvector extension) 4. LangChain fetches top 3–5 textbook chunks 5. LangGraph routes query through a multi-node workflow 6. Gemini (optional) re-ranks or validates context 7. Mistral LLM generates output 8. Response is returned with inline citations (e.g., “Nelson, pg. 455”) - Illustrate the full LangGraph state diagram including: - Entry node - Retrieval node - Prompt construction node - Generation node - Post-processing/validation node - Exit/response node Step 5 - Frontend Tool Interfaces for Medical Tasks - Architect frontend access for each specialized tool using modal or floating panels: - Dose calculator: weight input + age dropdown → dose result - Emergency protocol lookup: fast search UI with semantic expansion - Milestone search: age or domain (motor, language) based filter - Symptom checker: autocomplete fields, optional structured follow-up - Describe how LangChain tools will be called on backend via router functions based on tool invocation intent. Step 6 - Stack, Frameworks, and Build System - Use: - React 19 + TypeScript + Tailwind CSS - ShadCN UI for dialog, input, popover - react-markdown (preferred) with remark-gfm for tables - Prism.js or Shiki for code rendering - Vite + vite-plugin-pwa for builds - Bun + npm for dual package management - Supabase for auth, vector DB, metadata storage, chat logs - pgvector for embedding storage + ANN search Step 7 - Database & Schema Design - Provide SQL DDL for the following tables: - `nelson_book_of_pediatrics` → id, title, section, page, chunk_text, embedding (vector), token_count, keywords - `pediatric_medical_resource` → id, category, title, link, reference_notes - `chat_sessions` → id, user_id, created_at, title - `chat_messages` → id, session_id, role, content, citation_links, timestamp - Explain Supabase RLS setup and JWT-based access control Step 8 - Developer Setup & Environment - Include `.env.example` with: - `SUPABASE_URL`, `SUPABASE_KEY`, `MISTRAL_API_KEY`, `HF_EMBEDDING_MODEL`, `NEXT_PUBLIC_APP_NAME` - Detail the local bootstrap process: 1. Clone repo 2. Install deps 3. Run Supabase locally or connect to hosted project 4. Load textbook chunks via CLI script 5. Start Vite dev server - Implement auto-scroll on new chat message, typing indicator, and retry button for failed generations. Step 9 - End-to-End Simulation - Walk through this query: “What are the common treatments for otitis media in toddlers?” 1. Query embedded 2. Semantic match retrieves Nelson content from pgvector 3. Top 3 chunks inserted into LangChain system prompt 4. Mistral generates response 5. Citations are added 6. UI renders markdown response with citation toggles enabled Step 10 - Advanced Suggestions - Add hooks for: - Future EMR integration - Growth percentile visualizer - Multilingual support - Web speech API (voice queries) - Telemedicine support - Recommend strategies for hallucination prevention, clinical safety checks, and GDPR-compliant storage Take a deep breath and work on this problem step-by-step. - Initial Deployment
6002c17
verified