Update app.py

app.py

@@ -3,7 +3,6 @@ import torch
 import importlib.util
 from tokenizers import Tokenizer
 from huggingface_hub import hf_hub_download
-import os
 
 # Download and import model components from HF Hub
 model_repo = "TimurHromek/HROM-V1"
@@ -105,18 +104,102 @@ def process_message(user_input, chat_history, token_history, temperature, max_co
 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([])
+css = """
+:root {
+    --background: white;
+    --text: black;
+    --border: #e0e0e0;
+    --button-bg: #f0f0f0;
+    --button-hover: #e0e0e0;
+    --chatbot-bg: #f8f8f8;
+}
+
+.dark {
+    --background: #1a1a1a;
+    --text: white;
+    --border: #404040;
+    --button-bg: #404040;
+    --button-hover: #505050;
+    --chatbot-bg: #262626;
+}
+
+body {
+    background: var(--background) !important;
+    color: var(--text) !important;
+}
+
+.gr-box {
+    border-color: var(--border) !important;
+    background: var(--background) !important;
+}
+
+.gr-button {
+    background: var(--button-bg) !important;
+    color: var(--text) !important;
+    border-color: var(--border) !important;
+}
+
+.gr-button:hover {
+    background: var(--button-hover) !important;
+}
+
+#chatbot {
+    background: var(--chatbot-bg) !important;
+    border-color: var(--border) !important;
+}
+
+.gr-textbox input {
+    color: var(--text) !important;
+}
+
+.dark .gr-markdown {
+    color: var(--text) !important;
+}
+"""
+
+with gr.Blocks(css=css, title="HROM-V1.5 Chatbot") as demo:
+    current_theme = gr.Variable("light")
     
     with gr.Row():
-        temperature = gr.Slider(0.1, 2.0, value=1.0, step=0.1, 
-                              label="Temperature (higher = more random)")
-        max_context = gr.Slider(100, CONFIG["max_seq_len"] - max_response_length, 
-                              value=CONFIG["max_seq_len"] - max_response_length, step=1,
-                              label="Max Context Length")
+        with gr.Column(scale=3):
+            gr.Markdown("# HROM-V1.5 Chatbot")
+            chatbot = gr.Chatbot(height=500, elem_id="chatbot")
+            msg = gr.Textbox(label="Your Message", placeholder="Type your message...", show_label=False)
+            
+        with gr.Column(scale=1, min_width=300):
+            with gr.Accordion("⚙️ Settings", open=False):
+                with gr.Row():
+                    theme_btn = gr.Button("🌙 Dark Theme", variant="secondary")
+                with gr.Row():
+                    temperature = gr.Slider(0.1, 2.0, value=1.0, step=0.1,
+                                         label="Temperature (higher = more creative)")
+                with gr.Row():
+                    max_context = gr.Slider(100, CONFIG["max_seq_len"] - max_response_length,
+                                         value=CONFIG["max_seq_len"] - max_response_length, step=1,
+                                         label="Context Window Size")
+                with gr.Row():
+                    clear_btn = gr.Button("Clear Chat History", variant="secondary")
+
+    token_state = gr.State([])
+
+    def toggle_theme(theme):
+        new_theme = "dark" if theme == "light" else "light"
+        btn_text = "🌞 Light Theme" if new_theme == "light" else "🌙 Dark Theme"
+        return (
+            new_theme,
+            gr.Button.update(value=btn_text),
+            gr.HTML.update(value=f"<style>.dark {{display: {'block' if new_theme == 'dark' else 'none'}}}</style>")
+        )
+
+    theme_btn.click(
+        toggle_theme,
+        current_theme,
+        [current_theme, theme_btn],
+        _js="""(theme) => {
+            document.body.classList.toggle('dark');
+            return document.body.classList.contains('dark') ? 'dark' : 'light';
+        }"""
+    )
     
     msg.submit(
         process_message,
@@ -127,7 +210,6 @@ with gr.Blocks() as demo:
         lambda: "", None, msg
     )
     
-    clear_btn = gr.Button("Clear Chat History")
     clear_btn.click(
         clear_history,
         outputs=[chatbot, token_state],