Create progress_callback.js

progress_callback.js

@@ -0,0 +1,45 @@
+<script type="module">
+    const progressContainer = document.getElementById('progress-container');
+    const progressBar = document.getElementById('progress-bar');
+    const progressText = document.getElementById('progress-text');
+    const output = document.getElementById('output');
+    const upload = document.getElementById('upload');
+    const preview = document.getElementById('preview');
+    const btn = document.getElementById('process-btn');
+
+    let classifier;
+
+    async function init() {
+        // Show the progress UI
+        progressContainer.style.display = 'block';
+
+        classifier = await window.Transformers.pipeline('image-classification', 'Xenova/vit-gpt2-image-captioning', {
+            device: 'webgpu',
+            // This function runs every time a chunk of the model is downloaded
+            progress_callback: (data) => {
+                if (data.status === 'progress') {
+                    const pct = Math.round(data.progress);
+                    progressBar.style.width = pct + '%';
+                    progressText.textContent = `Downloading ${data.file}: ${pct}%`;
+                } else if (data.status === 'ready') {
+                    progressText.textContent = "Model Ready!";
+                    setTimeout(() => progressContainer.style.display = 'none', 2000);
+                }
+            }
+        });
+    }
+
+    // Rest of your logic...
+    upload.onchange = (e) => {
+        const file = e.target.files[0];
+        preview.src = URL.createObjectURL(file);
+        preview.style.display = 'block';
+    };
+
+    btn.onclick = async () => {
+        if (!classifier) await init();
+        output.textContent = "Thinking...";
+        const result = await classifier(preview.src);
+        output.textContent = "Result: " + result[0].label;
+    };
+</script>