Update app.py

app.py

@@ -33,89 +33,90 @@ def generate_text(prompt, max_length, temperature):
     
     return tokenizer.decode(outputs[0][inputs['input_ids'].shape[1]:], skip_special_tokens=True)
 
+# Custom CSS
 css = """
 body {
-    background: linear-gradient(135deg, #f5f7fa, #c3cfe2);
-    font-family: Arial, sans-serif;
+    background-color: #1a1a2e;
+    color: #e0e0e0;
+    font-family: 'Arial', sans-serif;
 }
-#custom-header {
-    text-align: center;
-    background: rgba(255, 255, 255, 0.8);
+.container {
+    max-width: 900px;
+    margin: auto;
     padding: 20px;
-    border-radius: 10px;
+}
+.gradio-container {
+    background-color: #16213e;
+    border-radius: 15px;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    position: relative;
-    max-width: 800px;
-    margin: 20px auto;
 }
-#custom-header h1 {
-    color: #4A90E2;
-    font-size: 2em;
-    margin-bottom: 10px;
+.header {
+    background-color: #0f3460;
+    padding: 20px;
+    border-radius: 15px 15px 0 0;
+    text-align: center;
+    margin-bottom: 20px;
 }
-.llama-image {
-    position: relative;
-    transition: transform 0.3s;
-    display: inline-block;
-    margin-top: 20px;
+.header h1 {
+    color: #e94560;
+    font-size: 2.5em;
+    margin-bottom: 10px;
 }
-.llama-image:hover {
-    transform: scale(1.05);
+.header p {
+    color: #a0a0a0;
 }
-.llama-image img {
-    width: 200px;
+.header img {
+    max-width: 200px;
     border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-top: 15px;
 }
-.llama-description {
-    position: absolute;
-    bottom: -30px;
-    left: 50%;
-    transform: translateX(-50%);
-    background-color: #4A90E2;
-    color: white;
-    padding: 5px 10px;
-    border-radius: 5px;
-    opacity: 0;
-    transition: opacity 0.3s;
-    white-space: nowrap;
+.input-group, .output-group {
+    background-color: #1a1a2e;
+    padding: 20px;
+    border-radius: 10px;
+    margin-bottom: 20px;
 }
-.llama-image:hover .llama-description {
-    opacity: 1;
+.input-group label, .output-group label {
+    color: #e94560;
+    font-weight: bold;
 }
-.gradio-container {
-    max-width: 900px !important;
-    margin: auto;
-    padding-top: 1.5rem;
+.generate-btn {
+    background-color: #e94560 !important;
+    color: white !important;
+    border: none !important;
+    border-radius: 5px !important;
+    padding: 10px 20px !important;
+    font-size: 16px !important;
+    cursor: pointer !important;
+    transition: background-color 0.3s ease !important;
 }
-.container {
-    background-color: #ffffff;
-    border-radius: 10px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    padding: 20px;
-    margin-top: 20px;
+.generate-btn:hover {
+    background-color: #c81e45 !important;
 }
 """
 
+# Gradio interface
 with gr.Blocks(css=css) as iface:
-    gr.HTML("""
-        <div id="custom-header">
+    gr.HTML(
+        """
+        <div class="header">
             <h1>Llama-3.1-Storm-8B Text Generation</h1>
             <p>Generate text using the powerful Llama-3.1-Storm-8B model. Enter a prompt and let the AI create!</p>
-            <div class="llama-image">
-                <img src="https://cdn-uploads.huggingface.co/production/uploads/64c75c1237333ccfef30a602/tmOlbERGKP7JSODa6T06J.jpeg" alt="Llama">
-                <div class="llama-description">Llama-3.1-Storm-8B Model</div>
-            </div>
+            <img src="https://cdn-uploads.huggingface.co/production/uploads/64c75c1237333ccfef30a602/tmOlbERGKP7JSODa6T06J.jpeg" alt="Llama">
         </div>
-    """)
+        """
+    )
     
-    with gr.Column(elem_classes="container"):
-        prompt = gr.Textbox(lines=5, label="Prompt")
+    with gr.Group(elem_classes="input-group"):
+        prompt = gr.Textbox(label="Prompt", placeholder="Enter your prompt here...", lines=5)
         max_length = gr.Slider(minimum=1, maximum=500, value=128, step=1, label="Max Length")
         temperature = gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperature")
-        submit_btn = gr.Button("Generate", variant="primary")
-        output = gr.Textbox(lines=10, label="Generated Text")
-    
-    submit_btn.click(generate_text, inputs=[prompt, max_length, temperature], outputs=output)
+        generate_btn = gr.Button("Generate", elem_classes="generate-btn")
+
+    with gr.Group(elem_classes="output-group"):
+        output = gr.Textbox(label="Generated Text", lines=10)
+
+    generate_btn.click(generate_text, inputs=[prompt, max_length, temperature], outputs=output)
 
+# Launch the app
 iface.launch()