Add dedicated Online Help tab, quick grammar accordion, and clickable examples

app.py

@@ -175,17 +175,37 @@ with gr.Blocks(title="Autodiff Mermaid Visualizer") as demo:
     btn = gr.Button("Generate Diagram", variant="primary")
 
     with gr.Tabs():
-        with gr.TabItem("Visual Diagram"):
+        with gr.TabItem("📊 Visual Diagram"):
             diagram_output = gr.HTML(label="Diagram")
             with gr.Row():
                 download_svg = gr.File(label="Download SVG (Vector)", interactive=False)
                 download_png = gr.File(label="Download PNG (Raster)", interactive=False)
-        with gr.TabItem("Mermaid Code"):
+            with gr.Accordion("💡 Quick Guide & Visual Grammar", open=False):
+                gr.Markdown(
+                    """
+### Visual Grammar Summary
+* **Blue area — Inputs**: Leaf input variables and assigned values. Pill nodes show $v(\\dots)$ and final $\\text{grad}(\\dots)$.
+* **Yellow area — Operations**: Decomposed elementary operation steps ($+, -, \\times, \\div, \\text{pow}, \\dots$).
+* **Pink trapezoids — Local derivatives**: Operation-local partial derivatives (e.g. $\\frac{\\partial (b \\cdot y)}{\\partial b} = y$).
+* **Green solid arrows — Forward computation ($f$)**: Numerical values flowing upward toward Output ($f = \\text{val}$).
+* **Purple dotted arrows — Backward computation ($g$)**: Propagated adjoint gradients flowing downward toward Inputs ($g = \\text{grad}$).
+* **Green area — Output**: Scalar target evaluation. Backward pass begins here with $g = 1$.
+* **Branching accumulation**: Gradients across multiple paths (like $x$ in $x^x$) automatically sum up to yield $\\text{grad}(x)$.
+                    """
+                )
+        with gr.TabItem("💻 Mermaid Code"):
             code_output = gr.Code(label="Mermaid Syntax", language="markdown")
+        with gr.TabItem("📖 Online Help"):
+            gr.Markdown(
+                """
+# 📖 Online Help & Documentation
+
+Welcome to the **Automatic Differentiation Visualizer**. This interactive tool decomposes mathematical expressions into computational graphs and demonstrates both **forward numerical evaluation** and **reverse-mode automatic differentiation (backpropagation)**.
+
+---
+
+### 1. Understanding the Computation Graph
 
-    with gr.Accordion("📖 Understanding the Computation Graph", open=True):
-        gr.Markdown(
-            """
 The graph shows how an expression is evaluated in the forward pass and how its gradients are calculated in the backward pass. Read the forward computation from bottom to top and the backward computation from top to bottom.
 
 * **Blue area — Inputs**: The input variables and their values. Each green node shows the value `v(...)` used in the computation and, after backpropagation, the resulting `grad(...)`.
@@ -200,8 +220,67 @@ During the forward pass, each operation receives values from below, computes its
 When an input influences the output through more than one path—as $x$ does in $x^x$—the relevant derivative contributions are combined to obtain the final `grad(x)`.
 
 *In short: green nodes and solid arrows represent values and forward computation; pink nodes and purple dotted arrows represent local derivatives and gradient propagation.*
-            """
-        )
+
+---
+
+### 2. Supported Syntax & Mathematical Operations
+
+The visualizer uses a secure, strict AST-based mathematical parser. The following operations and functions are supported:
+
+| Category | Operators / Functions | Example Syntax |
+| :--- | :--- | :--- |
+| **Arithmetic** | `+`, `-`, `*`, `/` | `x * y + 2`, `(a - b) / (c + 1)` |
+| **Powers & Roots** | `**`, `sqrt` | `x**2`, `x**y`, `sqrt(x**2 + y**2)` |
+| **Trigonometric** | `sin`, `cos`, `tan` | `sin(x) * cos(y)` |
+| **Exponential & Logarithm** | `exp`, `log`, `ln` | `exp(y) * sin(x)`, `log(x)` |
+| **Hyperbolic** | `sinh`, `cosh`, `tanh` | `tanh(w * x + b)` |
+| **Inverse Trigonometric** | `asin`, `acos`, `atan` | `atan(x / y)` |
+| **Absolute Value** | `abs` | `abs(x - y)` |
+
+> **Power Rule Handling**: Negative bases with constant powers (e.g. `x**2` at $x = -3$) evaluate cleanly using the power rule $\\frac{d}{dx} x^2 = 2x$ without complex logarithms.
+
+---
+
+### 3. Supplying Input Values
+
+Enter comma-separated assignments for independent variables in the **Input Values** textbox:
+* `x=3.0, y=4.0`
+* `x_1=1.0, x_2=2.0, x_3=3.0`
+* `w=0.5, b=-0.1, x=2.0`
+
+Any variable left unspecified defaults to `0.0`. Numeric literals inside the formula (such as `2` in `y + 2`) are automatically classified as constants in the inputs band.
+
+---
+
+### 4. Graph Modes
+
+* **Forward & Backward (Autodiff)**: Generates the full computational graph with intermediate operations, local derivative rules, adjoint flows, and final input gradients.
+* **Forward Only**: Generates only the upward forward evaluation graph ($f = \\text{val}$), ideal for initial lectures before introducing backpropagation.
+
+---
+
+### 5. Exporting Diagrams for Teaching & Slides
+
+* **Download SVG (Vector)**: Exports a clean, infinitely scalable vector graphic for LaTeX/Beamer, Google Slides, Keynote, and print.
+* **Download PNG (Raster)**: Exports a high-resolution raster graphic for web pages and documentation.
+* **Mermaid Syntax**: Copy the raw diagram markup directly into GitHub Markdown, Obsidian, or Notion.
+                """
+            )
+
+    gr.Examples(
+        examples=[
+            ["(x * x) * y + (y + 2)", "x=3.0, y=4.0", "Forward & Backward (Autodiff)"],
+            ["x * y", "x=2.0, y=3.0", "Forward & Backward (Autodiff)"],
+            ["(x + y)**2", "x=1.0, y=2.0", "Forward & Backward (Autodiff)"],
+            ["sin(x) * exp(y)", "x=1.5, y=0.5", "Forward & Backward (Autodiff)"],
+            ["((x_1 + x_2) * x_3)**2", "x_1=1.0, x_2=2.0, x_3=3.0", "Forward & Backward (Autodiff)"],
+            ["(x * x) * y + (y + 2)", "x=3.0, y=4.0", "Forward Only"],
+        ],
+        inputs=[expr_input, vals_input, mode_input],
+        outputs=[diagram_output, code_output, download_svg, download_png],
+        fn=generate_diagram,
+        cache_examples=False,
+    )
 
     btn.click(
         generate_diagram,