Update static/iresearcher.html

static/iresearcher.html

@@ -34,11 +34,11 @@ body {
     height: 30px;
 }
 #output-container {
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
+    display: block;
 }
 #report-container, #sources-container {
+    max-width: 800px;
+    margin: 0 auto 30px;
     background-color: #ffffff;
     padding: 30px;
     border-radius: 8px;
@@ -47,6 +47,7 @@ body {
     word-wrap: break-word;
     word-break: break-word;
 }
+
 table {
     width: 100%;
     border-collapse: collapse;
@@ -138,25 +139,24 @@ button:hover {
 .source-item:hover .expand-indicator {
     background: linear-gradient(to bottom, rgba(249,249,249,0), rgba(249,249,249,0.9));
 }
+h1 {
+    color: var(--accent-color);
+}
+
 h2 {
     color: var(--accent-color);
     border-bottom: 2px solid var(--accent-color);
     padding-bottom: 10px;
     margin-top: 0;
 }
-
 @media (min-width: 768px) {
     #output-container {
-        flex-direction: row;
+        display: block;
     }
-    #report-container {
-        flex: 3;
-    }
-    #sources-container {
-        flex: 2;
+    #report-container, #sources-container {
+        flex: none;
     }
 }
-
 @media (max-width: 767px) {
     body {
         padding: 10px;
@@ -165,11 +165,9 @@ h2 {
     #input-container, #report-container, #sources-container {
         padding: 15px;
     }
-
     .search-container {
         width: 360px;
     }
-
     .title {
         width: 300px;
         font-weight: 500;
@@ -177,7 +175,6 @@ h2 {
     }
     
 }
-
 .centered-container {
     display: flex;
     flex-direction: column;
@@ -185,12 +182,10 @@ h2 {
     justify-content: center;
     height: 100vh;
 }
-
 .search-container {
     display: flex;
     margin-top: 20px;
 }
-
 .search-container input {
     width: 500px;
     padding: 10px 20px;
@@ -200,7 +195,6 @@ h2 {
     outline: none;
     color: #0e1f4b;
 }
-
 .search-container button {
     width: 50px;
     padding: 10px;
@@ -213,17 +207,14 @@ h2 {
     justify-content: center;
     border-radius: 0 15px 15px 0;
 }
-
 .search-container button:hover {
     opacity: 0.5;
 }
-
 .search-container button svg {
     width: 24px;
     height: 24px;
     
 }
-
 ::placeholder {
     font-style: italic;
     font: 1em sans-serif;
@@ -231,7 +222,6 @@ h2 {
     opacity: 0.5;
     
 }
-
 .title {
     font-weight: 700;
     font-size: 64px;
@@ -243,16 +233,13 @@ h2 {
     margin: 0;
     padding: 0 0 0.5rem;
 }
-
 .generate-btn {
     white-space: nowrap;
 }
-
 .download-btn {
     background-color: #30764c;
     margin-top: 10px;
 }
-
 .download-btn:hover {
     background-color: #2c8d55;
 }
@@ -309,7 +296,6 @@ h2 {
     reportContainer.innerHTML = 'Generating report...';
     sourcesContainer.innerHTML = '';
     downloadBtn.style.display = 'none';
-
     try {
         const response = await fetch('https://iresearcher-api.elevatics.cloud/generate_report', {
             method: 'POST',
@@ -328,22 +314,20 @@ h2 {
                 output_as_md: true
             })
         });
-
         if (!response.ok) {
             throw new Error(`HTTP error! status: ${response.status}`);
         }
-
         const reader = response.body.getReader();
         const decoder = new TextDecoder();
         let markdown = '';
         let metadata = '';
         let isReadingMetadata = false;
-
         while (true) {
             const { value, done } = await reader.read();
             if (done) break;
             
             const chunk = decoder.decode(value, { stream: true });
+            console.log(chunk);
             
             if (chunk.includes('<report-metadata>')) {
                 isReadingMetadata = true;
@@ -361,13 +345,11 @@ h2 {
                 renderMarkdown(markdown);
             }
         }
-
         downloadBtn.style.display = 'inline-block';
     } catch (error) {
         reportContainer.innerHTML = `Error generating report: ${error.message}`;
     }
 }
-
 function renderMarkdown(markdown) {
     const reportContainer = document.getElementById('report-container');
     const previousHeight = reportContainer.scrollHeight;
@@ -390,15 +372,12 @@ function renderMarkdown(markdown) {
         newScript.textContent = script.textContent;
         script.parentNode.replaceChild(newScript, script);
     });
-
     const plots = reportContainer.querySelectorAll('.js-plotly-plot');
     plots.forEach(plot => {
         Plotly.Plots.resize(plot);
     });
-
     scrollToNewContent(previousHeight);
 }
-
 function processMetadata(metadata) {
     const sourcesContainer = document.getElementById('sources-container');
     const metadataMatch = metadata.match(/all-text-with-urls: (.+)/);
@@ -454,7 +433,6 @@ function processMetadata(metadata) {
         sourcesContainer.innerHTML = '<h2>Sources</h2><p>No source information available.</p>';
     }
 }
-
 function scrollToNewContent(previousHeight) {
     const reportContainer = document.getElementById('report-container');
     const newHeight = reportContainer.scrollHeight;
@@ -473,30 +451,75 @@ function scrollToNewContent(previousHeight) {
         }
     }
 }
-
 function scrollToTop() {
     window.scrollTo({
         top: 0,
         behavior: 'smooth'
     });
 }
-
 function sanitizeFileName(name) {
     return name.replace(/[^a-z0-9\s]/gi, '').toLowerCase().replace(/\s+/g, '_').substring(0, 50) || 'generated_report';
 }
-
-async function downloadHTML() {
-    try {
-        const response = await fetch('styles.css');
-        let css = await response.text();
-
-        css += `
-            body.report-body { 
-                max-width: 804px; 
-                margin: 0 auto; 
+function downloadHTML() {
+        try {
+            var css = `
+            :root {
+                --accent-color: #003366;
+            }
+            body {
+                font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+                line-height: 1.6;
+                margin: 0 auto;
+                padding: 20px;
+                background-color: #f0f2f5;
+                color: #333;
+                max-width: 1366px;
+            }
+            #report-container, #sources-container {
+                max-width: 800px;
+                margin: 0 auto 30px;
+                background-color: #ffffff;
+                padding: 30px;
+                border-radius: 8px;
+                box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+                overflow-wrap: break-word;
+                word-wrap: break-word;
+                word-break: break-word;
+            }
+            table {
+                width: 100%;
+                border-collapse: collapse;
+                margin-bottom: 20px;
+            }
+            table, th, td {
+                border: 1px solid #ddd;
+            }
+            th, td {
+                padding: 10px;
+                text-align: left;
+            }
+            h1, h2, h3, h4, h5, h6 {
+                color: var(--accent-color);
+            }
+            h2 {
+                border-bottom: 2px solid var(--accent-color);
+                padding-bottom: 10px;
+                margin-top: 0;
             }
             .source-item {
                 margin-bottom: 20px;
+                padding: 15px;
+                background-color: #f9f9f9;
+                border: 1px solid #e0e0e0;
+                border-radius: 8px;
+            }
+            .source-url {
+                color: var(--accent-color);
+                text-decoration: none;
+                word-break: break-all;
+                font-weight: bold;
+                display: block;
+                margin-bottom: 10px;
             }
             .source-content {
                 margin-top: 10px;
@@ -507,80 +530,65 @@ async function downloadHTML() {
             .source-full {
                 display: block;
             }
+            @media (max-width: 767px) {
+                body {
+                    padding: 10px;
+                    width: 95%;
+                }
+                #report-container, #sources-container {
+                    padding: 15px;
+                }
+            }
         `;
 
-        const htmlContent = document.implementation.createHTMLDocument('Report');
-
-        htmlContent.documentElement.lang = 'en';
-        const head = htmlContent.head;
-        const body = htmlContent.body;
-        body.className = 'report-body';
-
-        const meta = htmlContent.createElement('meta');
-        meta.charset = 'UTF-8';
-        head.appendChild(meta);
-
-        const viewport = htmlContent.createElement('meta');
-        viewport.name = 'viewport';
-        viewport.content = 'width=device-width, initial-scale=1.0';
-        head.appendChild(viewport);
-
-        const title = htmlContent.createElement('title');
-        title.textContent = 'Generated Report';
-        head.appendChild(title);
-
-        const style = htmlContent.createElement('style');
-        style.textContent = css;
-        head.appendChild(style);
-
-        const markedScript = htmlContent.createElement('script');
-        markedScript.src = 'https://cdn.jsdelivr.net/npm/marked/marked.min.js';
-        head.appendChild(markedScript);
-
-        const plotlyScript = htmlContent.createElement('script');
-        plotlyScript.src = 'https://cdn.plot.ly/plotly-latest.min.js';
-        head.appendChild(plotlyScript);
-
-        const reportContainer = document.getElementById('report-container');
-        body.innerHTML = reportContainer.innerHTML;
-
-        const sourcesContainer = document.getElementById('sources-container');
-        const sourcesDiv = htmlContent.createElement('div');
-        sourcesDiv.innerHTML = sourcesContainer.innerHTML;
-
-        const sourceItems = sourcesDiv.querySelectorAll('.source-item');
-        sourceItems.forEach(item => {
-            item.classList.add('expanded');
-            const snippetDiv = item.querySelector('.source-snippet');
-            const fullDiv = item.querySelector('.source-full');
-            if (snippetDiv) snippetDiv.style.display = 'none';
-            if (fullDiv) fullDiv.style.display = 'block';
-        });
-
-        body.appendChild(sourcesDiv);
-
-        const fileName = sanitizeFileName(body.querySelector('h1, h2, h3')?.textContent || reportContainer.textContent.substring(0, 20));
-
-        const blob = new Blob([htmlContent.documentElement.outerHTML], { type: 'text/html' });
-        const url = URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.href = url;
-        a.download = `${fileName}.html`;
-        document.body.appendChild(a);
-        a.click();
-        document.body.removeChild(a);
-        URL.revokeObjectURL(url);
-    } catch (error) {
-        console.error('Error downloading HTML:', error);
+            var htmlContent = '<!DOCTYPE html>\n<html lang="en">\n<head>\n' +
+            '<meta charset="UTF-8">\n' +
+            '<meta name="viewport" content="width=device-width, initial-scale=1.0">\n' +
+            '<title>Generated Report</title>\n' +
+            '<style>' + css + '</style>\n' +
+            '<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"><\/script>\n' +
+            '<script src="https://cdn.plot.ly/plotly-latest.min.js"><\/script>\n' +
+            '</head>\n<body>\n' +
+            '<div id="report-container">\n' + document.getElementById('report-container').innerHTML + '\n</div>\n' +
+            '<div id="sources-container">\n' + document.getElementById('sources-container').innerHTML + '\n</div>\n' +
+            '</body>\n</html>';
+
+            var fileName = sanitizeFileName(document.querySelector('#report-container h1, #report-container h2, #report-container h3')?.textContent || 'generated_report');
+            var blob = new Blob([htmlContent], { type: 'text/html' });
+            var url = URL.createObjectURL(blob);
+            var a = document.createElement('a');
+            a.href = url;
+            a.download = fileName + '.html';
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            URL.revokeObjectURL(url);
+        } catch (error) {
+            console.error('Error downloading HTML:', error);
+        }
+    }
+    document.addEventListener('DOMContentLoaded', function() {
+    const descriptionInput = document.getElementById('description');
+    const initialView = document.getElementById('initial-view');
+    
+    function handleEnterKey(event) {
+        if (event.key === 'Enter' && 
+            this.value.trim() !== '' && 
+            initialView.style.display !== 'none') {
+            event.preventDefault();
+            generateReport();
+        }
     }
-}
 
-window.addEventListener('resize', function() {
-    const plots = document.querySelectorAll('.js-plotly-plot');
-    plots.forEach(plot => {
-        Plotly.Plots.resize(plot);
-    });
+    descriptionInput.addEventListener('keydown', handleEnterKey);
 });
-    </script>
+    window.addEventListener('resize', function() {
+        const plots = document.querySelectorAll('.js-plotly-plot');
+        plots.forEach(plot => {
+            Plotly.Plots.resize(plot);
+        });
+    });
+
+</script>
 </body>
 </html>