Update templates/apps-hub/article-writer.html

templates/apps-hub/article-writer.html

@@ -199,11 +199,18 @@
         <div id="input-container">
             <h1>Blog Post Generator</h1>
             <textarea id="description" rows="4" placeholder="Enter description">write a medium article on nvidia stock performance</textarea>
-            <button onclick="generateReport()">Generate Blog</button>
+            <button onclick="generateReport()">Generate Report</button>
         </div>
         <div id="output-container">
             <div id="report-container"></div>
             <div id="sources-container"></div>
+            <div class="button-container">
+                <button id="downloadBtn" onclick="downloadHTML()" style="display: none;" title="Download HTML Report">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                        <path d="M3 15v4c0 1.1.9 2 2 2h14a2 2 0 0 0 2-2v-4M17 9l-5 5-5-5M12 12.8V2.5"/>
+                    </svg>
+                </button>
+            </div>
         </div>
     </div>
 </main>
@@ -216,7 +223,7 @@
             const description = document.getElementById('description').value;
             const reportContainer = document.getElementById('report-container');
             const sourcesContainer = document.getElementById('sources-container');
-            reportContainer.innerHTML = ' Searching results...';
+            reportContainer.innerHTML = 'Generating report...';
             sourcesContainer.innerHTML = '';
             try {
                 const response = await fetch('https://pvanand-search-generate-prod.hf.space/generate_blog', {
@@ -232,8 +239,8 @@
                         internet: true,
                         output_format: "report_table",
                         data_format: "Structured data",
-                        generate_charts: false,
-                        output_as_md: true
+                        generate_charts: true,
+                        output_as_md: false
                     })
                 });
                 if (!response.ok) {
@@ -265,7 +272,9 @@
                         markdown += chunk;
                         renderMarkdown(markdown);
                     }
+                    
                 }
+                document.getElementById('downloadBtn').style.display = 'block';
             } catch (error) {
                 reportContainer.innerHTML = `Error generating report: ${error.message}`;
             }
@@ -348,6 +357,128 @@
                 Plotly.Plots.resize(plot);
             });
         });
+        
+        function sanitizeFileName(name) {
+    // Keep only alphanumeric characters and spaces
+    name = name.replace(/[^a-z0-9\s]/gi, '');
+    // Convert to lowercase
+    name = name.toLowerCase();
+    // Replace spaces with underscores
+    name = name.replace(/\s+/g, '_');
+    // Limit the length to 50 characters
+    name = name.substring(0, 50);
+    // If the name is empty after sanitization, use a default name
+    return name || 'generated_report';
+}
+async function downloadHTML() {
+    try {
+        // Get styles from current document
+        let css = '';
+        const styleTags = document.getElementsByTagName('style');
+        for (let styleTag of styleTags) {
+            css += styleTag.innerHTML;
+        }
+
+        // Add additional 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);
+
+        // Copy the report content
+        const reportContainer = document.getElementById('report-container');
+        body.innerHTML = reportContainer.innerHTML;
+
+        // Generate file name from content
+        let fileName = 'generatedreport';
+        const headings = body.querySelector('h1, h2, h3');
+        if (headings) {
+            fileName = sanitizeFileName(headings.textContent);
+        }
+
+        // Add title
+        const title = htmlContent.createElement('title');
+        title.textContent = fileName;
+        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 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 = `${fileName}.html`;
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(url);
+    } catch (error) {
+        console.error('Error downloading HTML:', error);
+    }
+}
     </script>
 </body>
 </html>