Add refactored version of cnn visualizer

README.md

@@ -1,9 +1,73 @@
----
-title: Cnn Visualizer
-emoji: 🌍
-colorFrom: indigo
-colorTo: red
-sdk: static
-app_file: dist/index.html
-pinned: false
----
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is not enabled on this template because of its impact on dev & build performances. To add it, see [this documentation](https://react.dev/learn/react-compiler/installation).
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

dist/assets/index-BoCAEVud.css

@@ -1 +0,0 @@
-:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:orange}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}@media(prefers-color-scheme:light){:root{color:#213547;background-color:#fff}a:hover{color:#747bff}button{background-color:#f9f9f9}}h1{font-size:40px;font-weight:700;text-align:left}.main-container{flex:1;display:grid;grid-template-columns:2fr 1fr;gap:2rem}.convolution-viewer{display:flex;flex-direction:row;justify-content:center;gap:2rem;padding:2rem}.convolution-viewer-item{display:flex;flex-direction:column;align-items:center;width:300px;height:340px;border-radius:10px;background:#fafafa;padding:1rem;box-shadow:0 2px 6px #0000000d;transition:transform .2s ease,box-shadow .2s ease;border:1px solid black}.convolution-viewer-item h3{margin:.5rem 0 1rem;font-size:1.1rem;font-weight:600;color:#333;text-align:center;border-bottom:2px solid orange;padding-bottom:.3rem}.convolution-viewer-item img{flex-grow:1;width:100%;height:100%;max-height:none;object-fit:contain}` .app-button{padding:8px 16px;background-color:#f0f0f0;border:none;border-radius:8px;cursor:pointer;font-size:1rem}.app-button:focus{outline:none}.app-button:hover{outline:1px solid orange}.app-button.selected{background-color:orange;color:#fff}.preset-selector{display:flex;align-items:center;gap:12px;background:#f7f7f7;padding:12px 16px;border-radius:8px;border:1px solid #ddd;margin-bottom:12px;width:fit-content}.preset-label{font-weight:600;font-size:14px}.preset-dropdown{padding:6px 10px;font-size:14px;border-radius:6px;border:1px solid #ccc;background:#fff}.preset-dropdown:focus{outline:none}.preset-dropdown:focus-visible{outline:2px solid #4e9fff}.preset-apply{padding:6px 14px;font-size:14px;background:#4e9fff;color:#fff;border:none;border-radius:6px;cursor:pointer;transition:background .2s}.preset-apply:hover{background:#1e7be6}.kernel-editor{display:flex;flex-direction:column;gap:30px;padding:12px;max-width:fit-content;align-items:center}.kernel-matrix{display:flex;flex-direction:column;gap:8px}.kernel-row{display:flex;gap:8px}.kernel-size-options{border:1px solid #d0d0d0;border-radius:6px;padding:8px 12px;background:#f9f9f9;box-shadow:0 1px 2px #0000000a}.kernel-size-options form{display:flex;justify-content:space-between;align-items:center}.kernel-size-options input[type=number]{width:auto;max-width:4ch;margin:0 8px}.kernel-cell{width:4.5em;height:2.4em;text-align:center;font-size:15px;border:1px solid #d0d0d0;border-radius:6px;background:#fff;transition:border-color .2s,box-shadow .2s,transform .1s;box-shadow:0 1px 2px #0000000a}.kernel-cell:hover{border-color:#888}.kernel-cell:focus{outline:none;border-color:orange;box-shadow:0 0 0 3px #0078ff33;transform:scale(1.02)}.channel-buttons{display:flex;gap:12px}.channel-buttons .selected{background-color:orange;color:#fff}.channel-buttons button:focus{outline:none}.channel-buttons button:focus-visible{outline:2px solid orange}input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}input[type=number]{-moz-appearance:textfield}.tabs{display:flex;flex-direction:column;height:100%}.tab-buttons{display:flex;border-bottom:1px solid #ccc;margin-bottom:20px}.tab-buttons button{padding:10px 20px;border:none;background:none;cursor:pointer;border-radius:0;will-change:border-bottom}.tab-buttons button.active{border-bottom:3px solid orange}.tab-content{flex:1;padding:20px;border:none}.tab-buttons button:focus{outline:none}.tab-buttons button:focus-visible{outline:2px solid orange}.switch-container{display:flex;align-items:center;justify-content:center;gap:12px;font-size:16px;-webkit-user-select:none;user-select:none}.switch{position:relative;width:70px;height:36px}.slider{position:absolute;cursor:pointer;inset:0;background:#777;border-radius:36px;transition:background .25s}.slider:before{position:absolute;content:"";height:28px;width:28px;left:4px;top:4px;background:#fff;border-radius:50%;transition:transform .25s}.switch input:checked+.slider{background:orange}.input-selector{display:flex;flex-direction:column;gap:30px}.switch{position:relative;display:inline-block;width:50px;height:24px}.switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#ccc;transition:.4s;border-radius:24px}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.4s;border-radius:50%}input:checked+.slider{background-color:#4caf50}input:checked+.slider:before{transform:translate(26px)}.layer-viewer{padding:12px;border:1px solid #ccc;margin-bottom:20px;border-radius:6px;background:#fafafa}.layer-title{margin:0 0 6px;font-size:20px;font-weight:600}.layer-details{display:flex;justify-content:space-evenly;margin-bottom:12px;color:#444;font-size:14px}.layer-grid{display:flex;flex-wrap:wrap;gap:6px}.layer-grid img{width:100px;height:100px;image-rendering:pixelated}.card{background-color:#fff;border:1px solid #dcdfe6;border-radius:12px;padding:18px;display:flex;flex-direction:column;gap:24px;width:300px}.field{display:flex;flex-direction:column;gap:6px}.field label,.field legend{font-weight:600;color:#2c2f37;align-self:flex-start}.field input[type=text],.field input[type=number],.field textarea{border:1px solid #ccd0dd;border-radius:6px;padding:8px 10px;font-size:.95rem;font-family:inherit;background-color:#fafafe}.field textarea{resize:vertical}.field input[readonly],.field textarea[readonly]{background-color:#f4f6fc;color:#4a4f5c}.double-field{display:flex;gap:6px;width:100%;justify-content:space-between}.double-field .field{width:140px}.input-button{display:grid;grid-template-columns:1fr 1fr;gap:8px}.fieldset{border:1px solid #ccd0dd;border-radius:6px;padding:10px 12px 12px;display:flex;flex-direction:column;gap:6px}.fieldset label{font-weight:500;color:#343844}.slider-field{gap:10px}.slider-control{display:flex;align-items:center;gap:12px}.slider-control input[type=range]{width:80px;-webkit-appearance:none;background-color:#d3d3d3;border-radius:6px;accent-color:var(--accent-color);flex:1}.slider-control input[type=range]::-webkit-slider-runnable-track{height:6px;background:#d3d3d3;border-radius:6px}.slider-control input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:14px;height:14px;border-radius:50%;background:var(--accent-color);cursor:pointer;margin-top:-4px}.slider-control span{min-width:28px;text-align:right;font-weight:600}.network-visualizer{display:grid;grid-template-columns:2fr 1fr;gap:20px}

dist/assets/index-CQRg13xj.css

@@ -0,0 +1 @@
+@layer properties{@supports (((-webkit-hyphens:none)) and (not (margin-trim:inline))) or ((-moz-orient:inline) and (not (color:rgb(from red r g b)))){*,:before,:after,::backdrop{--tw-rotate-x:initial;--tw-rotate-y:initial;--tw-rotate-z:initial;--tw-skew-x:initial;--tw-skew-y:initial;--tw-space-y-reverse:0;--tw-border-style:solid;--tw-font-weight:initial;--tw-tracking:initial;--tw-ordinal:initial;--tw-slashed-zero:initial;--tw-numeric-figure:initial;--tw-numeric-spacing:initial;--tw-numeric-fraction:initial;--tw-shadow:0 0 #0000;--tw-shadow-color:initial;--tw-shadow-alpha:100%;--tw-inset-shadow:0 0 #0000;--tw-inset-shadow-color:initial;--tw-inset-shadow-alpha:100%;--tw-ring-color:initial;--tw-ring-shadow:0 0 #0000;--tw-inset-ring-color:initial;--tw-inset-ring-shadow:0 0 #0000;--tw-ring-inset:initial;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-offset-shadow:0 0 #0000;--tw-outline-style:solid;--tw-blur:initial;--tw-brightness:initial;--tw-contrast:initial;--tw-grayscale:initial;--tw-hue-rotate:initial;--tw-invert:initial;--tw-opacity:initial;--tw-saturate:initial;--tw-sepia:initial;--tw-drop-shadow:initial;--tw-drop-shadow-color:initial;--tw-drop-shadow-alpha:100%;--tw-drop-shadow-size:initial}}}@layer theme{:root,:host{--font-sans:ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";--font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;--color-red-100:oklch(93.6% .032 17.717);--color-red-500:oklch(63.7% .237 25.331);--color-orange-200:oklch(90.1% .076 70.697);--color-orange-300:oklch(83.7% .128 66.29);--color-orange-400:oklch(75% .183 55.934);--color-orange-500:oklch(70.5% .213 47.604);--color-orange-700:oklch(55.3% .195 38.402);--color-lime-300:oklch(89.7% .196 126.665);--color-lime-500:oklch(76.8% .233 130.85);--color-blue-600:oklch(54.6% .245 262.881);--color-slate-50:oklch(98.4% .003 247.858);--color-slate-200:oklch(92.9% .013 255.508);--color-slate-700:oklch(37.2% .044 257.287);--color-slate-800:oklch(27.9% .041 260.031);--color-slate-900:oklch(20.8% .042 265.755);--color-gray-100:oklch(96.7% .003 264.542);--color-gray-200:oklch(92.8% .006 264.531);--color-gray-300:oklch(87.2% .01 258.338);--color-gray-700:oklch(37.3% .034 259.733);--color-gray-950:oklch(13% .028 261.692);--color-white:#fff;--spacing:.25rem;--container-sm:24rem;--text-sm:.875rem;--text-sm--line-height:calc(1.25 / .875);--text-lg:1.125rem;--text-lg--line-height:calc(1.75 / 1.125);--text-xl:1.25rem;--text-xl--line-height:calc(1.75 / 1.25);--font-weight-medium:500;--font-weight-semibold:600;--font-weight-bold:700;--tracking-tight:-.025em;--radius-md:.375rem;--animate-spin:spin 1s linear infinite;--default-transition-duration:.15s;--default-transition-timing-function:cubic-bezier(.4, 0, .2, 1);--default-font-family:var(--font-sans);--default-mono-font-family:var(--font-mono)}}@layer base{*,:after,:before,::backdrop{box-sizing:border-box;border:0 solid;margin:0;padding:0}::file-selector-button{box-sizing:border-box;border:0 solid;margin:0;padding:0}html,:host{-webkit-text-size-adjust:100%;tab-size:4;line-height:1.5;font-family:var(--default-font-family,ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji");font-feature-settings:var(--default-font-feature-settings,normal);font-variation-settings:var(--default-font-variation-settings,normal);-webkit-tap-highlight-color:transparent}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;-webkit-text-decoration:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,samp,pre{font-family:var(--default-mono-font-family,ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace);font-feature-settings:var(--default-mono-font-feature-settings,normal);font-variation-settings:var(--default-mono-font-variation-settings,normal);font-size:1em}small{font-size:80%}sub,sup{vertical-align:baseline;font-size:75%;line-height:0;position:relative}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}:-moz-focusring{outline:auto}progress{vertical-align:baseline}summary{display:list-item}ol,ul,menu{list-style:none}img,svg,video,canvas,audio,iframe,embed,object{vertical-align:middle;display:block}img,video{max-width:100%;height:auto}button,input,select,optgroup,textarea{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}::file-selector-button{font:inherit;font-feature-settings:inherit;font-variation-settings:inherit;letter-spacing:inherit;color:inherit;opacity:1;background-color:#0000;border-radius:0}:where(select:is([multiple],[size])) optgroup{font-weight:bolder}:where(select:is([multiple],[size])) optgroup option{padding-inline-start:20px}::file-selector-button{margin-inline-end:4px}::placeholder{opacity:1}@supports (not ((-webkit-appearance:-apple-pay-button))) or (contain-intrinsic-size:1px){::placeholder{color:currentColor}@supports (color:color-mix(in lab,red,red)){::placeholder{color:color-mix(in oklab,currentcolor 50%,transparent)}}}textarea{resize:vertical}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-date-and-time-value{min-height:1lh;text-align:inherit}::-webkit-datetime-edit{display:inline-flex}::-webkit-datetime-edit-fields-wrapper{padding:0}::-webkit-datetime-edit{padding-block:0}::-webkit-datetime-edit-year-field{padding-block:0}::-webkit-datetime-edit-month-field{padding-block:0}::-webkit-datetime-edit-day-field{padding-block:0}::-webkit-datetime-edit-hour-field{padding-block:0}::-webkit-datetime-edit-minute-field{padding-block:0}::-webkit-datetime-edit-second-field{padding-block:0}::-webkit-datetime-edit-millisecond-field{padding-block:0}::-webkit-datetime-edit-meridiem-field{padding-block:0}::-webkit-calendar-picker-indicator{line-height:1}:-moz-ui-invalid{box-shadow:none}button,input:where([type=button],[type=reset],[type=submit]){appearance:button}::file-selector-button{appearance:button}::-webkit-inner-spin-button{height:auto}::-webkit-outer-spin-button{height:auto}[hidden]:where(:not([hidden=until-found])){display:none!important}}@layer components;@layer utilities{.invisible{visibility:hidden}.visible{visibility:visible}.visible\!{visibility:visible!important}.absolute{position:absolute}.fixed{position:fixed}.relative{position:relative}.static{position:static}.sticky{position:sticky}.inset-0{inset:calc(var(--spacing) * 0)}.start{inset-inline-start:var(--spacing)}.start\!{inset-inline-start:var(--spacing)!important}.end{inset-inline-end:var(--spacing)}.end\!{inset-inline-end:var(--spacing)!important}.isolate{isolation:isolate}.z-50{z-index:50}.container{width:100%}@media(min-width:40rem){.container{max-width:40rem}}@media(min-width:48rem){.container{max-width:48rem}}@media(min-width:64rem){.container{max-width:64rem}}@media(min-width:80rem){.container{max-width:80rem}}@media(min-width:96rem){.container{max-width:96rem}}.m-125{margin:calc(var(--spacing) * 125)}.m-185{margin:calc(var(--spacing) * 185)}.m-214{margin:calc(var(--spacing) * 214)}.m-374{margin:calc(var(--spacing) * 374)}.m-571{margin:calc(var(--spacing) * 571)}.m-750{margin:calc(var(--spacing) * 750)}.m-812{margin:calc(var(--spacing) * 812)}.mt-2{margin-top:calc(var(--spacing) * 2)}.mt-3{margin-top:calc(var(--spacing) * 3)}.mb-2{margin-bottom:calc(var(--spacing) * 2)}.mb-3{margin-bottom:calc(var(--spacing) * 3)}.mb-4{margin-bottom:calc(var(--spacing) * 4)}.ml-2{margin-left:calc(var(--spacing) * 2)}.block{display:block}.flex{display:flex}.grid{display:grid}.hidden{display:none}.inline{display:inline}.inline-block{display:inline-block}.table{display:table}.h-16{height:calc(var(--spacing) * 16)}.h-18{height:calc(var(--spacing) * 18)}.h-24{height:calc(var(--spacing) * 24)}.h-dvh{height:100dvh}.h-full{height:100%}.max-h-64{max-height:calc(var(--spacing) * 64)}.max-h-full{max-height:100%}.min-h-0{min-height:calc(var(--spacing) * 0)}.w-6{width:calc(var(--spacing) * 6)}.w-14{width:calc(var(--spacing) * 14)}.w-16{width:calc(var(--spacing) * 16)}.w-24{width:calc(var(--spacing) * 24)}.w-full{width:100%}.max-w-full{max-width:100%}.max-w-sm{max-width:var(--container-sm)}.min-w-0{min-width:calc(var(--spacing) * 0)}.transform{transform:var(--tw-rotate-x,) var(--tw-rotate-y,) var(--tw-rotate-z,) var(--tw-skew-x,) var(--tw-skew-y,)}.animate-spin{animation:var(--animate-spin)}.cursor-col-resize{cursor:col-resize}.cursor-crosshair{cursor:crosshair}.cursor-default{cursor:default}.cursor-e-resize{cursor:e-resize}.cursor-ew-resize{cursor:ew-resize}.cursor-grab{cursor:grab}.cursor-move{cursor:move}.cursor-n-resize{cursor:n-resize}.cursor-ne-resize{cursor:ne-resize}.cursor-ns-resize{cursor:ns-resize}.cursor-nw-resize{cursor:nw-resize}.cursor-pointer{cursor:pointer}.cursor-row-resize{cursor:row-resize}.cursor-s-resize{cursor:s-resize}.cursor-se-resize{cursor:se-resize}.cursor-sw-resize{cursor:sw-resize}.cursor-w-resize{cursor:w-resize}.resize{resize:both}.resize-none{resize:none}.grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.grid-cols-4{grid-template-columns:repeat(4,minmax(0,1fr))}.grid-cols-\[2fr_1fr\]{grid-template-columns:2fr 1fr}.grid-rows-2{grid-template-rows:repeat(2,minmax(0,1fr))}.flex-col{flex-direction:column}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.items-end{align-items:flex-end}.justify-center{justify-content:center}.gap-1{gap:calc(var(--spacing) * 1)}.gap-2{gap:calc(var(--spacing) * 2)}.gap-3{gap:calc(var(--spacing) * 3)}.gap-4{gap:calc(var(--spacing) * 4)}:where(.space-y-4>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 4) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 4) * calc(1 - var(--tw-space-y-reverse)))}:where(.space-y-6>:not(:last-child)){--tw-space-y-reverse:0;margin-block-start:calc(calc(var(--spacing) * 6) * var(--tw-space-y-reverse));margin-block-end:calc(calc(var(--spacing) * 6) * calc(1 - var(--tw-space-y-reverse)))}.rounded{border-radius:.25rem}.rounded-full{border-radius:3.40282e38px}.rounded-md{border-radius:var(--radius-md)}.border{border-style:var(--tw-border-style);border-width:1px}.border-4{border-style:var(--tw-border-style);border-width:4px}.border-b-2{border-bottom-style:var(--tw-border-style);border-bottom-width:2px}.border-l{border-left-style:var(--tw-border-style);border-left-width:1px}.border-gray-200{border-color:var(--color-gray-200)}.border-gray-300{border-color:var(--color-gray-300)}.border-lime-500{border-color:var(--color-lime-500)}.border-orange-300{border-color:var(--color-orange-300)}.border-orange-400{border-color:var(--color-orange-400)}.border-orange-500{border-color:var(--color-orange-500)}.border-slate-200{border-color:var(--color-slate-200)}.border-t-blue-600{border-top-color:var(--color-blue-600)}.bg-gray-100{background-color:var(--color-gray-100)}.bg-orange-200{background-color:var(--color-orange-200)}.bg-red-100{background-color:var(--color-red-100)}.bg-slate-50{background-color:var(--color-slate-50)}.bg-white{background-color:var(--color-white)}.object-contain{object-fit:contain}.p-2{padding:calc(var(--spacing) * 2)}.p-3{padding:calc(var(--spacing) * 3)}.p-4{padding:calc(var(--spacing) * 4)}.px-2{padding-inline:calc(var(--spacing) * 2)}.px-3{padding-inline:calc(var(--spacing) * 3)}.px-5{padding-inline:calc(var(--spacing) * 5)}.py-1{padding-block:calc(var(--spacing) * 1)}.py-2{padding-block:calc(var(--spacing) * 2)}.text-center{text-align:center}.text-justify{text-align:justify}.text-lg{font-size:var(--text-lg);line-height:var(--tw-leading,var(--text-lg--line-height))}.text-sm{font-size:var(--text-sm);line-height:var(--tw-leading,var(--text-sm--line-height))}.text-xl{font-size:var(--text-xl);line-height:var(--tw-leading,var(--text-xl--line-height))}.font-bold{--tw-font-weight:var(--font-weight-bold);font-weight:var(--font-weight-bold)}.font-medium{--tw-font-weight:var(--font-weight-medium);font-weight:var(--font-weight-medium)}.font-semibold{--tw-font-weight:var(--font-weight-semibold);font-weight:var(--font-weight-semibold)}.tracking-tight{--tw-tracking:var(--tracking-tight);letter-spacing:var(--tracking-tight)}.text-gray-700{color:var(--color-gray-700)}.text-gray-950{color:var(--color-gray-950)}.text-orange-400{color:var(--color-orange-400)}.text-orange-500{color:var(--color-orange-500)}.text-orange-700{color:var(--color-orange-700)}.text-red-500{color:var(--color-red-500)}.text-slate-700{color:var(--color-slate-700)}.text-slate-800{color:var(--color-slate-800)}.text-slate-900{color:var(--color-slate-900)}.capitalize{text-transform:capitalize}.lowercase{text-transform:lowercase}.uppercase{text-transform:uppercase}.italic{font-style:italic}.ordinal{--tw-ordinal:ordinal;font-variant-numeric:var(--tw-ordinal,) var(--tw-slashed-zero,) var(--tw-numeric-figure,) var(--tw-numeric-spacing,) var(--tw-numeric-fraction,)}.line-through{text-decoration-line:line-through}.overline{text-decoration-line:overline}.underline{text-decoration-line:underline}.shadow,.shadow-sm{--tw-shadow:0 1px 3px 0 var(--tw-shadow-color,#0000001a), 0 1px 2px -1px var(--tw-shadow-color,#0000001a);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(1px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-2{--tw-ring-shadow:var(--tw-ring-inset,) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color,currentcolor);box-shadow:var(--tw-inset-shadow),var(--tw-inset-ring-shadow),var(--tw-ring-offset-shadow),var(--tw-ring-shadow),var(--tw-shadow)}.ring-lime-300{--tw-ring-color:var(--color-lime-300)}.outline{outline-style:var(--tw-outline-style);outline-width:1px}.blur{--tw-blur:blur(8px);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.grayscale{--tw-grayscale:grayscale(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.invert{--tw-invert:invert(100%);filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.filter{filter:var(--tw-blur,) var(--tw-brightness,) var(--tw-contrast,) var(--tw-grayscale,) var(--tw-hue-rotate,) var(--tw-invert,) var(--tw-saturate,) var(--tw-sepia,) var(--tw-drop-shadow,)}.transition{transition-property:color,background-color,border-color,outline-color,text-decoration-color,fill,stroke,--tw-gradient-from,--tw-gradient-via,--tw-gradient-to,opacity,box-shadow,transform,translate,scale,rotate,filter,-webkit-backdrop-filter,backdrop-filter,display,content-visibility,overlay,pointer-events;transition-timing-function:var(--tw-ease,var(--default-transition-timing-function));transition-duration:var(--tw-duration,var(--default-transition-duration))}@media(hover:hover){.hover\:bg-gray-200:hover{background-color:var(--color-gray-200)}.hover\:bg-orange-300:hover{background-color:var(--color-orange-300)}}@media(min-width:40rem){.sm\:grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.sm\:grid-cols-6{grid-template-columns:repeat(6,minmax(0,1fr))}}@media(min-width:48rem){.md\:grid-cols-8{grid-template-columns:repeat(8,minmax(0,1fr))}}}@property --tw-rotate-x{syntax:"*";inherits:false}@property --tw-rotate-y{syntax:"*";inherits:false}@property --tw-rotate-z{syntax:"*";inherits:false}@property --tw-skew-x{syntax:"*";inherits:false}@property --tw-skew-y{syntax:"*";inherits:false}@property --tw-space-y-reverse{syntax:"*";inherits:false;initial-value:0}@property --tw-border-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-font-weight{syntax:"*";inherits:false}@property --tw-tracking{syntax:"*";inherits:false}@property --tw-ordinal{syntax:"*";inherits:false}@property --tw-slashed-zero{syntax:"*";inherits:false}@property --tw-numeric-figure{syntax:"*";inherits:false}@property --tw-numeric-spacing{syntax:"*";inherits:false}@property --tw-numeric-fraction{syntax:"*";inherits:false}@property --tw-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-shadow-color{syntax:"*";inherits:false}@property --tw-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-inset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-shadow-color{syntax:"*";inherits:false}@property --tw-inset-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-ring-color{syntax:"*";inherits:false}@property --tw-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-inset-ring-color{syntax:"*";inherits:false}@property --tw-inset-ring-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-ring-inset{syntax:"*";inherits:false}@property --tw-ring-offset-width{syntax:"<length>";inherits:false;initial-value:0}@property --tw-ring-offset-color{syntax:"*";inherits:false;initial-value:#fff}@property --tw-ring-offset-shadow{syntax:"*";inherits:false;initial-value:0 0 #0000}@property --tw-outline-style{syntax:"*";inherits:false;initial-value:solid}@property --tw-blur{syntax:"*";inherits:false}@property --tw-brightness{syntax:"*";inherits:false}@property --tw-contrast{syntax:"*";inherits:false}@property --tw-grayscale{syntax:"*";inherits:false}@property --tw-hue-rotate{syntax:"*";inherits:false}@property --tw-invert{syntax:"*";inherits:false}@property --tw-opacity{syntax:"*";inherits:false}@property --tw-saturate{syntax:"*";inherits:false}@property --tw-sepia{syntax:"*";inherits:false}@property --tw-drop-shadow{syntax:"*";inherits:false}@property --tw-drop-shadow-color{syntax:"*";inherits:false}@property --tw-drop-shadow-alpha{syntax:"<percentage>";inherits:false;initial-value:100%}@property --tw-drop-shadow-size{syntax:"*";inherits:false}@keyframes spin{to{transform:rotate(360deg)}}

dist/index.html

@@ -4,9 +4,9 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>moz-todo-react</title>
-    <script type="module" crossorigin src="/assets/index-CARha6nB.js"></script>
-    <link rel="stylesheet" crossorigin href="/assets/index-BoCAEVud.css">
+    <title>cnn_visualizer2</title>
+    <script type="module" crossorigin src="/assets/index-p2vRWBSG.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-CQRg13xj.css">
   </head>
   <body>
     <div id="root"></div>

eslint.config.js

@@ -2,28 +2,22 @@ import js from '@eslint/js'
 import globals from 'globals'
 import reactHooks from 'eslint-plugin-react-hooks'
 import reactRefresh from 'eslint-plugin-react-refresh'
+import tseslint from 'typescript-eslint'
 import { defineConfig, globalIgnores } from 'eslint/config'
 
 export default defineConfig([
   globalIgnores(['dist']),
   {
-    files: ['**/*.{js,jsx}'],
+    files: ['**/*.{ts,tsx}'],
     extends: [
       js.configs.recommended,
+      tseslint.configs.recommended,
       reactHooks.configs.flat.recommended,
       reactRefresh.configs.vite,
     ],
     languageOptions: {
       ecmaVersion: 2020,
       globals: globals.browser,
-      parserOptions: {
-        ecmaVersion: 'latest',
-        ecmaFeatures: { jsx: true },
-        sourceType: 'module',
-      },
-    },
-    rules: {
-      'no-unused-vars': ['error', { varsIgnorePattern: '^[A-Z_]' }],
     },
   },
 ])

index.html

@@ -4,10 +4,10 @@
     <meta charset="UTF-8" />
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>moz-todo-react</title>
+    <title>cnn_visualizer2</title>
   </head>
   <body>
     <div id="root"></div>
-    <script type="module" src="/src/main.jsx"></script>
+    <script type="module" src="/src/main.tsx"></script>
   </body>
 </html>

package.json

@@ -1,22 +1,27 @@
 {
-  "name": "moz-todo-react",
+  "name": "cnn_visualizer2",
   "private": true,
   "version": "0.0.0",
   "type": "module",
   "scripts": {
     "dev": "vite",
-    "build": "vite build",
+    "build": "tsc -b && vite build",
     "lint": "eslint .",
     "preview": "vite preview"
   },
   "dependencies": {
+    "@tailwindcss/vite": "^4.2.0",
     "@tensorflow/tfjs": "^4.22.0",
+    "@tensorflow/tfjs-backend-wasm": "^4.22.0",
+    "plotly.js": "^3.4.0",
     "react": "^19.2.0",
     "react-dom": "^19.2.0",
-    "react-plotly.js": "^2.6.0"
+    "react-plotly.js": "^2.6.0",
+    "tailwindcss": "^4.2.0"
   },
   "devDependencies": {
     "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "@vitejs/plugin-react": "^5.1.1",
@@ -24,6 +29,8 @@
     "eslint-plugin-react-hooks": "^7.0.1",
     "eslint-plugin-react-refresh": "^0.4.24",
     "globals": "^16.5.0",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
     "vite": "^7.3.1"
   }
 }

src/App.tsx

@@ -0,0 +1,27 @@
+import { useState } from 'react'
+import Tabs from "./ui/Tabs.tsx"
+import ConvolutionVisualizer from "./ConvolutionVisualizer.tsx"
+import NetworkVisualizer from "./NetworkVisualizer.tsx"
+
+function App() {
+  const tabs = ["Convolution", "Network"];
+  const [activeTab, setActiveTab] = useState<string>(tabs[0]);
+
+  return (
+    <>
+      <Tabs 
+        tabs={tabs} 
+        activeTab={activeTab} 
+        onChange={setActiveTab}
+      />
+      { activeTab === "Convolution" && (
+        <ConvolutionVisualizer />
+      )}
+      { activeTab === "Network" && (
+        <NetworkVisualizer />
+      )}
+    </>
+  );
+}
+
+export default App;

src/ConvolutionVisualizer.tsx

@@ -0,0 +1,406 @@
+import { useEffect, useState, useRef } from "react";
+import marioImage from "./assets/mario.png";
+import Button from "./ui/Button.tsx";
+import Radio from "./ui/Radio";
+import useConvolutionProcessing from "./useConvolutionProcessing.ts";
+import Dropdown from "./ui/Dropdown.tsx";
+
+import { 
+  DEFAULT_COLOR_KERNEL, 
+  DEFAULT_GRAY_KERNEL,
+  GRAY_KERNEL_PRESETS,
+  COLOR_KERNEL_PRESETS,
+} from "./kernels.ts";
+
+const DEFAULT_IMAGE: string = marioImage;
+const MIN_KERNEL_SIZE = 1;
+const MAX_KERNEL_SIZE = 20;
+
+export default function ConvolutionVisualizer() {
+  const [rawInputImage, setRawInputImage] = useState<string>(DEFAULT_IMAGE);
+  const [useColor, setUseColor] = useState<boolean>(true);
+  const [colorKernel, setColorKernel] = useState<number[][][]>(DEFAULT_COLOR_KERNEL);
+  const [grayscaleKernel, setGrayscaleKernel] = useState<number[][]>(DEFAULT_GRAY_KERNEL);
+  const kernel = useColor ? colorKernel : grayscaleKernel;
+
+  const [inputImage, outputImage] = useConvolutionProcessing(rawInputImage, kernel);
+
+  return (
+    <div className="grid grid-cols-2">
+      <InputOutputViewer 
+        input={inputImage}
+        output={outputImage}
+      />
+      <Sidebar 
+        setImage={setRawInputImage}
+        useColor={useColor}
+        setUseColor={setUseColor}
+        colorKernel={colorKernel}
+        setColorKernel={setColorKernel}
+        grayscaleKernel={grayscaleKernel}
+        setGrayscaleKernel={setGrayscaleKernel}
+      />
+    </div>
+  );
+}
+
+type InputOutputViewerProps = {
+  input: string | null;
+  output: string | null;
+}
+function InputOutputViewer({ input, output }: InputOutputViewerProps) {
+  return (
+    <div className="grid grid-rows-2">
+      <div className="flex flex-col items-center justify-center">
+        <h2 className="text-lg font-bold mb-2">Input Image</h2>
+        {input ? (
+          <img src={input} alt="Input" className="max-w-full max-h-full" />
+        ) : (
+          <p>Loading...</p>
+        )}
+      </div>
+      <div className="flex flex-col items-center justify-center">
+        <h2 className="text-lg font-bold mb-2">Output Image</h2>
+        {output ? (
+          <img src={output} alt="Output" className="max-w-full max-h-full" />
+        ) : (
+          <p>Processing...</p>
+        )}
+      </div>
+    </div>
+  );
+}
+
+type SidebarProps = {
+  setImage: (imageUrl: string) => void;
+  useColor: boolean;
+  setUseColor: (useColor: boolean) => void;
+  colorKernel: number[][][];
+  setColorKernel: (kernel: number[][][]) => void;
+  grayscaleKernel: number[][];
+  setGrayscaleKernel: (kernel: number[][]) => void;
+}
+function Sidebar({
+  setImage,
+  useColor,
+  setUseColor,
+  colorKernel,
+  setColorKernel,
+  grayscaleKernel,
+  setGrayscaleKernel,
+}: SidebarProps) {
+  const imageFileInputRef = useRef<HTMLInputElement | null>(null);
+
+  return (
+    <div className="flex flex-col items-center border-l border-gray-200 p-4 gap-4">
+      <input
+        ref={imageFileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={(e) => {
+          const file = e.target.files?.[0];
+          if (!file) return;
+
+          const reader = new FileReader();
+          reader.onload = () => {
+            const result = reader.result;
+            if (typeof result !== "string") {
+              return;
+            }
+            setImage(result);
+          };
+          reader.readAsDataURL(file);
+        }}
+        style={{ display: "none" }}
+      />
+      <Button
+        label="Upload Image"
+        onClick={() => imageFileInputRef.current?.click()}
+      />
+      <Radio
+        label="Color option"
+        options={["Grayscale", "Color"] as const}
+        activeOption={useColor ? "Color" : "Grayscale"}
+        onChange={(option) => setUseColor(option === "Color")}
+      />
+      <KernelEditor
+        useColor={useColor}
+        colorKernel={colorKernel}
+        setColorKernel={setColorKernel}
+        grayscaleKernel={grayscaleKernel}
+        setGrayscaleKernel={setGrayscaleKernel}
+      />
+    </div>
+  );
+}
+
+type KernelEditorProps = {
+  useColor: boolean;
+  colorKernel: number[][][];
+  setColorKernel: (kernel: number[][][]) => void;
+  grayscaleKernel: number[][];
+  setGrayscaleKernel: (kernel: number[][]) => void;
+}
+function KernelEditor({
+  useColor,
+  colorKernel,
+  setColorKernel,
+  grayscaleKernel,
+  setGrayscaleKernel,
+}: KernelEditorProps) {
+  const colorPresetNames = Object.keys(COLOR_KERNEL_PRESETS) as string[];
+  const grayPresetNames = Object.keys(GRAY_KERNEL_PRESETS) as string[];
+  const [selectedChannel, setSelectedChannel] = useState<number>(0);
+  const [selectedColorPreset, setSelectedColorPreset] = useState<string>(colorPresetNames[0]);
+  const [selectedGrayPreset, setSelectedGrayPreset] = useState<string>(grayPresetNames[0]);
+  const [loadedColorPreset, setLoadedColorPreset] = useState<string | null>("Laplacian");
+  const [loadedGrayPreset, setLoadedGrayPreset] = useState<string | null>("Laplacian");
+
+  function colorKernelToRepr(nextKernel: number[][][]): string[][][] {
+    return nextKernel.map((channel) =>
+      channel.map((row) => row.map((value) => value.toString())),
+    );
+  }
+
+  function grayKernelToRepr(nextKernel: number[][]): string[][] {
+    return nextKernel.map((row) => row.map((value) => value.toString()));
+  }
+
+  const [draftColorKernel, setDraftColorKernel] = useState<string[][][]>(colorKernelToRepr(colorKernel));
+  const [draftGrayKernel, setDraftGrayKernel] = useState<string[][]>(grayKernelToRepr(grayscaleKernel));
+
+  useEffect(() => {
+    setDraftColorKernel(colorKernelToRepr(colorKernel));
+  }, [colorKernel]);
+
+  useEffect(() => {
+    setDraftGrayKernel(grayKernelToRepr(grayscaleKernel));
+  }, [grayscaleKernel]);
+
+  useEffect(() => {
+    setSelectedChannel(0);
+  }, [useColor]);
+
+  function parseCell(cell: string): number | null {
+    const trimmed = cell.trim();
+    if (trimmed === "") return null;
+    const parsed = Number(trimmed);
+    return Number.isFinite(parsed) ? parsed : null;
+  }
+
+  function cloneColorKernel(nextKernel: number[][][]): number[][][] {
+    return nextKernel.map((channel) => channel.map((row) => [...row]));
+  }
+
+  function cloneGrayKernel(nextKernel: number[][]): number[][] {
+    return nextKernel.map((row) => [...row]);
+  }
+
+  function handleLoadPreset() {
+    if (useColor) {
+      const presetKernel = cloneColorKernel(
+        COLOR_KERNEL_PRESETS[selectedColorPreset as keyof typeof COLOR_KERNEL_PRESETS],
+      );
+      setDraftColorKernel(colorKernelToRepr(presetKernel));
+      setColorKernel(presetKernel);
+      setLoadedColorPreset(selectedColorPreset);
+      setSelectedChannel(0);
+      return;
+    }
+
+    const presetKernel = cloneGrayKernel(
+      GRAY_KERNEL_PRESETS[selectedGrayPreset as keyof typeof GRAY_KERNEL_PRESETS],
+    );
+    setDraftGrayKernel(grayKernelToRepr(presetKernel));
+    setGrayscaleKernel(presetKernel);
+    setLoadedGrayPreset(selectedGrayPreset);
+  }
+
+  function kernelsEqual2D(a: number[][], b: number[][]): boolean {
+    if (a.length !== b.length) return false;
+    if ((a[0]?.length ?? 0) !== (b[0]?.length ?? 0)) return false;
+    return a.every((row, rowIndex) =>
+      row.every((value, colIndex) => value === b[rowIndex][colIndex]),
+    );
+  }
+
+  function kernelsEqual3D(a: number[][][], b: number[][][]): boolean {
+    if (a.length !== b.length) return false;
+    return a.every((channel, channelIndex) => kernelsEqual2D(channel, b[channelIndex]));
+  }
+
+  function handleKernelChange(channel: number, row: number, col: number, value: string) {
+    if (useColor) {
+      const nextDraft = draftColorKernel.map((c) => c.map((r) => [...r]));
+      nextDraft[channel][row][col] = value;
+      setDraftColorKernel(nextDraft);
+
+      const parsedKernel = nextDraft.map((c) => c.map((r) => r.map(parseCell)));
+      const isValid = parsedKernel.every((c) => c.every((r) => r.every((v) => v !== null)));
+      if (isValid) {
+        setColorKernel(parsedKernel as number[][][]);
+      }
+      return;
+    }
+
+    const nextDraft = draftGrayKernel.map((r) => [...r]);
+    nextDraft[row][col] = value;
+    setDraftGrayKernel(nextDraft);
+
+    const parsedKernel = nextDraft.map((r) => r.map(parseCell));
+    const isValid = parsedKernel.every((r) => r.every((v) => v !== null));
+    if (isValid) {
+      setGrayscaleKernel(parsedKernel as number[][]);
+    }
+  }
+
+  function handleSizeChange(newWidth: number, newHeight: number) {
+    const clampedWidth = Math.min(MAX_KERNEL_SIZE, Math.max(MIN_KERNEL_SIZE, newWidth));
+    const clampedHeight = Math.min(MAX_KERNEL_SIZE, Math.max(MIN_KERNEL_SIZE, newHeight));
+
+    function resizeMatrix(matrix: string[][], width: number, height: number): string[][] {
+      return Array.from({ length: height }, (_, rowIndex) =>
+        Array.from({ length: width }, (_, colIndex) => matrix[rowIndex]?.[colIndex] ?? "0"),
+      );
+    }
+
+    if (useColor) {
+      const resizedDraft = draftColorKernel.map((channelMatrix) =>
+        resizeMatrix(channelMatrix, clampedWidth, clampedHeight),
+      );
+      setDraftColorKernel(resizedDraft);
+      setColorKernel(
+        resizedDraft.map((channelMatrix) =>
+          channelMatrix.map((row) => row.map((cell) => parseCell(cell) ?? 0)),
+        ),
+      );
+      return;
+    }
+
+    const resizedDraft = resizeMatrix(draftGrayKernel, clampedWidth, clampedHeight);
+    setDraftGrayKernel(resizedDraft);
+    setGrayscaleKernel(resizedDraft.map((row) => row.map((cell) => parseCell(cell) ?? 0)));
+  }
+
+  const channelLabels = ["R", "G", "B"];
+  const activeMatrix = useColor
+    ? draftColorKernel[selectedChannel]
+    : draftGrayKernel;
+  const currentHeight = activeMatrix.length;
+  const currentWidth = activeMatrix[0]?.length ?? 0;
+  const isModified = useColor
+    ? loadedColorPreset !== null
+      && !kernelsEqual3D(
+        colorKernel,
+        COLOR_KERNEL_PRESETS[loadedColorPreset as keyof typeof COLOR_KERNEL_PRESETS],
+      )
+    : loadedGrayPreset !== null
+      && !kernelsEqual2D(
+        grayscaleKernel,
+        GRAY_KERNEL_PRESETS[loadedGrayPreset as keyof typeof GRAY_KERNEL_PRESETS],
+      );
+  const loadedPresetLabel = useColor ? loadedColorPreset : loadedGrayPreset;
+
+  return (
+    <div className="w-full max-w-sm border border-gray-300 rounded p-3">
+      <h3 className="text-sm font-semibold mb-2">Kernel</h3>
+      <div className="flex items-end gap-2 mb-3">
+        <Dropdown
+          label="Preset"
+          options={useColor ? colorPresetNames : grayPresetNames}
+          activeOption={useColor ? selectedColorPreset : selectedGrayPreset}
+          onChange={(option) => {
+            if (useColor) {
+              setSelectedColorPreset(option);
+              return;
+            }
+            setSelectedGrayPreset(option);
+          }}
+        />
+        <Button label="Load preset" onClick={handleLoadPreset} />
+      </div>
+      {loadedPresetLabel && (
+        <div className="text-sm mb-3">
+          <span>Loaded: {loadedPresetLabel}</span>
+          {isModified && <span className="text-orange-700 ml-2">(modified)</span>}
+        </div>
+      )}
+      { useColor && (
+        <div className="flex gap-2 mb-3">
+          {channelLabels.map((label, index) => (
+            <button
+              key={label}
+              type="button"
+              className={`px-3 py-1 text-sm rounded border ${
+                selectedChannel === index ? "bg-orange-200 border-orange-300" : "bg-white border-gray-300"
+              }`}
+              onClick={() => setSelectedChannel(index)}
+            >
+              {label}
+            </button>
+          ))}
+        </div>
+      )}
+      <div className="flex flex-col gap-4 mb-3">
+        <div className="flex items-center gap-2">
+          <span className="text-sm">Width</span>
+          <button
+            type="button"
+            className="px-2 py-1 text-sm rounded border border-gray-300"
+            onClick={() => handleSizeChange(currentWidth - 1, currentHeight)}
+          >
+            -
+          </button>
+          <span className="text-sm w-6 text-center">{currentWidth}</span>
+          <button
+            type="button"
+            className="px-2 py-1 text-sm rounded border border-gray-300"
+            onClick={() => handleSizeChange(currentWidth + 1, currentHeight)}
+          >
+            +
+          </button>
+        </div>
+        <div className="flex items-center gap-2">
+          <span className="text-sm">Height</span>
+          <button
+            type="button"
+            className="px-2 py-1 text-sm rounded border border-gray-300"
+            onClick={() => handleSizeChange(currentWidth, currentHeight - 1)}
+          >
+            -
+          </button>
+          <span className="text-sm w-6 text-center">{currentHeight}</span>
+          <button
+            type="button"
+            className="px-2 py-1 text-sm rounded border border-gray-300"
+            onClick={() => handleSizeChange(currentWidth, currentHeight + 1)}
+          >
+            +
+          </button>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        {activeMatrix.map((row, rowIndex) => (
+          <div key={rowIndex} className="flex gap-2">
+            {row.map((cellValue, colIndex) => (
+              <input
+                key={`${rowIndex}-${colIndex}`}
+                type="text"
+                className="w-14 px-2 py-1 border border-gray-300 rounded text-sm"
+                value={cellValue}
+                onChange={(event) =>
+                  handleKernelChange(
+                    useColor ? selectedChannel : 0,
+                    rowIndex,
+                    colIndex,
+                    event.target.value,
+                  )
+                }
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

src/InfoViewer.tsx

@@ -0,0 +1,434 @@
+import { useMemo, useState } from "react";
+import type { RunInfo } from "./train.ts";
+import Button from "./ui/Button.tsx";
+
+type NumericArray = ArrayLike<number>;
+type Shape4D = [number, number, number, number];
+
+interface InputLayer {
+  type: "input";
+  output: NumericArray;
+  shape: Shape4D;
+}
+
+interface Conv2dLayer {
+  type: "conv2d";
+  output: NumericArray;
+  kernels: NumericArray;
+  outputShape: Shape4D;
+  kernelShape: [number, number, number, number];
+  stride: number;
+  padding: number | "same" | "valid";
+  activationType?: string;
+}
+
+interface MaxPoolLayer {
+  type: "maxpool";
+  output: NumericArray;
+  shape: Shape4D;
+  size: number;
+  stride: number;
+}
+
+interface FlattenLayer {
+  type: "flatten";
+}
+
+interface DenseLayer {
+  type: "dense";
+  details?: string;
+}
+
+interface OutputLayer {
+  type: "output";
+  output: NumericArray;
+}
+
+type LayerInfo =
+  | InputLayer
+  | Conv2dLayer
+  | MaxPoolLayer
+  | FlattenLayer
+  | DenseLayer
+  | OutputLayer;
+
+interface InfoViewerProps {
+  info?: RunInfo[];
+  onSampleIndexChange: () => void;
+}
+
+interface InputViewerProps {
+  output: NumericArray;
+  shape: Shape4D;
+  onSampleIndexChange: () => void;
+}
+
+interface Conv2dLayerViewerProps {
+  layerIdx: number;
+  stride: number;
+  padding: number | "same" | "valid";
+  activationType?: string;
+  kernels: NumericArray;
+  output: NumericArray;
+  kernelShape: [number, number, number, number];
+  outputShape: Shape4D;
+}
+
+interface MaxPoolLayerViewerProps {
+  layerIdx: number;
+  stride: number;
+  size: number;
+  output: NumericArray;
+  shape: Shape4D;
+}
+
+interface OutputLayerViewerProps {
+  probs: NumericArray;
+}
+
+function asLayerInfo(layer: RunInfo): LayerInfo | null {
+  if (typeof layer.type !== "string") {
+    return null;
+  }
+
+  switch (layer.type) {
+    case "input":
+    case "conv2d":
+    case "maxpool":
+    case "flatten":
+    case "dense":
+    case "output":
+      return layer as unknown as LayerInfo;
+    default:
+      return null;
+  }
+}
+
+function extractImage(output: NumericArray, h: number, w: number, cCount: number): ImageData {
+  const buffer = new Uint8ClampedArray(h * w * 4);
+
+  for (let i = 0; i < h; ++i) {
+    for (let j = 0; j < w; ++j) {
+      for (let c = 0; c < cCount; ++c) {
+        const val = output[i * w * cCount + j * cCount + c];
+        buffer[(i * w + j) * 4 + c] = val * 255;
+      }
+      for (let c = cCount; c < 3; ++c) {
+        buffer[(i * w + j) * 4 + c] = buffer[(i * w + j) * 4 + (cCount - 1)];
+      }
+      buffer[(i * w + j) * 4 + 3] = 255;
+    }
+  }
+
+  return new ImageData(buffer, w, h);
+}
+
+function extractKernels(
+  kernels: NumericArray,
+  selectedOutputChannel: number,
+  kh: number,
+  kw: number,
+  inC: number,
+  outC: number,
+): ImageData[] {
+  let minVal = Infinity;
+  let maxVal = -Infinity;
+
+  for (let i = 0; i < kernels.length; ++i) {
+    const val = kernels[i];
+    if (val < minVal) minVal = val;
+    if (val > maxVal) maxVal = val;
+  }
+
+  const kernelImgDatas: ImageData[] = [];
+  for (let ic = 0; ic < inC; ++ic) {
+    const buffer = new Uint8ClampedArray(kh * kw * 4);
+    for (let i = 0; i < kh; ++i) {
+      for (let j = 0; j < kw; ++j) {
+        const val = kernels[i * kw * inC * outC + j * inC * outC + ic * outC + selectedOutputChannel];
+        const normVal = (val - minVal) / (maxVal - minVal + 1e-8);
+        const pixel = Math.round(normVal * 255);
+        buffer[(i * kw + j) * 4 + 0] = pixel;
+        buffer[(i * kw + j) * 4 + 1] = pixel;
+        buffer[(i * kw + j) * 4 + 2] = pixel;
+        buffer[(i * kw + j) * 4 + 3] = 255;
+      }
+    }
+    kernelImgDatas.push(new ImageData(buffer, kw, kh));
+  }
+
+  return kernelImgDatas;
+}
+
+function extractActivationMaps(activations: NumericArray, h: number, w: number, cCount: number): ImageData[] {
+  let minVal = Infinity;
+  let maxVal = -Infinity;
+
+  for (let i = 0; i < activations.length; ++i) {
+    const val = activations[i];
+    if (val < minVal) minVal = val;
+    if (val > maxVal) maxVal = val;
+  }
+
+  const activationImgDatas: ImageData[] = [];
+  for (let c = 0; c < cCount; ++c) {
+    const buffer = new Uint8ClampedArray(h * w * 4);
+    for (let i = 0; i < h; ++i) {
+      for (let j = 0; j < w; ++j) {
+        const val = activations[i * w * cCount + j * cCount + c];
+        const normVal = (val - minVal) / (maxVal - minVal + 1e-8);
+        const pixel = Math.round(normVal * 255);
+        buffer[(i * w + j) * 4 + 0] = pixel;
+        buffer[(i * w + j) * 4 + 1] = pixel;
+        buffer[(i * w + j) * 4 + 2] = pixel;
+        buffer[(i * w + j) * 4 + 3] = 255;
+      }
+    }
+    activationImgDatas.push(new ImageData(buffer, w, h));
+  }
+
+  return activationImgDatas;
+}
+
+function imgDataToSrc(imgData: ImageData): string {
+  const canvas = document.createElement("canvas");
+  canvas.width = imgData.width;
+  canvas.height = imgData.height;
+  const ctx = canvas.getContext("2d");
+  if (!ctx) return "";
+  ctx.putImageData(imgData, 0, 0);
+  return canvas.toDataURL();
+}
+
+function InputViewer({ output, shape, onSampleIndexChange }: InputViewerProps) {
+  const [, h, w, cCount] = shape;
+  const imgData = useMemo(() => extractImage(output, h, w, cCount), [output, h, w, cCount]);
+  const imgSrc = useMemo(() => imgDataToSrc(imgData), [imgData]);
+
+  return (
+    <section className="rounded-md border border-slate-200 bg-white p-4 shadow-sm">
+      <h3 className="text-lg font-semibold text-slate-900">Input Layer</h3>
+      <div className="mt-2 text-sm text-slate-700">
+        <strong>Input size:</strong> {imgData.width} x {imgData.height}
+      </div>
+      <h4 className="mt-3 text-sm font-medium text-slate-800">Sample input</h4>
+      <div className="mt-2 flex flex-wrap items-center gap-3">
+        {imgSrc && (
+          <img
+            src={imgSrc}
+            alt="Input sample"
+            className="h-24 w-24 rounded border border-slate-200 object-contain"
+          />
+        )}
+        <Button label="New Sample" onClick={onSampleIndexChange} />
+      </div>
+    </section>
+  );
+}
+
+function Conv2dLayerViewer({
+  layerIdx,
+  stride,
+  padding,
+  activationType,
+  kernels,
+  output,
+  kernelShape,
+  outputShape,
+}: Conv2dLayerViewerProps) {
+  const [selectedChannel, setSelectedChannel] = useState<number | null>(null);
+  const [kh, kw, inC, outC] = kernelShape;
+  const [, h, w, cCount] = outputShape;
+
+  const kernelImgDatas = useMemo(() => {
+    if (selectedChannel == null) return null;
+    return extractKernels(kernels, selectedChannel, kh, kw, inC, outC);
+  }, [kernels, selectedChannel, kh, kw, inC, outC]);
+
+  const kernelSrcs = useMemo(() => kernelImgDatas?.map(imgDataToSrc) ?? null, [kernelImgDatas]);
+
+  const activations = useMemo(
+    () => extractActivationMaps(output, h, w, cCount),
+    [output, h, w, cCount],
+  );
+  const activationSrcs = useMemo(() => activations.map(imgDataToSrc), [activations]);
+
+  return (
+    <section className="rounded-md border border-slate-200 bg-white p-4 shadow-sm">
+      <h3 className="text-lg font-semibold text-slate-900">Convolution Layer</h3>
+      <div className="mt-2 grid grid-cols-2 gap-2 text-sm text-slate-700">
+        <div>
+          <strong>Kernel Size:</strong> {kh} x {kw}
+        </div>
+        <div>
+          <strong>Stride:</strong> {stride}
+        </div>
+        <div>
+          <strong>Padding:</strong> {padding}
+        </div>
+        <div>
+          <strong>Activation:</strong> {activationType ?? "none"}
+        </div>
+        <div>
+          <strong>Output channels:</strong> {cCount}
+        </div>
+      </div>
+
+      {selectedChannel != null && kernelSrcs && (
+        <>
+          <h4 className="mt-3 text-sm font-medium text-slate-800">
+            Kernel for output {selectedChannel} (min-max normalized)
+          </h4>
+          <div className="mt-2 grid grid-cols-4 gap-2 sm:grid-cols-6 md:grid-cols-8">
+            {kernelSrcs.map((src, idx) => (
+              <img
+                key={`${layerIdx}-${idx}-kernel`}
+                src={src}
+                alt={`Kernel ${idx}`}
+                className="h-24 w-24 rounded border border-slate-200 object-contain"
+              />
+            ))}
+          </div>
+        </>
+      )}
+
+      <h4 className="mt-3 text-sm font-medium text-slate-800">Activation Maps (min-max normalized)</h4>
+      <div className="mt-2 grid grid-cols-4 gap-2 sm:grid-cols-6 md:grid-cols-8">
+        {activationSrcs.map((src, idx) => (
+          <img
+            key={`${layerIdx}-${idx}-activation`}
+            src={src}
+            alt={`Activation Map ${idx}`}
+            onClick={() => setSelectedChannel(selectedChannel === idx ? null : idx)}
+            className={`h-24 w-24 cursor-pointer rounded border object-contain ${
+              selectedChannel === idx ? "border-lime-500 ring-2 ring-lime-300" : "border-slate-200"
+            }`}
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function MaxPoolLayerViewer({ layerIdx, stride, size, output, shape }: MaxPoolLayerViewerProps) {
+  const [, h, w, cCount] = shape;
+
+  const activations = useMemo(() => extractActivationMaps(output, h, w, cCount), [output, h, w, cCount]);
+  const activationSrcs = useMemo(() => activations.map(imgDataToSrc), [activations]);
+
+  return (
+    <section className="rounded-md border border-slate-200 bg-white p-4 shadow-sm">
+      <h3 className="text-lg font-semibold text-slate-900">MaxPool Layer</h3>
+      <div className="mt-2 grid grid-cols-2 gap-2 text-sm text-slate-700">
+        <div>
+          <strong>Pool Size:</strong> {size} x {size}
+        </div>
+        <div>
+          <strong>Stride:</strong> {stride}
+        </div>
+      </div>
+      <h4 className="mt-3 text-sm font-medium text-slate-800">Outputs (min-max normalized)</h4>
+      <div className="mt-2 grid grid-cols-4 gap-2 sm:grid-cols-6 md:grid-cols-8">
+        {activationSrcs.map((src, idx) => (
+          <img
+            key={`${layerIdx}-${idx}-output`}
+            src={src}
+            alt={`Output ${idx}`}
+            className="h-24 w-24 rounded border border-slate-200 object-contain"
+          />
+        ))}
+      </div>
+    </section>
+  );
+}
+
+function OutputLayerViewer({ probs }: OutputLayerViewerProps) {
+  const numClasses = probs.length;
+
+  return (
+    <section className="rounded-md border border-slate-200 bg-white p-4 shadow-sm">
+      <h3 className="text-lg font-semibold text-slate-900">Output Layer (softmax)</h3>
+      <div className="mt-2 text-sm text-slate-700">
+        <strong>Number of Classes:</strong> {numClasses}
+      </div>
+      <h4 className="mt-3 text-sm font-medium text-slate-800">Class Probabilities</h4>
+      <div className="mt-2 grid grid-cols-2 gap-2 text-sm sm:grid-cols-3">
+        {Array.from({ length: numClasses }).map((_, i) => (
+          <div key={i} className="rounded border border-slate-200 bg-slate-50 px-2 py-1">
+            <strong>Class {i}:</strong> {Number(probs[i]).toFixed(2)}
+          </div>
+        ))}
+      </div>
+    </section>
+  );
+}
+
+export default function InfoViewer({ info, onSampleIndexChange }: InfoViewerProps) {
+  const layers = useMemo(() => (info ?? []).map(asLayerInfo).filter((v): v is LayerInfo => v !== null), [info]);
+
+  function renderLayer(layer: LayerInfo, idx: number) {
+    switch (layer.type) {
+      case "input":
+        return (
+          <InputViewer
+            key={idx}
+            output={layer.output}
+            shape={layer.shape}
+            onSampleIndexChange={onSampleIndexChange}
+          />
+        );
+      case "conv2d":
+        return (
+          <Conv2dLayerViewer
+            key={idx}
+            layerIdx={idx}
+            stride={layer.stride}
+            padding={layer.padding}
+            activationType={layer.activationType}
+            kernels={layer.kernels}
+            output={layer.output}
+            kernelShape={layer.kernelShape}
+            outputShape={layer.outputShape}
+          />
+        );
+      case "maxpool":
+        return (
+          <MaxPoolLayerViewer
+            key={idx}
+            layerIdx={idx}
+            stride={layer.stride}
+            size={layer.size}
+            output={layer.output}
+            shape={layer.shape}
+          />
+        );
+      case "flatten":
+        return null;
+      case "dense":
+        return (
+          <p key={idx} className="rounded-md border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm">
+            Dense Layer: {layer.details ?? "N/A"}
+          </p>
+        );
+      case "output":
+        return null;
+      default:
+        return (
+          <p key={idx} className="rounded-md border border-slate-200 bg-white p-4 text-sm text-slate-700 shadow-sm">
+            Unknown Layer Type
+          </p>
+        );
+    }
+  }
+
+  const lastLayer = layers.length > 0 ? layers[layers.length - 1] : null;
+  const outputLayer = lastLayer?.type === "output" ? lastLayer : null;
+  const bodyLayers = outputLayer ? layers.slice(0, -1) : layers;
+
+  return (
+    <div className="space-y-4 p-2">
+      {bodyLayers.map((layer, idx) => renderLayer(layer, idx))}
+      {outputLayer && <OutputLayerViewer probs={outputLayer.output} />}
+    </div>
+  );
+}

src/NetworkVisualizer.tsx

@@ -0,0 +1,452 @@
+import { useEffect, useState, useRef } from "react";
+import * as tf from "@tensorflow/tfjs";
+import Plot from "react-plotly.js";
+
+import { MnistData } from "./mnist.js";
+import { Cnn, train } from "./train.ts";
+import type { TrainController, RunInfo, OptimizerParams } from "./train.ts";
+import Button from "./ui/Button.tsx";
+import InputField from "./ui/InputField.tsx";
+import Tabs from "./ui/Tabs.tsx";
+import Dropdown from "./ui/Dropdown.tsx";
+import InfoViewer from "./InfoViewer.tsx";
+
+const DEFAULT_ARCHITECTURE = `[conv2d filters=8 kernel=11 
+stride=1 padding=1 activation=relu]
+
+[maxpool size=2 stride=2]
+
+[flatten]
+
+[dense units=10 activation=softmax]`;
+
+const isFirefox = navigator.userAgent.toLowerCase().includes("firefox");
+await tf.setBackend(isFirefox ? "cpu" : "webgl");
+await tf.ready();
+
+export default function NetworkVisualizer() {
+  const [dataset, setDataset] = useState<MnistData | null>(null);
+
+  useEffect(() => {
+    const loadData = async () => {
+      const data = new MnistData();
+      await data.load();
+      setDataset(data);
+      console.log("dataset loaded");
+    }
+
+    loadData();
+  }, []);
+
+  // architecture states
+  const [architecture, setArchitecture] = useState(DEFAULT_ARCHITECTURE);
+  const [optimizerType, setOptimizerType] = useState<string>('adam');
+  const [optimizerParams, setOptimizerParams] = useState<OptimizerParams>({
+    learningRate: '0.001',
+    beta1: '0.9',
+    beta2: '0.999',
+    epsilon: '1e-8',
+    batchSize: '32',
+    epochs: '5',
+  });
+  const modelRef = useRef<Cnn | null>(null);
+  const optimizerRef = useRef<tf.Optimizer | null>(null);
+
+  function handleArchitectureChange(newArchitecture: string) {
+    if (isTraining) {
+      alert('Cannot change architecture while training is in progress.');
+    } else {
+      setArchitecture(newArchitecture);
+    }
+  }
+
+  function handleOptimizerChange(newOptimizerType: string, newOptimizerParams: OptimizerParams) {
+    if (isTraining) {
+      alert('Cannot change optimizer settings while training is in progress.');
+    } else {
+      setOptimizerType(newOptimizerType);
+      setOptimizerParams(newOptimizerParams);
+    }
+  }
+
+  function handleSampleIndexChange() {
+    trainController.current.sampleIndex += 1;
+    updateTick();
+  }
+
+ 
+  function resetModel() {
+    if (!dataset) return;
+
+    if (modelRef.current) {
+      modelRef.current.dispose();
+    }
+
+    const cnn = new Cnn(architecture, dataset.numInputChannels);
+    modelRef.current = cnn;
+  }
+
+  function resetOptimizer() {
+    if (optimizerType === 'adam') {
+      const learningRate = parseFloat(optimizerParams.learningRate);
+      const beta1 = parseFloat(optimizerParams.beta1 || "0.9");
+      const beta2 = parseFloat(optimizerParams.beta2 || "0.999");
+      const epsilon = parseFloat(optimizerParams.epsilon || "1e-8");
+
+      if (Number.isNaN(learningRate) || learningRate <= 0) {
+        alert('Invalid learning rate for Adam optimizer.');
+        return;
+      }
+      if (Number.isNaN(beta1) || beta1 < 0) {
+        alert('Invalid beta1 for Adam optimizer.');
+        return;
+      }
+      if (Number.isNaN(beta2) || beta2 < 0) {
+        alert('Invalid beta2 for Adam optimizer.');
+        return;
+      }
+      if (Number.isNaN(epsilon) || epsilon <= 0) {
+        alert('Invalid epsilon for Adam optimizer.');
+        return;
+      }
+
+      const opt = tf.train.adam(learningRate, beta1, beta2, epsilon);
+      if (optimizerRef.current) {
+        optimizerRef.current.dispose();
+      }
+      optimizerRef.current = opt;
+    } else if (optimizerType === 'sgd') {
+      const learningRate = parseFloat(optimizerParams.learningRate);
+      if (Number.isNaN(learningRate) || learningRate <= 0) {
+        alert('Invalid learning rate for SGD optimizer.');
+        return;
+      }
+
+      const opt = tf.train.sgd(learningRate);
+      if (optimizerRef.current) {
+        optimizerRef.current.dispose();
+      }
+      optimizerRef.current = opt;
+    } else {
+      alert(`Unsupported optimizer type: ${optimizerType}`);
+    }
+  }
+
+  // reset & init model and optimizer
+  useEffect(() => {
+    resetModel();
+    resetOptimizer();
+  }, [architecture, optimizerType, optimizerParams, dataset]);
+
+  // training states
+  const [isTraining, setIsTraining] = useState<boolean>(false);
+  const lossesRef = useRef<Array<number>>([]);
+  const trainController = useRef<TrainController>({
+    isPaused: false,
+    stopRequested: false,
+    sampleIndex: 0,
+  });
+  const infoRef = useRef<Array<RunInfo>>([]);
+
+  // render timing
+  const [, setTick] = useState<number>(0);
+
+  function updateTick() {
+    setTick((tick) => tick + 1);
+  }
+
+  async function startTraining() {
+    if (!modelRef || !dataset || !optimizerRef || isTraining) {
+      return;
+    }
+
+    setIsTraining(true);
+    trainController.current.isPaused = false;
+    trainController.current.stopRequested = false;
+
+    const batchSize = parseFloat(optimizerParams.batchSize);
+    if (Number.isNaN(batchSize) || batchSize <= 0) {
+      alert('Invalid batch size.');
+      setIsTraining(false);
+      return;
+    }
+    const epochs = parseFloat(optimizerParams.epochs);
+    if (Number.isNaN(epochs) || epochs <= 0) {
+      alert('Invalid number of epochs.');
+      setIsTraining(false);
+      return;
+    }
+
+    let lastTickUpdate = 0;
+    if (!modelRef.current) return;
+    if (!optimizerRef.current) return;
+
+    try {
+      await train(
+        dataset,
+        modelRef.current,
+        optimizerRef.current,
+        batchSize,
+        epochs,
+        trainController.current,
+        (_epoch, _batch, loss, info) => {
+          // lossesRef.current.push({ epoch, batch, loss });
+          lossesRef.current.push(loss);
+          console.log(loss);
+
+          infoRef.current = info;
+
+          // update tick every 50ms
+          const now = performance.now();
+          if (now - lastTickUpdate > 50) {
+            lastTickUpdate = now;
+            updateTick();
+          }
+        },
+      );
+    } finally {
+      setIsTraining(false);
+      trainController.current.isPaused = false;
+      trainController.current.stopRequested = false;
+      alert('Training finished.');
+    }
+  }
+
+  function handleStartTraining() {
+    console.log('Starting training...');
+    // trainController updated in startTraining
+    startTraining();
+  }
+
+  function handlePauseTraining() {
+    console.log('Pausing training...');
+    trainController.current.isPaused = true;
+  }
+
+  function handleContinueTraining() {
+    console.log('Continuing training...');
+    trainController.current.isPaused = false;
+  }
+
+  function handleStopTraining() {
+    console.log('Stopping training...');
+    trainController.current.stopRequested = true;
+    trainController.current.isPaused = false;
+  }
+
+  async function waitUntilNotTraining() {
+    return new Promise<void>((resolve) => {
+      function check() {
+        if (!isTraining) {
+          resolve();
+        } else {
+          requestAnimationFrame(check);
+        }
+      }
+      check();
+    });
+  }
+
+  async function handleResetTraining() {
+    console.log('Resetting training...');
+    handleStopTraining();
+
+    await waitUntilNotTraining();
+    console.log('Training stopped. Resetting model.');
+    lossesRef.current = [];
+    infoRef.current = [];
+    resetModel();
+    resetOptimizer();
+
+    updateTick();
+  }
+
+  return (
+    <div className="grid grid-cols-[2fr_1fr] h-dvh">
+      <TrainingViewer 
+        isTraining={isTraining}
+        lossesRef={lossesRef}
+        infoRef={infoRef}
+        handleSampleIndexChange={handleSampleIndexChange}
+      />
+      <Sidebar 
+        architecture={architecture}
+        onArchitectureChange={handleArchitectureChange}
+
+        optimizerType={optimizerType}
+        optimizerParams={optimizerParams}
+        onOptimizerChange={handleOptimizerChange}
+
+        onStartTraining={handleStartTraining}
+        onPauseTraining={handlePauseTraining}
+        onContinueTraining={handleContinueTraining}
+        onStopTraining={handleStopTraining}
+        onResetTraining={handleResetTraining}
+      />
+    </div>
+  );
+}
+
+interface TrainingViewerProps {
+  isTraining: boolean;
+  lossesRef: React.RefObject<Array<number>>;
+  infoRef: React.RefObject<Array<RunInfo>>;
+  handleSampleIndexChange: () => void;
+}
+function TrainingViewer({
+  isTraining,
+  lossesRef,
+  infoRef,
+  handleSampleIndexChange,
+}: TrainingViewerProps) {
+  return (
+    <div>
+      <p>Training { isTraining ? "in progress" : "not in progress" }</p>
+      <Plot
+        data={[
+          {
+            x: lossesRef.current.map((_, i) => i),
+            y: lossesRef.current,
+            mode: 'lines',
+            type: 'scatter',
+          },
+        ]}
+        layout={{
+          xaxis: { title: { text: 'Training steps' } },
+          yaxis: { title: { text: 'Train loss' } },
+        }}
+      />
+      <InfoViewer info={infoRef.current} onSampleIndexChange={handleSampleIndexChange} />
+    </div>
+  )
+}
+
+interface SidebarProps {
+  architecture: string;
+  onArchitectureChange: (newArchitecture: string) => void;
+
+  optimizerType: string;
+  optimizerParams: OptimizerParams;
+  onOptimizerChange: (newOptimizerType: string, newOptimizerParams: OptimizerParams) => void;
+
+  onStartTraining: () => void;
+  onPauseTraining: () => void;
+  onContinueTraining: () => void;
+  onStopTraining: () => void;
+  onResetTraining: () => void;
+}
+function Sidebar({
+  architecture,
+  onArchitectureChange,
+  optimizerType,
+  optimizerParams,
+  onOptimizerChange,
+  onStartTraining,
+  onPauseTraining,
+  onContinueTraining,
+  onStopTraining,
+  onResetTraining,
+}: SidebarProps) {
+  const tabs = ["Architecture", "Train"];
+  const [activeTab, setActiveTab] = useState<string>(tabs[0]);
+
+  const [architectureDraft, setArchitectureDraft] = useState<string>(architecture);
+
+  return (
+    <div className="bg-white flex flex-col h-full border-l border-gray-200 p-4 gap-4">
+      <Tabs tabs={tabs} activeTab={activeTab} onChange={setActiveTab} />
+      { isFirefox && (
+        <p className="text-red-500">
+          Warning: This demo may be quite slow on Firefox.
+        </p>
+      )}
+
+      { activeTab === "Architecture" && (
+        <>
+          <InputField 
+            label="Architecture" 
+            value={architectureDraft}
+            onChange={setArchitectureDraft}
+            rows={15}
+          />
+          <Button
+            label="Apply architecture"
+            onClick={() => onArchitectureChange(architectureDraft)}
+          />
+        </>
+      )}
+
+      { activeTab === "Train" && (
+        <>
+          <Dropdown
+            label="Optimizer"
+            options={["sgd", "adam"]}
+            activeOption={optimizerType}
+            onChange={(newOptimizerType) => onOptimizerChange(newOptimizerType, optimizerParams)}
+          />
+          { optimizerType === 'sgd' && (
+            <InputField
+              label="Learning Rate"
+              value={optimizerParams.learningRate}
+              onChange={(newLearningRate) => onOptimizerChange(optimizerType, {...optimizerParams, learningRate: newLearningRate})}
+            />
+          )}
+          { optimizerType === 'adam' && (
+            <>
+              <InputField
+                label="Learning Rate"
+                value={optimizerParams.learningRate}
+                onChange={(newLearningRate) => onOptimizerChange(optimizerType, {...optimizerParams, learningRate: newLearningRate})}
+              />
+              <InputField
+                label="Beta 1"
+                value={optimizerParams.beta1}
+                onChange={(newBeta1) => onOptimizerChange(optimizerType, {...optimizerParams, beta1: newBeta1})}
+              />
+              <InputField
+                label="Beta 2"
+                value={optimizerParams.beta2}
+                onChange={(newBeta2) => onOptimizerChange(optimizerType, {...optimizerParams, beta2: newBeta2})}
+              />
+              <InputField
+                label="Epsilon"
+                value={optimizerParams.epsilon}
+                onChange={(newEpsilon) => onOptimizerChange(optimizerType, {...optimizerParams, epsilon: newEpsilon})}
+              />
+            </>
+          )}
+          <InputField
+            label="Batch Size"
+            value={optimizerParams.batchSize}
+            onChange={(newBatchSize) => onOptimizerChange(optimizerType, {...optimizerParams, batchSize: newBatchSize})}
+          />
+          <InputField
+            label="Epochs"
+            value={optimizerParams.epochs}
+            onChange={(newEpochs) => onOptimizerChange(optimizerType, {...optimizerParams, epochs: newEpochs})}
+          />
+          <Button
+            label="Start training"
+            onClick={onStartTraining}
+          />
+          <Button
+            label="Pause training"
+            onClick={onPauseTraining}
+          />
+          <Button
+            label="Continue training"
+            onClick={onContinueTraining}
+          />
+          <Button
+            label="Stop training"
+            onClick={onStopTraining}
+          />
+          <Button
+            label="Reset training"
+            onClick={onResetTraining}
+          />
+        </>
+      )}
+    </div>
+  )
+}

src/index.css

@@ -1,66 +1 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: orange;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}
+@import "tailwindcss";

src/kernels.ts

@@ -0,0 +1,193 @@
+export const COLOR_KERNEL_PRESETS = {
+  Laplacian: [
+    [
+      [-1, -1, -1],
+      [-1, 8, -1],
+      [-1, -1, -1],
+    ],
+    [
+      [-1, -1, -1],
+      [-1, 8, -1],
+      [-1, -1, -1],
+    ],
+    [
+      [-1, -1, -1],
+      [-1, 8, -1],
+      [-1, -1, -1],
+    ],
+  ],
+  "Sobel X": [
+    [
+      [-1, 0, 1],
+      [-2, 0, 2],
+      [-1, 0, 1],
+    ],
+    [
+      [-1, 0, 1],
+      [-2, 0, 2],
+      [-1, 0, 1],
+    ],
+    [
+      [-1, 0, 1],
+      [-2, 0, 2],
+      [-1, 0, 1],
+    ],
+  ],
+  "Sobel Y": [
+    [
+      [-1, -2, -1],
+      [0, 0, 0],
+      [1, 2, 1],
+    ],
+    [
+      [-1, -2, -1],
+      [0, 0, 0],
+      [1, 2, 1],
+    ],
+    [
+      [-1, -2, -1],
+      [0, 0, 0],
+      [1, 2, 1],
+    ],
+  ],
+  "Box Blur": [
+    [
+      [0.04, 0.04, 0.04],
+      [0.04, 0.04, 0.04],
+      [0.04, 0.04, 0.04],
+    ],
+    [
+      [0.04, 0.04, 0.04],
+      [0.04, 0.04, 0.04],
+      [0.04, 0.04, 0.04],
+    ],
+    [
+      [0.04, 0.04, 0.04],
+      [0.04, 0.04, 0.04],
+      [0.04, 0.04, 0.04],
+    ],
+  ],
+  "AlexNet Conv1": [
+    [
+      [0.119, 0.094, 0.095, 0.105, 0.103, 0.067, 0.050, 0.050, 0.056, 0.022, 0.050],
+      [0.075, 0.039, 0.053, 0.076, 0.072, 0.073, 0.052, 0.027, 0.026, -0.011, 0.004],
+      [0.075, 0.039, 0.055, 0.056, 0.053, 0.050, 0.048, 0.025, 0.044, 0.010, 0.013],
+      [0.070, 0.053, 0.063, 0.062, 0.059, 0.039, 0.045, 0.038, 0.046, 0.002, 0.003],
+      [0.087, 0.075, 0.072, 0.083, 0.095, 0.065, 0.034, 0.021, 0.022, -0.011, -0.034],
+      [0.096, 0.099, 0.101, 0.109, 0.073, 0.036, -0.007, -0.043, -0.038, -0.057, -0.056],
+      [0.115, 0.115, 0.107, 0.091, 0.003, -0.090, -0.113, -0.139, -0.125, -0.084, -0.075],
+      [0.095, 0.110, 0.082, 0.042, -0.059, -0.159, -0.124, -0.158, -0.164, -0.115, -0.093],
+      [0.093, 0.104, 0.068, 0.024, -0.070, -0.184, -0.136, -0.185, -0.203, -0.128, -0.112],
+      [0.044, 0.065, 0.036, 0.005, -0.090, -0.194, -0.244, -0.244, -0.202, -0.114, -0.107],
+      [0.047, 0.063, 0.025, -0.020, -0.068, -0.117, -0.140, -0.163, -0.118, -0.096, -0.084],
+    ],
+    [
+      [-0.073, -0.058, -0.081, -0.082, -0.068, -0.090, -0.071, -0.028, -0.001, -0.025, 0.025],
+      [-0.069, -0.068, -0.076, -0.047, -0.041, -0.065, -0.046, -0.032, -0.004, -0.030, 0.010],
+      [-0.100, -0.086, -0.105, -0.093, -0.086, -0.100, -0.086, -0.070, -0.027, -0.023, 0.007],
+      [-0.095, -0.078, -0.105, -0.111, -0.102, -0.124, -0.121, -0.086, -0.037, -0.037, -0.007],
+      [-0.102, -0.069, -0.123, -0.107, -0.099, -0.102, -0.109, -0.088, -0.055, -0.037, 0.000],
+      [-0.140, -0.095, -0.125, -0.121, -0.109, -0.086, -0.038, -0.050, -0.006, 0.023, 0.048],
+      [-0.189, -0.122, -0.157, -0.106, -0.099, -0.003, 0.137, 0.146, 0.116, 0.116, 0.092],
+      [-0.181, -0.134, -0.155, -0.090, 0.002, 0.174, 0.471, 0.449, 0.282, 0.189, 0.108],
+      [-0.151, -0.089, -0.097, -0.027, 0.101, 0.298, 0.572, 0.493, 0.309, 0.181, 0.084],
+      [-0.143, -0.076, -0.072, -0.012, 0.070, 0.165, 0.277, 0.253, 0.204, 0.164, 0.095],
+      [-0.086, -0.040, -0.051, -0.019, 0.035, 0.125, 0.170, 0.176, 0.164, 0.148, 0.102],
+    ],
+    [
+      [-0.024, -0.002, -0.028, -0.008, -0.030, -0.060, -0.050, -0.001, 0.040, -0.007, 0.032],
+      [0.000, 0.022, 0.009, 0.048, 0.024, 0.001, 0.017, 0.024, 0.019, -0.014, 0.018],
+      [0.005, 0.029, 0.000, 0.001, -0.005, -0.035, -0.022, -0.028, 0.012, -0.003, 0.008],
+      [0.018, 0.047, 0.007, 0.001, -0.025, -0.043, -0.060, -0.053, -0.017, -0.024, -0.001],
+      [0.026, 0.050, -0.007, -0.013, -0.030, -0.044, -0.089, -0.098, -0.055, -0.044, -0.007],
+      [-0.020, 0.024, -0.024, -0.038, -0.077, -0.076, -0.061, -0.060, -0.047, -0.011, 0.025],
+      [-0.082, -0.014, -0.070, -0.069, -0.114, -0.054, 0.057, 0.069, 0.039, 0.043, 0.049],
+      [-0.096, -0.030, -0.110, -0.088, -0.057, 0.077, 0.355, 0.329, 0.143, 0.061, -0.021],
+      [-0.063, -0.012, -0.062, -0.029, 0.032, 0.165, 0.393, 0.312, 0.103, -0.009, -0.080],
+      [-0.046, 0.003, -0.040, -0.018, -0.028, 0.010, 0.072, 0.038, -0.026, -0.033, -0.076],
+      [-0.019, 0.011, -0.040, -0.042, -0.056, -0.034, -0.031, -0.076, -0.069, -0.041, -0.055],
+    ],
+  ],
+  Red: [
+    [
+      [0, 0, 0],
+      [0, 1, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0],
+    ],
+  ],
+  Green: [
+    [
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0],
+    ],
+  ],
+  Blue: [
+    [
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 0, 0],
+      [0, 0, 0],
+    ],
+    [
+      [0, 0, 0],
+      [0, 1, 0],
+      [0, 0, 0],
+    ],
+  ]
+};
+
+export const GRAY_KERNEL_PRESETS = {
+  Laplacian: [
+    [-1, -1, -1],
+    [-1, 8, -1],
+    [-1, -1, -1],
+  ],
+  'Sobel X': [
+    [-1, 0, 1],
+    [-2, 0, 2],
+    [-1, 0, 1],
+  ],
+  'Sobel Y': [
+    [-1, -2, -1],
+    [0, 0, 0],
+    [1, 2, 1],
+  ],
+  Sharpen: [
+    [0, -1, 0],
+    [-1, 5, -1],
+    [0, -1, 0],
+  ],
+  'Box Blur': [
+    [0.11, 0.11, 0.11],
+    [0.11, 0.11, 0.11],
+    [0.11, 0.11, 0.11],
+  ],
+};
+
+export const DEFAULT_COLOR_KERNEL = COLOR_KERNEL_PRESETS['Laplacian'];
+export const DEFAULT_GRAY_KERNEL = GRAY_KERNEL_PRESETS['Laplacian'];

src/main.tsx

@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+)

src/mnist.d.ts

@@ -0,0 +1,40 @@
+import * as tf from "@tensorflow/tfjs";
+
+export interface BatchData {
+  xs: tf.Tensor2D;
+  labels: tf.Tensor2D;
+}
+
+export interface TestSample {
+  xs: tf.Tensor2D;
+  labels: tf.Tensor2D;
+}
+
+export class MnistData {
+  shuffledTrainIndex: number;
+  shuffledTestIndex: number;
+  numClasses: number;
+  numInputChannels: number;
+  trainSize: number;
+  testSize: number;
+  imageSize: number;
+
+  datasetImages: Float32Array;
+  datasetLabels: Uint8Array;
+  trainIndices: Uint32Array;
+  testIndices: Uint32Array;
+  trainImages: Float32Array;
+  testImages: Float32Array;
+  trainLabels: Uint8Array;
+  testLabels: Uint8Array;
+
+  load(): Promise<void>;
+  nextTrainBatch(batchSize: number): BatchData;
+  nextTestBatch(batchSize: number): BatchData;
+  nextBatch(
+    batchSize: number,
+    data: [Float32Array, Uint8Array],
+    index: () => number,
+  ): BatchData;
+  getTestSample(index: number): TestSample;
+}

src/mnist.js

@@ -0,0 +1,195 @@
+/**
+ * @license
+ * Copyright 2018 Google LLC. All Rights Reserved.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ * =============================================================================
+ */
+
+import * as tf from '@tensorflow/tfjs';
+
+const IMAGE_SIZE = 784;
+const NUM_CLASSES = 10;
+const NUM_DATASET_ELEMENTS = 65000;
+
+const TRAIN_TEST_RATIO = 5 / 6;
+
+const NUM_TRAIN_ELEMENTS = Math.floor(TRAIN_TEST_RATIO * NUM_DATASET_ELEMENTS);
+const NUM_TEST_ELEMENTS = NUM_DATASET_ELEMENTS - NUM_TRAIN_ELEMENTS;
+
+const MNIST_IMAGES_SPRITE_PATH =
+  'https://storage.googleapis.com/learnjs-data/model-builder/mnist_images.png';
+const MNIST_LABELS_PATH =
+  'https://storage.googleapis.com/learnjs-data/model-builder/mnist_labels_uint8';
+
+/**
+ * A class that fetches the sprited MNIST dataset and returns shuffled batches.
+ *
+ * NOTE: This will get much easier. For now, we do data fetching and
+ * manipulation manually.
+ */
+export class MnistData {
+  constructor() {
+    this.shuffledTrainIndex = 0;
+    this.shuffledTestIndex = 0;
+
+    this.numClasses = NUM_CLASSES;
+    this.numInputChannels = 1;
+    this.trainSize = NUM_TRAIN_ELEMENTS;
+    this.testSize = NUM_TEST_ELEMENTS;
+    this.imageSize = 28;
+  }
+
+  async load() {
+    // Make a request for the MNIST sprited image.
+    const img = new Image();
+    const canvas = document.createElement('canvas');
+    const ctx = canvas.getContext('2d');
+    const imgRequest = new Promise((resolve, reject) => {
+      img.crossOrigin = '';
+      img.onload = () => {
+        img.width = img.naturalWidth;
+        img.height = img.naturalHeight;
+
+        const datasetBytesBuffer = new ArrayBuffer(
+          NUM_DATASET_ELEMENTS * IMAGE_SIZE * 4,
+        );
+
+        const chunkSize = 5000;
+        canvas.width = img.width;
+        canvas.height = chunkSize;
+
+        for (let i = 0; i < NUM_DATASET_ELEMENTS / chunkSize; i++) {
+          const datasetBytesView = new Float32Array(
+            datasetBytesBuffer,
+            i * IMAGE_SIZE * chunkSize * 4,
+            IMAGE_SIZE * chunkSize,
+          );
+          ctx.drawImage(
+            img,
+            0,
+            i * chunkSize,
+            img.width,
+            chunkSize,
+            0,
+            0,
+            img.width,
+            chunkSize,
+          );
+
+          const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
+
+          for (let j = 0; j < imageData.data.length / 4; j++) {
+            // All channels hold an equal value since the image is grayscale, so
+            // just read the red channel.
+            datasetBytesView[j] = imageData.data[j * 4] / 255;
+          }
+        }
+        this.datasetImages = new Float32Array(datasetBytesBuffer);
+
+        resolve();
+      };
+      img.src = MNIST_IMAGES_SPRITE_PATH;
+    });
+
+    const labelsRequest = fetch(MNIST_LABELS_PATH);
+    const [imgResponse, labelsResponse] = await Promise.all([
+      imgRequest,
+      labelsRequest,
+    ]);
+
+    this.datasetLabels = new Uint8Array(await labelsResponse.arrayBuffer());
+
+    // Create shuffled indices into the train/test set for when we select a
+    // random dataset element for training / validation.
+    this.trainIndices = tf.util.createShuffledIndices(NUM_TRAIN_ELEMENTS);
+    this.testIndices = tf.util.createShuffledIndices(NUM_TEST_ELEMENTS);
+
+    // Slice the the images and labels into train and test sets.
+    this.trainImages = this.datasetImages.slice(
+      0,
+      IMAGE_SIZE * NUM_TRAIN_ELEMENTS,
+    );
+    this.testImages = this.datasetImages.slice(IMAGE_SIZE * NUM_TRAIN_ELEMENTS);
+    this.trainLabels = this.datasetLabels.slice(
+      0,
+      NUM_CLASSES * NUM_TRAIN_ELEMENTS,
+    );
+    this.testLabels = this.datasetLabels.slice(
+      NUM_CLASSES * NUM_TRAIN_ELEMENTS,
+    );
+  }
+
+  nextTrainBatch(batchSize) {
+    return this.nextBatch(
+      batchSize,
+      [this.trainImages, this.trainLabels],
+      () => {
+        this.shuffledTrainIndex =
+          (this.shuffledTrainIndex + 1) % this.trainIndices.length;
+        return this.trainIndices[this.shuffledTrainIndex];
+      },
+    );
+  }
+
+  nextTestBatch(batchSize) {
+    return this.nextBatch(batchSize, [this.testImages, this.testLabels], () => {
+      this.shuffledTestIndex =
+        (this.shuffledTestIndex + 1) % this.testIndices.length;
+      return this.testIndices[this.shuffledTestIndex];
+    });
+  }
+
+  nextBatch(batchSize, data, index) {
+    const batchImagesArray = new Float32Array(batchSize * IMAGE_SIZE);
+    const batchLabelsArray = new Uint8Array(batchSize * NUM_CLASSES);
+
+    for (let i = 0; i < batchSize; i++) {
+      const idx = index();
+
+      const image = data[0].slice(
+        idx * IMAGE_SIZE,
+        idx * IMAGE_SIZE + IMAGE_SIZE,
+      );
+      batchImagesArray.set(image, i * IMAGE_SIZE);
+
+      const label = data[1].slice(
+        idx * NUM_CLASSES,
+        idx * NUM_CLASSES + NUM_CLASSES,
+      );
+      batchLabelsArray.set(label, i * NUM_CLASSES);
+    }
+
+    const xs = tf.tensor2d(batchImagesArray, [batchSize, IMAGE_SIZE]);
+    const labels = tf.tensor2d(batchLabelsArray, [batchSize, NUM_CLASSES]);
+
+    return { xs, labels };
+  }
+
+  getTestSample(index) {
+    const idx = index % NUM_TEST_ELEMENTS;
+
+    const image = this.testImages.slice(
+      idx * IMAGE_SIZE,
+      (idx + 1) * IMAGE_SIZE,
+    );
+    const label = this.testLabels.slice(
+      idx * NUM_CLASSES,
+      (idx + 1) * NUM_CLASSES,
+    );
+
+    const xs = tf.tensor2d(image, [1, IMAGE_SIZE]);
+    const labels = tf.tensor2d(label, [1, NUM_CLASSES]);
+
+    return { xs, labels };
+  }
+}

src/train.ts

@@ -0,0 +1,437 @@
+import * as tf from '@tensorflow/tfjs';
+
+type LayerValue = string | number | tf.Variable | null | undefined;
+
+interface LayerConfig {
+  type: string;
+  [key: string]: LayerValue;
+}
+
+export interface RunInfo {
+  [key: string]: unknown;
+}
+
+export interface TrainController {
+  isPaused: boolean;
+  stopRequested: boolean;
+  sampleIndex: number;
+}
+
+interface BatchData {
+  xs: tf.Tensor;
+  labels: tf.Tensor2D;
+}
+
+interface TestSample {
+  xs: tf.Tensor;
+}
+
+interface TrainingData {
+  trainSize: number;
+  imageSize: number;
+  numInputChannels: number;
+  nextTrainBatch(batchSize: number): BatchData;
+  getTestSample(index: number): TestSample;
+}
+
+export interface OptimizerParams {
+  learningRate: string;
+  batchSize: string;
+  epochs: string;
+
+  // sgd only
+  momentum?: string; 
+  // adam only
+  beta1?: string;
+  beta2?: string;
+  epsilon?: string;
+}
+
+type BatchEndCallback = (
+  epoch: number,
+  batch: number,
+  loss: number,
+  info: RunInfo[],
+) => void | Promise<void>;
+
+function parseValue(raw: string): string | number {
+  if (raw.trim() === '') {
+    return raw;
+  }
+
+  const num = Number(raw);
+  if (!Number.isNaN(num)) {
+    return num;
+  }
+
+  return raw;
+}
+
+function parseArchitecture(text: string): LayerConfig[] {
+  const layers: LayerConfig[] = [];
+  const matches = text.match(/\[(.*?)\]/gs);
+  if (!matches) return layers;
+
+  for (const block of matches) {
+    const content = block.slice(1, -1).trim();
+    if (content.length === 0) continue;
+
+    const tokens = content.split(/\s+/);
+    if (tokens.length === 0) continue;
+
+    const type = tokens[0];
+    const layer: LayerConfig = { type };
+
+    for (let i = 1; i < tokens.length; ++i) {
+      const token = tokens[i];
+      const [rawKey, rawValue] = token.split('=', 2);
+
+      if (!rawKey || rawValue === undefined) continue;
+
+      const key = rawKey === 'activation' ? 'activationType' : rawKey;
+      layer[key] = parseValue(rawValue);
+    }
+
+    layers.push(layer);
+  }
+
+  return layers;
+}
+
+function getNumber(layer: LayerConfig, key: string): number {
+  const value = layer[key];
+  if (typeof value !== 'number') {
+    throw new Error(`Layer "${layer.type}" is missing numeric "${key}"`);
+  }
+  return value;
+}
+
+function getVariable(layer: LayerConfig, key: string): tf.Variable {
+  const value = layer[key];
+  if (!value || typeof value !== 'object' || !('dispose' in value)) {
+    throw new Error(`Layer "${layer.type}" is missing tensor "${key}"`);
+  }
+  return value as tf.Variable;
+}
+
+function getPadding(layer: LayerConfig): number | 'same' | 'valid' {
+  const padding = layer.padding;
+  if (padding === undefined) return 'valid';
+  if (typeof padding === 'number') return padding;
+  if (padding === 'same' || padding === 'valid') return padding;
+  throw new Error(`Layer "${layer.type}" has invalid padding "${String(padding)}"`);
+}
+
+function getFlatDim(out: tf.Tensor): number {
+  const [, h, w, c] = out.shape;
+  if (
+    typeof h !== 'number' ||
+    typeof w !== 'number' ||
+    typeof c !== 'number'
+  ) {
+    throw new Error('Cannot flatten tensor with unknown shape');
+  }
+  return h * w * c;
+}
+
+export class Cnn {
+  architecture: LayerConfig[];
+  inChannels: number;
+  weights: tf.Variable[];
+
+  constructor(architecture: string, inChannels: number) {
+    this.architecture = parseArchitecture(architecture);
+    this.inChannels = inChannels;
+    this.weights = this.initWeights();
+  }
+
+  initWeights(): tf.Variable[] {
+    const weights: tf.Variable[] = [];
+    let inChannels = this.inChannels;
+
+    for (const layer of this.architecture) {
+      if (layer.type === 'conv2d') {
+        const kernel = getNumber(layer, 'kernel');
+        const filters = getNumber(layer, 'filters');
+        const shape: [number, number, number, number] = [
+          kernel,
+          kernel,
+          inChannels,
+          filters,
+        ];
+        const layerWeights = tf.variable(
+          tf.randomUniform(
+            shape,
+            -Math.sqrt(1 / (kernel * kernel * inChannels)),
+            Math.sqrt(1 / (kernel * kernel * inChannels)),
+          ),
+        );
+
+        weights.push(layerWeights);
+        layer.weights = layerWeights;
+        inChannels = filters;
+      } else if (layer.type === 'dense') {
+        layer.weights = null;
+        layer.biases = null;
+      }
+    }
+    return weights;
+  }
+
+  dispose(): void {
+    for (const layer of this.architecture) {
+      if (layer.type === 'conv2d') {
+        getVariable(layer, 'weights').dispose();
+      } else if (layer.type === 'dense') {
+        const weights = layer.weights;
+        const biases = layer.biases;
+        if (weights && typeof weights === 'object' && 'dispose' in weights) {
+          (weights as tf.Variable).dispose();
+        }
+        if (biases && typeof biases === 'object' && 'dispose' in biases) {
+          (biases as tf.Variable).dispose();
+        }
+      }
+    }
+  }
+
+  forward(x: tf.Tensor4D): tf.Tensor {
+    let out: tf.Tensor = x;
+
+    for (let i = 0; i < this.architecture.length; i += 1) {
+      const layer = this.architecture[i];
+
+      switch (layer.type) {
+        case 'conv2d': {
+          const layerWeights = getVariable(layer, 'weights');
+          const stride = getNumber(layer, 'stride');
+          const padding = getPadding(layer);
+          out = tf.conv2d(
+            out as tf.Tensor4D,
+            layerWeights as tf.Tensor4D,
+            stride,
+            padding,
+          );
+          if (layer.activationType === 'relu') {
+            out = out.relu();
+          }
+          break;
+        }
+        case 'maxpool': {
+          const size = getNumber(layer, 'size');
+          const stride = getNumber(layer, 'stride');
+          out = tf.maxPool(out as tf.Tensor4D, [size, size], [stride, stride], 0);
+          break;
+        }
+        case 'flatten': {
+          const flatDim = getFlatDim(out);
+          out = out.reshape([-1, flatDim]);
+
+          const next = this.architecture[i + 1];
+          if (next?.type === 'dense' && next.weights === null) {
+            const units = getNumber(next, 'units');
+            next.weights = tf.variable(
+              tf.randomUniform(
+                [flatDim, units],
+                -Math.sqrt(1 / flatDim),
+                Math.sqrt(1 / flatDim),
+              ),
+            );
+            next.biases = tf.variable(tf.zeros([units]));
+          }
+          break;
+        }
+        case 'dense': {
+          const denseWeights = getVariable(layer, 'weights');
+          const denseBiases = getVariable(layer, 'biases');
+          out = tf.matMul(out as tf.Tensor2D, denseWeights as tf.Tensor2D).add(
+            denseBiases as tf.Tensor1D,
+          );
+          break;
+        }
+        default:
+          break;
+      }
+    }
+    return out;
+  }
+
+  forwardWithInfo(x: tf.Tensor4D): { output: tf.Tensor; info: RunInfo[] } {
+    let out: tf.Tensor = x;
+    const info: RunInfo[] = [];
+
+    info.push({
+      type: 'input',
+      output: out.dataSync(),
+      shape: x.shape,
+    });
+
+    for (let i = 0; i < this.architecture.length; i += 1) {
+      const layer = this.architecture[i];
+
+      switch (layer.type) {
+        case 'conv2d': {
+          const layerWeights = getVariable(layer, 'weights');
+          const stride = getNumber(layer, 'stride');
+          const padding = getPadding(layer);
+          out = tf.conv2d(
+            out as tf.Tensor4D,
+            layerWeights as tf.Tensor4D,
+            stride,
+            padding,
+          );
+          if (layer.activationType === 'relu') {
+            out = out.relu();
+          }
+
+          info.push({
+            type: 'conv2d',
+            output: out.dataSync(),
+            kernels: layerWeights.dataSync(),
+            outputShape: out.shape,
+            kernelShape: layerWeights.shape,
+            stride,
+            padding,
+            activationType: layer.activationType,
+          });
+          break;
+        }
+        case 'maxpool': {
+          const size = getNumber(layer, 'size');
+          const stride = getNumber(layer, 'stride');
+          out = tf.maxPool(out as tf.Tensor4D, [size, size], [stride, stride], 0);
+
+          info.push({
+            type: 'maxpool',
+            output: out.dataSync(),
+            shape: out.shape,
+            size,
+            stride,
+          });
+          break;
+        }
+        case 'flatten': {
+          const flatDim = getFlatDim(out);
+          out = out.reshape([-1, flatDim]);
+
+          info.push({
+            type: 'flatten',
+            output: out.dataSync(),
+            shape: out.shape,
+          });
+
+          const next = this.architecture[i + 1];
+          if (next?.type === 'dense' && next.weights === null) {
+            const units = getNumber(next, 'units');
+            next.weights = tf.variable(
+              tf.randomUniform(
+                [flatDim, units],
+                -Math.sqrt(1 / flatDim),
+                Math.sqrt(1 / flatDim),
+              ),
+            );
+            next.biases = tf.variable(tf.zeros([units]));
+          }
+          break;
+        }
+        case 'dense': {
+          const denseWeights = getVariable(layer, 'weights');
+          const denseBiases = getVariable(layer, 'biases');
+          out = tf.matMul(out as tf.Tensor2D, denseWeights as tf.Tensor2D).add(
+            denseBiases as tf.Tensor1D,
+          );
+
+          info.push({
+            type: 'dense',
+            output: out.dataSync(),
+            weights: denseWeights.dataSync(),
+            biases: denseBiases.dataSync(),
+            outputShape: out.shape,
+            weightShape: denseWeights.shape,
+            biasShape: denseBiases.shape,
+            units: getNumber(layer, 'units'),
+          });
+          break;
+        }
+        default:
+          break;
+      }
+    }
+
+    return { output: out, info };
+  }
+}
+
+export async function train(
+  data: TrainingData,
+  model: Cnn,
+  optimizer: tf.Optimizer,
+  batchSize: number,
+  epochs: number,
+  controller: TrainController,
+  onBatchEnd: BatchEndCallback | null = null,
+): Promise<void> {
+  const numBatches = Math.floor(data.trainSize / batchSize);
+  for (let epoch = 0; epoch < epochs; ++epoch) {
+    for (let b = 0; b < numBatches; ++b) {
+      if (controller.stopRequested) {
+        console.log('Training stopped');
+        return;
+      }
+
+      while (controller.isPaused) {
+        await tf.nextFrame();
+      }
+
+      const cost = optimizer.minimize(() => {
+        const batch = data.nextTrainBatch(batchSize);
+        const xs = batch.xs.reshape([
+          batchSize,
+          data.imageSize,
+          data.imageSize,
+          data.numInputChannels,
+        ]) as tf.Tensor4D;
+        const preds = model.forward(xs);
+        return tf.losses.softmaxCrossEntropy(batch.labels, preds).mean();
+      }, true);
+
+      if (!cost) {
+        throw new Error('Optimizer did not return a loss tensor');
+      }
+
+      const lossVal = (await cost.data())[0];
+      cost.dispose();
+
+      const sample = data.getTestSample(controller.sampleIndex);
+      const { output, info } = model.forwardWithInfo(
+        sample.xs.reshape([
+          1,
+          data.imageSize,
+          data.imageSize,
+          data.numInputChannels,
+        ]) as tf.Tensor4D,
+      );
+
+      const probs = tf.tidy(() => tf.softmax(output));
+      info.push({
+        type: 'output',
+        output: probs.dataSync(),
+        shape: probs.shape,
+      });
+
+      if (controller.stopRequested) {
+        console.log('Training stopped');
+        probs.dispose();
+        return;
+      }
+
+      if (onBatchEnd) {
+        await onBatchEnd(epoch, b, lossVal, info);
+      }
+
+      probs.dispose();
+      await tf.nextFrame();
+    }
+  }
+  console.log('Training complete');
+}

src/types.d.ts

@@ -0,0 +1 @@
+declare module "react-plotly.js";

src/ui/Button.tsx

@@ -0,0 +1,15 @@
+interface ButtonProps {
+  label: string;
+  onClick?: () => void;
+}
+
+export default function Button({ label, onClick }: ButtonProps) {
+  return (
+    <button
+      onClick={onClick}
+      className="px-5 py-2 cursor-pointer bg-orange-200 rounded hover:bg-orange-300 border border-gray-300"
+    >
+      {label}
+    </button>
+  );
+}

src/ui/Dropdown.tsx

@@ -0,0 +1,25 @@
+interface DropdownProps<T extends string> {
+  label: string;
+  options: readonly T[];
+  activeOption: T;
+  onChange: (option: T) => void;
+}
+
+export default function Dropdown<T extends string>({ label, options, activeOption, onChange }: DropdownProps<T>) {
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-gray-700 text-sm">{label}</label>
+      <select
+        value={activeOption}
+        onChange={(e) => onChange(e.target.value as T)}
+        className="p-2 rounded bg-white border border-gray-300"
+      >
+        {options.map((option) => (
+          <option key={option} value={option}>
+            {option}
+          </option>
+        ))}
+      </select>
+    </div>
+  );
+}

src/ui/InputField.tsx

@@ -0,0 +1,46 @@
+interface InputFieldProps {
+  label: string;
+  value?: string;
+  onChange?: (value: string) => void;
+  readonly?: boolean;
+  rows?: number;
+}
+
+export default function InputField({
+  label,
+  value,
+  onChange,
+  readonly = false,
+  rows,
+}: InputFieldProps) {
+  const commonClasses =
+    "p-2 rounded border border-gray-300 w-full";
+
+  const bgClass = readonly ? "bg-gray-100" : "bg-white";
+
+  return (
+    <div className="flex flex-col gap-1">
+      <label className="text-gray-700 text-sm">
+        {label}
+      </label>
+
+      {rows && rows > 1 ? (
+        <textarea
+          value={value}
+          rows={rows}
+          readOnly={readonly}
+          onChange={(e) => onChange && onChange(e.target.value)}
+          className={`${commonClasses} ${bgClass} resize-none`}
+        />
+      ) : (
+        <input
+          type="text"
+          value={value}
+          readOnly={readonly}
+          onChange={(e) => onChange && onChange(e.target.value)}
+          className={`${commonClasses} ${bgClass}`}
+        />
+      )}
+    </div>
+  );
+}

src/ui/LoadingScreen.tsx

@@ -0,0 +1,19 @@
+export default function LoadingScreen({ message }: { message: string }) {
+  return (
+    <div className="fixed inset-0 flex flex-col items-center justify-center bg-slate-50 z-50">
+      <div className="flex flex-col items-center space-y-6">
+        {/* Animated loading spinner */}
+        <div className="relative flex items-center justify-center">
+          <div className="w-16 h-16 border-4 border-slate-200 border-t-blue-600 rounded-full animate-spin"></div>
+        </div>
+
+        {/* Loading message */}
+        <div className="text-center">
+          <h2 className="text-xl font-semibold text-slate-800 tracking-tight">
+            {message}...
+          </h2>
+        </div>
+      </div>
+    </div>
+  );
+}

src/ui/Radio.tsx

@@ -0,0 +1,27 @@
+interface RadioProps<T extends string> {
+  label?: string;
+  options: readonly T[];
+  activeOption: T;
+  onChange: (option: T) => void;
+}
+
+export default function Radio<T extends string>({ label, options, activeOption, onChange }: RadioProps<T>) {
+  return (
+    <div className="flex flex-col gap-1">
+      {label && <label className="text-gray-700 text-sm">{label}</label>}
+      <div className="flex gap-4">
+        {options.map((option) => (
+          <label key={option} className="flex items-center gap-1">
+            <input
+              type="radio"
+              value={option}
+              checked={activeOption === option}
+              onChange={() => onChange(option)}
+            />
+            {option}
+          </label>
+        ))}
+      </div>
+    </div>
+  );
+}

src/ui/Tabs.tsx

@@ -0,0 +1,25 @@
+interface TabsProps<T extends string> {
+  tabs: readonly T[];
+  activeTab: T; 
+  onChange: (tab: T) => void;
+}
+
+export default function Tabs<T extends string>({ tabs, activeTab, onChange }: TabsProps<T>) {
+  return (
+    <div className="flex mb-4">
+      {tabs.map((tab) => (
+        <button
+          key={tab}
+          onClick={() => onChange(tab)}
+          className={`px-5 py-2 cursor-pointer ${
+            activeTab === tab
+              ? "text-orange-500 border-b-2 border-orange-500"
+              : "text-gray-950 hover:bg-gray-200"
+          }`}
+        >
+          {tab}
+        </button>
+      ))}
+    </div>
+  );
+}

src/useConvolutionProcessing.ts

@@ -0,0 +1,198 @@
+import { useEffect, useMemo, useState } from "react";
+
+async function getImageData(imageUrl: string): Promise<ImageData> {
+  const image = await new Promise<HTMLImageElement>((resolve, reject) => {
+    const img = new Image();
+    img.crossOrigin = "anonymous";
+    img.onload = () => resolve(img);
+    img.onerror = reject;
+    img.src = imageUrl;
+  })
+
+  const canvas = document.createElement("canvas")
+  canvas.width = image.width;
+  canvas.height = image.height;
+
+  const ctx = canvas.getContext("2d");
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+
+  ctx.drawImage(image, 0, 0);
+  return ctx.getImageData(0, 0, canvas.width, canvas.height);
+}
+
+
+function getImageUrl(imageData: ImageData): string {
+  const canvas = document.createElement("canvas");
+  canvas.width = imageData.width;
+  canvas.height = imageData.height;
+
+  const ctx = canvas.getContext("2d")
+  if (!ctx) {
+    throw new Error("Failed to get canvas context");
+  }
+
+  ctx.putImageData(imageData, 0, 0);
+  return canvas.toDataURL("image/png");
+}
+
+function convertToGrayscale(imageData: ImageData): ImageData {
+  const output = new ImageData(
+    new Uint8ClampedArray(imageData.data),
+    imageData.width,
+    imageData.height,
+  );
+  const data = output.data;
+  for (let i = 0; i < data.length; i += 4) {
+    const r = data[i];
+    const g = data[i + 1];
+    const b = data[i + 2];
+    const gray = 0.299 * r + 0.587 * g + 0.114 * b;
+    data[i] = data[i + 1] = data[i + 2] = gray;
+  }
+  return output;
+}
+
+function convolve(imageData: ImageData, kernel: number[][] | number[][][]): ImageData {
+  if (Array.isArray(kernel[0][0])) {
+    // 3D kernel (color)
+    return convolveColor(imageData, kernel as number[][][]);
+  } else {
+    // 2D kernel (grayscale)
+    return convolveGray(imageData, kernel as number[][]);
+  }
+}
+
+function convolveGray(image: ImageData, kernel: number[][]): ImageData {
+  const kernelWidth = kernel[0].length;
+  const kernelHeight = kernel.length;
+
+  const width = image.width;
+  const height = image.height;
+  const inputData = image.data;
+
+  const outputWidth = width - kernelWidth + 1;
+  const outputHeight = height - kernelHeight + 1;
+  const outputData = new Uint8ClampedArray(outputWidth * outputHeight * 4);
+
+  for (let y = 0; y < outputHeight; ++y) {
+    for (let x = 0; x < outputWidth; ++x) {
+      // dot product
+      let sum = 0;
+      for (let ky = 0; ky < kernelHeight; ++ky) {
+        for (let kx = 0; kx < kernelWidth; ++kx) {
+          const pixelIndex = ((y + ky) * width + (x + kx)) * 4;
+          const pixelValue = inputData[pixelIndex];
+          const kernelValue = kernel[ky][kx];
+          sum += pixelValue * kernelValue;
+        }
+      }
+
+      const outputIndex = (y * outputWidth + x) * 4;
+      const clampedValue = Math.min(Math.max(sum, 0), 255);
+      outputData[outputIndex] = clampedValue; // R
+      outputData[outputIndex + 1] = clampedValue; // G
+      outputData[outputIndex + 2] = clampedValue; // B
+      outputData[outputIndex + 3] = 255; // A
+    }
+  }
+
+  return new ImageData(outputData, outputWidth, outputHeight);
+}
+
+function convolveColor(image: ImageData, kernel: number[][][]): ImageData {
+  const kernelWidth = kernel[0][0].length;
+  const kernelHeight = kernel[0].length;
+
+  const width = image.width;
+  const height = image.height;
+  const inputData = image.data;
+
+  const outputWidth = width - kernelWidth + 1;
+  const outputHeight = height - kernelHeight + 1;
+  const outputData = new Uint8ClampedArray(outputWidth * outputHeight * 4);
+
+  for (let y = 0; y < outputHeight; ++y) {
+    for (let x = 0; x < outputWidth; ++x) {
+      // dot product over 3 channels
+      let sum = 0;
+      for (let ky = 0; ky < kernelHeight; ++ky) {
+        for (let kx = 0; kx < kernelWidth; ++kx) {
+          const pixelIndex = ((y + ky) * width + (x + kx)) * 4;
+          const r = inputData[pixelIndex];
+          const g = inputData[pixelIndex + 1];
+          const b = inputData[pixelIndex + 2];
+
+          const kernelR = kernel[0][ky][kx];
+          const kernelG = kernel[1][ky][kx];
+          const kernelB = kernel[2][ky][kx];
+          sum += r * kernelR + g * kernelG + b * kernelB;
+        }
+      }
+
+      const outputIndex = (y * outputWidth + x) * 4;
+      const clampedValue = Math.min(Math.max(sum, 0), 255);
+      outputData[outputIndex] = clampedValue; // R
+      outputData[outputIndex + 1] = clampedValue; // G
+      outputData[outputIndex + 2] = clampedValue; // B
+      outputData[outputIndex + 3] = 255; // A
+    }
+  }
+
+  return new ImageData(outputData, outputWidth, outputHeight);
+}
+
+export default function useConvolutionProcessing(
+  rawInputImage: string,
+  kernel: number[][][] | number[][],
+): [string | null, string | null] {
+  const useColor = Array.isArray(kernel[0][0]);  // true if 3D kernel, false if 2D kernel
+
+  const [rawImageData, setRawImageData] = useState<ImageData | null>(null);
+
+  // extract input image data (array)
+  useEffect(() => {
+    let cancelled = false;
+
+    async function processImage() {
+      const imageData = await getImageData(rawInputImage);
+      if (!cancelled) {
+        setRawImageData(imageData);
+      }
+    }
+
+    processImage();
+
+    return () => {
+      cancelled = true;
+    }
+  }, [rawInputImage]);
+
+  const processedImageData = useMemo(() => {
+    if (!rawImageData) return null;
+
+    return useColor ? rawImageData : convertToGrayscale(rawImageData);
+  }, [rawImageData, useColor]);
+
+  const outputImageData = useMemo(() => {
+    if (!processedImageData) return null;
+
+    return convolve(processedImageData, kernel);
+  }, [processedImageData, kernel]);
+
+  const inputImage = useMemo(() => {
+    if (!processedImageData) return null;
+
+    return getImageUrl(processedImageData);
+  }, [processedImageData]);
+
+  const outputImage = useMemo(() => {
+    if (!outputImageData) return null;
+
+    return getImageUrl(outputImageData);
+  }, [outputImageData]);
+
+
+  return [inputImage, outputImage];
+}

tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

tsconfig.json

@@ -0,0 +1,11 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ],
+  "compilerOptions": {
+    "allowJs": true,
+    "checkJs": false
+  }
+}

tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

vite.config.js → vite.config.ts

@@ -1,7 +1,11 @@
 import { defineConfig } from 'vite'
 import react from '@vitejs/plugin-react'
+import tailwindcss from '@tailwindcss/vite'
 
 // https://vite.dev/config/
 export default defineConfig({
-  plugins: [react()],
+  plugins: [
+    react(),
+    tailwindcss(),
+  ],
 })