Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>Gradient Descent Studio</title> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <div class="bg-grid"></div> | |
| <main class="container"> | |
| <nav class="top-nav"> | |
| <a href="index.html">Back Home</a> | |
| </nav> | |
| <header class="hero compact"> | |
| <p class="eyebrow">Page 2</p> | |
| <h1>Gradient Descent Studio</h1> | |
| <p> | |
| Explore gradient descent for one-feature linear regression. Track | |
| cost, parameters, and gradients at every step. | |
| </p> | |
| </header> | |
| <section class="panel controls"> | |
| <div class="row two-col-row"> | |
| <div class="control-group"> | |
| <label for="sampleCount">Samples</label> | |
| <input id="sampleCount" type="number" min="10" max="120" value="50" /> | |
| </div> | |
| <div class="control-group"> | |
| <label for="learningRate">Learning Rate (alpha)</label> | |
| <input id="learningRate" type="number" min="0.001" max="0.5" step="0.001" value="0.02" /> | |
| </div> | |
| <div class="control-group"> | |
| <label for="iterationCount">Iterations</label> | |
| <input id="iterationCount" type="number" min="5" max="300" value="120" /> | |
| </div> | |
| <div class="control-group"> | |
| <label for="noiseLevel">Noise</label> | |
| <input id="noiseLevel" type="number" min="0" max="5" step="0.1" value="0.35" /> | |
| </div> | |
| </div> | |
| <div class="row"> | |
| <button id="runGdBtn" type="button">Run Gradient Descent</button> | |
| </div> | |
| </section> | |
| <section class="panel output"> | |
| <h2>Optimization Playback</h2> | |
| <div class="slider-row gd-slider-row"> | |
| <label for="gdStep">step</label> | |
| <input id="gdStep" type="range" min="0" max="0" value="0" /> | |
| <span id="gdStepLabel">0 / 0</span> | |
| <button id="playGdBtn" type="button">Play</button> | |
| <button id="resetGdBtn" type="button">Reset</button> | |
| </div> | |
| </section> | |
| <section class="panel output"> | |
| <h2>Model Visualization</h2> | |
| <canvas id="fitCanvas" width="980" height="450"></canvas> | |
| </section> | |
| <section class="panel output"> | |
| <h2>Cost Curve</h2> | |
| <canvas id="costCanvas" width="980" height="260"></canvas> | |
| </section> | |
| <section class="panel output"> | |
| <h2>Cost Landscape (Descent Direction)</h2> | |
| <div id="landscapeSummary" class="landscape-summary"></div> | |
| <div class="landscape-controls"> | |
| <button id="resetViewBtn" type="button" class="viz-btn">Reset View</button> | |
| <button id="plotSmallerBtn" type="button" class="viz-btn">-</button> | |
| <button id="plotFitBtn" type="button" class="viz-btn">Fit</button> | |
| <button id="plotLargerBtn" type="button" class="viz-btn">+</button> | |
| <button id="plotFullscreenBtn" type="button" class="viz-btn">Fullscreen</button> | |
| </div> | |
| <div class="landscape-controls toggles"> | |
| <label class="viz-toggle"><input id="toggleSurface" type="checkbox" checked /> Surface</label> | |
| <label class="viz-toggle"><input id="toggleContours" type="checkbox" checked /> Contours</label> | |
| <label class="viz-toggle"><input id="toggleTrajectory" type="checkbox" checked /> Trajectory</label> | |
| </div> | |
| <div id="landscapePlotWrap" class="landscape-plot-wrap"> | |
| <div id="landscapePlot" class="landscape-plot"></div> | |
| </div> | |
| <p class="slice-label">Drag to rotate · Scroll to zoom · Use Fit / +/- / Fullscreen to resize</p> | |
| </section> | |
| <section class="panel output"> | |
| <h2>Cost Function and Result</h2> | |
| <div id="costSummary" class="viz-grid"></div> | |
| </section> | |
| <section class="panel output"> | |
| <h2>Step Details</h2> | |
| <div id="stepSummary" class="viz-grid"></div> | |
| </section> | |
| <section class="panel output"> | |
| <h2>Iteration Log (Cost / Parameters / Gradients)</h2> | |
| <div class="log-wrap"> | |
| <table class="gd-log-table" id="gdLogTable"> | |
| <thead> | |
| <tr> | |
| <th>step</th> | |
| <th>cost</th> | |
| <th>theta</th> | |
| <th>gradient</th> | |
| </tr> | |
| </thead> | |
| <tbody id="gdLogBody"></tbody> | |
| </table> | |
| </div> | |
| </section> | |
| </main> | |
| <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script> | |
| <script src="gradient.js?v=20260814c"></script> | |
| </body> | |
| </html> | |