| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>GPT-2 Text Predictor</title> |
| <style> |
| body { font-family: system-ui, sans-serif; max-width: 650px; margin: 40px auto; padding: 0 20px; } |
| textarea { width: 100%; height: 120px; font-size: 16px; padding: 10px; box-sizing: border-box; } |
| button { padding: 12px 24px; font-size: 16px; margin-top: 10px; cursor: pointer; } |
| #output { margin-top: 20px; padding: 15px; background: #f0f0f0; border-radius: 6px; white-space: pre-wrap; font-size: 16px; } |
| .status { color: #666; font-style: italic; } |
| </style> |
| </head> |
| <body> |
| <h2>GPT-2 Text Prediction (Static SDK)</h2> |
| <p>Enter a prompt below to generate predictions client-side:</p> |
|
|
| <textarea id="prompt" placeholder="Type starting text here...">The future of artificial intelligence is</textarea> |
| <br> |
| <button id="predict-btn">Predict Next Words</button> |
|
|
| <div id="output"> |
| <span class="status">Click "Predict Next Words" to run the model directly in your browser.</span> |
| </div> |
|
|
| <script type="module"> |
| import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.17.2'; |
| |
| const btn = document.getElementById('predict-btn'); |
| const output = document.getElementById('output'); |
| let generator = null; |
| |
| btn.addEventListener('click', async () => { |
| const text = document.getElementById('prompt').value.trim(); |
| if (!text) return; |
| |
| btn.disabled = true; |
| output.innerHTML = '<span class="status">Loading ONNX model into browser...</span>'; |
| |
| try { |
| if (!generator) { |
| generator = await pipeline('text-generation', 'Xenova/gpt2'); |
| } |
| |
| output.innerHTML = '<span class="status">Generating prediction...</span>'; |
| const result = await generator(text, { max_new_tokens: 25, temperature: 0.7 }); |
| |
| output.innerText = result[0].generated_text; |
| } catch (err) { |
| output.innerText = 'Error: ' + err.message; |
| } finally { |
| btn.disabled = false; |
| } |
| }); |
| </script> |
| </body> |
| </html> |
