Spaces:

pvanand
/

specialized-agents

Running

App Files Files Community

pvanand commited on Sep 8, 2024

Commit

19bfd93

verified ·

1 Parent(s): 424154f

Update static/medium-report.html

Browse files

Files changed (1) hide show

static/medium-report.html +131 -29

static/medium-report.html CHANGED Viewed

@@ -1,17 +1,15 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Report Generator</title>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
     <style>
-        /* Main styles */
-        body {
-            margin: 0;
-            padding: 0;
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
             color: rgba(0,0,0,0.8);
@@ -22,13 +20,6 @@
             line-height: 1.58;
             color: rgba(0, 0, 0, 0.8);
             background-color: #fff;
-            margin: 0;
-            padding: 0;
-        }
-        .container {
             max-width: 800px;
             margin: 0 auto;
             padding: 0 20px;
@@ -41,18 +32,15 @@
         letter-spacing: -0.022em;
         line-height: 1.2;
     }
     h1 {
         font-size: 40px;
         margin-bottom: 0.5em;
     }
     h2 {
         font-size: 32px;
         margin-top: 1.5em;
         margin-bottom: 0.5em;
     }
     h3 {
         font-size: 26px;
         margin-top: 1.5em;
@@ -185,29 +173,41 @@
             }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <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 Report</button>
         </div>
         <div id="output-container">
             <div id="report-container"></div>
             <div id="sources-container"></div>
         </div>
     </div>
     <script>
         async function generateReport() {
             const description = document.getElementById('description').value;
             const reportContainer = document.getElementById('report-container');
             const sourcesContainer = document.getElementById('sources-container');
-            reportContainer.innerHTML = 'Generating report...';
             sourcesContainer.innerHTML = '';
             try {
-                const response = await fetch('https://iresearcher-api.elevatics.cloud/generate_report', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
@@ -216,7 +216,7 @@
                     body: JSON.stringify({
                         description: description,
                         user_id: "",
-                        user_name: "multi-agent-research",
                         internet: true,
                         output_format: "report_table",
                         data_format: "Structured data",
@@ -224,17 +224,14 @@
                         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;
@@ -256,12 +253,13 @@
                         markdown += chunk;
                         renderMarkdown(markdown);
                     }
                 }
             } catch (error) {
-                reportContainer.innerHTML = `Error generating report: ${error.message}`;
             }
         }
         function renderMarkdown(markdown) {
             const reportContainer = document.getElementById('report-container');
             const reportContent = markdown.match(/<report>([\s\S]*)<\/report>/);
@@ -278,14 +276,12 @@
                 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);
             });
         }
         function processMetadata(metadata) {
             const sourcesContainer = document.getElementById('sources-container');
             const metadataMatch = metadata.match(/all-text-with-urls: (.+)/);
@@ -335,7 +331,6 @@
                 sourcesContainer.innerHTML = '<h2>Sources</h2><p>No source information available.</p>';
             }
         }
         // Make Plotly charts responsive on window resize
         window.addEventListener('resize', function() {
             const plots = document.querySelectorAll('.js-plotly-plot');
@@ -343,6 +338,113 @@
                 Plotly.Plots.resize(plot);
             });
         });
     </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>Blog Writer</title>
     <script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
     <script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.10.5/font/bootstrap-icons.css">
+    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
     <style>
+        .container {
             text-rendering: optimizeLegibility;
             -webkit-font-smoothing: antialiased;
             color: rgba(0,0,0,0.8);
             line-height: 1.58;
             color: rgba(0, 0, 0, 0.8);
             background-color: #fff;
             max-width: 800px;
             margin: 0 auto;
             padding: 0 20px;
         letter-spacing: -0.022em;
         line-height: 1.2;
     }
     h1 {
         font-size: 40px;
         margin-bottom: 0.5em;
     }
     h2 {
         font-size: 32px;
         margin-top: 1.5em;
         margin-bottom: 0.5em;
     }
     h3 {
         font-size: 26px;
         margin-top: 1.5em;
             }
         }
     </style>
+    <link rel="stylesheet" href="/css/ai-sidebar.css">
 </head>
 <body>
+    <div id="app" class="ai-sidebar__container">
+        <sidebar-component></sidebar-component>
+        <main class="ai-sidebar__content">
     <div class="container">
         <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>
         </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 Blog">
+                    <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>
+</div>
     <script>
         async function generateReport() {
             const description = document.getElementById('description').value;
             const reportContainer = document.getElementById('report-container');
             const sourcesContainer = document.getElementById('sources-container');
+            reportContainer.innerHTML = 'Searching results...';
             sourcesContainer.innerHTML = '';
             try {
+                const response = await fetch('https://iresearcher-api.elevatics.cloud/generate_blog', {
                     method: 'POST',
                     headers: {
                         'Content-Type': 'application/json',
                     body: JSON.stringify({
                         description: description,
                         user_id: "",
+                        user_name: "multi-agent-research-generate-blog",
                         internet: true,
                         output_format: "report_table",
                         data_format: "Structured data",
                         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;
                         markdown += chunk;
                         renderMarkdown(markdown);
                     }
                 }
+                document.getElementById('downloadBtn').style.display = 'block';
             } catch (error) {
+                reportContainer.innerHTML = `Error generating blog: ${error.message}`;
             }
         }
         function renderMarkdown(markdown) {
             const reportContainer = document.getElementById('report-container');
             const reportContent = markdown.match(/<report>([\s\S]*)<\/report>/);
                 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);
             });
         }
         function processMetadata(metadata) {
             const sourcesContainer = document.getElementById('sources-container');
             const metadataMatch = metadata.match(/all-text-with-urls: (.+)/);
                 sourcesContainer.innerHTML = '<h2>Sources</h2><p>No source information available.</p>';
             }
         }
         // Make Plotly charts responsive on window resize
         window.addEventListener('resize', function() {
             const plots = document.querySelectorAll('.js-plotly-plot');
                 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>