update UI

app.py

@@ -74,38 +74,51 @@ def clean_tweet(tweet):
 
     return cleaned_tweet.strip()
 
-with gr.Blocks() as demo:
+custom_css = """
+#header {
+    text-align: center;
+    margin-top: 20px;
+}
+#input-box, #output-box {
+    margin: 0 auto;
+    width: 80%;
+}
+#generate-button {
+    margin: 10px auto;
+    display: block;
+}
+"""
+
+
+with gr.Blocks(css=custom_css) as demo:
     # Add a title with the X.com logo
-    with gr.Column(align="center"):
-        gr.Markdown(
-            """
-            <div style="text-align: center;">
-                <img src="https://upload.wikimedia.org/wikipedia/commons/b/b7/X_logo.jpg" 
-                     alt="X.com Logo" width="100">
-                <h1 style="font-size: 2.5em; margin: 0;">Tweet Generator</h1>
-                <p style="font-size: 1.2em; color: gray;">
-                    Powered by <b>AlanYky/phi-3.5_tweets_instruct</b>
-                </p>
-            </div>
-            """,
-            elem_id="header"
-        )
+    gr.Markdown(
+        """
+        <div id="header">
+            <img src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/X.com_logo.svg/1024px-X.com_logo.svg.png" 
+                 alt="X.com Logo" width="100">
+            <h1 style="font-size: 2.5em; margin: 0;">Tweet Generator</h1>
+            <p style="font-size: 1.2em; color: gray;">
+                Powered by <b>AlanYky/phi-3.5_tweets_instruct</b>
+            </p>
+        </div>
+        """
+    )
 
     # Center the input and output components
-    with gr.Column(align="center"):
-        instruction_input = gr.Textbox(
-            label="Tweet Idea",
-            placeholder="Enter your tweet idea (It can be a topic, hashtag, sentence, or any format)...",
-            lines=2,
-            elem_id="input-box"
-        )
-        generate_button = gr.Button("Generate", elem_id="generate-button")
-        output_box = gr.Textbox(
-            label="Generated Tweet",
-            placeholder="Your tweet will appear here.",
-            lines=3,
-            elem_id="output-box"
-        )
+    instruction_input = gr.Textbox(
+        label="Tweet Idea",
+        placeholder="Enter your tweet idea (It can be a topic, hashtag, sentence, or any format)...",
+        lines=2,
+        elem_id="input-box"
+    )
+    generate_button = gr.Button("Generate", elem_id="generate-button")
+    output_box = gr.Textbox(
+        label="Generated Tweet",
+        placeholder="Your tweet will appear here.",
+        lines=3,
+        elem_id="output-box"
+    )
 
     # Connect the button to the generate function
     generate_button.click(generate_tweet, inputs=instruction_input, outputs=output_box)