ai-web-scraper-backend

Running

App Files Files Community

pvanand commited on Jan 26

Commit

f7737bb

verified ·

1 Parent(s): 7225716

Update public/index.html

Browse files

Files changed (1) hide show

public/index.html +555 -319

public/index.html CHANGED Viewed

@@ -1,354 +1,590 @@
-<body>
-  <div class="container">
-    <h1>HTML Compressor for LLM</h1>
-    <p>Compress HTML content for optimal LLM processing while preserving essential structure.</p>
-    <form id="compressorForm">
-      <textarea
-        name="html"
-        id="htmlInput"
-        placeholder="Paste your HTML here or upload a file..."
-      ></textarea>
-      <div class="options-container">
-        <h3>Compression Options</h3>
-        <div class="option-grid">
-          <div class="option-item">
-            <input type="checkbox" id="cleanHead" name="cleanHead" checked>
-            <label for="cleanHead">Clean head section</label>
-          </div>
-          <div class="option-item">
-            <input type="checkbox" id="removeScripts" name="removeScripts" checked>
-            <label for="removeScripts">Remove scripts</label>
-          </div>
-          <div class="option-item">
-            <input type="checkbox" id="removeStyles" name="removeStyles" checked>
-            <label for="removeStyles">Remove styles</label>
-          </div>
-          <div class="option-item">
-            <input type="checkbox" id="handleRepeatingElements" name="handleRepeatingElements" checked>
-            <label for="handleRepeatingElements">Handle repeating elements</label>
-          </div>
-          <div class="option-item">
-            <input type="checkbox" id="truncateText" name="truncateText" checked>
-            <label for="truncateText">Truncate text</label>
-          </div>
-          <div class="option-item">
-            <label for="truncateLength">Max text length:</label>
-            <input type="number" id="truncateLength" name="truncateLength" value="100" min="10" max="1000">
-          </div>
-          <div class="option-item">
-            <input type="checkbox" id="minifyHtml" name="minifyHtml" checked>
-            <label for="minifyHtml">Minify HTML</label>
-          </div>
-          <div class="option-item">
-            <input type="checkbox" id="removeMedia" name="removeMedia" checked>
-            <label for="removeMedia">Remove media</label>
-          </div>
-        </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>
-    </form>
-    <div id="operationStatus" class="operation-status" style="display: none;">
-      <h3>Operation Status</h3>
-      <div class="status-grid"></div>
-    </div>
-    <div id="stats" class="stats-grid" style="display: none;"></div>
-    <div class="results-container" style="display: none;">
-      <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 class="result-header">
-          <h3>HTML Output</h3>
-          <div class="button-group">
-            <button onclick="copyResult('html')">Copy</button>
-            <button onclick="downloadResult('html')">Download</button>
-          </div>
-        </div>
-        <div class="result-content">
-          <pre><code class="language-html" id="htmlOutput"></code></pre>
-        </div>
-      </div>
-      <div class="result-panel" id="jsonView" style="display: none;">
-        <div class="result-header">
-          <h3>JSON Structure</h3>
-          <div class="button-group">
-            <button onclick="copyResult('json')">Copy</button>
-            <button onclick="downloadResult('json')">Download</button>
-          </div>
-        </div>
-        <div class="result-content">
-          <pre><code class="language-json" id="jsonOutput"></code></pre>
-        </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>
-    <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/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');
-    const resultsContainer = document.querySelector('.results-container');
-    const statsContainer = document.getElementById('stats');
-    const copyFeedback = document.querySelector('.copy-feedback');
-    // 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';
-      });
-    });
-    // File input handler
-    fileInput.addEventListener('change', (e) => {
-      const file = e.target.files[0];
-      if (file) {
-        const reader = new FileReader();
-        reader.onload = (e) => htmlInput.value = e.target.result;
-        reader.readAsText(file);
-      }
-    });
-    // 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>
-                <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
-        .replace(/([A-Z])/g, ' $1')
-        .replace(/([a-z])([A-Z])/g, '$1 $2')
-        .toLowerCase()
-        .replace(/^./, str => str.toUpperCase())
-        .replace('Html', 'HTML');
     }
-    async function copyResult(type) {
-      const content = document.getElementById(`${type}Output`).textContent;
-      try {
-        await navigator.clipboard.writeText(content);
-        showCopyFeedback();
-      } catch (err) {
-        alert('Failed to copy to clipboard');
-      }
     }
-    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);
-      URL.revokeObjectURL(url);
     }
-    function showCopyFeedback() {
-      copyFeedback.style.display = 'block';
-      setTimeout(() => {
-        copyFeedback.style.display = 'none';
-      }, 2000);
     }
-  </script>
-</body>

+<!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;
     }
+    /* Add to the existing style section */
+.extraction-container {
+  margin: 20px 0;
+  padding: 20px;
+  background: var(--background-color);
+  border-radius: 8px;
+}
+.extraction-container textarea {
+  height: 100px;
+  margin-bottom: 10px;
+}
+#executeExtraction:disabled {
+  background: var(--secondary-color);
+  cursor: not-allowed;
+}
+  </style>
+</head>
+<body>
+    <div class="container">
+      <h1>HTML Compressor for LLM</h1>
+      <p>Compress HTML content for optimal LLM processing while preserving essential structure.</p>
+      <form id="compressorForm">
+        <textarea
+          name="html"
+          id="htmlInput"
+          placeholder="Paste your HTML here or upload a file..."
+        ></textarea>
+        <div class="options-container">
+          <h3>Compression Options</h3>
+          <div class="option-grid">
+            <div class="option-item">
+              <input type="checkbox" id="cleanHead" name="cleanHead" checked>
+              <label for="cleanHead">Clean head section</label>
+            </div>
+            <div class="option-item">
+              <input type="checkbox" id="removeScripts" name="removeScripts" checked>
+              <label for="removeScripts">Remove scripts</label>
+            </div>
+            <div class="option-item">
+              <input type="checkbox" id="removeStyles" name="removeStyles" checked>
+              <label for="removeStyles">Remove styles</label>
+            </div>
+            <div class="option-item">
+              <input type="checkbox" id="handleRepeatingElements" name="handleRepeatingElements" checked>
+              <label for="handleRepeatingElements">Handle repeating elements</label>
+            </div>
+            <div class="option-item">
+              <input type="checkbox" id="truncateText" name="truncateText" checked>
+              <label for="truncateText">Truncate text</label>
+            </div>
+            <div class="option-item">
+              <label for="truncateLength">Max text length:</label>
+              <input type="number" id="truncateLength" name="truncateLength" value="100" min="10" max="1000">
+            </div>
+            <div class="option-item">
+              <input type="checkbox" id="minifyHtml" name="minifyHtml" checked>
+              <label for="minifyHtml">Minify HTML</label>
+            </div>
+            <div class="option-item">
+              <input type="checkbox" id="removeMedia" name="removeMedia" checked>
+              <label for="removeMedia">Remove media</label>
+            </div>
+          </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>
+      </form>
+      <div id="operationStatus" class="operation-status" style="display: none;">
+        <h3>Operation Status</h3>
+        <div class="status-grid"></div>
+      </div>
+      <div id="stats" class="stats-grid" style="display: none;"></div>
+      <div class="results-container" style="display: none;">
+        <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 class="result-header">
+            <h3>HTML Output</h3>
+            <div class="button-group">
+              <button onclick="copyResult('html')">Copy</button>
+              <button onclick="downloadResult('html')">Download</button>
+            </div>
+          </div>
+          <div class="result-content">
+            <pre><code class="language-html" id="htmlOutput"></code></pre>
+          </div>
+        </div>
+        <div class="result-panel" id="jsonView" style="display: none;">
+          <div class="result-header">
+            <h3>JSON Structure</h3>
+            <div class="button-group">
+              <button onclick="copyResult('json')">Copy</button>
+              <button onclick="downloadResult('json')">Download</button>
+            </div>
+          </div>
+          <div class="result-content">
+            <pre><code class="language-json" id="jsonOutput"></code></pre>
+          </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>
+      <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/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');
+      const resultsContainer = document.querySelector('.results-container');
+      const statsContainer = document.getElementById('stats');
+      const copyFeedback = document.querySelector('.copy-feedback');
+      // 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';
+        });
+      });
+      // File input handler
+      fileInput.addEventListener('change', (e) => {
+        const file = e.target.files[0];
+        if (file) {
+          const reader = new FileReader();
+          reader.onload = (e) => htmlInput.value = e.target.result;
+          reader.readAsText(file);
+        }
+      });
+      // 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>
+                  <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
+          .replace(/([A-Z])/g, ' $1')
+          .replace(/([a-z])([A-Z])/g, '$1 $2')
+          .toLowerCase()
+          .replace(/^./, str => str.toUpperCase())
+          .replace('Html', 'HTML');
+      }
+      async function copyResult(type) {
+        const content = document.getElementById(`${type}Output`).textContent;
+        try {
+          await navigator.clipboard.writeText(content);
+          showCopyFeedback();
+        } catch (err) {
+          alert('Failed to copy to clipboard');
+        }
+      }
+      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);
+        URL.revokeObjectURL(url);
+      }
+      function showCopyFeedback() {
+        copyFeedback.style.display = 'block';
+        setTimeout(() => {
+          copyFeedback.style.display = 'none';
+        }, 2000);
+      }
+    </script>
+  </body>
+</html>