Update static/index.html

static/index.html

@@ -21,13 +21,11 @@
             --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);
@@ -38,7 +36,6 @@
                 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;
@@ -47,13 +44,11 @@
             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;
@@ -65,22 +60,18 @@
             margin-bottom: 0.5rem;
             letter-spacing: -0.02em;
         }
-
         .subtitle {
             color: var(--text-muted);
             font-size: 1.25rem;
             font-weight: 300;
         }
-
         .subtitle a {
             color: var(--primary);
             text-decoration: none;
         }
-
         .subtitle a:hover {
             text-decoration: underline;
         }
-
         /* Search Section */
         .search-container {
             max-width: 800px;
@@ -89,7 +80,6 @@
             position: relative;
             z-index: 10;
         }
-
         .input-group {
             position: relative;
             display: flex;
@@ -102,13 +92,11 @@
             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;
@@ -119,15 +107,12 @@
             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;
@@ -142,23 +127,80 @@
             align-items: center;
             gap: 0.5rem;
         }
-
         button#searchBtn:hover {
             opacity: 0.9;
         }
-
         button#searchBtn:disabled {
             opacity: 0.5;
             cursor: not-allowed;
         }
-
+        
+        /* Action Buttons */
+        .action-buttons {
+            max-width: 800px;
+            margin: 0 auto;
+            width: 100%;
+            display: flex;
+            gap: 1rem;
+            justify-content: flex-end;
+        }
+        
+        button#downloadBtn {
+            background: rgba(139, 92, 246, 0.2);
+            color: #c4b5fd;
+            border: 1px solid #8b5cf6;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.75rem;
+            font-weight: 600;
+            font-size: 0.95rem;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        
+        button#downloadBtn:hover:not(:disabled) {
+            background: rgba(139, 92, 246, 0.3);
+            border-color: #a78bfa;
+        }
+        
+        button#downloadBtn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        
+        button#clearBtn {
+            background: rgba(239, 68, 68, 0.2);
+            color: #fca5a5;
+            border: 1px solid #ef4444;
+            padding: 0.75rem 1.5rem;
+            border-radius: 0.75rem;
+            font-weight: 600;
+            font-size: 0.95rem;
+            cursor: pointer;
+            transition: all 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+        
+        button#clearBtn:hover {
+            background: rgba(239, 68, 68, 0.3);
+            border-color: #f87171;
+        }
+        
+        button#clearBtn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        
         /* Loading State */
         #loading {
             display: none;
             text-align: center;
             padding: 2rem;
         }
-
         .spinner {
             width: 40px;
             height: 40px;
@@ -168,13 +210,11 @@
             animation: spin 1s linear infinite;
             margin: 0 auto 1rem;
         }
-
         @keyframes spin {
             to {
                 transform: rotate(360deg);
             }
         }
-
         /* Chat History */
         #chatHistory {
             max-width: 1000px;
@@ -183,7 +223,6 @@
             flex-direction: column;
             gap: 2rem;
         }
-
         .message-block {
             border: 1px solid var(--border-color);
             border-radius: 1rem;
@@ -191,25 +230,20 @@
             background: var(--bg-card);
             animation: fadeInUp 0.4s ease-out;
         }
-
         .user-question {
             margin-bottom: 1rem;
             color: var(--text-main);
         }
-
         .user-question strong {
             color: var(--primary);
         }
-
         .assistant-answer {
             margin-bottom: 1rem;
             line-height: 1.8;
         }
-
         .assistant-answer strong {
             color: #8b5cf6;
         }
-
         /* Image Grids */
         .images-grid {
             display: grid;
@@ -217,7 +251,6 @@
             gap: 1.5rem;
             margin-top: 1rem;
         }
-
         .image-card {
             background: rgba(30, 41, 59, 0.6);
             border-radius: 0.75rem;
@@ -225,35 +258,29 @@
             border: 1px solid var(--border-color);
             transition: all 0.3s ease;
         }
-
         .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;
@@ -262,7 +289,6 @@
             overflow: hidden;
             text-overflow: ellipsis;
         }
-
         /* Text Sources */
         .source-card {
             background: rgba(30, 41, 59, 0.4);
@@ -272,19 +298,16 @@
             margin-top: 0.75rem;
             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;
@@ -295,14 +318,12 @@
             border-left: 3px solid var(--primary);
             word-wrap: break-word;
         }
-
         .source-meta {
             margin-top: 0.75rem;
             font-size: 0.8rem;
             color: var(--text-muted);
             text-align: right;
         }
-
         /* Animations */
         @keyframes fadeInDown {
             from {
@@ -314,7 +335,6 @@
                 transform: translateY(0);
             }
         }
-
         @keyframes fadeInUp {
             from {
                 opacity: 0;
@@ -325,21 +345,17 @@
                 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;
         }
@@ -368,6 +384,24 @@
                 </button>
             </div>
         </div>
+        
+        <!-- Action Buttons -->
+        <div class="action-buttons" id="actionButtons" style="display: none;">
+            <button id="downloadBtn" onclick="downloadPDFReport()">
+                <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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                </svg>
+                Download PDF Report
+            </button>
+            <button id="clearBtn" onclick="clearHistory()">
+                <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="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"></path>
+                </svg>
+                Clear Chat
+            </button>
+        </div>
       
         <!-- CHAT HISTORY -->
         <div id="chatHistory"></div>
@@ -383,43 +417,60 @@
         const searchBtn = document.getElementById('searchBtn');
         const loading = document.getElementById('loading');
         const chatHistoryContainer = document.getElementById('chatHistory');
-
+        const actionButtons = document.getElementById('actionButtons');
+        const downloadBtn = document.getElementById('downloadBtn');
+        
+        // Store conversation data for report generation
+        let conversationData = [];
+        
         // Allow Enter key to submit
         input.addEventListener('keypress', function (e) {
             if (e.key === 'Enter') {
                 askQuestion();
             }
         });
-
+        
         function escapeHtml(text) {
             const div = document.createElement('div');
             div.textContent = text;
             return div.innerHTML;
         }
-
+        
         async function askQuestion() {
             const question = input.value.trim();
             if (!question) return;
-
+            
             // UI State updates
             searchBtn.disabled = true;
             searchBtn.innerHTML = '<span style="font-size: 0.9em">Processing...</span>';
             input.disabled = true;
             loading.style.display = 'block';
-
+            
             try {
                 const response = await fetch('/query', {
                     method: 'POST',
                     headers: { 'Content-Type': 'application/json' },
                     body: JSON.stringify({ question: question })
                 });
-
+                
                 if (!response.ok) {
                     throw new Error(`Server error: ${response.status}`);
                 }
-
+                
                 const data = await response.json();
-
+                
+                // Store conversation data for report
+                conversationData.push({
+                    question: question,
+                    answer: data.answer,
+                    images: data.images || [],
+                    texts: data.texts || [],
+                    timestamp: new Date().toISOString()
+                });
+                
+                // Show action buttons once we have content
+                actionButtons.style.display = 'flex';
+                
                 // Create a chat message container
                 const messageBlock = document.createElement('div');
                 messageBlock.className = 'message-block';
@@ -435,7 +486,7 @@
                 assistantAnswer.className = 'assistant-answer';
                 assistantAnswer.innerHTML = `<strong>Assistant:</strong><br>${escapeHtml(data.answer).replace(/\n/g, '<br>')}`;
                 messageBlock.appendChild(assistantAnswer);
-
+                
                 // Display Images
                 if (data.images && data.images.length > 0) {
                     const relevantImages = data.images.filter(img => (img.score || 0) >= 0.3).slice(0, 3);
@@ -461,7 +512,7 @@
                         messageBlock.appendChild(imagesWrapper);
                     }
                 }
-
+                
                 // Display Texts
                 if (data.texts && data.texts.length > 0) {
                     const topTexts = data.texts.slice(0, 3);
@@ -480,14 +531,14 @@
                         messageBlock.appendChild(div);
                     });
                 }
-
+                
                 chatHistoryContainer.appendChild(messageBlock);
                 
                 // Scroll to the new message
                 setTimeout(() => {
                     messageBlock.scrollIntoView({ behavior: 'smooth', block: 'nearest' });
                 }, 100);
-
+                
             } catch (error) {
                 alert('Error querying system. Please try again.');
                 console.error('Query error:', error);
@@ -505,6 +556,70 @@
                 input.value = '';
             }
         }
+        
+        async function downloadPDFReport() {
+            if (conversationData.length === 0) {
+                alert('No conversation to download');
+                return;
+            }
+            
+            // Disable button and show loading state
+            downloadBtn.disabled = true;
+            downloadBtn.innerHTML = '<span style="font-size: 0.9em">Generating PDF...</span>';
+            
+            try {
+                const response = await fetch('/generate-report', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({ conversations: conversationData })
+                });
+                
+                if (!response.ok) {
+                    throw new Error(`Server error: ${response.status}`);
+                }
+                
+                // Get the PDF blob
+                const blob = await response.blob();
+                
+                // Create download link
+                const url = URL.createObjectURL(blob);
+                const a = document.createElement('a');
+                a.href = url;
+                a.download = `WHEC_Report_${new Date().toISOString().split('T')[0]}.pdf`;
+                document.body.appendChild(a);
+                a.click();
+                document.body.removeChild(a);
+                URL.revokeObjectURL(url);
+                
+            } catch (error) {
+                alert('Error generating PDF report. Please try again.');
+                console.error('PDF generation error:', error);
+            } finally {
+                // Re-enable button
+                downloadBtn.disabled = false;
+                downloadBtn.innerHTML = `
+                    <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 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"></path>
+                    </svg>
+                    Download PDF Report
+                `;
+            }
+        }
+        
+        function clearHistory() {
+            if (conversationData.length === 0) {
+                return;
+            }
+            
+            if (!confirm('Are you sure you want to clear the conversation history? This cannot be undone.')) {
+                return;
+            }
+            
+            conversationData = [];
+            chatHistoryContainer.innerHTML = '';
+            actionButtons.style.display = 'none';
+        }
     </script>
 </body>