Spaces:
Running
Running
File size: 5,342 Bytes
2a2c039 5cb4c11 2a2c039 5cb4c11 2a2c039 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 | <!DOCTYPE html>
<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>
|