Update public/index.html

public/index.html

@@ -13,7 +13,6 @@
       --border-color: #dee2e6;
       --background-color: #f8f9fa;
     }
-
     body {
       font-family: system-ui, -apple-system, sans-serif;
       line-height: 1.6;
@@ -21,7 +20,6 @@
       padding: 20px;
       background: var(--background-color);
     }
-
     .container {
       max-width: 1200px;
       margin: 0 auto;
@@ -30,7 +28,6 @@
       border-radius: 8px;
       box-shadow: 0 2px 4px rgba(0,0,0,0.1);
     }
-
     textarea {
       width: 100%;
       height: 200px;
@@ -42,32 +39,27 @@
       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;
@@ -77,21 +69,17 @@
       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;
@@ -99,18 +87,15 @@
       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;
@@ -119,33 +104,28 @@
       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;
@@ -156,21 +136,18 @@
       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;
@@ -179,7 +156,6 @@
       border-radius: 4px;
       background: var(--background-color);
     }
-
     .status-icon {
       width: 20px;
       height: 20px;
@@ -190,26 +166,21 @@
       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;
@@ -283,6 +254,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">
@@ -310,12 +282,24 @@
           <pre><code class="language-json" id="jsonOutput"></code></pre>
         </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>
 
     <div class="copy-feedback">Copied to clipboard!</div>
   </div>
 
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
   <script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.24.1/prism.min.js"></script>
   <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>
@@ -330,14 +314,12 @@
     // 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('extractedView').style.display = view === 'extracted' ? 'block' : 'none';
       });
     });
 
@@ -354,35 +336,32 @@
     // 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 {
+        // Process HTML compression
         const response = await fetch('/process', {
           method: 'POST',
           body: formData,
         });
-        
         const data = await response.json();
-        
+
         if (data.error) {
           alert(data.error);
           return;
         }
 
-        // Display operation status
+        // 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">
+          .map(([operation, status]) => 
+            `<div class="status-item">
               <div class="status-icon ${status.success ? 'status-success' : 'status-error'}">
                 ${status.success ? '✓' : '✗'}
               </div>
@@ -390,30 +369,63 @@
                 <div>${formatLabel(operation)}</div>
                 ${status.error ? `<div class="status-message">Error: ${status.error}</div>` : ''}
               </div>
-            </div>
-          `).join('');
+            </div>`
+          ).join('');
 
-        // Display stats
         statsContainer.style.display = 'grid';
         statsContainer.innerHTML = Object.entries(data.stats)
-          .map(([key, value]) => `
-            <div class="stat-item">
+          .map(([key, value]) => 
+            `<div class="stat-item">
               <div class="stat-label">${formatLabel(key)}</div>
               <div class="stat-value">${value}</div>
-            </div>
-          `).join('');
+            </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();
+
+        // 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('Error processing HTML: ' + err.message);
+        alert(`Processing error: ${err.message}`);
       }
     });
 
@@ -428,7 +440,8 @@
     }
 
     async function copyResult(type) {
-      const content = document.getElementById(`${type}Output`).textContent;
+      const elementId = `${type}Output`;
+      const content = document.getElementById(elementId).textContent;
       try {
         await navigator.clipboard.writeText(content);
         showCopyFeedback();
@@ -438,12 +451,14 @@
     }
 
     function downloadResult(type) {
-      const content = document.getElementById(`${type}Output`).textContent;
+      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.${type}`;
+      a.download = `compressed.${ext}`;
       document.body.appendChild(a);
       a.click();
       document.body.removeChild(a);