Spaces:
Running
Running
Create index.html
Browse files- index.html +73 -0
index.html
ADDED
|
@@ -0,0 +1,73 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="utf-8" />
|
| 5 |
+
<title>🎵 Strudel.cc Code Generator</title>
|
| 6 |
+
<style>
|
| 7 |
+
body { font-family: sans-serif; max-width: 800px; margin: 2em auto; padding: 0 1em; }
|
| 8 |
+
h1 { text-align: center; }
|
| 9 |
+
textarea { width: 100%; box-sizing: border-box; padding: 0.5em; margin-bottom: 1em; font-family: monospace; }
|
| 10 |
+
button { display: block; margin: 0 auto 1em; padding: 0.75em 1.5em; font-size: 1em; }
|
| 11 |
+
pre { background: #f7f7f7; padding: 1em; overflow-x: auto; white-space: pre-wrap; word-break: break-word; }
|
| 12 |
+
</style>
|
| 13 |
+
</head>
|
| 14 |
+
<body>
|
| 15 |
+
<h1>🎵 Strudel.cc Code Generator</h1>
|
| 16 |
+
|
| 17 |
+
<label for="styleInput">Style/Prompt:</label>
|
| 18 |
+
<textarea id="styleInput" rows="3" placeholder="e.g. electronic, ambient, techno…">electronic</textarea>
|
| 19 |
+
|
| 20 |
+
<button id="generateBtn">🎵 Generate Code</button>
|
| 21 |
+
|
| 22 |
+
<h2>Generated Strudel.cc Code</h2>
|
| 23 |
+
<pre id="output">Waiting for input…</pre>
|
| 24 |
+
|
| 25 |
+
<script type="module">
|
| 26 |
+
// Load Transformers.js from CDN
|
| 27 |
+
import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@3.7.0/dist/transformers.esm.js';
|
| 28 |
+
|
| 29 |
+
// Allow remote models from the Hub (default)
|
| 30 |
+
env.allowRemoteModels = true;
|
| 31 |
+
// Point to the ONNX/WebAssembly backend files
|
| 32 |
+
env.backends.onnx.wasm.wasmPaths = 'https://cdn.jsdelivr.net/npm/@xenova/transformers@3.7.0/dist/onnx/';
|
| 33 |
+
|
| 34 |
+
async function init() {
|
| 35 |
+
// Create a text-generation pipeline on WebGPU
|
| 36 |
+
const gen = await pipeline(
|
| 37 |
+
'text-generation',
|
| 38 |
+
'robertnetwork/strudel-small-onnx',
|
| 39 |
+
{
|
| 40 |
+
device: 'webgpu',
|
| 41 |
+
dtype: 'fp32', // fp32 for WebGPU
|
| 42 |
+
}
|
| 43 |
+
);
|
| 44 |
+
|
| 45 |
+
document.getElementById('generateBtn').onclick = async () => {
|
| 46 |
+
const style = document.getElementById('styleInput').value.trim();
|
| 47 |
+
const instruction = "Generate Strudel.cc JavaScript code given style tags and a prompt, without commentary or markdown.";
|
| 48 |
+
const prompt = `Instruction: ${instruction}\nInput: ${style}\nOutput:`;
|
| 49 |
+
|
| 50 |
+
const outEl = document.getElementById('output');
|
| 51 |
+
outEl.textContent = 'Generating…';
|
| 52 |
+
|
| 53 |
+
// Run the model
|
| 54 |
+
const result = await gen(prompt, {
|
| 55 |
+
max_length: 256,
|
| 56 |
+
temperature: 0.7,
|
| 57 |
+
top_p: 0.9,
|
| 58 |
+
do_sample: true
|
| 59 |
+
});
|
| 60 |
+
|
| 61 |
+
// Extract the generated text
|
| 62 |
+
let code = result[0].generated_text || result[0].text || '';
|
| 63 |
+
if (code.includes('Output:')) {
|
| 64 |
+
code = code.split('Output:').pop();
|
| 65 |
+
}
|
| 66 |
+
outEl.textContent = code.trim();
|
| 67 |
+
};
|
| 68 |
+
}
|
| 69 |
+
|
| 70 |
+
init();
|
| 71 |
+
</script>
|
| 72 |
+
</body>
|
| 73 |
+
</html>
|