|
import gradio as gr |
|
|
|
|
|
model = gr.Interface.load("models/roneneldan/TinyStories-Instruct-33M") |
|
|
|
|
|
html_code = """ |
|
<!DOCTYPE html> |
|
<html> |
|
<head> |
|
<title>Tiny Stories Generator</title> |
|
<script> |
|
function generateStory() { |
|
var inputText = document.getElementById("input-text").value; |
|
gr.Interface.static.predict(inputText).then(function(outputText) { |
|
document.getElementById("output-text").innerHTML = ""; |
|
typeText(inputText + " "); |
|
typeText(outputText); |
|
}); |
|
} |
|
|
|
function typeText(text) { |
|
var index = 0; |
|
var typingSpeed = 50; // Adjust the speed of typing |
|
var timer = setInterval(function() { |
|
if (index < text.length) { |
|
document.getElementById("output-text").innerHTML += text.charAt(index); |
|
index++; |
|
} else { |
|
clearInterval(timer); |
|
} |
|
}, typingSpeed); |
|
} |
|
</script> |
|
</head> |
|
<body> |
|
<div style="padding: 20px;"> |
|
<textarea id="input-text" placeholder="Enter your story here..." style="width: 100%; height: 200px;"></textarea> |
|
<button onclick="generateStory()">Generate Story</button> |
|
<div id="output-text" style="margin-top: 20px;"></div> |
|
</div> |
|
</body> |
|
</html> |
|
""" |
|
|
|
|
|
gr.Interface(fn=lambda inputs: inputs, inputs=gr.inputs.Textbox(), outputs=gr.outputs.HTML(html_code)).launch() |
|
|
