Update app.py

app.py

@@ -91,26 +91,163 @@ def process_message(user_input, chat_history, token_history):
 def clear_history():
     return [], []
 
-with gr.Blocks() as demo:
-    gr.Markdown("# HROM-V1 Chatbot")
-    chatbot = gr.Chatbot(height=500)
-    msg = gr.Textbox(label="Your Message")
-    token_state = gr.State([])
-    
-    msg.submit(
-        process_message,
-        [msg, chatbot, token_state],
-        [chatbot, token_state],
-        queue=False
-    ).then(
-        lambda: "", None, msg
-    )
-    
-    clear_btn = gr.Button("Clear Chat History")
-    clear_btn.click(
-        clear_history,
-        outputs=[chatbot, token_state],
-        queue=False
-    )
-
-demo.launch()
+# Custom CSS for styling
+custom_css = """
+body {
+    background: linear-gradient(to bottom, #1a1a1a, #2a2a2a);
+    font-family: 'Roboto', sans-serif;
+    color: white;
+    margin: 0;
+    padding: 0;
+}
+
+.container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+.gr-chatbot {
+    font-size: 16px;
+    border: none;
+    background-color: #1e1e1e;
+    border-radius: 8px;
+    padding: 10px;
+}
+
+.gr-chatbot .bubble.user {
+    background-color: #2d2d2d !important;
+    border-radius: 8px;
+    padding: 12px;
+    margin: 8px 0;
+}
+
+.gr-chatbot .bubble.assistant {
+    background-color: #3d3d3d !important;
+    border-radius: 8px;
+    padding: 12px;
+    margin: 8px 0;
+}
+
+.gr-button {
+    background-color: #4CAF50;
+    color: white;
+    border: none;
+    padding: 12px 24px;
+    font-size: 16px;
+    border-radius: 4px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+.gr-button:hover {
+    background-color: #45a049;
+}
+
+.gr-text-input input {
+    background-color: #2d2d2d;
+    color: white;
+    border: 1px solid #4CAF50;
+    border-radius: 4px;
+    padding: 10px;
+    font-size: 16px;
+}
+
+.header {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 20px 0;
+    text-align: center;
+}
+
+.header img {
+    width: 60px;
+    height: 60px;
+    margin-right: 15px;
+}
+
+.footer {
+    text-align: center;
+    padding: 20px;
+    font-size: 14px;
+    color: #ccc;
+    margin-top: 30px;
+}
+
+.title {
+    font-size: 28px;
+    font-weight: bold;
+    color: #ffffff;
+    margin: 0;
+}
+
+.subtitle {
+    font-size: 16px;
+    color: #cccccc;
+    margin: 5px 0 0 0;
+}
+"""
+
+with gr.Blocks(
+    theme="dark",
+    css=custom_css
+) as demo:
+    with gr.Column(elem_classes=["container"]):
+        # Header
+        with gr.Row(elem_classes=["header"]):
+            gr.Image(
+                value="https://huggingface.co/TimurHromek/HROM-V1/resolve/main/hrom_icon.png",
+                interactive=False,
+                width=60,
+                height=60,
+                show_label=False
+            )
+            with gr.Column():
+                gr.Markdown("<div class='title'>HROM-V1 Chatbot</div>")
+                gr.Markdown("<div class='subtitle'>Powered by Gradio and Hugging Face</div>")
+        
+        # Chatbot
+        chatbot = gr.Chatbot(
+            height=500,
+            avatar_images=[
+                ("https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/test_image.png", "user"),
+                ("https://raw.githubusercontent.com/gradio-app/gradio/main/test/test_files/favicon.png", "assistant")
+            ],
+            bubble_full_width=False
+        )
+        
+        # Input
+        msg = gr.Textbox(
+            label="Your Message",
+            placeholder="Type your message here...",
+            lines=2
+        )
+        
+        # Buttons
+        clear_btn = gr.Button("Clear Chat History")
+        
+        # State
+        token_state = gr.State([])
+        
+        # Event handlers
+        msg.submit(
+            process_message,
+            [msg, chatbot, token_state],
+            [chatbot, token_state],
+            queue=False
+        ).then(
+            lambda: "", None, msg
+        )
+        
+        clear_btn.click(
+            clear_history,
+            outputs=[chatbot, token_state],
+            queue=False
+        )
+        
+        # Footer
+        gr.Markdown("<div class='footer'>© 2025 HROM-V1 | Model by Timur Hromek | Assisted by Elapt1c</div>")
+
+if __name__ == "__main__":
+    demo.launch()