Update app.py

app.py

@@ -1,7 +1,5 @@
 import gradio as gr
 import subprocess
-import base64
-import os
 from huggingface_hub import hf_hub_download
 
 # --- 1. Setup & Install ---
@@ -18,11 +16,10 @@ try:
         repo_id=MODEL_REPO,
         filename=GGUF_FILENAME,
     )
-except Exception as e:
-    print(f"Error downloading model: {e}")
-    # Fallback for debugging if download fails
-    model_path = "" 
+except Exception:
+    model_path = "" # Handle offline/error gracefully
 
+llm = None
 if model_path:
     print("Initializing llama.cpp LLM ...")
     llm = Llama(
@@ -33,169 +30,189 @@ if model_path:
         use_mmap=True,
         use_mlock=False,
     )
-else:
-    print("WARNING: Model path invalid. App will start but chat will fail.")
-
-# --- 3. Image Handling (The Fix) ---
-def get_background_image_css():
-    """
-    Tries to load local image. If missing, uses a URL fallback.
-    Returns the CSS string for the background.
-    """
-    local_img = "Cute-Christmas-Background-edit-online-1.jpg"
-    
-    # 1. Try Local Base64
-    if os.path.exists(local_img):
-        print(f"Found local image: {local_img}. Encoding...")
-        with open(local_img, "rb") as f:
-            encoded = base64.b64encode(f.read()).decode('utf-8')
-        img_url = f"data:image/jpeg;base64,{encoded}"
-    # 2. Fallback to URL if local fails
-    else:
-        print(f"⚠️ Could not find {local_img}. Using fallback URL.")
-        img_url = "https://images.unsplash.com/photo-1544976735-a10c71a39644?q=80&w=2560&auto=format&fit=crop"
-
-    return f"""
-    body, .gradio-container, .gradio-app {{
-        background-image: url('{img_url}') !important;
-        background-size: cover !important;
-        background-position: center center !important;
-        background-attachment: fixed !important;
-        background-repeat: no-repeat !important;
-        background-color: #0b121e !important; /* Fallback color */
-    }}
-    """
-
-bg_css_rule = get_background_image_css()
-
-# --- 4. Prompts & Logic ---
+
+# --- 3. Chat Logic ---
 STYLE_SYSTEM_PROMPTS = {
     "Default": "You are a helpful, polite assistant.",
-    "Short answer": "You are a helpful assistant. Answer as concisely as possible, usually in 1–3 sentences.",
-    "Detailed explanation": "You are a helpful teaching assistant. Give clear, structured and detailed explanations.",
-    "Step-by-step reasoning": "You are a careful problem solver. Think step by step and explain your reasoning clearly.",
+    "Short answer": "Answer as concisely as possible, usually in 1–3 sentences.",
+    "Detailed explanation": "Give clear, structured and detailed explanations.",
 }
 
 def _extract_text(content):
     if isinstance(content, list):
-        return "\n".join(
-            block.get("text", "") for block in content 
-            if isinstance(block, dict) and block.get("type") == "text"
-        )
+        return "\n".join(b.get("text", "") for b in content if isinstance(b, dict) and b.get("type") == "text")
     return str(content)
 
-def build_prompt(message, history, style):
-    system_prompt = STYLE_SYSTEM_PROMPTS.get(style, STYLE_SYSTEM_PROMPTS["Default"])
-    prompt_parts = [f"System: {system_prompt}\n", "Conversation:\n"]
+def chat_fn(message, history, max_new_tokens, style):
+    if not llm: return "Error: Model not loaded."
     
+    # Logic
+    system_prompt = STYLE_SYSTEM_PROMPTS.get(style, STYLE_SYSTEM_PROMPTS["Default"])
+    prompt = f"System: {system_prompt}\nConversation:\n"
     for msg in history or []:
         role = msg.get("role")
-        content = _extract_text(msg.get("content", ""))
-        if content:
-            if role == "user": prompt_parts.append(f"User: {content}\n")
-            elif role == "assistant": prompt_parts.append(f"Assistant: {content}\n")
-            
-    prompt_parts.append(f"User: {message}\n")
-    prompt_parts.append("Assistant:")
-    return "".join(prompt_parts)
-
-def chat_fn(message, history, max_new_tokens, style):
-    # Safe defaults
-    temperature = 0.7
-    top_p = 0.9
-    repetition_penalty = 1.1
-    prompt = build_prompt(message, history, style)
-    
-    # Check if LLM loaded correctly
-    if 'llm' not in globals():
-        return "Error: Model not loaded."
+        txt = _extract_text(msg.get("content", ""))
+        if txt:
+            if role == "user": prompt += f"User: {txt}\n"
+            elif role == "assistant": prompt += f"Assistant: {txt}\n"
+    prompt += f"User: {message}\nAssistant:"
 
     output = llm(
         prompt,
         max_tokens=int(max_new_tokens),
-        temperature=temperature,
-        top_p=top_p,
-        repeat_penalty=repetition_penalty,
-        stop=["User:", "Assistant:", "System:", "Conversation:"],
+        temperature=0.7,
+        top_p=0.9,
+        stop=["User:", "Assistant:", "System:"],
     )
     return output["choices"][0]["text"].strip()
 
-# --- 5. Theme & CSS ---
-
-# A robust theme base
-winter_theme = gr.themes.Soft(
-    primary_hue="blue", 
-    neutral_hue="slate",
-).set(
-    body_background_fill="transparent",
-    block_background_fill="rgba(15, 23, 42, 0.7)", 
-    border_color_primary="#FFFFFF", 
-    button_primary_background_fill="#FFFFFF", 
-    button_primary_text_color="#000000",
-)
-
-# Combined CSS
-custom_css = bg_css_rule + """
-/* Make the App Wrapper Transparent */
+# --- 4. THEME CSS (The Magic Part) ---
+christmas_css = """
+/* Import a festive/elegant font */
+@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@400;700&display=swap');
+
+body {
+    /* Main Background: Snowy Forest */
+    background: url('https://images.unsplash.com/photo-1543169176-78e7c10b27b6?q=80&w=2560&auto=format&fit=crop') no-repeat center center fixed;
+    background-size: cover;
+    color: #f0f0f0;
+    font-family: "Lato", sans-serif;
+}
+
+/* Headings */
+h1, h2, h3 {
+    font-family: "Cinzel", serif;
+    color: #FFD700 !important; /* Gold text */
+    text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
+    text-transform: uppercase;
+}
+
+/* 1. HERO SECTION (The Header) */
+.hero {
+    position: relative;
+    margin: 1rem auto;
+    max-width: 900px;
+    padding: 2rem;
+    border-radius: 20px;
+    /* Glassy Red/Dark background */
+    background: linear-gradient(135deg, rgba(40, 0, 0, 0.85), rgba(10, 20, 30, 0.9));
+    border: 2px solid #D4AF37; /* Gold Border */
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.8), 0 0 10px rgba(212, 175, 55, 0.3);
+    overflow: hidden;
+}
+
+.hero-inner {
+    display: flex;
+    gap: 1.5rem;
+    align-items: center;
+    position: relative;
+    z-index: 2;
+}
+
+/* The Round Avatar Image */
+.hero-image {
+    flex-shrink: 0;
+    width: 100px;
+    height: 100px;
+    border-radius: 50%;
+    border: 3px solid #D4AF37; /* Gold */
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0,0,0,0.8);
+}
+.hero-image img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
+
+.hero-text h1 {
+    margin: 0;
+    font-size: 1.8rem;
+    letter-spacing: 0.1em;
+}
+.hero-text p {
+    margin-top: 0.5rem;
+    font-size: 1rem;
+    color: #E0E0E0;
+    line-height: 1.4;
+}
+
+/* 2. GRADIO CONTAINER TRANSPARENCY */
 .gradio-container {
     background: transparent !important;
 }
 
-/* Chat & Settings Blocks - Frosty Glass with White Borders */
-.group, .form, .bubble-wrap, .chatbot {
-    background-color: rgba(15, 23, 42, 0.8) !important; 
-    border: 2px solid #FFFFFF !important; 
-    border-radius: 12px !important;
-    backdrop-filter: blur(5px); 
-    box-shadow: 0 4px 15px rgba(0,0,0,0.5);
+/* 3. CHAT INTERFACE & INPUTS */
+.group, .form, .bubble-wrap {
+    background: rgba(15, 23, 42, 0.85) !important; /* Dark Glass */
+    border: 1px solid rgba(255, 255, 255, 0.3) !important;
+    border-radius: 15px !important;
+    backdrop-filter: blur(5px);
 }
 
-/* Specific Chat Bubble Coloring */
+/* Chat Messages */
 .user-message {
-    background-color: rgba(255, 255, 255, 0.2) !important; 
-    border: 1px solid #FFFFFF !important;
-    color: #FFFFFF !important;
+    background: linear-gradient(135deg, #8E0E00, #1F1C18) !important; /* Deep Red */
+    border-left: 4px solid #D4AF37 !important; /* Gold accent */
+    color: white !important;
 }
+
 .bot-message {
-    background-color: rgba(0, 0, 0, 0.6) !important; 
-    border: 1px solid #A0A0A0 !important;
+    background: linear-gradient(135deg, #134E5E, #1F1C18) !important; /* Deep Green */
+    border-left: 4px solid #71B280 !important; /* Light Green accent */
     color: #E0E0E0 !important;
 }
 
-/* Text Colors */
+/* Inputs */
 textarea, input {
-    background-color: rgba(0, 0, 0, 0.5) !important;
-    border: 1px solid #FFFFFF !important;
+    background-color: rgba(0, 0, 0, 0.6) !important;
+    border: 1px solid #D4AF37 !important;
     color: white !important;
-}
-label, span, p, .prose {
-    color: #FFFFFF !important;
-    text-shadow: 1px 1px 2px black; 
+    border-radius: 20px !important;
 }
 
-/* Hide Footer */
-footer {visibility: hidden}
+/* Buttons */
+button.primary {
+    background: linear-gradient(to right, #D4AF37, #C5A028) !important;
+    color: black !important;
+    font-weight: bold !important;
+    border: none !important;
+}
 """
 
-max_new_tokens_slider = gr.Slider(
-    minimum=16, maximum=256, value=64, step=8, label="Max Response Length",
-)
-style_radio = gr.Radio(
-    choices=["Default", "Short answer", "Detailed explanation"],
-    value="Detailed explanation",
-    label="Answer style",
-)
-
-# Instantiate
-demo = gr.ChatInterface(
-    fn=chat_fn,
-    title="❄️ WinterChat Lab 2 ❄️",
-    description="Stay frosty. Chat with the fine-tuned model.",
-    additional_inputs=[max_new_tokens_slider, style_radio],
-    additional_inputs_accordion="Settings",
-    theme=winter_theme,
-    css=custom_css
-)
+# --- 5. BUILD THE UI ---
+with gr.Blocks(css=christmas_css, title="Christmas Lab 2") as demo:
+    
+    # HTML Header (The "Hero")
+    gr.HTML(
+        """
+        <div class="hero">
+          <div class="hero-inner">
+            <div class="hero-image">
+              <img src="https://images.unsplash.com/photo-1482517967863-00e15c9b4499?q=80&w=400&auto=format&fit=crop" alt="Christmas AI">
+            </div>
+            <div class="hero-text">
+              <h1>Holiday AI Assistant</h1>
+              <p>
+                Welcome to the Winter Workshop. I am powered by fine-tuned Llama models 
+                and hot cocoa. Ask me anything, and stay frosty!
+              </p>
+            </div>
+          </div>
+        </div>
+        """
+    )
+    
+    # The Chat Interface
+    # Note: We pass the sliders here as 'additional_inputs' just like before
+    max_new_tokens_slider = gr.Slider(minimum=16, maximum=256, value=64, step=8, label="Max Response Length")
+    style_radio = gr.Radio(["Default", "Short answer", "Detailed explanation"], value="Detailed explanation", label="Style")
+
+    chat = gr.ChatInterface(
+        fn=chat_fn,
+        additional_inputs=[max_new_tokens_slider, style_radio],
+        additional_inputs_accordion="Workshop Settings",
+    )
 
 if __name__ == "__main__":
     demo.launch(allowed_paths=["."])