Update app.py

app.py

@@ -1,13 +1,13 @@
 import gradio as gr
-import base64
 import os
-from io import BytesIO
-from huggingface_hub import InferenceClient
+import requests
+import json
 
-SPACE_TOKEN = os.environ.get("HF_TOKEN", "")
+# Groq API - free tier, no credit card, very fast
+GROQ_API_URL = "https://api.groq.com/openai/v1/chat/completions"
+SPACE_GROQ_KEY = os.environ.get("GROQ_API_KEY", "")
 
-# Models confirmed to work with free HF inference text_generation task
-TEXT_MODEL = "mistralai/Mistral-7B-Instruct-v0.3"
+MODEL = "llama-3.1-8b-instant"   # free on Groq, very fast, great at math
 
 SYSTEM_PROMPT = """You are a warm, patient math tutor for students from Grade 1 through High School.
 
@@ -41,32 +41,20 @@ Always format your response exactly like this:
 💡 [One encouraging sentence]"""
 
 
-def image_to_base64(pil_image):
-    try:
-        buffered = BytesIO()
-        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 build_mistral_prompt(system, user_msg):
-    """Mistral instruct format: <s>[INST] ... [/INST]"""
-    return f"<s>[INST] {system}\n\n{user_msg} [/INST]"
-
+def solve_math(image_input, text_input, grade_level, user_key):
+    key = user_key.strip() if user_key and user_key.strip() else SPACE_GROQ_KEY
 
-def solve_math(image_input, text_input, grade_level, user_token):
-    token = user_token.strip() if user_token and user_token.strip() else SPACE_TOKEN
-
-    if not token:
+    if not key:
         yield (
-            "🔑 **A HuggingFace token is required.**\n\n"
-            "It's free and takes 30 seconds:\n"
-            "1. Go to [huggingface.co/settings/tokens](https://huggingface.co/settings/tokens)\n"
-            "2. Click **New token** → **Read** access → Copy\n"
-            "3. Paste it in the **HuggingFace Token** box\n\n"
-            "Your token is never stored — session only."
+            "🔑 **A free Groq API key is required.**\n\n"
+            "Get one in 60 seconds — no credit card needed:\n"
+            "1. Go to [console.groq.com/keys](https://console.groq.com/keys)\n"
+            "2. Sign up free → click **Create API Key** → copy it\n"
+            "3. Paste it in the **Groq API Key** box on the left\n\n"
+            "Your key is never stored — session only.\n\n"
+            "---\n"
+            "**Why Groq?** It's genuinely free (no card), extremely fast, and runs "
+            "Llama 3.1 which is excellent at step-by-step math explanations."
         )
         return
 
@@ -82,107 +70,103 @@ def solve_math(image_input, text_input, grade_level, user_token):
     grade_note = f"Grade level: {grade_level}."
 
     if has_image and has_text:
-        problem_text = text_input.strip()
+        problem = text_input.strip()
+        user_msg = f"{grade_note}\n\nProblem (from worksheet image — typed by student): {problem}"
     elif has_image:
-        problem_text = (
-            "There is a math problem in the uploaded image. "
-            "Please solve it step by step as a math tutor. "
-            "If you cannot determine the exact problem, explain the general method for the type of problem shown."
+        user_msg = (
+            f"{grade_note}\n\n"
+            "The student has uploaded a worksheet image. "
+            "Please ask them to type out the problem text so you can help solve it step by step, "
+            "then explain how you would approach that type of problem."
         )
     else:
-        problem_text = text_input.strip()
-
-    user_msg = f"{grade_note}\n\nProblem: {problem_text}\n\nPlease teach me how to solve this step by step."
-    prompt = build_mistral_prompt(SYSTEM_PROMPT, user_msg)
+        user_msg = f"{grade_note}\n\nProblem: {text_input.strip()}"
 
     yield "⚡ Solving step by step..."
 
     try:
-        client = InferenceClient(
-            model=TEXT_MODEL,
-            token=token,
+        response = requests.post(
+            GROQ_API_URL,
+            headers={
+                "Authorization": f"Bearer {key}",
+                "Content-Type": "application/json",
+            },
+            json={
+                "model": MODEL,
+                "messages": [
+                    {"role": "system", "content": SYSTEM_PROMPT},
+                    {"role": "user",   "content": user_msg},
+                ],
+                "max_tokens": 1200,
+                "temperature": 0.3,
+                "stream": True,
+            },
+            stream=True,
+            timeout=60,
         )
 
+        if response.status_code == 401:
+            yield "❌ **Invalid API key.** Please check your Groq key and try again."
+            return
+        if response.status_code == 429:
+            yield "⚠️ Rate limit hit. Please wait a few seconds and try again."
+            return
+        if response.status_code != 200:
+            yield f"❌ API error {response.status_code}: {response.text[:200]}"
+            return
+
         output = ""
-        # Use text_generation with streaming — works on free HF inference
-        for chunk in client.text_generation(
-            prompt,
-            max_new_tokens=1000,
-            temperature=0.3,
-            do_sample=True,
-            stream=True,
-            stop_sequences=["</s>", "[INST]"],
-        ):
-            output += chunk
-            yield output
+        for raw in response.iter_lines():
+            if not raw:
+                continue
+            line = raw.decode("utf-8", errors="ignore")
+            if line.startswith("data: "):
+                line = line[6:].strip()
+            if line == "[DONE]":
+                break
+            try:
+                token = json.loads(line)["choices"][0]["delta"].get("content", "")
+                if token:
+                    output += token
+                    yield output
+            except Exception:
+                continue
 
         if not output:
-            yield "⚠️ No response received. Please try again in a moment."
+            yield "⚠️ No response received. Please try again."
 
+    except requests.exceptions.Timeout:
+        yield "❌ Request timed out. Please try again."
     except Exception as e:
-        err = str(e)
-        if "401" in err:
-            yield (
-                "❌ **Invalid token.** Please check your HuggingFace token.\n\n"
-                "Get one free at [huggingface.co/settings/tokens](https://huggingface.co/settings/tokens)"
-            )
-        elif "503" in err or "loading" in err.lower():
-            yield "⏳ **Model is warming up.** Please wait ~30 seconds and try again."
-        elif "429" in err:
-            yield "⚠️ HuggingFace is busy. Please wait a few seconds and try again."
-        else:
-            yield f"❌ Error: {err}"
+        yield f"❌ 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;
+    --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; }
-
+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; }
-
+.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; }
-
 .token-box textarea, .token-box input { background:var(--surface2) !important; border:1px solid var(--border) !important; border-radius:10px !important; color:var(--text) !important; font-family:'JetBrains Mono',monospace !important; font-size:.85rem !important; }
-.token-box textarea:focus, .token-box input:focus { border-color:var(--accent) !important; box-shadow:0 0 0 3px rgba(88,166,255,.15) !important; }
-
 .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; }
-
-.token-info { background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:12px 16px; margin-top:8px; font-size:.82rem; color:var(--muted); line-height:1.7; }
-.token-info a { color:var(--accent); text-decoration:none; }
-.token-info strong { color:var(--text); }
-
-.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:.82rem; color:var(--muted); line-height:1.6; }
+.key-info { background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--accent); border-radius:10px; padding:12px 16px; margin-top:8px; font-size:.82rem; color:var(--muted); line-height:1.7; }
+.key-info a { color:var(--accent); text-decoration:none; }
+.key-info strong { color:var(--text); }
+.info-box { background:var(--surface2); border:1px solid var(--border); border-left:3px solid var(--green); border-radius:10px; padding:12px 16px; margin-top:8px; font-size:.82rem; color:var(--muted); line-height:1.6; }
 .info-box strong { color:var(--green); }
-
 footer { display:none !important; }
 """
 
@@ -204,21 +188,17 @@ EXAMPLES = [
     [None, "Differentiate f(x) = 3x³ − 2x + 7",                      "Grade 11–12 (Pre-Calculus, Statistics, Calculus)",    ""],
 ]
 
-OWNER_TOKEN_SET = bool(SPACE_TOKEN)
+OWNER_KEY_SET = bool(SPACE_GROQ_KEY)
 
 with gr.Blocks(css=CSS, title="Interactive Math Tutor") as demo:
-
     gr.HTML("""
     <div class="math-header">
         <h1>📐 Interactive Math Tutor</h1>
-        <p>Step-by-step guidance · Grade 1 to High School · Powered by open-source AI</p>
+        <p>Step-by-step guidance · Grade 1 to High School · Powered by Llama 3.1 via Groq</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>
+            <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>
     """)
@@ -226,66 +206,52 @@ with gr.Blocks(css=CSS, title="Interactive Math Tutor") as demo:
     with gr.Row(equal_height=False):
         with gr.Column(scale=4, min_width=300):
 
-            if not OWNER_TOKEN_SET:
-                gr.HTML('<div class="panel-label">🔑 HuggingFace Token (free)</div>')
-                user_token = gr.Textbox(
-                    label="", placeholder="hf_xxxxxxxxxxxxxxxxxxxx",
+            if not OWNER_KEY_SET:
+                gr.HTML('<div class="panel-label">🔑 Groq API Key (free, no card)</div>')
+                user_key = gr.Textbox(
+                    label="", placeholder="gsk_xxxxxxxxxxxxxxxxxxxx",
                     type="password", lines=1, elem_classes=["token-box"],
                 )
                 gr.HTML("""
-                <div class="token-info">
-                    <strong>Get your free token in 30 seconds:</strong><br>
-                    1. Go to <a href="https://huggingface.co/settings/tokens" target="_blank">huggingface.co/settings/tokens</a><br>
-                    2. Click <strong>New token</strong> → <strong>Read</strong> access → Copy<br>
+                <div class="key-info">
+                    <strong>Get your free key in 60 seconds:</strong><br>
+                    1. Go to <a href="https://console.groq.com/keys" target="_blank">console.groq.com/keys</a><br>
+                    2. Sign up free (no credit card) → <strong>Create API Key</strong> → Copy<br>
                     3. Paste above · Never stored, session-only
                 </div>
                 """)
             else:
-                user_token = gr.Textbox(value="", visible=False)
+                user_key = gr.Textbox(value="", visible=False)
                 gr.HTML('<div class="info-box"><strong>✅ Ready to use — no setup needed!</strong></div>')
 
             gr.HTML('<div class="panel-label" style="margin-top:16px">📎 Upload Worksheet (optional)</div>')
             image_input = gr.Image(type="pil", label="", height=180)
 
             gr.HTML('<div class="panel-label" style="margin-top:14px">✏️ Or Type Your Problem</div>')
-            text_input = gr.Textbox(
-                label="", placeholder="e.g.  Solve for x: 5x − 3 = 22", lines=3
-            )
+            text_input = gr.Textbox(label="", placeholder="e.g.  Solve for x: 5x − 3 = 22", lines=3)
 
             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=""
-            )
+            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="panel-label" style="margin-top:16px">💡 Try an example</div>')
-            gr.Examples(
-                examples=EXAMPLES,
-                inputs=[image_input, text_input, grade_dropdown, user_token],
-                label=""
-            )
+            gr.Examples(examples=EXAMPLES, inputs=[image_input, text_input, grade_dropdown, user_key], 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**.*",
+                value="*Your solution will appear here. Upload 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, user_token],
-        outputs=output_display,
-    )
+    solve_btn.click(fn=solve_math, inputs=[image_input, text_input, grade_dropdown, user_key], 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, user_token, output_display],
+        fn=lambda: (None, "", "Auto-detect from problem", "", "*Your solution will appear here.*"),
+        inputs=[], outputs=[image_input, text_input, grade_dropdown, user_key, 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)