Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <title>DDW Interface - Logistic Cost Landscape</title> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <header class="site-header"> | |
| <div> | |
| <p class="kicker">Data Driven World</p> | |
| <h1>Visualization for Cost Function</h1> | |
| </div> | |
| <nav> | |
| <a href="index.html">Home</a> | |
| <a href="simple-sigmoid.html">Simple Sigmoid</a> | |
| <a href="confusion-matrix.html">Confusion Matrix (Page 3)</a> | |
| <a href="sigmoid.html">Sigmoid Function</a> | |
| <a class="active" href="cost-visualization.html">Cost Function</a> | |
| <a href="about.html">Notes</a> | |
| </nav> | |
| </header> | |
| <main class="layout"> | |
| <section class="panel controls"> | |
| <h2>Gradient Descent Setup</h2> | |
| <label for="caseSelect">Select model case</label> | |
| <select id="caseSelect"> | |
| <option value="case1">Case 1: one intercept + one feature</option> | |
| <option value="case2">Case 2: two features, no intercept</option> | |
| </select> | |
| <p class="hint" id="formulaText"></p> | |
| <label for="lr">Learning rate: <span id="lrValue">0.100</span></label> | |
| <input id="lr" type="range" min="0.001" max="10.000" step="0.001" value="0.100" /> | |
| <label for="lrInput">Learning rate input</label> | |
| <input id="lrInput" type="number" min="0.001" max="10.000" step="0.001" value="0.100" /> | |
| <p class="hint">If you use z-normalization, you can generally use a larger learning rate than with unscaled features.</p> | |
| <label for="iters">Iterations: <span id="iterValue">80</span></label> | |
| <input id="iters" type="range" min="5" max="220" step="1" value="80" /> | |
| <label for="startP1">Start parameter 1: <span id="p1Value">-4.00</span></label> | |
| <input id="startP1" type="range" min="-6" max="6" step="0.1" value="-4" /> | |
| <label for="startP2">Start parameter 2: <span id="p2Value">4.00</span></label> | |
| <input id="startP2" type="range" min="-6" max="6" step="0.1" value="4" /> | |
| <label for="speed">Automatic run speed (ms): <span id="speedValue">90</span></label> | |
| <input id="speed" type="range" min="20" max="260" step="5" value="90" /> | |
| <div class="button-row"> | |
| <button id="runBtn" type="button">Run Gradient Descent</button> | |
| <button id="stepBtn" type="button">Next Step</button> | |
| </div> | |
| <div class="button-row"> | |
| <button id="autoBtn" type="button">Automatic Run</button> | |
| <button id="restartBtn" type="button">Restart Path</button> | |
| </div> | |
| <div class="button-row"> | |
| <button id="regenBtn" type="button">Regenerate Synthetic Data</button> | |
| <button id="clearBtn" type="button">Clear</button> | |
| </div> | |
| </section> | |
| <section class="panel chart-panel"> | |
| <h2>Cost Landscape (Gradient Descent)</h2> | |
| <div id="modelDefinition" class="model-definition"></div> | |
| <p class="hint"> | |
| The height represents the cost function J(theta). Lower points correspond to parameter values that better fit class labels. | |
| </p> | |
| <p class="hint"> | |
| Each trajectory point is one gradient-descent update: horizontal movement = parameter changes, vertical movement = cost-function change. | |
| </p> | |
| <div id="landscapeSummary" class="landscape-summary"></div> | |
| <div class="landscape-controls"> | |
| <label for="landscapeView">Landscape View</label> | |
| <select id="landscapeView"> | |
| <option value="surface3d">3D Surface + Trajectory</option> | |
| <option value="contour2d">2D Contour + Trajectory</option> | |
| <option value="surface3dContours">3D Surface + Contours</option> | |
| </select> | |
| <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> | |
| <label class="viz-toggle"><input id="toggleCurrent" type="checkbox" checked /> Current Point</label> | |
| </div> | |
| <div class="viz-info-row"> | |
| <div class="viz-chip" id="clipInfo">Surface clipping: none</div> | |
| <div class="viz-chip" id="minimumInfo">Lowest point in shown region: --</div> | |
| <div class="viz-chip warning" id="stabilityWarning">Stability: normal</div> | |
| </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 路 Hover to inspect 路 Use Fit / +/- / Fullscreen to resize</p> | |
| <div class="iteration-block"> | |
| <label for="landscapeStep">Gradient Descent Step</label> | |
| <input id="landscapeStep" type="range" min="0" max="0" value="0" /> | |
| <span id="landscapeStepLabel">0 / 0</span> | |
| </div> | |
| <div class="classifier-panel"> | |
| <h3>Classifier at This Step</h3> | |
| <canvas id="classifierCanvas" width="940" height="310" aria-label="Current classifier view"></canvas> | |
| </div> | |
| <div class="stats" id="costStats"></div> | |
| </section> | |
| </main> | |
| <script src="https://cdn.plot.ly/plotly-2.35.2.min.js"></script> | |
| <script src="cost.js?v=20260816a"></script> | |
| </body> | |
| </html> | |