Update app.py

app.py

@@ -33,7 +33,6 @@ 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);
@@ -84,63 +83,39 @@ body {
 .llama-image:hover .llama-description {
     opacity: 1;
 }
-.artifact {
-    position: absolute;
-    background: rgba(74, 144, 226, 0.1);
-    border-radius: 50%;
-}
-.artifact.large {
-    width: 300px;
-    height: 300px;
-    top: -50px;
-    left: -150px;
-}
-.artifact.medium {
-    width: 200px;
-    height: 200px;
-    bottom: -50px;
-    right: -100px;
+.gradio-container {
+    max-width: 900px !important;
+    margin: auto;
+    padding-top: 1.5rem;
 }
-.artifact.small {
-    width: 100px;
-    height: 100px;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
+.container {
+    background-color: #ffffff;
+    border-radius: 10px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    padding: 20px;
+    margin-top: 20px;
 }
 """
 
-# Custom HTML
-custom_html = """
-<div id="custom-header">
-    <div class="artifact large"></div>
-    <div class="artifact medium"></div>
-    <div class="artifact small"></div>
+with gr.Blocks(css=css) as iface:
+    gr.HTML("""
+        <div id="custom-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>
+        </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>
+    with gr.Column(elem_classes="container"):
+        prompt = gr.Textbox(lines=5, label="Prompt")
+        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")
     
-    <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>
-</div>
-"""
-
-# 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.",
-    css=css,
-    article=custom_html
-)
+    submit_btn.click(generate_text, inputs=[prompt, max_length, temperature], outputs=output)
 
-# Launch the app
 iface.launch()