krishna195 commited on
Commit
b732fba
Β·
verified Β·
1 Parent(s): 2b1755b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +25 -25
index.html CHANGED
@@ -3,52 +3,52 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Text Generation with DistilGPT-2</title>
7
- </head>
8
- <body>
9
- <h2>Text Generation using DistilGPT-2</h2>
10
- <p id="status">⏳ Loading model, please wait...</p>
11
- <textarea id="inputText" rows="3" cols="50" placeholder="Enter your text..."></textarea>
12
- <button id="generateBtn" disabled>Generate Text</button>
13
- <p><strong>Generated Output:</strong></p>
14
- <p id="output"></p>
15
-
16
  <script type="module">
17
- import { pipeline } from "@xenova/transformers";
18
 
19
  let generator;
20
- async function initializeModel() {
21
- document.getElementById("status").innerText = "⏳ Loading model, please wait...";
 
 
22
  try {
23
  generator = await pipeline("text-generation", "Xenova/distilgpt2");
24
- document.getElementById("status").innerText = "βœ… Model loaded! Ready to generate text.";
25
  document.getElementById("generateBtn").disabled = false;
26
  } catch (error) {
27
- document.getElementById("status").innerText = "❌ Failed to load model.";
28
- console.error("Model loading error:", error);
29
  }
30
  }
31
 
32
  async function generateText() {
33
- const inputText = document.getElementById("inputText").value;
34
- if (!inputText.trim()) {
35
  alert("Please enter some text!");
36
  return;
37
  }
38
  document.getElementById("output").innerText = "⏳ Generating...";
39
  try {
40
- const output = await generator(inputText, { max_new_tokens: 64, do_sample: true });
41
  document.getElementById("output").innerText = output[0].generated_text;
42
  } catch (error) {
43
- document.getElementById("output").innerText = "❌ Error in generation.";
44
- console.error("Text generation error:", error);
45
  }
46
  }
47
 
48
- document.getElementById("generateBtn").addEventListener("click", generateText);
49
-
50
- // Initialize model on page load
51
- initializeModel();
52
  </script>
 
 
 
 
 
 
 
 
 
53
  </body>
54
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Simple Text Generation</title>
 
 
 
 
 
 
 
 
 
7
  <script type="module">
8
+ import { pipeline } from 'https://cdn.jsdelivr.net/npm/@xenova/transformers@2.5.4';
9
 
10
  let generator;
11
+
12
+ // Load the model once
13
+ async function loadModel() {
14
+ document.getElementById("status").innerText = "⏳ Loading model...";
15
  try {
16
  generator = await pipeline("text-generation", "Xenova/distilgpt2");
17
+ document.getElementById("status").innerText = "βœ… Model loaded!";
18
  document.getElementById("generateBtn").disabled = false;
19
  } catch (error) {
20
+ document.getElementById("status").innerText = "❌ Error loading model.";
21
+ console.error("Model load error:", error);
22
  }
23
  }
24
 
25
  async function generateText() {
26
+ const inputText = document.getElementById("inputText").value.trim();
27
+ if (!inputText) {
28
  alert("Please enter some text!");
29
  return;
30
  }
31
  document.getElementById("output").innerText = "⏳ Generating...";
32
  try {
33
+ const output = await generator(inputText, { max_new_tokens: 50, do_sample: true });
34
  document.getElementById("output").innerText = output[0].generated_text;
35
  } catch (error) {
36
+ document.getElementById("output").innerText = "❌ Error generating text.";
37
+ console.error("Generation error:", error);
38
  }
39
  }
40
 
41
+ window.addEventListener("DOMContentLoaded", loadModel);
42
+ window.generateText = generateText;
 
 
43
  </script>
44
+ </head>
45
+ <body>
46
+ <h2>Simple Text Generation</h2>
47
+ <p id="status">⏳ Loading model...</p>
48
+ <textarea id="inputText" rows="3" cols="50" placeholder="Enter text..."></textarea>
49
+ <br><br>
50
+ <button id="generateBtn" onclick="generateText()" disabled>Generate</button>
51
+ <h3>Output:</h3>
52
+ <p id="output"></p>
53
  </body>
54
  </html>