Update app.py

app.py

@@ -7,7 +7,7 @@ from transformers import AutoModelForCausalLM, AutoTokenizer
 # ==========================================
 
 MODEL_ID = "DavidBazaldua/llama3_finetuned_transformes"
-DEVICE = "cpu"  # Change to "cuda" if using GPU
+DEVICE = "cpu"
 DTYPE = torch.float32
 
 print(f"Loading model: {MODEL_ID}...")
@@ -19,7 +19,7 @@ model = AutoModelForCausalLM.from_pretrained(
 )
 model.to(DEVICE)
 model.eval()
-print("Model loaded successfully.")
+print("Model loaded.")
 
 DEFAULT_SYSTEM_PROMPT = (
     "You are a helpful, precise AI assistant. "
@@ -33,46 +33,30 @@ DEFAULT_SYSTEM_PROMPT = (
 
 def build_prompt(system_prompt, context, history, user_message):
     messages = []
-    # 1. System Prompt
     if system_prompt and system_prompt.strip():
         messages.append({"role": "system", "content": system_prompt})
-
-    # 2. Extra Context
     if context and context.strip():
         messages.append({
             "role": "system",
             "content": f"Use the following context if relevant:\n{context}"
         })
-
-    # 3. History
     for user, assistant in history:
         messages.append({"role": "user", "content": user})
         messages.append({"role": "assistant", "content": assistant})
-
-    # 4. Current Message
     messages.append({"role": "user", "content": user_message})
 
     prompt = tokenizer.apply_chat_template(
-        messages,
-        tokenize=False,
-        add_generation_prompt=True,
+        messages, tokenize=False, add_generation_prompt=True,
     )
     return prompt
 
 def chat_logic(message, history, system_prompt, context, max_tokens, temperature, top_p):
-    if not message:
-        return "", history
-
-    if history is None:
-        history = []
-
-    if not system_prompt:
-        system_prompt = DEFAULT_SYSTEM_PROMPT
+    if not message: return "", history
+    if history is None: history = []
+    if not system_prompt: system_prompt = DEFAULT_SYSTEM_PROMPT
 
     max_tokens = int(min(max_tokens, 1024))
-    
     prompt = build_prompt(system_prompt, context, history, message)
-    
     inputs = tokenizer(prompt, return_tensors="pt", add_special_tokens=False).to(DEVICE)
 
     with torch.no_grad():
@@ -86,7 +70,6 @@ def chat_logic(message, history, system_prompt, context, max_tokens, temperature
         )
 
     decoded = tokenizer.decode(outputs[0], skip_special_tokens=True)
-    
     if decoded.startswith(prompt):
         answer = decoded[len(prompt):].strip()
     else:
@@ -96,81 +79,98 @@ def chat_logic(message, history, system_prompt, context, max_tokens, temperature
     return "", history
 
 # ==========================================
-# 3. UI DESIGN (CSS + LAYOUT)
+# 3. UI DESIGN (NUCLEAR FIX FOR COLORS)
 # ==========================================
 
 CSS = """
 @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&display=swap');
 
-/* --- GLOBAL RESET & LIGHT THEME ENFORCEMENT --- */
+/* --- 1. OVERRIDE GRADIO VARIABLES (KILL THE BLUE) --- */
 :root, .dark, body, .gradio-container {
-    --body-text-color: #1f2937 !important;
+    /* Main Background */
+    --body-background-fill: transparent !important;
+    
+    /* Force Text Color */
+    --body-text-color: #000000 !important;
+    
+    /* Turn Accent Colors (Sliders, Focus) to BLACK */
+    --primary-500: #000000 !important; /* Slider handle */
+    --primary-600: #000000 !important; /* Slider active track */
+    --secondary-500: #000000 !important;
+    
+    /* Remove default dark backgrounds */
     --background-fill-primary: transparent !important;
     --background-fill-secondary: transparent !important;
     --block-background-fill: transparent !important;
     --block-border-color: transparent !important;
-    --input-background-fill: rgba(255, 255, 255, 0.9) !important;
-    --input-border-color: #e5e7eb !important;
-    --color-accent-soft: transparent !important;
+    --input-background-fill: #ffffff !important;
 }
 
 body {
     font-family: 'Inter', sans-serif !important;
+    /* Clean Gradient */
     background: radial-gradient(circle at 10% 10%, #ffeef8 0%, #edf6ff 50%, #f7f0ff 90%) !important;
-    color: #1f2937 !important;
+    color: #000000 !important;
     margin: 0; padding: 0;
     min-height: 100vh;
 }
 
-/* Typography */
-h1 { font-weight: 700 !important; color: #111827 !important; letter-spacing: -0.02em; }
-p, span, label { color: #4b5563 !important; }
+/* Titles */
+h1 { font-weight: 700 !important; color: #000000 !important; letter-spacing: -0.02em; }
+p, span, label { color: #374151 !important; }
 
-/* --- LEFT PANEL: CONFIG CARD --- */
+/* --- 2. LEFT PANEL: FORCE WHITE & BLACK --- */
 .config-card {
-    background: rgba(255, 255, 255, 0.5) !important;
-    border: 1px solid rgba(255, 255, 255, 0.6) !important;
+    background: rgba(255, 255, 255, 0.6) !important; /* Semi-transparent White */
+    border: 1px solid rgba(255, 255, 255, 0.8) !important;
     backdrop-filter: blur(12px);
     border-radius: 24px;
     padding: 24px !important;
-    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.01);
 }
 
-/* CRITICAL FIX: Make inner blocks transparent inside the config card */
+/* Force all inner containers to be transparent so they don't show grey blocks */
 .config-card .gr-form, 
 .config-card .gr-box, 
 .config-card .gr-block,
-.config-card .gr-compact {
+.config-card .gr-compact,
+.config-card .gr-group {
+    background-color: transparent !important;
     background: transparent !important;
     border: none !important;
     box-shadow: none !important;
 }
 
-/* Style the Labels (Context, System Prompt, etc.) */
-.config-card label span {
-    color: #111827 !important;
-    font-weight: 600 !important;
-    font-size: 0.85rem !important;
-    margin-bottom: 6px !important;
-}
-
-/* Style the Inputs (White boxes) */
+/* INPUTS: Force White Background + Black Text + Black Border on Focus */
 .config-card textarea, 
 .config-card input[type="text"], 
 .config-card input[type="number"] {
-    background-color: rgba(255, 255, 255, 0.95) !important;
-    color: #111827 !important;
-    border: 1px solid #e5e7eb !important;
+    background-color: #ffffff !important;
+    color: #000000 !important;
+    border: 1px solid #d1d5db !important;
     border-radius: 12px !important;
-    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
+}
+.config-card textarea:focus, .config-card input:focus {
+    border-color: #000000 !important; /* Black border when typing */
+    box-shadow: none !important;
 }
 
-/* Sliders Style */
-input[type=range] { accent-color: #111827; }
+/* LABELS: Force Black */
+.config-card label span {
+    color: #000000 !important;
+    font-weight: 700 !important;
+    font-size: 0.85rem !important;
+    background: transparent !important;
+}
 
-/* --- RIGHT PANEL: CHAT WINDOW --- */
+/* SLIDERS: Double Force Black */
+input[type=range] {
+    filter: grayscale(100%) contrast(120%) !important; /* Turns any remaining blue to black/grey */
+    accent-color: #000000 !important;
+}
+
+/* --- 3. RIGHT PANEL: CHAT WINDOW --- */
 .chat-window {
-    background: rgba(255, 255, 255, 0.8) !important;
+    background: rgba(255, 255, 255, 0.85) !important;
     border: 1px solid rgba(255, 255, 255, 0.9);
     backdrop-filter: blur(20px);
     border-radius: 24px;
@@ -179,11 +179,10 @@ input[type=range] { accent-color: #111827; }
     padding: 0 !important;
 }
 
-/* Mac-style Header */
+/* Mac Header */
 .window-header {
     display: flex; gap: 8px; align-items: center;
     padding: 18px 24px 10px 24px;
-    background: transparent;
 }
 .dot { width: 12px; height: 12px; border-radius: 50%; }
 .red { background-color: #ff5f56; }
@@ -197,15 +196,15 @@ input[type=range] { accent-color: #111827; }
     height: 550px !important;
 }
 
-/* Chat Bubbles */
+/* Bubbles */
 .message.user {
-    background-color: #111827 !important;
+    background-color: #000000 !important; /* Pure Black */
     color: white !important;
     border-radius: 18px 18px 4px 18px !important;
 }
 .message.bot {
     background-color: #ffffff !important;
-    color: #111827 !important;
+    color: #000000 !important;
     border: 1px solid #e5e7eb !important;
     border-radius: 18px 18px 18px 4px !important;
     box-shadow: 0 2px 5px rgba(0,0,0,0.02);
@@ -221,10 +220,10 @@ input[type=range] { accent-color: #111827; }
     background: #ffffff !important;
     padding: 12px 20px !important;
     border: 1px solid #e5e7eb !important;
-    color: #111827 !important;
+    color: #000000 !important;
 }
 #send-btn {
-    background: #111827 !important;
+    background: #000000 !important; /* Black Button */
     color: white !important;
     border-radius: 50% !important;
     width: 46px; height: 46px;
@@ -234,13 +233,12 @@ input[type=range] { accent-color: #111827; }
 
 /* Logos */
 .trusted-logos {
-    opacity: 0.5; filter: grayscale(100%);
+    opacity: 0.6; filter: grayscale(100%);
     margin-top: 30px; display: flex; gap: 20px;
-    font-weight: 600; font-size: 1.1rem; color: #9ca3af;
+    font-weight: 600; font-size: 1.1rem; color: #4b5563;
 }
 """
 
-# HTML Helpers
 WINDOW_HEADER = """
 <div class="window-header">
     <div class="dot red"></div>
@@ -262,7 +260,7 @@ TRUSTED_SECTION = """
 </div>
 """
 
-# IMPORTANT: Keep theme=gr.themes.Soft() to provide a light base
+# Theme Soft + Custom CSS overrides
 with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
     
     with gr.Row(elem_id="main-container"):
@@ -283,7 +281,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
                 
                 context_input = gr.Textbox(
                     label="Context (Data)",
-                    placeholder="Paste documents, notes, or data here to provide temporary knowledge...",
+                    placeholder="Paste documents, notes, or data here...",
                     lines=5
                 )
                 
@@ -293,6 +291,7 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
                     lines=2
                 )
                 
+                # Using gr.Row for sliders side-by-side
                 with gr.Row():
                     temp_slider = gr.Slider(0.1, 1.5, value=0.7, step=0.1, label="Temperature")
                     tokens_slider = gr.Slider(64, 1024, value=256, step=64, label="Max Tokens")
@@ -303,7 +302,6 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
 
         # --- RIGHT COLUMN: Chatbot ---
         with gr.Column(scale=6):
-            # Window Container
             with gr.Column(elem_classes="chat-window"):
                 gr.HTML(WINDOW_HEADER)
                 
@@ -326,9 +324,8 @@ with gr.Blocks(theme=gr.themes.Soft(), css=CSS, title="Custom AI") as demo:
                     )
                     send_btn = gr.Button("➝", scale=1, elem_id="send-btn")
 
-    # --- EVENTS ---
+    # Events
     inputs_list = [msg, chatbot, system_prompt_input, context_input, tokens_slider, temp_slider, top_p_slider]
-    
     msg.submit(chat_logic, inputs_list, [msg, chatbot])
     send_btn.click(chat_logic, inputs_list, [msg, chatbot])