Spaces:
Running
Running
File size: 6,070 Bytes
c745dff b2061c4 c745dff b2061c4 c745dff b2061c4 c745dff b2061c4 055a863 b2061c4 055a863 b2061c4 73376e0 b2061c4 c745dff b2061c4 055a863 c745dff | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 | <!doctype html>
<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>
|