Update app.py

app.py

@@ -9,6 +9,8 @@ from torch.nn import functional as F
 import tiktoken
 import gradio as gr
 import asyncio 
+import gradio as gr
+import asyncio
 
 # Add the post-processing function here
 def post_process_text(text):
@@ -185,35 +187,110 @@ async def gradio_generate(prompt, max_length, temperature, top_k):
         yield output
 
 # Custom CSS for the animation effect
+import gradio as gr
+import asyncio
+
+# Your existing imports and model code here...
+
 css = """
 <style>
-    body { background-color: #1e1e1e; color: #ffffff; font-family: Arial, sans-serif; }
+    body {
+        background-color: #0f1624;
+        color: #e0e0e0;
+        font-family: 'Courier New', monospace;
+        background-image: 
+            radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
+            radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
+            radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
+            radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
+        background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
+        background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;
+        animation: backgroundScroll 60s linear infinite;
+    }
+    @keyframes backgroundScroll {
+        0% { background-position: 0 0, 40px 60px, 130px 270px, 70px 100px; }
+        100% { background-position: 550px 550px, 590px 610px, 680px 820px, 620px 650px; }
+    }
     .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; }
+    .header {
+        text-align: center;
+        margin-bottom: 30px;
+        font-family: 'Copperplate', fantasy;
+        color: #ffd700;
+        text-shadow: 0 0 10px #ffd700, 0 0 20px #ffd700, 0 0 30px #ffd700;
+    }
+    .chat-box {
+        background-color: rgba(42, 42, 42, 0.7);
+        border-radius: 15px;
+        padding: 20px;
+        margin-bottom: 20px;
+        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
+    }
+    .user-input {
+        background-color: rgba(58, 58, 58, 0.8);
+        border: 2px solid #ffd700;
+        color: #ffffff;
+        padding: 10px;
+        border-radius: 5px;
+        width: 100%;
+        transition: all 0.3s ease;
+    }
+    .user-input:focus {
+        box-shadow: 0 0 15px #ffd700;
+    }
+    .generate-btn {
+        background-color: #ffd700;
+        color: #0f1624;
+        border: none;
+        padding: 10px 20px;
+        border-radius: 5px;
+        cursor: pointer;
+        font-weight: bold;
+        transition: all 0.3s ease;
+    }
+    .generate-btn:hover {
+        background-color: #ffec8b;
+        transform: scale(1.05);
+    }
+    .output-box {
+        background-color: rgba(42, 42, 42, 0.7);
+        border-radius: 15px;
+        padding: 20px;
+        margin-top: 20px;
+        min-height: 100px;
+        border: 1px solid #ffd700;
+        white-space: pre-wrap;
+        font-family: 'Georgia', serif;
+        line-height: 1.6;
+        box-shadow: inset 0 0 10px rgba(255, 215, 0, 0.3);
+    }
+    .gr-slider {
+        --slider-color: #ffd700;
+    }
+    .gr-box {
+        border-color: #ffd700;
+        background-color: rgba(42, 42, 42, 0.7);
+    }
 </style>
 """
 
 with gr.Blocks(css=css) as demo:
-    gr.HTML("<div class='header'><h1>🌟 GPT-2 Storyteller</h1></div>")
+    gr.HTML("<div class='header'><h1>🌟 Enchanted Tales Generator 🌟</h1></div>")
     
     with gr.Row():
         with gr.Column(scale=3):
             prompt = gr.Textbox(
-                placeholder="Start your story here (e.g., 'Once upon a time in a magical forest...')",
-                label="Story Prompt",
+                placeholder="Begin your magical journey here (e.g., 'In a realm beyond the mists of time...')",
+                label="Story Incantation",
                 elem_classes="user-input"
             )
         with gr.Column(scale=1):
-            generate_btn = gr.Button("Generate Story", elem_classes="generate-btn")
+            generate_btn = gr.Button("Weave the Tale", elem_classes="generate-btn")
     
     with gr.Row():
-        max_length = gr.Slider(minimum=50, maximum=500, value=432, step=1, label="Max Length")
-        temperature = gr.Slider(minimum=0.1, maximum=1.0, value=0.8, step=0.1, label="Temperature")
-        top_k = gr.Slider(minimum=1, maximum=100, value=40, step=1, label="Top-k")
+        max_length = gr.Slider(minimum=50, maximum=500, value=432, step=1, label="Scroll Length")
+        temperature = gr.Slider(minimum=0.1, maximum=1.0, value=0.8, step=0.1, label="Magical Intensity")
+        top_k = gr.Slider(minimum=1, maximum=100, value=40, step=1, label="Arcane Diversity")
     
     output = gr.Markdown(elem_classes="output-box")
     
@@ -223,6 +300,11 @@ with gr.Blocks(css=css) as demo:
         outputs=output
     )
 
+    gr.HTML("""
+    <div style="text-align: center; margin-top: 20px; font-style: italic; color: #ffd700;">
+        "In the realm of imagination, every word is a spell, every sentence a charm."
+    </div>
+    """)
 
 if __name__ == "__main__":
     demo.launch()