Update app.py

app.py

@@ -16,8 +16,9 @@ try:
         repo_id=MODEL_REPO,
         filename=GGUF_FILENAME,
     )
-except Exception:
-    model_path = "" # Handle offline/error gracefully
+except Exception as e:
+    print(f"Error: {e}")
+    model_path = "" 
 
 llm = None
 if model_path:
@@ -46,7 +47,6 @@ def _extract_text(content):
 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 []:
@@ -66,59 +66,52 @@ def chat_fn(message, history, max_new_tokens, style):
     )
     return output["choices"][0]["text"].strip()
 
-# --- 4. THEME CSS (The Magic Part) ---
+# --- 4. THEME CSS ---
+# Note: We use a reliable Unsplash URL for the background to avoid file path errors
 christmas_css = """
-/* Import a festive/elegant font */
+/* Import a festive 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;
+    background: url('https://images.unsplash.com/photo-1543169176-78e7c10b27b6?q=80&w=2560&auto=format&fit=crop') no-repeat center center fixed !important;
+    background-size: cover !important;
     color: #f0f0f0;
     font-family: "Lato", sans-serif;
 }
 
-/* Headings */
 h1, h2, h3 {
     font-family: "Cinzel", serif;
-    color: #FFD700 !important; /* Gold text */
+    color: #FFD700 !important; /* Gold */
     text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
     text-transform: uppercase;
 }
 
-/* 1. HERO SECTION (The Header) */
+/* 1. HERO HEADER STYLES */
 .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));
+    /* Dark Holiday Red/Black Gradient */
+    background: linear-gradient(135deg, rgba(60, 10, 10, 0.9), rgba(10, 20, 30, 0.95));
     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;
+    gap: 20px;
 }
 
-/* The Round Avatar Image */
 .hero-image {
-    flex-shrink: 0;
     width: 100px;
     height: 100px;
     border-radius: 50%;
-    border: 3px solid #D4AF37; /* Gold */
+    border: 3px solid #D4AF37;
     overflow: hidden;
-    box-shadow: 0 0 20px rgba(0,0,0,0.8);
+    flex-shrink: 0;
 }
+
 .hero-image img {
     width: 100%;
     height: 100%;
@@ -130,11 +123,11 @@ h1, h2, h3 {
     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 */
@@ -142,24 +135,24 @@ h1, h2, h3 {
     background: transparent !important;
 }
 
-/* 3. CHAT INTERFACE & INPUTS */
+/* 3. COMPONENT STYLING */
 .group, .form, .bubble-wrap {
-    background: rgba(15, 23, 42, 0.85) !important; /* Dark Glass */
+    background: rgba(15, 23, 42, 0.85) !important; 
     border: 1px solid rgba(255, 255, 255, 0.3) !important;
     border-radius: 15px !important;
     backdrop-filter: blur(5px);
 }
 
-/* Chat Messages */
+/* Messages */
 .user-message {
-    background: linear-gradient(135deg, #8E0E00, #1F1C18) !important; /* Deep Red */
-    border-left: 4px solid #D4AF37 !important; /* Gold accent */
+    background: linear-gradient(135deg, #8E0E00, #3E0000) !important; /* Holiday Red */
+    border-left: 4px solid #D4AF37 !important;
     color: white !important;
 }
 
 .bot-message {
-    background: linear-gradient(135deg, #134E5E, #1F1C18) !important; /* Deep Green */
-    border-left: 4px solid #71B280 !important; /* Light Green accent */
+    background: linear-gradient(135deg, #0f2e18, #05140a) !important; /* Pine Green */
+    border-left: 4px solid #71B280 !important;
     color: #E0E0E0 !important;
 }
 
@@ -168,51 +161,52 @@ textarea, input {
     background-color: rgba(0, 0, 0, 0.6) !important;
     border: 1px solid #D4AF37 !important;
     color: white !important;
-    border-radius: 20px !important;
 }
 
 /* Buttons */
-button.primary {
+button {
     background: linear-gradient(to right, #D4AF37, #C5A028) !important;
     color: black !important;
     font-weight: bold !important;
     border: none !important;
 }
+footer {visibility: hidden}
 """
 
 # --- 5. BUILD THE UI ---
-with gr.Blocks(css=christmas_css, title="Christmas Lab 2") as demo:
+# FIX: Removed 'css' from constructor to prevent TypeError
+with gr.Blocks(title="Christmas Lab 2") as demo:
     
-    # HTML Header (The "Hero")
+    # HTML Header
     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>
+              <h1>Holiday AI Workshop</h1>
               <p>
-                Welcome to the Winter Workshop. I am powered by fine-tuned Llama models 
-                and hot cocoa. Ask me anything, and stay frosty!
+                Welcome to the Winter Lab. I am powered by fine-tuned Llama models 
+                and hot cocoa. Ask me anything!
               </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 Interface
     chat = gr.ChatInterface(
         fn=chat_fn,
         additional_inputs=[max_new_tokens_slider, style_radio],
         additional_inputs_accordion="Workshop Settings",
     )
 
+# FIX: Assign CSS manually after creation
+demo.css = christmas_css
+
 if __name__ == "__main__":
     demo.launch(allowed_paths=["."])