Spaces:

UI-USU-Collaboration-ERI
/

WHEC_Chatbot_preview

Sleeping

App Files Files Community

avakanski commited on Dec 25, 2025

Commit

7e2bf7c

verified ·

1 Parent(s): 8708015

Upload index.html

Browse files

Files changed (1) hide show

static/index.html +383 -67

static/index.html CHANGED Viewed

@@ -1,120 +1,426 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>US Army RAG System</title>
-    <link href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&display=swap" rel="stylesheet">
     <style>
-        /* Previous styles remain... adding new ones for images */
-        .results-section {
-            margin-bottom: 2.5rem;
         }
         .images-grid {
             display: grid;
             gap: 1.5rem;
-            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-            margin-top: 1.5rem;
         }
         .image-card {
-            background: rgba(15, 23, 42, 0.5);
-            border-radius: 1rem;
             overflow: hidden;
-            border: 1px solid rgba(255, 255, 255, 0.1);
-            transition: transform 0.2s;
         }
         .image-card:hover {
-            transform: scale(1.02);
-            z-index: 10;
         }
         .image-card img {
             width: 100%;
-            height: 200px;
             object-fit: cover;
-            display: block;
-        }
-        .image-card.full-view {
-             position: fixed;
-             top: 50%;
-             left: 50%;
-             transform: translate(-50%, -50%);
-             width: 80vw;
-             height: 80vh;
-             z-index: 1000;
-             background: black;
         }
-        .image-card.full-view img {
-             object-fit: contain;
-             height: 100%;
         }
         .image-meta {
             padding: 1rem;
-            font-size: 0.85rem;
-            color: #cbd5e1;
         }
         .image-filename {
             font-weight: 600;
-            color: #fff;
-            margin-bottom: 0.25rem;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
-            <h1>Medical Research RAG</h1>
-            <p class="subtitle">Multimodal AI (Text + Images) Analysis</p>
         </header>
-        <div class="search-box">
             <div class="input-group">
-                <input type="text" id="questionInput" placeholder="Ask a question (e.g., 'Show me images of...')" autocomplete="off">
                 <button id="searchBtn" onclick="askQuestion()">
-                    Ask AI
                 </button>
             </div>
         </div>
         <div id="loading">
             <div class="spinner"></div>
-            <p>Analyzing medical papers & images...</p>
         </div>
         <div id="results">
             <!-- ANSWER SECTION -->
             <div class="answer-card">
-                <div class="section-title">
-                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M21 11.5a8.38 8.38 0 0 1-.9 3.8 8.5 8.5 0 0 1-7.6 4.7 8.38 8.38 0 0 1-3.8-.9L3 21l1.9-5.7a8.38 8.38 0 0 1-.9-3.8 8.5 8.5 0 0 1 4.7-7.6 8.38 8.38 0 0 1 3.8-.9h.5a8.48 8.48 0 0 1 8 8v.5z"/></svg>
-                    AI Consolidated Answer
-                </div>
                 <div id="answerText" class="answer-text"></div>
             </div>
             <!-- IMAGES SECTION -->
-            <div id="imagesSection" class="results-section" style="display: none;">
-                <div class="section-title">
-                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M21 19V5c0-1.1-.9-2-2-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2zM8.5 13.5l2.5 3.01L14.5 12l4.5 6H5l3.5-4.5z"/></svg>
-                    Relevant Images
                 </div>
                 <div id="imagesGrid" class="images-grid"></div>
             </div>
             <!-- TEXT SOURCES SECTION -->
-            <div id="textsSection" class="results-section" style="display: none;">
-                <div class="section-title">
-                    <svg width="16" height="16" fill="currentColor" viewBox="0 0 24 24"><path d="M14 2H6c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6zm2 16H8v-2h8v2zm0-4H8v-2h8v2zm-3-5V3.5L18.5 9H13z"/></svg>
-                    Reference Texts
                 </div>
                 <div id="textsGrid" class="sources-grid"></div>
             </div>
@@ -127,15 +433,15 @@
         const loading = document.getElementById('loading');
         const results = document.getElementById('results');
         const answerText = document.getElementById('answerText');
         const imagesSection = document.getElementById('imagesSection');
         const imagesGrid = document.getElementById('imagesGrid');
         const textsSection = document.getElementById('textsSection');
         const textsGrid = document.getElementById('textsGrid');
         // Allow Enter key to submit
-        input.addEventListener('keypress', function(e) {
             if (e.key === 'Enter') {
                 askQuestion();
             }
@@ -147,10 +453,11 @@
             // UI State updates
             searchBtn.disabled = true;
             input.disabled = true;
             results.style.display = 'none';
             loading.style.display = 'block';
             // Reset sections
             imagesSection.style.display = 'none';
             textsSection.style.display = 'none';
@@ -167,24 +474,28 @@
                 if (!response.ok) throw new Error('Failed to get response');
                 const data = await response.json();
-                // 1. Display Answer
-                answerText.textContent = data.answer;
                 // 2. Display Images
                 if (data.images && data.images.length > 0) {
                     imagesSection.style.display = 'block';
                     data.images.forEach(img => {
                         const div = document.createElement('div');
                         div.className = 'image-card';
-                        // Add click to view full size could be implemented here
                         div.innerHTML = `
                             <a href="${img.path}" target="_blank">
                                 <img src="${img.path}" alt="${img.filename}" loading="lazy">
                             </a>
                             <div class="image-meta">
-                                <div class="image-filename">${img.filename}</div>
-                                <div>Page ${img.page || '?'} • Score: ${img.score?.toFixed(2)}</div>
                             </div>
                         `;
                         imagesGrid.appendChild(div);
@@ -199,10 +510,10 @@
                         div.className = 'source-card';
                         div.innerHTML = `
                             <div class="source-title">${txt.file || 'Document'}</div>
                             <div class="source-meta">
-                                Page ${txt.page || 'N/A'} • Score: ${txt.score?.toFixed(2)}
                             </div>
-                            <div class="source-excerpt">"...${txt.text}..."</div>
                         `;
                         textsGrid.appendChild(div);
                     });
@@ -211,15 +522,20 @@
                 results.style.display = 'block';
             } catch (error) {
-                alert('Error querying system. Check console/logs.');
                 console.error(error);
             } finally {
                 loading.style.display = 'none';
                 searchBtn.disabled = false;
                 input.disabled = false;
                 input.focus();
             }
         }
     </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Multimodal RAG • AI Research Assistant</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&family=Space+Grotesk:wght@300;400;500;600;700&display=swap"
+        rel="stylesheet">
     <style>
+        :root {
+            --primary: #3b82f6;
+            --primary-glow: rgba(59, 130, 246, 0.5);
+            --bg-dark: #0f172a;
+            --bg-card: #1e293b;
+            --text-main: #f8fafc;
+            --text-muted: #94a3b8;
+            --border-color: #334155;
+            --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
+        }
+        * {
+            box-sizing: border-box;
+            margin: 0;
+            padding: 0;
+        }
+        body {
+            font-family: 'Outfit', sans-serif;
+            background-color: var(--bg-dark);
+            color: var(--text-main);
+            min-height: 100vh;
+            line-height: 1.6;
+            background-image:
+                radial-gradient(circle at 10% 20%, rgba(59, 130, 246, 0.1) 0%, transparent 20%),
+                radial-gradient(circle at 90% 80%, rgba(139, 92, 246, 0.1) 0%, transparent 20%);
+        }
+        .container {
+            max-width: 1200px;
+            margin: 0 auto;
+            padding: 2rem;
+            display: flex;
+            flex-direction: column;
+            gap: 2rem;
+        }
+        header {
+            text-align: center;
+            padding: 4rem 0 2rem;
+            animation: fadeInDown 0.8s ease-out;
+        }
+        h1 {
+            font-family: 'Space Grotesk', sans-serif;
+            font-size: 3.5rem;
+            font-weight: 700;
+            background: var(--accent-gradient);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            margin-bottom: 0.5rem;
+            letter-spacing: -0.02em;
+        }
+        .subtitle {
+            color: var(--text-muted);
+            font-size: 1.25rem;
+            font-weight: 300;
+        }
+        /* Search Section */
+        .search-container {
+            max-width: 800px;
+            margin: 0 auto;
+            width: 100%;
+            position: relative;
+            z-index: 10;
+        }
+        .input-group {
+            position: relative;
+            display: flex;
+            gap: 1rem;
+            background: rgba(30, 41, 59, 0.7);
+            padding: 0.5rem;
+            border-radius: 1rem;
+            border: 1px solid var(--border-color);
+            backdrop-filter: blur(12px);
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            transition: all 0.3s ease;
+        }
+        .input-group:focus-within {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
+            transform: translateY(-2px);
+        }
+        input[type="text"] {
+            flex: 1;
+            background: transparent;
+            border: none;
+            padding: 1rem 1.5rem;
+            font-size: 1.1rem;
+            color: white;
+            font-family: 'Outfit', sans-serif;
+            width: 100%;
+        }
+        input[type="text"]:focus {
+            outline: none;
+        }
+        input[type="text"]::placeholder {
+            color: #64748b;
+        }
+        button#searchBtn {
+            background: var(--accent-gradient);
+            color: white;
+            border: none;
+            padding: 0 2rem;
+            border-radius: 0.75rem;
+            font-weight: 600;
+            font-size: 1rem;
+            cursor: pointer;
+            transition: opacity 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        button#searchBtn:hover {
+            opacity: 0.9;
+        }
+        button#searchBtn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        /* Loading State */
+        #loading {
+            display: none;
+            text-align: center;
+            padding: 2rem;
+        }
+        .spinner {
+            width: 40px;
+            height: 40px;
+            border: 3px solid rgba(59, 130, 246, 0.3);
+            border-radius: 50%;
+            border-top-color: var(--primary);
+            animation: spin 1s linear infinite;
+            margin: 0 auto 1rem;
+        }
+        @keyframes spin {
+            to {
+                transform: rotate(360deg);
+            }
+        }
+        /* Results Area */
+        #results {
+            display: none;
+            /* Hidden by default */
+            max-width: 1000px;
+            margin: 0 auto;
+            width: 100%;
+            animation: fadeInUp 0.5s ease-out;
+        }
+        .section-title {
+            display: flex;
+            align-items: center;
+            gap: 0.75rem;
+            color: var(--text-muted);
+            font-size: 0.9rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            font-weight: 600;
+            margin-bottom: 1rem;
+            margin-top: 2rem;
+            border-bottom: 1px solid var(--border-color);
+            padding-bottom: 0.5rem;
         }
+        .answer-card {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            padding: 2rem;
+            border-radius: 1rem;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
+            position: relative;
+            overflow: hidden;
+        }
+        .answer-text {
+            font-size: 1.1rem;
+            color: #e2e8f0;
+            white-space: pre-wrap;
+            line-height: 1.8;
+        }
+        /* Image Grids */
         .images-grid {
             display: grid;
+            grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
             gap: 1.5rem;
         }
         .image-card {
+            background: var(--bg-card);
+            border-radius: 0.75rem;
             overflow: hidden;
+            border: 1px solid var(--border-color);
+            transition: all 0.3s ease;
+            position: relative;
+            group: card;
         }
         .image-card:hover {
+            transform: translateY(-5px);
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+            border-color: var(--primary);
+        }
+        .image-card a {
+            display: block;
+            overflow: hidden;
+            height: 180px;
         }
         .image-card img {
             width: 100%;
+            height: 100%;
             object-fit: cover;
+            transition: transform 0.5s ease;
         }
+        .image-card:hover img {
+            transform: scale(1.1);
         }
         .image-meta {
             padding: 1rem;
+            border-top: 1px solid var(--border-color);
         }
         .image-filename {
             font-weight: 600;
+            color: #f1f5f9;
+            font-size: 0.95rem;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
+            margin-bottom: 0.25rem;
+        }
+        .image-stats {
+            display: flex;
+            justify-content: space-between;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+        }
+        /* Text Sources */
+        .sources-grid {
+            display: grid;
+            gap: 1rem;
+            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+        }
+        .source-card {
+            background: rgba(30, 41, 59, 0.4);
+            border: 1px solid var(--border-color);
+            border-radius: 0.75rem;
+            padding: 1.25rem;
+            transition: background 0.2s;
+        }
+        .source-card:hover {
+            background: rgba(30, 41, 59, 0.8);
+            border-color: #475569;
+        }
+        .source-title {
+            font-weight: 600;
+            color: var(--primary);
+            margin-bottom: 0.5rem;
+            font-size: 0.95rem;
+        }
+        .source-excerpt {
+            font-style: italic;
+            color: #cbd5e1;
+            font-size: 0.9rem;
+            background: rgba(0, 0, 0, 0.2);
+            padding: 0.75rem;
+            border-radius: 0.5rem;
+            border-left: 3px solid var(--primary);
+        }
+        .source-meta {
+            margin-top: 0.75rem;
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            text-align: right;
+        }
+        /* Animations */
+        @keyframes fadeInDown {
+            from {
+                opacity: 0;
+                transform: translateY(-20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(20px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+        /* Scrollbar */
+        ::-webkit-scrollbar {
+            width: 8px;
+        }
+        ::-webkit-scrollbar-track {
+            background: var(--bg-dark);
+        }
+        ::-webkit-scrollbar-thumb {
+            background: var(--border-color);
+            border-radius: 4px;
+        }
+        ::-webkit-scrollbar-thumb:hover {
+            background: #475569;
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header>
+            <h1>Multimodal RAG</h1>
+            <p class="subtitle">Advanced Medical Research Analysis System</p>
         </header>
+        <div class="search-container">
             <div class="input-group">
+                <input type="text" id="questionInput" placeholder="Ask a complex question about medical papers..."
+                    autocomplete="off">
                 <button id="searchBtn" onclick="askQuestion()">
+                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path>
+                    </svg>
+                    Analyze
                 </button>
             </div>
         </div>
         <div id="loading">
             <div class="spinner"></div>
+            <p style="color: var(--text-muted); font-size: 0.9rem;">Processing multimodal embeddings...</p>
         </div>
         <div id="results">
             <!-- ANSWER SECTION -->
+            <div class="section-title">
+                <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                        d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z">
+                    </path>
+                </svg>
+                Consolidated Intelligence
+            </div>
             <div class="answer-card">
                 <div id="answerText" class="answer-text"></div>
             </div>
             <!-- IMAGES SECTION -->
+            <div id="imagesSection" style="display: none;">
+                <div class="section-title" style="margin-top: 3rem;">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z">
+                        </path>
+                    </svg>
+                    Relevant Visual Data
                 </div>
                 <div id="imagesGrid" class="images-grid"></div>
             </div>
             <!-- TEXT SOURCES SECTION -->
+            <div id="textsSection" style="display: none;">
+                <div class="section-title" style="margin-top: 3rem;">
+                    <svg width="18" height="18" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
+                            d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253">
+                        </path>
+                    </svg>
+                    Source Documents
                 </div>
                 <div id="textsGrid" class="sources-grid"></div>
             </div>
         const loading = document.getElementById('loading');
         const results = document.getElementById('results');
         const answerText = document.getElementById('answerText');
         const imagesSection = document.getElementById('imagesSection');
         const imagesGrid = document.getElementById('imagesGrid');
         const textsSection = document.getElementById('textsSection');
         const textsGrid = document.getElementById('textsGrid');
         // Allow Enter key to submit
+        input.addEventListener('keypress', function (e) {
             if (e.key === 'Enter') {
                 askQuestion();
             }
             // UI State updates
             searchBtn.disabled = true;
+            searchBtn.innerHTML = '<span style="font-size: 0.9em">Processing...</span>';
             input.disabled = true;
             results.style.display = 'none';
             loading.style.display = 'block';
             // Reset sections
             imagesSection.style.display = 'none';
             textsSection.style.display = 'none';
                 if (!response.ok) throw new Error('Failed to get response');
                 const data = await response.json();
+                // 1. Display Answer with simple markdown replacement for bold
+                // Very basic MD parser for bold text if any
+                let formattedAnswer = data.answer.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
+                answerText.innerHTML = formattedAnswer;
                 // 2. Display Images
                 if (data.images && data.images.length > 0) {
                     imagesSection.style.display = 'block';
                     data.images.forEach(img => {
                         const div = document.createElement('div');
                         div.className = 'image-card';
                         div.innerHTML = `
                             <a href="${img.path}" target="_blank">
                                 <img src="${img.path}" alt="${img.filename}" loading="lazy">
                             </a>
                             <div class="image-meta">
+                                <div class="image-filename" title="${img.filename}">${img.filename}</div>
+                                <div class="image-stats">
+                                    <span>Page ${img.page || '?'}</span>
+                                    <span>${(img.score * 100).toFixed(0)}% Match</span>
+                                </div>
                             </div>
                         `;
                         imagesGrid.appendChild(div);
                         div.className = 'source-card';
                         div.innerHTML = `
                             <div class="source-title">${txt.file || 'Document'}</div>
+                            <div class="source-excerpt">"${txt.text}..."</div>
                             <div class="source-meta">
+                                Page ${txt.page || 'N/A'} • Similarity: ${(txt.score * 100).toFixed(0)}%
                             </div>
                         `;
                         textsGrid.appendChild(div);
                     });
                 results.style.display = 'block';
             } catch (error) {
+                alert('Error querying system. Please try again.');
                 console.error(error);
             } finally {
                 loading.style.display = 'none';
                 searchBtn.disabled = false;
+                searchBtn.innerHTML = `
+                    <svg width="20" height="20" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+                    Analyze
+                `;
                 input.disabled = false;
                 input.focus();
             }
         }
     </script>
 </body>
+</html>