Update app.py

app.py

@@ -18,18 +18,14 @@ def call_chat_completion(
     model: str,
     system_prompt: str,
     user_prompt: str,
-    temperature: float = 0.3,
     max_completion_tokens: int = 1800,
 ) -> str:
     """
-    Generic OpenAI-compatible chat completion call using HTTP.
+    OpenAI-compatible ChatCompletion caller.
 
-    Primary path:
-      - Uses `max_completion_tokens` (new OpenAI-style param).
-
-    Fallback:
-      - If the provider complains that `max_completion_tokens` is unsupported,
-        retry once using legacy `max_tokens` instead.
+    - Uses `max_completion_tokens` (new OpenAI spec).
+    - Falls back to `max_tokens` for providers that still expect it.
+    - No temperature param (some models only allow default).
     """
     if not api_key:
         raise ValueError("API key is required.")
@@ -44,27 +40,29 @@ def call_chat_completion(
         "Content-Type": "application/json",
     }
 
-    def _payload(use_new_param: bool) -> Dict[str, Any]:
-        base = {
+    # Primary payload using max_completion_tokens
+    new_payload = {
+        "model": model,
+        "messages": [
+            {"role": "system", "content": system_prompt},
+            {"role": "user", "content": user_prompt},
+        ],
+        "max_completion_tokens": max_completion_tokens,
+    }
+
+    resp = requests.post(url, headers=headers, json=new_payload, timeout=60)
+
+    # If provider doesn't support `max_completion_tokens`, try legacy `max_tokens`
+    if resp.status_code == 400 and "max_completion_tokens" in resp.text:
+        legacy_payload = {
             "model": model,
-            "temperature": temperature,
             "messages": [
                 {"role": "system", "content": system_prompt},
                 {"role": "user", "content": user_prompt},
             ],
+            "max_tokens": max_completion_tokens,
         }
-        if use_new_param:
-            base["max_completion_tokens"] = max_completion_tokens
-        else:
-            base["max_tokens"] = max_completion_tokens
-        return base
-
-    # First attempt: new param
-    resp = requests.post(url, headers=headers, json=_payload(True), timeout=60)
-
-    # If provider doesn't support max_completion_tokens, fallback to max_tokens
-    if resp.status_code == 400 and "max_completion_tokens" in resp.text:
-        resp = requests.post(url, headers=headers, json=_payload(False), timeout=60)
+        resp = requests.post(url, headers=headers, json=legacy_payload, timeout=60)
 
     if resp.status_code != 200:
         raise RuntimeError(
@@ -87,12 +85,7 @@ You are an expert operations consultant and technical writer.
 
 You generate clear, professional, implementation-ready Standard Operating Procedures (SOPs).
 
-The user will give:
-- A title or short description of the process
-- Context about the organization or scenario
-- Optional industry, tone, and detail level
-
-You MUST respond strictly as JSON, with no extra commentary, using this schema:
+You MUST respond strictly as JSON using this schema:
 
 {
   "title": "string",
@@ -125,12 +118,6 @@ You MUST respond strictly as JSON, with no extra commentary, using this schema:
     "last_updated": "string"
   }
 }
-
-Constraints:
-- Make steps specific, observable, and sequential.
-- Use inclusive, professional language.
-- Assume this will be used by mid-career professionals.
-- Keep lists between 3 and 8 items unless the user asks for more.
 """
 
 
@@ -141,117 +128,89 @@ def build_user_prompt(
     tone: str,
     detail_level: str,
 ) -> str:
-    pieces = [
-        f"Process title: {sop_title or 'Untitled SOP'}",
-        f"Context / description: {description or 'N/A'}",
-        f"Industry: {industry or 'General'}",
-        f"Tone: {tone or 'Professional'}",
-        f"Detail level: {detail_level or 'Standard'}",
-        "Audience: Mid-career professionals who already understand basic workplace concepts but need clear structure and ownership.",
-    ]
-    return "\n".join(pieces)
+    return f"""
+Process Title: {sop_title or "Untitled SOP"}
+Context: {description or "N/A"}
+Industry: {industry or "General"}
+Tone: {tone or "Professional"}
+Detail Level: {detail_level or "Standard"}
+
+Audience: Mid-career professionals.
+"""
 
 
 def parse_sop_json(raw_text: str) -> Dict[str, Any]:
-    """
-    Attempt to parse the LLM output as JSON.
-    Also handles cases where the model wrapped the JSON in code fences.
-    """
-    text = raw_text.strip()
-
-    # Strip markdown code fences if present
-    if text.startswith("```"):
-        parts = text.split("```")
-        # Try to find part containing '{'
-        candidates = [p for p in parts if "{" in p]
-        if candidates:
-            text = candidates[0]
-        else:
-            text = parts[-1]
-    text = text.strip()
+    """Clean model output and extract JSON."""
+    txt = raw_text.strip()
+
+    # Strip markdown fences if present
+    if txt.startswith("```"):
+        parts = txt.split("```")
+        txt = next((p for p in parts if "{" in p), parts[-1])
 
     # Extract JSON between first '{' and last '}'
-    first_brace = text.find("{")
-    last_brace = text.rfind("}")
-    if first_brace != -1 and last_brace != -1:
-        text = text[first_brace : last_brace + 1]
+    first = txt.find("{")
+    last = txt.rfind("}")
+    if first != -1 and last != -1:
+        txt = txt[first:last + 1]
 
-    return json.loads(text)
+    return json.loads(txt)
 
 
 def sop_to_markdown(sop: Dict[str, Any]) -> str:
-    """Render the SOP JSON into a readable Markdown document."""
+    """Format JSON SOP into Markdown."""
 
-    def bullet_list(items: List[str]) -> str:
+    def bullet(items: List[str]) -> str:
         if not items:
             return "_None specified._"
         return "\n".join(f"- {i}" for i in items)
 
-    md = []
+    md: List[str] = []
 
     md.append(f"# {sop.get('title', 'Standard Operating Procedure')}\n")
 
     md.append("## 1. Purpose")
-    md.append(sop.get("purpose", "_No purpose provided._"))
+    md.append(sop.get("purpose", "N/A"))
 
     md.append("\n## 2. Scope")
-    md.append(sop.get("scope", "_No scope provided._"))
+    md.append(sop.get("scope", "N/A"))
 
-    definitions = sop.get("definitions", [])
     md.append("\n## 3. Definitions")
-    md.append(bullet_list(definitions))
+    md.append(bullet(sop.get("definitions", [])))
 
-    roles = sop.get("roles", [])
     md.append("\n## 4. Roles & Responsibilities")
-    if roles:
-        for role in roles:
-            name = role.get("name", "Role")
-            responsibilities = role.get("responsibilities", [])
-            md.append(f"### {name}")
-            md.append(bullet_list(responsibilities))
-    else:
-        md.append("_No roles specified._")
-
-    prereq = sop.get("prerequisites", [])
+    for r in sop.get("roles", []):
+        name = r.get("name", "Role")
+        md.append(f"### {name}")
+        md.append(bullet(r.get("responsibilities", [])))
+
     md.append("\n## 5. Prerequisites")
-    md.append(bullet_list(prereq))
+    md.append(bullet(sop.get("prerequisites", [])))
 
-    steps = sop.get("steps", [])
     md.append("\n## 6. Procedure (Step-by-Step)")
-    if steps:
-        for step in steps:
-            num = step.get("step_number", "?")
-            title = step.get("title", "Step")
-            owner = step.get("owner_role", "Owner")
-            desc = step.get("description", "")
-            inputs = step.get("inputs", [])
-            outputs = step.get("outputs", [])
-            md.append(f"### Step {num}: {title}")
-            md.append(f"**Owner:** {owner}")
-            md.append(desc or "_No description provided._")
-            if inputs:
-                md.append("**Inputs:**")
-                md.append(bullet_list(inputs))
-            if outputs:
-                md.append("**Outputs:**")
-                md.append(bullet_list(outputs))
-    else:
-        md.append("_No steps provided._")
+    for step in sop.get("steps", []):
+        md.append(f"### Step {step.get('step_number', '?')}: {step.get('title', 'Step')}")
+        md.append(f"**Owner:** {step.get('owner_role', 'N/A')}")
+        md.append(step.get("description", ""))
+        md.append("**Inputs:**")
+        md.append(bullet(step.get("inputs", [])))
+        md.append("**Outputs:**")
+        md.append(bullet(step.get("outputs", [])))
 
     md.append("\n## 7. Escalation")
-    md.append(bullet_list(sop.get("escalation", [])))
+    md.append(bullet(sop.get("escalation", [])))
 
     md.append("\n## 8. Metrics & Success Criteria")
-    md.append(bullet_list(sop.get("metrics", [])))
+    md.append(bullet(sop.get("metrics", [])))
 
     md.append("\n## 9. Risks & Controls")
-    md.append(bullet_list(sop.get("risks", [])))
+    md.append(bullet(sop.get("risks", [])))
 
-    versioning = sop.get("versioning", {})
+    v = sop.get("versioning", {})
     md.append("\n## 10. Version Control")
-    md.append(f"- Version: {versioning.get('version', '1.0')}")
-    md.append(f"- Owner: {versioning.get('owner', 'Not specified')}")
-    md.append(f"- Last Updated: {versioning.get('last_updated', 'Not specified')}")
+    md.append(f"- Version: {v.get('version', '1.0')}")
+    md.append(f"- Owner: {v.get('owner', 'N/A')}")
+    md.append(f"- Last Updated: {v.get('last_updated', 'N/A')}")
 
     return "\n\n".join(md)
 
@@ -262,12 +221,19 @@ def sop_to_markdown(sop: Dict[str, Any]) -> str:
 
 def create_sop_steps_figure(sop: Dict[str, Any]) -> Figure:
     """
-    Create a simple infographic-like matplotlib figure showing the SOP steps
-    as a vertical flow with numbered boxes.
+    Create a clearer, more readable infographic-style figure
+    showing the SOP steps as stacked cards.
+
+    - Large, legible fonts
+    - Number block on the left
+    - Wrapped description text
     """
+
     steps = sop.get("steps", [])
+
+    # Empty state
     if not steps:
-        fig, ax = plt.subplots(figsize=(6, 2))
+        fig, ax = plt.subplots(figsize=(7, 2))
         ax.text(
             0.5,
             0.5,
@@ -275,87 +241,119 @@ def create_sop_steps_figure(sop: Dict[str, Any]) -> Figure:
             ha="center",
             va="center",
             fontsize=12,
-            wrap=True,
         )
         ax.axis("off")
         fig.tight_layout()
         return fig
 
     n = len(steps)
-    fig_height = max(3, n * 1.0)
-    fig, ax = plt.subplots(figsize=(7, fig_height))
 
-    y_positions = list(reversed(range(n)))  # top to bottom
+    # Figure height scales with number of steps (capped)
+    fig_height = min(14, max(4, 1.6 * n))
+    fig, ax = plt.subplots(figsize=(9, fig_height))
 
-    for idx, (step, y) in enumerate(zip(steps, y_positions)):
-        num = step.get("step_number", idx + 1)
-        title = step.get("title", f"Step {num}")
+    # Coordinate system: y from 0 (bottom) to n (top)
+    ax.set_xlim(0, 1)
+    ax.set_ylim(0, n)
+
+    card_top_margin = 0.25
+    card_bottom_margin = 0.25
+    card_height = 1 - (card_top_margin + card_bottom_margin)
+
+    for idx, step in enumerate(steps):
+        # y coordinate from top down
+        row_top = n - idx - card_top_margin
+        row_bottom = row_top - card_height
+        center_y = (row_top + row_bottom) / 2
+
+        step_number = step.get("step_number", idx + 1)
+        title = step.get("title", f"Step {step_number}")
         owner = step.get("owner_role", "")
         desc = step.get("description", "")
 
-        desc_short = textwrap.shorten(desc, width=120, placeholder="...")
+        # Wrap description into multiple lines
+        desc_wrapped = textwrap.fill(desc, width=80)
+
+        # Card rectangle (full width)
+        card_x0 = 0.03
+        card_x1 = 0.97
+        card_width = card_x1 - card_x0
+
+        ax.add_patch(
+            plt.Rectangle(
+                (card_x0, row_bottom),
+                card_width,
+                card_height,
+                fill=False,
+                linewidth=1.6,
+            )
+        )
 
-        x0, x1 = 0.05, 0.95
-        y0, y1 = y - 0.3, y + 0.3
+        # Number block on the left
+        num_block_width = 0.08
+        num_block_x0 = card_x0
+        num_block_y0 = row_bottom
+        num_block_height = card_height
 
-        # Card rectangle (using default styles)
         ax.add_patch(
             plt.Rectangle(
-                (x0, y0),
-                x1 - x0,
-                y1 - y0,
+                (num_block_x0, num_block_y0),
+                num_block_width,
+                num_block_height,
                 fill=False,
-                linewidth=1.5,
-                linestyle="-",
+                linewidth=1.4,
             )
         )
 
-        # Step number
         ax.text(
-            x0 + 0.02,
-            y,
-            f"{num}",
+            num_block_x0 + num_block_width / 2,
+            center_y,
+            str(step_number),
+            ha="center",
             va="center",
-            ha="left",
-            fontsize=11,
+            fontsize=12,
             fontweight="bold",
         )
 
+        # Text block (title, owner, description)
+        text_x0 = num_block_x0 + num_block_width + 0.02
+
         # Title
         ax.text(
-            x0 + 0.12,
-            y + 0.15,
+            text_x0,
+            row_top - 0.08,
             title,
-            va="center",
             ha="left",
-            fontsize=11,
+            va="top",
+            fontsize=12,
             fontweight="bold",
         )
 
-        # Owner
+        # Owner line (optional)
         if owner:
             ax.text(
-                x0 + 0.12,
-                y,
+                text_x0,
+                row_top - 0.28,
                 f"Owner: {owner}",
-                va="center",
                 ha="left",
-                fontsize=9,
+                va="top",
+                fontsize=10,
                 style="italic",
             )
+            desc_y = row_top - 0.48
+        else:
+            desc_y = row_top - 0.3
 
-        # Description
+        # Description (wrapped)
         ax.text(
-            x0 + 0.12,
-            y - 0.18,
-            desc_short,
-            va="top",
+            text_x0,
+            desc_y,
+            desc_wrapped,
             ha="left",
+            va="top",
             fontsize=9,
-            wrap=True,
         )
 
-    ax.set_ylim(-1, n)
     ax.axis("off")
     fig.tight_layout()
     return fig
@@ -365,7 +363,7 @@ def create_sop_steps_figure(sop: Dict[str, Any]) -> Figure:
 # SAMPLE PRESETS
 # -----------------------------
 
-SAMPLE_SOPS = {
+SAMPLE_SOPS: Dict[str, Dict[str, str]] = {
     "Volunteer Onboarding Workflow": {
         "title": "Volunteer Onboarding Workflow",
         "description": (
@@ -374,18 +372,18 @@ SAMPLE_SOPS = {
         ),
         "industry": "Nonprofit / Youth Development",
     },
-    "New Employee Remote Onboarding": {
+    "Remote Employee Onboarding": {
         "title": "Remote Employee Onboarding",
         "description": (
-            "Design a remote onboarding SOP for new employees in a hybrid org, including "
-            "IT setup, HR paperwork, culture onboarding, and 30-60-90 day milestones."
+            "Design a remote onboarding SOP for new employees in a hybrid org, "
+            "covering IT setup, HR paperwork, culture onboarding, and 30-60-90 day milestones."
         ),
         "industry": "General / HR",
     },
-    "Incident Response - IT Outage": {
+    "IT Outage Incident Response": {
         "title": "IT Outage Incident Response",
         "description": (
-            "An SOP for responding to major IT outages affecting multiple sites, "
+            "Create an SOP for responding to major IT outages affecting multiple sites, "
             "including triage, communication, escalation, and post-mortem."
         ),
         "industry": "IT / Operations",
@@ -396,77 +394,69 @@ SAMPLE_SOPS = {
 def load_sample(sample_name: str) -> Tuple[str, str, str]:
     if not sample_name or sample_name not in SAMPLE_SOPS:
         return "", "", "General"
-    sample = SAMPLE_SOPS[sample_name]
-    return (
-        sample.get("title", ""),
-        sample.get("description", ""),
-        sample.get("industry", "General"),
-    )
+    s = SAMPLE_SOPS[sample_name]
+    return s["title"], s["description"], s["industry"]
 
 
 # -----------------------------
-# MAIN GENERATION FUNCTION (UI HOOK)
+# MAIN HANDLER (CALLED BY UI)
 # -----------------------------
 
 def generate_sop_ui(
     api_key_state: str,
     api_key_input: str,
     base_url: str,
-    model_name: str,
+    model: str,
     sop_title: str,
     description: str,
     industry: str,
     tone: str,
     detail_level: str,
 ) -> Tuple[str, str, Figure, str]:
-    """
-    Main Gradio handler:
-    - Picks API key (state vs input)
-    - Calls LLM
-    - Parses JSON
-    - Returns Markdown SOP, raw JSON, figure, and updated key state
-    """
+    """Gradio event handler: generate SOP + JSON + figure."""
     api_key = api_key_input or api_key_state
     if not api_key:
         return (
-            "⚠️ Please enter an API key in the settings panel.",
+            "⚠️ Please enter an API key.",
             "",
             create_sop_steps_figure({"steps": []}),
             api_key_state,
         )
 
-    if not model_name:
-        model_name = "gpt-4.1-mini"
+    if not model:
+        model = "gpt-4.1-mini"
 
     user_prompt = build_user_prompt(sop_title, description, industry, tone, detail_level)
 
     try:
-        raw_response = call_chat_completion(
+        raw = call_chat_completion(
             api_key=api_key,
             base_url=base_url,
-            model=model_name,
+            model=model,
             system_prompt=SOP_SYSTEM_PROMPT,
             user_prompt=user_prompt,
-            temperature=0.25,
             max_completion_tokens=1800,
         )
 
-        sop_json = parse_sop_json(raw_response)
-        sop_md = sop_to_markdown(sop_json)
-        fig = create_sop_steps_figure(sop_json)
-        pretty_json = json.dumps(sop_json, indent=2, ensure_ascii=False)
+        sop = parse_sop_json(raw)
+        md = sop_to_markdown(sop)
+        fig = create_sop_steps_figure(sop)
+        json_out = json.dumps(sop, indent=2, ensure_ascii=False)
 
-        # Save key in state for this session only
-        return sop_md, pretty_json, fig, api_key
+        # Save key into session state
+        return md, json_out, fig, api_key
 
     except Exception as e:
-        error_msg = f"❌ Error generating SOP:\n\n{e}"
-        fig = create_sop_steps_figure({"steps": []})
-        return error_msg, "", fig, api_key_state
+        return (
+            f"❌ Error generating SOP:\n\n{e}",
+            "",
+            create_sop_steps_figure({"steps": []}),
+            api_key_state,
+        )
 
 
 # -----------------------------
-# BUILD GRADIO APP
+# GRADIO UI
 # -----------------------------
 
 with gr.Blocks(title="ZEN Simple SOP Builder") as demo:
@@ -481,7 +471,7 @@ Perfect for mid-career professionals who need clarity, structure, and ownership
 2. Describe the process you want to document  
 3. Generate a full SOP + visual flow of the steps
 
-> Your API key is stored only in your session state and is not logged to disk.
+> Your API key stays in this browser session and is not logged to disk.
 """
     )
 
@@ -489,70 +479,58 @@ Perfect for mid-career professionals who need clarity, structure, and ownership
 
     with gr.Row():
         with gr.Column(scale=1):
-            gr.Markdown("### Step 1: API & Model Settings")
+            gr.Markdown("### Step 1 — API & Model Settings")
 
             api_key_input = gr.Textbox(
                 label="LLM API Key",
                 placeholder="Enter your API key (OpenAI or compatible provider)",
                 type="password",
             )
+
             base_url = gr.Textbox(
-                label="Base URL (optional)",
+                label="Base URL",
                 value="https://api.openai.com",
-                placeholder="e.g. https://api.openai.com or your custom OpenAI-compatible endpoint",
+                placeholder="e.g. https://api.openai.com or your custom endpoint",
             )
+
             model_name = gr.Textbox(
                 label="Model Name",
                 value="gpt-4.1-mini",
                 placeholder="e.g. gpt-4.1, gpt-4o, deepseek-chat, mistral-large, etc.",
             )
 
-            gr.Markdown(
-                """
-You can use any **OpenAI-compatible** provider  
-by adjusting the Base URL and Model Name.
-"""
-            )
-
-            gr.Markdown("### Step 2: Choose or Load a Sample")
-
+            gr.Markdown("### Step 2 — Try a Sample Scenario")
             sample_dropdown = gr.Dropdown(
-                label="Sample scenarios",
+                label="Sample SOPs",
                 choices=list(SAMPLE_SOPS.keys()),
                 value=None,
-                info="Optional: load a pre-filled example to see how it works.",
+                info="Optional: load a predefined example.",
             )
             load_button = gr.Button("Load Sample into Form")
 
         with gr.Column(scale=2):
-            gr.Markdown("### Step 3: Describe the SOP you want to generate")
+            gr.Markdown("### Step 3 — Describe Your SOP")
 
             sop_title = gr.Textbox(
                 label="SOP Title",
-                placeholder="e.g. Volunteer Onboarding Workflow, IT Outage Response, New Program Launch",
+                placeholder="e.g. Volunteer Onboarding Workflow, IT Outage Response",
             )
 
             description = gr.Textbox(
                 label="Describe the process / context",
-                placeholder="Describe what this SOP should cover, who it's for, and any constraints.",
+                placeholder="What should this SOP cover? Who is it for? Any constraints?",
                 lines=6,
             )
 
             industry = gr.Textbox(
                 label="Industry / Domain",
-                placeholder="e.g. Nonprofit / Finance / Education / Healthcare / IT",
                 value="General",
+                placeholder="e.g. Nonprofit, HR, Education, Healthcare, IT",
             )
 
             tone = gr.Dropdown(
                 label="Tone",
-                choices=[
-                    "Professional",
-                    "Executive",
-                    "Supportive",
-                    "Direct",
-                    "Compliance-focused",
-                ],
+                choices=["Professional", "Executive", "Supportive", "Direct", "Compliance-focused"],
                 value="Professional",
             )
 
@@ -564,13 +542,13 @@ by adjusting the Base URL and Model Name.
 
             generate_button = gr.Button("🚀 Generate SOP", variant="primary")
 
-    gr.Markdown("### Step 4: Results")
+    gr.Markdown("### Step 4 — Results")
 
     with gr.Row():
         with gr.Column(scale=3):
             sop_output = gr.Markdown(
                 label="Generated SOP",
-                value="SOP output will appear here.",
+                value="Your SOP will appear here.",
             )
         with gr.Column(scale=2):
             sop_json_output = gr.Code(
@@ -579,8 +557,7 @@ by adjusting the Base URL and Model Name.
             )
 
     gr.Markdown("### Visual Flow of Steps")
-
-    sop_figure = gr.Plot(label="SOP Steps Infographic")
+    sop_figure = gr.Plot(label="SOP Steps Diagram")
 
     # Wire up events
     load_button.click(