Update app.py

app.py

@@ -1,269 +1,278 @@
 import gradio as gr
-import requests
 
-OPENROUTER_API_URL = "https://openrouter.ai/api/v1/chat/completions"
-FREE_MODEL = "meta-llama/llama-3.3-8b-instruct:free"
-
-def call_llm(api_key, messages):
-    headers = {
-        "Authorization": f"Bearer {api_key}",
-        "Content-Type": "application/json",
-        "HTTP-Referer": "https://huggingface.co/spaces",
-        "X-Title": "MultiStep Task Planner"
-    }
-    payload = {
-        "model": FREE_MODEL,
-        "messages": messages,
-        "max_tokens": 1000,
-        "temperature": 0.7,
-    }
-    resp = requests.post(OPENROUTER_API_URL, headers=headers, json=payload, timeout=60)
-    resp.raise_for_status()
-    return resp.json()["choices"][0]["message"]["content"].strip()
-
-
-STEPS = [
-    {
-        "id": "decompose",
-        "title": "مرحله ۱ — تجزیه هدف به زیروظایف",
-        "prompt": "You are a task planning assistant. Given the user's goal, break it down into 5 clear sub-tasks. Output ONLY a numbered list, nothing else.\n\nGoal: {goal}"
-    },
-    {
-        "id": "analyze",
-        "title": "مرحله ۲ — تحلیل وابستگی‌ها و ریسک‌ها",
-        "prompt": "For each sub-task below, identify: dependency, risk, required resource. Be concise.\n\nSub-tasks:\n{decompose}"
-    },
-    {
-        "id": "prioritize",
-        "title": "مرحله ۳ — اولویت‌بندی و زمان‌بندی",
-        "prompt": "Given these sub-tasks and analysis, create an optimized execution order with time estimates.\n\nAnalysis:\n{analyze}"
-    },
-    {
-        "id": "actions",
-        "title": "مرحله ۴ — اقدامات عملی",
-        "prompt": "Convert this plan into concrete actionable steps with clear success criteria for each.\n\nPlan:\n{prioritize}"
-    },
-    {
-        "id": "summary",
-        "title": "مرحله ۵ — خلاصه اجرایی نهایی",
-        "prompt": "Write a brief executive summary (3-4 sentences) of the complete plan below.\n\nFull plan:\n{actions}"
-    },
-]
-
-def make_steps_html(done_steps, active_idx, results):
-    html = ""
-    for i, step in enumerate(STEPS):
-        if i < active_idx:
-            # done
-            result_text = results.get(step["id"], "")
-            html += f"""
-            <div class="step done">
-              <div class="step-header">
-                <span class="step-icon">✅</span>
-                <span class="step-title">{step['title']}</span>
-              </div>
-              <div class="step-body">{result_text.replace(chr(10), '<br>')}</div>
-            </div>"""
-        elif i == active_idx:
-            # active
-            html += f"""
-            <div class="step active">
-              <div class="step-header">
-                <span class="step-icon spin">⏳</span>
-                <span class="step-title">{step['title']}</span>
-              </div>
-              <div class="step-body muted">در حال پردازش...</div>
-            </div>"""
-        else:
-            # pending
-            html += f"""
-            <div class="step pending">
-              <div class="step-header">
-                <span class="step-icon">⬜</span>
-                <span class="step-title muted-title">{step['title']}</span>
-              </div>
-            </div>"""
-    return html
-
-
-def run_planner(goal, api_key):
-    if not api_key.strip():
-        yield "<div class='err'>❌ API Key وارد کنید</div>"
-        return
-    if not goal.strip():
-        yield "<div class='err'>❌ هدف را وارد کنید</div>"
-        return
-
-    results = {}
-    context = {"goal": goal}
-
-    for i, step in enumerate(STEPS):
-        # show current step as active
-        yield make_steps_html(results, i, results)
-
-        try:
-            prompt = step["prompt"].format(**context)
-            result = call_llm(api_key, [{"role": "user", "content": prompt}])
-            results[step["id"]] = result
-            context[step["id"]] = result
-        except Exception as e:
-            results[step["id"]] = f"❌ خطا: {str(e)}"
-            context[step["id"]] = results[step["id"]]
-
-        # show this step as done
-        yield make_steps_html(results, i + 1, results)
-
-    # all done
-    final = make_steps_html(results, len(STEPS), results)
-    final += "<div class='done-banner'>✅ برنامه‌ریزی کامل شد!</div>"
-    yield final
-
-
-CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;800&display=swap');
-
-* { box-sizing: border-box; }
-
-body, .gradio-container {
-    background: #0d1117 !important;
-    font-family: 'Vazirmatn', sans-serif !important;
-    color: #e6edf3 !important;
-    direction: rtl;
+# تمام منطق در JavaScript اجرا میشه تا از مرورگر کاربر به OpenRouter وصل بشه
+# (HuggingFace Spaces سرور openrouter.ai رو block میکنه)
+
+HTML_APP = """
+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+<meta charset="UTF-8">
+<meta name="viewport" content="width=device-width, initial-scale=1.0">
+<title>MultiStep Task Planner</title>
+<link href="https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;800&display=swap" rel="stylesheet">
+<style>
+* { box-sizing: border-box; margin: 0; padding: 0; }
+body {
+  font-family: 'Vazirmatn', sans-serif;
+  background: #0d1117;
+  color: #e6edf3;
+  min-height: 100vh;
+  padding: 30px 16px;
 }
-
-.gradio-container { max-width: 860px !important; margin: 0 auto !important; }
-
-.header {
-    text-align: center;
-    padding: 36px 20px 16px;
-    border-bottom: 1px solid #21262d;
-    margin-bottom: 24px;
+.container { max-width: 820px; margin: 0 auto; }
+
+h1 {
+  text-align: center;
+  font-size: 1.9rem; font-weight: 800;
+  background: linear-gradient(135deg, #58a6ff, #bc8cff);
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  margin-bottom: 6px;
 }
-.header h1 {
-    font-size: 2rem; font-weight: 800;
-    background: linear-gradient(135deg, #58a6ff, #bc8cff);
-    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
-    margin: 0 0 6px;
-}
-.header p { color: #8b949e; font-size: 0.9rem; margin: 0; }
+.subtitle { text-align: center; color: #8b949e; margin-bottom: 28px; font-size: 0.9rem; }
 
-label { color: #e6edf3 !important; font-weight: 600 !important; font-size: 0.95rem !important; }
+.inputs { display: grid; grid-template-columns: 2fr 1fr; gap: 14px; margin-bottom: 14px; }
+@media(max-width:600px){ .inputs { grid-template-columns: 1fr; } }
 
-textarea, input[type="text"], input[type="password"] {
-    background: #161b22 !important;
-    border: 1px solid #30363d !important;
-    border-radius: 8px !important;
-    color: #e6edf3 !important;
-    font-family: 'Vazirmatn', sans-serif !important;
+label { display: block; font-weight: 600; font-size: 0.88rem; color: #8b949e; margin-bottom: 6px; }
+input, textarea {
+  width: 100%; background: #161b22; border: 1px solid #30363d;
+  border-radius: 8px; color: #e6edf3; font-family: 'Vazirmatn', sans-serif;
+  font-size: 0.95rem; padding: 10px 12px; resize: vertical;
+  transition: border-color 0.2s, box-shadow 0.2s;
 }
-textarea:focus, input:focus {
-    border-color: #58a6ff !important;
-    box-shadow: 0 0 0 3px rgba(88,166,255,0.1) !important;
-    outline: none !important;
+input:focus, textarea:focus {
+  outline: none; border-color: #58a6ff;
+  box-shadow: 0 0 0 3px rgba(88,166,255,0.12);
 }
-
-button.primary {
-    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
-    border: none !important; color: white !important;
-    font-family: 'Vazirmatn', sans-serif !important;
-    font-weight: 700 !important; font-size: 1.05rem !important;
-    padding: 12px !important; border-radius: 8px !important;
-    transition: all 0.2s !important;
-    box-shadow: 0 4px 15px rgba(124,58,237,0.35) !important;
+input[type="password"] { letter-spacing: 2px; }
+
+button {
+  width: 100%; padding: 13px;
+  background: linear-gradient(135deg, #7c3aed, #4f46e5);
+  border: none; border-radius: 8px; color: white;
+  font-family: 'Vazirmatn', sans-serif; font-weight: 700; font-size: 1.05rem;
+  cursor: pointer; transition: all 0.2s;
+  box-shadow: 0 4px 15px rgba(124,58,237,0.35);
+  margin-bottom: 24px;
 }
-button.primary:hover { filter: brightness(1.15) !important; transform: translateY(-1px) !important; }
+button:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
+button:disabled { opacity: 0.6; cursor: not-allowed; }
 
-/* Step cards */
+/* Steps */
 .step {
-    border-radius: 10px;
-    margin: 10px 0;
-    overflow: hidden;
-    border: 1px solid #21262d;
-    transition: all 0.3s;
+  border-radius: 10px; margin: 10px 0;
+  border: 1px solid #21262d; overflow: hidden;
+  transition: border-color 0.3s, box-shadow 0.3s;
 }
-.step.active {
-    border-color: #58a6ff;
-    box-shadow: 0 0 0 3px rgba(88,166,255,0.12);
-}
-.step.done { border-color: #238636; }
-.step.pending { opacity: 0.5; }
+.step.active  { border-color: #58a6ff; box-shadow: 0 0 0 3px rgba(88,166,255,0.1); }
+.step.done    { border-color: #238636; }
+.step.pending { opacity: 0.45; }
+.step.error   { border-color: #f85149; }
 
 .step-header {
-    display: flex; align-items: center; gap: 10px;
-    padding: 12px 16px;
-    background: #161b22;
-    font-weight: 600; font-size: 0.95rem;
+  display: flex; align-items: center; gap: 10px;
+  padding: 12px 16px; font-weight: 600; font-size: 0.93rem;
 }
-.step.active .step-header { background: #1c2a3a; color: #58a6ff; }
-.step.done .step-header { background: #0f2d16; color: #3fb950; }
+.step.pending .step-header { background: #161b22; color: #8b949e; }
+.step.active  .step-header { background: #1c2a3a; color: #58a6ff; }
+.step.done    .step-header { background: #0f2d16; color: #3fb950; }
+.step.error   .step-header { background: #2d1515; color: #f85149; }
 
 .step-body {
-    padding: 14px 16px;
-    font-size: 0.88rem;
-    line-height: 1.8;
-    background: #0d1117;
-    color: #c9d1d9;
-    white-space: pre-wrap;
-    border-top: 1px solid #21262d;
+  padding: 14px 16px; font-size: 0.87rem; line-height: 1.9;
+  background: #0d1117; color: #c9d1d9;
+  border-top: 1px solid #21262d;
+  white-space: pre-wrap; display: none;
 }
-.step-body.muted { color: #8b949e; font-style: italic; }
-.muted-title { color: #8b949e !important; }
-
-.step-icon { font-size: 1.1rem; min-width: 22px; }
+.step.active  .step-body,
+.step.done    .step-body,
+.step.error   .step-body { display: block; }
+.step.active  .step-body { color: #8b949e; font-style: italic; }
 
+.icon { font-size: 1.1rem; min-width: 22px; }
 @keyframes spin { to { transform: rotate(360deg); } }
-.spin { display: inline-block; animation: spin 1.2s linear infinite; }
+.spin { display: inline-block; animation: spin 1s linear infinite; }
 
 .done-banner {
-    text-align: center;
-    margin-top: 20px;
-    padding: 16px;
-    background: #0f2d16;
-    border: 1px solid #238636;
-    border-radius: 10px;
-    color: #3fb950;
-    font-weight: 700;
-    font-size: 1.1rem;
+  text-align: center; margin-top: 20px; padding: 16px;
+  background: #0f2d16; border: 1px solid #238636;
+  border-radius: 10px; color: #3fb950; font-weight: 700; font-size: 1.05rem;
+  display: none;
 }
-.err {
-    background: #2d1515; border: 1px solid #f85149;
-    color: #f85149; padding: 14px; border-radius: 8px;
-    font-weight: 600;
+.err-msg {
+  background: #2d1515; border: 1px solid #f85149;
+  color: #f85149; padding: 14px; border-radius: 8px;
+  font-weight: 600; margin-bottom: 14px; display: none;
 }
-"""
-
-with gr.Blocks(css=CSS, title="MultiStep Task Planner") as demo:
-    gr.HTML("""
-    <div class="header">
-        <h1>🧩 MultiStep Task Planner</h1>
-        <p>برنامه‌ریزی هوشمند با استدلال چندمرحله‌ای</p>
+</style>
+</head>
+<body>
+<div class="container">
+  <h1>🧩 MultiStep Task Planner</h1>
+  <p class="subtitle">برنامه‌ریزی هوشمند با استدلال چندمرحله‌ای</p>
+
+  <div class="inputs">
+    <div>
+      <label>🎯 هدف شما</label>
+      <textarea id="goal" rows="3" placeholder="مثال: برنامه سفر ۳ روزه به ماسال"></textarea>
+    </div>
+    <div>
+      <label>🔑 OpenRouter API Key</label>
+      <input type="password" id="apikey" placeholder="sk-or-v1-...">
     </div>
-    """)
+  </div>
+
+  <button id="startBtn" onclick="startPlanning()">🚀 شروع برنامه‌ریزی</button>
+
+  <div class="err-msg" id="errMsg"></div>
+
+  <div id="steps"></div>
+  <div class="done-banner" id="doneBanner">✅ برنامه‌ریزی کامل شد!</div>
+</div>
+
+<script>
+const STEPS = [
+  {
+    id: "decompose",
+    title: "مرحله ۱ — تجزیه هدف به زیروظایف",
+    getPrompt: (ctx) => `You are a task planning assistant. Break down this goal into exactly 5 clear sub-tasks. Output ONLY a numbered list, no extra text.\\n\\nGoal: ${ctx.goal}`
+  },
+  {
+    id: "analyze",
+    title: "مرحله ۲ — تحلیل وابستگی‌ها و ریسک‌ها",
+    getPrompt: (ctx) => `For each sub-task below, write one line: "N. [task]: dependency=X, risk=Y, resource=Z"\\n\\nSub-tasks:\\n${ctx.decompose}`
+  },
+  {
+    id: "prioritize",
+    title: "مرحله ۳ — اولویت‌بندی و زمان‌بندی",
+    getPrompt: (ctx) => `Based on this analysis, create an optimized execution order with time estimates (Day/Hour).\\n\\nAnalysis:\\n${ctx.analyze}`
+  },
+  {
+    id: "actions",
+    title: "مرحله ۴ — اقدامات عملی و معیار موفقیت",
+    getPrompt: (ctx) => `Convert this plan into concrete action steps, each with 2 bullet points and a success criteria.\\n\\nPlan:\\n${ctx.prioritize}`
+  },
+  {
+    id: "summary",
+    title: "مرحله ۵ — خلاصه اجرایی نهایی",
+    getPrompt: (ctx) => `Write a 3-4 sentence executive summary of this complete plan.\\n\\nFull plan:\\n${ctx.actions}`
+  },
+];
+
+function renderSteps(activeIdx, results) {
+  const container = document.getElementById("steps");
+  container.innerHTML = "";
+  STEPS.forEach((step, i) => {
+    const div = document.createElement("div");
+    let cls = "step ";
+    let icon = "⬜";
+    let bodyContent = "";
+
+    if (i < activeIdx) {
+      cls += "done"; icon = "✅";
+      bodyContent = results[step.id] || "";
+    } else if (i === activeIdx) {
+      cls += "active"; icon = '<span class="spin">⏳</span>';
+      bodyContent = "در حال پردازش...";
+    } else {
+      cls += "pending"; icon = "⬜";
+    }
+
+    div.className = cls;
+    div.innerHTML = `
+      <div class="step-header">
+        <span class="icon">${icon}</span>
+        <span>${step.title}</span>
+      </div>
+      <div class="step-body">${bodyContent}</div>
+    `;
+    container.appendChild(div);
+  });
+}
+
+function showError(msg) {
+  const el = document.getElementById("errMsg");
+  el.textContent = "❌ " + msg;
+  el.style.display = "block";
+}
 
-    with gr.Row():
-        with gr.Column(scale=2):
-            goal_input = gr.Textbox(
-                label="🎯 هدف شما",
-                placeholder="مثال: برنامه سفر ۳ روزه به ماسال",
-                lines=3,
-            )
-        with gr.Column(scale=1):
-            api_key_input = gr.Textbox(
-                label="🔑 OpenRouter API Key",
-                placeholder="sk-or-v1-...",
-                type="password",
-                lines=3,
-            )
+async function callLLM(apiKey, prompt) {
+  const resp = await fetch("https://openrouter.ai/api/v1/chat/completions", {
+    method: "POST",
+    headers: {
+      "Authorization": "Bearer " + apiKey,
+      "Content-Type": "application/json",
+      "HTTP-Referer": "https://huggingface.co/spaces",
+      "X-Title": "MultiStep Task Planner"
+    },
+    body: JSON.stringify({
+      model: "meta-llama/llama-3.3-8b-instruct:free",
+      messages: [{ role: "user", content: prompt }],
+      max_tokens: 1000,
+      temperature: 0.7
+    })
+  });
+  if (!resp.ok) {
+    const err = await resp.text();
+    throw new Error(`${resp.status}: ${err}`);
+  }
+  const data = await resp.json();
+  return data.choices[0].message.content.trim();
+}
 
-    run_btn = gr.Button("🚀 شروع برنامه‌ریزی", variant="primary", size="lg")
+async function startPlanning() {
+  const goal = document.getElementById("goal").value.trim();
+  const apiKey = document.getElementById("apikey").value.trim();
+  const btn = document.getElementById("startBtn");
+  const errMsg = document.getElementById("errMsg");
+  const doneBanner = document.getElementById("doneBanner");
+
+  errMsg.style.display = "none";
+  doneBanner.style.display = "none";
+
+  if (!goal) { showError("هدف را وارد کنید"); return; }
+  if (!apiKey) { showError("API Key را وارد کنید"); return; }
+
+  btn.disabled = true;
+  btn.textContent = "⏳ در حال برنامه‌ریزی...";
+
+  const results = {};
+  const ctx = { goal };
+
+  for (let i = 0; i < STEPS.length; i++) {
+    renderSteps(i, results);
+    try {
+      const prompt = STEPS[i].getPrompt(ctx);
+      const result = await callLLM(apiKey, prompt);
+      results[STEPS[i].id] = result;
+      ctx[STEPS[i].id] = result;
+    } catch (e) {
+      results[STEPS[i].id] = "خطا: " + e.message;
+      ctx[STEPS[i].id] = "";
+      // mark as error
+      const stepDivs = document.getElementById("steps").children;
+      if (stepDivs[i]) {
+        stepDivs[i].className = "step error";
+        stepDivs[i].querySelector(".step-header").innerHTML =
+          `<span class="icon">❌</span><span>${STEPS[i].title}</span>`;
+        stepDivs[i].querySelector(".step-body").textContent = results[STEPS[i].id];
+      }
+    }
+    renderSteps(i + 1, results);
+  }
 
-    output_html = gr.HTML(value="")
+  doneBanner.style.display = "block";
+  btn.disabled = false;
+  btn.textContent = "🔄 برنامه‌ریزی مجدد";
+}
+</script>
+</body>
+</html>
+"""
 
-    run_btn.click(
-        fn=run_planner,
-        inputs=[goal_input, api_key_input],
-        outputs=[output_html],
-    )
+with gr.Blocks(title="MultiStep Task Planner") as demo:
+    gr.HTML(HTML_APP)
 
 if __name__ == "__main__":
     demo.launch()