Update index.html

index.html

@@ -1,32 +1,81 @@
-<div class="container">
-    <h1>WebGPU AI Studio</h1>
-    <p>Private AI processing on your local GPU.</p>
-    
-    <div id="progress-container" style="display: none; margin-bottom: 20px;">
-        <div style="width: 100%; background: #333; height: 12px; border-radius: 6px; overflow: hidden;">
-            <div id="progress-bar" 
-                 role="progressbar" 
-                 aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"
-                 style="width: 0%; background: linear-gradient(90deg, #00ffcc, #00aba9); height: 100%; transition: width 0.3s ease;">
-            </div>
-        </div>
-        <div id="progress-text" style="font-size: 0.85em; color: #888; margin-top: 8px;">Initializing...</div>
-    </div>
-
-    <div style="margin-bottom: 20px;">
-        <input type="file" id="upload" accept="image/*" style="display: none;">
-        <label for="upload" style="background: #333; padding: 10px 15px; border-radius: 5px; cursor: pointer; border: 1px dashed #666;">
-            📁 Choose an Image
-        </label>
-    </div>
-
-    <button id="process-btn" style="background: #00ffcc; border: none; padding: 12px 24px; border-radius: 8px; cursor: pointer; font-weight: bold; color: #121212; width: 100%; max-width: 300px;">
-        Analyze Image
-    </button>
-
-    <div id="output" style="margin-top: 25px; font-size: 1.1em; min-height: 1.5em; color: #00ffcc;">
-        Ready to analyze.
-    </div>
-    
-    <img id="preview" style="max-width: 100%; margin-top: 20px; border-radius: 12px; border: 2px solid #333; display: none;">
-</div>
+import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1';
+
+// 1. Select UI Elements
+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 = null;
+
+// 2. Initialize Model Function
+async function initModel() {
+    try {
+        progressContainer.style.display = 'block';
+        output.textContent = "Loading AI engine...";
+
+        classifier = await pipeline('image-classification', 'Xenova/vit-gpt2-image-captioning', {
+            device: 'webgpu', // Forces local GPU usage
+            progress_callback: (data) => {
+                if (data.status === 'progress') {
+                    const pct = Math.round(data.progress);
+                    progressBar.style.width = pct + '%';
+                    progressBar.setAttribute('aria-valuenow', pct);
+                    progressText.textContent = `Downloading ${data.file}: ${pct}%`;
+                } else if (data.status === 'ready') {
+                    progressText.textContent = "Model Ready!";
+                    setTimeout(() => progressContainer.style.display = 'none', 1500);
+                }
+            }
+        });
+        return true;
+    } catch (err) {
+        console.error("WebGPU Initialization Error:", err);
+        output.textContent = "WebGPU Error: " + err.message;
+        progressText.textContent = "Try using Chrome or Edge with Hardware Acceleration ON.";
+        return false;
+    }
+}
+
+// 3. Handle Analysis
+btn.onclick = async () => {
+    if (!upload.files[0]) {
+        output.textContent = "⚠️ Please select an image first.";
+        return;
+    }
+
+    // Load model if it's the first time clicking
+    if (!classifier) {
+        const ready = await initModel();
+        if (!ready) return;
+    }
+
+    try {
+        btn.disabled = true;
+        btn.textContent = "Processing...";
+        output.textContent = "Thinking...";
+
+        const result = await classifier(preview.src);
+
+        output.innerHTML = `<strong>Result:</strong> ${result[0].label}`;
+    } catch (err) {
+        output.textContent = "Analysis failed: " + err.message;
+    } finally {
+        btn.disabled = false;
+        btn.textContent = "Analyze Image";
+    }
+};
+
+// 4. Handle Image Preview
+upload.onchange = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+        const url = URL.createObjectURL(file);
+        preview.src = url;
+        preview.style.display = 'block';
+        output.textContent = "Image ready. Click Analyze.";
+    }
+};