graph.py

import numpy as np
import matplotlib.pyplot as plt
import gradio as gr


def plot_secant(h):
    x = np.linspace(-1, 2, 400)
    y = x**2
    m = (h**2 - 0) / h
    fig, axs = plt.subplots(1, 2, figsize=(8, 4))
    for ax in axs:
        ax.set_xlim(-1, 2); ax.set_ylim(-1, 4)
        ax.set_xticks(np.arange(-1, 3, 1)); ax.set_yticks(np.arange(-1, 5, 1))
        ax.grid(True, linestyle='--', linewidth=0.5, color='lightgray')
        ax.spines['top'].set_visible(False); ax.spines['right'].set_visible(False)
    axs[0].plot(x, y, color='black'); axs[0].plot([0, h], [0, h**2], color='red', linewidth=2)
    axs[0].scatter([0, h], [0, h**2], color='red', zorder=5)
    axs[1].plot(x, m * x, color='red', linewidth=2)
    plt.tight_layout(); return fig

def plot_tangent(x0):
    x = np.linspace(-1, 2, 400); y = x**2; m = 2 * x0; y0 = x0**2
    fig, axs = plt.subplots(1, 2, figsize=(8, 4))
    for ax in axs:
        ax.set_xlim(-1, 2); ax.set_ylim(-1, 4)
        ax.set_xticks(np.arange(-1, 3, 1)); ax.set_yticks(np.arange(-1, 5, 1))
        ax.grid(True, linestyle='--', linewidth=0.5, color='lightgray')
        ax.spines['top'].set_visible(False); ax.spines['right'].set_visible(False)
    axs[0].plot(x, y, color='black'); axs[0].plot(x, m*(x-x0)+y0, color='red', linewidth=2)
    axs[0].scatter([x0], [y0], color='red', zorder=5); axs[1].plot(x, 2*x, color='black')
    axs[1].scatter([x0], [m], color='red', zorder=5)
    plt.tight_layout(); return fig

def plot_gradient_descent(lr, init_x, steps):
    n = int(steps); path=[init_x]
    for _ in range(n): path.append(path[-1] - lr*2*path[-1])
    xv = np.array(path)
    fig, axs = plt.subplots(1, 2, figsize=(8, 4))
    x_plot = np.linspace(-2, 2, 400); axs[0].plot(x_plot, x_plot**2, color='black')
    axs[0].plot(xv, xv**2, marker='o', color='red', linewidth=2)
    for i in range(n): axs[0].annotate('', xy=(xv[i+1], xv[i+1]**2), xytext=(xv[i], xv[i]**2), arrowprops=dict(arrowstyle='->', color='red'))
    axs[0].set_xlim(-2, 2); axs[0].set_ylim(-0.5, 5); axs[0].set_title('Gradient Descent Path')
    axs[0].grid(True, linestyle='--', linewidth=0.5, color='lightgray')
    axs[1].plot(range(n+1), xv, marker='o', color='red', linewidth=2)
    for i in range(n): axs[1].annotate('', xy=(i+1, xv[i+1]), xytext=(i, xv[i]), arrowprops=dict(arrowstyle='->', color='red'))
    axs[1].set_xlim(0, n); axs[1].set_ylim(xv.min()-0.5, xv.max()+0.5)
    axs[1].set_xticks(range(0, n+1, 5)); axs[1].set_xlabel('Iteration'); axs[1].set_title('x over Iterations')
    axs[1].grid(True, linestyle='--', linewidth=0.5, color='lightgray')
    plt.tight_layout(); return fig


def plot_chain_network(x):
    y = 2 * x
    z = 3 * y
    L = 4 * z
    fig, ax = plt.subplots(figsize=(6, 2)); ax.axis('off')
    pos = {'x':0.1, 'y':0.3, 'z':0.5, 'L':0.7}

    for name in pos:
        ax.add_patch(plt.Circle((pos[name], 0.5), 0.05, fill=False))
        ax.text(pos[name], 0.5, name, ha='center', va='center')

    chain = [
        ('x','y',r'$\partial y/\partial x=2$'),
        ('y','z',r'$\partial z/\partial y=3$'),
        ('z','L',r'$\partial L/\partial z=4$')
    ]
    for src, dst, lbl in chain:
        sx, sy = pos[src], 0.5
        dx, dy = pos[dst], 0.5
        ax.annotate('', xy=(dx, dy), xytext=(sx, sy), arrowprops=dict(arrowstyle='->'))
        ax.text((sx+dx)/2, 0.6, lbl, ha='center', va='center')

    ax.text(0.02, 0.15,
            r'$\frac{\partial L}{\partial x}=\frac{\partial L}{\partial z}\cdot\frac{\partial z}{\partial y}\cdot\frac{\partial y}{\partial x}$',
            transform=ax.transAxes, ha='left')
    ax.text(0.02, 0.02, r'$=4\times3\times2=24$', transform=ax.transAxes, ha='left')
  
    ax.text(pos['x'], 0.3, f"x={x:.2f}", ha='center')
    ax.text(pos['y'], 0.3, f"y={y:.2f}", ha='center')
    ax.text(pos['z'], 0.3, f"z={z:.2f}", ha='center')
    ax.text(pos['L'], 0.3, f"L={L:.2f}", ha='center')
    plt.tight_layout(); return fig

def plot_backprop_dnn(x, w1, w2, t):
    a = w1 * x
    y = w2 * a
    L = 0.5 * (y - t)**2
    fig, ax = plt.subplots(figsize=(6, 2)); ax.axis('off')
    pos = {'x':0.1,'a':0.3,'y':0.5,'L':0.7}
    for name in pos:
        ax.add_patch(plt.Circle((pos[name], 0.5), 0.05, fill=False))
        ax.text(pos[name], 0.5, name, ha='center', va='center')
    bp = [
        ('x','a',r'$\partial a/\partial x=w_1$'),
        ('a','y',r'$\partial y/\partial a=w_2$'),
        ('y','L',r'$\partial L/\partial y=(y-t)$')
    ]
    for src, dst, lbl in bp:
        sx, sy = pos[src], 0.5
        dx, dy = pos[dst], 0.5
        ax.annotate('', xy=(dx, dy), xytext=(sx, sy), arrowprops=dict(arrowstyle='->'))
        ax.text((sx+dx)/2, 0.6, lbl, ha='center', va='center')
    ax.text(0.02, 0.15, r'$\partial L/\partial w_2=(y-t)\cdot a$', transform=ax.transAxes, ha='left')
    ax.text(0.02, 0.02, r'$\partial L/\partial w_1=(y-t)\cdot w_2\cdot x$', transform=ax.transAxes, ha='left')
    ax.text(pos['x'], 0.3, f"x={x:.2f}", ha='center')
    ax.text(pos['a'], 0.3, f"a={a:.2f}", ha='center')
    ax.text(pos['y'], 0.3, f"y={y:.2f}", ha='center')
    ax.text(pos['L'], 0.3, f"L={L:.2f}", ha='center')
    plt.tight_layout(); return fig

with gr.Blocks() as demo:
    with gr.Tabs():
        with gr.TabItem('Secant Approximation'):
            h = gr.Slider(1e-9, 2.0, value=0.01, step=0.001, label='h')
            p1 = gr.Plot(); m1 = gr.Markdown()
            h.change(lambda v: (plot_secant(v), f'**Δx=h={v:.4f}**, (f(x+h)-f(x))/h={(v**2)/v:.4f}'), h, [p1, m1])
            p1.figure, m1.value = plot_secant(0.01), '**Δx=h=0.0100**, (f(x+h)-f(x))/h=0.0100'

        with gr.TabItem('Tangent Visualization'):
            x0 = gr.Slider(-1.0, 2.0, value=0.0, step=0.1, label='x')
            p2 = gr.Plot(); m2 = gr.Markdown()
            x0.change(lambda v: (plot_tangent(v), f'**x={v:.2f}**, dy/dx={2*v:.2f}'), x0, [p2, m2])
            p2.figure, m2.value = plot_tangent(0.0), '**x=0.00**, dy/dx=0.00'

        with gr.TabItem('Gradient Descent'):
            lr = gr.Slider(0.01, 1.0, value=0.1, step=0.01, label='Learning Rate')
            init = gr.Slider(-2.0, 2.0, value=1.0, step=0.1, label='Initial x')
            st = gr.Slider(1, 50, value=10, step=1, label='Iterations')
            pg = gr.Plot(); mg = gr.Markdown()
            for inp in [lr, init, st]:
                inp.change(lambda a, b, c: (plot_gradient_descent(a, b, c), f'lr={a:.2f}, init={b:.2f}, steps={c}'), [lr, init, st], [pg, mg])
            pg.figure, mg.value = plot_gradient_descent(0.1, 1.0, 10), 'lr=0.10, init=1.00, steps=10'

        with gr.TabItem('Chain Rule'):
            x_slider = gr.Slider(0.0, 2.0, value=1.0, step=0.1, label='x')
            chain_plot = gr.Plot()
            chain_note = gr.Markdown()
            def update_chain(x):
                y = 2 * x
                z = 3 * y
                L = 4 * z
                fig = plot_chain_network(x)
                note = (
                    f"**Current values:**  \n"
                    f"- y = 2·{x:.2f} = {y:.2f}  \n"
                    f"- z = 3·{y:.2f} = {z:.2f}  \n"
                    f"- L = 4·{z:.2f} = {L:.2f}  \n\n"
                    "**Chain Rule:** dL/dx = 4 × 3 × 2 = 24"
                )

                return fig, note
            x_slider.change(update_chain, x_slider, [chain_plot, chain_note])
            chain_plot.figure, chain_note.value = update_chain(1.0)


        with gr.TabItem('Backpropagation'):
            xb = gr.Slider(-2.0, 2.0, value=0.5, step=0.1, label='x')
            w1b = gr.Slider(-2.0, 2.0, value=1.0, step=0.1, label='w1')
            w2b = gr.Slider(-2.0, 2.0, value=1.0, step=0.1, label='w2')
            tb = gr.Slider(-2.0, 2.0, value=0.0, step=0.1, label='t')
            pb = gr.Plot(); mb = gr.Markdown()
            for inp in [xb, w1b, w2b, tb]:
                inp.change(lambda a, b, c, d: (plot_backprop_dnn(a, b, c, d), ''), [xb, w1b, w2b, tb], [pb, mb])
            pb.figure, mb.value = plot_backprop_dnn(0.5, 1.0, 1.0, 0.0), ''

    demo.launch()