Scratch_Vision_Game_dup

Sleeping

App Files Files Community

prthm11 commited on about 1 month ago

Commit

1fe061a

verified ·

1 Parent(s): b1fb4e5

Update templates/app_index.html

Browse files

Files changed (1) hide show

templates/app_index.html +79 -125

templates/app_index.html CHANGED Viewed

@@ -1,125 +1,79 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-  <meta charset="UTF-8">
-  <title>PDF Image Captioning</title>
-  <style>
-    body {
-      font-family: Arial, sans-serif;
-      margin: 30px;
-      background-color: #f9f9f9;
-    }
-    h2 {
-      margin-bottom: 10px;
-    }
-    input[type="text"] {
-      width: 60%;
-      padding: 8px;
-      margin-right: 10px;
-    }
-    button {
-      padding: 8px 16px;
-      cursor: pointer;
-    }
-    .sprite {
-      display: inline-block;
-      margin: 20px;
-      border: 1px solid #ccc;
-      padding: 10px;
-      background: white;
-      width: 250px;
-      vertical-align: top;
-    }
-    .sprite img {
-      width: 100%;
-      height: auto;
-      margin-bottom: 10px;
-    }
-    .sprite h4, .sprite p {
-      margin: 4px 0;
-    }
-    #result-container {
-      margin-top: 30px;
-    }
-    #status {
-      margin-top: 20px;
-      font-weight: bold;
-    }
-  </style>
-</head>
-<body>
-  <h2>PDF Sprite Image Captioning</h2>
-  <input type="text" id="pdfPath" placeholder="Enter full PDF path (e.g., E:/folder/sample.pdf)">
-  <button onclick="processPDF()">Process PDF</button>
-  <div id="status"></div>
-  <div id="result-container"></div>
-  <script>
-    async function processPDF() {
-      const pdfPath = document.getElementById("pdfPath").value.trim();
-      const statusEl = document.getElementById("status");
-      const resultContainer = document.getElementById("result-container");
-      if (!pdfPath) {
-        alert("Please enter a valid PDF path.");
-        return;
-      }
-      statusEl.textContent = "Processing PDF...";
-      resultContainer.innerHTML = "";
-      try {
-        const response = await fetch("/process_pdf", {
-          method: "POST",
-          headers: {
-            "Content-Type": "application/json"
-          },
-          body: JSON.stringify({ pdf_path: pdfPath })
-        });
-        const result = await response.json();
-        if (!response.ok) {
-          throw new Error(result.error || "Unknown error");
-        }
-        statusEl.textContent = result.message;
-        const sprites = result.sprites;
-        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 || "No name";
-          const desc = document.createElement("p");
-          desc.textContent = sprite.description || "No description";
-          div.appendChild(img);
-          div.appendChild(name);
-          div.appendChild(desc);
-          resultContainer.appendChild(div);
-        }
-      } catch (err) {
-        statusEl.textContent = "❌ Error: " + err.message;
-      }
-    }
-  </script>
-</body>
-</html>

+<!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;
+        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>