Update app.py

app.py

@@ -2,211 +2,419 @@ import gradio as gr
 import subprocess
 from huggingface_hub import hf_hub_download
 
-# --- 1. Setup & Install ---
+# 1. Install llama-cpp-python in runtime (not via requirements.txt)
+#    Important: remove `llama-cpp-python` from requirements.txt
+#    or Spaces will try to build from source and get stuck.
 subprocess.run("pip install -q 'llama_cpp_python==0.3.15'", shell=True, check=False)
 from llama_cpp import Llama
 
-# --- 2. Load Model (GGUF) ---
+
+# 2. Load your GGUF model from Hugging Face
 MODEL_REPO = "Jeppcode/ScalableLab2"
-GGUF_FILENAME = "model-q4_k_m.gguf" 
+GGUF_FILENAME = "model-q4_k_m.gguf"  # or "model-f16.gguf" if you prefer fp16
 
 print(f"Downloading GGUF model {MODEL_REPO}/{GGUF_FILENAME} ...")
-try:
-    model_path = hf_hub_download(
-        repo_id=MODEL_REPO,
-        filename=GGUF_FILENAME,
-    )
-except Exception as e:
-    print(f"Error: {e}")
-    model_path = "" 
-
-llm = None
-if model_path:
-    print("Initializing llama.cpp LLM ...")
-    llm = Llama(
-        model_path=model_path,
-        n_ctx=2048,          
-        n_threads=2,         
-        n_batch=64,          
-        use_mmap=True,
-        use_mlock=False,
-    )
+model_path = hf_hub_download(
+    repo_id=MODEL_REPO,
+    filename=GGUF_FILENAME,
+)
+
+print("Initializing llama.cpp LLM ...")
+llm = Llama(
+    model_path=model_path,
+    n_ctx=2048,      # context length
+    n_threads=2,     # threads (Spaces CPU is limited)
+    n_batch=64,      # batch size for generation
+    use_mmap=True,
+    use_mlock=False,
+)
 
-# --- 3. Chat Logic ---
+
+# 3. Style presets (system prompts)
 STYLE_SYSTEM_PROMPTS = {
     "Default": "You are a helpful, polite assistant.",
-    "Short answer": "Answer as concisely as possible, usually in 1–3 sentences.",
-    "Detailed explanation": "Give clear, structured and detailed explanations.",
+    "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, "
+        "often with bullet points or numbered steps when useful."
+    ),
+    "Step-by-step reasoning": (
+        "You are a careful problem solver. Think step by step and explain your reasoning clearly "
+        "before giving the final answer."
+    ),
 }
 
-def _extract_text(content):
+
+def _extract_text_from_content(content):
+    """
+    In Gradio 6 ChatInterface, history uses the messages format.
+    content can be:
+      - a string
+      - a list of blocks: [{"type": "text", "text": "..."} , ...]
+    We convert it into a simple string.
+    """
     if isinstance(content, list):
-        return "\n".join(b.get("text", "") for b in content if isinstance(b, dict) and b.get("type") == "text")
-    return str(content)
+        texts = []
+        for block in content:
+            if isinstance(block, dict) and block.get("type") == "text":
+                texts.append(block.get("text", ""))
+            else:
+                texts.append(str(block))
+        return "\n".join(t for t in texts if t)
+    else:
+        return str(content)
+
 
-def chat_fn(message, history, max_new_tokens, style):
-    if not llm: return "Error: Model not loaded."
-    
+def build_prompt(message, history, style):
+    """
+    Build a simple text prompt for llama.cpp based on:
+      - chosen style (system prompt)
+      - conversation history
+      - latest user message
+
+    Format:
+        System: ...
+        Conversation:
+        User: ...
+        Assistant: ...
+        ...
+        User: <current message>
+        Assistant:
+    """
     system_prompt = STYLE_SYSTEM_PROMPTS.get(style, STYLE_SYSTEM_PROMPTS["Default"])
-    prompt = f"System: {system_prompt}\nConversation:\n"
+
+    prompt_parts = []
+    prompt_parts.append(f"System: {system_prompt}\n")
+    prompt_parts.append("Conversation:\n")
+
+    # history is a list of dicts: {"role": "...", "content": ...}
     for msg in history or []:
         role = msg.get("role")
-        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:"
+        content = _extract_text_from_content(msg.get("content", ""))
+
+        if not content:
+            continue
+
+        if role == "user":
+            prompt_parts.append(f"User: {content}\n")
+        elif role == "assistant":
+            prompt_parts.append(f"Assistant: {content}\n")
+        elif role == "system":
+            prompt_parts.append(f"System (previous): {content}\n")
+
+    # Current user message
+    prompt_parts.append(f"User: {message}\n")
+    prompt_parts.append("Assistant:")
+
+    full_prompt = "".join(prompt_parts)
+    return full_prompt
+
+
+def chat_fn(message, history, max_new_tokens, temperature, top_p, repetition_penalty, style):
+    """
+    Main function called by Gradio ChatInterface.
+    - message: latest user input
+    - history: previous messages (messages format)
+    - other params: sliders / radio buttons
+    """
+    prompt = build_prompt(message, history, style)
+
+    # Handle deterministic mode when temperature == 0
+    temp = float(temperature)
+    top_p_val = float(top_p)
+    repeat_pen = float(repetition_penalty)
+
+    if temp <= 0.0:
+        temp = 0.0
+        top_p_val = 1.0  # less important when temp=0
 
     output = llm(
         prompt,
         max_tokens=int(max_new_tokens),
-        temperature=0.7,
-        top_p=0.9,
-        stop=["User:", "Assistant:", "System:"],
+        temperature=temp,
+        top_p=top_p_val,
+        repeat_penalty=repeat_pen,
+        stop=["User:", "Assistant:", "System:", "Conversation:"],
     )
-    return output["choices"][0]["text"].strip()
 
-# --- 4. THEME CSS ---
-# Note: We use a reliable Unsplash URL for the background to avoid file path errors
-christmas_css = """
-/* Import a festive font */
-@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@400;700&display=swap');
+    reply = output["choices"][0]["text"].strip()
+    return reply
+
+
+# 4. Sliders and controls (extra inputs to ChatInterface)
+max_new_tokens_slider = gr.Slider(
+    minimum=16,
+    maximum=256,
+    value=64,
+    step=8,
+    label="Max new tokens (response length)",
+)
 
+temperature_slider = gr.Slider(
+    minimum=0.0,
+    maximum=1.5,
+    value=0.0,
+    step=0.1,
+    label="Temperature (0 = deterministic, higher = more random)",
+)
+
+top_p_slider = gr.Slider(
+    minimum=0.1,
+    maximum=1.0,
+    value=0.9,
+    step=0.05,
+    label="Top-p (nucleus sampling)",
+)
+
+repetition_penalty_slider = gr.Slider(
+    minimum=0.8,
+    maximum=1.3,
+    value=1.0,
+    step=0.05,
+    label="Repetition penalty",
+)
+
+style_radio = gr.Radio(
+    choices=[
+        "Default",
+        "Short answer",
+        "Detailed explanation",
+        "Step-by-step reasoning",
+    ],
+    value="Detailed explanation",
+    label="Answer style",
+)
+
+# 5. Christmas theme CSS
+# Assumes the image "Cute-Christmas-Background-edit-online-1.jpg"
+# is in the Space repository root, so we can reference it as file=...
+christmas_css = """
 body {
-    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;
+    background: radial-gradient(circle at top, #1b1c2b 0, #050611 55%, #000000 100%);
+    color: #fdf6e3;
+    font-family: "Georgia", "Times New Roman", serif;
 }
 
-h1, h2, h3 {
-    font-family: "Cinzel", serif;
-    color: #FFD700 !important; /* Gold */
-    text-shadow: 0px 2px 4px rgba(0,0,0,0.8);
-    text-transform: uppercase;
+/* Use the repo image as a soft background */
+.gradio-container {
+    background:
+        linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.85)),
+        url("file=Cute-Christmas-Background-edit-online-1.jpg");
+    background-size: cover;
+    background-position: center;
 }
 
-/* 1. HERO HEADER STYLES */
+/* Christmas hero card */
 .hero {
     position: relative;
-    margin: 1rem auto;
+    margin: 0 auto 1.5rem auto;
     max-width: 900px;
-    padding: 2rem;
+    padding: 1.6rem 1.6rem 1.4rem 1.6rem;
     border-radius: 20px;
-    /* 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);
+    border: 1px solid rgba(255, 255, 255, 0.14);
+    background:
+        radial-gradient(circle at top,
+            rgba(255, 255, 255, 0.15),
+            rgba(5, 5, 15, 0.98)
+        );
+    box-shadow:
+        0 0 28px rgba(0, 0, 0, 0.9),
+        0 0 70px rgba(180, 0, 40, 0.55);
     overflow: hidden;
+}
+
+.hero-inner {
+    position: relative;
+    z-index: 1;
     display: flex;
+    gap: 1.2rem;
     align-items: center;
-    gap: 20px;
 }
 
-.hero-image {
-    width: 100px;
-    height: 100px;
-    border-radius: 50%;
-    border: 3px solid #D4AF37;
-    overflow: hidden;
+.hero-badge {
     flex-shrink: 0;
+    width: 92px;
+    height: 92px;
+    border-radius: 999px;
+    overflow: hidden;
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    box-shadow:
+        0 0 24px rgba(0, 0, 0, 0.9),
+        0 0 30px rgba(0, 160, 90, 0.7);
+    background:
+        radial-gradient(circle at top,
+            rgba(255,255,255,0.3),
+            rgba(5,5,10,1)
+        ),
+        url("file=Cute-Christmas-Background-edit-online-1.jpg");
+    background-size: cover;
+    background-position: center;
 }
 
-.hero-image img {
-    width: 100%;
-    height: 100%;
-    object-fit: cover;
+.hero-text h1 {
+    margin: 0 0 0.35rem 0;
+    font-size: 1.35rem;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: #ffefe0;
 }
 
-.hero-text h1 {
+.hero-text p {
     margin: 0;
-    font-size: 1.8rem;
-    letter-spacing: 0.1em;
+    font-size: 0.95rem;
+    color: #f8eadd;
+    line-height: 1.5;
 }
 
-.hero-text p {
-    margin-top: 0.5rem;
-    font-size: 1rem;
-    color: #E0E0E0;
+.hero-keyline {
+    margin-top: 1rem;
+    height: 1px;
+    background-image: linear-gradient(
+        90deg,
+        rgba(255, 255, 255, 0),
+        rgba(255, 225, 150, 0.9),
+        rgba(255, 255, 255, 0)
+    );
+    opacity: 0.9;
 }
 
-/* 2. GRADIO CONTAINER TRANSPARENCY */
-.gradio-container {
-    background: transparent !important;
+/* Chat card */
+.gr-chat-interface {
+    position: relative !important;
+    border-radius: 18px !important;
+    border: 1px solid rgba(255, 255, 255, 0.16);
+    background:
+        linear-gradient(
+            135deg,
+            rgba(5, 10, 20, 0.96),
+            rgba(10, 15, 30, 0.96)
+        );
+    box-shadow:
+        0 0 24px rgba(0, 0, 0, 0.9),
+        0 0 50px rgba(0, 180, 120, 0.45);
+    overflow: hidden;
 }
 
-/* 3. COMPONENT STYLING */
-.group, .form, .bubble-wrap {
-    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 as gift tags */
+.gr-chat-message {
+    position: relative;
+    border-radius: 14px !important;
+    border: 1px solid rgba(255, 255, 255, 0.06) !important;
+    backdrop-filter: blur(4px);
 }
 
-/* Messages */
-.user-message {
-    background: linear-gradient(135deg, #8E0E00, #3E0000) !important; /* Holiday Red */
-    border-left: 4px solid #D4AF37 !important;
-    color: white !important;
+.gr-chat-message.user {
+    background:
+        radial-gradient(circle at top left,
+            rgba(0, 180, 120, 0.28),
+            rgba(10, 15, 25, 0.98)
+        ) !important;
+    border-left: 4px solid #00c278 !important;
 }
 
-.bot-message {
-    background: linear-gradient(135deg, #0f2e18, #05140a) !important; /* Pine Green */
-    border-left: 4px solid #71B280 !important;
-    color: #E0E0E0 !important;
+.gr-chat-message.bot {
+    background:
+        radial-gradient(circle at top left,
+            rgba(230, 30, 90, 0.32),
+            rgba(10, 10, 24, 0.98)
+        ) !important;
+    border-left: 4px solid #ff4060 !important;
 }
 
-/* Inputs */
-textarea, input {
-    background-color: rgba(0, 0, 0, 0.6) !important;
-    border: 1px solid #D4AF37 !important;
-    color: white !important;
+/* Input area */
+textarea, .gr-text-input, .gr-textbox {
+    background: rgba(5, 10, 20, 0.98) !important;
+    border-radius: 999px !important;
+    border: 1px solid rgba(255, 255, 255, 0.4) !important;
+    color: #fffbf3 !important;
 }
 
 /* Buttons */
-button {
-    background: linear-gradient(to right, #D4AF37, #C5A028) !important;
-    color: black !important;
-    font-weight: bold !important;
+button, .gr-button {
+    background: linear-gradient(135deg, #ff4060, #00c278) !important;
+    border-radius: 999px !important;
     border: none !important;
+    color: #fffbf3 !important;
+    font-weight: 600 !important;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    box-shadow:
+        0 0 16px rgba(0, 0, 0, 0.9),
+        0 0 26px rgba(255, 204, 140, 0.6);
+}
+
+button:hover, .gr-button:hover {
+    filter: brightness(1.07);
+    box-shadow:
+        0 0 18px rgba(255, 90, 120, 0.8),
+        0 0 32px rgba(0, 200, 150, 0.7);
+}
+
+/* Sliders and controls */
+input[type="range"] {
+    accent-color: #ff4060;
+}
+
+/* Scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+}
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+::-webkit-scrollbar-thumb {
+    background: rgba(255, 255, 255, 0.5);
+    border-radius: 999px;
 }
-footer {visibility: hidden}
 """
 
-# --- 5. BUILD THE UI ---
-# FIX: Removed 'css' from constructor to prevent TypeError
-with gr.Blocks(title="Christmas Lab 2") as demo:
-    
-    # HTML Header
+
+# 6. Build the UI with Blocks so we can add a hero section
+with gr.Blocks(css=christmas_css) as demo:
     gr.HTML(
         """
         <div class="hero">
-            <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-inner">
+            <div class="hero-badge"></div>
             <div class="hero-text">
-              <h1>Holiday AI Workshop</h1>
+              <h1>Scalable Lab 2 Christmas Chat</h1>
               <p>
-                Welcome to the Winter Lab. I am powered by fine-tuned Llama models 
-                and hot cocoa. Ask me anything!
+                Talk to our fine tuned Llama based model, wrapped as a compact GGUF
+                and running on CPU. Use the controls below to tune response length,
+                randomness and style like a Christmas DJ for language models.
               </p>
             </div>
+          </div>
+          <div class="hero-keyline"></div>
         </div>
         """
     )
-    
-    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",
+    gr.Markdown(
+        "🎄 **Tip:** Try switching between short answers and step by step reasoning, "
+        "and play with temperature and top p to see how the model behaves."
     )
 
-# FIX: Assign CSS manually after creation
-demo.css = christmas_css
+    gr.ChatInterface(
+        fn=chat_fn,
+        title="Lab 2 – Fine tuned GGUF model",
+        description=(
+            "Chat with our fine tuned Llama based model, converted to GGUF and "
+            "loaded via llama.cpp from `Jeppcode/ScalableLab2`.\n\n"
+            "Use the controls in the accordion below like a DJ board to tweak "
+            "response length, randomness and style."
+        ),
+        additional_inputs=[
+            max_new_tokens_slider,
+            temperature_slider,
+            top_p_slider,
+            repetition_penalty_slider,
+            style_radio,
+        ],
+        additional_inputs_accordion="Generation controls",
+    )
 
 if __name__ == "__main__":
-    demo.launch(allowed_paths=["."])
+    demo.launch()