AmitPandit175/Gradient_Descent_Visualization_App

1import streamlit as st2import numpy as np3import plotly.graph_objects as go4import base645 6# Set up the page configuration7st.set_page_config(8    page_title="Gradient Descent & Visualizer",9    page_icon="📊",10    layout="wide"11)12 13# Background setup14def set_background(image_path):15    try:16        with open(image_path, "rb") as image_file:17            encoded_image = base64.b64encode(image_file.read()).decode()18        st.markdown(19            f"""20            <style>21            .stApp {{22                background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), 23                            url("data:image/png;base64,{encoded_image}");24                background-size: cover;25                background-position: center;26                background-repeat: no-repeat;27            }}28            </style>29            """,30            unsafe_allow_html=True,31        )32    except Exception as e:33        st.error(f"Error loading background image: {e}")34 35 36 37# Title and layout38st.markdown("<h1 style='text-align: center;'>📉 Gradient Descent in Machine Learning</h1>", unsafe_allow_html=True)39st.markdown("<hr style='border: 1px solid #ccc;'>", unsafe_allow_html=True)40 41# Layout for intro text42col1, col2 = st.columns([2, 1])43with col1:44    st.markdown(45        r"""46        **Gradient Descent** is a powerful optimization technique widely used in machine learning and deep learning.47 48        It works by iteratively updating model parameters to **minimize a cost function** — essentially, reducing the error in predictions.49        This method powers models from **linear regression** to complex **neural networks**.50        """51    )52with col2:53    st.markdown("### 🔍 Optimization Concept")54    st.markdown(55        r"""56        - Gradient Descent finds the minimum of a function.57        - Uses **derivatives** to compute the direction and step size.58        - Updates parameters iteratively to reduce error.59        """60    )61 62# Gradient Descent visualization63def gradient_descent_visualization():64    def cost_function(x): return x**265    def gradient(x): return 2 * x66 67    x_values = []68    y_values = []69    x = 470    learning_rate = 0.271    iterations = 2072 73    for _ in range(iterations):74        x_values.append(x)75        y_values.append(cost_function(x))76        x = x - learning_rate * gradient(x)77 78    x_curve = np.linspace(-5, 5, 100)79    y_curve = cost_function(x_curve)80 81    fig = go.Figure()82    fig.add_trace(go.Scatter(x=x_curve, y=y_curve, mode="lines", name="Cost Function", line=dict(color="blue")))83    fig.add_trace(go.Scatter(x=x_values, y=y_values, mode="markers+lines", name="Descent Steps", marker=dict(color="red", size=8), line=dict(dash="dot", color="red")))84 85    fig.update_layout(86        title="📈 Gradient Descent Visualization",87        xaxis_title="Parameter (x)",88        yaxis_title="Cost Function Value",89        showlegend=True,90        width=900,91        height=500,92        template="plotly_white"93    )94 95    return fig96 97# Section: Visual Output98st.markdown("### 🔬 Visualizing Gradient Descent")99st.plotly_chart(gradient_descent_visualization(), use_container_width=True)100 101# Theory Section102st.markdown("<hr style='border: 1px solid #ccc;'>", unsafe_allow_html=True)103st.markdown("### 📘 Understanding Gradient Descent")104 105st.markdown(106    r"""107**Gradient Descent**, discovered by *Augustin-Louis Cauchy*, is used to find the **local minimum** of a function.108 109#### 🔑 Key Concepts:110- **Local Minimum**: Lowest point nearby on the cost curve.111- **Gradient**: The slope at a point. Direction of steepest increase.112- **Negative Gradient**: The direction of steepest descent (minimization).113 114#### ⚡ Why Gradient Descent?115Think of it like walking downhill in the fog — you can feel the slope and take small steps down until you reach a flat spot.116 117#### 🔁 How It Works:1181. **Compute Gradient**: Find the slope using derivatives.1192. **Update Parameters**: Take a step in the opposite direction of the gradient.1203. **Repeat**: Until the slope is nearly zero (convergence).121 122#### 🎯 Learning Rate (\(\lambda\)):123- Controls the step size.124- Too big: may overshoot.125- Too small: may take forever.126 127---128    """,129    unsafe_allow_html=True130)131