just / index.html
krishna195's picture
Update index.html
2b1755b verified
raw
history blame
2.19 kB
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Text Generation with DistilGPT-2</title>
</head>
<body>
<h2>Text Generation using DistilGPT-2</h2>
<p id="status">⏳ Loading model, please wait...</p>
<textarea id="inputText" rows="3" cols="50" placeholder="Enter your text..."></textarea>
<button id="generateBtn" disabled>Generate Text</button>
<p><strong>Generated Output:</strong></p>
<p id="output"></p>
<script type="module">
import { pipeline } from "@xenova/transformers";
let generator;
async function initializeModel() {
document.getElementById("status").innerText = "⏳ Loading model, please wait...";
try {
generator = await pipeline("text-generation", "Xenova/distilgpt2");
document.getElementById("status").innerText = "βœ… Model loaded! Ready to generate text.";
document.getElementById("generateBtn").disabled = false;
} catch (error) {
document.getElementById("status").innerText = "❌ Failed to load model.";
console.error("Model loading error:", error);
}
}
async function generateText() {
const inputText = document.getElementById("inputText").value;
if (!inputText.trim()) {
alert("Please enter some text!");
return;
}
document.getElementById("output").innerText = "⏳ Generating...";
try {
const output = await generator(inputText, { max_new_tokens: 64, do_sample: true });
document.getElementById("output").innerText = output[0].generated_text;
} catch (error) {
document.getElementById("output").innerText = "❌ Error in generation.";
console.error("Text generation error:", error);
}
}
document.getElementById("generateBtn").addEventListener("click", generateText);
// Initialize model on page load
initializeModel();
</script>
</body>
</html>