appvoid commited on
Commit
33c2997
·
verified ·
1 Parent(s): bf15f41

Upload index.html

Browse files
Files changed (1) hide show
  1. 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
- --fg:#fff;--bg:#000;--muted:#8a8a8a;--panel:#0e0e0e;--line:#222;--ink:#111;--ink2:#1a1a1a;
10
- --radius:6px;--pad:10px;--fs:12px;--lh:1.25;--gap:10px;
11
- --base-w:1200; /* logical pixels for layout before scaling */
12
- --base-h:680;
13
- }
14
- /* reset */
15
- *{box-sizing:border-box;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
16
- html,body{height:100%;background:var(--bg);color:var(--fg);margin:0}
17
- a{color:var(--fg);text-decoration:none;border-bottom:1px solid transparent}
18
- a:hover{border-bottom-color:var(--fg)}
19
- /* fit-to-viewport wrapper (no scroll) */
20
- body{display:flex;align-items:center;justify-content:center;overflow:hidden}
21
- #fit{
22
- width:calc(var(--base-w)*1px);
23
- height:calc(var(--base-h)*1px);
24
- transform-origin: center; /* <<< FIX: Was 'top left', now it scales from the center */
25
- display:flex;flex-direction:column;gap:var(--gap);
26
- font:500 var(--fs)/var(--lh) ui-monospace,SFMono-Regular,Menlo,Consolas,Monaco,monospace;
27
- letter-spacing:.1px;font-variant-numeric:tabular-nums;
28
- }
29
- /* top bar */
30
- .top{
31
- display:grid;grid-template-columns:1fr auto auto;gap:var(--gap);
32
- align-items:center;padding:6px 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--panel)
33
- }
34
- .brand{text-transform:uppercase;letter-spacing:.5px;font-weight:700}
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 id="fit">
96
- <div class="top">
97
- <div class="brand">Carbono Playground</div>
98
- <div class="muted">Learning. Simple. Visual.</div>
99
- <span id="loadDataBtn" class="chip">Load sample</span>
100
- </div>
101
-
102
- <div class="grid">
103
- <!-- LEFT: Model Settings -->
104
- <section class="panel" aria-label="Model Settings">
105
- <h4 class="title">Model</h4>
106
- <div class="block">
107
- <label>Training Set</label>
108
- <textarea id="trainingData" rows="3" placeholder="1,1,1,0&#10;1,0,1,0&#10;0,1,0,1"></textarea>
109
- <div class="hint">Last number is target.</div>
110
  </div>
111
- <div class="row">
112
- <div class="block">
113
- <label>Epochs</label>
114
- <input class="input" type="number" id="epochs" value="50" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
115
  </div>
116
- <div class="block">
117
- <label>LR</label>
118
- <input class="input" type="number" id="learningRate" value="0.1" step="0.001" />
 
 
 
 
 
 
 
 
 
 
 
 
 
 
119
  </div>
120
- <div class="block">
121
- <label>Batch</label>
122
- <input class="input" type="number" id="batchSize" value="8" />
 
 
 
 
 
 
 
 
 
123
  </div>
124
- <div class="block">
125
- <label>Hidden</label>
126
- <input class="input" type="number" id="numHiddenLayers" value="1" min="1" max="4" />
 
 
 
 
 
 
 
 
 
 
 
 
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
- <!-- MIDDLE: Training / Viz -->
137
- <section class="panel" aria-label="Training & Visualization">
138
- <h4 class="title">Training</h4>
139
- <div class="canvas-wrap"><canvas id="lossGraph"></canvas></div>
140
- <div class="hint">Loss: white = train, gray = val.</div>
141
- <div class="bar"><i id="epochBar"></i></div>
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
- <!-- RIGHT: Control / Predict -->
150
- <section class="panel" aria-label="Control">
151
- <h4 class="title">Control</h4>
152
- <div class="block btns">
153
- <button id="trainButton">Train</button>
154
- <button id="saveButton">Save</button>
155
- <button id="loadButton">Load</button>
156
- </div>
 
 
157
 
158
- <h4 class="title">Predict</h4>
159
- <div class="block pred">
160
- <input class="input" type="text" id="predictionInput" placeholder="0.4, 0.2, 0.6" />
161
- <button id="predictButton">Predict</button>
162
- </div>
163
- <div id="predictionResult" class="block"></div>
 
 
164
 
165
- <div class="block">
166
- <div class="hint">Repo: <a href="https://github.com/appvoid/carbono" target="_blank" rel="noopener">github/appvoid/carbono</a></div>
167
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
168
  </section>
169
- </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
170
  </div>
171
 
172
- <script>
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
- const lastOut = this.layers[this.layers.length-2].outputSize;
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
- const Wnext=this.weights[i+1], nextErr=layerErrors[0], curIn=L[i+1], act=this.activations[i]; const errs=[];
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++){ params+=this.weights[i].flat().length+this.biases[i].length; }
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'){ const data={weights:this.weights,biases:this.biases,activations:this.activations,layers:this.layers,details:this.details};
 
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 lossCanvas=document.getElementById('lossGraph');
276
- const networkCanvas=document.getElementById('networkGraph');
277
- const lossCtx=lossCanvas.getContext('2d');
278
-
279
  const el={
280
- loadDataBtn:document.getElementById('loadDataBtn'),
281
- trainingData:document.getElementById('trainingData'),
282
- testData:document.getElementById('testData'),
283
- numHiddenLayers:document.getElementById('numHiddenLayers'),
284
- hiddenLayersConfig:document.getElementById('hiddenLayersConfig'),
285
- trainButton:document.getElementById('trainButton'),
286
- stats:document.getElementById('stats'),
287
- epochBar:document.getElementById('epochBar'),
288
- epochs:document.getElementById('epochs'),
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 parseCSV=(csv)=> csv.trim().split('\n').filter(Boolean).map(row=>{
299
- const values=row.split(',').map(s=>Number(s.trim()));
300
- return {input:values.slice(0,-1),output:[values[values.length-1]]};
301
- });
302
 
303
- function drawLossGraph(){
304
- const {width,height}=lossCanvas;
305
- lossCtx.clearRect(0,0,width,height);
306
- if(lossHistory.length===0) return;
307
- const maxLoss=Math.max(1e-9,...lossHistory.map(l=>Math.max(l.train, l.test??0)));
308
- function line(data, color){
309
- lossCtx.strokeStyle=color; lossCtx.beginPath();
310
- data.forEach((v,i)=>{ const x=(i/(data.length-1))*width; const y=height-(v/maxLoss)*height; if(i===0) lossCtx.moveTo(x,y); else lossCtx.lineTo(x,y); });
311
- lossCtx.stroke();
312
- }
313
- line(lossHistory.map(l=>l.train),'#ffffff');
314
- if(lossHistory.some(l=>l.test!==undefined)) line(lossHistory.map(l=>l.test ?? 0),'#777777');
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
315
  }
316
 
 
 
 
317
  function createLayerConfigUI(n){
 
 
318
  el.hiddenLayersConfig.innerHTML='';
319
  for(let i=0;i<n;i++){
320
- const block=document.createElement('div');
321
- block.className='row';
322
- block.style.marginTop='0';
323
- block.innerHTML=`
324
- <div style="grid-column: span 2;" class="block">
325
- <label>Layer ${i+1} Nodes</label>
326
- <input class="input" type="number" value="5" data-layer-index="${i}">
327
- </div>
328
- <div style="grid-column: span 2;" class="block">
329
- <label>Activation</label>
330
- <select class="input" data-layer-index="${i}">
331
- <option>tanh</option>
332
- <option>sigmoid</option>
333
- <option>relu</option>
334
- <option>selu</option>
335
- </select>
336
- </div>`;
337
- el.hiddenLayersConfig.appendChild(block);
338
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
339
  }
340
 
341
  async function trainModel(){
342
- lossHistory=[];
343
- const trainingData=parseCSV(el.trainingData.value);
344
- const testData=parseCSV(el.testData.value||'');
345
- el.stats.innerHTML='';
346
-
347
- const nHidden=parseInt(el.numHiddenLayers.value,10);
348
- const layerCfg=[];
349
- for(let i=0;i<nHidden;i++){
350
- const size=parseInt(document.querySelector(`input[data-layer-index="${i}"]`).value,10);
351
- const act=document.querySelector(`select[data-layer-index="${i}"]`).value;
352
- layerCfg.push({size,activation:act});
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
- el.epochBar.style.width=`${(epoch/opts.epochs)*100}%`;
371
- el.stats.innerHTML=`
372
- <div><b>Epoch</b></div><div>${epoch}/${opts.epochs}</div>
373
- <div><b>Train</b></div><div>${trainLoss.toFixed(6)}</div>
374
- ${testLoss!==null?`<div><b>Val</b></div><div>${testLoss.toFixed(6)}</div>`:''}
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 drawNetwork(){
387
- const ctx=networkCanvas.getContext('2d');
388
- ctx.clearRect(0,0,networkCanvas.width,networkCanvas.height);
389
- if(!nn.lastActivations) return;
390
-
391
- const pad=34; const W=networkCanvas.width-pad*2; const H=networkCanvas.height-pad*2;
392
- const layers=[];
393
-
394
- // inputs
395
- const inSize=nn.layers[0].inputSize; const inX=pad; const inNodes=[];
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 sizeCanvases(){
426
- [lossCanvas,networkCanvas].forEach(cv=>{ cv.width=cv.parentElement.clientWidth; cv.height=cv.parentElement.clientHeight; });
427
- drawNetwork();
 
428
  }
429
 
430
- el.loadDataBtn.onclick=()=>{ el.trainingData.value=`1.0, 0.0, 0.0, 0.0
431
- 0.7, 0.7, 0.8, 1
432
- 0.0, 1.0, 0.0, 0.5`; el.testData.value=`0.4, 0.2, 0.6, 1.0
433
- 0.2, 0.82, 0.83, 1.0`; };
434
-
435
- el.numHiddenLayers.addEventListener('change',(e)=>createLayerConfigUI(parseInt(e.target.value,10)));
436
- el.trainButton.addEventListener('click',trainModel);
437
- el.predictButton.addEventListener('click',()=>{
438
- const input=el.predictionInput.value.split(',').map(s=>Number(s.trim())).filter(n=>!Number.isNaN(n));
439
- const p=nn.predict(input);
440
- el.predictionResult.textContent=`Prediction: ${Number.isFinite(p[0])?p[0].toFixed(6):'NaN'}`;
441
- drawNetwork();
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
- window.addEventListener('resize', sizeCanvases, {passive:true});
 
 
 
 
 
 
447
 
448
- createLayerConfigUI(parseInt(el.numHiddenLayers.value,10));
449
- sizeCanvases();
450
  });
451
- </script>
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&#10;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>