Updated app.py to final version

changed into the final version if there is issues with the query's might need to change the prompt around

app.py

@@ -3,8 +3,13 @@ import sympy as sp
 import torch
 from transformers import AutoTokenizer, AutoModelForCausalLM
 
-MODEL_ID = "Qwen/Qwen2.5-0.5B-Instruct"  
-SYSTEM_PROMPT = "You are a helpful tutor. Match the user's level."
+
+MODEL_ID = "Qwen/Qwen2.5-1.5B-Instruct"  
+SYSTEM_PROMPT = """
+You are a helpful tutor who always avoid hashtags, emojis, or social media style text.
+
+"""
+
 
 tok = AutoTokenizer.from_pretrained(MODEL_ID, trust_remote_code=True)
 model = AutoModelForCausalLM.from_pretrained(
@@ -14,6 +19,24 @@ model = AutoModelForCausalLM.from_pretrained(
 )
 model.eval()
 
+def level_style(level: str, step: bool) -> str:
+    if level == "Beginner":
+        return (
+            "Simple and short answer to the questions."
+            "Use short sentences and sometimes give small examples. "
+            + ("Show each step clearly." if step else "Keep it short and clear.")
+        )
+    elif level == "Intermediate":
+        return (
+            "Explain with moderate detail. Use correct terminology but keep it approachable. "
+            + ("Give step-by-step reasoning." if step else "Keep it short and clear.")
+        )
+    else:  # Advanced
+        return (
+            "Use precise and technical language. Assume the user has strong background knowledge involving the matter."
+            + ("Show reasoning steps briefly." if step else "Be concise and analytical.")
+        )
+
 def verify_math(expr_str: str) -> str:
     try:
         expr = sp.sympify(expr_str)
@@ -25,34 +48,123 @@ def verify_math(expr_str: str) -> str:
 def generate(question: str, level: str, step_by_step: bool) -> str:
     if not question.strip():
         return "Please enter a question."
-    style = f"Level: {level}. {'Explain step-by-step.' if step_by_step else 'Be concise.'}"
+    style = level_style(level, step_by_step)
     prompt = f"System: {SYSTEM_PROMPT}\n{style}\nUser: {question}\nAssistant:"
     inputs = tok(prompt, return_tensors="pt")
     with torch.no_grad():
         out = model.generate(
             **inputs,
-            max_new_tokens=192,
-            do_sample=True,
+            max_new_tokens=192, # was 384 
+            do_sample=True, # False was True
             temperature=0.7,
-            top_p=0.95,
+            top_p=0.9,
+            repetition_penalty=1.2,
+            no_repeat_ngram_size=3,
             pad_token_id=tok.eos_token_id
         )
     text = tok.decode(out[0], skip_special_tokens=True)
     if "Assistant:" in text:
-        text = text.split("Assistant:", 1)[1].strip()
+        text = text.split("Assistant:", 1)[1].strip()   
     is_math = any(ch in question for ch in "+-*/=^") or question.lower().startswith(("simplify","derive","integrate"))
     sympy_note = verify_math(question) if is_math else "No math verification needed."
     return f"{text}\n\n---\n**SymPy check:** {sympy_note}\n_Status: Transformers CPU_"
 
+# Building app and IU
 def build_app():
     with gr.Blocks(title="LearnLoop — CPU Space") as demo:
-        gr.Markdown("# LearnLoop — CPU-only demo")
-        q = gr.Textbox(label="Your question", placeholder="e.g., simplify (x^2 - 1)/(x - 1)")
-        level = gr.Dropdown(choices=["Beginner","Intermediate","Advanced"], value="Beginner", label="Level")
+        
+# CSS styles and adding colours
+        gr.HTML("""
+        <style>
+       
+       .gradio-container {
+            background-color: #EDF6FA !important;  /* haalea sininen */
+            padding: 24px;
+            border-radius: 12px;
+            box-shadow: 0 4px 12px rgba(0,0,0,0.05);
+        }
+                
+        /* buttons */
+        button {
+            border-radius: 8px;
+            transition: all 0.2s ease-in-out;
+            font-weight: 500;
+            letter-spacing: 0.5px;
+        }
+        button:hover {
+            opacity: 0.9;
+            transform: translateY(-1px);
+        }
+        button:active {
+            filter: brightness(85%);
+            transform: scale(0.98);
+        }
+        /* Explain ja Reset buttons */
+        #explain-btn { 
+            background-color: #5499C7;
+            color: white;
+            border: 2px solid #2E86C1;
+        }
+        #reset-btn { 
+            background-color: #EC7063;
+            color: white;
+            border: 2px solid #CB4335;
+        }
+        #explain-btn:hover, #reset-btn:hover { 
+            opacity: 0.85;
+        }
+        #explain-btn:active, #reset-btn:active {
+            filter: brightness(85%);
+            transform: scale(0.98);
+        }
+        </style>
+        """)
+
+
+        # prints using instructions 
+        gr.Markdown("""
+        # **LearnL**<span style="font-size:1.2em; color: #21618C">∞</span>**p — AI Tutor**
+        This app uses the [Qwen 2.5 model](https://huggingface.co/Qwen/Qwen2.5-0.5B-Instruct) 
+        to explain questions at different skill levels. It can also verify 
+        mathematical expressions using the SymPy library.
+        **How to use:**  
+        1️⃣ Type your question or a mathematical expression.  
+        2️⃣ Select your level (Beginner, Intermediate, Advanced).  
+        3️⃣ Choose whether you want a step-by-step explanation.  
+        4️⃣ Press **"Explain"** or **Enter** on your keyboard.  
+        5️⃣ If you want to enter a new question, you can press **"Reset"** or simply **type a new question**.  
+        
+        💬 You can ask your question in **English**.
+        """)
+
+        # User's feed
+        q = gr.Textbox(label="Your question", placeholder="e.g., simplify (x^2 - 1)/(x - 1)", elem_id="question-box")
+        level = gr.Dropdown(choices=["Beginner", "Intermediate", "Advanced"], value="Beginner", label="Level")
         step = gr.Checkbox(value=True, label="Step-by-step")
-        btn = gr.Button("Explain"); out = gr.Markdown()
-        btn.click(generate, [q, level, step], out)
+
+        
+        # Results
+        loading = gr.Markdown(visible=False)  # spinner hided at first
+        out = gr.Markdown()
+
+        # Buttons next to each other
+        with gr.Row():
+            btn = gr.Button("Explain", elem_id="explain-btn")
+            reset_btn = gr.ClearButton([q, out, loading], value="Reset", elem_id="reset-btn")
+
+        # connect to generate function with spinner
+        def wrapped_generate(q_val, level_val, step_val):
+            # Näytetään spinner ensin
+            loading_text = "⏳ Generating explanation..."
+            result = generate(q_val, level_val, step_val)
+            # hide spinner when ready
+            return "", result 
+
+        btn.click(fn=wrapped_generate, inputs=[q, level, step], outputs=[loading, out])
+        q.submit(fn=wrapped_generate, inputs=[q, level, step], outputs=[loading, out])
+
     return demo
 
+# start the app
 if __name__ == "__main__":
     build_app().launch()