Spaces:
Running
Running
| <html lang="en" data-theme="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Bio-RAG — Medical Hallucination Detector</title> | |
| <link rel="stylesheet" href="/static/css/style.css"> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=IBM+Plex+Mono:wght@400;500&display=swap" rel="stylesheet"> | |
| </head> | |
| <body> | |
| <!-- SIDEBAR --> | |
| <aside class="sidebar" id="sidebar"> | |
| <div class="sidebar-header"> | |
| <button class="sidebar-toggle" id="sidebarToggle" title="Close sidebar"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M3 12h18M3 6h18M3 18h18"/> | |
| </svg> | |
| </button> | |
| <button class="new-chat-btn" id="newChatBtn"> | |
| <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 5v14M5 12h14"/> | |
| </svg> | |
| New Chat | |
| </button> | |
| </div> | |
| <div class="sidebar-history" id="sidebarHistory"> | |
| <!-- Chat history items will be injected here by JS --> | |
| </div> | |
| <div class="sidebar-footer"> | |
| <div class="sidebar-badge"> | |
| <span class="badge-dot"></span> | |
| Diabetes Domain Only | |
| </div> | |
| </div> | |
| </aside> | |
| <!-- MAIN CONTENT --> | |
| <main class="main" id="main"> | |
| <!-- HEADER --> | |
| <header class="header"> | |
| <div class="header-left"> | |
| <button class="header-menu-btn" id="menuBtn" title="Open sidebar"> | |
| <svg width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M3 12h18M3 6h18M3 18h18"/> | |
| </svg> | |
| </button> | |
| <div class="header-brand"> | |
| <span class="brand-icon">🧬</span> | |
| <span class="brand-name">Bio-RAG</span> | |
| <span class="brand-tag">Clinical Fact-Checker</span> | |
| </div> | |
| </div> | |
| <div class="header-right"> | |
| <button class="header-btn" id="headerNewChat" title="New chat"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M12 5v14M5 12h14"/> | |
| </svg> | |
| </button> | |
| <button class="header-btn header-delete-btn" id="headerDeleteChat" title="Delete current chat" style="display: none;"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"> | |
| <path d="M3 6h18M19 6v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6m3 0V4a2 2 0 012-2h4a2 2 0 012 2v2"/> | |
| </svg> | |
| </button> | |
| </div> | |
| </header> | |
| <!-- CHAT AREA --> | |
| <div class="chat-area" id="chatArea"> | |
| <!-- EMPTY STATE / WELCOME --> | |
| <div class="welcome" id="welcomeScreen"> | |
| <div class="welcome-icon">🧬</div> | |
| <h1 class="welcome-title">Bio-RAG</h1> | |
| <p class="welcome-subtitle">Medical Question Answering with Hallucination Detection</p> | |
| <p class="welcome-desc">Ask any question about diabetes. The system retrieves evidence from PubMed, generates an answer, then verifies every claim for accuracy.</p> | |
| <div class="suggestions"> | |
| <button class="suggestion-card" data-question="What are the early symptoms of type 2 diabetes?"> | |
| <span class="suggestion-icon">🔍</span> | |
| <span class="suggestion-text">What are the early symptoms of type 2 diabetes?</span> | |
| </button> | |
| <button class="suggestion-card" data-question="Is metformin safe for diabetic patients with chronic kidney disease?"> | |
| <span class="suggestion-icon">💊</span> | |
| <span class="suggestion-text">Is metformin safe for patients with kidney disease?</span> | |
| </button> | |
| <button class="suggestion-card" data-question="Is insulin dosage adjustment necessary for type 1 diabetic patients with severe renal impairment?"> | |
| <span class="suggestion-icon">⚠️</span> | |
| <span class="suggestion-text">Insulin dosage for diabetics with renal impairment</span> | |
| </button> | |
| <button class="suggestion-card" data-question="Are arterial stiffness and central arterial wave reflection associated with serum uric acid in patients with coronary artery disease?"> | |
| <span class="suggestion-icon">🚫</span> | |
| <span class="suggestion-text">Test: Non-diabetes question (should be rejected)</span> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- MESSAGES CONTAINER --> | |
| <div class="messages" id="messages"> | |
| <!-- Messages will be injected here by JS --> | |
| </div> | |
| </div> | |
| <!-- INPUT BAR --> | |
| <div class="input-wrapper"> | |
| <div class="input-fade"></div> | |
| <div class="input-bar"> | |
| <div class="input-container"> | |
| <textarea id="questionInput" class="input-field" placeholder="Ask a diabetes-related question..." rows="1" | |
| maxlength="2000"></textarea> | |
| <button class="send-btn" id="sendBtn" disabled title="Send message"> | |
| <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"> | |
| <path d="M12 19V5M5 12l7-7 7 7"/> | |
| </svg> | |
| </button> | |
| </div> | |
| <p class="input-disclaimer">Bio-RAG verifies claims against PubMed evidence. Not a substitute for professional medical advice.</p> | |
| </div> | |
| </div> | |
| </main> | |
| <!-- DELETE CONFIRMATION MODAL --> | |
| <div class="delete-modal" id="deleteModal"> | |
| <div class="delete-modal-content"> | |
| <div class="delete-modal-title">Delete Chat?</div> | |
| <div class="delete-modal-text">Are you sure you want to delete this conversation? This action cannot be undone.</div> | |
| <div class="delete-modal-actions"> | |
| <button class="delete-modal-btn cancel" id="deleteCancelBtn">Cancel</button> | |
| <button class="delete-modal-btn confirm" id="deleteConfirmBtn">Delete</button> | |
| </div> | |
| </div> | |
| </div> | |
| <script src="/static/js/app.js"></script> | |
| </body> | |
| </html> | |