Spaces:

jaison2611
/

WebGPU-browser-brain-lab

Running

App Files Files Community

jaison2611 commited on Mar 20

Commit

a6c95b6

verified ·

1 Parent(s): edda442

Update index.html

Browse files

Files changed (1) hide show

index.html +178 -81

index.html CHANGED Viewed

@@ -1,81 +1,178 @@
-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.";
-    }
-};

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WebGPU AI Studio</title>
+    <script src="https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.1"></script>
+    <style>
+        :root {
+            --primary: #00ffcc;
+            --bg: #121212;
+            --card: #1e1e1e;
+            --text: #ffffff;
+        }
+        body {
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+            background-color: var(--bg);
+            color: var(--text);
+            margin: 0;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            min-height: 100vh;
+        }
+        .container {
+            width: 100%;
+            max-width: 500px;
+            background: var(--card);
+            padding: 40px;
+            border-radius: 20px;
+            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
+            text-align: center;
+        }
+        h1 {
+            margin-top: 0;
+            color: var(--primary);
+            font-size: 1.8rem;
+        }
+        p {
+            color: #888;
+            font-size: 0.9rem;
+            margin-bottom: 30px;
+        }
+        /* Progress Bar Styling */
+        #progress-container {
+            margin-bottom: 25px;
+            text-align: left;
+        }
+        .progress-bg {
+            width: 100%;
+            background: #333;
+            height: 12px;
+            border-radius: 6px;
+            overflow: hidden;
+        }
+        #progress-bar {
+            width: 0%;
+            background: linear-gradient(90deg, var(--primary), #00aba9);
+            height: 100%;
+            transition: width 0.3s ease;
+        }
+        #progress-text {
+            font-size: 0.75rem;
+            color: #aaa;
+            margin-top: 8px;
+        }
+        /* File Upload Styling */
+        .upload-section {
+            margin-bottom: 25px;
+        }
+        .custom-file-upload {
+            display: inline-block;
+            padding: 12px 20px;
+            cursor: pointer;
+            background: #2a2a2a;
+            border: 1px dashed #555;
+            border-radius: 10px;
+            transition: all 0.2s;
+        }
+        .custom-file-upload:hover {
+            border-color: var(--primary);
+            background: #333;
+        }
+        input[type="file"] {
+            display: none;
+        }
+        /* Button Styling */
+        #process-btn {
+            background: var(--primary);
+            color: #121212;
+            border: none;
+            padding: 15px 30px;
+            border-radius: 12px;
+            font-weight: bold;
+            font-size: 1rem;
+            cursor: pointer;
+            width: 100%;
+            transition: transform 0.1s, opacity 0.2s;
+        }
+        #process-btn:active {
+            transform: scale(0.98);
+        }
+        #process-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
+        }
+        /* Output & Image Preview */
+        #output {
+            margin-top: 30px;
+            padding: 15px;
+            border-radius: 10px;
+            background: rgba(0, 255, 204, 0.05);
+            border: 1px solid rgba(0, 255, 204, 0.1);
+            min-height: 20px;
+            font-style: italic;
+        }
+        #preview {
+            max-width: 100%;
+            margin-top: 25px;
+            border-radius: 15px;
+            border: 2px solid #333;
+            display: none;
+        }
+        .status-ready {
+            color: var(--primary);
+            font-weight: bold;
+        }
+    </style>
+</head>
+<body>
+<div class="container">
+    <h1>WebGPU AI Studio</h1>
+    <p>Run private AI analysis on your local GPU.</p>
+    <div id="progress-container" style="display: none;">
+        <div class="progress-bg">
+            <div id="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100"></div>
+        </div>
+        <div id="progress-text">Initializing AI models...</div>
+    </div>
+    <div class="upload-section">
+        <label for="upload" class="custom-file-upload">
+            📁 Select Image to Analyze
+        </label>
+        <input type="file" id="upload" accept="image/*">
+    </div>
+    <button id="process-btn">Analyze Image</button>
+    <div id="output">Ready for input.</div>
+    <img id="preview" alt="Image Preview">
+</div>
+<script type="module" src="progress_callback.js"></script>
+</body>
+</html>