| <!doctype html> |
| <html lang="en"> |
| <head> |
| <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"> |
| <title>Ensemble playground</title><link rel="stylesheet" href="style.css?v=seed-1"> |
| </head> |
| <body> |
| <main> |
| <div class="intro"><h1>Ensemble playground</h1><p>Draw a dataset. Build an ensemble. Watch the boundary evolve.</p></div> |
| <div id="runtime-status" class="runtime-status" role="status" aria-live="polite" data-state="loading"><span class="runtime-dot" aria-hidden="true"></span><span id="runtime-status-text">Loading Pythong runtime...</span></div> |
| <div class="layout"> |
| <section class="card result"><div class="card-heading"><div><h2>Decision boundary</h2></div><span id="method-badge" class="badge">AdaBoost</span></div> |
| <div class="plot"><canvas id="boundary" width="600" height="600" tabindex="0" aria-label="Draw training points and view the ensemble decision boundary. Click or drag to add the selected class. Arrow keys move the keyboard cursor; Space or Enter adds a point."></canvas><span class="axis x">Feature 1 →</span><span class="axis y">Feature 2 →</span><div id="empty">Choose a class on the right, then click or drag here to draw points</div></div> |
| <div class="stats"><div><span>BASE MODELS</span><strong id="count">0</strong></div><div><span>TRAINING ACCURACY</span><strong id="accuracy">—</strong></div><div><span>DATA POINTS</span><strong id="points">0</strong></div></div> |
| <div id="models" class="models" aria-label="Added base models"></div> |
| </section> |
| <aside class="card controls"><div class="card-heading"><div><h2>Configure</h2></div></div> |
| <h3><span class="step">1</span> Data</h3> |
| <label for="dataset-type">Type</label><select id="dataset-type"><option value="custom">Custom</option><option value="two_moons">Half circles</option><option value="xor">XOR</option><option value="circles">Circles</option><option value="blobs">Blobs</option><option value="spirals">Spirals</option></select> |
| <div class="toolbar" aria-label="Drawing class"><button class="class-button selected" data-label="-1" aria-pressed="true"><i class="dot blue"></i>Class A</button><button class="class-button" data-label="1" aria-pressed="false"><i class="dot orange"></i>Class B</button><button class="class-button" data-label="2" aria-pressed="false"><i class="dot green"></i>Class C</button></div> |
| <div class="canvas-caption"><span id="dataset-help">Draw on the decision-boundary plot</span><span id="class-count">A: 0 · B: 0 · C: 0</span></div> |
| <div class="dataset-actions"><button id="undo">Undo point</button><button id="clear">Clear</button></div> |
| <div class="divider"></div><h3><span class="step">2</span> Configure the ensemble</h3> |
| <label for="method">Ensemble method</label><select id="method"><option value="boosting">AdaBoost</option><option value="bagging">Bagging</option><option value="random_forest">Random Forest</option><option value="extra_trees">Extra Trees</option></select> |
| <label for="seed">Random seed</label><input id="seed" type="number" min="0" max="4294967295" step="1" value="42" required aria-describedby="seed-help"> |
| <p id="seed-help" class="hint">Same data, settings, and seed reproduce the ensemble.</p> |
| <label for="base">scikit-learn classifier</label><select id="base" disabled> |
| <option value="DecisionTreeClassifier">DecisionTreeClassifier</option> |
| </select> |
| <label for="params">Non-default arguments (JSON)</label> |
| <textarea id="params" rows="2" spellcheck="false" aria-describedby="params-help">{"max_depth": 1}</textarea> |
| <p id="params-help" class="hint">Use {} for defaults. Example: {"max_depth": 2}</p> |
| <p class="hint">Changing the dataset or configuration resets the ensemble.</p> |
| <div class="divider"></div><h3><span class="step">3</span> Build your ensemble</h3> |
| <button id="add" class="primary">＋ Add one model</button><button id="remove" class="remove">↶ Remove last model</button> |
| <p id="status" role="status" aria-live="polite"></p> |
| </aside> |
| </div> |
| </main><div id="point-tooltip" role="tooltip" hidden></div><script src="ensemble.js?v=multiclass-1"></script><script src="backend-client.js?v=multiclass-1"></script><script src="datasets.js?v=1"></script><script src="app.js?v=seed-1"></script> |
| </body></html> |
|
|
