Spaces:

robertnetwork
/

strudel-ml

Running

App Files Files Community

robertnetwork commited on Jul 29, 2025

Commit

4802aed

verified ·

1 Parent(s): 91e7c3f

Update index.html

Browse files

Files changed (1) hide show

index.html +57 -88

index.html CHANGED Viewed

@@ -1,132 +1,101 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="utf-8" />
   <title>🎵 Strudel.cc Code Generator</title>
   <style>
-    body { font-family: sans-serif; max-width: 800px; margin: 2em auto; padding: 0 1em; }
-    h1 { text-align: center; }
-    label, textarea, button, pre, #status { display: block; width: 100%; box-sizing: border-box; margin-bottom: 1em; }
-    textarea { padding: 0.5em; font-family: monospace; }
-    button { padding: 0.75em; font-size: 1em; cursor: pointer; }
-    pre { background: #f7f7f7; padding: 1em; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
     #status { font-style: italic; color: #555; }
   </style>
 </head>
 <body>
-  <h1>🎵 Strudel.cc Code Generator</h1>
-  <label for="styleInput">Style/Prompt:</label>
-  <textarea id="styleInput" rows="3" placeholder="e.g., electronic, ambient…">electronic</textarea>
-  <button id="generateBtn" disabled>Loading model…</button>
   <div id="status">Initializing…</div>
-  <h2>Generated Strudel.cc Code</h2>
   <pre id="output"></pre>
   <script type="module">
-    // Grab our status and button elements up front
-    const statusEl = document.getElementById('status');
-    const btn = document.getElementById('generateBtn');
-    const outEl = document.getElementById('output');
-    // ── FETCH OVERRIDE ──
-    // Intercept downloads of .onnx files to report progress
-    const originalFetch = window.fetch.bind(window);
-    window.fetch = async (input, init) => {
-      const url = typeof input === 'string' ? input : input.url;
-      const response = await originalFetch(input, init);
-      if (url.endsWith('.onnx')) {
-        const lengthHeader = response.headers.get('Content-Length');
-        if (lengthHeader) {
-          const total = parseInt(lengthHeader, 10);
-          let loaded = 0;
-          const reader = response.body.getReader();
-          const stream = new ReadableStream({
-            start(ctrl) {
-              function read() {
-                reader.read().then(({ done, value }) => {
-                  if (done) {
-                    ctrl.close();
-                    return;
-                  }
-                  loaded += value.byteLength;
-                  statusEl.textContent = `Downloading model weights: ${(loaded/total*100).toFixed(1)}%`;
-                  ctrl.enqueue(value);
-                  read();
-                });
-              }
-              read();
-            }
-          });
-          return new Response(stream, { headers: response.headers });
-        } else {
-          statusEl.textContent = 'Downloading model weights…';
-        }
-      }
-      return response;
-    };
-    // ── IMPORT & CONFIGURE TRANSFORMERS.JS ──
-    import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@3.7.0/dist/transformers.esm.js';
-    // Allow remote ONNX model downloads
     env.allowRemoteModels = true;
-    // Point to the ONNX runtime WASM files
-    env.backends.onnx.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@3.7.0/dist/onnx/';
-    let generatorPipeline;
-    // ── INITIALIZE MODEL ──
-    async function loadModel() {
-      statusEl.textContent = 'Loading model…';
       try {
-        generatorPipeline = await pipeline(
           'text-generation',
-          'robertnetwork/strudel-small-onnx',
-          { device: 'webgpu', dtype: 'fp32' }
         );
-        statusEl.textContent = 'Model loaded successfully!';
         btn.disabled = false;
-        btn.textContent = '🎵 Generate Code';
-      } catch (err) {
-        statusEl.textContent = `Error loading model: ${err}`;
       }
     }
-    // ── HANDLE GENERATION ──
     btn.addEventListener('click', async () => {
-      const style = document.getElementById('styleInput').value.trim();
-      const instruction = 'Generate Strudel.cc JavaScript code given style tags and a prompt, without commentary or markdown.';
-      const prompt = `Instruction: ${instruction}\nInput: ${style}\nOutput:`;
       statusEl.textContent = 'Generating…';
-      outEl.textContent = '';
       try {
-        const result = await generatorPipeline(prompt, {
           max_length: 256,
           temperature: 0.7,
           top_p: 0.9,
           do_sample: true
         });
-        let code = result[0].generated_text || result[0].text || '';
-        if (code.includes('Output:')) {
-          code = code.split('Output:').pop();
         }
-        outEl.textContent = code.trim();
-        statusEl.textContent = 'Generation succeeded!';
-      } catch (err) {
-        statusEl.textContent = `Error during generation: ${err}`;
       }
     });
-    // Kick off model load on page load
-    loadModel();
   </script>
 </body>
 </html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
+  <meta charset="UTF-8">
   <title>🎵 Strudel.cc Code Generator</title>
   <style>
+    body { font-family: sans-serif; margin: 2em; max-width: 800px; }
+    textarea, button, pre { width: 100%; box-sizing: border-box; margin: .5em 0; }
+    textarea { height: 3em; padding: .5em; font-family: monospace; }
+    button { padding: .75em; font-size: 1em; }
     #status { font-style: italic; color: #555; }
+    pre { background: #f7f7f7; padding: 1em; white-space: pre-wrap; word-break: break-word; }
   </style>
 </head>
 <body>
+  <h1>🎵 Strudel.cc Code Generator</h1>
+  <textarea id="prompt" placeholder="e.g. electronic"></textarea>
+  <button id="generate" disabled>Loading model…</button>
   <div id="status">Initializing…</div>
+  <h2>Generated Code</h2>
   <pre id="output"></pre>
   <script type="module">
+    import { pipeline, env }
+      from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@3.7.0/dist/transformers.esm.js';
+    // Allow Hub downloads, point to onnx wasm files:
     env.allowRemoteModels = true;
+    env.backends.onnx.wasm.wasmPaths =
+      'https://cdn.jsdelivr.net/npm/@xenova/transformers@3.7.0/dist/onnx/';
+    const MODEL_ID = 'robertnetwork/strudel-small-onnx';  // ONNX version
+    const statusEl   = document.getElementById('status');
+    const btn        = document.getElementById('generate');
+    const promptEl   = document.getElementById('prompt');
+    const outputEl   = document.getElementById('output');
+    let generator;
+    async function init() {
       try {
+        statusEl.textContent = 'Loading tokenizer and model…';
+        generator = await pipeline(
           'text-generation',
+          MODEL_ID,
+          {
+            device: 'webgpu',
+            dtype: 'fp32',
+            // progress_callback will receive messages like:
+            // "Downloading tokenizer_config.json…", "Downloading pytorch_model.bin…", "Compiling WebGPU shaders…"
+            progress_callback: msg => statusEl.textContent = msg
+          }
         );
+        statusEl.textContent = 'Model ready! Enter a prompt and click Generate.';
         btn.disabled = false;
+        btn.textContent = '🎵 Generate';
+      } catch (e) {
+        statusEl.textContent = '❌ Error loading model: ' + e;
       }
     }
     btn.addEventListener('click', async () => {
+      const style = promptEl.value.trim();
+      if (!style) return;
+      outputEl.textContent = '';
       statusEl.textContent = 'Generating…';
+      btn.disabled = true;
       try {
+        const instruction =
+          'Generate Strudel.cc JavaScript code given style tags and a prompt, without commentary or markdown.';
+        const prompt = `Instruction: ${instruction}\nInput: ${style}\nOutput:`;
+        // Run the model
+        const [ result ] = await generator(prompt, {
           max_length: 256,
           temperature: 0.7,
           top_p: 0.9,
           do_sample: true
         });
+        let text = result.generated_text || result.text || '';
+        if (text.includes('Output:')) {
+          text = text.split('Output:').pop();
         }
+        outputEl.textContent = text.trim();
+        statusEl.textContent = 'Done!';
+      } catch (e) {
+        statusEl.textContent = '❌ Generation error: ' + e;
+      } finally {
+        btn.disabled = false;
       }
     });
+    // Start loading immediately
+    init();
   </script>
 </body>
 </html>