Scratch_vlm_v1_2

Sleeping

App Files Files Community

WebashalarForML commited on Jul 31

Commit

f67c2f0

verified ·

1 Parent(s): f6d5d4e

Update templates/app_index.html

Browse files

Files changed (1) hide show

templates/app_index.html +38 -92

templates/app_index.html CHANGED Viewed

@@ -1,93 +1,39 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>Upload PDF for Sprite Extraction</title>
-  <style>
-    body {
-      font-family: Arial;
-      padding: 20px;
-      background: #f5f5f5;
-    }
-    .sprite {
-      margin: 20px;
-      padding: 10px;
-      background: white;
-      border: 1px solid #ccc;
-      display: inline-block;
-      width: 250px;
-    }
-    .sprite img {
-      width: 100%;
-    }
-    #status {
-      margin-top: 15px;
-      font-weight: bold;
-    }
-  </style>
-</head>
-<body>
-  <h2>Upload PDF for Image Extraction and Captioning</h2>
-  <form id="pdfForm" enctype="multipart/form-data">
-    <input type="file" id="pdfFile" name="pdf_file" accept="application/pdf">
-    <button type="submit">Upload & Process</button>
-  </form>
-  <div id="status"></div>
-  <div id="result-container"></div>
-  <script>
-    const form = document.getElementById('pdfForm');
-    const statusEl = document.getElementById('status');
-    const resultEl = document.getElementById('result-container');
-    form.addEventListener('submit', async (e) => {
-      e.preventDefault();
-      const fileInput = document.getElementById('pdfFile');
-      if (!fileInput.files[0]) {
-        alert('Please select a PDF file.');
-        return;
-      }
-      statusEl.textContent = 'Uploading and processing...';
-      resultEl.innerHTML = '';
-      const formData = new FormData();
-      formData.append('pdf_file', fileInput.files[0]);
-      try {
-        const res = await fetch('/process_pdf', {
-          method: 'POST',
-          body: formData
-        });
-        const data = await res.json();
-        if (!res.ok) throw new Error(data.error || 'Upload failed');
-        statusEl.textContent = data.message;
-        const sprites = data.sprites;
-        if (!sprites || typeof sprites !== "object") {
-          statusEl.textContent = '⚠️ No valid sprite data received.';
-          return;
-        }
-        for (const [key, sprite] of Object.entries(sprites)) {
-          const div = document.createElement('div');
-          div.className = 'sprite';
-          const img = document.createElement('img');
-          img.src = `data:image/png;base64,${sprite.base64}`;
-          const name = document.createElement('h4');
-          name.textContent = sprite.name;
-          const desc = document.createElement('p');
-          desc.textContent = sprite.description;
-          div.appendChild(img);
-          div.appendChild(name);
-          div.appendChild(desc);
-          resultEl.appendChild(div);
-        }
-      } catch (err) {
-        statusEl.textContent = `❌ Error: ${err.message}`;
-      }
-    });
-  </script>
-</body>
 </html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>Show JSON Response</title>
+  <style>
+    body { font-family: sans-serif; padding: 20px; }
+    button { padding: 8px 12px; }
+    pre { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 10px; }
+  </style>
+</head>
+<body>
+  <h2>Fetch & Show JSON</h2>
+  <button id="fetchBtn">Fetch JSON</button>
+  <pre id="jsonOutput">Click the button to load JSON…</pre>
+  <script>
+    document.getElementById('fetchBtn').addEventListener('click', async () => {
+      const output = document.getElementById('jsonOutput');
+      output.textContent = 'Loading…';
+      try {
+        const res = await fetch('/process_pdf', { method: 'POST' /*, body: formData if needed */ });
+        const data = await res.json();
+        if (!res.ok) {
+          output.textContent = `Error ${res.status}: ${data.error || JSON.stringify(data)}`;
+        } else {
+          // Pretty-print the entire JSON object
+          output.textContent = JSON.stringify(data, null, 2);
+        }
+      } catch (err) {
+        output.textContent = `Fetch failed: ${err.message}`;
+      }
+    });
+  </script>
+</body>
 </html>