Hugging Face's logo

Spaces:
P05
/
GPT2Demo
Running

App Files Community
P05 commited on
Commit
da0f624
·
verified ·
1 Parent(s): 8dc674a

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +36 -17
index.html CHANGED
@@ -2,37 +2,56 @@
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
- <title>GPT-2 Static Demo</title>
 
6
  <style>
7
- body { font-family: sans-serif; max-width: 600px; margin: 40px auto; padding: 0 20px; }
8
- textarea { width: 100%; height: 100px; margin-bottom: 10px; }
9
- button { padding: 10px 20px; cursor: pointer; }
10
- #output { margin-top: 20px; padding: 15px; background: #f4f4f4; border-radius: 5px; white-space: pre-wrap; }
 
11
  </style>
12
  </head>
13
  <body>
14
- <h2>GPT-2 Browser Demo (Static SDK)</h2>
15
- <textarea id="prompt" placeholder="Enter prompt...">Once upon a time,</textarea>
16
- <button id="generate-btn">Generate Text</button>
17
- <div id="output">Output will appear here...</div>
 
 
 
 
 
 
18
 
19
  <script type="module">
20
  import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
21
 
22
- const btn = document.getElementById('generate-btn');
23
  const output = document.getElementById('output');
24
  let generator = null;
25
 
26
  btn.addEventListener('click', async () => {
27
- const prompt = document.getElementById('prompt').value;
28
- output.innerText = 'Loading model and generating text...';
29
 
30
- if (!generator) {
31
- generator = await pipeline('text-generation', 'onnx-community/gpt2');
32
- }
33
 
34
- const result = await generator(prompt, { max_new_tokens: 30 });
35
- output.innerText = result[0].generated_text;
 
 
 
 
 
 
 
 
 
 
 
 
36
  });
37
  </script>
38
  </body>
 
2
  <html lang="en">
3
  <head>
4
  <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>GPT-2 Text Predictor</title>
7
  <style>
8
+ body { font-family: system-ui, sans-serif; max-width: 650px; margin: 40px auto; padding: 0 20px; }
9
+ textarea { width: 100%; height: 120px; font-size: 16px; padding: 10px; box-sizing: border-box; }
10
+ button { padding: 12px 24px; font-size: 16px; margin-top: 10px; cursor: pointer; }
11
+ #output { margin-top: 20px; padding: 15px; background: #f0f0f0; border-radius: 6px; white-space: pre-wrap; font-size: 16px; }
12
+ .status { color: #666; font-style: italic; }
13
  </style>
14
  </head>
15
  <body>
16
+ <h2>GPT-2 Text Prediction (Static SDK)</h2>
17
+ <p>Enter a prompt below to generate predictions client-side:</p>
18
+
19
+ <textarea id="prompt" placeholder="Type starting text here...">The future of artificial intelligence is</textarea>
20
+ <br>
21
+ <button id="predict-btn">Predict Next Words</button>
22
+
23
+ <div id="output">
24
+ <span class="status">Click "Predict Next Words" to run the model directly in your browser.</span>
25
+ </div>
26
 
27
  <script type="module">
28
  import { pipeline } from 'https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.0.0';
29
 
30
+ const btn = document.getElementById('predict-btn');
31
  const output = document.getElementById('output');
32
  let generator = null;
33
 
34
  btn.addEventListener('click', async () => {
35
+ const text = document.getElementById('prompt').value.trim();
36
+ if (!text) return;
37
 
38
+ btn.disabled = true;
39
+ output.innerHTML = '<span class="status">Loading ONNX model into browser memory... (takes a few seconds on first run)</span>';
 
40
 
41
+ try {
42
+ if (!generator) {
43
+ generator = await pipeline('text-generation', 'onnx-community/gpt2');
44
+ }
45
+
46
+ output.innerHTML = '<span class="status">Generating prediction...</span>';
47
+ const result = await generator(text, { max_new_tokens: 25, temperature: 0.7 });
48
+
49
+ output.innerText = result[0].generated_text;
50
+ } catch (err) {
51
+ output.innerText = 'Error: ' + err.message;
52
+ } finally {
53
+ btn.disabled = false;
54
+ }
55
  });
56
  </script>
57
  </body>