Update app.py

app.py

@@ -1,10 +1,11 @@
 import gradio as gr
 import subprocess
+import base64
+import os
 from huggingface_hub import hf_hub_download
 
 # --- 1. Setup & Install ---
 subprocess.run("pip install -q 'llama_cpp_python==0.3.15'", shell=True, check=False)
-
 from llama_cpp import Llama
 
 # --- 2. Load Model (GGUF) ---
@@ -27,7 +28,23 @@ llm = Llama(
     use_mlock=False,
 )
 
-# --- 3. Prompts & Logic ---
+# --- 3. Image Handling (The Fix) ---
+def encode_image(image_path):
+    """
+    Reads the local image and converts it to a base64 string.
+    This ensures it loads in the CSS without 404 errors.
+    """
+    if not os.path.exists(image_path):
+        return "" # Fail silently if file missing
+    with open(image_path, "rb") as image_file:
+        encoded_string = base64.b64encode(image_file.read()).decode('utf-8')
+    return f"data:image/jpeg;base64,{encoded_string}"
+
+# Exact filename from your screenshot
+IMG_FILENAME = "Cute-Christmas-Background-edit-online-1.jpg"
+bg_image_data = encode_image(IMG_FILENAME)
+
+# --- 4. Prompts & 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.",
@@ -62,7 +79,6 @@ def chat_fn(message, history, max_new_tokens, style):
     temperature = 0.7
     top_p = 0.9
     repetition_penalty = 1.1
-
     prompt = build_prompt(message, history, style)
     
     output = llm(
@@ -75,8 +91,7 @@ def chat_fn(message, history, max_new_tokens, style):
     )
     return output["choices"][0]["text"].strip()
 
-# --- 4. Winter/Christmas Theme Configuration ---
-
+# --- 5. Theme & CSS ---
 winter_theme = gr.themes.Soft(
     primary_hue="blue", 
     neutral_hue="slate",
@@ -88,55 +103,55 @@ winter_theme = gr.themes.Soft(
     button_primary_text_color="#000000",
 )
 
-# --- UPDATED CSS FOR LOCAL IMAGE ---
-# We use the filename directly since it's in the same folder as app.py
-custom_css = """
-/* 1. APPLY LOCAL BACKGROUND TO BODY */
-body {
-    background: url('Cute-Christmas-Background-edit-online-1.jpg') no-repeat center center fixed !important; 
+# We inject the base64 image data directly into the URL()
+custom_css = f"""
+/* Apply Background to the main app container */
+.gradio-container {{
+    background-image: url('{bg_image_data}') !important;
     background-size: cover !important;
-}
+    background-position: center center !important;
+    background-attachment: fixed !important;
+    background-repeat: no-repeat !important;
+}}
 
-/* 2. Make the Gradio Container TRANSPARENT */
-.gradio-container {
+/* Ensure the main content area is transparent so bg shows */
+.gradio-container > .main {{
     background: transparent !important;
-    background-color: transparent !important;
-}
+}}
 
-/* 3. The Chat & Settings Blocks - "Frosty Glass" with White Borders */
-.group, .form, .bubble-wrap {
+/* Dark Glassy Look for Chat and Settings */
+.group, .form, .bubble-wrap {{
     background: rgba(15, 23, 42, 0.75) !important; 
     border: 2px solid #FFFFFF !important; 
     border-radius: 12px !important;
     backdrop-filter: blur(4px); 
     box-shadow: 0 4px 15px rgba(0,0,0,0.5);
-}
+}}
 
-/* 4. Chat Bubbles */
-.user-message {
+/* Chat Bubbles */
+.user-message {{
     background-color: rgba(255, 255, 255, 0.2) !important; 
     border: 1px solid #FFFFFF !important;
     color: #FFFFFF !important;
-}
-.bot-message {
+}}
+.bot-message {{
     background-color: rgba(0, 0, 0, 0.6) !important; 
     border: 1px solid #A0A0A0 !important;
     color: #E0E0E0 !important;
-}
+}}
 
-/* 5. Inputs and Text */
-textarea, input {
+/* Inputs and Text */
+textarea, input {{
     background-color: rgba(0, 0, 0, 0.5) !important;
     border: 1px solid #FFFFFF !important;
     color: white !important;
-}
-label, span, p, .prose {
+}}
+label, span, p, .prose {{
     color: #FFFFFF !important;
     text-shadow: 1px 1px 2px black; 
-}
+}}
 
-/* Hide Footer */
-footer {visibility: hidden}
+footer {{visibility: hidden}}
 """
 
 max_new_tokens_slider = gr.Slider(
@@ -148,6 +163,7 @@ style_radio = gr.Radio(
     label="Answer style",
 )
 
+# Instantiate
 demo = gr.ChatInterface(
     fn=chat_fn,
     title="❄️ WinterChat Lab 2 ❄️",
@@ -156,9 +172,10 @@ demo = gr.ChatInterface(
     additional_inputs_accordion="Settings",
 )
 
-# Apply Theme and CSS
+# Apply configuration
 demo.theme = winter_theme
 demo.css = custom_css
 
 if __name__ == "__main__":
-    demo.launch()
+    # allowed_paths=["."] is a backup, but base64 should solve it.
+    demo.launch(allowed_paths=["."])