Hugging Face's logo

Spaces:
Rui4416
/
DDW_Machine_Learning
Running

App Files Community
DDW_Machine_Learning
File size: 4,695 Bytes
c745dff
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b2061c4
 
 
 
 
 
 
 
c745dff
b2061c4
 
 
 
 
 
 
 
 
 
 
73376e0
c745dff
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
b2061c4
c04888d
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
<!DOCTYPE html>
<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>