Update app.py

app.py

@@ -478,4 +478,112 @@ Perfect for mid-career professionals who need **clarity, structure, and ownershi
             base_url = gr.Textbox(
                 label="Base URL (optional)",
                 value="https://api.openai.com",
-                placeholder="e.g. https://api.openai.com or your custom OpenAI
+                placeholder="e.g. https://api.openai.com or your custom OpenAI-compatible 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**  
+(just update the Base URL + Model Name accordingly).
+"""
+            )
+
+            gr.Markdown("### Step 2: Choose or Load a Sample")
+
+            sample_dropdown = gr.Dropdown(
+                label="Sample scenarios",
+                choices=list(SAMPLE_SOPS.keys()),
+                value=None,
+                info="Optional: load a pre-filled example to see how it works.",
+            )
+            load_button = gr.Button("Load Sample into Form")
+
+        with gr.Column(scale=2):
+            gr.Markdown("### Step 3: Describe the SOP you want to generate")
+
+            sop_title = gr.Textbox(
+                label="SOP Title",
+                placeholder="e.g. Volunteer Onboarding Workflow, IT Outage Response, New Program Launch",
+            )
+
+            description = gr.Textbox(
+                label="Describe the process / context",
+                placeholder="Describe what this SOP should cover, who it's for, and any constraints.",
+                lines=6,
+            )
+
+            industry = gr.Textbox(
+                label="Industry / Domain",
+                placeholder="e.g. Nonprofit / Finance / Education / Healthcare / IT",
+                value="General",
+            )
+
+            tone = gr.Dropdown(
+                label="Tone",
+                choices=[
+                    "Professional",
+                    "Executive",
+                    "Supportive",
+                    "Direct",
+                    "Compliance-focused",
+                ],
+                value="Professional",
+            )
+
+            detail_level = gr.Dropdown(
+                label="Detail Level",
+                choices=["Standard", "High detail", "Checklist-style", "Overview only"],
+                value="Standard",
+            )
+
+            generate_button = gr.Button("🚀 Generate SOP", variant="primary")
+
+    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.",
+            )
+        with gr.Column(scale=2):
+            sop_json_output = gr.Code(
+                label="Raw SOP JSON (for automation / export)",
+                language="json",
+            )
+
+    gr.Markdown("### Visual Flow of Steps")
+
+    sop_figure = gr.Plot(label="SOP Steps Infographic")
+
+    # Wire up events
+    load_button.click(
+        fn=load_sample,
+        inputs=[sample_dropdown],
+        outputs=[sop_title, description, industry],
+    )
+
+    generate_button.click(
+        fn=generate_sop_ui,
+        inputs=[
+            api_key_state,
+            api_key_input,
+            base_url,
+            model_name,
+            sop_title,
+            description,
+            industry,
+            tone,
+            detail_level,
+        ],
+        outputs=[sop_output, sop_json_output, sop_figure, api_key_state],
+    )
+
+
+if __name__ == "__main__":
+    demo.launch()