Upload graph.py

graph.py

@@ -0,0 +1,167 @@
+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()