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 - Sigmoid Function</title> | |
| <link rel="stylesheet" href="styles.css" /> | |
| </head> | |
| <body> | |
| <header class="site-header"> | |
| <div> | |
| <p class="kicker">Data Driven World</p> | |
| <h1>Sigmoid Function Playground</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 class="active" href="sigmoid.html">Sigmoid Function</a> | |
| <a href="cost-visualization.html">Cost Function</a> | |
| <a href="about.html">Notes</a> | |
| </nav> | |
| </header> | |
| <main class="layout"> | |
| <section class="panel controls"> | |
| <h2>Model Controls</h2> | |
| <label for="b0">b0 (intercept): <span id="b0Value">0.00</span></label> | |
| <input id="b0" type="range" min="-10" max="10" step="0.1" value="0" /> | |
| <label for="b1">b1 (slope): <span id="b1Value">1.00</span></label> | |
| <input id="b1" type="range" min="-5" max="5" step="0.1" value="1" /> | |
| <label for="t">threshold t: <span id="tValue">0.50</span></label> | |
| <input id="t" type="range" min="0.05" max="0.95" step="0.01" value="0.5" /> | |
| <label for="probeX">probe x: <span id="probeValue">0.00</span></label> | |
| <input id="probeX" type="range" min="-10" max="10" step="0.1" value="0" /> | |
| <div class="button-row"> | |
| <button id="resetBtn" type="button">Reset</button> | |
| <button id="animateBtn" type="button">Animate Probe</button> | |
| </div> | |
| <label for="preset">Preset examples</label> | |
| <select id="preset"> | |
| <option value="default">Default (b0=0, b1=1, t=0.5)</option> | |
| <option value="steep">Steep classifier</option> | |
| <option value="reversed">Reversed slope</option> | |
| <option value="high-threshold">High threshold</option> | |
| </select> | |
| <div class="checkboxes"> | |
| <label><input id="showGrid" type="checkbox" checked /> Show grid</label> | |
| <label><input id="showShade" type="checkbox" checked /> Shade positive region</label> | |
| <label><input id="showDerivative" type="checkbox" /> Show derivative curve</label> | |
| </div> | |
| </section> | |
| <section class="panel chart-panel"> | |
| <h2>p(x) = 1 / (1 + exp(-(b0 + b1x)))</h2> | |
| <canvas id="plot" width="900" height="520" aria-label="Logistic curve chart"></canvas> | |
| <div class="stats" id="stats"></div> | |
| <p class="hint">Interactive option: click anywhere on the chart to add sample x points and see class labels using threshold t.</p> | |
| </section> | |
| </main> | |
| <script src="app.js"></script> | |
| </body> | |
| </html> | |