Upload index.html
Browse files- index.html +1029 -340
index.html
CHANGED
|
@@ -1,194 +1,852 @@
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
-
<html lang="en">
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8" />
|
| 5 |
-
<title>Carbono UI — Minimal Mono</title>
|
| 6 |
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
|
|
|
|
|
|
|
|
| 7 |
<style>
|
| 8 |
-
:root{
|
| 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 |
-
.muted{color:var(--muted)}
|
| 36 |
-
.chip{background:var(--fg);color:var(--bg);padding:2px 6px;border-radius:999px;cursor:pointer;user-select:none}
|
| 37 |
-
/* layout grid */
|
| 38 |
-
.grid{
|
| 39 |
-
display:grid;gap:var(--gap);
|
| 40 |
-
grid-template-columns: 3.5fr 3.5fr 3fr; /* L / M / R */
|
| 41 |
-
grid-template-rows: 1fr;
|
| 42 |
-
height:100%;
|
| 43 |
-
}
|
| 44 |
-
.panel{
|
| 45 |
-
display:flex;flex-direction:column;gap:var(--gap);
|
| 46 |
-
border:1px solid var(--line);border-radius:var(--radius);background:linear-gradient(180deg,var(--panel),var(--ink));
|
| 47 |
-
padding:var(--pad);
|
| 48 |
-
}
|
| 49 |
-
.block{border:1px solid var(--line);border-radius:var(--radius);background:var(--ink2);padding:8px}
|
| 50 |
-
.title{
|
| 51 |
-
font-weight:700;text-transform:uppercase;letter-spacing:.5px;margin:0 0 6px 0;
|
| 52 |
-
padding-bottom:6px;border-bottom:1px solid var(--line)
|
| 53 |
-
}
|
| 54 |
-
/* compact form */
|
| 55 |
-
label{display:block;margin-bottom:4px;color:var(--muted)}
|
| 56 |
-
.row{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap)}
|
| 57 |
-
.input,textarea,select{
|
| 58 |
-
width:100%;background:#141414;border:1px solid var(--line);color:var(--fg);
|
| 59 |
-
padding:6px;border-radius:4px;outline:none;transition:border-color .15s ease;
|
| 60 |
-
}
|
| 61 |
-
.input:focus,textarea:focus,select:focus{border-color:#fff}
|
| 62 |
-
textarea{resize:none}
|
| 63 |
-
/* controls */
|
| 64 |
-
.btns{display:flex;gap:6px;flex-wrap:wrap}
|
| 65 |
-
button{
|
| 66 |
-
height:26px;line-height:24px;padding:0 10px;border-radius:4px;border:1px solid #fff;background:#fff;color:#000;
|
| 67 |
-
cursor:pointer;transition:filter .15s ease
|
| 68 |
-
}
|
| 69 |
-
button:hover{filter:brightness(.9)}
|
| 70 |
-
button:disabled{opacity:.6;cursor:not-allowed;filter:none}
|
| 71 |
-
/* canvases */
|
| 72 |
-
.canvas-wrap{height:170px;border:1px solid var(--line);border-radius:4px;position:relative;background:#0a0a0a}
|
| 73 |
-
canvas{position:absolute;inset:0;width:100%;height:100%}
|
| 74 |
-
/* progress bar */
|
| 75 |
-
.bar{height:4px;border-radius:999px;background:#161616;overflow:hidden}
|
| 76 |
-
.bar>i{display:block;height:100%;width:0;background:#fff;transition:width .2s linear}
|
| 77 |
-
/* small text blocks */
|
| 78 |
-
.hint{color:var(--muted);margin:4px 0 0 0}
|
| 79 |
-
.stat{display:grid;grid-template-columns:auto 1fr;gap:6px 10px}
|
| 80 |
-
.stat b{color:#fff}
|
| 81 |
-
/* two-up prediction area */
|
| 82 |
-
.pred{display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center}
|
| 83 |
-
/* hide scrollbars anywhere just in case */
|
| 84 |
-
.panel,.block{overflow:hidden}
|
| 85 |
-
@media (max-width:900px){
|
| 86 |
-
/* fallback: stack but still scaled to fit by transformer */
|
| 87 |
-
.grid{grid-template-columns:1fr}
|
| 88 |
-
}
|
| 89 |
-
@media (prefers-reduced-motion:reduce){
|
| 90 |
-
*{animation:none!important;transition:none!important}
|
| 91 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 92 |
</style>
|
| 93 |
</head>
|
| 94 |
<body>
|
| 95 |
-
<div
|
| 96 |
-
<
|
| 97 |
-
<div class="brand">
|
| 98 |
-
|
| 99 |
-
|
| 100 |
-
|
| 101 |
-
|
| 102 |
-
|
| 103 |
-
|
| 104 |
-
|
| 105 |
-
<
|
| 106 |
-
|
| 107 |
-
<label>Training Set</label>
|
| 108 |
-
<textarea id="trainingData" rows="3" placeholder="1,1,1,0 1,0,1,0 0,1,0,1"></textarea>
|
| 109 |
-
<div class="hint">Last number is target.</div>
|
| 110 |
</div>
|
| 111 |
-
|
| 112 |
-
|
| 113 |
-
|
| 114 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 115 |
</div>
|
| 116 |
-
|
| 117 |
-
|
| 118 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 119 |
</div>
|
| 120 |
-
|
| 121 |
-
|
| 122 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 123 |
</div>
|
| 124 |
-
|
| 125 |
-
|
| 126 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 127 |
</div>
|
| 128 |
-
</div>
|
| 129 |
-
<div id="hiddenLayersConfig" class="block"></div>
|
| 130 |
-
<div class="block">
|
| 131 |
-
<label>Validation Set</label>
|
| 132 |
-
<textarea id="testData" rows="2" placeholder="0,0,0,1"></textarea>
|
| 133 |
-
</div>
|
| 134 |
-
</section>
|
| 135 |
|
| 136 |
-
|
| 137 |
-
|
| 138 |
-
|
| 139 |
-
|
| 140 |
-
|
| 141 |
-
|
| 142 |
-
<div id="stats" class="block stat"></div>
|
| 143 |
-
|
| 144 |
-
<h4 class="title">Visualization</h4>
|
| 145 |
-
<div class="canvas-wrap"><canvas id="networkGraph"></canvas></div>
|
| 146 |
-
<div class="hint">Internal representation.</div>
|
| 147 |
-
</section>
|
| 148 |
|
| 149 |
-
|
| 150 |
-
|
| 151 |
-
|
| 152 |
-
|
| 153 |
-
|
| 154 |
-
|
| 155 |
-
|
| 156 |
-
|
|
|
|
|
|
|
| 157 |
|
| 158 |
-
|
| 159 |
-
|
| 160 |
-
|
| 161 |
-
|
| 162 |
-
|
| 163 |
-
|
|
|
|
|
|
|
| 164 |
|
| 165 |
-
<
|
| 166 |
-
<div class="
|
| 167 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 168 |
</section>
|
| 169 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 170 |
</div>
|
| 171 |
|
| 172 |
-
|
| 173 |
-
/* --------- Fit-to-viewport scaling (no scroll) --------- */
|
| 174 |
-
(function(){
|
| 175 |
-
const baseW = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--base-w'),10);
|
| 176 |
-
const baseH = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--base-h'),10);
|
| 177 |
-
const fitEl = document.getElementById('fit');
|
| 178 |
-
function fit(){ const s = Math.min(window.innerWidth/baseW, window.innerHeight/baseH); fitEl.style.transform = `scale(${s})`; }
|
| 179 |
-
window.addEventListener('resize', fit, {passive:true}); fit();
|
| 180 |
-
})();
|
| 181 |
-
|
| 182 |
-
/* ---------------- Carbono micro-lib (unchanged API; minor fixes) ---------------- */
|
| 183 |
class carbono {
|
| 184 |
constructor(debug = true) { this.layers=[]; this.weights=[]; this.biases=[]; this.activations=[]; this.details={}; this.debug=debug; }
|
| 185 |
layer(inputSize, outputSize, activation='tanh'){
|
| 186 |
this.layers.push({inputSize,outputSize,activation});
|
| 187 |
-
if(this.weights.length>0){
|
| 188 |
-
|
| 189 |
-
if(inputSize!==lastOut) throw new Error('Input size must match previous layer output size.');
|
| 190 |
-
}
|
| 191 |
-
const W=[]; for(let i=0;i<outputSize;i++){ const row=[]; for(let j=0;j<inputSize;j++){ row.push((Math.random()-0.5)*2*Math.sqrt(6/(inputSize+outputSize))); } W.push(row); }
|
| 192 |
this.weights.push(W); this.biases.push(Array(outputSize).fill(0.01)); this.activations.push(activation);
|
| 193 |
}
|
| 194 |
activationFunction(x,a){ switch(a){case 'tanh':return Math.tanh(x);case 'sigmoid':return 1/(1+Math.exp(-x));case 'relu':return Math.max(0,x);case 'selu':{const alpha=1.67326,scale=1.0507;return x>0?scale*x:scale*alpha*(Math.exp(x)-1);}default:throw new Error('Unknown activation');} }
|
|
@@ -199,7 +857,7 @@ class carbono {
|
|
| 199 |
for(let h=0;h<numHeads;h++) for(let i=0;i<input.length;i++) for(let j=0;j<headSize;j++) heads[h][i][j]=input[i][h*headSize+j];
|
| 200 |
const scores=[...Array(numHeads)].map(()=>[...Array(input.length)].map(()=>[...Array(input.length)].fill(0)));
|
| 201 |
for(let h=0;h<numHeads;h++) for(let i=0;i<input.length;i++) for(let j=0;j<input.length;j++){ let s=0; for(let k=0;k<headSize;k++) s+=heads[h][i][k]*heads[h][j][k]; scores[h][i][j]=s; }
|
| 202 |
-
const weights=scores.map(head=>head.map(row=>{const ex=row.map(v=>Math.exp(v)); const sum=ex.reduce((a,b)=>a+b,0); return ex.map(v=>v/sum)}));
|
| 203 |
const out=[...Array(input.length)].map(()=>[...Array(input[0].length)].fill(0));
|
| 204 |
for(let h=0;h<numHeads;h++) for(let i=0;i<input.length;i++) for(let j=0;j<headSize;j++) for(let k=0;k<input.length;k++) out[i][h*headSize+j]+=weights[h][i][k]*heads[h][k][j];
|
| 205 |
return out;
|
|
@@ -209,7 +867,7 @@ class carbono {
|
|
| 209 |
const {epochs=200,learningRate=0.212,batchSize=16,printEveryEpochs=100,earlyStopThreshold=1e-6,testSet=null,callback=null}=options;
|
| 210 |
const start=Date.now(); const batch=Math.max(1,batchSize);
|
| 211 |
if(this.layers.length===0){ const n=trainSet[0].input.length; this.layer(n,n,'tanh'); this.layer(n,1,'tanh'); }
|
| 212 |
-
let lastTrainLoss=0,lastTestLoss=null;
|
| 213 |
for(let epoch=0;epoch<epochs;epoch++){
|
| 214 |
let trainError=0;
|
| 215 |
for(let b=0;b<trainSet.length;b+=batch){
|
|
@@ -223,231 +881,262 @@ class carbono {
|
|
| 223 |
}
|
| 224 |
const outIn=L[L.length-1]; const outErr=[]; for(let i=0;i<outIn.length;i++) outErr.push((data.output[i]??0)-outIn[i]);
|
| 225 |
let layerErrors=[outErr];
|
| 226 |
-
for(let i=this.weights.length-2;i>=0;i--){
|
| 227 |
-
|
| 228 |
-
for(let j=0;j<this.layers[i].outputSize;j++){ let e=0; for(let k=0;k<this.layers[i+1].outputSize;k++) e+=nextErr[k]*Wnext[k][j]; errs.push(e*this.activationDerivative(curIn[j],act)); }
|
| 229 |
-
layerErrors.unshift(errs);
|
| 230 |
-
}
|
| 231 |
-
for(let i=0;i<this.weights.length;i++){
|
| 232 |
-
const inputs=L[i], errs=layerErrors[i], W=this.weights[i], B=this.biases[i];
|
| 233 |
-
for(let j=0;j<W.length;j++){ const w=W[j]; for(let k=0;k<inputs.length;k++) w[k]+=learningRate*errs[j]*inputs[k]; B[j]+=learningRate*errs[j]; }
|
| 234 |
-
}
|
| 235 |
batchError+=Math.abs(outErr[0]??0);
|
| 236 |
}
|
| 237 |
trainError+=batchError;
|
| 238 |
}
|
| 239 |
-
lastTrainLoss=trainError/trainSet.length;
|
| 240 |
if(testSet){ let te=0; for(const d of testSet){ const p=this.predict(d.input); te+=Math.abs((d.output[0]??0)-(p[0]??0)); } lastTestLoss=te/testSet.length; }
|
| 241 |
if((epoch+1)%printEveryEpochs===0 && this.debug) console.log(`Epoch ${epoch+1} | Train ${lastTrainLoss.toFixed(6)}${testSet?` | Val ${lastTestLoss.toFixed(6)}`:''}`);
|
| 242 |
if(callback) await callback(epoch+1,lastTrainLoss,lastTestLoss);
|
| 243 |
await new Promise(r=>setTimeout(r,0));
|
| 244 |
if(lastTrainLoss<earlyStopThreshold) { if(this.debug) console.log(`Early stop @${epoch+1}`); break; }
|
| 245 |
}
|
| 246 |
-
const end=Date.now(); let params=0; for(let i=0;i<this.weights.length;i++)
|
| 247 |
-
const summary={trainLoss:lastTrainLoss,testLoss:lastTestLoss,parameters:params,training:{time:end-start,epochs,learningRate,batchSize:batch},layers:this.layers.map(l=>({inputSize:l.inputSize,outputSize:l.outputSize,activation:l.activation}))};
|
| 248 |
this.details=summary; return summary;
|
| 249 |
}
|
| 250 |
predict(input){
|
| 251 |
let x=input; const acts=[input], raw=[];
|
| 252 |
-
for(let i=0;i<this.weights.length;i++){ const W=this.weights[i], B=this.biases[i], a=this.activations[i]; const y=[], r=[];
|
| 253 |
-
for(let j=0;j<W.length;j++){ const w=W[j]; let s=B[j]; for(let k=0;k<x.length;k++) s+=x[k]*w[k]; r.push(s); y.push(this.activationFunction(s,a)); }
|
| 254 |
-
raw.push(r); acts.push(y); x=y;
|
| 255 |
-
}
|
| 256 |
this.lastActivations=acts; this.lastRawValues=raw; return x;
|
| 257 |
}
|
| 258 |
-
save(name='model'){
|
|
|
|
| 259 |
const blob=new Blob([JSON.stringify(data)],{type:'application/json'}); const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=`${name}.json`; a.click(); URL.revokeObjectURL(url);
|
| 260 |
}
|
| 261 |
load(callback){
|
| 262 |
const onChange=(e)=>{ const f=e.target.files[0]; if(!f) return; const r=new FileReader();
|
| 263 |
-
r.onload=(ev)=>{ try{ const data=JSON.parse(ev.target.result); this.weights=data.weights; this.biases=data.biases; this.activations=data.activations; this.layers=data.layers; this.details=data.details; callback&&callback(); if(this.debug) console.log('Loaded'); }catch(err){ if(this.debug) console.error('Load failed',err); } finally{ input.removeEventListener('change',onChange); input.remove(); } };
|
| 264 |
r.readAsText(f);
|
| 265 |
};
|
| 266 |
const input=document.createElement('input'); input.type='file'; input.accept='.json'; input.style.position='fixed'; input.style.opacity='0'; document.body.append(input); input.addEventListener('change',onChange); input.click();
|
| 267 |
}
|
| 268 |
}
|
| 269 |
|
| 270 |
-
/* ---------------- App ---------------- */
|
| 271 |
document.addEventListener('DOMContentLoaded',()=>{
|
| 272 |
const nn=new carbono();
|
| 273 |
let lossHistory=[];
|
|
|
|
| 274 |
|
| 275 |
-
const
|
| 276 |
-
const networkCanvas=document.getElementById('networkGraph');
|
| 277 |
-
const lossCtx=lossCanvas.getContext('2d');
|
| 278 |
-
|
| 279 |
const el={
|
| 280 |
-
loadDataBtn:
|
| 281 |
-
|
| 282 |
-
|
| 283 |
-
|
| 284 |
-
|
| 285 |
-
|
| 286 |
-
|
| 287 |
-
|
| 288 |
-
|
| 289 |
-
learningRate:document.getElementById('learningRate'),
|
| 290 |
-
batchSize:document.getElementById('batchSize'),
|
| 291 |
-
predictButton:document.getElementById('predictButton'),
|
| 292 |
-
predictionInput:document.getElementById('predictionInput'),
|
| 293 |
-
predictionResult:document.getElementById('predictionResult'),
|
| 294 |
-
saveButton:document.getElementById('saveButton'),
|
| 295 |
-
loadButton:document.getElementById('loadButton')
|
| 296 |
};
|
| 297 |
|
| 298 |
-
const
|
| 299 |
-
|
| 300 |
-
return {input:values.slice(0,-1),output:[values[values.length-1]]};
|
| 301 |
-
});
|
| 302 |
|
| 303 |
-
function
|
| 304 |
-
|
| 305 |
-
|
| 306 |
-
|
| 307 |
-
|
| 308 |
-
|
| 309 |
-
|
| 310 |
-
|
| 311 |
-
|
| 312 |
-
|
| 313 |
-
|
| 314 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 315 |
}
|
| 316 |
|
|
|
|
|
|
|
|
|
|
| 317 |
function createLayerConfigUI(n){
|
|
|
|
|
|
|
| 318 |
el.hiddenLayersConfig.innerHTML='';
|
| 319 |
for(let i=0;i<n;i++){
|
| 320 |
-
const
|
| 321 |
-
|
| 322 |
-
|
| 323 |
-
|
| 324 |
-
|
| 325 |
-
|
| 326 |
-
|
| 327 |
-
|
| 328 |
-
|
| 329 |
-
|
| 330 |
-
|
| 331 |
-
|
| 332 |
-
|
| 333 |
-
|
| 334 |
-
|
| 335 |
-
</select>
|
| 336 |
-
</div>`;
|
| 337 |
-
el.hiddenLayersConfig.appendChild(block);
|
| 338 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 339 |
}
|
| 340 |
|
| 341 |
async function trainModel(){
|
| 342 |
-
|
| 343 |
-
|
| 344 |
-
|
| 345 |
-
|
| 346 |
-
|
| 347 |
-
|
| 348 |
-
|
| 349 |
-
|
| 350 |
-
|
| 351 |
-
const
|
| 352 |
-
|
| 353 |
-
|
| 354 |
-
|
| 355 |
-
nn.layers=[]; nn.weights=[]; nn.biases=[]; nn.activations=[];
|
| 356 |
-
const numInputs=trainingData[0].input.length;
|
| 357 |
-
nn.layer(numInputs, layerCfg[0].size, layerCfg[0].activation);
|
| 358 |
-
for(let i=1;i<layerCfg.length;i++) nn.layer(layerCfg[i-1].size, layerCfg[i].size, layerCfg[i].activation);
|
| 359 |
-
nn.layer(layerCfg[layerCfg.length-1].size, 1, 'tanh');
|
| 360 |
-
|
| 361 |
-
const opts={
|
| 362 |
-
epochs:parseInt(el.epochs.value,10),
|
| 363 |
-
learningRate:parseFloat(el.learningRate.value),
|
| 364 |
-
batchSize:parseInt(el.batchSize.value,10),
|
| 365 |
-
printEveryEpochs:1,
|
| 366 |
-
testSet:testData.length?testData:null,
|
| 367 |
-
callback:async (epoch,trainLoss,testLoss)=>{
|
| 368 |
lossHistory.push({train:trainLoss,test:testLoss});
|
|
|
|
|
|
|
| 369 |
drawLossGraph();
|
| 370 |
-
|
| 371 |
-
|
| 372 |
-
|
| 373 |
-
|
| 374 |
-
|
| 375 |
-
|
| 376 |
-
}
|
| 377 |
-
};
|
| 378 |
-
|
| 379 |
-
try{ el.trainButton.disabled=true; el.trainButton.textContent='Training…'; await nn.train(trainingData,opts);
|
| 380 |
-
el.stats.innerHTML+=`<div><b>Status</b></div><div>Model trained</div>`;
|
| 381 |
-
}catch(e){ console.error('Training error:',e);
|
| 382 |
-
el.stats.innerHTML+=`<div><b>Error</b></div><div>${e.message}</div>`;
|
| 383 |
-
}finally{ el.trainButton.disabled=false; el.trainButton.textContent='Train'; }
|
| 384 |
}
|
| 385 |
|
| 386 |
-
function
|
| 387 |
-
|
| 388 |
-
|
| 389 |
-
|
| 390 |
-
|
| 391 |
-
|
| 392 |
-
|
| 393 |
-
|
| 394 |
-
|
| 395 |
-
|
| 396 |
-
for(let i=0;i<inSize;i++){ const y=pad+(inSize>1?(H*i)/(inSize-1):H/2); inNodes.push({x:inX,y,val:nn.lastActivations[0][i]||0}); }
|
| 397 |
-
layers.push(inNodes);
|
| 398 |
-
|
| 399 |
-
// hidden(s)
|
| 400 |
-
for(let i=1;i<nn.lastActivations.length-1;i++){
|
| 401 |
-
const L=nn.lastActivations[i]; const nodes=[]; const x=pad+(W*i)/(nn.lastActivations.length-1);
|
| 402 |
-
for(let j=0;j<L.length;j++){ const y=pad+(L.length>1?(H*j)/(L.length-1):H/2); nodes.push({x,y,val:L[j]}); }
|
| 403 |
-
layers.push(nodes);
|
| 404 |
-
}
|
| 405 |
-
|
| 406 |
-
// output
|
| 407 |
-
const outX=networkCanvas.width-pad; const outY=pad+H/2; layers.push([{x:outX,y:outY,val:nn.lastActivations.at(-1)[0]||0}]);
|
| 408 |
-
|
| 409 |
-
// connections
|
| 410 |
-
ctx.lineWidth=1;
|
| 411 |
-
for(let i=0;i<layers.length-1;i++){
|
| 412 |
-
const A=layers[i], B=layers[i+1], Wmat=nn.weights[i];
|
| 413 |
-
for(let j=0;j<A.length;j++) for(let k=0;k<B.length;k++){
|
| 414 |
-
const w=Wmat[k][j]; const sig=Math.abs((A[j].val||0)*w); const op=Math.min(Math.max(sig,0.06),1);
|
| 415 |
-
ctx.strokeStyle=`rgba(255,255,255,${op})`; ctx.beginPath(); ctx.moveTo(A[j].x,A[j].y); ctx.lineTo(B[k].x,B[k].y); ctx.stroke();
|
| 416 |
-
}
|
| 417 |
-
}
|
| 418 |
-
// nodes
|
| 419 |
-
for(const L of layers){ for(const n of L){ const r=3.5, op=Math.min(Math.max(Math.abs(n.val),0.3),1);
|
| 420 |
-
ctx.fillStyle=`rgba(255,255,255,${op})`; ctx.beginPath(); ctx.arc(n.x,n.y,r,0,Math.PI*2); ctx.fill();
|
| 421 |
-
ctx.strokeStyle='rgba(255,255,255,1)'; ctx.lineWidth=.8; ctx.stroke();
|
| 422 |
-
}}
|
| 423 |
}
|
| 424 |
|
| 425 |
-
function
|
| 426 |
-
|
| 427 |
-
|
|
|
|
| 428 |
}
|
| 429 |
|
| 430 |
-
|
| 431 |
-
|
| 432 |
-
|
| 433 |
-
|
| 434 |
-
|
| 435 |
-
el.
|
| 436 |
-
el.
|
| 437 |
-
el.
|
| 438 |
-
|
| 439 |
-
|
| 440 |
-
|
| 441 |
-
|
| 442 |
-
});
|
| 443 |
-
el.saveButton.addEventListener('click',()=>nn.save('model'));
|
| 444 |
-
el.loadButton.addEventListener('click',()=>nn.load(()=>{ el.stats.innerHTML+=`<div><b>Status</b></div><div>Model loaded</div>`; }));
|
| 445 |
|
| 446 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 447 |
|
| 448 |
-
|
| 449 |
-
|
| 450 |
});
|
| 451 |
-
|
| 452 |
</body>
|
| 453 |
</html>
|
|
|
|
| 1 |
<!DOCTYPE html>
|
| 2 |
+
<html lang="en" data-theme="dark">
|
| 3 |
<head>
|
| 4 |
<meta charset="utf-8" />
|
|
|
|
| 5 |
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
| 6 |
+
<meta name="color-scheme" content="light dark" />
|
| 7 |
+
<meta name="theme-color" content="#09090b" />
|
| 8 |
+
<title>Carbono — Neural Playground · Mono</title>
|
| 9 |
<style>
|
| 10 |
+
:root {
|
| 11 |
+
--primary: #0a0a0a;
|
| 12 |
+
--primary-strong: #000000;
|
| 13 |
+
--primary-soft: #f4f4f5;
|
| 14 |
+
--primary-ring: rgba(9, 9, 11, 0.12);
|
| 15 |
+
--surface: #ffffff;
|
| 16 |
+
--surface-raised: #fafafa;
|
| 17 |
+
--surface-soft: #f7f7f8;
|
| 18 |
+
--background: #f4f4f5;
|
| 19 |
+
--text: #09090b;
|
| 20 |
+
--text-secondary: #71717a;
|
| 21 |
+
--text-tertiary: #a1a1aa;
|
| 22 |
+
--border: #e4e4e7;
|
| 23 |
+
--border-strong: #d4d4d8;
|
| 24 |
+
--success: #18181b;
|
| 25 |
+
--success-soft: #f4f4f5;
|
| 26 |
+
--danger: #dc2626;
|
| 27 |
+
--danger-soft: #fef2f2;
|
| 28 |
+
--warning: #52525b;
|
| 29 |
+
--radius-sm: 7px;
|
| 30 |
+
--radius: 10px;
|
| 31 |
+
--radius-lg: 12px;
|
| 32 |
+
--shadow-sm: 0 1px 2px rgba(0,0,0,.03);
|
| 33 |
+
--shadow-md: 0 12px 32px rgba(0,0,0,.10);
|
| 34 |
+
--ease: cubic-bezier(.22,.61,.36,1);
|
| 35 |
+
--sidebar: 316px;
|
| 36 |
+
--aside: 292px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 37 |
}
|
| 38 |
+
|
| 39 |
+
html[data-theme="dark"] {
|
| 40 |
+
--primary: #fafafa;
|
| 41 |
+
--primary-strong: #ffffff;
|
| 42 |
+
--primary-soft: #1f1f22;
|
| 43 |
+
--primary-ring: rgba(255,255,255,.13);
|
| 44 |
+
--surface: #111113;
|
| 45 |
+
--surface-raised: #161618;
|
| 46 |
+
--surface-soft: #0d0d0f;
|
| 47 |
+
--background: #09090b;
|
| 48 |
+
--text: #fafafa;
|
| 49 |
+
--text-secondary: #a1a1aa;
|
| 50 |
+
--text-tertiary: #71717a;
|
| 51 |
+
--border: #27272a;
|
| 52 |
+
--border-strong: #3f3f46;
|
| 53 |
+
--success: #fafafa;
|
| 54 |
+
--success-soft: #18181b;
|
| 55 |
+
--danger: #f87171;
|
| 56 |
+
--danger-soft: rgba(248,113,113,.08);
|
| 57 |
+
--warning: #d4d4d8;
|
| 58 |
+
--shadow-sm: 0 1px 2px rgba(0,0,0,.35);
|
| 59 |
+
--shadow-md: 0 18px 48px rgba(0,0,0,.40);
|
| 60 |
+
}
|
| 61 |
+
|
| 62 |
+
@media (prefers-color-scheme: dark) {
|
| 63 |
+
html:not([data-theme="light"]) {
|
| 64 |
+
--primary: #fafafa;
|
| 65 |
+
--primary-strong: #ffffff;
|
| 66 |
+
--primary-soft: #1f1f22;
|
| 67 |
+
--primary-ring: rgba(255,255,255,.13);
|
| 68 |
+
--surface: #111113;
|
| 69 |
+
--surface-raised: #161618;
|
| 70 |
+
--surface-soft: #0d0d0f;
|
| 71 |
+
--background: #09090b;
|
| 72 |
+
--text: #fafafa;
|
| 73 |
+
--text-secondary: #a1a1aa;
|
| 74 |
+
--text-tertiary: #71717a;
|
| 75 |
+
--border: #27272a;
|
| 76 |
+
--border-strong: #3f3f46;
|
| 77 |
+
--success: #fafafa;
|
| 78 |
+
--success-soft: #18181b;
|
| 79 |
+
--danger: #f87171;
|
| 80 |
+
--danger-soft: rgba(248,113,113,.08);
|
| 81 |
+
--warning: #d4d4d8;
|
| 82 |
+
--shadow-sm: 0 1px 2px rgba(0,0,0,.35);
|
| 83 |
+
--shadow-md: 0 18px 48px rgba(0,0,0,.40);
|
| 84 |
+
}
|
| 85 |
+
}
|
| 86 |
+
|
| 87 |
+
*, *::before, *::after { box-sizing: border-box; }
|
| 88 |
+
html { min-width: 320px; background: var(--background); }
|
| 89 |
+
body {
|
| 90 |
+
min-height: 100vh;
|
| 91 |
+
margin: 0;
|
| 92 |
+
background:
|
| 93 |
+
radial-gradient(900px 420px at 50% -190px, rgba(255,255,255,.035), transparent 64%),
|
| 94 |
+
var(--background);
|
| 95 |
+
color: var(--text);
|
| 96 |
+
font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
| 97 |
+
font-size: 14px;
|
| 98 |
+
line-height: 1.5;
|
| 99 |
+
-webkit-font-smoothing: antialiased;
|
| 100 |
+
text-rendering: optimizeLegibility;
|
| 101 |
+
}
|
| 102 |
+
|
| 103 |
+
button, input, textarea, select { font: inherit; }
|
| 104 |
+
button { -webkit-tap-highlight-color: transparent; }
|
| 105 |
+
::selection { background: var(--primary-ring); }
|
| 106 |
+
|
| 107 |
+
.app-shell { min-height: 100vh; }
|
| 108 |
+
|
| 109 |
+
.topbar {
|
| 110 |
+
height: 66px;
|
| 111 |
+
position: sticky;
|
| 112 |
+
top: 0;
|
| 113 |
+
z-index: 30;
|
| 114 |
+
display: flex;
|
| 115 |
+
align-items: center;
|
| 116 |
+
justify-content: space-between;
|
| 117 |
+
gap: 18px;
|
| 118 |
+
padding: 0 24px;
|
| 119 |
+
border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
|
| 120 |
+
background: color-mix(in srgb, var(--background) 90%, transparent);
|
| 121 |
+
backdrop-filter: blur(14px);
|
| 122 |
+
-webkit-backdrop-filter: blur(14px);
|
| 123 |
+
}
|
| 124 |
+
|
| 125 |
+
.brand-wrap, .top-actions, .brand-meta, .cluster { display: flex; align-items: center; }
|
| 126 |
+
.brand-wrap { gap: 12px; min-width: 0; }
|
| 127 |
+
.brand-mark {
|
| 128 |
+
width: 34px; height: 34px; flex: 0 0 auto;
|
| 129 |
+
display: grid; place-items: center;
|
| 130 |
+
border-radius: 8px;
|
| 131 |
+
color: var(--background);
|
| 132 |
+
background: var(--text);
|
| 133 |
+
border: 1px solid color-mix(in srgb, var(--text) 92%, transparent);
|
| 134 |
+
box-shadow: none;
|
| 135 |
+
}
|
| 136 |
+
.brand-mark svg { width: 18px; height: 18px; }
|
| 137 |
+
.brand-copy { min-width: 0; }
|
| 138 |
+
.brand-name { font-size: 15px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; }
|
| 139 |
+
.brand-sub { color: var(--text-secondary); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
|
| 140 |
+
.brand-meta { gap: 9px; }
|
| 141 |
+
|
| 142 |
+
.status-pill {
|
| 143 |
+
display: inline-flex; align-items: center; gap: 7px;
|
| 144 |
+
min-height: 28px; padding: 0 10px;
|
| 145 |
+
border: 1px solid var(--border);
|
| 146 |
+
border-radius: 999px;
|
| 147 |
+
color: var(--text-secondary);
|
| 148 |
+
background: color-mix(in srgb, var(--surface) 76%, transparent);
|
| 149 |
+
font-size: 12px; font-weight: 600;
|
| 150 |
+
}
|
| 151 |
+
.status-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 12%, transparent); }
|
| 152 |
+
.status-pill.training .status-dot { background: var(--primary); animation: breathe 1.8s ease-in-out infinite; }
|
| 153 |
+
.status-pill.error .status-dot { background: var(--danger); }
|
| 154 |
+
|
| 155 |
+
.top-actions { gap: 8px; }
|
| 156 |
+
.icon-btn, .btn {
|
| 157 |
+
border: 1px solid var(--border);
|
| 158 |
+
background: var(--surface);
|
| 159 |
+
color: var(--text);
|
| 160 |
+
cursor: pointer;
|
| 161 |
+
transition: transform .16s var(--ease), border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease;
|
| 162 |
+
}
|
| 163 |
+
.icon-btn:hover, .btn.secondary:hover { border-color: var(--border-strong); background: var(--surface-raised); box-shadow: var(--shadow-sm); transform: translateY(-1px); }
|
| 164 |
+
.icon-btn:active, .btn:active { transform: translateY(0) scale(.985); }
|
| 165 |
+
.icon-btn:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible {
|
| 166 |
+
outline: 0; box-shadow: 0 0 0 3px var(--primary-ring); border-color: var(--primary);
|
| 167 |
+
}
|
| 168 |
+
.icon-btn {
|
| 169 |
+
width: 36px; height: 36px; display: grid; place-items: center;
|
| 170 |
+
border-radius: 11px;
|
| 171 |
+
}
|
| 172 |
+
.icon-btn svg, .btn svg { width: 16px; height: 16px; flex: 0 0 auto; }
|
| 173 |
+
|
| 174 |
+
.btn {
|
| 175 |
+
min-height: 38px;
|
| 176 |
+
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
|
| 177 |
+
padding: 0 13px;
|
| 178 |
+
border-radius: 11px;
|
| 179 |
+
font-weight: 650;
|
| 180 |
+
letter-spacing: -.005em;
|
| 181 |
+
white-space: nowrap;
|
| 182 |
+
}
|
| 183 |
+
.btn.primary {
|
| 184 |
+
color: var(--background);
|
| 185 |
+
border-color: var(--primary);
|
| 186 |
+
background: var(--primary);
|
| 187 |
+
box-shadow: none;
|
| 188 |
+
}
|
| 189 |
+
.btn.primary:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--primary) 90%, var(--background)); box-shadow: 0 4px 14px rgba(0,0,0,.16); }
|
| 190 |
+
.btn.ghost { background: transparent; }
|
| 191 |
+
.btn:disabled { cursor: not-allowed; opacity: .58; transform: none !important; box-shadow: none !important; }
|
| 192 |
+
.btn.block { width: 100%; }
|
| 193 |
+
|
| 194 |
+
.workspace {
|
| 195 |
+
width: min(1520px, 100%);
|
| 196 |
+
margin: 0 auto;
|
| 197 |
+
padding: 18px 20px 30px;
|
| 198 |
+
display: grid;
|
| 199 |
+
grid-template-columns: minmax(0, 1fr) var(--aside);
|
| 200 |
+
gap: 14px;
|
| 201 |
+
align-items: start;
|
| 202 |
+
}
|
| 203 |
+
|
| 204 |
+
.column { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
|
| 205 |
+
.sticky-col { position: sticky; top: 88px; }
|
| 206 |
+
|
| 207 |
+
.settings-drawer {
|
| 208 |
+
position: fixed;
|
| 209 |
+
top: 0;
|
| 210 |
+
left: 0;
|
| 211 |
+
bottom: 0;
|
| 212 |
+
width: min(380px, calc(100vw - 20px));
|
| 213 |
+
z-index: 80;
|
| 214 |
+
display: flex;
|
| 215 |
+
flex-direction: column;
|
| 216 |
+
background: color-mix(in srgb, var(--background) 92%, var(--surface));
|
| 217 |
+
border-right: 1px solid var(--border);
|
| 218 |
+
box-shadow: var(--shadow-md);
|
| 219 |
+
backdrop-filter: blur(18px);
|
| 220 |
+
-webkit-backdrop-filter: blur(18px);
|
| 221 |
+
transform: translateX(-102%);
|
| 222 |
+
transition: transform .24s var(--ease);
|
| 223 |
+
}
|
| 224 |
+
.settings-drawer.open { transform: translateX(0); }
|
| 225 |
+
.drawer-overlay {
|
| 226 |
+
position: fixed;
|
| 227 |
+
inset: 0;
|
| 228 |
+
z-index: 70;
|
| 229 |
+
background: rgba(0,0,0,.48);
|
| 230 |
+
opacity: 0;
|
| 231 |
+
pointer-events: none;
|
| 232 |
+
transition: opacity .2s ease;
|
| 233 |
+
}
|
| 234 |
+
.drawer-overlay.open { opacity: 1; pointer-events: auto; }
|
| 235 |
+
.drawer-head {
|
| 236 |
+
min-height: 68px;
|
| 237 |
+
padding: 16px 16px 14px;
|
| 238 |
+
display: flex;
|
| 239 |
+
align-items: center;
|
| 240 |
+
justify-content: space-between;
|
| 241 |
+
gap: 12px;
|
| 242 |
+
border-bottom: 1px solid var(--border);
|
| 243 |
+
}
|
| 244 |
+
.drawer-body {
|
| 245 |
+
flex: 1;
|
| 246 |
+
overflow: auto;
|
| 247 |
+
padding: 14px;
|
| 248 |
+
display: flex;
|
| 249 |
+
flex-direction: column;
|
| 250 |
+
gap: 12px;
|
| 251 |
+
}
|
| 252 |
+
.drawer-note { color: var(--text-secondary); font-size: 11.5px; }
|
| 253 |
+
.mini-section {
|
| 254 |
+
border: 1px solid var(--border);
|
| 255 |
+
border-radius: var(--radius);
|
| 256 |
+
background: var(--surface);
|
| 257 |
+
overflow: hidden;
|
| 258 |
+
}
|
| 259 |
+
.mini-section summary {
|
| 260 |
+
list-style: none;
|
| 261 |
+
cursor: pointer;
|
| 262 |
+
padding: 12px 13px;
|
| 263 |
+
display: flex;
|
| 264 |
+
align-items: center;
|
| 265 |
+
justify-content: space-between;
|
| 266 |
+
gap: 10px;
|
| 267 |
+
user-select: none;
|
| 268 |
+
}
|
| 269 |
+
.mini-section summary::-webkit-details-marker { display: none; }
|
| 270 |
+
.mini-summary-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
|
| 271 |
+
.mini-icon {
|
| 272 |
+
width: 28px; height: 28px; flex: 0 0 auto;
|
| 273 |
+
display: grid; place-items: center;
|
| 274 |
+
border-radius: 7px;
|
| 275 |
+
border: 1px solid var(--border);
|
| 276 |
+
background: var(--surface-soft);
|
| 277 |
+
color: var(--text-secondary);
|
| 278 |
+
}
|
| 279 |
+
.mini-icon svg { width: 14px; height: 14px; }
|
| 280 |
+
.mini-copy { min-width: 0; }
|
| 281 |
+
.mini-title { font-size: 12px; font-weight: 700; }
|
| 282 |
+
.mini-subtitle { margin-top: 1px; color: var(--text-secondary); font-size: 11px; }
|
| 283 |
+
.mini-chevron {
|
| 284 |
+
width: 18px; height: 18px; flex: 0 0 auto;
|
| 285 |
+
color: var(--text-tertiary);
|
| 286 |
+
transition: transform .18s ease;
|
| 287 |
+
}
|
| 288 |
+
.mini-section[open] .mini-chevron { transform: rotate(180deg); }
|
| 289 |
+
.mini-content {
|
| 290 |
+
padding: 0 13px 13px;
|
| 291 |
+
border-top: 1px solid var(--border);
|
| 292 |
+
display: flex;
|
| 293 |
+
flex-direction: column;
|
| 294 |
+
gap: 12px;
|
| 295 |
+
}
|
| 296 |
+
|
| 297 |
+
.card {
|
| 298 |
+
position: relative;
|
| 299 |
+
overflow: clip;
|
| 300 |
+
border: 1px solid var(--border);
|
| 301 |
+
border-radius: var(--radius);
|
| 302 |
+
background: var(--surface);
|
| 303 |
+
box-shadow: none;
|
| 304 |
+
animation: cardIn .34s var(--ease) both;
|
| 305 |
+
}
|
| 306 |
+
.column .card:nth-child(2) { animation-delay: .035s; }
|
| 307 |
+
.column .card:nth-child(3) { animation-delay: .07s; }
|
| 308 |
+
|
| 309 |
+
.card-head {
|
| 310 |
+
min-height: 54px;
|
| 311 |
+
padding: 13px 15px;
|
| 312 |
+
display: flex; align-items: center; justify-content: space-between; gap: 12px;
|
| 313 |
+
border-bottom: 1px solid var(--border);
|
| 314 |
+
}
|
| 315 |
+
.card-title-wrap { min-width: 0; }
|
| 316 |
+
.card-title { font-size: 13px; font-weight: 750; letter-spacing: -.01em; }
|
| 317 |
+
.card-subtitle { margin-top: 2px; color: var(--text-secondary); font-size: 11.5px; }
|
| 318 |
+
.card-body { padding: 15px; }
|
| 319 |
+
.card-body.compact { padding: 12px 15px; }
|
| 320 |
+
|
| 321 |
+
.section-label {
|
| 322 |
+
margin: 0 0 8px;
|
| 323 |
+
color: var(--text-secondary);
|
| 324 |
+
font-size: 11px;
|
| 325 |
+
font-weight: 700;
|
| 326 |
+
letter-spacing: .055em;
|
| 327 |
+
text-transform: uppercase;
|
| 328 |
+
}
|
| 329 |
+
|
| 330 |
+
.field { display: flex; flex-direction: column; gap: 6px; }
|
| 331 |
+
.field + .field { margin-top: 13px; }
|
| 332 |
+
.field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
|
| 333 |
+
.field-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
|
| 334 |
+
label { color: var(--text); font-size: 12px; font-weight: 650; }
|
| 335 |
+
.field-hint, .hint { color: var(--text-secondary); font-size: 11.5px; }
|
| 336 |
+
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; }
|
| 337 |
+
|
| 338 |
+
input, textarea, select {
|
| 339 |
+
width: 100%;
|
| 340 |
+
color: var(--text);
|
| 341 |
+
border: 1px solid var(--border);
|
| 342 |
+
border-radius: var(--radius-sm);
|
| 343 |
+
background: var(--surface-soft);
|
| 344 |
+
transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
|
| 345 |
+
}
|
| 346 |
+
input, select { height: 38px; padding: 0 10px; }
|
| 347 |
+
textarea { min-height: 102px; padding: 10px 11px; line-height: 1.55; resize: vertical; }
|
| 348 |
+
input:hover, textarea:hover, select:hover { border-color: var(--border-strong); }
|
| 349 |
+
input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-ring); }
|
| 350 |
+
input::placeholder, textarea::placeholder { color: var(--text-tertiary); }
|
| 351 |
+
|
| 352 |
+
.segmented {
|
| 353 |
+
display: grid; grid-template-columns: 1fr 1fr;
|
| 354 |
+
gap: 4px;
|
| 355 |
+
padding: 4px;
|
| 356 |
+
border-radius: 9px;
|
| 357 |
+
background: var(--surface-soft);
|
| 358 |
+
border: 1px solid var(--border);
|
| 359 |
+
margin-bottom: 13px;
|
| 360 |
+
}
|
| 361 |
+
.seg-btn {
|
| 362 |
+
height: 30px; border: 0; border-radius: 8px;
|
| 363 |
+
background: transparent; color: var(--text-secondary);
|
| 364 |
+
cursor: pointer; font-size: 12px; font-weight: 650;
|
| 365 |
+
transition: background .16s ease, color .16s ease, box-shadow .16s ease;
|
| 366 |
+
}
|
| 367 |
+
.seg-btn.active { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); }
|
| 368 |
+
.data-pane[hidden] { display: none; }
|
| 369 |
+
|
| 370 |
+
.architecture-stack { display: flex; flex-direction: column; gap: 8px; }
|
| 371 |
+
.layer-row {
|
| 372 |
+
display: grid; grid-template-columns: 34px minmax(0,1fr) minmax(0,1fr);
|
| 373 |
+
gap: 8px; align-items: center;
|
| 374 |
+
padding: 8px;
|
| 375 |
+
border-radius: 8px;
|
| 376 |
+
border: 1px solid var(--border);
|
| 377 |
+
background: var(--surface-soft);
|
| 378 |
+
animation: layerIn .25s var(--ease) both;
|
| 379 |
+
}
|
| 380 |
+
.layer-index {
|
| 381 |
+
width: 30px; height: 30px; display: grid; place-items: center;
|
| 382 |
+
border-radius: 7px; color: var(--text); background: var(--primary-soft); border: 1px solid var(--border);
|
| 383 |
+
font-weight: 750; font-size: 11px;
|
| 384 |
+
}
|
| 385 |
+
.layer-row input, .layer-row select { height: 34px; background: var(--surface); }
|
| 386 |
+
|
| 387 |
+
.hero-card .card-head { min-height: 64px; }
|
| 388 |
+
.training-heading { display: flex; align-items: center; gap: 10px; }
|
| 389 |
+
.training-icon {
|
| 390 |
+
width: 32px; height: 32px; display: grid; place-items: center;
|
| 391 |
+
border-radius: 8px; color: var(--text); background: var(--primary-soft); border: 1px solid var(--border);
|
| 392 |
+
}
|
| 393 |
+
.training-icon svg { width: 16px; height: 16px; }
|
| 394 |
+
|
| 395 |
+
.metric-row {
|
| 396 |
+
display: grid;
|
| 397 |
+
grid-template-columns: repeat(4, minmax(0,1fr));
|
| 398 |
+
gap: 10px;
|
| 399 |
+
padding: 14px 15px 0;
|
| 400 |
+
}
|
| 401 |
+
.metric {
|
| 402 |
+
min-width: 0;
|
| 403 |
+
padding: 11px 12px;
|
| 404 |
+
border: 1px solid var(--border);
|
| 405 |
+
border-radius: 8px;
|
| 406 |
+
background: var(--surface-soft);
|
| 407 |
+
}
|
| 408 |
+
.metric-label { color: var(--text-secondary); font-size: 10.5px; font-weight: 650; }
|
| 409 |
+
.metric-value { margin-top: 3px; font-size: 15px; font-weight: 750; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; }
|
| 410 |
+
.metric-value.good { color: var(--success); }
|
| 411 |
+
|
| 412 |
+
.chart-wrap {
|
| 413 |
+
position: relative;
|
| 414 |
+
height: 330px;
|
| 415 |
+
margin: 14px 15px 0;
|
| 416 |
+
overflow: hidden;
|
| 417 |
+
border: 1px solid var(--border);
|
| 418 |
+
border-radius: 9px;
|
| 419 |
+
background:
|
| 420 |
+
linear-gradient(var(--surface-soft), var(--surface-soft)) padding-box,
|
| 421 |
+
var(--surface-soft);
|
| 422 |
+
}
|
| 423 |
+
.chart-wrap.network { height: 280px; }
|
| 424 |
+
canvas { width: 100%; height: 100%; display: block; }
|
| 425 |
+
.chart-empty {
|
| 426 |
+
position: absolute; inset: 0;
|
| 427 |
+
display: grid; place-items: center;
|
| 428 |
+
pointer-events: none;
|
| 429 |
+
transition: opacity .2s ease;
|
| 430 |
+
}
|
| 431 |
+
.chart-empty.hidden { opacity: 0; }
|
| 432 |
+
.empty-inner { text-align: center; max-width: 230px; padding: 24px; }
|
| 433 |
+
.empty-icon {
|
| 434 |
+
width: 42px; height: 42px; display: grid; place-items: center;
|
| 435 |
+
margin: 0 auto 10px; border-radius: 13px;
|
| 436 |
+
color: var(--text-secondary); border: 1px solid var(--border); background: var(--surface);
|
| 437 |
+
box-shadow: none;
|
| 438 |
+
}
|
| 439 |
+
.empty-icon svg { width: 18px; height: 18px; }
|
| 440 |
+
.empty-title { font-size: 12px; font-weight: 700; }
|
| 441 |
+
.empty-copy { margin-top: 4px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; }
|
| 442 |
+
|
| 443 |
+
.chart-footer {
|
| 444 |
+
padding: 12px 15px 15px;
|
| 445 |
+
display: flex; align-items: center; justify-content: space-between; gap: 14px;
|
| 446 |
+
}
|
| 447 |
+
.legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-secondary); font-size: 11.5px; }
|
| 448 |
+
.legend-item { display: flex; align-items: center; gap: 6px; }
|
| 449 |
+
.legend-dot { width: 14px; height: 2px; border-radius: 999px; background: var(--primary); }
|
| 450 |
+
.legend-dot.val { background: var(--text-tertiary); }
|
| 451 |
+
.progress-area { flex: 1; min-width: 120px; max-width: 260px; }
|
| 452 |
+
.progress-meta { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 10.5px; margin-bottom: 6px; }
|
| 453 |
+
.progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); }
|
| 454 |
+
.progress-value { height: 100%; width: 0%; border-radius: inherit; background: var(--primary); transition: width .22s linear; }
|
| 455 |
+
|
| 456 |
+
.action-stack { display: grid; gap: 9px; }
|
| 457 |
+
.secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
|
| 458 |
+
|
| 459 |
+
.predict-input-wrap { position: relative; }
|
| 460 |
+
.predict-input-wrap input { padding-right: 42px; }
|
| 461 |
+
.predict-inline-btn {
|
| 462 |
+
position: absolute; right: 5px; top: 5px;
|
| 463 |
+
width: 28px; height: 28px; display: grid; place-items: center;
|
| 464 |
+
border: 1px solid var(--primary); border-radius: 6px; color: var(--background); background: var(--primary); cursor: pointer;
|
| 465 |
+
transition: transform .16s var(--ease), filter .16s ease;
|
| 466 |
+
}
|
| 467 |
+
.predict-inline-btn:hover { filter: brightness(1.03); transform: translateX(1px); }
|
| 468 |
+
.predict-inline-btn svg { width: 14px; height: 14px; }
|
| 469 |
+
|
| 470 |
+
.prediction-result {
|
| 471 |
+
margin-top: 11px;
|
| 472 |
+
min-height: 78px;
|
| 473 |
+
padding: 12px;
|
| 474 |
+
display: flex; flex-direction: column; justify-content: center;
|
| 475 |
+
border: 1px solid var(--border);
|
| 476 |
+
border-radius: 9px;
|
| 477 |
+
background: var(--surface-soft);
|
| 478 |
+
transition: border-color .2s ease, background .2s ease;
|
| 479 |
+
}
|
| 480 |
+
.prediction-result.has-value { border-color: var(--border-strong); background: var(--primary-soft); }
|
| 481 |
+
.result-label { color: var(--text-secondary); font-size: 10.5px; font-weight: 650; }
|
| 482 |
+
.result-value { margin-top: 2px; font-size: 24px; line-height: 1.15; font-weight: 780; letter-spacing: -.04em; }
|
| 483 |
+
.result-copy { margin-top: 3px; color: var(--text-secondary); font-size: 11px; }
|
| 484 |
+
|
| 485 |
+
.model-summary { display: grid; gap: 0; }
|
| 486 |
+
.summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); }
|
| 487 |
+
.summary-row:first-child { padding-top: 0; }
|
| 488 |
+
.summary-row:last-child { border-bottom: 0; padding-bottom: 0; }
|
| 489 |
+
.summary-key { color: var(--text-secondary); font-size: 11.5px; }
|
| 490 |
+
.summary-value { min-width: 0; text-align: right; font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; }
|
| 491 |
+
|
| 492 |
+
.repo-link { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; }
|
| 493 |
+
.repo-link:hover .repo-name { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
|
| 494 |
+
.repo-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); }
|
| 495 |
+
.repo-icon svg { width: 16px; height: 16px; }
|
| 496 |
+
.repo-copy { flex: 1; min-width: 0; }
|
| 497 |
+
.repo-name { font-size: 12px; font-weight: 700; transition: color .16s ease; }
|
| 498 |
+
.repo-sub { margin-top: 1px; color: var(--text-secondary); font-size: 10.5px; }
|
| 499 |
+
.repo-arrow { color: var(--text-tertiary); }
|
| 500 |
+
|
| 501 |
+
.kbd { padding: 2px 5px; border: 1px solid var(--border); border-bottom-color: var(--border-strong); border-radius: 6px; background: var(--surface-soft); color: var(--text-secondary); font-size: 10px; font-family: ui-monospace, monospace; }
|
| 502 |
+
|
| 503 |
+
.toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; pointer-events: none; }
|
| 504 |
+
.toast {
|
| 505 |
+
min-width: 250px; max-width: 360px;
|
| 506 |
+
display: flex; gap: 10px; align-items: flex-start;
|
| 507 |
+
padding: 11px 12px;
|
| 508 |
+
border: 1px solid var(--border);
|
| 509 |
+
border-radius: 13px;
|
| 510 |
+
background: color-mix(in srgb, var(--surface) 97%, transparent);
|
| 511 |
+
box-shadow: var(--shadow-md);
|
| 512 |
+
backdrop-filter: blur(16px);
|
| 513 |
+
animation: toastIn .3s var(--ease) both;
|
| 514 |
+
pointer-events: auto;
|
| 515 |
+
}
|
| 516 |
+
.toast-icon { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 6px; background: var(--primary-soft); color: var(--text); border: 1px solid var(--border); }
|
| 517 |
+
.toast.success .toast-icon { color: var(--success); background: var(--success-soft); }
|
| 518 |
+
.toast.error .toast-icon { color: var(--danger); background: var(--danger-soft); }
|
| 519 |
+
.toast-title { font-size: 11.5px; font-weight: 750; }
|
| 520 |
+
.toast-copy { margin-top: 2px; color: var(--text-secondary); font-size: 11px; }
|
| 521 |
+
.toast.leaving { animation: toastOut .24s ease forwards; }
|
| 522 |
+
|
| 523 |
+
.mobile-train { display: none; }
|
| 524 |
+
.spin { animation: spin .8s linear infinite; }
|
| 525 |
+
|
| 526 |
+
@keyframes cardIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
|
| 527 |
+
@keyframes layerIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } }
|
| 528 |
+
@keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } }
|
| 529 |
+
@keyframes toastOut { to { opacity: 0; transform: translateY(5px) scale(.985); } }
|
| 530 |
+
@keyframes breathe { 50% { box-shadow: 0 0 0 5px var(--primary-ring); } }
|
| 531 |
+
@keyframes spin { to { transform: rotate(360deg); } }
|
| 532 |
+
|
| 533 |
+
@media (max-width: 1220px) {
|
| 534 |
+
.workspace { grid-template-columns: minmax(0, 1fr); }
|
| 535 |
+
.right-col { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); }
|
| 536 |
+
.right-col.sticky-col { position: static; }
|
| 537 |
+
}
|
| 538 |
+
@media (max-width: 900px) {
|
| 539 |
+
.topbar { padding: 0 16px; }
|
| 540 |
+
.brand-meta { display: none; }
|
| 541 |
+
.workspace { display: flex; flex-direction: column; padding: 16px; }
|
| 542 |
+
.column, .main-col, .right-col { width: 100%; }
|
| 543 |
+
.sticky-col { position: static; }
|
| 544 |
+
.right-col { display: grid; grid-template-columns: 1fr 1fr; }
|
| 545 |
+
.right-col .repo-card { grid-column: 1 / -1; }
|
| 546 |
+
.metric-row { grid-template-columns: repeat(2, minmax(0,1fr)); }
|
| 547 |
+
.chart-wrap { height: 300px; }
|
| 548 |
+
.settings-drawer { width: min(420px, calc(100vw - 20px)); }
|
| 549 |
+
}
|
| 550 |
+
@media (max-width: 620px) {
|
| 551 |
+
.topbar { height: 60px; }
|
| 552 |
+
.brand-sub { display: none; }
|
| 553 |
+
.desktop-sample { display: none; }
|
| 554 |
+
.settings-drawer { width: calc(100vw - 16px); }
|
| 555 |
+
.workspace { padding: 12px 12px 88px; gap: 12px; }
|
| 556 |
+
.column { gap: 12px; }
|
| 557 |
+
.right-col { display: flex; }
|
| 558 |
+
.field-row { grid-template-columns: 1fr 1fr; }
|
| 559 |
+
.metric-row { gap: 8px; padding: 12px 12px 0; }
|
| 560 |
+
.chart-wrap, .chart-wrap.network { margin-left: 12px; margin-right: 12px; height: 250px; }
|
| 561 |
+
.chart-footer { align-items: flex-start; flex-direction: column; padding: 11px 12px 13px; }
|
| 562 |
+
.progress-area { width: 100%; max-width: none; }
|
| 563 |
+
.card-head { padding-inline: 13px; }
|
| 564 |
+
.card-body { padding: 13px; }
|
| 565 |
+
.mobile-train {
|
| 566 |
+
display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60;
|
| 567 |
+
padding: 8px; border: 1px solid var(--border); border-radius: 10px;
|
| 568 |
+
background: color-mix(in srgb, var(--background) 78%, transparent);
|
| 569 |
+
backdrop-filter: blur(18px);
|
| 570 |
+
box-shadow: var(--shadow-md);
|
| 571 |
+
}
|
| 572 |
+
.toast-region { left: 12px; right: 12px; bottom: 82px; }
|
| 573 |
+
.toast { min-width: 0; max-width: none; width: 100%; }
|
| 574 |
+
}
|
| 575 |
+
|
| 576 |
+
@media (prefers-reduced-motion: reduce) {
|
| 577 |
+
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
|
| 578 |
+
}
|
| 579 |
+
|
| 580 |
+
/* Carbono Mono — shadcn × Meta dark polish */
|
| 581 |
+
.topbar { border-bottom-color: var(--border); }
|
| 582 |
+
.status-pill { border-radius: 7px; background: var(--surface); }
|
| 583 |
+
.status-dot { box-shadow: none; }
|
| 584 |
+
.status-pill.training .status-dot { animation: monoPulse 1.6s ease-in-out infinite; }
|
| 585 |
+
.icon-btn, .btn { border-radius: 7px; box-shadow: none; }
|
| 586 |
+
.icon-btn:hover, .btn.secondary:hover { box-shadow: none; transform: none; background: var(--surface-raised); }
|
| 587 |
+
.btn.primary:hover { transform: none; }
|
| 588 |
+
input, textarea, select { border-radius: 7px; }
|
| 589 |
+
input:focus, textarea:focus, select:focus,
|
| 590 |
+
.icon-btn:focus-visible, .btn:focus-visible { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary-ring); }
|
| 591 |
+
.card::after {
|
| 592 |
+
content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
|
| 593 |
+
box-shadow: inset 0 1px rgba(255,255,255,.018);
|
| 594 |
+
}
|
| 595 |
+
html[data-theme="light"] .card::after { box-shadow: inset 0 1px rgba(255,255,255,.8); }
|
| 596 |
+
.metric { transition: border-color .16s ease, background .16s ease; }
|
| 597 |
+
.metric:hover { border-color: var(--border-strong); background: var(--surface-raised); }
|
| 598 |
+
.chart-wrap { background: var(--surface-soft); }
|
| 599 |
+
.chart-wrap::before {
|
| 600 |
+
content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .22;
|
| 601 |
+
background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px);
|
| 602 |
+
background-size: 40px 40px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 96%);
|
| 603 |
+
}
|
| 604 |
+
.chart-wrap canvas, .chart-empty { position: relative; z-index: 1; }
|
| 605 |
+
.predict-inline-btn:hover { filter: none; transform: none; opacity: .86; }
|
| 606 |
+
.repo-icon { border-radius: 7px; }
|
| 607 |
+
.kbd { background: var(--surface); }
|
| 608 |
+
@keyframes monoPulse { 50% { opacity: .45; } }
|
| 609 |
</style>
|
| 610 |
</head>
|
| 611 |
<body>
|
| 612 |
+
<div class="app-shell">
|
| 613 |
+
<header class="topbar">
|
| 614 |
+
<div class="brand-wrap">
|
| 615 |
+
<div class="brand-mark" aria-hidden="true">
|
| 616 |
+
<svg viewBox="0 0 24 24" fill="none"><path d="M5 7.5 12 3l7 4.5-7 4.5-7-4.5Z" stroke="currentColor" stroke-width="1.8"/><path d="m5 12 7 4.5 7-4.5M5 16.5 12 21l7-4.5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
| 617 |
+
</div>
|
| 618 |
+
<div class="brand-copy">
|
| 619 |
+
<div class="brand-name">Carbono</div>
|
| 620 |
+
<div class="brand-sub">Neural playground · Learn by seeing</div>
|
| 621 |
+
</div>
|
| 622 |
+
<div class="brand-meta">
|
| 623 |
+
<div id="appStatus" class="status-pill"><span class="status-dot"></span><span id="appStatusText">Ready</span></div>
|
|
|
|
|
|
|
|
|
|
| 624 |
</div>
|
| 625 |
+
</div>
|
| 626 |
+
|
| 627 |
+
<div class="top-actions">
|
| 628 |
+
<button id="loadDataBtn" class="icon-btn desktop-sample" type="button" aria-label="Load sample data" title="Load sample data">
|
| 629 |
+
<svg viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 19h14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
| 630 |
+
</button>
|
| 631 |
+
<button id="settingsButton" class="icon-btn" type="button" aria-label="Open settings" title="Open settings">
|
| 632 |
+
<svg viewBox="0 0 24 24" fill="none"><path d="M4 7h10M4 17h16M14 7h6M4 12h16M9 17h4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/><circle cx="12" cy="7" r="2" stroke="currentColor" stroke-width="1.8"/><circle cx="7" cy="17" r="2" stroke="currentColor" stroke-width="1.8"/><circle cx="16" cy="12" r="2" stroke="currentColor" stroke-width="1.8"/></svg>
|
| 633 |
+
</button>
|
| 634 |
+
<button id="themeButton" class="icon-btn" type="button" aria-label="Toggle theme" title="Toggle theme">
|
| 635 |
+
<svg id="themeIcon" viewBox="0 0 24 24" fill="none"><path d="M12 3a9 9 0 1 0 9 9c0-.35-.02-.7-.06-1.04A7 7 0 0 1 13.04 3.06 9.2 9.2 0 0 0 12 3Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
| 636 |
+
</button>
|
| 637 |
+
</div>
|
| 638 |
+
</header>
|
| 639 |
+
|
| 640 |
+
<div id="drawerOverlay" class="drawer-overlay" hidden></div>
|
| 641 |
+
<aside id="settingsDrawer" class="settings-drawer" aria-hidden="true">
|
| 642 |
+
<div class="drawer-head">
|
| 643 |
+
<div class="card-title-wrap">
|
| 644 |
+
<div class="card-title">Controls</div>
|
| 645 |
+
<div class="drawer-note">Advanced inputs stay here so the main canvas stays clean.</div>
|
| 646 |
+
</div>
|
| 647 |
+
<div class="cluster" style="gap:8px">
|
| 648 |
+
<button id="mobileSampleBtn" class="icon-btn" type="button" aria-label="Load sample data" title="Load sample">
|
| 649 |
+
<svg viewBox="0 0 24 24" fill="none"><path d="M12 3v12m0 0 4-4m-4 4-4-4M5 19h14" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
| 650 |
+
</button>
|
| 651 |
+
<button id="drawerCloseButton" class="icon-btn" type="button" aria-label="Close settings" title="Close settings">
|
| 652 |
+
<svg viewBox="0 0 24 24" fill="none"><path d="M6 6l12 12M18 6 6 18" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/></svg>
|
| 653 |
+
</button>
|
| 654 |
+
</div>
|
| 655 |
+
</div>
|
| 656 |
+
<div class="drawer-body">
|
| 657 |
+
<details class="mini-section" open>
|
| 658 |
+
<summary>
|
| 659 |
+
<div class="mini-summary-main">
|
| 660 |
+
<span class="mini-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M5 19V5h14v14H5Z" stroke="currentColor" stroke-width="1.7"/><path d="M9 9h6M9 13h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg></span>
|
| 661 |
+
<div class="mini-copy"><div class="mini-title">Dataset</div><div class="mini-subtitle">Training and validation rows</div></div>
|
| 662 |
+
</div>
|
| 663 |
+
<svg class="mini-chevron" viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
| 664 |
+
</summary>
|
| 665 |
+
<div class="mini-content">
|
| 666 |
+
<div class="segmented" role="tablist" aria-label="Dataset views">
|
| 667 |
+
<button class="seg-btn active" type="button" data-pane="trainingPane">Training</button>
|
| 668 |
+
<button class="seg-btn" type="button" data-pane="validationPane">Validation</button>
|
| 669 |
+
</div>
|
| 670 |
+
|
| 671 |
+
<div id="trainingPane" class="data-pane">
|
| 672 |
+
<div class="field">
|
| 673 |
+
<div class="field-label-row"><label for="trainingData">Training set</label><span id="trainRows" class="field-hint mono">0 rows</span></div>
|
| 674 |
+
<textarea id="trainingData" class="mono" spellcheck="false" placeholder="1.0, 0.0, 0.0, 0.0 0.7, 0.7, 0.8, 1.0"></textarea>
|
| 675 |
+
<div class="field-hint">Comma-separated features. The last value in each row is the target.</div>
|
| 676 |
+
</div>
|
| 677 |
+
</div>
|
| 678 |
+
|
| 679 |
+
<div id="validationPane" class="data-pane" hidden>
|
| 680 |
+
<div class="field">
|
| 681 |
+
<div class="field-label-row"><label for="testData">Validation set</label><span id="valRows" class="field-hint mono">0 rows</span></div>
|
| 682 |
+
<textarea id="testData" class="mono" spellcheck="false" placeholder="0.4, 0.2, 0.6, 1.0"></textarea>
|
| 683 |
+
<div class="field-hint">Optional. Used to track validation loss while training.</div>
|
| 684 |
+
</div>
|
| 685 |
+
</div>
|
| 686 |
</div>
|
| 687 |
+
</details>
|
| 688 |
+
|
| 689 |
+
<details class="mini-section">
|
| 690 |
+
<summary>
|
| 691 |
+
<div class="mini-summary-main">
|
| 692 |
+
<span class="mini-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M12 3v18M3 12h18" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/><circle cx="12" cy="12" r="7" stroke="currentColor" stroke-width="1.7"/></svg></span>
|
| 693 |
+
<div class="mini-copy"><div class="mini-title">Training setup</div><div class="mini-subtitle">Epochs, rate, batch size</div></div>
|
| 694 |
+
</div>
|
| 695 |
+
<svg class="mini-chevron" viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
| 696 |
+
</summary>
|
| 697 |
+
<div class="mini-content">
|
| 698 |
+
<div class="field-row">
|
| 699 |
+
<div class="field"><label for="epochs">Epochs</label><input type="number" id="epochs" value="50" min="1" /></div>
|
| 700 |
+
<div class="field"><label for="learningRate">Learning rate</label><input type="number" id="learningRate" value="0.1" min="0.000001" step="0.001" /></div>
|
| 701 |
+
<div class="field"><label for="batchSize">Batch size</label><input type="number" id="batchSize" value="8" min="1" /></div>
|
| 702 |
+
<div class="field"><label for="numHiddenLayers">Hidden layers</label><input type="number" id="numHiddenLayers" value="1" min="1" max="4" /></div>
|
| 703 |
+
</div>
|
| 704 |
</div>
|
| 705 |
+
</details>
|
| 706 |
+
|
| 707 |
+
<details class="mini-section">
|
| 708 |
+
<summary>
|
| 709 |
+
<div class="mini-summary-main">
|
| 710 |
+
<span class="mini-icon"><svg viewBox="0 0 24 24" fill="none"><circle cx="5" cy="12" r="2" stroke="currentColor" stroke-width="1.6"/><circle cx="12" cy="6" r="2" stroke="currentColor" stroke-width="1.6"/><circle cx="12" cy="18" r="2" stroke="currentColor" stroke-width="1.6"/><circle cx="19" cy="12" r="2" stroke="currentColor" stroke-width="1.6"/><path d="m6.8 11 3.4-3.7M6.8 13l3.4 3.7m3.6-9.4 3.4 3.7m-3.4 5.7 3.4-3.7" stroke="currentColor" stroke-width="1.4"/></svg></span>
|
| 711 |
+
<div class="mini-copy"><div class="mini-title">Architecture</div><div class="mini-subtitle">Shape each hidden layer</div></div>
|
| 712 |
+
</div>
|
| 713 |
+
<svg class="mini-chevron" viewBox="0 0 24 24" fill="none"><path d="m6 9 6 6 6-6" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>
|
| 714 |
+
</summary>
|
| 715 |
+
<div class="mini-content">
|
| 716 |
+
<div id="hiddenLayersConfig" class="architecture-stack"></div>
|
| 717 |
</div>
|
| 718 |
+
</details>
|
| 719 |
+
</div>
|
| 720 |
+
</aside>
|
| 721 |
+
|
| 722 |
+
<main class="workspace">
|
| 723 |
+
<section class="column main-col">
|
| 724 |
+
<section class="card hero-card">
|
| 725 |
+
<div class="card-head">
|
| 726 |
+
<div class="training-heading">
|
| 727 |
+
<div class="training-icon" aria-hidden="true"><svg viewBox="0 0 24 24" fill="none"><path d="M4 17.5 9 12l3.4 3.4L20 7" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/><path d="M15 7h5v5" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
| 728 |
+
<div class="card-title-wrap"><div class="card-title">Training</div><div class="card-subtitle">Loss updates live every epoch</div></div>
|
| 729 |
+
</div>
|
| 730 |
+
<div class="cluster" style="gap:8px">
|
| 731 |
+
<span class="kbd">⌘/Ctrl + Enter</span>
|
| 732 |
+
</div>
|
| 733 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 734 |
|
| 735 |
+
<div class="metric-row">
|
| 736 |
+
<div class="metric"><div class="metric-label">Epoch</div><div id="metricEpoch" class="metric-value mono">—</div></div>
|
| 737 |
+
<div class="metric"><div class="metric-label">Train loss</div><div id="metricTrain" class="metric-value mono">—</div></div>
|
| 738 |
+
<div class="metric"><div class="metric-label">Val loss</div><div id="metricVal" class="metric-value mono">—</div></div>
|
| 739 |
+
<div class="metric"><div class="metric-label">Parameters</div><div id="metricParams" class="metric-value mono">—</div></div>
|
| 740 |
+
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 741 |
|
| 742 |
+
<div class="chart-wrap">
|
| 743 |
+
<canvas id="lossGraph" aria-label="Training and validation loss graph"></canvas>
|
| 744 |
+
<div id="lossEmpty" class="chart-empty">
|
| 745 |
+
<div class="empty-inner">
|
| 746 |
+
<div class="empty-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M4 17.5 9 12l3.4 3.4L20 7" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></div>
|
| 747 |
+
<div class="empty-title">Your learning curve will appear here</div>
|
| 748 |
+
<div class="empty-copy">Load the sample or paste a dataset, then start training.</div>
|
| 749 |
+
</div>
|
| 750 |
+
</div>
|
| 751 |
+
</div>
|
| 752 |
|
| 753 |
+
<div class="chart-footer">
|
| 754 |
+
<div class="legend"><div class="legend-item"><span class="legend-dot"></span>Train</div><div class="legend-item"><span class="legend-dot val"></span>Validation</div></div>
|
| 755 |
+
<div class="progress-area">
|
| 756 |
+
<div class="progress-meta"><span id="progressLabel">Not started</span><span id="progressPercent" class="mono">0%</span></div>
|
| 757 |
+
<div class="progress-track"><div id="epochBar" class="progress-value"></div></div>
|
| 758 |
+
</div>
|
| 759 |
+
</div>
|
| 760 |
+
</section>
|
| 761 |
|
| 762 |
+
<section class="card">
|
| 763 |
+
<div class="card-head">
|
| 764 |
+
<div class="card-title-wrap"><div class="card-title">Network activity</div><div class="card-subtitle">Activation-weighted connections after prediction</div></div>
|
| 765 |
+
<div id="networkBadge" class="status-pill"><span class="status-dot"></span><span>Awaiting input</span></div>
|
| 766 |
+
</div>
|
| 767 |
+
<div class="chart-wrap network">
|
| 768 |
+
<canvas id="networkGraph" aria-label="Neural network visualization"></canvas>
|
| 769 |
+
<div id="networkEmpty" class="chart-empty">
|
| 770 |
+
<div class="empty-inner">
|
| 771 |
+
<div class="empty-icon"><svg viewBox="0 0 24 24" fill="none"><circle cx="5" cy="12" r="2" stroke="currentColor" stroke-width="1.6"/><circle cx="12" cy="6" r="2" stroke="currentColor" stroke-width="1.6"/><circle cx="12" cy="18" r="2" stroke="currentColor" stroke-width="1.6"/><circle cx="19" cy="12" r="2" stroke="currentColor" stroke-width="1.6"/><path d="m6.8 11 3.4-3.7M6.8 13l3.4 3.7m3.6-9.4 3.4 3.7m-3.4 5.7 3.4-3.7" stroke="currentColor" stroke-width="1.4"/></svg></div>
|
| 772 |
+
<div class="empty-title">Inspect the model visually</div>
|
| 773 |
+
<div class="empty-copy">Train the model, then run a prediction to see activations flow through the network.</div>
|
| 774 |
+
</div>
|
| 775 |
+
</div>
|
| 776 |
+
</div>
|
| 777 |
+
<div class="chart-footer"><div class="hint">Connection opacity reflects activation × weight magnitude.</div></div>
|
| 778 |
+
</section>
|
| 779 |
</section>
|
| 780 |
+
|
| 781 |
+
<aside class="column right-col sticky-col">
|
| 782 |
+
<section class="card">
|
| 783 |
+
<div class="card-head"><div class="card-title-wrap"><div class="card-title">Actions</div><div class="card-subtitle">Train, save, and load</div></div></div>
|
| 784 |
+
<div class="card-body">
|
| 785 |
+
<div class="action-stack">
|
| 786 |
+
<button id="trainButton" class="btn primary block" type="button">
|
| 787 |
+
<svg class="train-icon" viewBox="0 0 24 24" fill="none"><path d="m9 6 9 6-9 6V6Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/></svg>
|
| 788 |
+
<span class="train-label">Train model</span>
|
| 789 |
+
</button>
|
| 790 |
+
<div class="secondary-actions">
|
| 791 |
+
<button id="saveButton" class="btn secondary" type="button"><svg viewBox="0 0 24 24" fill="none"><path d="M5 4h12l2 2v14H5V4Z" stroke="currentColor" stroke-width="1.7" stroke-linejoin="round"/><path d="M8 4v6h8V4m-7 12h6" stroke="currentColor" stroke-width="1.7" stroke-linecap="round"/></svg>Save</button>
|
| 792 |
+
<button id="loadButton" class="btn secondary" type="button"><svg viewBox="0 0 24 24" fill="none"><path d="M5 20h14M12 4v11m0 0-4-4m4 4 4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg>Load</button>
|
| 793 |
+
</div>
|
| 794 |
+
</div>
|
| 795 |
+
</div>
|
| 796 |
+
</section>
|
| 797 |
+
|
| 798 |
+
<section class="card">
|
| 799 |
+
<div class="card-head"><div class="card-title-wrap"><div class="card-title">Predict</div><div class="card-subtitle">Run a feature vector</div></div></div>
|
| 800 |
+
<div class="card-body">
|
| 801 |
+
<div class="field">
|
| 802 |
+
<label for="predictionInput">Input vector</label>
|
| 803 |
+
<div class="predict-input-wrap">
|
| 804 |
+
<input class="mono" type="text" id="predictionInput" placeholder="0.4, 0.2, 0.6" autocomplete="off" />
|
| 805 |
+
<button id="predictButton" class="predict-inline-btn" type="button" aria-label="Predict" title="Predict"><svg viewBox="0 0 24 24" fill="none"><path d="M5 12h13m0 0-5-5m5 5-5 5" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg></button>
|
| 806 |
+
</div>
|
| 807 |
+
</div>
|
| 808 |
+
<div id="predictionResult" class="prediction-result">
|
| 809 |
+
<div class="result-label">Prediction</div>
|
| 810 |
+
<div class="result-value mono">—</div>
|
| 811 |
+
<div class="result-copy">Train or load a model first.</div>
|
| 812 |
+
</div>
|
| 813 |
+
</div>
|
| 814 |
+
</section>
|
| 815 |
+
|
| 816 |
+
<section class="card">
|
| 817 |
+
<div class="card-head"><div class="card-title-wrap"><div class="card-title">Model</div><div class="card-subtitle">Quick summary</div></div></div>
|
| 818 |
+
<div class="card-body compact">
|
| 819 |
+
<div id="stats" class="model-summary">
|
| 820 |
+
<div class="summary-row"><span class="summary-key">Status</span><span class="summary-value">Not trained</span></div>
|
| 821 |
+
<div class="summary-row"><span class="summary-key">Layers</span><span id="summaryLayers" class="summary-value mono">—</span></div>
|
| 822 |
+
<div class="summary-row"><span class="summary-key">Time</span><span id="summaryTime" class="summary-value mono">—</span></div>
|
| 823 |
+
</div>
|
| 824 |
+
</div>
|
| 825 |
+
</section>
|
| 826 |
+
|
| 827 |
+
<section class="card repo-card">
|
| 828 |
+
<div class="card-body compact">
|
| 829 |
+
<a class="repo-link" href="https://github.com/appvoid/carbono" target="_blank" rel="noopener">
|
| 830 |
+
<span class="repo-icon"><svg viewBox="0 0 24 24" fill="none"><path d="M8 18c-4 1.2-4-2-5-2.5M13 21v-3.1c0-.9.1-1.6-.4-2.2 3.1-.35 6.4-1.52 6.4-6.9A5.4 5.4 0 0 0 17.6 5c.14-.35.62-1.78-.14-3.7 0 0-1.18-.38-3.86 1.45a13.3 13.3 0 0 0-7 0C3.9.92 2.72 1.3 2.72 1.3 1.96 3.22 2.44 4.65 2.58 5A5.4 5.4 0 0 0 1.2 8.8c0 5.37 3.27 6.55 6.38 6.9-.4.35-.76.96-.88 1.86V21" transform="translate(2 0) scale(.83)" stroke="currentColor" stroke-width="1.7" stroke-linecap="round" stroke-linejoin="round"/></svg></span>
|
| 831 |
+
<span class="repo-copy"><span class="repo-name">appvoid/carbono</span><span class="repo-sub">View source on GitHub</span></span>
|
| 832 |
+
<span class="repo-arrow">↗</span>
|
| 833 |
+
</a>
|
| 834 |
+
</div>
|
| 835 |
+
</section>
|
| 836 |
+
</aside>
|
| 837 |
+
</main>
|
| 838 |
+
|
| 839 |
+
<div class="mobile-train"><button id="mobileTrainButton" class="btn primary block" type="button">Train model</button></div>
|
| 840 |
+
<div id="toastRegion" class="toast-region" aria-live="polite" aria-atomic="true"></div>
|
| 841 |
</div>
|
| 842 |
|
| 843 |
+
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 844 |
class carbono {
|
| 845 |
constructor(debug = true) { this.layers=[]; this.weights=[]; this.biases=[]; this.activations=[]; this.details={}; this.debug=debug; }
|
| 846 |
layer(inputSize, outputSize, activation='tanh'){
|
| 847 |
this.layers.push({inputSize,outputSize,activation});
|
| 848 |
+
if(this.weights.length>0){ const lastOut=this.layers[this.layers.length-2].outputSize; if(inputSize!==lastOut) throw new Error('Input size must match previous layer output size.'); }
|
| 849 |
+
const W=[]; for(let i=0;i<outputSize;i++){ const row=[]; for(let j=0;j<inputSize;j++) row.push((Math.random()-0.5)*2*Math.sqrt(6/(inputSize+outputSize))); W.push(row); }
|
|
|
|
|
|
|
|
|
|
| 850 |
this.weights.push(W); this.biases.push(Array(outputSize).fill(0.01)); this.activations.push(activation);
|
| 851 |
}
|
| 852 |
activationFunction(x,a){ switch(a){case 'tanh':return Math.tanh(x);case 'sigmoid':return 1/(1+Math.exp(-x));case 'relu':return Math.max(0,x);case 'selu':{const alpha=1.67326,scale=1.0507;return x>0?scale*x:scale*alpha*(Math.exp(x)-1);}default:throw new Error('Unknown activation');} }
|
|
|
|
| 857 |
for(let h=0;h<numHeads;h++) for(let i=0;i<input.length;i++) for(let j=0;j<headSize;j++) heads[h][i][j]=input[i][h*headSize+j];
|
| 858 |
const scores=[...Array(numHeads)].map(()=>[...Array(input.length)].map(()=>[...Array(input.length)].fill(0)));
|
| 859 |
for(let h=0;h<numHeads;h++) for(let i=0;i<input.length;i++) for(let j=0;j<input.length;j++){ let s=0; for(let k=0;k<headSize;k++) s+=heads[h][i][k]*heads[h][j][k]; scores[h][i][j]=s; }
|
| 860 |
+
const weights=scores.map(head=>head.map(row=>{const mx=Math.max(...row); const ex=row.map(v=>Math.exp(v-mx)); const sum=ex.reduce((a,b)=>a+b,0); return ex.map(v=>v/sum)}));
|
| 861 |
const out=[...Array(input.length)].map(()=>[...Array(input[0].length)].fill(0));
|
| 862 |
for(let h=0;h<numHeads;h++) for(let i=0;i<input.length;i++) for(let j=0;j<headSize;j++) for(let k=0;k<input.length;k++) out[i][h*headSize+j]+=weights[h][i][k]*heads[h][k][j];
|
| 863 |
return out;
|
|
|
|
| 867 |
const {epochs=200,learningRate=0.212,batchSize=16,printEveryEpochs=100,earlyStopThreshold=1e-6,testSet=null,callback=null}=options;
|
| 868 |
const start=Date.now(); const batch=Math.max(1,batchSize);
|
| 869 |
if(this.layers.length===0){ const n=trainSet[0].input.length; this.layer(n,n,'tanh'); this.layer(n,1,'tanh'); }
|
| 870 |
+
let lastTrainLoss=0,lastTestLoss=null, completedEpochs=0;
|
| 871 |
for(let epoch=0;epoch<epochs;epoch++){
|
| 872 |
let trainError=0;
|
| 873 |
for(let b=0;b<trainSet.length;b+=batch){
|
|
|
|
| 881 |
}
|
| 882 |
const outIn=L[L.length-1]; const outErr=[]; for(let i=0;i<outIn.length;i++) outErr.push((data.output[i]??0)-outIn[i]);
|
| 883 |
let layerErrors=[outErr];
|
| 884 |
+
for(let i=this.weights.length-2;i>=0;i--){ const Wnext=this.weights[i+1], nextErr=layerErrors[0], curIn=L[i+1], act=this.activations[i]; const errs=[]; for(let j=0;j<this.layers[i].outputSize;j++){ let e=0; for(let k=0;k<this.layers[i+1].outputSize;k++) e+=nextErr[k]*Wnext[k][j]; errs.push(e*this.activationDerivative(curIn[j],act)); } layerErrors.unshift(errs); }
|
| 885 |
+
for(let i=0;i<this.weights.length;i++){ const inputs=L[i], errs=layerErrors[i], W=this.weights[i], B=this.biases[i]; for(let j=0;j<W.length;j++){ const w=W[j]; for(let k=0;k<inputs.length;k++) w[k]+=learningRate*errs[j]*inputs[k]; B[j]+=learningRate*errs[j]; } }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 886 |
batchError+=Math.abs(outErr[0]??0);
|
| 887 |
}
|
| 888 |
trainError+=batchError;
|
| 889 |
}
|
| 890 |
+
lastTrainLoss=trainError/trainSet.length; completedEpochs=epoch+1;
|
| 891 |
if(testSet){ let te=0; for(const d of testSet){ const p=this.predict(d.input); te+=Math.abs((d.output[0]??0)-(p[0]??0)); } lastTestLoss=te/testSet.length; }
|
| 892 |
if((epoch+1)%printEveryEpochs===0 && this.debug) console.log(`Epoch ${epoch+1} | Train ${lastTrainLoss.toFixed(6)}${testSet?` | Val ${lastTestLoss.toFixed(6)}`:''}`);
|
| 893 |
if(callback) await callback(epoch+1,lastTrainLoss,lastTestLoss);
|
| 894 |
await new Promise(r=>setTimeout(r,0));
|
| 895 |
if(lastTrainLoss<earlyStopThreshold) { if(this.debug) console.log(`Early stop @${epoch+1}`); break; }
|
| 896 |
}
|
| 897 |
+
const end=Date.now(); let params=0; for(let i=0;i<this.weights.length;i++) params+=this.weights[i].flat().length+this.biases[i].length;
|
| 898 |
+
const summary={trainLoss:lastTrainLoss,testLoss:lastTestLoss,parameters:params,training:{time:end-start,epochs:completedEpochs,requestedEpochs:epochs,learningRate,batchSize:batch},layers:this.layers.map(l=>({inputSize:l.inputSize,outputSize:l.outputSize,activation:l.activation}))};
|
| 899 |
this.details=summary; return summary;
|
| 900 |
}
|
| 901 |
predict(input){
|
| 902 |
let x=input; const acts=[input], raw=[];
|
| 903 |
+
for(let i=0;i<this.weights.length;i++){ const W=this.weights[i], B=this.biases[i], a=this.activations[i]; const y=[], r=[]; for(let j=0;j<W.length;j++){ const w=W[j]; let s=B[j]; for(let k=0;k<x.length;k++) s+=x[k]*w[k]; r.push(s); y.push(this.activationFunction(s,a)); } raw.push(r); acts.push(y); x=y; }
|
|
|
|
|
|
|
|
|
|
| 904 |
this.lastActivations=acts; this.lastRawValues=raw; return x;
|
| 905 |
}
|
| 906 |
+
save(name='model'){
|
| 907 |
+
const data={weights:this.weights,biases:this.biases,activations:this.activations,layers:this.layers,details:this.details};
|
| 908 |
const blob=new Blob([JSON.stringify(data)],{type:'application/json'}); const url=URL.createObjectURL(blob); const a=document.createElement('a'); a.href=url; a.download=`${name}.json`; a.click(); URL.revokeObjectURL(url);
|
| 909 |
}
|
| 910 |
load(callback){
|
| 911 |
const onChange=(e)=>{ const f=e.target.files[0]; if(!f) return; const r=new FileReader();
|
| 912 |
+
r.onload=(ev)=>{ try{ const data=JSON.parse(ev.target.result); this.weights=data.weights; this.biases=data.biases; this.activations=data.activations; this.layers=data.layers; this.details=data.details||{}; callback&&callback(); if(this.debug) console.log('Loaded'); }catch(err){ if(this.debug) console.error('Load failed',err); callback&&callback(err); } finally{ input.removeEventListener('change',onChange); input.remove(); } };
|
| 913 |
r.readAsText(f);
|
| 914 |
};
|
| 915 |
const input=document.createElement('input'); input.type='file'; input.accept='.json'; input.style.position='fixed'; input.style.opacity='0'; document.body.append(input); input.addEventListener('change',onChange); input.click();
|
| 916 |
}
|
| 917 |
}
|
| 918 |
|
|
|
|
| 919 |
document.addEventListener('DOMContentLoaded',()=>{
|
| 920 |
const nn=new carbono();
|
| 921 |
let lossHistory=[];
|
| 922 |
+
let isTraining=false;
|
| 923 |
|
| 924 |
+
const $=id=>document.getElementById(id);
|
|
|
|
|
|
|
|
|
|
| 925 |
const el={
|
| 926 |
+
loadDataBtn:$('loadDataBtn'), mobileSampleBtn:$('mobileSampleBtn'), trainingData:$('trainingData'), testData:$('testData'),
|
| 927 |
+
numHiddenLayers:$('numHiddenLayers'), hiddenLayersConfig:$('hiddenLayersConfig'), trainButton:$('trainButton'), mobileTrainButton:$('mobileTrainButton'),
|
| 928 |
+
stats:$('stats'), epochBar:$('epochBar'), epochs:$('epochs'), learningRate:$('learningRate'), batchSize:$('batchSize'),
|
| 929 |
+
predictButton:$('predictButton'), predictionInput:$('predictionInput'), predictionResult:$('predictionResult'), saveButton:$('saveButton'), loadButton:$('loadButton'),
|
| 930 |
+
metricEpoch:$('metricEpoch'), metricTrain:$('metricTrain'), metricVal:$('metricVal'), metricParams:$('metricParams'),
|
| 931 |
+
progressLabel:$('progressLabel'), progressPercent:$('progressPercent'), lossEmpty:$('lossEmpty'), networkEmpty:$('networkEmpty'),
|
| 932 |
+
appStatus:$('appStatus'), appStatusText:$('appStatusText'), networkBadge:$('networkBadge'), trainRows:$('trainRows'), valRows:$('valRows'),
|
| 933 |
+
summaryLayers:$('summaryLayers'), summaryTime:$('summaryTime'), toastRegion:$('toastRegion'), themeButton:$('themeButton'),
|
| 934 |
+
settingsButton:$('settingsButton'), drawerOverlay:$('drawerOverlay'), settingsDrawer:$('settingsDrawer'), drawerCloseButton:$('drawerCloseButton')
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 935 |
};
|
| 936 |
|
| 937 |
+
const lossCanvas=$('lossGraph'), networkCanvas=$('networkGraph');
|
| 938 |
+
const lossCtx=lossCanvas.getContext('2d'), networkCtx=networkCanvas.getContext('2d');
|
|
|
|
|
|
|
| 939 |
|
| 940 |
+
function css(name){ return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); }
|
| 941 |
+
function setStatus(text,state='ready'){
|
| 942 |
+
el.appStatusText.textContent=text;
|
| 943 |
+
el.appStatus.classList.toggle('training',state==='training');
|
| 944 |
+
el.appStatus.classList.toggle('error',state==='error');
|
| 945 |
+
}
|
| 946 |
+
function toast(title,copy='',type='info'){
|
| 947 |
+
const node=document.createElement('div'); node.className=`toast ${type}`;
|
| 948 |
+
node.innerHTML=`<div class="toast-icon">${type==='success'?'✓':type==='error'?'!':'•'}</div><div><div class="toast-title">${title}</div>${copy?`<div class="toast-copy">${copy}</div>`:''}</div>`;
|
| 949 |
+
el.toastRegion.appendChild(node);
|
| 950 |
+
setTimeout(()=>{ node.classList.add('leaving'); setTimeout(()=>node.remove(),260); },3000);
|
| 951 |
+
}
|
| 952 |
+
function openDrawer(){
|
| 953 |
+
el.settingsDrawer.classList.add('open');
|
| 954 |
+
el.settingsDrawer.setAttribute('aria-hidden','false');
|
| 955 |
+
el.drawerOverlay.hidden=false;
|
| 956 |
+
requestAnimationFrame(()=>el.drawerOverlay.classList.add('open'));
|
| 957 |
+
}
|
| 958 |
+
function closeDrawer(){
|
| 959 |
+
el.settingsDrawer.classList.remove('open');
|
| 960 |
+
el.settingsDrawer.setAttribute('aria-hidden','true');
|
| 961 |
+
el.drawerOverlay.classList.remove('open');
|
| 962 |
+
setTimeout(()=>{ if(!el.drawerOverlay.classList.contains('open')) el.drawerOverlay.hidden=true; },200);
|
| 963 |
+
}
|
| 964 |
+
|
| 965 |
+
function setTrainingUI(training){
|
| 966 |
+
isTraining=training;
|
| 967 |
+
[el.trainButton,el.mobileTrainButton].forEach(btn=>btn.disabled=training);
|
| 968 |
+
const label=el.trainButton.querySelector('.train-label');
|
| 969 |
+
const icon=el.trainButton.querySelector('.train-icon');
|
| 970 |
+
label.textContent=training?'Training…':'Train model';
|
| 971 |
+
if(training){ icon.classList.add('spin'); icon.innerHTML='<path d="M12 3a9 9 0 1 0 9 9" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"/>'; el.mobileTrainButton.textContent='Training…'; setStatus('Training','training'); }
|
| 972 |
+
else { icon.classList.remove('spin'); icon.innerHTML='<path d="m9 6 9 6-9 6V6Z" stroke="currentColor" stroke-width="1.8" stroke-linejoin="round"/>'; el.mobileTrainButton.textContent='Train model'; }
|
| 973 |
+
}
|
| 974 |
+
|
| 975 |
+
function parseCSV(csv,{allowEmpty=false}={}){
|
| 976 |
+
const text=csv.trim();
|
| 977 |
+
if(!text){ if(allowEmpty) return []; throw new Error('Add at least one training row.'); }
|
| 978 |
+
const rows=text.split(/\r?\n/).map(r=>r.trim()).filter(Boolean);
|
| 979 |
+
const parsed=rows.map((row,index)=>{
|
| 980 |
+
const values=row.split(',').map(s=>Number(s.trim()));
|
| 981 |
+
if(values.length<2 || values.some(v=>!Number.isFinite(v))) throw new Error(`Row ${index+1} contains an invalid number.`);
|
| 982 |
+
return {input:values.slice(0,-1),output:[values[values.length-1]]};
|
| 983 |
+
});
|
| 984 |
+
const width=parsed[0].input.length;
|
| 985 |
+
if(!width) throw new Error('Each row needs at least one feature and one target.');
|
| 986 |
+
if(parsed.some(r=>r.input.length!==width)) throw new Error('All rows must contain the same number of features.');
|
| 987 |
+
return parsed;
|
| 988 |
}
|
| 989 |
|
| 990 |
+
function rowCount(text){ return text.trim()?text.trim().split(/\r?\n/).filter(r=>r.trim()).length:0; }
|
| 991 |
+
function updateDataCounts(){ el.trainRows.textContent=`${rowCount(el.trainingData.value)} rows`; el.valRows.textContent=`${rowCount(el.testData.value)} rows`; }
|
| 992 |
+
|
| 993 |
function createLayerConfigUI(n){
|
| 994 |
+
n=Math.min(4,Math.max(1,Number(n)||1)); el.numHiddenLayers.value=n;
|
| 995 |
+
const old=[...el.hiddenLayersConfig.querySelectorAll('.layer-row')].map(row=>({nodes:row.querySelector('input')?.value,act:row.querySelector('select')?.value}));
|
| 996 |
el.hiddenLayersConfig.innerHTML='';
|
| 997 |
for(let i=0;i<n;i++){
|
| 998 |
+
const row=document.createElement('div'); row.className='layer-row';
|
| 999 |
+
const nodes=old[i]?.nodes||'5', act=old[i]?.act||'tanh';
|
| 1000 |
+
row.innerHTML=`<div class="layer-index">L${i+1}</div><div><label class="field-hint" for="layerNodes${i}" style="display:block;margin:0 0 4px">Nodes</label><input id="layerNodes${i}" type="number" min="1" max="128" value="${nodes}" data-layer-index="${i}"></div><div><label class="field-hint" for="layerAct${i}" style="display:block;margin:0 0 4px">Activation</label><select id="layerAct${i}" data-layer-index="${i}">${['tanh','sigmoid','relu','selu'].map(a=>`<option${a===act?' selected':''}>${a}</option>`).join('')}</select></div>`;
|
| 1001 |
+
el.hiddenLayersConfig.appendChild(row);
|
| 1002 |
+
}
|
| 1003 |
+
}
|
| 1004 |
+
|
| 1005 |
+
function getLayerConfig(){
|
| 1006 |
+
const n=Number(el.numHiddenLayers.value);
|
| 1007 |
+
const cfg=[];
|
| 1008 |
+
for(let i=0;i<n;i++){
|
| 1009 |
+
const size=Number(document.querySelector(`input[data-layer-index="${i}"]`).value);
|
| 1010 |
+
const activation=document.querySelector(`select[data-layer-index="${i}"]`).value;
|
| 1011 |
+
if(!Number.isInteger(size)||size<1) throw new Error(`Layer ${i+1} needs at least 1 node.`);
|
| 1012 |
+
cfg.push({size,activation});
|
|
|
|
|
|
|
|
|
|
| 1013 |
}
|
| 1014 |
+
return cfg;
|
| 1015 |
+
}
|
| 1016 |
+
|
| 1017 |
+
function formatParams(n){ if(!Number.isFinite(n)) return '—'; if(n>=1e6) return `${(n/1e6).toFixed(n>=1e7?1:2)}M`; if(n>=1e3) return `${(n/1e3).toFixed(n>=1e4?1:2)}K`; return String(n); }
|
| 1018 |
+
function formatTime(ms){ if(!Number.isFinite(ms)) return '—'; return ms<1000?`${ms} ms`:`${(ms/1000).toFixed(2)} s`; }
|
| 1019 |
+
|
| 1020 |
+
function resizeCanvas(canvas){
|
| 1021 |
+
const rect=canvas.getBoundingClientRect(), dpr=Math.min(window.devicePixelRatio||1,2);
|
| 1022 |
+
const w=Math.max(1,Math.round(rect.width*dpr)), h=Math.max(1,Math.round(rect.height*dpr));
|
| 1023 |
+
if(canvas.width!==w||canvas.height!==h){ canvas.width=w; canvas.height=h; }
|
| 1024 |
+
return {w,h,dpr};
|
| 1025 |
+
}
|
| 1026 |
+
|
| 1027 |
+
function roundedPath(ctx,x1,y1,x2,y2){ const mid=(x1+x2)/2; ctx.moveTo(x1,y1); ctx.bezierCurveTo(mid,y1,mid,y2,x2,y2); }
|
| 1028 |
+
|
| 1029 |
+
function drawLossGraph(){
|
| 1030 |
+
const {w,h,dpr}=resizeCanvas(lossCanvas); const ctx=lossCtx; ctx.clearRect(0,0,w,h);
|
| 1031 |
+
if(!lossHistory.length) return;
|
| 1032 |
+
el.lossEmpty.classList.add('hidden');
|
| 1033 |
+
const pad={l:44*dpr,r:18*dpr,t:18*dpr,b:28*dpr}; const iw=w-pad.l-pad.r, ih=h-pad.t-pad.b;
|
| 1034 |
+
const vals=lossHistory.flatMap(v=>[v.train, v.test].filter(Number.isFinite));
|
| 1035 |
+
const max=Math.max(...vals,1e-6), min=Math.min(...vals,0); const span=Math.max(max-min,1e-6);
|
| 1036 |
+
ctx.lineWidth=1*dpr; ctx.strokeStyle=css('--border'); ctx.globalAlpha=.9;
|
| 1037 |
+
ctx.font=`${10*dpr}px ui-monospace,monospace`; ctx.fillStyle=css('--text-tertiary'); ctx.textAlign='right'; ctx.textBaseline='middle';
|
| 1038 |
+
for(let i=0;i<5;i++){ const t=i/4, y=pad.t+t*ih, value=max-t*span; ctx.beginPath(); ctx.moveTo(pad.l,y); ctx.lineTo(w-pad.r,y); ctx.stroke(); ctx.fillText(value.toFixed(value<.01?4:value<1?3:2),pad.l-8*dpr,y); }
|
| 1039 |
+
ctx.globalAlpha=1;
|
| 1040 |
+
const draw=(key,color,width=2)=>{
|
| 1041 |
+
const data=lossHistory.map(v=>v[key]); if(!data.some(Number.isFinite)) return;
|
| 1042 |
+
ctx.beginPath(); ctx.strokeStyle=color; ctx.lineWidth=width*dpr; ctx.lineCap='round'; ctx.lineJoin='round';
|
| 1043 |
+
data.forEach((value,i)=>{ if(!Number.isFinite(value)) return; const x=pad.l+(data.length===1?0.5:i/(data.length-1))*iw; const y=pad.t+((max-value)/span)*ih; if(i===0) ctx.moveTo(x,y); else ctx.lineTo(x,y); });
|
| 1044 |
+
ctx.stroke();
|
| 1045 |
+
};
|
| 1046 |
+
draw('test',css('--text-tertiary'),1.7); draw('train',css('--primary'),2.2);
|
| 1047 |
+
const last=lossHistory.at(-1); if(last){ const x=pad.l+iw; const y=pad.t+((max-last.train)/span)*ih; ctx.fillStyle=css('--surface'); ctx.strokeStyle=css('--primary'); ctx.lineWidth=2*dpr; ctx.beginPath(); ctx.arc(x,y,3.2*dpr,0,Math.PI*2); ctx.fill(); ctx.stroke(); }
|
| 1048 |
+
}
|
| 1049 |
+
|
| 1050 |
+
function drawNetwork(){
|
| 1051 |
+
const {w,h,dpr}=resizeCanvas(networkCanvas); const ctx=networkCtx; ctx.clearRect(0,0,w,h);
|
| 1052 |
+
if(!nn.lastActivations||!nn.layers.length) return;
|
| 1053 |
+
el.networkEmpty.classList.add('hidden');
|
| 1054 |
+
const pad=34*dpr, W=w-pad*2, H=h-pad*2, layers=[];
|
| 1055 |
+
const inSize=nn.layers[0].inputSize, inNodes=[];
|
| 1056 |
+
for(let i=0;i<inSize;i++){ const y=pad+(inSize>1?(H*i)/(inSize-1):H/2); inNodes.push({x:pad,y,val:nn.lastActivations[0][i]||0}); } layers.push(inNodes);
|
| 1057 |
+
for(let i=1;i<nn.lastActivations.length-1;i++){ const L=nn.lastActivations[i],nodes=[],x=pad+(W*i)/(nn.lastActivations.length-1); for(let j=0;j<L.length;j++){ const y=pad+(L.length>1?(H*j)/(L.length-1):H/2); nodes.push({x,y,val:L[j]}); } layers.push(nodes); }
|
| 1058 |
+
layers.push([{x:w-pad,y:pad+H/2,val:nn.lastActivations.at(-1)[0]||0}]);
|
| 1059 |
+
ctx.lineWidth=.8*dpr;
|
| 1060 |
+
for(let i=0;i<layers.length-1;i++){ const A=layers[i],B=layers[i+1],Wmat=nn.weights[i]; for(let j=0;j<A.length;j++) for(let k=0;k<B.length;k++){ const weight=Wmat?.[k]?.[j]??0, sig=Math.abs((A[j].val||0)*weight), op=Math.min(Math.max(sig*.85,.035),.5); ctx.strokeStyle=css('--primary'); ctx.globalAlpha=Math.min(.72,op+0.08); ctx.beginPath(); roundedPath(ctx,A[j].x,A[j].y,B[k].x,B[k].y); ctx.stroke(); } }
|
| 1061 |
+
ctx.globalAlpha=1;
|
| 1062 |
+
for(const L of layers) for(const n of L){ const r=4.5*dpr, strength=Math.min(Math.max(Math.abs(n.val),.15),1); ctx.fillStyle=css('--surface'); ctx.strokeStyle=css('--primary'); ctx.lineWidth=(1+strength)*dpr; ctx.beginPath(); ctx.arc(n.x,n.y,r,0,Math.PI*2); ctx.fill(); ctx.stroke(); }
|
| 1063 |
+
el.networkBadge.innerHTML='<span class="status-dot"></span><span>Active</span>';
|
| 1064 |
+
}
|
| 1065 |
+
|
| 1066 |
+
function updateSummary(summary,status='Trained'){
|
| 1067 |
+
const layers=summary?.layers?.map(l=>l.outputSize).join(' → ')||'—';
|
| 1068 |
+
el.stats.innerHTML=`<div class="summary-row"><span class="summary-key">Status</span><span class="summary-value">${status}</span></div><div class="summary-row"><span class="summary-key">Layers</span><span class="summary-value mono">${layers}</span></div><div class="summary-row"><span class="summary-key">Time</span><span class="summary-value mono">${formatTime(summary?.training?.time)}</span></div>`;
|
| 1069 |
}
|
| 1070 |
|
| 1071 |
async function trainModel(){
|
| 1072 |
+
if(isTraining) return;
|
| 1073 |
+
try{
|
| 1074 |
+
const trainingData=parseCSV(el.trainingData.value); const testData=parseCSV(el.testData.value,{allowEmpty:true});
|
| 1075 |
+
if(testData.length && testData.some(d=>d.input.length!==trainingData[0].input.length)) throw new Error('Validation rows must use the same number of features as training rows.');
|
| 1076 |
+
const epochs=Number(el.epochs.value), lr=Number(el.learningRate.value), batch=Number(el.batchSize.value), layerCfg=getLayerConfig();
|
| 1077 |
+
if(!Number.isInteger(epochs)||epochs<1) throw new Error('Epochs must be at least 1.'); if(!Number.isFinite(lr)||lr<=0) throw new Error('Learning rate must be greater than 0.'); if(!Number.isInteger(batch)||batch<1) throw new Error('Batch size must be at least 1.');
|
| 1078 |
+
lossHistory=[]; el.lossEmpty.classList.remove('hidden'); el.epochBar.style.width='0%'; el.progressPercent.textContent='0%'; el.progressLabel.textContent='Starting';
|
| 1079 |
+
el.metricEpoch.textContent='0'; el.metricTrain.textContent='—'; el.metricVal.textContent=testData.length?'—':'N/A'; el.metricParams.textContent='—';
|
| 1080 |
+
nn.layers=[]; nn.weights=[]; nn.biases=[]; nn.activations=[]; nn.lastActivations=null;
|
| 1081 |
+
const nIn=trainingData[0].input.length; nn.layer(nIn,layerCfg[0].size,layerCfg[0].activation); for(let i=1;i<layerCfg.length;i++) nn.layer(layerCfg[i-1].size,layerCfg[i].size,layerCfg[i].activation); nn.layer(layerCfg.at(-1).size,1,'tanh');
|
| 1082 |
+
let params=0; for(let i=0;i<nn.weights.length;i++) params+=nn.weights[i].flat().length+nn.biases[i].length; el.metricParams.textContent=formatParams(params);
|
| 1083 |
+
setTrainingUI(true);
|
| 1084 |
+
const opts={epochs,learningRate:lr,batchSize:batch,printEveryEpochs:1,testSet:testData.length?testData:null,callback:async(epoch,trainLoss,testLoss)=>{
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1085 |
lossHistory.push({train:trainLoss,test:testLoss});
|
| 1086 |
+
const pct=Math.min(100,(epoch/epochs)*100); el.epochBar.style.width=`${pct}%`; el.progressPercent.textContent=`${Math.round(pct)}%`; el.progressLabel.textContent=`Epoch ${epoch} of ${epochs}`;
|
| 1087 |
+
el.metricEpoch.textContent=`${epoch}/${epochs}`; el.metricTrain.textContent=trainLoss.toFixed(6); el.metricVal.textContent=testLoss===null?'N/A':testLoss.toFixed(6);
|
| 1088 |
drawLossGraph();
|
| 1089 |
+
}};
|
| 1090 |
+
const summary=await nn.train(trainingData,opts);
|
| 1091 |
+
el.metricParams.textContent=formatParams(summary.parameters); el.progressLabel.textContent=summary.training.epochs<epochs?'Early stopped':'Complete'; el.progressPercent.textContent='100%'; el.epochBar.style.width='100%';
|
| 1092 |
+
updateSummary(summary,'Trained'); setStatus('Ready'); toast('Training complete',`${formatParams(summary.parameters)} parameters · ${formatTime(summary.training.time)}`,'success');
|
| 1093 |
+
}catch(err){ console.error(err); setStatus('Needs attention','error'); toast('Could not train',err.message,'error'); }
|
| 1094 |
+
finally{ setTrainingUI(false); if(el.appStatus.classList.contains('error')) setTimeout(()=>setStatus('Ready'),2200); }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1095 |
}
|
| 1096 |
|
| 1097 |
+
function predict(){
|
| 1098 |
+
try{
|
| 1099 |
+
if(!nn.layers.length||!nn.weights.length) throw new Error('Train or load a model first.');
|
| 1100 |
+
const input=el.predictionInput.value.split(',').map(s=>Number(s.trim()));
|
| 1101 |
+
if(!el.predictionInput.value.trim()||input.some(n=>!Number.isFinite(n))) throw new Error('Enter a valid comma-separated input vector.');
|
| 1102 |
+
const expected=nn.layers[0].inputSize; if(input.length!==expected) throw new Error(`This model expects ${expected} input value${expected===1?'':'s'}.`);
|
| 1103 |
+
const p=nn.predict(input), value=Number.isFinite(p[0])?p[0]:NaN; if(!Number.isFinite(value)) throw new Error('Prediction returned NaN. Check your data and learning rate.');
|
| 1104 |
+
el.predictionResult.classList.add('has-value'); el.predictionResult.innerHTML=`<div class="result-label">Prediction</div><div class="result-value mono">${value.toFixed(6)}</div><div class="result-copy">From ${input.length} input feature${input.length===1?'':'s'}</div>`;
|
| 1105 |
+
drawNetwork();
|
| 1106 |
+
}catch(err){ toast('Prediction unavailable',err.message,'error'); }
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1107 |
}
|
| 1108 |
|
| 1109 |
+
function loadSample(){
|
| 1110 |
+
el.trainingData.value=`1.0, 0.0, 0.0, 0.0\n0.7, 0.7, 0.8, 1.0\n0.0, 1.0, 0.0, 0.5`;
|
| 1111 |
+
el.testData.value=`0.4, 0.2, 0.6, 1.0\n0.2, 0.82, 0.83, 1.0`;
|
| 1112 |
+
el.predictionInput.value='0.4, 0.2, 0.6'; updateDataCounts(); toast('Sample loaded','Three training rows and two validation rows are ready.','success');
|
| 1113 |
}
|
| 1114 |
|
| 1115 |
+
document.querySelectorAll('.seg-btn').forEach(btn=>btn.addEventListener('click',()=>{
|
| 1116 |
+
document.querySelectorAll('.seg-btn').forEach(b=>b.classList.toggle('active',b===btn));
|
| 1117 |
+
document.querySelectorAll('.data-pane').forEach(p=>p.hidden=p.id!==btn.dataset.pane);
|
| 1118 |
+
}));
|
| 1119 |
+
|
| 1120 |
+
[el.trainingData,el.testData].forEach(t=>t.addEventListener('input',updateDataCounts));
|
| 1121 |
+
el.numHiddenLayers.addEventListener('input',e=>createLayerConfigUI(e.target.value));
|
| 1122 |
+
el.loadDataBtn.addEventListener('click',loadSample); el.mobileSampleBtn.addEventListener('click',loadSample);
|
| 1123 |
+
el.settingsButton.addEventListener('click',openDrawer); el.drawerCloseButton.addEventListener('click',closeDrawer); el.drawerOverlay.addEventListener('click',closeDrawer);
|
| 1124 |
+
el.trainButton.addEventListener('click',trainModel); el.mobileTrainButton.addEventListener('click',trainModel);
|
| 1125 |
+
el.predictButton.addEventListener('click',predict); el.predictionInput.addEventListener('keydown',e=>{ if(e.key==='Enter') predict(); });
|
| 1126 |
+
el.saveButton.addEventListener('click',()=>{ if(!nn.layers.length){ toast('Nothing to save','Train or load a model first.','error'); return; } nn.save('carbono-model'); toast('Checkpoint saved','The model JSON was downloaded.','success'); });
|
| 1127 |
+
el.loadButton.addEventListener('click',()=>nn.load(err=>{ if(err){ toast('Load failed',err.message,'error'); return; } updateSummary(nn.details,'Loaded'); el.metricParams.textContent=formatParams(nn.details?.parameters); setStatus('Ready'); toast('Model loaded','Checkpoint is ready for prediction.','success'); }));
|
|
|
|
|
|
|
| 1128 |
|
| 1129 |
+
document.addEventListener('keydown',e=>{ if(e.key==='Escape'&&el.settingsDrawer.classList.contains('open')) closeDrawer(); if((e.metaKey||e.ctrlKey)&&e.key==='Enter'){ e.preventDefault(); trainModel(); } });
|
| 1130 |
+
|
| 1131 |
+
const storedTheme=localStorage.getItem('carbono-theme'); document.documentElement.dataset.theme=storedTheme||'dark';
|
| 1132 |
+
el.themeButton.addEventListener('click',()=>{
|
| 1133 |
+
const current=document.documentElement.dataset.theme; const darkNow=current==='dark'||(!current&&matchMedia('(prefers-color-scheme: dark)').matches); const next=darkNow?'light':'dark';
|
| 1134 |
+
document.documentElement.dataset.theme=next; localStorage.setItem('carbono-theme',next); setTimeout(()=>{ drawLossGraph(); drawNetwork(); },0);
|
| 1135 |
+
});
|
| 1136 |
|
| 1137 |
+
const ro=new ResizeObserver(()=>{ drawLossGraph(); drawNetwork(); }); ro.observe(lossCanvas.parentElement); ro.observe(networkCanvas.parentElement);
|
| 1138 |
+
createLayerConfigUI(1); updateDataCounts();
|
| 1139 |
});
|
| 1140 |
+
</script>
|
| 1141 |
</body>
|
| 1142 |
</html>
|