Update app.py

app.py

@@ -3,33 +3,6 @@ import spaces
 import torch
 from transformers import AutoTokenizer, AutoModelForCausalLM
 
-# HTML template for custom UI
-HTML_TEMPLATE = """
-<style>
-    .llama-image {
-        display: flex;
-        justify-content: center;
-        margin-bottom: 20px;
-    }
-    .llama-image img {
-        max-width: 300px;
-        border-radius: 10px;
-        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    }
-    .llama-description {
-        text-align: center;
-        font-weight: bold;
-        margin-top: 10px;
-    }
-</style>
-<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>
-<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>
-"""
-
 # Load the model and tokenizer
 model_name = "akjindal53244/Llama-3.1-Storm-8B"
 tokenizer = AutoTokenizer.from_pretrained(model_name)
@@ -60,23 +33,149 @@ def generate_text(prompt, max_length, temperature):
     
     return tokenizer.decode(outputs[0][inputs['input_ids'].shape[1]:], skip_special_tokens=True)
 
-# Create Gradio interface
-iface = gr.Interface(
-    fn=generate_text,
-    inputs=[
-        gr.Textbox(lines=5, label="Prompt"),
-        gr.Slider(minimum=1, maximum=500, value=128, step=1, label="Max Length"),
-        gr.Slider(minimum=0.1, maximum=2.0, value=0.7, step=0.1, label="Temperature"),
-    ],
-    outputs=gr.Textbox(lines=10, label="Generated Text"),
-    title="Llama-3.1-Storm-8B Text Generation",
-    description="Enter a prompt to generate text using the Llama-3.1-Storm-8B model.",
-    article=None,
-    css=".gradio-container {max-width: 800px; margin: auto;}",
-)
+# Custom CSS
+css = """
+body {
+    background-color: #1a1a2e;
+    color: #e0e0e0;
+    font-family: 'Arial', sans-serif;
+}
+.container {
+    max-width: 900px;
+    margin: auto;
+    padding: 20px;
+}
+.gradio-container {
+    background-color: #16213e;
+    border-radius: 15px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+.header {
+    background-color: #0f3460;
+    padding: 20px;
+    border-radius: 15px 15px 0 0;
+    text-align: center;
+    margin-bottom: 20px;
+}
+.header h1 {
+    color: #e94560;
+    font-size: 2.5em;
+    margin-bottom: 10px;
+}
+.header p {
+    color: #a0a0a0;
+}
+.header img {
+    max-width: 300px;
+    border-radius: 10px;
+    margin: 15px auto;
+    display: block;
+}
+.input-group, .output-group {
+    background-color: #1a1a2e;
+    padding: 20px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+.input-group label, .output-group label {
+    color: #e94560;
+    font-weight: bold;
+}
+.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;
+}
+.generate-btn:hover {
+    background-color: #c81e45 !important;
+}
+.example-prompts {
+    background-color: #1f2b47;
+    padding: 15px;
+    border-radius: 10px;
+    margin-bottom: 20px;
+}
+.example-prompts h3 {
+    color: #e94560;
+    margin-bottom: 10px;
+}
+.example-prompts ul {
+    list-style-type: none;
+    padding-left: 0;
+}
+.example-prompts li {
+    margin-bottom: 5px;
+    cursor: pointer;
+    transition: color 0.3s ease;
+}
+.example-prompts li:hover {
+    color: #e94560;
+}
+"""
 
-iface.launch(
-    additional_inputs=[
-        gr.HTML(HTML_TEMPLATE)
-    ]
-)
+# Example prompts
+example_prompts = [
+    "Write a Python function to find the n-th Fibonacci number.",
+    "Explain the concept of recursion in programming.",
+    "What are the key differences between Python and JavaScript?",
+    "Tell me a short story about a time-traveling robot.",
+    "Describe the process of photosynthesis in simple terms."
+]
+
+# Gradio interface
+with gr.Blocks(css=css) as iface:
+    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>
+            <img src="https://cdn-uploads.huggingface.co/production/uploads/64c75c1237333ccfef30a602/tmOlbERGKP7JSODa6T06J.jpeg" alt="Llama">
+        </div>
+        """
+    )
+    
+    with gr.Group():
+        gr.HTML(
+            """
+            <div class="example-prompts">
+                <h3>Example Prompts:</h3>
+                <ul>
+                    """ + "".join([f"<li>{prompt}</li>" for prompt in example_prompts]) + """
+                </ul>
+            </div>
+            """
+        )
+        
+        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")
+            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)
+
+    # JavaScript to make example prompts clickable
+    gr.HTML(
+        """
+        <script>
+        document.addEventListener('DOMContentLoaded', (event) => {
+            document.querySelectorAll('.example-prompts li').forEach(item => {
+                item.addEventListener('click', event => {
+                    document.querySelector('textarea[data-testid="textbox"]').value = event.target.textContent;
+                });
+            });
+        });
+        </script>
+        """
+    )
+
+# Launch the app
+iface.launch()