File size: 2,746 Bytes
a522962
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!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>