Update app.py

app.py

@@ -4,12 +4,12 @@ import os
 from io import BytesIO
 from huggingface_hub import InferenceClient
 
-HF_TOKEN = os.environ.get("HF_TOKEN", "")
+# Space owner can pre-set a token as a Secret named HF_TOKEN
+# If not set, users provide their own below
+SPACE_TOKEN = os.environ.get("HF_TOKEN", "")
 
-# These models are fully open, no license gate, confirmed free on hf-inference
-TEXT_MODEL   = "HuggingFaceH4/zephyr-7b-beta"
-VISION_MODEL = "Salesforce/blip2-opt-2.7b"   # for OCR/description of image
-FALLBACK_TEXT = "microsoft/Phi-3-mini-4k-instruct"
+# Mistral is open-licensed, no gate, works with any valid HF token
+TEXT_MODEL = "mistralai/Mistral-7B-Instruct-v0.3"
 
 SYSTEM_PROMPT = """You are a warm, patient math tutor for students from Grade 1 through High School.
 
@@ -53,26 +53,21 @@ def image_to_base64(pil_image):
         return None
 
 
-def get_client(model):
-    """Return an InferenceClient, with token if available."""
-    if HF_TOKEN:
-        return InferenceClient(model=model, token=HF_TOKEN, provider="hf-inference")
-    return InferenceClient(model=model, provider="hf-inference")
-
-
-def describe_image(pil_image):
-    """Use image-to-text to extract math problem text from a worksheet image."""
-    try:
-        client = get_client(VISION_MODEL)
-        b64 = image_to_base64(pil_image)
-        # Use image-to-text (captioning) to describe what's in the image
-        result = client.image_to_text(pil_image)
-        return result if result else None
-    except Exception as e:
-        return None
+def solve_math(image_input, text_input, grade_level, user_token):
+    # Decide which token to use
+    token = user_token.strip() if user_token and user_token.strip() else SPACE_TOKEN
 
+    if not token:
+        yield (
+            "🔑 **A HuggingFace token is required to use this app.**\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** → choose **Read** access → copy it\n"
+            "3. Paste it in the **HuggingFace Token** box on the left\n\n"
+            "Your token is never stored — it's only used for this session."
+        )
+        return
 
-def solve_math(image_input, text_input, grade_level):
     has_image = image_input is not None
     has_text  = text_input and text_input.strip()
 
@@ -83,19 +78,20 @@ def solve_math(image_input, text_input, grade_level):
     yield "🔍 Reading your problem..."
 
     grade_note = f"Grade level: {grade_level}."
-    problem_text = ""
-
-    # If image provided, first extract text from it
-    if has_image:
-        yield "🖼️ Extracting problem from image..."
-        description = describe_image(image_input)
-        if description:
-            problem_text = f"The worksheet image shows: {description}"
-        else:
-            problem_text = "A math problem from a worksheet image (could not auto-read — student may clarify below)"
 
-        if has_text:
-            problem_text += f"\n\nStudent's note: {text_input.strip()}"
+    # Build problem text
+    if has_image and has_text:
+        problem_text = (
+            f"I have a worksheet image with a math problem. "
+            f"Here is what it says (typed by me): {text_input.strip()}\n"
+            f"Please teach me how to solve it step by step."
+        )
+    elif has_image:
+        problem_text = (
+            "I have a worksheet image with a math problem. "
+            "Please describe what kind of problem it likely is and teach me how to solve it step by step. "
+            "If you cannot see the image content, ask me to type the problem."
+        )
     else:
         problem_text = text_input.strip()
 
@@ -103,54 +99,46 @@ def solve_math(image_input, text_input, grade_level):
 
     yield "⚡ Solving step by step..."
 
-    # Try primary model, fall back if needed
-    for model in [TEXT_MODEL, FALLBACK_TEXT]:
-        try:
-            client = get_client(model)
-            stream = client.chat.completions.create(
-                messages=[
-                    {"role": "system",  "content": SYSTEM_PROMPT},
-                    {"role": "user",    "content": full_prompt},
-                ],
-                max_tokens=1200,
-                temperature=0.3,
-                stream=True,
-            )
-
-            output = ""
-            for chunk in stream:
-                token = chunk.choices[0].delta.content or ""
-                if token:
-                    output += token
-                    yield output
-
-            if output:
-                return  # success — stop trying fallbacks
-
-            # empty response — try next model
-            yield f"⚠️ Model `{model}` returned empty. Trying backup...\n\n"
-
-        except Exception as e:
-            err = str(e)
-            if "401" in err:
-                yield (
-                    f"⚠️ Model `{model}` requires authorization. Trying backup model...\n\n"
-                )
-                continue
-            elif "503" in err or "loading" in err.lower():
-                yield "⏳ **Model is warming up.** Please wait ~30 seconds and try again."
-                return
-            elif "429" in err:
-                yield "⚠️ HuggingFace is busy. Please wait a few seconds and try again."
-                return
-            else:
-                yield f"⚠️ Model `{model}` failed: {err}\n\nTrying backup...\n\n"
-                continue
+    try:
+        client = InferenceClient(
+            model=TEXT_MODEL,
+            token=token,
+            provider="hf-inference",
+        )
+
+        stream = client.chat.completions.create(
+            messages=[
+                {"role": "system", "content": SYSTEM_PROMPT},
+                {"role": "user",   "content": full_prompt},
+            ],
+            max_tokens=1200,
+            temperature=0.3,
+            stream=True,
+        )
+
+        output = ""
+        for chunk in stream:
+            token_text = chunk.choices[0].delta.content or ""
+            if token_text:
+                output += token_text
+                yield output
+
+        if not output:
+            yield "⚠️ No response received. Please try again in a moment."
 
-    yield (
-        "❌ All models failed. This is likely a temporary HuggingFace issue.\n\n"
-        "Please try again in a minute."
-    )
+    except Exception as e:
+        err = str(e)
+        if "401" in err:
+            yield (
+                "❌ **Invalid token.** Please check your HuggingFace token and try again.\n\n"
+                "Get a free token 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}"
 
 
 CSS = """
@@ -163,6 +151,7 @@ CSS = """
     --accent:   #58a6ff;
     --accent2:  #bc8cff;
     --green:    #3fb950;
+    --red:      #f85149;
     --text:     #e6edf3;
     --muted:    #7d8590;
     --border:   #30363d;
@@ -180,6 +169,12 @@ body, .gradio-container { background: var(--bg) !important; font-family: 'Nunito
 
 .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; }
 
@@ -189,7 +184,11 @@ body, .gradio-container { background: var(--bg) !important; font-family: 'Nunito
 .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; }
+.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; }
 .info-box strong { color:var(--green); }
 
 footer { display:none !important; }
@@ -213,12 +212,15 @@ EXAMPLES = [
     [None, "Differentiate f(x) = 3x³ − 2x + 7",                      "Grade 11–12 (Pre-Calculus, Statistics, Calculus)"],
 ]
 
+# Whether space owner has pre-configured a token
+OWNER_TOKEN_SET = bool(SPACE_TOKEN)
+
 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>
+        <p>Step-by-step guidance · Grade 1 to High School · Powered by open-source AI</p>
         <div class="badge-row">
             <span class="badge">✏️ Arithmetic</span>
             <span class="badge">½ Fractions</span>
@@ -232,8 +234,36 @@ 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):
-            gr.HTML('<div class="panel-label">📎 Upload Worksheet (optional)</div>')
-            image_input = gr.Image(type="pil", label="", height=200)
+
+            # Only show token box if owner hasn't pre-set one
+            if not OWNER_TOKEN_SET:
+                gr.HTML('<div class="panel-label">🔑 HuggingFace Token (free)</div>')
+                user_token = gr.Textbox(
+                    label="",
+                    placeholder="hf_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>
+                    3. Paste it above · Never stored, session-only
+                </div>
+                """)
+            else:
+                user_token = gr.Textbox(value="", visible=False)
+                gr.HTML("""
+                <div class="info-box">
+                    <strong>✅ Ready to use — no setup needed!</strong><br>
+                    Token pre-configured by the Space owner.
+                </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(
@@ -249,18 +279,12 @@ with gr.Blocks(css=CSS, title="Interactive Math Tutor") as demo:
                 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="")
+            gr.Examples(
+                examples=[[None, p, g, ""] for (_, p, g) in EXAMPLES],
+                inputs=[image_input, text_input, grade_dropdown, user_token],
+                label=""
+            )
 
         with gr.Column(scale=6, min_width=360):
             gr.HTML('<div class="panel-label">🎓 Step-by-Step Solution</div>')
@@ -271,14 +295,14 @@ with gr.Blocks(css=CSS, title="Interactive Math Tutor") as demo:
 
     solve_btn.click(
         fn=solve_math,
-        inputs=[image_input, text_input, grade_dropdown],
+        inputs=[image_input, text_input, grade_dropdown, user_token],
         outputs=output_display,
     )
     clear_btn.click(
-        fn=lambda: (None, "", "Auto-detect from problem",
+        fn=lambda: (None, "", "Auto-detect from problem", "",
                     "*Your solution will appear here.*"),
         inputs=[],
-        outputs=[image_input, text_input, grade_dropdown, output_display],
+        outputs=[image_input, text_input, grade_dropdown, user_token, output_display],
     )
 
 if __name__ == "__main__":