Update app.py

app.py

@@ -2,146 +2,306 @@ import gradio as gr
 import requests
 import json
 import base64
+import os
 from io import BytesIO
-from PIL import Image
 
-API_URL = "http://127.0.0.1:8080/v1/chat/completions"
+# HuggingFace provides this automatically in every Space — no setup needed
+HF_TOKEN = os.environ.get("HF_TOKEN", "")
 
-def fix_and_convert_image(pil_image):
+# Text-only math model: Qwen2.5-Math is purpose-built for math reasoning
+TEXT_MODEL = "Qwen/Qwen2.5-Math-72B-Instruct"
+TEXT_API = f"https://api-inference.huggingface.co/models/{TEXT_MODEL}/v1/chat/completions"
+
+# Vision model for worksheet images
+VISION_MODEL = "Qwen/Qwen2-VL-7B-Instruct"
+VISION_API = f"https://api-inference.huggingface.co/models/{VISION_MODEL}/v1/chat/completions"
+
+SYSTEM_PROMPT = """You are a warm, patient math tutor for students from Grade 1 through High School.
+
+Rules you ALWAYS follow:
+1. Never give just the answer. Guide the student step by step.
+2. Before each step, explain WHAT you are doing and WHY in simple language.
+3. Match your language to the grade level given.
+4. Use proper math notation (fractions, exponents, equations).
+5. End with a clearly marked Final Answer and one sentence of encouragement.
+
+Always format your response exactly like this:
+
+📘 **Problem:** [restate the problem clearly]
+
+---
+
+**Step 1 — [Short title]**
+*Why:* [reason in one sentence]
+[Show the calculation or concept]
+
+**Step 2 — [Short title]**
+*Why:* [reason in one sentence]
+[Show the calculation or concept]
+
+(continue for all steps needed)
+
+---
+
+✅ **Final Answer:** [clear result]
+
+💡 [One encouraging sentence]"""
+
+
+def image_to_base64(pil_image):
     try:
         buffered = BytesIO()
-        rgb_image = pil_image.convert("RGB")
-        # Optimized size for native MiniCPM visual patch matching
-        rgb_image.thumbnail((448, 448))
-        rgb_image.save(
-            buffered,
-            format="JPEG",
-            quality=70,
-            optimize=True
-        )
+        pil_image.convert("RGB").thumbnail((896, 896))
+        pil_image.save(buffered, format="JPEG", quality=85)
         return base64.b64encode(buffered.getvalue()).decode("utf-8")
     except Exception:
         return None
 
-def process_math_request(image_input, text_input):
-    if image_input is None and (not text_input or not text_input.strip()):
-        yield "⚠️ Please upload an image or enter a math problem."
+
+def get_headers():
+    headers = {"Content-Type": "application/json"}
+    if HF_TOKEN:
+        headers["Authorization"] = f"Bearer {HF_TOKEN}"
+    return headers
+
+
+def solve_math(image_input, text_input, grade_level):
+    has_image = image_input is not None
+    has_text = text_input and text_input.strip()
+
+    if not has_image and not has_text:
+        yield "⚠️ Please upload a worksheet image **or** type a math problem."
         return
-    
-    yield "⚡ Calculation in progress..."
-    try:
-        if image_input is not None:
-            base64_image = fix_and_convert_image(image_input)
-            payload = {
-                "messages": [
-                    {
-                        "role": "system",
-                        "content": "You are a concise mathematical tool. Output only technical steps and final answers. Skip introductory text completely."
-                    },
-                    {
-                        "role": "user",
-                        "content": [
-                            {
-                                "type": "text",
-                                "text": (
-                                    "Transcribe and solve this math problem using strict markdown formatting:\n\n"
-                                    "### Problem\n"
-                                    "[Briefly state the problem]\n\n"
-                                    "### Steps\n"
-                                    "[List mathematical step calculation entries directly]\n\n"
-                                    "### Final Answer\n"
-                                    "[Final result code block]"
-                                )
-                            },
-                            {
-                                "type": "image_url",
-                                "image_url": {
-                                    "url": f"data:image/jpeg;base64,{base64_image}"
-                                }
-                            }
-                        ]
-                    }
-                ],
-                "stream": True,
-                "temperature": 0,
-                "max_tokens": 300
-            }
-        else:
-            payload = {
-                "messages": [
-                    {
-                        "role": "system",
-                        "content": "You are a direct mathematical calculator."
-                    },
-                    {
-                        "role": "user",
-                        "content": f"Solve this problem step by step with zero conversational fluff:\n\n{text_input}"
-                    }
+
+    yield "🔍 Reading your problem..."
+
+    grade_note = f"Grade level: {grade_level}."
+
+    if has_image:
+        b64 = image_to_base64(image_input)
+        if b64 is None:
+            yield "❌ Could not process the image. Please try a clearer photo."
+            return
+
+        extra = f"\nExtra note from student: {text_input.strip()}" if has_text else ""
+        user_text = (
+            f"{grade_note}\n"
+            f"Look at this math problem from my worksheet and teach me how to solve it step by step.{extra}"
+        )
+
+        messages = [
+            {"role": "system", "content": SYSTEM_PROMPT},
+            {
+                "role": "user",
+                "content": [
+                    {"type": "image_url", "image_url": {"url": f"data:image/jpeg;base64,{b64}"}},
+                    {"type": "text", "text": user_text},
                 ],
-                "stream": True,
-                "temperature": 0,
-                "max_tokens": 300
-            }
-        
+            },
+        ]
+        api_url = VISION_API
+        model_id = VISION_MODEL
+
+    else:
+        messages = [
+            {"role": "system", "content": SYSTEM_PROMPT},
+            {"role": "user", "content": f"{grade_note}\n\nProblem: {text_input.strip()}"},
+        ]
+        api_url = TEXT_API
+        model_id = TEXT_MODEL
+
+    payload = {
+        "model": model_id,
+        "messages": messages,
+        "max_tokens": 1200,
+        "temperature": 0.3,
+        "stream": True,
+    }
+
+    yield "⚡ Solving step by step..."
+
+    try:
         response = requests.post(
-            API_URL,
+            api_url,
+            headers=get_headers(),
             json=payload,
             stream=True,
-            timeout=120
+            timeout=120,
         )
-        
+
+        if response.status_code == 503:
+            yield (
+                "⏳ **Model is warming up** — this happens after a period of inactivity.\n\n"
+                "Please wait about **30 seconds** and click **Solve & Explain** again."
+            )
+            return
+
+        if response.status_code == 429:
+            yield "⚠️ HuggingFace servers are busy right now. Please wait a few seconds and try again."
+            return
+
+        if response.status_code not in (200, 201):
+            yield f"❌ API error {response.status_code}. Please try again in a moment.\n\nDetails: {response.text[:300]}"
+            return
+
         output = ""
-        for line in response.iter_lines():
-            if not line:
+        for raw_line in response.iter_lines():
+            if not raw_line:
                 continue
-            line = line.decode("utf-8")
+            line = raw_line.decode("utf-8", errors="ignore")
             if line.startswith("data: "):
-                line = line[6:]
-            if line.strip() == "[DONE]":
-                break
+                line = line[6:].strip()
+            if line in ("[DONE]", ""):
+                continue
             try:
                 data = json.loads(line)
-                token = data["choices"][0]["delta"].get("content", "")
+                delta = data.get("choices", [{}])[0].get("delta", {})
+                token = delta.get("content", "")
                 if token:
                     output += token
                     yield output
-            except Exception:
+            except (json.JSONDecodeError, KeyError, IndexError):
                 continue
+
+        if not output:
+            yield "⚠️ No response received. The model may still be loading — please try again in 30 seconds."
+
+    except requests.exceptions.Timeout:
+        yield "❌ Request timed out. Please try again."
     except Exception as e:
-        yield f"❌ Error: {str(e)}"
-
-# Restored clean user interface styling matches
-with gr.Blocks() as demo:
-    gr.Markdown(
-        """
-        # 📐 Fast Local Math Tutor
-        Upload a worksheet image or enter a math problem.
-        """
-    )
-    with gr.Row():
-        with gr.Column():
-            image_input = gr.Image(
-                type="pil",
-                label="Worksheet Image"
-            )
+        yield f"❌ Unexpected error: {str(e)}"
+
+
+CSS = """
+@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700;800;900&family=JetBrains+Mono:wght@400;600&display=swap');
+
+:root {
+    --bg:       #0d1117;
+    --surface:  #161b22;
+    --surface2: #1f2937;
+    --accent:   #58a6ff;
+    --accent2:  #bc8cff;
+    --green:    #3fb950;
+    --text:     #e6edf3;
+    --muted:    #7d8590;
+    --border:   #30363d;
+    --radius:   14px;
+}
+
+body, .gradio-container { background: var(--bg) !important; font-family: 'Nunito', sans-serif !important; color: var(--text) !important; }
+
+.math-header { text-align:center; padding:32px 20px 18px; background:linear-gradient(160deg,#161b22,#0d1117); border-bottom:1px solid var(--border); border-radius:var(--radius); margin-bottom:20px; }
+.math-header h1 { font-size:2.2rem; font-weight:900; background:linear-gradient(90deg,var(--accent),var(--accent2),var(--green)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; margin:0 0 6px; }
+.math-header p  { color:var(--muted); font-size:.95rem; margin:0; }
+
+.badge-row { display:flex; gap:8px; flex-wrap:wrap; justify-content:center; margin-top:12px; }
+.badge { background:var(--surface2); border:1px solid var(--border); border-radius:20px; padding:3px 12px; font-size:.76rem; color:var(--muted); }
+
+.panel-label { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; }
+
+.gr-textbox textarea, .gr-textbox input { background:var(--surface2) !important; border:1px solid var(--border) !important; border-radius:10px !important; color:var(--text) !important; font-family:'Nunito',sans-serif !important; font-size:.95rem !important; }
+.gr-textbox textarea:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(88,166,255,.15) !important; }
+
+.solve-btn { background:linear-gradient(135deg,var(--accent),var(--accent2)) !important; color:#fff !important; font-family:'Nunito',sans-serif !important; font-weight:900 !important; font-size:1.05rem !important; border:none !important; border-radius:12px !important; padding:14px 0 !important; width:100% !important; cursor:pointer !important; transition:all .2s !important; }
+.solve-btn:hover { transform:translateY(-2px) !important; box-shadow:0 8px 24px rgba(88,166,255,.35) !important; }
+
+.clear-btn { background:var(--surface2) !important; color:var(--muted) !important; border:1px solid var(--border) !important; border-radius:12px !important; font-family:'Nunito',sans-serif !important; font-weight:700 !important; transition:all .2s !important; }
+.clear-btn:hover { border-color:var(--accent) !important; color:var(--text) !important; }
+
+.output-box { background:var(--surface) !important; border:1px solid var(--border) !important; border-radius:var(--radius) !important; padding:24px !important; min-height:420px !important; font-family:'Nunito',sans-serif !important; font-size:.97rem !important; line-height:1.8 !important; color:var(--text) !important; }
+.output-box code { font-family:'JetBrains Mono',monospace !important; background:var(--surface2) !important; border-radius:6px !important; padding:2px 8px !important; }
+
+.info-box { background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--green); border-radius:10px; padding:12px 16px; margin-top:16px; font-size:.85rem; color:var(--muted); line-height:1.6; }
+.info-box strong { color:var(--green); }
+
+footer { display:none !important; }
+"""
+
+GRADE_CHOICES = [
+    "Auto-detect from problem",
+    "Grade 1–2 (Basic Addition & Subtraction)",
+    "Grade 3–4 (Multiplication, Division, Fractions Intro)",
+    "Grade 5–6 (Fractions, Decimals, Geometry Basics)",
+    "Grade 7–8 (Algebra, Ratios, Percentages)",
+    "Grade 9–10 (Algebra II, Geometry, Trigonometry)",
+    "Grade 11–12 (Pre-Calculus, Statistics, Calculus)",
+]
+
+EXAMPLES = [
+    [None, "What is 24 ÷ 6 + 3 × 2?",                             "Grade 3–4 (Multiplication, Division, Fractions Intro)"],
+    [None, "If I have 3/4 of a pizza and eat 1/3, how much is left?", "Grade 5–6 (Fractions, Decimals, Geometry Basics)"],
+    [None, "Solve for x: 2x + 5 = 17",                             "Grade 7–8 (Algebra, Ratios, Percentages)"],
+    [None, "Find the area of a circle with radius 7 cm",            "Grade 9–10 (Algebra II, Geometry, Trigonometry)"],
+    [None, "Differentiate f(x) = 3x³ − 2x + 7",                   "Grade 11–12 (Pre-Calculus, Statistics, Calculus)"],
+]
+
+with gr.Blocks(css=CSS, title="Interactive Math Tutor") as demo:
+
+    gr.HTML("""
+    <div class="math-header">
+        <h1>📐 Interactive Math Tutor</h1>
+        <p>Free · No sign-up · Step-by-step guidance from Grade 1 to High School</p>
+        <div class="badge-row">
+            <span class="badge">✏️ Arithmetic</span>
+            <span class="badge">½ Fractions</span>
+            <span class="badge">📊 Algebra</span>
+            <span class="badge">📐 Geometry</span>
+            <span class="badge">📈 Trigonometry</span>
+            <span class="badge">∫ Calculus</span>
+        </div>
+    </div>
+    """)
+
+    with gr.Row(equal_height=False):
+        with gr.Column(scale=4, min_width=300):
+            gr.HTML('<div class="panel-label">📎 Upload Worksheet (optional)</div>')
+            image_input = gr.Image(type="pil", label="", height=200)
+
+            gr.HTML('<div class="panel-label" style="margin-top:14px">✏️ Or Type Your Problem</div>')
             text_input = gr.Textbox(
-                label="Math Problem",
-                placeholder="Type a math problem..."
+                label="", placeholder="e.g.  Solve for x: 5x − 3 = 22", lines=3
             )
-            submit_btn = gr.Button("Solve")
-        with gr.Column():
-            # Assigned cleanly within its own layout block to protect UI alignment
-            gr.Markdown("### 🎓 Solution Analysis")
-            output_display = gr.Markdown("Waiting for execution input...")
-            
-    submit_btn.click(
-        process_math_request,
-        inputs=[image_input, text_input],
-        outputs=output_display
+
+            gr.HTML('<div class="panel-label" style="margin-top:14px">🎓 Grade Level</div>')
+            grade_dropdown = gr.Dropdown(
+                choices=GRADE_CHOICES, value="Auto-detect from problem", label=""
+            )
+
+            with gr.Row():
+                solve_btn = gr.Button("🚀 Solve & Explain", elem_classes=["solve-btn"])
+                clear_btn = gr.Button("🗑 Clear",           elem_classes=["clear-btn"])
+
+            gr.HTML("""
+            <div class="info-box">
+                <strong>✅ 100% Free — no API key, no sign-up</strong><br>
+                Powered by open-source AI on HuggingFace servers.<br>
+                Share this page with anyone!<br><br>
+                <strong>⏳ First response</strong> may take ~20–30s if the model just woke up.
+                After that, answers stream in quickly.
+            </div>
+            """)
+
+            gr.HTML('<div class="panel-label" style="margin-top:16px">💡 Try an example</div>')
+            gr.Examples(examples=EXAMPLES, inputs=[image_input, text_input, grade_dropdown], label="")
+
+        with gr.Column(scale=6, min_width=360):
+            gr.HTML('<div class="panel-label">🎓 Step-by-Step Solution</div>')
+            output_display = gr.Markdown(
+                value="*Your solution will appear here.\nUpload a worksheet or type a problem, then click **Solve & Explain**.*",
+                elem_classes=["output-box"],
+            )
+
+    solve_btn.click(
+        fn=solve_math,
+        inputs=[image_input, text_input, grade_dropdown],
+        outputs=output_display,
+    )
+    clear_btn.click(
+        fn=lambda: (None, "", "Auto-detect from problem",
+                    "*Your solution will appear here.*"),
+        inputs=[],
+        outputs=[image_input, text_input, grade_dropdown, output_display],
     )
 
 if __name__ == "__main__":
-    demo.queue().launch(
-        server_name="0.0.0.0",
-        server_port=7860
-    )
+    demo.queue().launch(server_name="0.0.0.0", server_port=7860)