| <!DOCTYPE html> |
| <html lang="en" data-theme="dark"> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
| <meta name="color-scheme" content="light dark" /> |
| <meta name="theme-color" content="#09090b" /> |
| <title>Carbono — Neural Playground · Mono</title> |
| <style> |
| :root { |
| --primary: #0a0a0a; |
| --primary-strong: #000000; |
| --primary-soft: #f4f4f5; |
| --primary-ring: rgba(9, 9, 11, 0.12); |
| --surface: #ffffff; |
| --surface-raised: #fafafa; |
| --surface-soft: #f7f7f8; |
| --background: #f4f4f5; |
| --text: #09090b; |
| --text-secondary: #71717a; |
| --text-tertiary: #a1a1aa; |
| --border: #e4e4e7; |
| --border-strong: #d4d4d8; |
| --success: #18181b; |
| --success-soft: #f4f4f5; |
| --danger: #dc2626; |
| --danger-soft: #fef2f2; |
| --warning: #52525b; |
| --radius-sm: 7px; |
| --radius: 10px; |
| --radius-lg: 12px; |
| --shadow-sm: 0 1px 2px rgba(0,0,0,.03); |
| --shadow-md: 0 12px 32px rgba(0,0,0,.10); |
| --ease: cubic-bezier(.22,.61,.36,1); |
| --sidebar: 316px; |
| --aside: 292px; |
| } |
| |
| html[data-theme="dark"] { |
| --primary: #fafafa; |
| --primary-strong: #ffffff; |
| --primary-soft: #1f1f22; |
| --primary-ring: rgba(255,255,255,.13); |
| --surface: #111113; |
| --surface-raised: #161618; |
| --surface-soft: #0d0d0f; |
| --background: #09090b; |
| --text: #fafafa; |
| --text-secondary: #a1a1aa; |
| --text-tertiary: #71717a; |
| --border: #27272a; |
| --border-strong: #3f3f46; |
| --success: #fafafa; |
| --success-soft: #18181b; |
| --danger: #f87171; |
| --danger-soft: rgba(248,113,113,.08); |
| --warning: #d4d4d8; |
| --shadow-sm: 0 1px 2px rgba(0,0,0,.35); |
| --shadow-md: 0 18px 48px rgba(0,0,0,.40); |
| } |
| |
| @media (prefers-color-scheme: dark) { |
| html:not([data-theme="light"]) { |
| --primary: #fafafa; |
| --primary-strong: #ffffff; |
| --primary-soft: #1f1f22; |
| --primary-ring: rgba(255,255,255,.13); |
| --surface: #111113; |
| --surface-raised: #161618; |
| --surface-soft: #0d0d0f; |
| --background: #09090b; |
| --text: #fafafa; |
| --text-secondary: #a1a1aa; |
| --text-tertiary: #71717a; |
| --border: #27272a; |
| --border-strong: #3f3f46; |
| --success: #fafafa; |
| --success-soft: #18181b; |
| --danger: #f87171; |
| --danger-soft: rgba(248,113,113,.08); |
| --warning: #d4d4d8; |
| --shadow-sm: 0 1px 2px rgba(0,0,0,.35); |
| --shadow-md: 0 18px 48px rgba(0,0,0,.40); |
| } |
| } |
| |
| *, *::before, *::after { box-sizing: border-box; } |
| html { min-width: 320px; background: var(--background); } |
| body { |
| min-height: 100vh; |
| margin: 0; |
| background: |
| radial-gradient(900px 420px at 50% -190px, rgba(255,255,255,.035), transparent 64%), |
| var(--background); |
| color: var(--text); |
| font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; |
| font-size: 14px; |
| line-height: 1.5; |
| -webkit-font-smoothing: antialiased; |
| text-rendering: optimizeLegibility; |
| } |
| |
| button, input, textarea, select { font: inherit; } |
| button { -webkit-tap-highlight-color: transparent; } |
| ::selection { background: var(--primary-ring); } |
| |
| .app-shell { min-height: 100vh; } |
| |
| .topbar { |
| height: 66px; |
| position: sticky; |
| top: 0; |
| z-index: 30; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 18px; |
| padding: 0 24px; |
| border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent); |
| background: color-mix(in srgb, var(--background) 90%, transparent); |
| backdrop-filter: blur(14px); |
| -webkit-backdrop-filter: blur(14px); |
| } |
| |
| .brand-wrap, .top-actions, .brand-meta, .cluster { display: flex; align-items: center; } |
| .brand-wrap { gap: 12px; min-width: 0; } |
| .brand-mark { |
| width: 34px; height: 34px; flex: 0 0 auto; |
| display: grid; place-items: center; |
| border-radius: 8px; |
| color: var(--background); |
| background: var(--text); |
| border: 1px solid color-mix(in srgb, var(--text) 92%, transparent); |
| box-shadow: none; |
| } |
| .brand-mark svg { width: 18px; height: 18px; } |
| .brand-copy { min-width: 0; } |
| .brand-name { font-size: 15px; font-weight: 750; letter-spacing: -.02em; line-height: 1.2; } |
| .brand-sub { color: var(--text-secondary); font-size: 12px; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } |
| .brand-meta { gap: 9px; } |
| |
| .status-pill { |
| display: inline-flex; align-items: center; gap: 7px; |
| min-height: 28px; padding: 0 10px; |
| border: 1px solid var(--border); |
| border-radius: 999px; |
| color: var(--text-secondary); |
| background: color-mix(in srgb, var(--surface) 76%, transparent); |
| font-size: 12px; font-weight: 600; |
| } |
| .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); } |
| .status-pill.training .status-dot { background: var(--primary); animation: breathe 1.8s ease-in-out infinite; } |
| .status-pill.error .status-dot { background: var(--danger); } |
| |
| .top-actions { gap: 8px; } |
| .icon-btn, .btn { |
| border: 1px solid var(--border); |
| background: var(--surface); |
| color: var(--text); |
| cursor: pointer; |
| transition: transform .16s var(--ease), border-color .16s ease, background .16s ease, box-shadow .16s ease, color .16s ease; |
| } |
| .icon-btn:hover, .btn.secondary:hover { border-color: var(--border-strong); background: var(--surface-raised); box-shadow: var(--shadow-sm); transform: translateY(-1px); } |
| .icon-btn:active, .btn:active { transform: translateY(0) scale(.985); } |
| .icon-btn:focus-visible, .btn:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible { |
| outline: 0; box-shadow: 0 0 0 3px var(--primary-ring); border-color: var(--primary); |
| } |
| .icon-btn { |
| width: 36px; height: 36px; display: grid; place-items: center; |
| border-radius: 11px; |
| } |
| .icon-btn svg, .btn svg { width: 16px; height: 16px; flex: 0 0 auto; } |
| |
| .btn { |
| min-height: 38px; |
| display: inline-flex; align-items: center; justify-content: center; gap: 8px; |
| padding: 0 13px; |
| border-radius: 11px; |
| font-weight: 650; |
| letter-spacing: -.005em; |
| white-space: nowrap; |
| } |
| .btn.primary { |
| color: var(--background); |
| border-color: var(--primary); |
| background: var(--primary); |
| box-shadow: none; |
| } |
| .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); } |
| .btn.ghost { background: transparent; } |
| .btn:disabled { cursor: not-allowed; opacity: .58; transform: none !important; box-shadow: none !important; } |
| .btn.block { width: 100%; } |
| |
| .workspace { |
| width: min(1520px, 100%); |
| margin: 0 auto; |
| padding: 18px 20px 30px; |
| display: grid; |
| grid-template-columns: minmax(0, 1fr) var(--aside); |
| gap: 14px; |
| align-items: start; |
| } |
| |
| .column { min-width: 0; display: flex; flex-direction: column; gap: 14px; } |
| .sticky-col { position: sticky; top: 88px; } |
| |
| .settings-drawer { |
| position: fixed; |
| top: 0; |
| left: 0; |
| bottom: 0; |
| width: min(380px, calc(100vw - 20px)); |
| z-index: 80; |
| display: flex; |
| flex-direction: column; |
| background: color-mix(in srgb, var(--background) 92%, var(--surface)); |
| border-right: 1px solid var(--border); |
| box-shadow: var(--shadow-md); |
| backdrop-filter: blur(18px); |
| -webkit-backdrop-filter: blur(18px); |
| transform: translateX(-102%); |
| transition: transform .24s var(--ease); |
| } |
| .settings-drawer.open { transform: translateX(0); } |
| .drawer-overlay { |
| position: fixed; |
| inset: 0; |
| z-index: 70; |
| background: rgba(0,0,0,.48); |
| opacity: 0; |
| pointer-events: none; |
| transition: opacity .2s ease; |
| } |
| .drawer-overlay.open { opacity: 1; pointer-events: auto; } |
| .drawer-head { |
| min-height: 68px; |
| padding: 16px 16px 14px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 12px; |
| border-bottom: 1px solid var(--border); |
| } |
| .drawer-body { |
| flex: 1; |
| overflow: auto; |
| padding: 14px; |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
| .drawer-note { color: var(--text-secondary); font-size: 11.5px; } |
| .mini-section { |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| background: var(--surface); |
| overflow: hidden; |
| } |
| .mini-section summary { |
| list-style: none; |
| cursor: pointer; |
| padding: 12px 13px; |
| display: flex; |
| align-items: center; |
| justify-content: space-between; |
| gap: 10px; |
| user-select: none; |
| } |
| .mini-section summary::-webkit-details-marker { display: none; } |
| .mini-summary-main { display: flex; align-items: center; gap: 10px; min-width: 0; } |
| .mini-icon { |
| width: 28px; height: 28px; flex: 0 0 auto; |
| display: grid; place-items: center; |
| border-radius: 7px; |
| border: 1px solid var(--border); |
| background: var(--surface-soft); |
| color: var(--text-secondary); |
| } |
| .mini-icon svg { width: 14px; height: 14px; } |
| .mini-copy { min-width: 0; } |
| .mini-title { font-size: 12px; font-weight: 700; } |
| .mini-subtitle { margin-top: 1px; color: var(--text-secondary); font-size: 11px; } |
| .mini-chevron { |
| width: 18px; height: 18px; flex: 0 0 auto; |
| color: var(--text-tertiary); |
| transition: transform .18s ease; |
| } |
| .mini-section[open] .mini-chevron { transform: rotate(180deg); } |
| .mini-content { |
| padding: 0 13px 13px; |
| border-top: 1px solid var(--border); |
| display: flex; |
| flex-direction: column; |
| gap: 12px; |
| } |
| |
| .card { |
| position: relative; |
| overflow: clip; |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| background: var(--surface); |
| box-shadow: none; |
| animation: cardIn .34s var(--ease) both; |
| } |
| .column .card:nth-child(2) { animation-delay: .035s; } |
| .column .card:nth-child(3) { animation-delay: .07s; } |
| |
| .card-head { |
| min-height: 54px; |
| padding: 13px 15px; |
| display: flex; align-items: center; justify-content: space-between; gap: 12px; |
| border-bottom: 1px solid var(--border); |
| } |
| .card-title-wrap { min-width: 0; } |
| .card-title { font-size: 13px; font-weight: 750; letter-spacing: -.01em; } |
| .card-subtitle { margin-top: 2px; color: var(--text-secondary); font-size: 11.5px; } |
| .card-body { padding: 15px; } |
| .card-body.compact { padding: 12px 15px; } |
| |
| .section-label { |
| margin: 0 0 8px; |
| color: var(--text-secondary); |
| font-size: 11px; |
| font-weight: 700; |
| letter-spacing: .055em; |
| text-transform: uppercase; |
| } |
| |
| .field { display: flex; flex-direction: column; gap: 6px; } |
| .field + .field { margin-top: 13px; } |
| .field-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } |
| .field-label-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } |
| label { color: var(--text); font-size: 12px; font-weight: 650; } |
| .field-hint, .hint { color: var(--text-secondary); font-size: 11.5px; } |
| .mono { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace; font-variant-numeric: tabular-nums; } |
| |
| input, textarea, select { |
| width: 100%; |
| color: var(--text); |
| border: 1px solid var(--border); |
| border-radius: var(--radius-sm); |
| background: var(--surface-soft); |
| transition: border-color .16s ease, background .16s ease, box-shadow .16s ease; |
| } |
| input, select { height: 38px; padding: 0 10px; } |
| textarea { min-height: 102px; padding: 10px 11px; line-height: 1.55; resize: vertical; } |
| input:hover, textarea:hover, select:hover { border-color: var(--border-strong); } |
| input:focus, textarea:focus, select:focus { outline: 0; border-color: var(--primary); background: var(--surface); box-shadow: 0 0 0 3px var(--primary-ring); } |
| input::placeholder, textarea::placeholder { color: var(--text-tertiary); } |
| |
| .segmented { |
| display: grid; grid-template-columns: 1fr 1fr; |
| gap: 4px; |
| padding: 4px; |
| border-radius: 9px; |
| background: var(--surface-soft); |
| border: 1px solid var(--border); |
| margin-bottom: 13px; |
| } |
| .seg-btn { |
| height: 30px; border: 0; border-radius: 8px; |
| background: transparent; color: var(--text-secondary); |
| cursor: pointer; font-size: 12px; font-weight: 650; |
| transition: background .16s ease, color .16s ease, box-shadow .16s ease; |
| } |
| .seg-btn.active { background: var(--surface); color: var(--text); box-shadow: inset 0 0 0 1px var(--border); } |
| .data-pane[hidden] { display: none; } |
| |
| .architecture-stack { display: flex; flex-direction: column; gap: 8px; } |
| .layer-row { |
| display: grid; grid-template-columns: 34px minmax(0,1fr) minmax(0,1fr); |
| gap: 8px; align-items: center; |
| padding: 8px; |
| border-radius: 8px; |
| border: 1px solid var(--border); |
| background: var(--surface-soft); |
| animation: layerIn .25s var(--ease) both; |
| } |
| .layer-index { |
| width: 30px; height: 30px; display: grid; place-items: center; |
| border-radius: 7px; color: var(--text); background: var(--primary-soft); border: 1px solid var(--border); |
| font-weight: 750; font-size: 11px; |
| } |
| .layer-row input, .layer-row select { height: 34px; background: var(--surface); } |
| |
| .hero-card .card-head { min-height: 64px; } |
| .training-heading { display: flex; align-items: center; gap: 10px; } |
| .training-icon { |
| width: 32px; height: 32px; display: grid; place-items: center; |
| border-radius: 8px; color: var(--text); background: var(--primary-soft); border: 1px solid var(--border); |
| } |
| .training-icon svg { width: 16px; height: 16px; } |
| |
| .metric-row { |
| display: grid; |
| grid-template-columns: repeat(4, minmax(0,1fr)); |
| gap: 10px; |
| padding: 14px 15px 0; |
| } |
| .metric { |
| min-width: 0; |
| padding: 11px 12px; |
| border: 1px solid var(--border); |
| border-radius: 8px; |
| background: var(--surface-soft); |
| } |
| .metric-label { color: var(--text-secondary); font-size: 10.5px; font-weight: 650; } |
| .metric-value { margin-top: 3px; font-size: 15px; font-weight: 750; letter-spacing: -.025em; overflow: hidden; text-overflow: ellipsis; } |
| .metric-value.good { color: var(--success); } |
| |
| .chart-wrap { |
| position: relative; |
| height: 330px; |
| margin: 14px 15px 0; |
| overflow: hidden; |
| border: 1px solid var(--border); |
| border-radius: 9px; |
| background: |
| linear-gradient(var(--surface-soft), var(--surface-soft)) padding-box, |
| var(--surface-soft); |
| } |
| .chart-wrap.network { height: 280px; } |
| canvas { width: 100%; height: 100%; display: block; } |
| .chart-empty { |
| position: absolute; inset: 0; |
| display: grid; place-items: center; |
| pointer-events: none; |
| transition: opacity .2s ease; |
| } |
| .chart-empty.hidden { opacity: 0; } |
| .empty-inner { text-align: center; max-width: 230px; padding: 24px; } |
| .empty-icon { |
| width: 42px; height: 42px; display: grid; place-items: center; |
| margin: 0 auto 10px; border-radius: 13px; |
| color: var(--text-secondary); border: 1px solid var(--border); background: var(--surface); |
| box-shadow: none; |
| } |
| .empty-icon svg { width: 18px; height: 18px; } |
| .empty-title { font-size: 12px; font-weight: 700; } |
| .empty-copy { margin-top: 4px; color: var(--text-secondary); font-size: 11.5px; line-height: 1.5; } |
| |
| .chart-footer { |
| padding: 12px 15px 15px; |
| display: flex; align-items: center; justify-content: space-between; gap: 14px; |
| } |
| .legend { display: flex; flex-wrap: wrap; gap: 12px; color: var(--text-secondary); font-size: 11.5px; } |
| .legend-item { display: flex; align-items: center; gap: 6px; } |
| .legend-dot { width: 14px; height: 2px; border-radius: 999px; background: var(--primary); } |
| .legend-dot.val { background: var(--text-tertiary); } |
| .progress-area { flex: 1; min-width: 120px; max-width: 260px; } |
| .progress-meta { display: flex; justify-content: space-between; color: var(--text-secondary); font-size: 10.5px; margin-bottom: 6px; } |
| .progress-track { height: 6px; overflow: hidden; border-radius: 999px; background: var(--surface-soft); border: 1px solid var(--border); } |
| .progress-value { height: 100%; width: 0%; border-radius: inherit; background: var(--primary); transition: width .22s linear; } |
| |
| .action-stack { display: grid; gap: 9px; } |
| .secondary-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } |
| |
| .predict-input-wrap { position: relative; } |
| .predict-input-wrap input { padding-right: 42px; } |
| .predict-inline-btn { |
| position: absolute; right: 5px; top: 5px; |
| width: 28px; height: 28px; display: grid; place-items: center; |
| border: 1px solid var(--primary); border-radius: 6px; color: var(--background); background: var(--primary); cursor: pointer; |
| transition: transform .16s var(--ease), filter .16s ease; |
| } |
| .predict-inline-btn:hover { filter: brightness(1.03); transform: translateX(1px); } |
| .predict-inline-btn svg { width: 14px; height: 14px; } |
| |
| .prediction-result { |
| margin-top: 11px; |
| min-height: 78px; |
| padding: 12px; |
| display: flex; flex-direction: column; justify-content: center; |
| border: 1px solid var(--border); |
| border-radius: 9px; |
| background: var(--surface-soft); |
| transition: border-color .2s ease, background .2s ease; |
| } |
| .prediction-result.has-value { border-color: var(--border-strong); background: var(--primary-soft); } |
| .result-label { color: var(--text-secondary); font-size: 10.5px; font-weight: 650; } |
| .result-value { margin-top: 2px; font-size: 24px; line-height: 1.15; font-weight: 780; letter-spacing: -.04em; } |
| .result-copy { margin-top: 3px; color: var(--text-secondary); font-size: 11px; } |
| |
| .model-summary { display: grid; gap: 0; } |
| .summary-row { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--border); } |
| .summary-row:first-child { padding-top: 0; } |
| .summary-row:last-child { border-bottom: 0; padding-bottom: 0; } |
| .summary-key { color: var(--text-secondary); font-size: 11.5px; } |
| .summary-value { min-width: 0; text-align: right; font-size: 11.5px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; } |
| |
| .repo-link { display: flex; align-items: center; gap: 9px; color: var(--text); text-decoration: none; } |
| .repo-link:hover .repo-name { color: var(--text); text-decoration: underline; text-underline-offset: 3px; } |
| .repo-icon { width: 34px; height: 34px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-soft); } |
| .repo-icon svg { width: 16px; height: 16px; } |
| .repo-copy { flex: 1; min-width: 0; } |
| .repo-name { font-size: 12px; font-weight: 700; transition: color .16s ease; } |
| .repo-sub { margin-top: 1px; color: var(--text-secondary); font-size: 10.5px; } |
| .repo-arrow { color: var(--text-tertiary); } |
| |
| .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; } |
| |
| .toast-region { position: fixed; right: 18px; bottom: 18px; z-index: 100; display: grid; gap: 8px; pointer-events: none; } |
| .toast { |
| min-width: 250px; max-width: 360px; |
| display: flex; gap: 10px; align-items: flex-start; |
| padding: 11px 12px; |
| border: 1px solid var(--border); |
| border-radius: 13px; |
| background: color-mix(in srgb, var(--surface) 97%, transparent); |
| box-shadow: var(--shadow-md); |
| backdrop-filter: blur(16px); |
| animation: toastIn .3s var(--ease) both; |
| pointer-events: auto; |
| } |
| .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); } |
| .toast.success .toast-icon { color: var(--success); background: var(--success-soft); } |
| .toast.error .toast-icon { color: var(--danger); background: var(--danger-soft); } |
| .toast-title { font-size: 11.5px; font-weight: 750; } |
| .toast-copy { margin-top: 2px; color: var(--text-secondary); font-size: 11px; } |
| .toast.leaving { animation: toastOut .24s ease forwards; } |
| |
| .mobile-train { display: none; } |
| .spin { animation: spin .8s linear infinite; } |
| |
| @keyframes cardIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } } |
| @keyframes layerIn { from { opacity: 0; transform: scale(.985); } to { opacity: 1; transform: none; } } |
| @keyframes toastIn { from { opacity: 0; transform: translateY(8px) scale(.98); } to { opacity: 1; transform: none; } } |
| @keyframes toastOut { to { opacity: 0; transform: translateY(5px) scale(.985); } } |
| @keyframes breathe { 50% { box-shadow: 0 0 0 5px var(--primary-ring); } } |
| @keyframes spin { to { transform: rotate(360deg); } } |
| |
| @media (max-width: 1220px) { |
| .workspace { grid-template-columns: minmax(0, 1fr); } |
| .right-col { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); } |
| .right-col.sticky-col { position: static; } |
| } |
| @media (max-width: 900px) { |
| .topbar { padding: 0 16px; } |
| .brand-meta { display: none; } |
| .workspace { display: flex; flex-direction: column; padding: 16px; } |
| .column, .main-col, .right-col { width: 100%; } |
| .sticky-col { position: static; } |
| .right-col { display: grid; grid-template-columns: 1fr 1fr; } |
| .right-col .repo-card { grid-column: 1 / -1; } |
| .metric-row { grid-template-columns: repeat(2, minmax(0,1fr)); } |
| .chart-wrap { height: 300px; } |
| .settings-drawer { width: min(420px, calc(100vw - 20px)); } |
| } |
| @media (max-width: 620px) { |
| .topbar { height: 60px; } |
| .brand-sub { display: none; } |
| .desktop-sample { display: none; } |
| .settings-drawer { width: calc(100vw - 16px); } |
| .workspace { padding: 12px 12px 88px; gap: 12px; } |
| .column { gap: 12px; } |
| .right-col { display: flex; } |
| .field-row { grid-template-columns: 1fr 1fr; } |
| .metric-row { gap: 8px; padding: 12px 12px 0; } |
| .chart-wrap, .chart-wrap.network { margin-left: 12px; margin-right: 12px; height: 250px; } |
| .chart-footer { align-items: flex-start; flex-direction: column; padding: 11px 12px 13px; } |
| .progress-area { width: 100%; max-width: none; } |
| .card-head { padding-inline: 13px; } |
| .card-body { padding: 13px; } |
| .mobile-train { |
| display: block; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; |
| padding: 8px; border: 1px solid var(--border); border-radius: 10px; |
| background: color-mix(in srgb, var(--background) 78%, transparent); |
| backdrop-filter: blur(18px); |
| box-shadow: var(--shadow-md); |
| } |
| .toast-region { left: 12px; right: 12px; bottom: 82px; } |
| .toast { min-width: 0; max-width: none; width: 100%; } |
| } |
| |
| @media (prefers-reduced-motion: reduce) { |
| *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } |
| } |
| |
| |
| .topbar { border-bottom-color: var(--border); } |
| .status-pill { border-radius: 7px; background: var(--surface); } |
| .status-dot { box-shadow: none; } |
| .status-pill.training .status-dot { animation: monoPulse 1.6s ease-in-out infinite; } |
| .icon-btn, .btn { border-radius: 7px; box-shadow: none; } |
| .icon-btn:hover, .btn.secondary:hover { box-shadow: none; transform: none; background: var(--surface-raised); } |
| .btn.primary:hover { transform: none; } |
| input, textarea, select { border-radius: 7px; } |
| input:focus, textarea:focus, select:focus, |
| .icon-btn:focus-visible, .btn:focus-visible { box-shadow: 0 0 0 2px var(--background), 0 0 0 4px var(--primary-ring); } |
| .card::after { |
| content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; |
| box-shadow: inset 0 1px rgba(255,255,255,.018); |
| } |
| html[data-theme="light"] .card::after { box-shadow: inset 0 1px rgba(255,255,255,.8); } |
| .metric { transition: border-color .16s ease, background .16s ease; } |
| .metric:hover { border-color: var(--border-strong); background: var(--surface-raised); } |
| .chart-wrap { background: var(--surface-soft); } |
| .chart-wrap::before { |
| content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; opacity: .22; |
| background-image: linear-gradient(to right, var(--border) 1px, transparent 1px), linear-gradient(to bottom, var(--border) 1px, transparent 1px); |
| background-size: 40px 40px; mask-image: linear-gradient(to bottom, rgba(0,0,0,.6), transparent 96%); |
| } |
| .chart-wrap canvas, .chart-empty { position: relative; z-index: 1; } |
| .predict-inline-btn:hover { filter: none; transform: none; opacity: .86; } |
| .repo-icon { border-radius: 7px; } |
| .kbd { background: var(--surface); } |
| @keyframes monoPulse { 50% { opacity: .45; } } |
| </style> |
| </head> |
| <body> |
| <div class="app-shell"> |
| <header class="topbar"> |
| <div class="brand-wrap"> |
| <div class="brand-mark" aria-hidden="true"> |
| <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> |
| </div> |
| <div class="brand-copy"> |
| <div class="brand-name">Carbono</div> |
| <div class="brand-sub">Neural playground · Learn by seeing</div> |
| </div> |
| <div class="brand-meta"> |
| <div id="appStatus" class="status-pill"><span class="status-dot"></span><span id="appStatusText">Ready</span></div> |
| </div> |
| </div> |
|
|
| <div class="top-actions"> |
| <button id="loadDataBtn" class="icon-btn desktop-sample" type="button" aria-label="Load sample data" title="Load sample data"> |
| <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> |
| </button> |
| <button id="settingsButton" class="icon-btn" type="button" aria-label="Open settings" title="Open settings"> |
| <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> |
| </button> |
| <button id="themeButton" class="icon-btn" type="button" aria-label="Toggle theme" title="Toggle theme"> |
| <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> |
| </button> |
| </div> |
| </header> |
|
|
| <div id="drawerOverlay" class="drawer-overlay" hidden></div> |
| <aside id="settingsDrawer" class="settings-drawer" aria-hidden="true"> |
| <div class="drawer-head"> |
| <div class="card-title-wrap"> |
| <div class="card-title">Controls</div> |
| <div class="drawer-note">Advanced inputs stay here so the main canvas stays clean.</div> |
| </div> |
| <div class="cluster" style="gap:8px"> |
| <button id="mobileSampleBtn" class="icon-btn" type="button" aria-label="Load sample data" title="Load sample"> |
| <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> |
| </button> |
| <button id="drawerCloseButton" class="icon-btn" type="button" aria-label="Close settings" title="Close settings"> |
| <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> |
| </button> |
| </div> |
| </div> |
| <div class="drawer-body"> |
| <details class="mini-section" open> |
| <summary> |
| <div class="mini-summary-main"> |
| <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> |
| <div class="mini-copy"><div class="mini-title">Dataset</div><div class="mini-subtitle">Training and validation rows</div></div> |
| </div> |
| <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> |
| </summary> |
| <div class="mini-content"> |
| <div class="segmented" role="tablist" aria-label="Dataset views"> |
| <button class="seg-btn active" type="button" data-pane="trainingPane">Training</button> |
| <button class="seg-btn" type="button" data-pane="validationPane">Validation</button> |
| </div> |
|
|
| <div id="trainingPane" class="data-pane"> |
| <div class="field"> |
| <div class="field-label-row"><label for="trainingData">Training set</label><span id="trainRows" class="field-hint mono">0 rows</span></div> |
| <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> |
| <div class="field-hint">Comma-separated features. The last value in each row is the target.</div> |
| </div> |
| </div> |
|
|
| <div id="validationPane" class="data-pane" hidden> |
| <div class="field"> |
| <div class="field-label-row"><label for="testData">Validation set</label><span id="valRows" class="field-hint mono">0 rows</span></div> |
| <textarea id="testData" class="mono" spellcheck="false" placeholder="0.4, 0.2, 0.6, 1.0"></textarea> |
| <div class="field-hint">Optional. Used to track validation loss while training.</div> |
| </div> |
| </div> |
| </div> |
| </details> |
|
|
| <details class="mini-section"> |
| <summary> |
| <div class="mini-summary-main"> |
| <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> |
| <div class="mini-copy"><div class="mini-title">Training setup</div><div class="mini-subtitle">Epochs, rate, batch size</div></div> |
| </div> |
| <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> |
| </summary> |
| <div class="mini-content"> |
| <div class="field-row"> |
| <div class="field"><label for="epochs">Epochs</label><input type="number" id="epochs" value="50" min="1" /></div> |
| <div class="field"><label for="learningRate">Learning rate</label><input type="number" id="learningRate" value="0.1" min="0.000001" step="0.001" /></div> |
| <div class="field"><label for="batchSize">Batch size</label><input type="number" id="batchSize" value="8" min="1" /></div> |
| <div class="field"><label for="numHiddenLayers">Hidden layers</label><input type="number" id="numHiddenLayers" value="1" min="1" max="4" /></div> |
| </div> |
| </div> |
| </details> |
|
|
| <details class="mini-section"> |
| <summary> |
| <div class="mini-summary-main"> |
| <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> |
| <div class="mini-copy"><div class="mini-title">Architecture</div><div class="mini-subtitle">Shape each hidden layer</div></div> |
| </div> |
| <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> |
| </summary> |
| <div class="mini-content"> |
| <div id="hiddenLayersConfig" class="architecture-stack"></div> |
| </div> |
| </details> |
| </div> |
| </aside> |
|
|
| <main class="workspace"> |
| <section class="column main-col"> |
| <section class="card hero-card"> |
| <div class="card-head"> |
| <div class="training-heading"> |
| <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> |
| <div class="card-title-wrap"><div class="card-title">Training</div><div class="card-subtitle">Loss updates live every epoch</div></div> |
| </div> |
| <div class="cluster" style="gap:8px"> |
| <span class="kbd">⌘/Ctrl + Enter</span> |
| </div> |
| </div> |
|
|
| <div class="metric-row"> |
| <div class="metric"><div class="metric-label">Epoch</div><div id="metricEpoch" class="metric-value mono">—</div></div> |
| <div class="metric"><div class="metric-label">Train loss</div><div id="metricTrain" class="metric-value mono">—</div></div> |
| <div class="metric"><div class="metric-label">Val loss</div><div id="metricVal" class="metric-value mono">—</div></div> |
| <div class="metric"><div class="metric-label">Parameters</div><div id="metricParams" class="metric-value mono">—</div></div> |
| </div> |
|
|
| <div class="chart-wrap"> |
| <canvas id="lossGraph" aria-label="Training and validation loss graph"></canvas> |
| <div id="lossEmpty" class="chart-empty"> |
| <div class="empty-inner"> |
| <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> |
| <div class="empty-title">Your learning curve will appear here</div> |
| <div class="empty-copy">Load the sample or paste a dataset, then start training.</div> |
| </div> |
| </div> |
| </div> |
|
|
| <div class="chart-footer"> |
| <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> |
| <div class="progress-area"> |
| <div class="progress-meta"><span id="progressLabel">Not started</span><span id="progressPercent" class="mono">0%</span></div> |
| <div class="progress-track"><div id="epochBar" class="progress-value"></div></div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="card"> |
| <div class="card-head"> |
| <div class="card-title-wrap"><div class="card-title">Network activity</div><div class="card-subtitle">Activation-weighted connections after prediction</div></div> |
| <div id="networkBadge" class="status-pill"><span class="status-dot"></span><span>Awaiting input</span></div> |
| </div> |
| <div class="chart-wrap network"> |
| <canvas id="networkGraph" aria-label="Neural network visualization"></canvas> |
| <div id="networkEmpty" class="chart-empty"> |
| <div class="empty-inner"> |
| <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> |
| <div class="empty-title">Inspect the model visually</div> |
| <div class="empty-copy">Train the model, then run a prediction to see activations flow through the network.</div> |
| </div> |
| </div> |
| </div> |
| <div class="chart-footer"><div class="hint">Connection opacity reflects activation × weight magnitude.</div></div> |
| </section> |
| </section> |
|
|
| <aside class="column right-col sticky-col"> |
| <section class="card"> |
| <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> |
| <div class="card-body"> |
| <div class="action-stack"> |
| <button id="trainButton" class="btn primary block" type="button"> |
| <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> |
| <span class="train-label">Train model</span> |
| </button> |
| <div class="secondary-actions"> |
| <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> |
| <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> |
| </div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="card"> |
| <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> |
| <div class="card-body"> |
| <div class="field"> |
| <label for="predictionInput">Input vector</label> |
| <div class="predict-input-wrap"> |
| <input class="mono" type="text" id="predictionInput" placeholder="0.4, 0.2, 0.6" autocomplete="off" /> |
| <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> |
| </div> |
| </div> |
| <div id="predictionResult" class="prediction-result"> |
| <div class="result-label">Prediction</div> |
| <div class="result-value mono">—</div> |
| <div class="result-copy">Train or load a model first.</div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="card"> |
| <div class="card-head"><div class="card-title-wrap"><div class="card-title">Model</div><div class="card-subtitle">Quick summary</div></div></div> |
| <div class="card-body compact"> |
| <div id="stats" class="model-summary"> |
| <div class="summary-row"><span class="summary-key">Status</span><span class="summary-value">Not trained</span></div> |
| <div class="summary-row"><span class="summary-key">Layers</span><span id="summaryLayers" class="summary-value mono">—</span></div> |
| <div class="summary-row"><span class="summary-key">Time</span><span id="summaryTime" class="summary-value mono">—</span></div> |
| </div> |
| </div> |
| </section> |
|
|
| <section class="card repo-card"> |
| <div class="card-body compact"> |
| <a class="repo-link" href="https://github.com/appvoid/carbono" target="_blank" rel="noopener"> |
| <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> |
| <span class="repo-copy"><span class="repo-name">appvoid/carbono</span><span class="repo-sub">View source on GitHub</span></span> |
| <span class="repo-arrow">↗</span> |
| </a> |
| </div> |
| </section> |
| </aside> |
| </main> |
|
|
| <div class="mobile-train"><button id="mobileTrainButton" class="btn primary block" type="button">Train model</button></div> |
| <div id="toastRegion" class="toast-region" aria-live="polite" aria-atomic="true"></div> |
| </div> |
|
|
| <script> |
| class carbono { |
| constructor(debug = true) { this.layers=[]; this.weights=[]; this.biases=[]; this.activations=[]; this.details={}; this.debug=debug; } |
| layer(inputSize, outputSize, activation='tanh'){ |
| this.layers.push({inputSize,outputSize,activation}); |
| 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.'); } |
| 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); } |
| this.weights.push(W); this.biases.push(Array(outputSize).fill(0.01)); this.activations.push(activation); |
| } |
| 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');} } |
| activationDerivative(x,a){ switch(a){case 'tanh':return 1-Math.pow(Math.tanh(x),2);case 'sigmoid':{const s=1/(1+Math.exp(-x));return s*(1-s);}case 'relu':return x>0?1:0;case 'selu':{const alpha=1.67326,scale=1.0507;return x>0?scale:scale*alpha*Math.exp(x);}default:throw new Error('Unknown derivative');} } |
| positionalEncoding(input,maxLen){ const pe=new Array(maxLen).fill(0).map((_,pos)=>new Array(input[0].length).fill(0).map((_,i)=>{const ang=pos/Math.pow(10000,2*i/input[0].length);return pos%2===0?Math.sin(ang):Math.cos(ang);})); return input.map((seq,idx)=>seq.map((v,i)=>v+pe[idx][i])); } |
| multiHeadSelfAttention(input,numHeads=2){ |
| const headSize=input[0].length/numHeads; const heads=[...Array(numHeads)].map(()=>[...Array(input.length)].map(()=>[...Array(headSize)].fill(0))); |
| 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]; |
| const scores=[...Array(numHeads)].map(()=>[...Array(input.length)].map(()=>[...Array(input.length)].fill(0))); |
| 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; } |
| 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)})); |
| const out=[...Array(input.length)].map(()=>[...Array(input[0].length)].fill(0)); |
| 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]; |
| return out; |
| } |
| layerNormalization(arr){ const m=arr.reduce((s,v)=>s+v,0)/arr.length; const v=arr.reduce((s,x)=>s+Math.pow(x-m,2),0)/arr.length; return arr.map(x=>(x-m)/Math.sqrt(v+1e-5)); } |
| async train(trainSet,options={}){ |
| const {epochs=200,learningRate=0.212,batchSize=16,printEveryEpochs=100,earlyStopThreshold=1e-6,testSet=null,callback=null}=options; |
| const start=Date.now(); const batch=Math.max(1,batchSize); |
| if(this.layers.length===0){ const n=trainSet[0].input.length; this.layer(n,n,'tanh'); this.layer(n,1,'tanh'); } |
| let lastTrainLoss=0,lastTestLoss=null, completedEpochs=0; |
| for(let epoch=0;epoch<epochs;epoch++){ |
| let trainError=0; |
| for(let b=0;b<trainSet.length;b+=batch){ |
| const batchItems=trainSet.slice(b,b+batch); let batchError=0; |
| for(const data of batchItems){ |
| const L=[data.input]; |
| for(let i=0;i<this.weights.length;i++){ |
| const inputs=L[i], W=this.weights[i], B=this.biases[i], act=this.activations[i]; const out=[]; |
| for(let j=0;j<W.length;j++){ const w=W[j]; let sum=B[j]; for(let k=0;k<inputs.length;k++) sum+=inputs[k]*w[k]; out.push(this.activationFunction(sum,act)); } |
| L.push(out); |
| } |
| const outIn=L[L.length-1]; const outErr=[]; for(let i=0;i<outIn.length;i++) outErr.push((data.output[i]??0)-outIn[i]); |
| let layerErrors=[outErr]; |
| 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); } |
| 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]; } } |
| batchError+=Math.abs(outErr[0]??0); |
| } |
| trainError+=batchError; |
| } |
| lastTrainLoss=trainError/trainSet.length; completedEpochs=epoch+1; |
| 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; } |
| if((epoch+1)%printEveryEpochs===0 && this.debug) console.log(`Epoch ${epoch+1} | Train ${lastTrainLoss.toFixed(6)}${testSet?` | Val ${lastTestLoss.toFixed(6)}`:''}`); |
| if(callback) await callback(epoch+1,lastTrainLoss,lastTestLoss); |
| await new Promise(r=>setTimeout(r,0)); |
| if(lastTrainLoss<earlyStopThreshold) { if(this.debug) console.log(`Early stop @${epoch+1}`); break; } |
| } |
| 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; |
| 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}))}; |
| this.details=summary; return summary; |
| } |
| predict(input){ |
| let x=input; const acts=[input], raw=[]; |
| 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; } |
| this.lastActivations=acts; this.lastRawValues=raw; return x; |
| } |
| save(name='model'){ |
| const data={weights:this.weights,biases:this.biases,activations:this.activations,layers:this.layers,details:this.details}; |
| 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); |
| } |
| load(callback){ |
| const onChange=(e)=>{ const f=e.target.files[0]; if(!f) return; const r=new FileReader(); |
| 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(); } }; |
| r.readAsText(f); |
| }; |
| 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(); |
| } |
| } |
| |
| document.addEventListener('DOMContentLoaded',()=>{ |
| const nn=new carbono(); |
| let lossHistory=[]; |
| let isTraining=false; |
| |
| const $=id=>document.getElementById(id); |
| const el={ |
| loadDataBtn:$('loadDataBtn'), mobileSampleBtn:$('mobileSampleBtn'), trainingData:$('trainingData'), testData:$('testData'), |
| numHiddenLayers:$('numHiddenLayers'), hiddenLayersConfig:$('hiddenLayersConfig'), trainButton:$('trainButton'), mobileTrainButton:$('mobileTrainButton'), |
| stats:$('stats'), epochBar:$('epochBar'), epochs:$('epochs'), learningRate:$('learningRate'), batchSize:$('batchSize'), |
| predictButton:$('predictButton'), predictionInput:$('predictionInput'), predictionResult:$('predictionResult'), saveButton:$('saveButton'), loadButton:$('loadButton'), |
| metricEpoch:$('metricEpoch'), metricTrain:$('metricTrain'), metricVal:$('metricVal'), metricParams:$('metricParams'), |
| progressLabel:$('progressLabel'), progressPercent:$('progressPercent'), lossEmpty:$('lossEmpty'), networkEmpty:$('networkEmpty'), |
| appStatus:$('appStatus'), appStatusText:$('appStatusText'), networkBadge:$('networkBadge'), trainRows:$('trainRows'), valRows:$('valRows'), |
| summaryLayers:$('summaryLayers'), summaryTime:$('summaryTime'), toastRegion:$('toastRegion'), themeButton:$('themeButton'), |
| settingsButton:$('settingsButton'), drawerOverlay:$('drawerOverlay'), settingsDrawer:$('settingsDrawer'), drawerCloseButton:$('drawerCloseButton') |
| }; |
| |
| const lossCanvas=$('lossGraph'), networkCanvas=$('networkGraph'); |
| const lossCtx=lossCanvas.getContext('2d'), networkCtx=networkCanvas.getContext('2d'); |
| |
| function css(name){ return getComputedStyle(document.documentElement).getPropertyValue(name).trim(); } |
| function setStatus(text,state='ready'){ |
| el.appStatusText.textContent=text; |
| el.appStatus.classList.toggle('training',state==='training'); |
| el.appStatus.classList.toggle('error',state==='error'); |
| } |
| function toast(title,copy='',type='info'){ |
| const node=document.createElement('div'); node.className=`toast ${type}`; |
| 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>`; |
| el.toastRegion.appendChild(node); |
| setTimeout(()=>{ node.classList.add('leaving'); setTimeout(()=>node.remove(),260); },3000); |
| } |
| function openDrawer(){ |
| el.settingsDrawer.classList.add('open'); |
| el.settingsDrawer.setAttribute('aria-hidden','false'); |
| el.drawerOverlay.hidden=false; |
| requestAnimationFrame(()=>el.drawerOverlay.classList.add('open')); |
| } |
| function closeDrawer(){ |
| el.settingsDrawer.classList.remove('open'); |
| el.settingsDrawer.setAttribute('aria-hidden','true'); |
| el.drawerOverlay.classList.remove('open'); |
| setTimeout(()=>{ if(!el.drawerOverlay.classList.contains('open')) el.drawerOverlay.hidden=true; },200); |
| } |
| |
| function setTrainingUI(training){ |
| isTraining=training; |
| [el.trainButton,el.mobileTrainButton].forEach(btn=>btn.disabled=training); |
| const label=el.trainButton.querySelector('.train-label'); |
| const icon=el.trainButton.querySelector('.train-icon'); |
| label.textContent=training?'Training…':'Train model'; |
| 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'); } |
| 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'; } |
| } |
| |
| function parseCSV(csv,{allowEmpty=false}={}){ |
| const text=csv.trim(); |
| if(!text){ if(allowEmpty) return []; throw new Error('Add at least one training row.'); } |
| const rows=text.split(/\r?\n/).map(r=>r.trim()).filter(Boolean); |
| const parsed=rows.map((row,index)=>{ |
| const values=row.split(',').map(s=>Number(s.trim())); |
| if(values.length<2 || values.some(v=>!Number.isFinite(v))) throw new Error(`Row ${index+1} contains an invalid number.`); |
| return {input:values.slice(0,-1),output:[values[values.length-1]]}; |
| }); |
| const width=parsed[0].input.length; |
| if(!width) throw new Error('Each row needs at least one feature and one target.'); |
| if(parsed.some(r=>r.input.length!==width)) throw new Error('All rows must contain the same number of features.'); |
| return parsed; |
| } |
| |
| function rowCount(text){ return text.trim()?text.trim().split(/\r?\n/).filter(r=>r.trim()).length:0; } |
| function updateDataCounts(){ el.trainRows.textContent=`${rowCount(el.trainingData.value)} rows`; el.valRows.textContent=`${rowCount(el.testData.value)} rows`; } |
| |
| function createLayerConfigUI(n){ |
| n=Math.min(4,Math.max(1,Number(n)||1)); el.numHiddenLayers.value=n; |
| const old=[...el.hiddenLayersConfig.querySelectorAll('.layer-row')].map(row=>({nodes:row.querySelector('input')?.value,act:row.querySelector('select')?.value})); |
| el.hiddenLayersConfig.innerHTML=''; |
| for(let i=0;i<n;i++){ |
| const row=document.createElement('div'); row.className='layer-row'; |
| const nodes=old[i]?.nodes||'5', act=old[i]?.act||'tanh'; |
| 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>`; |
| el.hiddenLayersConfig.appendChild(row); |
| } |
| } |
| |
| function getLayerConfig(){ |
| const n=Number(el.numHiddenLayers.value); |
| const cfg=[]; |
| for(let i=0;i<n;i++){ |
| const size=Number(document.querySelector(`input[data-layer-index="${i}"]`).value); |
| const activation=document.querySelector(`select[data-layer-index="${i}"]`).value; |
| if(!Number.isInteger(size)||size<1) throw new Error(`Layer ${i+1} needs at least 1 node.`); |
| cfg.push({size,activation}); |
| } |
| return cfg; |
| } |
| |
| 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); } |
| function formatTime(ms){ if(!Number.isFinite(ms)) return '—'; return ms<1000?`${ms} ms`:`${(ms/1000).toFixed(2)} s`; } |
| |
| function resizeCanvas(canvas){ |
| const rect=canvas.getBoundingClientRect(), dpr=Math.min(window.devicePixelRatio||1,2); |
| const w=Math.max(1,Math.round(rect.width*dpr)), h=Math.max(1,Math.round(rect.height*dpr)); |
| if(canvas.width!==w||canvas.height!==h){ canvas.width=w; canvas.height=h; } |
| return {w,h,dpr}; |
| } |
| |
| function roundedPath(ctx,x1,y1,x2,y2){ const mid=(x1+x2)/2; ctx.moveTo(x1,y1); ctx.bezierCurveTo(mid,y1,mid,y2,x2,y2); } |
| |
| function drawLossGraph(){ |
| const {w,h,dpr}=resizeCanvas(lossCanvas); const ctx=lossCtx; ctx.clearRect(0,0,w,h); |
| if(!lossHistory.length) return; |
| el.lossEmpty.classList.add('hidden'); |
| 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; |
| const vals=lossHistory.flatMap(v=>[v.train, v.test].filter(Number.isFinite)); |
| const max=Math.max(...vals,1e-6), min=Math.min(...vals,0); const span=Math.max(max-min,1e-6); |
| ctx.lineWidth=1*dpr; ctx.strokeStyle=css('--border'); ctx.globalAlpha=.9; |
| ctx.font=`${10*dpr}px ui-monospace,monospace`; ctx.fillStyle=css('--text-tertiary'); ctx.textAlign='right'; ctx.textBaseline='middle'; |
| 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); } |
| ctx.globalAlpha=1; |
| const draw=(key,color,width=2)=>{ |
| const data=lossHistory.map(v=>v[key]); if(!data.some(Number.isFinite)) return; |
| ctx.beginPath(); ctx.strokeStyle=color; ctx.lineWidth=width*dpr; ctx.lineCap='round'; ctx.lineJoin='round'; |
| 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); }); |
| ctx.stroke(); |
| }; |
| draw('test',css('--text-tertiary'),1.7); draw('train',css('--primary'),2.2); |
| 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(); } |
| } |
| |
| function drawNetwork(){ |
| const {w,h,dpr}=resizeCanvas(networkCanvas); const ctx=networkCtx; ctx.clearRect(0,0,w,h); |
| if(!nn.lastActivations||!nn.layers.length) return; |
| el.networkEmpty.classList.add('hidden'); |
| const pad=34*dpr, W=w-pad*2, H=h-pad*2, layers=[]; |
| const inSize=nn.layers[0].inputSize, inNodes=[]; |
| 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); |
| 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); } |
| layers.push([{x:w-pad,y:pad+H/2,val:nn.lastActivations.at(-1)[0]||0}]); |
| ctx.lineWidth=.8*dpr; |
| 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(); } } |
| ctx.globalAlpha=1; |
| 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(); } |
| el.networkBadge.innerHTML='<span class="status-dot"></span><span>Active</span>'; |
| } |
| |
| function updateSummary(summary,status='Trained'){ |
| const layers=summary?.layers?.map(l=>l.outputSize).join(' → ')||'—'; |
| 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>`; |
| } |
| |
| async function trainModel(){ |
| if(isTraining) return; |
| try{ |
| const trainingData=parseCSV(el.trainingData.value); const testData=parseCSV(el.testData.value,{allowEmpty:true}); |
| 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.'); |
| const epochs=Number(el.epochs.value), lr=Number(el.learningRate.value), batch=Number(el.batchSize.value), layerCfg=getLayerConfig(); |
| 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.'); |
| lossHistory=[]; el.lossEmpty.classList.remove('hidden'); el.epochBar.style.width='0%'; el.progressPercent.textContent='0%'; el.progressLabel.textContent='Starting'; |
| el.metricEpoch.textContent='0'; el.metricTrain.textContent='—'; el.metricVal.textContent=testData.length?'—':'N/A'; el.metricParams.textContent='—'; |
| nn.layers=[]; nn.weights=[]; nn.biases=[]; nn.activations=[]; nn.lastActivations=null; |
| 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'); |
| 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); |
| setTrainingUI(true); |
| const opts={epochs,learningRate:lr,batchSize:batch,printEveryEpochs:1,testSet:testData.length?testData:null,callback:async(epoch,trainLoss,testLoss)=>{ |
| lossHistory.push({train:trainLoss,test:testLoss}); |
| 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}`; |
| el.metricEpoch.textContent=`${epoch}/${epochs}`; el.metricTrain.textContent=trainLoss.toFixed(6); el.metricVal.textContent=testLoss===null?'N/A':testLoss.toFixed(6); |
| drawLossGraph(); |
| }}; |
| const summary=await nn.train(trainingData,opts); |
| 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%'; |
| updateSummary(summary,'Trained'); setStatus('Ready'); toast('Training complete',`${formatParams(summary.parameters)} parameters · ${formatTime(summary.training.time)}`,'success'); |
| }catch(err){ console.error(err); setStatus('Needs attention','error'); toast('Could not train',err.message,'error'); } |
| finally{ setTrainingUI(false); if(el.appStatus.classList.contains('error')) setTimeout(()=>setStatus('Ready'),2200); } |
| } |
| |
| function predict(){ |
| try{ |
| if(!nn.layers.length||!nn.weights.length) throw new Error('Train or load a model first.'); |
| const input=el.predictionInput.value.split(',').map(s=>Number(s.trim())); |
| if(!el.predictionInput.value.trim()||input.some(n=>!Number.isFinite(n))) throw new Error('Enter a valid comma-separated input vector.'); |
| const expected=nn.layers[0].inputSize; if(input.length!==expected) throw new Error(`This model expects ${expected} input value${expected===1?'':'s'}.`); |
| 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.'); |
| 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>`; |
| drawNetwork(); |
| }catch(err){ toast('Prediction unavailable',err.message,'error'); } |
| } |
| |
| function loadSample(){ |
| 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`; |
| el.testData.value=`0.4, 0.2, 0.6, 1.0\n0.2, 0.82, 0.83, 1.0`; |
| el.predictionInput.value='0.4, 0.2, 0.6'; updateDataCounts(); toast('Sample loaded','Three training rows and two validation rows are ready.','success'); |
| } |
| |
| document.querySelectorAll('.seg-btn').forEach(btn=>btn.addEventListener('click',()=>{ |
| document.querySelectorAll('.seg-btn').forEach(b=>b.classList.toggle('active',b===btn)); |
| document.querySelectorAll('.data-pane').forEach(p=>p.hidden=p.id!==btn.dataset.pane); |
| })); |
| |
| [el.trainingData,el.testData].forEach(t=>t.addEventListener('input',updateDataCounts)); |
| el.numHiddenLayers.addEventListener('input',e=>createLayerConfigUI(e.target.value)); |
| el.loadDataBtn.addEventListener('click',loadSample); el.mobileSampleBtn.addEventListener('click',loadSample); |
| el.settingsButton.addEventListener('click',openDrawer); el.drawerCloseButton.addEventListener('click',closeDrawer); el.drawerOverlay.addEventListener('click',closeDrawer); |
| el.trainButton.addEventListener('click',trainModel); el.mobileTrainButton.addEventListener('click',trainModel); |
| el.predictButton.addEventListener('click',predict); el.predictionInput.addEventListener('keydown',e=>{ if(e.key==='Enter') predict(); }); |
| 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'); }); |
| 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'); })); |
| |
| 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(); } }); |
| |
| const storedTheme=localStorage.getItem('carbono-theme'); document.documentElement.dataset.theme=storedTheme||'dark'; |
| el.themeButton.addEventListener('click',()=>{ |
| const current=document.documentElement.dataset.theme; const darkNow=current==='dark'||(!current&&matchMedia('(prefers-color-scheme: dark)').matches); const next=darkNow?'light':'dark'; |
| document.documentElement.dataset.theme=next; localStorage.setItem('carbono-theme',next); setTimeout(()=>{ drawLossGraph(); drawNetwork(); },0); |
| }); |
| |
| const ro=new ResizeObserver(()=>{ drawLossGraph(); drawNetwork(); }); ro.observe(lossCanvas.parentElement); ro.observe(networkCanvas.parentElement); |
| createLayerConfigUI(1); updateDataCounts(); |
| }); |
| </script> |
| </body> |
| </html> |
