Spaces:

robertnetwork
/

strudel-ml

Running

App Files Files Community

robertnetwork commited on Jul 29, 2025

Commit

91e7c3f

verified ·

1 Parent(s): c4ee964

Update index.html

Browse files

Files changed (1) hide show

index.html +89 -30

index.html CHANGED Viewed

@@ -6,68 +6,127 @@
   <style>
     body { font-family: sans-serif; max-width: 800px; margin: 2em auto; padding: 0 1em; }
     h1 { text-align: center; }
-    textarea { width: 100%; box-sizing: border-box; padding: 0.5em; margin-bottom: 1em; font-family: monospace; }
-    button { display: block; margin: 0 auto 1em; padding: 0.75em 1.5em; font-size: 1em; }
     pre { background: #f7f7f7; padding: 1em; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
   </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, techno…">electronic</textarea>
-  <button id="generateBtn">🎵 Generate Code</button>
   <h2>Generated Strudel.cc Code</h2>
-  <pre id="output">Waiting for input…</pre>
   <script type="module">
-    // Load Transformers.js from CDN
     import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@3.7.0/dist/transformers.esm.js';
-    // Allow remote models from the Hub (default)
     env.allowRemoteModels = true;
-    // Point to the ONNX/WebAssembly backend files
     env.backends.onnx.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@3.7.0/dist/onnx/';
-    async function init() {
-      // Create a text-generation pipeline on WebGPU
-      const gen = await pipeline(
-        'text-generation',
-        'robertnetwork/strudel-small-onnx',
-        {
-          device: 'webgpu',
-          dtype: 'fp32',        // fp32 for WebGPU
-        }
-      );
-      document.getElementById('generateBtn').onclick = 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:`;
-        const outEl = document.getElementById('output');
-        outEl.textContent = 'Generating…';
-        // Run the model
-        const result = await gen(prompt, {
           max_length: 256,
           temperature: 0.7,
           top_p: 0.9,
           do_sample: true
         });
-        // Extract the generated text
         let code = result[0].generated_text || result[0].text || '';
         if (code.includes('Output:')) {
           code = code.split('Output:').pop();
         }
         outEl.textContent = code.trim();
-      };
-    }
-    init();
   </script>
 </body>
 </html>

   <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>