ai-web-scraper-backend

Running

App Files Files Community

pvanand commited on Jan 26

Commit

7225716

verified ·

1 Parent(s): 78b1a19

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +135 -257

public/index.html CHANGED Viewed

@@ -1,192 +1,3 @@
-<!DOCTYPE html>
-<html>
-<head>
-  <meta charset="utf-8"/>
-  <title>HTML Compressor for LLM</title>
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/themes/prism.min.css">
-  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/plugins/toolbar/prism-toolbar.min.css">
-  <style>
-    :root {
-      --primary-color: #007bff;
-      --secondary-color: #6c757d;
-      --success-color: #28a745;
-      --border-color: #dee2e6;
-      --background-color: #f8f9fa;
-    }
-    body {
-      font-family: system-ui, -apple-system, sans-serif;
-      line-height: 1.6;
-      margin: 0;
-      padding: 20px;
-      background: var(--background-color);
-    }
-    .container {
-      max-width: 1200px;
-      margin: 0 auto;
-      background: white;
-      padding: 30px;
-      border-radius: 8px;
-      box-shadow: 0 2px 4px rgba(0,0,0,0.1);
-    }
-    textarea {
-      width: 100%;
-      height: 200px;
-      padding: 12px;
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 14px;
-      resize: vertical;
-      margin-bottom: 15px;
-    }
-    .options-container {
-      background: var(--background-color);
-      padding: 20px;
-      border-radius: 8px;
-      margin: 20px 0;
-    }
-    .option-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
-      gap: 15px;
-    }
-    .option-item {
-      display: flex;
-      align-items: center;
-      gap: 10px;
-    }
-    .button-group {
-      display: flex;
-      gap: 10px;
-      margin: 15px 0;
-    }
-    button {
-      background: var(--primary-color);
-      color: white;
-      padding: 8px 16px;
-      border: none;
-      border-radius: 4px;
-      cursor: pointer;
-      transition: background 0.2s;
-    }
-    button:hover {
-      background: #0056b3;
-    }
-    .results-container {
-      margin-top: 30px;
-    }
-    .results-tabs {
-      display: flex;
-      gap: 10px;
-      margin-bottom: 15px;
-    }
-    .tab {
-      padding: 8px 16px;
-      cursor: pointer;
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      transition: all 0.2s;
-    }
-    .tab.active {
-      background: var(--primary-color);
-      color: white;
-    }
-    .result-panel {
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-      overflow: hidden;
-    }
-    .result-header {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 10px;
-      background: var(--background-color);
-      border-bottom: 1px solid var(--border-color);
-    }
-    .result-content {
-      padding: 15px;
-      overflow: auto;
-      max-height: 500px;
-    }
-    .stats-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 15px;
-      margin: 20px 0;
-    }
-    .stat-item {
-      background: white;
-      padding: 15px;
-      border-radius: 4px;
-      border: 1px solid var(--border-color);
-    }
-    .stat-value {
-      font-size: 1.2em;
-      font-weight: bold;
-      color: var(--primary-color);
-    }
-    .copy-feedback {
-      position: fixed;
-      bottom: 20px;
-      right: 20px;
-      background: var(--success-color);
-      color: white;
-      padding: 10px 20px;
-      border-radius: 4px;
-      display: none;
-    }
-    .operation-status {
-      margin: 20px 0;
-      padding: 15px;
-      border: 1px solid var(--border-color);
-      border-radius: 4px;
-    }
-    .status-grid {
-      display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
-      gap: 10px;
-      margin-top: 10px;
-    }
-    .status-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 8px;
-      border-radius: 4px;
-      background: var(--background-color);
-    }
-    .status-icon {
-      width: 20px;
-      height: 20px;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      color: white;
-      font-size: 12px;
-    }
-    .status-success {
-      background: var(--success-color);
-    }
-    .status-error {
-      background: #dc3545;
-    }
-    .status-message {
-      font-size: 0.9em;
-      color: #666;
-      margin-top: 4px;
-    }
-    pre {
-      margin: 0;
-      border-radius: 4px;
-    }
-    code {
-      font-family: 'Monaco', 'Menlo', monospace;
-      font-size: 14px;
-    }
-  </style>
-</head>
 <body>
   <div class="container">
     <h1>HTML Compressor for LLM</h1>
@@ -237,6 +48,18 @@
         </div>
       </div>
       <div class="button-group">
         <input type="file" accept=".html,.htm" id="fileInput">
         <button type="submit">Process HTML</button>
@@ -254,7 +77,7 @@
       <div class="results-tabs">
         <div class="tab active" data-view="html">Compressed HTML</div>
         <div class="tab" data-view="json">JSON Structure</div>
-        <div class="tab" data-view="extracted">Extracted Data</div>
       </div>
       <div class="result-panel" id="htmlView">
@@ -283,16 +106,16 @@
         </div>
       </div>
-      <div class="result-panel" id="extractedView" style="display: none;">
         <div class="result-header">
-          <h3>Extracted Data</h3>
           <div class="button-group">
-            <button onclick="copyResult('extracted')">Copy</button>
-            <button onclick="downloadResult('extracted')">Download</button>
           </div>
         </div>
         <div class="result-content">
-          <pre><code class="language-json" id="extractedOutput"></code></pre>
         </div>
       </div>
     </div>
@@ -304,6 +127,11 @@
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-markup.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-json.min.js"></script>
   <script>
     const form = document.getElementById('compressorForm');
     const fileInput = document.getElementById('fileInput');
     const htmlInput = document.getElementById('htmlInput');
@@ -314,12 +142,15 @@
     // Tab switching
     document.querySelectorAll('.tab').forEach(tab => {
       tab.addEventListener('click', () => {
         document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
         tab.classList.add('active');
         const view = tab.dataset.view;
         document.getElementById('htmlView').style.display = view === 'html' ? 'block' : 'none';
         document.getElementById('jsonView').style.display = view === 'json' ? 'block' : 'none';
-        document.getElementById('extractedView').style.display = view === 'extracted' ? 'block' : 'none';
       });
     });
@@ -333,35 +164,115 @@
       }
     });
     // Form submission
     form.addEventListener('submit', async (e) => {
       e.preventDefault();
       const formData = new FormData(form);
       document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
         formData.set(checkbox.name, checkbox.checked);
       });
       try {
-        // Process HTML compression
         const response = await fetch('/process', {
           method: 'POST',
           body: formData,
         });
         const data = await response.json();
         if (data.error) {
           alert(data.error);
           return;
         }
-        // Update UI elements
         const statusContainer = document.querySelector('#operationStatus');
         const statusGrid = statusContainer.querySelector('.status-grid');
         statusContainer.style.display = 'block';
         statusGrid.innerHTML = Object.entries(data.operationStatus)
-          .map(([operation, status]) =>
-            `<div class="status-item">
               <div class="status-icon ${status.success ? 'status-success' : 'status-error'}">
                 ${status.success ? '✓' : '✗'}
               </div>
@@ -369,66 +280,37 @@
                 <div>${formatLabel(operation)}</div>
                 ${status.error ? `<div class="status-message">Error: ${status.error}</div>` : ''}
               </div>
-            </div>`
-          ).join('');
         statsContainer.style.display = 'grid';
         statsContainer.innerHTML = Object.entries(data.stats)
-          .map(([key, value]) =>
-            `<div class="stat-item">
               <div class="stat-label">${formatLabel(key)}</div>
               <div class="stat-value">${value}</div>
-            </div>`
-          ).join('');
         resultsContainer.style.display = 'block';
         document.getElementById('htmlOutput').textContent = data.result.html;
         document.getElementById('jsonOutput').textContent = data.result.json;
         Prism.highlightAll();
-        // Generate Cheerio script
-        const scriptResponse = await fetch(
-          'https://elevatics-ai-web-scraper-chat.hf.space/api/v1/generate-cheerio-script',
-          {
-            method: 'POST',
-            headers: {
-              'accept': 'application/json',
-              'X-API-Key': 'ae54a922-ed3a-4634-be4a-4e4dd470800a',
-              'Content-Type': 'application/json'
-            },
-            body: JSON.stringify({
-              html: data.result.html,
-              user_input: "",
-              api_key: ""
-            })
-          }
-        );
-        const scriptData = await scriptResponse.json();
-        if (scriptData.status !== 'success') {
-          throw new Error('Script generation failed: ' + scriptData.message);
-        }
-        // Extract data using generated script
-        const extractResponse = await fetch('/extract', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            html: data.result.html,
-            script: scriptData.cheerio_script
-          })
-        });
-        const extractedData = await extractResponse.json();
-        document.getElementById('extractedOutput').textContent =
-          JSON.stringify(extractedData, null, 2);
-        Prism.highlightAll();
       } catch (err) {
-        alert(`Processing error: ${err.message}`);
       }
     });
     // Utility functions
     function formatLabel(key) {
       return key
@@ -440,8 +322,7 @@
     }
     async function copyResult(type) {
-      const elementId = `${type}Output`;
-      const content = document.getElementById(elementId).textContent;
       try {
         await navigator.clipboard.writeText(content);
         showCopyFeedback();
@@ -451,14 +332,12 @@
     }
     function downloadResult(type) {
-      const elementId = `${type}Output`;
-      const content = document.getElementById(elementId).textContent;
-      const ext = type === 'extracted' ? 'json' : type;
       const blob = new Blob([content], { type: 'text/plain' });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
-      a.download = `compressed.${ext}`;
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
@@ -472,5 +351,4 @@
       }, 2000);
     }
   </script>
-</body>
-</html>

 <body>
   <div class="container">
     <h1>HTML Compressor for LLM</h1>
         </div>
       </div>
+      <div class="extraction-container">
+        <h3>Data Extraction</h3>
+        <textarea
+          id="extractionQuery"
+          placeholder="Enter your extraction query (e.g., 'extract product title and price')"
+        ></textarea>
+        <div class="button-group">
+          <button type="button" id="generateScript">Generate Extraction Script</button>
+          <button type="button" id="executeExtraction" disabled>Execute Extraction</button>
+        </div>
+      </div>
       <div class="button-group">
         <input type="file" accept=".html,.htm" id="fileInput">
         <button type="submit">Process HTML</button>
       <div class="results-tabs">
         <div class="tab active" data-view="html">Compressed HTML</div>
         <div class="tab" data-view="json">JSON Structure</div>
+        <div class="tab" data-view="extraction">Extraction Results</div>
       </div>
       <div class="result-panel" id="htmlView">
         </div>
       </div>
+      <div class="result-panel" id="extractionView" style="display: none;">
         <div class="result-header">
+          <h3>Extraction Results</h3>
           <div class="button-group">
+            <button onclick="copyResult('extraction')">Copy</button>
+            <button onclick="downloadResult('extraction')">Download</button>
           </div>
         </div>
         <div class="result-content">
+          <pre><code class="language-json" id="extractionOutput"></code></pre>
         </div>
       </div>
     </div>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-markup.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/components/prism-json.min.js"></script>
   <script>
+    const API_URL = 'https://elevatics-ai-web-scraper-chat.hf.space/api/v1/generate-cheerio-script';
+    const API_KEY = 'ae54a922-ed3a-4634-be4a-4e4dd470800a';
+    let currentCheerioScript = null;
     const form = document.getElementById('compressorForm');
     const fileInput = document.getElementById('fileInput');
     const htmlInput = document.getElementById('htmlInput');
     // Tab switching
     document.querySelectorAll('.tab').forEach(tab => {
       tab.addEventListener('click', () => {
+        // Update tabs
         document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
         tab.classList.add('active');
+        // Update views
         const view = tab.dataset.view;
         document.getElementById('htmlView').style.display = view === 'html' ? 'block' : 'none';
         document.getElementById('jsonView').style.display = view === 'json' ? 'block' : 'none';
+        document.getElementById('extractionView').style.display = view === 'extraction' ? 'block' : 'none';
       });
     });
       }
     });
+    // Cheerio script generation
+    async function generateCheerioScript() {
+      const htmlContent = document.getElementById('htmlOutput').textContent;
+      const userInput = document.getElementById('extractionQuery').value;
+      if (!htmlContent || !userInput) {
+        alert('Please process HTML and enter an extraction query first');
+        return;
+      }
+      try {
+        const response = await fetch(API_URL, {
+          method: 'POST',
+          headers: {
+            'accept': 'application/json',
+            'x-api-key': API_KEY,
+            'Content-Type': 'application/json',
+          },
+          body: JSON.stringify({
+            html: htmlContent,
+            user_input: userInput
+          })
+        });
+        const data = await response.json();
+        if (data.status === 'success') {
+          currentCheerioScript = data.cheerio_script;
+          document.getElementById('executeExtraction').disabled = false;
+          // Show the script in the JSON view
+          document.getElementById('jsonOutput').textContent = JSON.stringify({
+            cheerio_script: currentCheerioScript
+          }, null, 2);
+          Prism.highlightAll();
+        } else {
+          alert('Failed to generate extraction script');
+        }
+      } catch (error) {
+        alert('Error generating script: ' + error.message);
+      }
+    }
+    // Execute extraction
+    async function executeExtraction() {
+      if (!currentCheerioScript) {
+        alert('Please generate an extraction script first');
+        return;
+      }
+      const htmlContent = document.getElementById('htmlOutput').textContent;
+      try {
+        const response = await fetch('/extract', {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json'
+          },
+          body: JSON.stringify({
+            html: htmlContent,
+            script: currentCheerioScript
+          })
+        });
+        const data = await response.json();
+        document.getElementById('extractionOutput').textContent =
+          JSON.stringify(data, null, 2);
+        Prism.highlightAll();
+        // Switch to extraction view
+        document.querySelector('[data-view="extraction"]').click();
+      } catch (error) {
+        alert('Error executing extraction: ' + error.message);
+      }
+    }
     // Form submission
     form.addEventListener('submit', async (e) => {
       e.preventDefault();
       const formData = new FormData(form);
+      // Add checkbox states
       document.querySelectorAll('input[type="checkbox"]').forEach(checkbox => {
         formData.set(checkbox.name, checkbox.checked);
       });
       try {
         const response = await fetch('/process', {
           method: 'POST',
           body: formData,
         });
         const data = await response.json();
         if (data.error) {
           alert(data.error);
           return;
         }
+        // Display operation status
         const statusContainer = document.querySelector('#operationStatus');
         const statusGrid = statusContainer.querySelector('.status-grid');
         statusContainer.style.display = 'block';
         statusGrid.innerHTML = Object.entries(data.operationStatus)
+          .map(([operation, status]) => `
+            <div class="status-item">
               <div class="status-icon ${status.success ? 'status-success' : 'status-error'}">
                 ${status.success ? '✓' : '✗'}
               </div>
                 <div>${formatLabel(operation)}</div>
                 ${status.error ? `<div class="status-message">Error: ${status.error}</div>` : ''}
               </div>
+            </div>
+          `).join('');
+        // Display stats
         statsContainer.style.display = 'grid';
         statsContainer.innerHTML = Object.entries(data.stats)
+          .map(([key, value]) => `
+            <div class="stat-item">
               <div class="stat-label">${formatLabel(key)}</div>
               <div class="stat-value">${value}</div>
+            </div>
+          `).join('');
+        // Show results container
         resultsContainer.style.display = 'block';
+        // Update outputs with syntax highlighting
         document.getElementById('htmlOutput').textContent = data.result.html;
         document.getElementById('jsonOutput').textContent = data.result.json;
+        // Trigger Prism highlighting
         Prism.highlightAll();
       } catch (err) {
+        alert('Error processing HTML: ' + err.message);
       }
     });
+    // Event listeners for extraction
+    document.getElementById('generateScript').addEventListener('click', generateCheerioScript);
+    document.getElementById('executeExtraction').addEventListener('click', executeExtraction);
     // Utility functions
     function formatLabel(key) {
       return key
     }
     async function copyResult(type) {
+      const content = document.getElementById(`${type}Output`).textContent;
       try {
         await navigator.clipboard.writeText(content);
         showCopyFeedback();
     }
     function downloadResult(type) {
+      const content = document.getElementById(`${type}Output`).textContent;
       const blob = new Blob([content], { type: 'text/plain' });
       const url = URL.createObjectURL(blob);
       const a = document.createElement('a');
       a.href = url;
+      a.download = `compressed.${type}`;
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);
       }, 2000);
     }
   </script>
+</body>