Update app.py

app.py

@@ -153,69 +153,48 @@ def generate_text(prompt, max_length=100, temperature=0.7, top_k=50):
 
 # Gradio interface
 def gradio_generate(prompt, max_length, temperature, top_k):
-    return generate_text(prompt, max_length, temperature, top_k)
+    output = ""
+    for token in generate_text(prompt, max_length, temperature, top_k):
+        output += token
+        time.sleep(0.05)  # Simulate typing effect
+        yield output
 
 # Custom CSS for the animation effect
-custom_css = """
+css = """
 <style>
-    .output-box {
-        border: 1px solid #e0e0e0;
-        border-radius: 8px;
-        padding: 20px;
-        font-family: Arial, sans-serif;
-        line-height: 1.6;
-        height: 300px;
-        overflow-y: auto;
-        background-color: #f9f9f9;
-    }
-    .blinking-cursor {
-        display: inline-block;
-        width: 10px;
-        height: 20px;
-        background-color: #333;
-        animation: blink 0.7s infinite;
-    }
-    @keyframes blink {
-        0% { opacity: 0; }
-        50% { opacity: 1; }
-        100% { opacity: 0; }
-    }
+    body { background-color: #1e1e1e; color: #ffffff; font-family: Arial, sans-serif; }
+    .container { max-width: 800px; margin: 0 auto; padding: 20px; }
+    .header { text-align: center; margin-bottom: 30px; }
+    .chat-box { background-color: #2a2a2a; border-radius: 10px; padding: 20px; margin-bottom: 20px; }
+    .user-input { background-color: #3a3a3a; border: none; color: #ffffff; padding: 10px; border-radius: 5px; width: 100%; }
+    .generate-btn { background-color: #5465ff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; }
+    .output-box { background-color: #2a2a2a; border-radius: 10px; padding: 20px; margin-top: 20px; min-height: 100px; }
 </style>
 """
 
-# JavaScript for the typing animation
-js_code = """
-function typeText(text, element) {
-    let index = 0;
-    element.innerHTML = '';
-    function type() {
-        if (index < text.length) {
-            element.innerHTML += text[index];
-            index++;
-            setTimeout(type, 50);  // Adjust typing speed here
-        } else {
-            element.innerHTML += '<span class="blinking-cursor"></span>';
-        }
-    }
-    type();
-}
-"""
-
-iface = gr.Interface(
-    fn=gradio_generate,
-    inputs=[
-        gr.Textbox(label="Prompt", placeholder="Enter your prompt here..."),
-        gr.Slider(minimum=20, maximum=500, value=100, step=1, label="Max Length"),
-        gr.Slider(minimum=0.1, maximum=1.0, value=0.7, step=0.1, label="Temperature"),
-        gr.Slider(minimum=1, maximum=100, value=50, step=1, label="Top-k")
-    ],
-    outputs=gr.HTML(label="Generated Text"),
-    title="Animated GPT Text Generator",
-    description="Enter a prompt and adjust parameters to generate text using a fine-tuned GPT model.",
-    css=custom_css,
-    js=js_code,
-    live=True
-)
-
-# Launch the app
-iface.launch()
+# 6. Gradio App Definition
+with gr.Blocks(css=css) as demo:
+    gr.HTML("<div class='header'><h1>🌟 GPT-2 Text Generator</h1></div>")
+    
+    with gr.Row():
+        with gr.Column(scale=3):
+            prompt = gr.Textbox(placeholder="Enter your prompt here...", label="Prompt", elem_classes="user-input")
+        with gr.Column(scale=1):
+            generate_btn = gr.Button("Generate", elem_classes="generate-btn")
+    
+    with gr.Row():
+        max_length = gr.Slider(minimum=20, maximum=500, value=100, step=1, label="Max Length")
+        temperature = gr.Slider(minimum=0.1, maximum=1.0, value=0.7, step=0.1, label="Temperature")
+        top_k = gr.Slider(minimum=1, maximum=100, value=50, step=1, label="Top-k")
+    
+    output = gr.Markdown(elem_classes="output-box")
+    
+    generate_btn.click(
+        gradio_generate,
+        inputs=[prompt, max_length, temperature, top_k],
+        outputs=output
+    )
+
+# 7. Launch the app
+if __name__ == "__main__":
+    demo.launch()