Update static/js/apps-hub/research-pro.js

static/js/apps-hub/research-pro.js

@@ -1,282 +1,282 @@
-async function generateReport() {
-    const description = document.getElementById('description').value || document.getElementById('description-textarea').value;
-    document.getElementById('initial-view').style.display = 'none';
-    document.getElementById('report-view').style.display = 'block';
-    document.getElementById('description-textarea').value = description;
-    const reportContainer = document.getElementById('report-container');
-    const sourcesContainer = document.getElementById('sources-container');
-    const downloadBtn = document.getElementById('downloadBtn');
-    reportContainer.innerHTML = 'Generating report...';
-    sourcesContainer.innerHTML = '';
-    downloadBtn.style.display = 'none';
-
-    try {
-        const response = await fetch('https://pvanand-search-generate-prod.hf.space/generate_report', {
-            method: 'POST',
-            headers: {
-                'Content-Type': 'application/json',
-                'Accept': 'text/plain'
-            },
-            body: JSON.stringify({
-                description: description,
-                user_id: "",
-                user_name: "multi-agent-research",
-                internet: true,
-                output_format: "report_table",
-                data_format: "Structured data",
-                generate_charts: true,
-                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 });
-            
-            if (chunk.includes('<report-metadata>')) {
-                isReadingMetadata = true;
-                metadata = '';
-            }
-            
-            if (isReadingMetadata) {
-                metadata += chunk;
-                if (chunk.includes('</report-metadata>')) {
-                    isReadingMetadata = false;
-                    processMetadata(metadata);
-                }
-            } else {
-                markdown += chunk;
-                renderMarkdown(markdown);
-            }
-        }
-
-        // Show the download button after the report is generated
-        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;
-    const reportContent = markdown.match(/<report>([\s\S]*)<\/report>/);
-    
-    if (reportContent) {
-        reportContainer.innerHTML = marked.parse(reportContent[1]);
-    } else {
-        reportContainer.innerHTML = marked.parse(markdown);
-    }
-    
-    const scripts = reportContainer.getElementsByTagName('script');
-    Array.from(scripts).forEach(script => {
-        const newScript = document.createElement('script');
-        newScript.textContent = script.textContent;
-        script.parentNode.replaceChild(newScript, script);
-    });
-
-    // Make Plotly charts responsive
-    const plots = reportContainer.querySelectorAll('.js-plotly-plot');
-    plots.forEach(plot => {
-        Plotly.Plots.resize(plot);
-    });
-
-    // Scroll to new content
-    scrollToNewContent(previousHeight);
-}
-
-function processMetadata(metadata) {
-    const sourcesContainer = document.getElementById('sources-container');
-    const metadataMatch = metadata.match(/all-text-with-urls: (.+)/);
-    
-    if (metadataMatch) {
-        const metadataObj = JSON.parse(metadataMatch[1]);
-        
-        sourcesContainer.innerHTML = '<h2>Sources</h2>';
-        metadataObj.forEach(([content, url]) => {
-            if (content.trim() !== "") {
-                const sourceItem = document.createElement('div');
-                sourceItem.className = 'source-item';
-                const snippet = content.length > 400 ? content.substring(0, 400) + '...' : content;
-                sourceItem.innerHTML = `
-                    <a href="${url}" target="_blank" class="source-url">${url}</a>
-                    <div class="source-content">
-                        <div class="source-snippet">${marked.parse(snippet)}</div>
-                        <div class="source-full">${marked.parse(content)}</div>
-                        <div class="expand-indicator"></div>
-                    </div>
-                `;
-                sourcesContainer.appendChild(sourceItem);
-                
-                const sourceUrl = sourceItem.querySelector('.source-url');
-                const sourceContent = sourceItem.querySelector('.source-content');
-                const snippetDiv = sourceItem.querySelector('.source-snippet');
-                const fullDiv = sourceItem.querySelector('.source-full');
-                
-                sourceContent.addEventListener('click', function(e) {
-                    if (!sourceItem.classList.contains('expanded')) {
-                        sourceItem.classList.add('expanded');
-                        snippetDiv.style.display = 'none';
-                        fullDiv.style.display = 'block';
-                    } else if (e.clientY > sourceContent.getBoundingClientRect().bottom - 30) {
-                        sourceItem.classList.remove('expanded');
-                        snippetDiv.style.display = 'block';
-                        fullDiv.style.display = 'none';
-                    }
-                });
-                
-                sourceUrl.addEventListener('click', function(e) {
-                    e.stopPropagation();
-                });
-            }
-        });
-    } else {
-        sourcesContainer.innerHTML = '<h2>Sources</h2><p>No source information available.</p>';
-    }
-}
-
-function scrollToNewContent(previousHeight) {
-    const reportContainer = document.getElementById('report-container');
-    const newHeight = reportContainer.scrollHeight;
-    const scrollDifference = newHeight - previousHeight;
-    
-    if (scrollDifference > 0) {
-        const viewportHeight = window.innerHeight;
-        const currentScrollPosition = window.pageYOffset;
-        const contentBottom = reportContainer.offsetTop + newHeight;
-        
-        // Start scrolling when new content is within 200px of viewport bottom
-        if (contentBottom > currentScrollPosition + viewportHeight - 200) {
-            window.scrollBy({
-                top: scrollDifference,
-                behavior: 'smooth'
-            });
-        }
-    }
-}
-
-function scrollToTop() {
-    window.scrollTo({
-        top: 0,
-        behavior: 'smooth'
-    });
-}
-
-async function downloadHTML() {
-try {
-// Fetch the CSS
-const response = await fetch('styles.css');
-let css = await response.text();
-
-// Add styles for expanded sources and body max-width
-css += `
-    body.report-body { 
-        max-width: 804px; 
-        margin: 0 auto; 
-    }
-    .source-item {
-        margin-bottom: 20px;
-    }
-    .source-content {
-        margin-top: 10px;
-    }
-    .source-snippet, .expand-indicator {
-        display: none;
-    }
-    .source-full {
-        display: block;
-    }
-`;
-
-// Clone the document
-const htmlContent = document.implementation.createHTMLDocument('Report');
-
-// Set up the basic structure
-htmlContent.documentElement.lang = 'en';
-const head = htmlContent.head;
-const body = htmlContent.body;
-body.className = 'report-body';
-
-// Add meta tags
-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);
-
-// Add title
-const title = htmlContent.createElement('title');
-title.textContent = 'Generated Report';
-head.appendChild(title);
-
-// Add style
-const style = htmlContent.createElement('style');
-style.textContent = css;
-head.appendChild(style);
-
-// Add necessary scripts
-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);
-
-// Copy the report content
-const reportContainer = document.getElementById('report-container');
-body.innerHTML = reportContainer.innerHTML;
-
-// Copy and modify the sources content
-const sourcesContainer = document.getElementById('sources-container');
-const sourcesDiv = htmlContent.createElement('div');
-sourcesDiv.innerHTML = sourcesContainer.innerHTML;
-
-// Expand all sources
-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);
-
-// Create blob and download
-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 = 'report.html';
-document.body.appendChild(a);
-a.click();
-document.body.removeChild(a);
-URL.revokeObjectURL(url);
-} catch (error) {
-console.error('Error downloading HTML:', error);
-}
-}
-// Make Plotly charts responsive on window resize
-window.addEventListener('resize', function() {
-    const plots = document.querySelectorAll('.js-plotly-plot');
-    plots.forEach(plot => {
-        Plotly.Plots.resize(plot);
-    });
+async function generateReport() {
+    const description = document.getElementById('description').value || document.getElementById('description-textarea').value;
+    document.getElementById('initial-view').style.display = 'none';
+    document.getElementById('report-view').style.display = 'block';
+    document.getElementById('description-textarea').value = description;
+    const reportContainer = document.getElementById('report-container');
+    const sourcesContainer = document.getElementById('sources-container');
+    const downloadBtn = document.getElementById('downloadBtn');
+    reportContainer.innerHTML = 'Generating report...';
+    sourcesContainer.innerHTML = '';
+    downloadBtn.style.display = 'none';
+
+    try {
+        const response = await fetch('https://iresearcher-api.elevatics.cloud/generate_report', {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+                'Accept': 'text/plain'
+            },
+            body: JSON.stringify({
+                description: description,
+                user_id: "",
+                user_name: "multi-agent-research",
+                internet: true,
+                output_format: "report_table",
+                data_format: "Structured data",
+                generate_charts: true,
+                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 });
+            
+            if (chunk.includes('<report-metadata>')) {
+                isReadingMetadata = true;
+                metadata = '';
+            }
+            
+            if (isReadingMetadata) {
+                metadata += chunk;
+                if (chunk.includes('</report-metadata>')) {
+                    isReadingMetadata = false;
+                    processMetadata(metadata);
+                }
+            } else {
+                markdown += chunk;
+                renderMarkdown(markdown);
+            }
+        }
+
+        // Show the download button after the report is generated
+        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;
+    const reportContent = markdown.match(/<report>([\s\S]*)<\/report>/);
+    
+    if (reportContent) {
+        reportContainer.innerHTML = marked.parse(reportContent[1]);
+    } else {
+        reportContainer.innerHTML = marked.parse(markdown);
+    }
+    
+    const scripts = reportContainer.getElementsByTagName('script');
+    Array.from(scripts).forEach(script => {
+        const newScript = document.createElement('script');
+        newScript.textContent = script.textContent;
+        script.parentNode.replaceChild(newScript, script);
+    });
+
+    // Make Plotly charts responsive
+    const plots = reportContainer.querySelectorAll('.js-plotly-plot');
+    plots.forEach(plot => {
+        Plotly.Plots.resize(plot);
+    });
+
+    // Scroll to new content
+    scrollToNewContent(previousHeight);
+}
+
+function processMetadata(metadata) {
+    const sourcesContainer = document.getElementById('sources-container');
+    const metadataMatch = metadata.match(/all-text-with-urls: (.+)/);
+    
+    if (metadataMatch) {
+        const metadataObj = JSON.parse(metadataMatch[1]);
+        
+        sourcesContainer.innerHTML = '<h2>Sources</h2>';
+        metadataObj.forEach(([content, url]) => {
+            if (content.trim() !== "") {
+                const sourceItem = document.createElement('div');
+                sourceItem.className = 'source-item';
+                const snippet = content.length > 400 ? content.substring(0, 400) + '...' : content;
+                sourceItem.innerHTML = `
+                    <a href="${url}" target="_blank" class="source-url">${url}</a>
+                    <div class="source-content">
+                        <div class="source-snippet">${marked.parse(snippet)}</div>
+                        <div class="source-full">${marked.parse(content)}</div>
+                        <div class="expand-indicator"></div>
+                    </div>
+                `;
+                sourcesContainer.appendChild(sourceItem);
+                
+                const sourceUrl = sourceItem.querySelector('.source-url');
+                const sourceContent = sourceItem.querySelector('.source-content');
+                const snippetDiv = sourceItem.querySelector('.source-snippet');
+                const fullDiv = sourceItem.querySelector('.source-full');
+                
+                sourceContent.addEventListener('click', function(e) {
+                    if (!sourceItem.classList.contains('expanded')) {
+                        sourceItem.classList.add('expanded');
+                        snippetDiv.style.display = 'none';
+                        fullDiv.style.display = 'block';
+                    } else if (e.clientY > sourceContent.getBoundingClientRect().bottom - 30) {
+                        sourceItem.classList.remove('expanded');
+                        snippetDiv.style.display = 'block';
+                        fullDiv.style.display = 'none';
+                    }
+                });
+                
+                sourceUrl.addEventListener('click', function(e) {
+                    e.stopPropagation();
+                });
+            }
+        });
+    } else {
+        sourcesContainer.innerHTML = '<h2>Sources</h2><p>No source information available.</p>';
+    }
+}
+
+function scrollToNewContent(previousHeight) {
+    const reportContainer = document.getElementById('report-container');
+    const newHeight = reportContainer.scrollHeight;
+    const scrollDifference = newHeight - previousHeight;
+    
+    if (scrollDifference > 0) {
+        const viewportHeight = window.innerHeight;
+        const currentScrollPosition = window.pageYOffset;
+        const contentBottom = reportContainer.offsetTop + newHeight;
+        
+        // Start scrolling when new content is within 200px of viewport bottom
+        if (contentBottom > currentScrollPosition + viewportHeight - 200) {
+            window.scrollBy({
+                top: scrollDifference,
+                behavior: 'smooth'
+            });
+        }
+    }
+}
+
+function scrollToTop() {
+    window.scrollTo({
+        top: 0,
+        behavior: 'smooth'
+    });
+}
+
+async function downloadHTML() {
+try {
+// Fetch the CSS
+const response = await fetch('styles.css');
+let css = await response.text();
+
+// Add styles for expanded sources and body max-width
+css += `
+    body.report-body { 
+        max-width: 804px; 
+        margin: 0 auto; 
+    }
+    .source-item {
+        margin-bottom: 20px;
+    }
+    .source-content {
+        margin-top: 10px;
+    }
+    .source-snippet, .expand-indicator {
+        display: none;
+    }
+    .source-full {
+        display: block;
+    }
+`;
+
+// Clone the document
+const htmlContent = document.implementation.createHTMLDocument('Report');
+
+// Set up the basic structure
+htmlContent.documentElement.lang = 'en';
+const head = htmlContent.head;
+const body = htmlContent.body;
+body.className = 'report-body';
+
+// Add meta tags
+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);
+
+// Add title
+const title = htmlContent.createElement('title');
+title.textContent = 'Generated Report';
+head.appendChild(title);
+
+// Add style
+const style = htmlContent.createElement('style');
+style.textContent = css;
+head.appendChild(style);
+
+// Add necessary scripts
+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);
+
+// Copy the report content
+const reportContainer = document.getElementById('report-container');
+body.innerHTML = reportContainer.innerHTML;
+
+// Copy and modify the sources content
+const sourcesContainer = document.getElementById('sources-container');
+const sourcesDiv = htmlContent.createElement('div');
+sourcesDiv.innerHTML = sourcesContainer.innerHTML;
+
+// Expand all sources
+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);
+
+// Create blob and download
+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 = 'report.html';
+document.body.appendChild(a);
+a.click();
+document.body.removeChild(a);
+URL.revokeObjectURL(url);
+} catch (error) {
+console.error('Error downloading HTML:', error);
+}
+}
+// Make Plotly charts responsive on window resize
+window.addEventListener('resize', function() {
+    const plots = document.querySelectorAll('.js-plotly-plot');
+    plots.forEach(plot => {
+        Plotly.Plots.resize(plot);
+    });
 });