Update app.py

app.py

@@ -1,13 +1,10 @@
 import gradio as gr
 import requests
-import json
-import time
 
-# ─── OpenRouter API ───────────────────────────────────────────────────────────
 OPENROUTER_API_URL = "https://openrouter.ai/api/v1/chat/completions"
-FREE_MODEL = "meta-llama/llama-3.3-8b-instruct:free"  # رایگان روی OpenRouter
+FREE_MODEL = "meta-llama/llama-3.3-8b-instruct:free"
 
-def call_llm(api_key: str, messages: list, max_tokens: int = 800) -> str:
+def call_llm(api_key, messages):
     headers = {
         "Authorization": f"Bearer {api_key}",
         "Content-Type": "application/json",
@@ -17,7 +14,7 @@ def call_llm(api_key: str, messages: list, max_tokens: int = 800) -> str:
     payload = {
         "model": FREE_MODEL,
         "messages": messages,
-        "max_tokens": max_tokens,
+        "max_tokens": 1000,
         "temperature": 0.7,
     }
     resp = requests.post(OPENROUTER_API_URL, headers=headers, json=payload, timeout=60)
@@ -25,345 +22,221 @@ def call_llm(api_key: str, messages: list, max_tokens: int = 800) -> str:
     return resp.json()["choices"][0]["message"]["content"].strip()
 
 
-# ─── MultiStep Planning Logic ─────────────────────────────────────────────────
-
-STEP_PROMPTS = {
-    "decompose": """You are a task planning assistant. 
-Given the user's goal, break it down into 4-6 clear sub-tasks.
-Output ONLY a numbered list of sub-tasks, nothing else.
-Goal: {goal}""",
-
-    "analyze": """You are an expert analyst.
-For the following sub-tasks, identify dependencies, risks, and required resources.
-Sub-tasks:
-{subtasks}
-
-Output a concise analysis for each sub-task in this format:
-1. [sub-task]: dependency → X, risk → Y, resource → Z""",
-
-    "prioritize": """You are a project manager.
-Given these sub-tasks and their analysis, create an optimized execution order with time estimates.
-Sub-tasks and analysis:
-{analysis}
-
-Output an ordered execution plan with time estimates (e.g., Day 1, Hour 2, etc.)""",
-
-    "action_plan": """You are an execution specialist.
-Convert this prioritized plan into concrete, actionable steps with clear success criteria.
-Plan:
-{prioritized}
-
-Output a final action plan with:
-- Step number and name
-- Concrete actions (2-3 bullet points)
-- Success criteria""",
-
-    "summary": """You are a strategic advisor.
-Given this complete plan, write a brief executive summary (3-4 sentences) highlighting:
-- Main goal achievement path
-- Key milestones
-- Potential challenges and how the plan addresses them
-
-Full plan:
-{action_plan}"""
-}
-
-STEP_NAMES = {
-    "decompose":   "🔍 مرحله ۱: تجزیه هدف به زیروظایف",
-    "analyze":     "🧠 مرحله ۲: تحلیل وابستگی‌ها و ریسک‌ها",
-    "prioritize":  "📊 مرحله ۳: اولویت‌بندی و زمان‌بندی",
-    "action_plan": "⚙️ مرحله ۴: تبدیل به اقدامات عملی",
-    "summary":     "✅ مرحله ۵: خلاصه اجرایی نهایی",
-}
-
-
-def run_planner(goal: str, api_key: str):
-    """Generator that yields (step_name, content, all_outputs) progressively."""
+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 "❌ خطا", "لطفاً API Key از OpenRouter وارد کنید.", {}
+        yield "<div class='err'>❌ API Key وارد کنید</div>"
         return
     if not goal.strip():
-        yield "❌ خطا", "لطفاً هدف خود را وارد کنید.", {}
+        yield "<div class='err'>❌ هدف را وارد کنید</div>"
         return
 
-    outputs = {}
-    steps = ["decompose", "analyze", "prioritize", "action_plan", "summary"]
-
+    results = {}
     context = {"goal": goal}
 
-    for i, step in enumerate(steps):
-        step_display = STEP_NAMES[step]
-        yield step_display, "⏳ در حال پردازش...", outputs
+    for i, step in enumerate(STEPS):
+        # show current step as active
+        yield make_steps_html(results, i, results)
 
         try:
-            prompt = STEP_PROMPTS[step].format(**context)
-            messages = [{"role": "user", "content": prompt}]
-            result = call_llm(api_key, messages)
-
-            outputs[step_display] = result
-            context[step] = result  # feed into next step
-
-            # update context keys for next prompts
-            if step == "decompose":
-                context["subtasks"] = result
-            elif step == "analyze":
-                context["analysis"] = result
-            elif step == "prioritize":
-                context["prioritized"] = result
-            elif step == "action_plan":
-                context["action_plan"] = result
-
-            yield step_display, result, outputs
-
-        except requests.exceptions.HTTPError as e:
-            err = f"❌ خطای API: {e.response.status_code} - {e.response.text}"
-            yield step_display, err, outputs
-            return
+            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:
-            yield step_display, f"❌ خطا: {str(e)}", outputs
-            return
+            results[step["id"]] = f"❌ خطا: {str(e)}"
+            context[step["id"]] = results[step["id"]]
 
-    yield "✅ تمام مراحل کامل شد!", "برنامه کامل شما آماده است.", outputs
+        # 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
 
-# ─── Gradio UI ─────────────────────────────────────────────────────────────────
 
 CSS = """
-@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;800&family=JetBrains+Mono:wght@400;600&display=swap');
-
-:root {
-    --bg: #0a0e1a;
-    --surface: #111827;
-    --surface2: #1a2235;
-    --border: #1e2d45;
-    --accent: #00d4ff;
-    --accent2: #7c3aed;
-    --accent3: #10b981;
-    --text: #e2e8f0;
-    --text-muted: #64748b;
-    --glow: 0 0 20px rgba(0, 212, 255, 0.15);
-}
+@import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;600;800&display=swap');
 
 * { box-sizing: border-box; }
 
 body, .gradio-container {
-    background: var(--bg) !important;
+    background: #0d1117 !important;
     font-family: 'Vazirmatn', sans-serif !important;
-    color: var(--text) !important;
+    color: #e6edf3 !important;
+    direction: rtl;
 }
 
-.gradio-container {
-    max-width: 1000px !important;
-    margin: 0 auto !important;
-}
+.gradio-container { max-width: 860px !important; margin: 0 auto !important; }
 
-/* Header */
-.app-header {
+.header {
     text-align: center;
-    padding: 40px 20px 20px;
-    background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%);
-    border-bottom: 1px solid var(--border);
-    margin-bottom: 30px;
-    border-radius: 16px;
-}
-
-.app-title {
-    font-size: 2.2rem;
-    font-weight: 800;
-    background: linear-gradient(135deg, var(--accent), var(--accent2));
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin: 0 0 8px;
-    letter-spacing: -1px;
+    padding: 36px 20px 16px;
+    border-bottom: 1px solid #21262d;
+    margin-bottom: 24px;
 }
-
-.app-subtitle {
-    color: var(--text-muted);
-    font-size: 0.95rem;
-    font-weight: 300;
+.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; }
 
-/* Inputs */
-label { color: var(--text) !important; font-weight: 600 !important; }
+label { color: #e6edf3 !important; font-weight: 600 !important; font-size: 0.95rem !important; }
 
 textarea, input[type="text"], input[type="password"] {
-    background: var(--surface2) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 10px !important;
-    color: var(--text) !important;
+    background: #161b22 !important;
+    border: 1px solid #30363d !important;
+    border-radius: 8px !important;
+    color: #e6edf3 !important;
     font-family: 'Vazirmatn', sans-serif !important;
-    transition: border-color 0.2s, box-shadow 0.2s !important;
 }
-
 textarea:focus, input:focus {
-    border-color: var(--accent) !important;
-    box-shadow: var(--glow) !important;
+    border-color: #58a6ff !important;
+    box-shadow: 0 0 0 3px rgba(88,166,255,0.1) !important;
     outline: none !important;
 }
 
-/* Buttons */
 button.primary {
-    background: linear-gradient(135deg, var(--accent2), #4f46e5) !important;
-    border: none !important;
-    color: white !important;
+    background: linear-gradient(135deg, #7c3aed, #4f46e5) !important;
+    border: none !important; color: white !important;
     font-family: 'Vazirmatn', sans-serif !important;
-    font-weight: 600 !important;
-    font-size: 1rem !important;
-    padding: 12px 30px !important;
-    border-radius: 10px !important;
-    cursor: pointer !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.3) !important;
-}
-
-button.primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 25px rgba(124, 58, 237, 0.5) !important;
+    box-shadow: 0 4px 15px rgba(124,58,237,0.35) !important;
 }
+button.primary:hover { filter: brightness(1.15) !important; transform: translateY(-1px) !important; }
 
 /* Step cards */
-.step-card {
-    background: var(--surface);
-    border: 1px solid var(--border);
-    border-radius: 12px;
-    padding: 20px;
-    margin: 12px 0;
-    transition: border-color 0.3s;
+.step {
+    border-radius: 10px;
+    margin: 10px 0;
+    overflow: hidden;
+    border: 1px solid #21262d;
+    transition: all 0.3s;
 }
-
-.step-card.active {
-    border-color: var(--accent);
-    box-shadow: var(--glow);
+.step.active {
+    border-color: #58a6ff;
+    box-shadow: 0 0 0 3px rgba(88,166,255,0.12);
 }
-
-.step-card.done {
-    border-color: var(--accent3);
-    box-shadow: 0 0 15px rgba(16, 185, 129, 0.1);
+.step.done { border-color: #238636; }
+.step.pending { opacity: 0.5; }
+
+.step-header {
+    display: flex; align-items: center; gap: 10px;
+    padding: 12px 16px;
+    background: #161b22;
+    font-weight: 600; font-size: 0.95rem;
 }
-
-/* Status badge */
-.status-badge {
-    display: inline-block;
-    padding: 4px 12px;
-    border-radius: 20px;
-    font-size: 0.8rem;
-    font-weight: 600;
+.step.active .step-header { background: #1c2a3a; color: #58a6ff; }
+.step.done .step-header { background: #0f2d16; color: #3fb950; }
+
+.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;
 }
+.step-body.muted { color: #8b949e; font-style: italic; }
+.muted-title { color: #8b949e !important; }
 
-/* Accordion / Markdown output */
-.gr-accordion {
-    background: var(--surface2) !important;
-    border: 1px solid var(--border) !important;
-    border-radius: 12px !important;
-    margin: 8px 0 !important;
-}
+.step-icon { font-size: 1.1rem; min-width: 22px; }
 
-.gr-accordion > .label-wrap {
-    background: var(--surface) !important;
-    border-radius: 12px 12px 0 0 !important;
-    padding: 12px 16px !important;
-    color: var(--text) !important;
-    font-weight: 600 !important;
-}
+@keyframes spin { to { transform: rotate(360deg); } }
+.spin { display: inline-block; animation: spin 1.2s linear infinite; }
 
-/* Progress bar */
-#progress-bar-container {
-    width: 100%;
-    height: 6px;
-    background: var(--surface2);
-    border-radius: 3px;
-    margin: 20px 0;
-    overflow: hidden;
-}
-
-#progress-bar {
-    height: 100%;
-    background: linear-gradient(90deg, var(--accent2), var(--accent));
-    border-radius: 3px;
-    transition: width 0.5s ease;
-    width: 0%;
-}
-
-/* Current step indicator */
-#current-step-box {
-    background: linear-gradient(135deg, var(--surface2), var(--surface));
-    border: 1px solid var(--accent);
+.done-banner {
+    text-align: center;
+    margin-top: 20px;
+    padding: 16px;
+    background: #0f2d16;
+    border: 1px solid #238636;
     border-radius: 10px;
-    padding: 14px 20px;
-    margin: 16px 0;
-    font-size: 1rem;
-    font-weight: 600;
-    color: var(--accent);
-    box-shadow: var(--glow);
-    min-height: 50px;
+    color: #3fb950;
+    font-weight: 700;
+    font-size: 1.1rem;
 }
-
-/* Outputs area */
-#outputs-area .markdown-text,
-#outputs-area p, #outputs-area li {
-    color: var(--text) !important;
-    font-family: 'Vazirmatn', sans-serif !important;
-}
-
-#outputs-area h1, #outputs-area h2, #outputs-area h3 {
-    color: var(--accent) !important;
+.err {
+    background: #2d1515; border: 1px solid #f85149;
+    color: #f85149; padding: 14px; border-radius: 8px;
+    font-weight: 600;
 }
-
-/* Scrollbar */
-::-webkit-scrollbar { width: 6px; }
-::-webkit-scrollbar-track { background: var(--bg); }
-::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }
-::-webkit-scrollbar-thumb:hover { background: var(--accent2); }
 """
 
-def format_all_outputs(outputs: dict) -> str:
-    if not outputs:
-        return ""
-    md = ""
-    for title, content in outputs.items():
-        md += f"\n---\n## {title}\n\n{content}\n"
-    return md
-
-
-def planner_stream(goal, api_key):
-    """Stream updates to all UI components."""
-    step_output = ""
-    all_md = ""
-    progress = 0
-
-    total_steps = 5
-
-    for current_step, content, all_outputs in run_planner(goal, api_key):
-        # count done steps
-        done = len([k for k, v in all_outputs.items()])
-        progress_pct = int((done / total_steps) * 100)
-
-        progress_html = f"""
-        <div id="progress-bar-container">
-            <div id="progress-bar" style="width:{progress_pct}%"></div>
-        </div>
-        """
-        step_html = f'<div id="current-step-box">{current_step}</div>'
-
-        all_md = format_all_outputs(all_outputs)
-
-        yield step_html, progress_html, content, all_md
-
-    # Final state
-    final_html = '<div id="current-step-box" style="color:#10b981;border-color:#10b981;">✅ تمام مراحل با موفقیت کامل شد!</div>'
-    progress_html = '<div id="progress-bar-container"><div id="progress-bar" style="width:100%;background:linear-gradient(90deg,#10b981,#00d4ff)"></div></div>'
-    yield final_html, progress_html, "✅ برنامه‌ریزی کامل شد! نتایج همه مراحل در پایین قابل مشاهده است.", all_md
-
-
-# ─── Build Interface ──────────────────────────────────────────────────────────
-
 with gr.Blocks(css=CSS, title="MultiStep Task Planner") as demo:
     gr.HTML("""
-    <div class="app-header">
-        <div class="app-title">🧩 MultiStep Task Planner</div>
-        <div class="app-subtitle">
-            برنامه‌ریزی هوشمند با استدلال چندمرحله‌ای &nbsp;|&nbsp; Powered by LangChain + OpenRouter
-        </div>
+    <div class="header">
+        <h1>🧩 MultiStep Task Planner</h1>
+        <p>برنامه‌ریزی هوشمند با استدلال چندمرحله‌ای</p>
     </div>
     """)
 
@@ -371,7 +244,7 @@ with gr.Blocks(css=CSS, title="MultiStep Task Planner") as demo:
         with gr.Column(scale=2):
             goal_input = gr.Textbox(
                 label="🎯 هدف شما",
-                placeholder="مثال: یک استارتاپ SaaS راه‌اندازی کنم در حوزه آموزش آنلاین",
+                placeholder="مثال: برنامه سفر ۳ روزه به ماسال",
                 lines=3,
             )
         with gr.Column(scale=1):
@@ -384,36 +257,13 @@ with gr.Blocks(css=CSS, title="MultiStep Task Planner") as demo:
 
     run_btn = gr.Button("🚀 شروع برنامه‌ریزی", variant="primary", size="lg")
 
-    # Live progress
-    progress_display = gr.HTML('<div id="progress-bar-container"><div id="progress-bar" style="width:0%"></div></div>')
-    step_display = gr.HTML('<div id="current-step-box" style="color:var(--text-muted)">منتظر شروع...</div>')
-
-    # Current step output (live)
-    with gr.Group():
-        gr.Markdown("### 📝 خروجی مرحله جاری")
-        live_output = gr.Markdown(
-            value="",
-            elem_id="live-output"
-        )
+    output_html = gr.HTML(value="")
 
-    # All outputs accumulated
-    with gr.Accordion("📋 تمام مراحل (نتایج کامل)", open=False, elem_id="outputs-area"):
-        all_outputs_display = gr.Markdown(value="")
-
-    # Wire up
     run_btn.click(
-        fn=planner_stream,
+        fn=run_planner,
         inputs=[goal_input, api_key_input],
-        outputs=[step_display, progress_display, live_output, all_outputs_display],
+        outputs=[output_html],
     )
 
-    gr.HTML("""
-    <div style="text-align:center;padding:20px;color:#475569;font-size:0.8rem;margin-top:20px;">
-        مدل رایگان: <code style="color:#00d4ff">meta-llama/llama-3.3-8b-instruct:free</code> از OpenRouter
-        &nbsp;|&nbsp;
-        برای API Key رایگان: <a href="https://openrouter.ai" target="_blank" style="color:#7c3aed">openrouter.ai</a>
-    </div>
-    """)
-
 if __name__ == "__main__":
     demo.launch()