Update app.py

app.py

@@ -35,7 +35,7 @@ if model_path:
 # --- 3. Style / System Prompts ---
 STYLE_SYSTEM_PROMPTS = {
     "Default": "You are a helpful, polite assistant.",
-    "Short answer": "Answer as concisely as possible, usually in 1–3 sentences.",
+    "Short answer": "Answer as concisely as possible, usually in 1-3 sentences.",
     "Detailed explanation": "Give clear, structured and detailed explanations.",
     "Step-by-step reasoning": "Think step by step and explain your reasoning clearly.",
 }
@@ -76,24 +76,7 @@ def chat_fn(message, history, max_new_tokens, style):
     )
     return output["choices"][0]["text"].strip()
 
-# --- 4. UI Controls ---
-
-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", "Step-by-step reasoning"],
-    value="Detailed explanation",
-    label="Answer Style"
-)
-
-# --- 4.5. Background CSS ---
-
+# --- 4. Background CSS ---
 BACKGROUND_URL = "https://images.template.net/269645/Cute-Christmas-Background-edit-online-1.jpg"
 
 custom_css = f"""
@@ -103,17 +86,38 @@ custom_css = f"""
   background-size: cover;
   background-position: center;
 }}
+/* Optional: make main blocks a bit translucent so text is readable */
+.gradio-container .block, .gradio-container .panel {{
+  background-color: rgba(255, 255, 255, 0.85);
+}}
 """
 
-# --- 5. Launch App (with background) ---
-demo = gr.ChatInterface(
-    fn=chat_fn,
-    title="Lab 2 – Fine-tuned GGUF model",
-    description="Chat with the fine-tuned Llama model. Use the controls below to change the response style.",
-    additional_inputs=[max_new_tokens_slider, style_radio],
-    additional_inputs_accordion="Controls",
-    css=custom_css,  # <- here
-)
+# --- 5. Build UI inside Blocks (so we can use css) ---
+with gr.Blocks(title="Lab 2 - Fine-tuned GGUF model", css=custom_css) as demo:
+    gr.Markdown(
+        "# Lab 2 - Fine-tuned GGUF model\n"
+        "Chat with the fine-tuned Llama model. Use the controls below to change the response style."
+    )
+
+    with gr.Accordion("Controls", open=True):
+        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", "Step-by-step reasoning"],
+            value="Detailed explanation",
+            label="Answer Style",
+        )
+
+    gr.ChatInterface(
+        fn=chat_fn,
+        additional_inputs=[max_new_tokens_slider, style_radio],
+    )
 
 if __name__ == "__main__":
     demo.launch()