Update nikapp.py

nikapp.py

@@ -57,7 +57,7 @@ def chat_fn(message, history, max_new_tokens):
     prompt = build_prompt(message, history)
     inputs = tokenizer(prompt, return_tensors="pt").to(model.device)
     
-    # Default values for removed sliders
+    # Default values 
     temperature = 0.7 
     top_p = 0.9
     repetition_penalty = 1.1 
@@ -81,23 +81,67 @@ def chat_fn(message, history, max_new_tokens):
 
     return generated
 
-# --- Nature Theme Configuration ---
+# --- Visual Customization ---
+
+# 1. THEME: Set the base colors to forest greens
 nature_theme = gr.themes.Soft(
     primary_hue="green",
     secondary_hue="emerald",
     neutral_hue="stone",
 ).set(
-    body_background_fill="#f5f7f5",
-    block_background_fill="rgba(255, 255, 255, 0.9)",
+    # Make the default backgrounds transparent or dark to blend with image
+    body_background_fill="transparent",
+    block_background_fill="rgba(20, 30, 20, 0.8)", # Dark semi-transparent green
+    border_color_primary="#4CAF50", # Bright Green border
+    input_background_fill="rgba(0, 0, 0, 0.5)",
     button_primary_background_fill="#2E7D32", 
-    border_color_primary="#4CAF50",
+    text_color_subdued="#A5D6A7", # Light green text for labels
 )
 
+# 2. CSS: Force the background image and specific "Green Border" look
 custom_css = """
+/* The Main Forest Background */
 .gradio-container {
     background: url('https://images.unsplash.com/photo-1441974231531-c6227db76b6e?q=80&w=2560&auto=format&fit=crop') no-repeat center center fixed; 
     background-size: cover;
 }
+
+/* Make the main App container transparent so background shows */
+.gradio-container > .main {
+    background: transparent !important;
+}
+
+/* Chatbot Window Styling - The "Glassy" Look */
+.bubble-wrap {
+    background: rgba(0, 0, 0, 0.6) !important;
+    border: 1px solid #4CAF50 !important;
+    border-radius: 10px !important;
+}
+
+/* User and Bot message bubbles */
+.user-message {
+    background-color: #2E7D32 !important; /* Forest Green for user */
+    border: 1px solid #66BB6A !important;
+}
+.bot-message {
+    background-color: rgba(40, 40, 40, 0.9) !important; /* Dark Grey for bot */
+    border: 1px solid #4CAF50 !important;
+}
+
+/* Input Area and Settings - Green Borders */
+.group, .form {
+    background: rgba(10, 20, 10, 0.85) !important; /* Dark semi-transparent */
+    border: 2px solid #4CAF50 !important; /* The prominent green border */
+    border-radius: 8px;
+    padding: 10px;
+}
+
+/* Text colors */
+label, span, p {
+    color: #E8F5E9 !important; /* Very light green/white text */
+}
+
+/* Hide Footer */
 footer {visibility: hidden}
 """
 
@@ -105,7 +149,7 @@ max_new_tokens_slider = gr.Slider(
     minimum=16, maximum=512, value=128, step=8, label="Response Length (Tokens)",
 )
 
-# Instantiate ChatInterface WITHOUT theme/css arguments initially to avoid TypeError
+# Instantiate ChatInterface
 demo = gr.ChatInterface(
     fn=chat_fn,
     title="🌿 NatureChat Lab 2",
@@ -114,7 +158,7 @@ demo = gr.ChatInterface(
     additional_inputs_accordion="Settings"
 )
 
-# Apply theme and CSS manually after instantiation
+# Apply the Theme and CSS manually (Compatible with older Gradio versions)
 demo.theme = nature_theme
 demo.css = custom_css