Fix formatting

src/App.jsx

@@ -1,30 +1,26 @@
-import './App.css'
-import ConvolutionVisualizer from "./components/convolution/ConvolutionVisualizer.jsx"
-import NetworkVisualizer from "./components/network/NetworkVisualizer.jsx"
-import Tabs from "./components/Tabs/Tabs.jsx"
-
+import './App.css';
+import ConvolutionVisualizer from './components/convolution/ConvolutionVisualizer.jsx';
+import NetworkVisualizer from './components/network/NetworkVisualizer.jsx';
+import Tabs from './components/Tabs/Tabs.jsx';
 
 function App() {
-	const tabData = [
-	  {
-			label: "Convolution",
-			content: <ConvolutionVisualizer />,
-	  },
-		{
-			label: "Network",
-			content: <NetworkVisualizer />,
-		},
-	];
+  const tabData = [
+    {
+      label: 'Convolution',
+      content: <ConvolutionVisualizer />,
+    },
+    {
+      label: 'Network',
+      content: <NetworkVisualizer />,
+    },
+  ];
 
   return (
     <>
       <h1>CNN Visualizer</h1>
-			<Tabs
-				defaultTab="Convolution"
-				tabs={tabData}
-			/>
+      <Tabs defaultTab="Convolution" tabs={tabData} />
     </>
-  )
+  );
 }
 
 export default App;

src/components/Button/Button.css

@@ -1,21 +1,21 @@
 .app-button {
-    padding: 8px 16px;
-    background-color: #f0f0f0;
-    border: none;
-    border-radius: 8px;
-    cursor: pointer;
-    font-size: 1rem;
+  padding: 8px 16px;
+  background-color: #f0f0f0;
+  border: none;
+  border-radius: 8px;
+  cursor: pointer;
+  font-size: 1rem;
 }
 
 .app-button:focus {
-    outline: none;
+  outline: none;
 }
 
 .app-button:hover {
-    outline: 1px solid orange;
+  outline: 1px solid orange;
 }
 
 .app-button.selected {
-    background-color: orange;
-    color: white;
+  background-color: orange;
+  color: white;
 }

src/components/Button/Button.jsx

@@ -1,22 +1,15 @@
-import "./Button.css";
+import './Button.css';
 
 export default function Button(props) {
-    const {
-        selected = false,
-        children,
-        className = "",
-        ...rest
-    } = props;
+  const { selected = false, children, className = '', ...rest } = props;
 
-    const classes = [
-        "app-button",
-        selected ? "selected" : "",
-        className
-    ].join(" ");
+  const classes = ['app-button', selected ? 'selected' : '', className].join(
+    ' ',
+  );
 
-    return (
-        <button className={classes} {...rest}>
-            {children}
-        </button>
-    );
+  return (
+    <button className={classes} {...rest}>
+      {children}
+    </button>
+  );
 }

src/components/Switch/Switch.css

@@ -33,7 +33,7 @@
 
 .slider::before {
   position: absolute;
-  content: "";
+  content: '';
   height: 28px;
   width: 28px;
   left: 4px;
@@ -46,4 +46,3 @@
 .switch input:checked + .slider {
   background: orange;
 }
-

src/components/Switch/Switch.jsx

@@ -1,4 +1,4 @@
-import "./Switch.css";
+import './Switch.css';
 
 function Switch(props) {
   return (

src/components/Tabs/Tabs.css

@@ -26,13 +26,12 @@
 .tab-content {
   flex: 1;
   padding: 20px;
-	border: none;
+  border: none;
 }
 
 .tab-buttons button:focus {
-  outline: none; 
+  outline: none;
 }
 .tab-buttons button:focus-visible {
-  outline: 2px solid orange; 
+  outline: 2px solid orange;
 }
-

src/components/Tabs/Tabs.jsx

@@ -1,5 +1,5 @@
-import { useState } from "react";
-import "./Tabs.css";
+import { useState } from 'react';
+import './Tabs.css';
 
 function Tabs(props) {
   const [activeTab, setActiveTab] = useState(props.defaultTab);
@@ -10,14 +10,12 @@ function Tabs(props) {
         {props.tabs.map((tab) => (
           <button
             key={tab.label}
-            className={activeTab === tab.label ? "active" : ""}
+            className={activeTab === tab.label ? 'active' : ''}
             onClick={() => setActiveTab(tab.label)}
           >
             {tab.label}
           </button>
         ))}
-
-
       </div>
 
       <div className="tab-content">

src/components/convolution/ConvolutionViewer.jsx

@@ -1,7 +1,7 @@
-import { useState, useEffect, useRef } from "react";
-import { getImageData, convertToGrayscale } from "../../utils/image";
-import { convolveGray, convolveColor } from "../../utils/convolution";
-import "./ConvolutionViewer.css";
+import { useState, useEffect, useRef } from 'react';
+import { getImageData, convertToGrayscale } from '../../utils/image';
+import { convolveGray, convolveColor } from '../../utils/convolution';
+import './ConvolutionViewer.css';
 
 function ConvolutionViewer(props) {
   const canvasRef = useRef(null);
@@ -12,7 +12,7 @@ function ConvolutionViewer(props) {
   useEffect(() => {
     async function process() {
       const canvas = canvasRef.current;
-      const ctx = canvas.getContext("2d", { willReadFrequently: true });
+      const ctx = canvas.getContext('2d', { willReadFrequently: true });
       const imageData = await getImageData(props.inputImageUrl, canvas, ctx);
 
       const grayImageData = convertToGrayscale(imageData);
@@ -21,7 +21,6 @@ function ConvolutionViewer(props) {
     }
 
     process();
-
   }, [props.inputImageUrl]);
 
   // set input image URL for display
@@ -34,7 +33,7 @@ function ConvolutionViewer(props) {
     }
 
     const canvas = canvasRef.current;
-    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
 
     if (props.useColor) {
       ctx.putImageData(props.colorImage, 0, 0);
@@ -46,17 +45,16 @@ function ConvolutionViewer(props) {
   }, [props.useColor, props.colorImage, props.grayImage]);
 
   // perform convolution and set output image URL for display
-  useEffect( () => {
+  useEffect(() => {
     if (!props.kernel) {
       return;
     }
-    const hasInvalid = props.kernel.flat().flat().some(
-      (v) => 
-        v === "" || 
-        v === null || 
-        v === undefined || 
-        !Number.isFinite(v)
-    );
+    const hasInvalid = props.kernel
+      .flat()
+      .flat()
+      .some(
+        (v) => v === '' || v === null || v === undefined || !Number.isFinite(v),
+      );
     if (hasInvalid) {
       return;
     }
@@ -68,38 +66,35 @@ function ConvolutionViewer(props) {
       return;
     }
 
-    const outputImageData = props.useColor 
-      ? convolveColor(props.colorImage, props.kernel) 
+    const outputImageData = props.useColor
+      ? convolveColor(props.colorImage, props.kernel)
       : convolveGray(props.grayImage, props.kernel[0]);
-    
+
     // draw output on canvas to get data URL
     const canvas = canvasRef.current;
-    const ctx = canvas.getContext("2d", { willReadFrequently: true });
+    const ctx = canvas.getContext('2d', { willReadFrequently: true });
     canvas.width = outputImageData.width;
     canvas.height = outputImageData.height;
     ctx.putImageData(outputImageData, 0, 0);
     const url = canvas.toDataURL();
     setOutputUrl(url);
-     
   }, [props.useColor, props.grayImage, props.colorImage, props.kernel]);
 
   return (
     <div className="convolution-viewer">
       <div className="convolution-viewer-item">
         <h3>Input</h3>
-        { inputUrl ? (
-          <img src={inputUrl} alt="Input" />
-        ) : ( <p>Loading...</p> 
-        )}
+        {inputUrl ? <img src={inputUrl} alt="Input" /> : <p>Loading...</p>}
       </div>
       <div className="convolution-viewer-item">
         <h3>Output</h3>
-        { outputUrl ? (
+        {outputUrl ? (
           <img src={outputUrl} alt="Output" />
-        ) : ( <p>Processing...</p> 
+        ) : (
+          <p>Processing...</p>
         )}
       </div>
-      <canvas ref={canvasRef} style={{ display: "none" }}></canvas>
+      <canvas ref={canvasRef} style={{ display: 'none' }}></canvas>
     </div>
   );
 }

src/components/convolution/ConvolutionVisualizer.jsx

@@ -1,32 +1,30 @@
-import { useRef, useState } from 'react'
-import './ConvolutionViewer.css'
-import ConvolutionViewer from "./ConvolutionViewer.jsx"
-import Sidebar from "./Sidebar.jsx"
-
-import marioImage from "../../assets/mario.png";
+import { useRef, useState } from 'react';
+import './ConvolutionViewer.css';
+import ConvolutionViewer from './ConvolutionViewer.jsx';
+import Sidebar from './Sidebar.jsx';
 
+import marioImage from '../../assets/mario.png';
 
 const DEFAULT_IMAGE = marioImage;
 
 const DEFAULT_KERNEL = [
   [
     [-1, -1, -1],
-    [-1,  8, -1],
+    [-1, 8, -1],
     [-1, -1, -1],
   ],
   [
     [-1, -1, -1],
-    [-1,  8, -1],
+    [-1, 8, -1],
     [-1, -1, -1],
   ],
   [
     [-1, -1, -1],
-    [-1,  8, -1],
+    [-1, 8, -1],
     [-1, -1, -1],
-  ]
+  ],
 ];
 
-
 function ConvolutionVisualizer() {
   const canvasRef = useRef(null);
 
@@ -46,26 +44,26 @@ function ConvolutionVisualizer() {
   return (
     <>
       <div className="main-container">
-        <ConvolutionViewer 
-          inputImageUrl={image} 
-          kernel={kernel} 
-          grayImage={grayImage} 
+        <ConvolutionViewer
+          inputImageUrl={image}
+          kernel={kernel}
+          grayImage={grayImage}
           setGrayImage={setGrayImage}
           colorImage={colorImage}
           setColorImage={setColorImage}
           useColor={useColor}
         />
-        <Sidebar 
-          kernel={kernel} 
-          onKernelChange={setKernel} 
-          onUpload={handleUpload} 
+        <Sidebar
+          kernel={kernel}
+          onKernelChange={setKernel}
+          onUpload={handleUpload}
           useColor={useColor}
           onUseColor={setUseColor}
         />
       </div>
-      <canvas ref={canvasRef} style={{ display: "none" }}></canvas>
+      <canvas ref={canvasRef} style={{ display: 'none' }}></canvas>
     </>
-  )
+  );
 }
 
 export default ConvolutionVisualizer;

src/components/convolution/InputSelector.jsx

@@ -1,23 +1,21 @@
-import { useRef } from "react";
-import Switch from "../Switch/Switch.jsx";
-import Button from "../Button/Button.jsx";
-import "./InputSelector.css";
+import { useRef } from 'react';
+import Switch from '../Switch/Switch.jsx';
+import Button from '../Button/Button.jsx';
+import './InputSelector.css';
 
 function InputSelector(props) {
   const fileInputRef = useRef(null);
 
   return (
     <div className="input-selector">
-      <input 
+      <input
         ref={fileInputRef}
         type="file"
         accept="image/*"
         onChange={props.handleFileChange}
-        style={{ display: "none" }}
-      /> 
-      <Button onClick={() => fileInputRef.current.click()}>
-        Upload Image
-      </Button>
+        style={{ display: 'none' }}
+      />
+      <Button onClick={() => fileInputRef.current.click()}>Upload Image</Button>
       <Switch
         checked={props.useColor}
         onChange={(e) => props.onUseColor(e)}

src/components/convolution/KernelEditor.css

@@ -4,13 +4,13 @@
   gap: 30px;
   padding: 12px;
   max-width: fit-content;
-	align-items: center;
+  align-items: center;
 }
 
 .kernel-matrix {
-	display: flex;
-	flex-direction: column;
-	gap: 8px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
 }
 
 .kernel-row {
@@ -19,11 +19,11 @@
 }
 
 .kernel-size-options {
-	border: 1px solid #d0d0d0;
-	border-radius: 6px;
-	padding: 8px 12px;
-	background: #f9f9f9;
-	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
+  border: 1px solid #d0d0d0;
+  border-radius: 6px;
+  padding: 8px 12px;
+  background: #f9f9f9;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
 .kernel-size-options form {
@@ -32,7 +32,7 @@
   align-items: center;
 }
 
-.kernel-size-options input[type="number"] {
+.kernel-size-options input[type='number'] {
   width: auto;
   max-width: 4ch;
   margin: 0 8px;
@@ -46,7 +46,10 @@
   border: 1px solid #d0d0d0;
   border-radius: 6px;
   background: white;
-  transition: border-color 0.2s, box-shadow 0.2s, transform 0.1s;
+  transition:
+    border-color 0.2s,
+    box-shadow 0.2s,
+    transform 0.1s;
   box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
 }
 
@@ -80,12 +83,12 @@
 }
 
 /* Remove default spinner arrows */
-input[type="number"]::-webkit-inner-spin-button,
-input[type="number"]::-webkit-outer-spin-button {
+input[type='number']::-webkit-inner-spin-button,
+input[type='number']::-webkit-outer-spin-button {
   -webkit-appearance: none;
   margin: 0;
 }
 
-input[type="number"] {
+input[type='number'] {
   -moz-appearance: textfield;
 }

src/components/convolution/KernelEditor.jsx

@@ -1,17 +1,17 @@
 import { useState, useEffect } from 'react';
 import PresetSelector from './PresetSelector.jsx';
-import Button from "../Button/Button.jsx";
+import Button from '../Button/Button.jsx';
 import './KernelEditor.css';
 
 function KernelEditor(props) {
   const [width, setWidth] = useState(props.kernel[0].length);
   const [height, setHeight] = useState(props.kernel.length);
 
-  const [selectedChannel, setSelectedChannel] = useState(0);  // 0=R, 1=G, 2=B
+  const [selectedChannel, setSelectedChannel] = useState(0); // 0=R, 1=G, 2=B
 
   function handleChange(channel, row, col, value) {
     const newKernel = props.kernel.map((r) => [...r]);
-    newKernel[channel][row][col] = value === "" ? "" : parseFloat(value);
+    newKernel[channel][row][col] = value === '' ? '' : parseFloat(value);
     props.onKernelChange?.(newKernel);
   }
 
@@ -54,14 +54,14 @@ function KernelEditor(props) {
     <div className="kernel-editor">
       <div className="kernel-size-options">
         <form onSubmit={handleSizeSubmit}>
-          Width: {" "} 
+          Width:{' '}
           <input
             type="number"
             value={width}
             min={1}
             onChange={(e) => setWidth(parseInt(e.target.value))}
           />
-          Height: {" "}
+          Height:{' '}
           <input
             type="number"
             value={height}
@@ -74,45 +74,47 @@ function KernelEditor(props) {
       {props.useColor && (
         <div className="channel-selector">
           <div className="channel-buttons">
-            <Button 
-                selected={selectedChannel === 0}
-                onClick={() => setSelectedChannel(0)}
+            <Button
+              selected={selectedChannel === 0}
+              onClick={() => setSelectedChannel(0)}
             >
               R
             </Button>
             <Button
-                selected={selectedChannel === 1}
-                onClick={() => setSelectedChannel(1)}
+              selected={selectedChannel === 1}
+              onClick={() => setSelectedChannel(1)}
             >
               G
             </Button>
             <Button
-                selected={selectedChannel === 2}
-                onClick={() => setSelectedChannel(2)}
+              selected={selectedChannel === 2}
+              onClick={() => setSelectedChannel(2)}
             >
               B
             </Button>
-          </div>		
+          </div>
         </div>
       )}
       <div className="kernel-matrix">
-				{props.kernel[selectedChannel].map((row, i) => (
-					<div key={i} className="kernel-row">
-						{row.map((value, j) => (
-							<input
-								key={j}
-								type="number"
-								value={value}
-								onChange={(e) => handleChange(selectedChannel, i, j, e.target.value)}
-								className="kernel-cell"
-							/>
-						))}
-					</div>
-				))}
-		  </div>
-      <PresetSelector 
-        onKernelChange={props.onKernelChange} 
-        useColor={props.useColor} 
+        {props.kernel[selectedChannel].map((row, i) => (
+          <div key={i} className="kernel-row">
+            {row.map((value, j) => (
+              <input
+                key={j}
+                type="number"
+                value={value}
+                onChange={(e) =>
+                  handleChange(selectedChannel, i, j, e.target.value)
+                }
+                className="kernel-cell"
+              />
+            ))}
+          </div>
+        ))}
+      </div>
+      <PresetSelector
+        onKernelChange={props.onKernelChange}
+        useColor={props.useColor}
       />
     </div>
   );

src/components/convolution/PresetSelector.css

@@ -49,4 +49,3 @@
 .preset-apply:hover {
   background: #1e7be6;
 }
-

src/components/convolution/PresetSelector.jsx

@@ -1,13 +1,11 @@
-import { useState, useEffect } from "react";
-import Button from "../Button/Button.jsx";
-import { PRESETS_COLOR, PRESETS_GRAY } from "../../data/convolution_presets.js";
-import "./PresetSelector.css";
+import { useState, useEffect } from 'react';
+import Button from '../Button/Button.jsx';
+import { PRESETS_COLOR, PRESETS_GRAY } from '../../data/convolution_presets.js';
+import './PresetSelector.css';
 
 function PresetSelector(props) {
   const [presetNames, setPresetNames] = useState(
-    props.useColor
-      ? Object.keys(PRESETS_COLOR)
-      : Object.keys(PRESETS_GRAY)
+    props.useColor ? Object.keys(PRESETS_COLOR) : Object.keys(PRESETS_GRAY),
   );
   const [selectedPreset, setSelectedPreset] = useState(presetNames[0]);
 
@@ -20,8 +18,8 @@ function PresetSelector(props) {
   }
 
   useEffect(() => {
-    console.log("PresetSelector: useEffect triggered");
-    console.log("useColor:", props.useColor);
+    console.log('PresetSelector: useEffect triggered');
+    console.log('useColor:', props.useColor);
     const names = props.useColor
       ? Object.keys(PRESETS_COLOR)
       : Object.keys(PRESETS_GRAY);
@@ -45,9 +43,7 @@ function PresetSelector(props) {
         ))}
       </select>
 
-      <Button onClick={applyPreset}>
-        Apply
-      </Button>
+      <Button onClick={applyPreset}>Apply</Button>
     </div>
   );
 }

src/components/convolution/Sidebar.css

@@ -19,27 +19,26 @@
   right: 0;
   bottom: 0;
   background-color: #ccc;
-  transition: .4s;
+  transition: 0.4s;
   border-radius: 24px;
 }
 
 .slider:before {
   position: absolute;
-  content: "";
+  content: '';
   height: 18px;
   width: 18px;
   left: 3px;
   bottom: 3px;
   background-color: white;
-  transition: .4s;
+  transition: 0.4s;
   border-radius: 50%;
 }
 
 input:checked + .slider {
-  background-color: #4CAF50;
+  background-color: #4caf50;
 }
 
 input:checked + .slider:before {
   transform: translateX(26px);
 }
-

src/components/convolution/Sidebar.jsx

@@ -1,17 +1,16 @@
-import KernelEditor from "./KernelEditor.jsx";
-import Tabs from "../Tabs/Tabs.jsx";
-import InputSelector from "./InputSelector.jsx";
-import "./Sidebar.css";
+import KernelEditor from './KernelEditor.jsx';
+import Tabs from '../Tabs/Tabs.jsx';
+import InputSelector from './InputSelector.jsx';
+import './Sidebar.css';
 
-
-const DEFAULT_TAB = "Input";
+const DEFAULT_TAB = 'Input';
 
 function Sidebar(props) {
   const tabData = [
     {
-      label: "Input",
+      label: 'Input',
       content: (
-        <InputSelector 
+        <InputSelector
           handleFileChange={handleFileChange}
           useColor={props.useColor}
           onUseColor={props.onUseColor}
@@ -19,11 +18,11 @@ function Sidebar(props) {
       ),
     },
     {
-      label: "Kernel",
+      label: 'Kernel',
       content: (
-        <KernelEditor 
-          kernel={props.kernel} 
-          onKernelChange={props.onKernelChange} 
+        <KernelEditor
+          kernel={props.kernel}
+          onKernelChange={props.onKernelChange}
           onBoundingBoxButton={props.onBoundingBoxButton}
           useColor={props.useColor}
         />
@@ -40,10 +39,7 @@ function Sidebar(props) {
 
   return (
     <div className="sidebar">
-      <Tabs 
-        tabs={tabData} 
-        defaultTab={DEFAULT_TAB} 
-      />
+      <Tabs tabs={tabData} defaultTab={DEFAULT_TAB} />
     </div>
   );
 }

src/components/network/ArchitectureEditor.css

@@ -1,69 +1,69 @@
 .cnn-editor {
-max-width: 700px;
-margin: 20px auto;
-font-family: sans-serif;
+  max-width: 700px;
+  margin: 20px auto;
+  font-family: sans-serif;
 }
 
 .layers {
-display: flex;
-flex-direction: column;
-gap: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .layer-card {
-border: 1px solid #ccc;
-padding: 15px;
-border-radius: 10px;
-background: #fafafa;
+  border: 1px solid #ccc;
+  padding: 15px;
+  border-radius: 10px;
+  background: #fafafa;
 }
 
 .layer-header {
-display: flex;
-justify-content: space-between;
-margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
 }
 
 .layer-grid {
-display: grid;
-grid-template-columns: 1fr 1fr;
-gap: 10px 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 20px;
 }
 
 .field {
-display: flex;
-flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .field label {
-font-size: 12px;
-margin-bottom: 4px;
-color: #555;
+  font-size: 12px;
+  margin-bottom: 4px;
+  color: #555;
 }
 
 .field input,
 .field select {
-padding: 5px;
-border-radius: 5px;
-border: 1px solid #ccc;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
 }
 
 .add-btn {
-margin-top: 20px;
-padding: 12px;
-width: 100%;
-background: #4caf50;
-border: none;
-color: white;
-font-size: 16px;
-border-radius: 8px;
-cursor: pointer;
+  margin-top: 20px;
+  padding: 12px;
+  width: 100%;
+  background: #4caf50;
+  border: none;
+  color: white;
+  font-size: 16px;
+  border-radius: 8px;
+  cursor: pointer;
 }
 
 .remove-btn {
-background: #ff4444;
-border: none;
-padding: 6px 10px;
-color: white;
-border-radius: 5px;
-cursor: pointer;
+  background: #ff4444;
+  border: none;
+  padding: 6px 10px;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
 }

src/components/network/ArchitectureEditor.jsx

@@ -1,7 +1,6 @@
-import { useState } from "react";
-import Button from "../Button/Button.jsx";
-import "../../styles.css";
-
+import { useState } from 'react';
+import Button from '../Button/Button.jsx';
+import '../../styles.css';
 
 function ArchitectureEditor(props) {
   const [draft, setDraft] = useState(props.architecture);
@@ -14,14 +13,10 @@ function ArchitectureEditor(props) {
           value={draft}
           onChange={(e) => setDraft(e.target.value)}
           rows={20}
-          style={{ height: "auto" }}
+          style={{ height: 'auto' }}
         />
       </div>
-      <Button
-        onClick={() => props.onChange(draft)}
-      >
-        Apply Changes
-      </Button>
+      <Button onClick={() => props.onChange(draft)}>Apply Changes</Button>
     </div>
   );
 }

src/components/network/Conv2dLayerViewer.jsx

@@ -1,6 +1,5 @@
-import { useState, useEffect, useMemo } from "react";
-import "./LayerViewer.css";
-
+import { useState, useEffect, useMemo } from 'react';
+import './LayerViewer.css';
 
 function extractKernels(kernels, selectedOutputChannel, kh, kw, inC, outC) {
   let minVal = Infinity;
@@ -21,18 +20,19 @@ function extractKernels(kernels, selectedOutputChannel, kh, kw, inC, outC) {
 
     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 val =
+          kernels[
+            i * kw * inC * outC +
+              j * inC * outC +
+              ic * outC +
+              selectedOutputChannel
+          ];
         const normVal = (val - minVal) / (maxVal - minVal + 1e-8);
 
         buffer[(i * kw + j) * 4 + 0] = normVal * 255; // R
         buffer[(i * kw + j) * 4 + 1] = normVal * 255; // G
         buffer[(i * kw + j) * 4 + 2] = normVal * 255; // B
-        buffer[(i * kw + j) * 4 + 3] = 255;           // A
+        buffer[(i * kw + j) * 4 + 3] = 255; // A
       }
     }
 
@@ -62,18 +62,19 @@ function extractActivationMaps(output, H, W, C) {
 
     for (let i = 0; i < H; ++i) {
       for (let j = 0; j < W; ++j) {
-        const val = output[
-          0 * H * W * C +  // batch index 0
-          i * W * C +
-          j * C +
-          c
-        ];
+        const val =
+          output[
+            0 * H * W * C + // batch index 0
+              i * W * C +
+              j * C +
+              c
+          ];
         const normVal = (val - minVal) / (maxVal - minVal + 1e-8);
 
         buffer[(i * W + j) * 4 + 0] = normVal * 255; // R
         buffer[(i * W + j) * 4 + 1] = normVal * 255; // G
         buffer[(i * W + j) * 4 + 2] = normVal * 255; // B
-        buffer[(i * W + j) * 4 + 3] = 255;           // A
+        buffer[(i * W + j) * 4 + 3] = 255; // A
       }
     }
 
@@ -82,7 +83,7 @@ function extractActivationMaps(output, H, W, C) {
   }
 
   return activationImgDatas;
-} 
+}
 
 function imgDataToSrc(imgData) {
   const canvas = document.createElement('canvas');
@@ -100,16 +101,16 @@ function Conv2dLayerViewer(props) {
   const [batch, H, W, C] = props.outputShape;
 
   const kernels = useMemo(() => {
-		if (selectedChannel == null) {
-			return null;
-		}
+    if (selectedChannel == null) {
+      return null;
+    }
     return extractKernels(props.kernels, selectedChannel, kh, kw, inC, outC);
   }, [props.tick, selectedChannel]);
 
   const kernelSrcs = useMemo(() => {
-		if (kernels == null) {
-			return null;
-		}
+    if (kernels == null) {
+      return null;
+    }
     return kernels.map(imgDataToSrc);
   }, [kernels]);
 
@@ -126,41 +127,53 @@ function Conv2dLayerViewer(props) {
       <h3 className="layer-title">Convolution Layer</h3>
 
       <div className="layer-details">
-        <div><strong>Kernel Size:</strong> {kh} × {kw}</div>
-        <div><strong>Stride:</strong> {props.stride}</div>
-        <div><strong>Padding:</strong> {props.padding}</div>
-        <div><strong>Activation:</strong> {props.activationType}</div>
-        <div><strong>Output channels:</strong> {C}</div>
+        <div>
+          <strong>Kernel Size:</strong> {kh} × {kw}
+        </div>
+        <div>
+          <strong>Stride:</strong> {props.stride}
+        </div>
+        <div>
+          <strong>Padding:</strong> {props.padding}
+        </div>
+        <div>
+          <strong>Activation:</strong> {props.activationType}
+        </div>
+        <div>
+          <strong>Output channels:</strong> {C}
+        </div>
       </div>
 
-			{selectedChannel != null && (
-				<>
-					<h4>Kernel for output {selectedChannel} (min-max normalized)</h4>
-					<div className="layer-grid">
-						{kernelSrcs.map((src, idx) => (
-							<img 
-								key={`${props.layerIdx}-${idx}-kernel`} 
-								src={src} 
-								alt={`Kernel ${idx}`} 
-							/>
-						))}
-					</div>
-				</>
-			)}
+      {selectedChannel != null && (
+        <>
+          <h4>Kernel for output {selectedChannel} (min-max normalized)</h4>
+          <div className="layer-grid">
+            {kernelSrcs.map((src, idx) => (
+              <img
+                key={`${props.layerIdx}-${idx}-kernel`}
+                src={src}
+                alt={`Kernel ${idx}`}
+              />
+            ))}
+          </div>
+        </>
+      )}
 
       <h4>Activation Maps (min-max normalized)</h4>
       <div className="layer-grid">
-				{activationSrcs.map((src, idx) => (
-					<img 
-						key={`${props.layerIdx}-${idx}-activation`} 
-						src={src} 
-						alt={`Activation Map ${idx}`} 
-            onClick={() => 
-							setSelectedChannel(selectedChannel === idx ? null : idx)
-						}
-            style={{border: selectedChannel === idx ? '4px solid lime' : 'none'}}
-					/>
-				))}
+        {activationSrcs.map((src, idx) => (
+          <img
+            key={`${props.layerIdx}-${idx}-activation`}
+            src={src}
+            alt={`Activation Map ${idx}`}
+            onClick={() =>
+              setSelectedChannel(selectedChannel === idx ? null : idx)
+            }
+            style={{
+              border: selectedChannel === idx ? '4px solid lime' : 'none',
+            }}
+          />
+        ))}
       </div>
     </div>
   );

src/components/network/InfoViewer.jsx

@@ -1,71 +1,69 @@
-import Conv2dLayerViewer from "./Conv2dLayerViewer.jsx";
-import MaxPoolLayerViewer from "./MaxPoolLayerViewer.jsx";
-import InputViewer from "./InputViewer.jsx";
-import OutputLayerViewer from "./OutputLayerViewer.jsx";
+import Conv2dLayerViewer from './Conv2dLayerViewer.jsx';
+import MaxPoolLayerViewer from './MaxPoolLayerViewer.jsx';
+import InputViewer from './InputViewer.jsx';
+import OutputLayerViewer from './OutputLayerViewer.jsx';
 
 function InfoViewer(props) {
-	function renderLayer(layer, idx) {
-		switch (layer.type) {
-			case 'input':
-				return (
-					<InputViewer
-						key={idx}
-					  output={layer.output}
-						shape={layer.shape}
+  function renderLayer(layer, idx) {
+    switch (layer.type) {
+      case 'input':
+        return (
+          <InputViewer
+            key={idx}
+            output={layer.output}
+            shape={layer.shape}
             onSampleIndexChange={props.onSampleIndexChange}
             tick={props.tick}
-					/>
-				);
-			case 'conv2d':
-				return (
-					<Conv2dLayerViewer 
+          />
+        );
+      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}
-					  type={layer.type}
+            layerIdx={idx}
+            stride={layer.stride}
+            padding={layer.padding}
+            activationType={layer.activationType}
+            kernels={layer.kernels}
+            output={layer.output}
+            kernelShape={layer.kernelShape}
+            outputShape={layer.outputShape}
+            type={layer.type}
             tick={props.tick}
-					/>
-				);
-			case 'maxpool':
-				return (
-					<MaxPoolLayerViewer 
+          />
+        );
+      case 'maxpool':
+        return (
+          <MaxPoolLayerViewer
             key={idx}
-						stride={layer.stride} 
-						size={layer.size}
-					  output={layer.output}
-						shape={layer.shape}
+            stride={layer.stride}
+            size={layer.size}
+            output={layer.output}
+            shape={layer.shape}
             tick={props.tick}
-					/>
-				);
-			case 'flatten':
-				return;
-			case 'dense':
-				return <p key={idx}>Dense Layer: {layer.details}</p>;
-			default:
-				return <p key={idx}>Unknown Layer Type</p>;
-		}
-	}
+          />
+        );
+      case 'flatten':
+        return;
+      case 'dense':
+        return <p key={idx}>Dense Layer: {layer.details}</p>;
+      default:
+        return <p key={idx}>Unknown Layer Type</p>;
+    }
+  }
 
-	return (
-		<div>
-		  {props.info && props.info.slice(0, -1).map((layer, idx) => (
-				renderLayer(layer, idx)
-			))}
+  return (
+    <div>
+      {props.info &&
+        props.info.slice(0, -1).map((layer, idx) => renderLayer(layer, idx))}
       {props.info && props.info.length > 0 && (
         <OutputLayerViewer
           probs={props.info[props.info.length - 1]?.output}
           tick={props.tick}
         />
-      )
-      }
-		</div>
-	);
+      )}
+    </div>
+  );
 }
 
 export default InfoViewer;

src/components/network/InputViewer.jsx

@@ -1,18 +1,18 @@
-import Button from "../Button/Button.jsx";
-import "./LayerViewer.css";
-
+import Button from '../Button/Button.jsx';
+import './LayerViewer.css';
 
 function extractImage(output, H, W, C) {
   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 < C; ++c) {
-        const val = output[
-          0 * H * W * C +  // batch index 0
-          i * W * C +
-          j * C +
-          c
-        ];
+        const val =
+          output[
+            0 * H * W * C + // batch index 0
+              i * W * C +
+              j * C +
+              c
+          ];
         buffer[(i * W + j) * 4 + c] = val * 255;
       }
       for (let c = C; c < 3; ++c) {
@@ -25,7 +25,6 @@ function extractImage(output, H, W, C) {
   return new ImageData(buffer, W, H);
 }
 
-
 function imgDataToSrc(imgData) {
   const canvas = document.createElement('canvas');
   canvas.width = imgData.width;
@@ -35,31 +34,29 @@ function imgDataToSrc(imgData) {
   return canvas.toDataURL();
 }
 
-
 function InputViewer(props) {
-	const [batchSize, H, W, C] = props.shape;
+  const [batchSize, H, W, C] = props.shape;
 
-	const imgData = extractImage(props.output, H, W, C);
-	const imgSrc = imgDataToSrc(imgData);
+  const imgData = extractImage(props.output, H, W, C);
+  const imgSrc = imgDataToSrc(imgData);
 
-	return (
-		<div className="layer-viewer">
-			<h3 className="layer-title">Input Layer</h3>
+  return (
+    <div className="layer-viewer">
+      <h3 className="layer-title">Input Layer</h3>
 
-		  <div className="layer-details">
-		    <div><strong>Input size:</strong> {imgData.width} x {imgData.height}</div>
-		  </div>
+      <div className="layer-details">
+        <div>
+          <strong>Input size:</strong> {imgData.width} x {imgData.height}
+        </div>
+      </div>
 
-			<h4>Sample input</h4>
-		  <div className="layer-grid">
-		    {imgSrc && (
-					<img key={0} src={imgSrc} alt={`Input Image`} />
-		    )}
+      <h4>Sample input</h4>
+      <div className="layer-grid">
+        {imgSrc && <img key={0} src={imgSrc} alt={`Input Image`} />}
         <Button onClick={props.onSampleIndexChange}>New Sample</Button>
-		  </div>
-		</div>
-	);
+      </div>
+    </div>
+  );
 }
 
 export default InputViewer;
-

src/components/network/LayerViewer.css

@@ -13,8 +13,8 @@
 }
 
 .layer-details {
-	display: flex;
-	justify-content: space-evenly;
+  display: flex;
+  justify-content: space-evenly;
   margin-bottom: 12px;
   color: #444;
   font-size: 14px;
@@ -27,7 +27,7 @@
 }
 
 .layer-grid img {
-	width: 100px;
-	height: 100px;
-	image-rendering: pixelated;
+  width: 100px;
+  height: 100px;
+  image-rendering: pixelated;
 }

src/components/network/MaxPoolLayerViewer.jsx

@@ -1,89 +1,93 @@
-import { useMemo } from "react";
-import "./LayerViewer.css";
-
+import { useMemo } from 'react';
+import './LayerViewer.css';
 
 function extractActivationMaps(activations, H, W, C) {
-	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;
-		}
-	}
+  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;
+    }
+  }
 
-	let activationImgDatas = [];
-	for (let c = 0; c < C; ++c) {
-		const buffer = new Uint8ClampedArray(H * W * 4);
+  let activationImgDatas = [];
+  for (let c = 0; c < C; ++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[
-					0 * H * W * C +  // batch index 0
-					i * W * C +
-					j * C +
-					c
-				];
-				const normVal = (val - minVal) / (maxVal - minVal + 1e-8);
+    for (let i = 0; i < H; ++i) {
+      for (let j = 0; j < W; ++j) {
+        const val =
+          activations[
+            0 * H * W * C + // batch index 0
+              i * W * C +
+              j * C +
+              c
+          ];
+        const normVal = (val - minVal) / (maxVal - minVal + 1e-8);
 
-				buffer[(i * W + j) * 4 + 0] = normVal * 255; // R
-				buffer[(i * W + j) * 4 + 1] = normVal * 255; // G
-				buffer[(i * W + j) * 4 + 2] = normVal * 255; // B
-				buffer[(i * W + j) * 4 + 3] = 255;           // A
-			}
-		}
+        buffer[(i * W + j) * 4 + 0] = normVal * 255; // R
+        buffer[(i * W + j) * 4 + 1] = normVal * 255; // G
+        buffer[(i * W + j) * 4 + 2] = normVal * 255; // B
+        buffer[(i * W + j) * 4 + 3] = 255; // A
+      }
+    }
 
-		const imgData = new ImageData(buffer, W, H);
-		activationImgDatas.push(imgData);
-	}
+    const imgData = new ImageData(buffer, W, H);
+    activationImgDatas.push(imgData);
+  }
 
-	return activationImgDatas;
+  return activationImgDatas;
 }
 
 function imgDataToSrc(imgData) {
-	const canvas = document.createElement('canvas');
-	canvas.width = imgData.width;
-	canvas.height = imgData.height;
-	const ctx = canvas.getContext('2d');
-	ctx.putImageData(imgData, 0, 0);
-	return canvas.toDataURL();
+  const canvas = document.createElement('canvas');
+  canvas.width = imgData.width;
+  canvas.height = imgData.height;
+  const ctx = canvas.getContext('2d');
+  ctx.putImageData(imgData, 0, 0);
+  return canvas.toDataURL();
 }
 
 function MaxPoolLayerViewer(props) {
-	const [batchSize, H, W, C] = props.shape;
+  const [batchSize, H, W, C] = props.shape;
 
-	const activations = useMemo(() => {
+  const activations = useMemo(() => {
     return extractActivationMaps(props.output, H, W, C);
   }, [props.output]);
 
-	const activationSrcs = useMemo(() => {
+  const activationSrcs = useMemo(() => {
     return activations.map(imgDataToSrc);
   }, [activations]);
 
-	return (
-		<div className="layer-viewer">
-		  <h3 className="layer-title">MaxPool Layer</h3>
+  return (
+    <div className="layer-viewer">
+      <h3 className="layer-title">MaxPool Layer</h3>
 
       <div className="layer-details">
-        <div><strong>Pool Size:</strong> {props.size}x{props.size}</div>
-        <div><strong>Stride:</strong> {props.stride}</div>
+        <div>
+          <strong>Pool Size:</strong> {props.size}x{props.size}
+        </div>
+        <div>
+          <strong>Stride:</strong> {props.stride}
+        </div>
       </div>
 
       <h4>Outputs (min-max normalized)</h4>
       <div className="layer-grid">
-				{activationSrcs.map((src, idx) => (
-					<img 
-						key={`${props.key}-${idx}-output`} 
-						src={src} 
-						alt={`Output ${idx}`} 
-					/>
-				))}
+        {activationSrcs.map((src, idx) => (
+          <img
+            key={`${props.key}-${idx}-output`}
+            src={src}
+            alt={`Output ${idx}`}
+          />
+        ))}
       </div>
     </div>
-	);
+  );
 }
 
 export default MaxPoolLayerViewer;

src/components/network/NetworkViewer.jsx

@@ -4,27 +4,23 @@ import Plot from 'react-plotly.js';
 function NetworkViewer(props) {
   return (
     <div>
-			<p>Training status: {
-				props.isTraining
-					? "Running"
-					: "Not running"
-			}</p>
-			<Plot
-				data={[
-					{
-						x: props.losses.map((_, i) => i),
-						y: props.losses.map(l => l.loss),
-						mode: "lines",
-						type: "scatter"
-					}
-				]}
-				layout={{
-					xaxis: { title: { text: "Training steps" } },
-					yaxis: { title: { text: "Train loss" } },
-				}}
-			/>
-			<InfoViewer 
-        info={props.info} 
+      <p>Training status: {props.isTraining ? 'Running' : 'Not running'}</p>
+      <Plot
+        data={[
+          {
+            x: props.losses.map((_, i) => i),
+            y: props.losses.map((l) => l.loss),
+            mode: 'lines',
+            type: 'scatter',
+          },
+        ]}
+        layout={{
+          xaxis: { title: { text: 'Training steps' } },
+          yaxis: { title: { text: 'Train loss' } },
+        }}
+      />
+      <InfoViewer
+        info={props.info}
         onSampleIndexChange={props.onSampleIndexChange}
         tick={props.tick}
       />

src/components/network/NetworkVisualizer.jsx

@@ -1,25 +1,22 @@
 import * as tf from '@tensorflow/tfjs';
 import { useState, useEffect, useRef } from 'react';
-import NetworkViewer from "./NetworkViewer.jsx";
-import Sidebar from "./Sidebar.jsx";
-import { load, train, Cnn } from "./train.js";
+import NetworkViewer from './NetworkViewer.jsx';
+import Sidebar from './Sidebar.jsx';
+import { load, train, Cnn } from './train.js';
 import './NetworkVisualizer.css';
 
-const DEFAULT_ARCHITECTURE = (
-`[conv2d filters=8 kernel=11 
+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]`
-);
-
+[dense units=10 activation=softmax]`;
 
 function parseValue(raw) {
   // Try to parse as number; if NaN, keep as string
-  if (raw.trim() === "") {
+  if (raw.trim() === '') {
     return raw;
   }
 
@@ -51,15 +48,15 @@ function parseArchitecture(text) {
 
     for (let i = 1; i < tokens.length; ++i) {
       const token = tokens[i];
-      const [rawKey, rawValue] = token.split("=", 2);
+      const [rawKey, rawValue] = token.split('=', 2);
 
       if (!rawKey || rawValue === undefined) continue;
 
       let key = rawKey;
       let value = parseValue(rawValue);
 
-      if (key === "activation") {
-        key = "activationType";
+      if (key === 'activation') {
+        key = 'activationType';
       }
 
       layer[key] = value;
@@ -76,151 +73,149 @@ function NetworkVisualizer() {
   const [tick, setTick] = useState(0);
 
   // dataset states
-  const [dataset, setDataset] = useState("mnist");
+  const [dataset, setDataset] = useState('mnist');
   const [imageSize, setImageSize] = useState(28);
   const [numClasses, setNumClasses] = useState(10);
-	const [data, setData] = useState(null);
+  const [data, setData] = useState(null);
 
   // optimization states
-	const [optimizerType, setOptimizerType] = useState("adam");
-  const [optimizerParams, setOptimizerParams] = useState(
-    {
-      learningRate: "0.001",
-      beta1: "0.9",
-      beta2: "0.999",
-      epsilon: "1e-8",
-      batchSize: "32",
-      epochs: "5",
-    }
-  );
-  
+  const [optimizerType, setOptimizerType] = useState('adam');
+  const [optimizerParams, setOptimizerParams] = useState({
+    learningRate: '0.001',
+    beta1: '0.9',
+    beta2: '0.999',
+    epsilon: '1e-8',
+    batchSize: '32',
+    epochs: '5',
+  });
+
   // architecture states
   const [architecture, setArchitecture] = useState(DEFAULT_ARCHITECTURE);
 
   // training states
-	const [isTraining, setIsTraining] = useState(false);
+  const [isTraining, setIsTraining] = useState(false);
   const lossesRef = useRef([]);
-	const trainController = useRef({
-		isPaused: false,
-		stopRequested: false,
-		sampleIndex: 0,
-	});
+  const trainController = useRef({
+    isPaused: false,
+    stopRequested: false,
+    sampleIndex: 0,
+  });
   const modelRef = useRef(null);
   const optimizerRef = useRef(null);
 
-	// training visualization
+  // training visualization
   const infoRef = useRef([]);
 
-	// init dataset
-	useEffect(() => {
-		async function loadData() {
-			const d = await load(dataset);
-			setData(d);
-		}
-		loadData();
-	}, [dataset]);
-
-	// init model
-	useEffect(() => {
-		resetModel();
+  // init dataset
+  useEffect(() => {
+    async function loadData() {
+      const d = await load(dataset);
+      setData(d);
+    }
+    loadData();
+  }, [dataset]);
+
+  // init model
+  useEffect(() => {
+    resetModel();
     resetOptimizer();
-	}, [architecture, data, optimizerType, optimizerParams]);
-
-	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(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.");
+  }, [architecture, data, optimizerType, optimizerParams]);
+
+  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((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();
+    resetModel();
     resetOptimizer();
-	}
+  }
 
-	function resetModel() {
-		if (!data) {
-			return;
-		}
+  function resetModel() {
+    if (!data) {
+      return;
+    }
 
     if (modelRef.current) {
       modelRef.current.dispose();
     }
 
-		const inChannels = data.numInputChannels;
-		const cnn = new Cnn(parseArchitecture(architecture), inChannels);
+    const inChannels = data.numInputChannels;
+    const cnn = new Cnn(parseArchitecture(architecture), inChannels);
     modelRef.current = cnn;
     updateTick();
-	}
+  }
 
   function resetOptimizer() {
-    if (optimizerType === "adam") {
+    if (optimizerType === 'adam') {
       const learningRate = parseFloat(optimizerParams.learningRate);
       const beta1 = parseFloat(optimizerParams.beta1);
       const beta2 = parseFloat(optimizerParams.beta2);
       const epsilon = parseFloat(optimizerParams.epsilon);
 
       if (Number.isNaN(learningRate) || learningRate <= 0) {
-        alert("Invalid learning rate for Adam optimizer.");
+        alert('Invalid learning rate for Adam optimizer.');
         return;
       }
       if (Number.isNaN(beta1) || beta1 < 0) {
-        alert("Invalid beta1 for Adam optimizer.");
+        alert('Invalid beta1 for Adam optimizer.');
         return;
       }
       if (Number.isNaN(beta2) || beta2 < 0) {
-        alert("Invalid beta2 for Adam optimizer.");
+        alert('Invalid beta2 for Adam optimizer.');
         return;
       }
       if (Number.isNaN(epsilon) || epsilon <= 0) {
-        alert("Invalid epsilon for Adam optimizer.");
+        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") {
+    } else if (optimizerType === 'sgd') {
       const learningRate = parseFloat(optimizerParams.learningRate);
       if (Number.isNaN(learningRate) || learningRate <= 0) {
-        alert("Invalid learning rate for SGD optimizer.");
+        alert('Invalid learning rate for SGD optimizer.');
         return;
       }
 
@@ -234,42 +229,39 @@ function NetworkVisualizer() {
     }
   }
 
-	async function startTraining() {
-		if (!modelRef || !data || !optimizerRef || isTraining) {
-			return;
-		}
+  async function startTraining() {
+    if (!modelRef || !data || !optimizerRef || isTraining) {
+      return;
+    }
 
-		setIsTraining(true);
-		trainController.current.isPaused = false;
-		trainController.current.stopRequested = false;
+    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.");
+      alert('Invalid batch size.');
       setIsTraining(false);
       return;
     }
     const epochs = parseFloat(optimizerParams.epochs);
     if (Number.isNaN(epochs) || epochs <= 0) {
-      alert("Invalid number of epochs.");
+      alert('Invalid number of epochs.');
       setIsTraining(false);
       return;
     }
 
     let lastTickUpdate = 0;
-		try {
-			await train(
-				data,
-				modelRef.current,
-				optimizerRef.current,
+    try {
+      await train(
+        data,
+        modelRef.current,
+        optimizerRef.current,
         batchSize,
         epochs,
-				trainController.current,
+        trainController.current,
         (epoch, batch, loss, info) => {
-
-          lossesRef.current.push(
-            { epoch, batch, loss }
-          );
+          lossesRef.current.push({ epoch, batch, loss });
 
           infoRef.current = info;
 
@@ -279,19 +271,19 @@ function NetworkVisualizer() {
             lastTickUpdate = now;
             updateTick();
           }
-				}
-			);
-		} finally {
-			setIsTraining(false);
-			trainController.current.isPaused = false;
-			trainController.current.stopRequested = false;
-			alert("Training finished.");
-		}
-	}
+        },
+      );
+    } finally {
+      setIsTraining(false);
+      trainController.current.isPaused = false;
+      trainController.current.stopRequested = false;
+      alert('Training finished.');
+    }
+  }
 
   function handleArchitectureChange(newArchitecture) {
     if (isTraining) {
-      alert("Cannot change architecture while training is in progress.");
+      alert('Cannot change architecture while training is in progress.');
     } else {
       setArchitecture(newArchitecture);
     }
@@ -299,7 +291,7 @@ function NetworkVisualizer() {
 
   function handleOptimizerChange(newOptimizerType, newOptimizerParams) {
     if (isTraining) {
-      alert("Cannot change optimizer settings while training is in progress.");
+      alert('Cannot change optimizer settings while training is in progress.');
     } else {
       setOptimizerType(newOptimizerType);
       setOptimizerParams(newOptimizerParams);
@@ -312,33 +304,33 @@ function NetworkVisualizer() {
   }
 
   function updateTick() {
-    setTick(tick => tick + 1);
+    setTick((tick) => tick + 1);
   }
 
   return (
     <div className="network-visualizer">
-      <NetworkViewer 
-				losses={lossesRef.current} 
-				info={infoRef.current}
-				isTraining={isTraining} 
+      <NetworkViewer
+        losses={lossesRef.current}
+        info={infoRef.current}
+        isTraining={isTraining}
         onSampleIndexChange={handleSampleIndexChange}
         tick={tick}
-			/>
-      <Sidebar 
-				onStartTraining={handleStartTraining} 
-				onPauseTraining={handlePauseTraining}
-				onContinueTraining={handleContinueTraining}
-				onStopTraining={handleStopTraining}
-				onResetTraining={handleResetTraining}
-				isTraining={isTraining}
-		    isPaused={trainController.current.isPaused}
-		    architecture={architecture}
-				onArchitectureChange={handleArchitectureChange}
+      />
+      <Sidebar
+        onStartTraining={handleStartTraining}
+        onPauseTraining={handlePauseTraining}
+        onContinueTraining={handleContinueTraining}
+        onStopTraining={handleStopTraining}
+        onResetTraining={handleResetTraining}
+        isTraining={isTraining}
+        isPaused={trainController.current.isPaused}
+        architecture={architecture}
+        onArchitectureChange={handleArchitectureChange}
         optimizerType={optimizerType}
         optimizerParams={optimizerParams}
         onOptimizerChange={handleOptimizerChange}
         tick={tick}
-			/>
+      />
     </div>
   );
 }

src/components/network/OptimizerSettings.jsx

@@ -1,22 +1,21 @@
-import "../../styles.css";
+import '../../styles.css';
 
 const DEFAULT_PARAMS = {
   sgd: {
-    learningRate: "0.01",
-    momentum: "0.0",
-    batchSize: "32",
-    epochs: "5",
+    learningRate: '0.01',
+    momentum: '0.0',
+    batchSize: '32',
+    epochs: '5',
   },
   adam: {
-    learningRate: "0.001",
-    beta1: "0.9",
-    beta2: "0.999",
-    epsilon: "1e-8",
-    batchSize: "32",
-    epochs: "5",
-  }
-}
-
+    learningRate: '0.001',
+    beta1: '0.9',
+    beta2: '0.999',
+    epsilon: '1e-8',
+    batchSize: '32',
+    epochs: '5',
+  },
+};
 
 function handleOptimizerChange(event, onChange) {
   const selectedOptimizer = event.target.value;
@@ -31,7 +30,6 @@ function handleParamChange(param, value, oldParams, optimizerType, onChange) {
   onChange(optimizerType, newParams);
 }
 
-
 function OptimizerSettings(props) {
   return (
     <div className="card">
@@ -46,7 +44,7 @@ function OptimizerSettings(props) {
           <option value="adam">Adam</option>
         </select>
       </div>
-      {props.optimizer === "sgd" && (
+      {props.optimizer === 'sgd' && (
         <>
           <div className="field">
             <label htmlFor="sgd-learning-rate-input">Learning Rate</label>
@@ -54,9 +52,15 @@ function OptimizerSettings(props) {
               id="sgd-learning-rate-input"
               type="text"
               value={props.params.learningRate}
-              onChange={(e) => handleParamChange(
-                'learningRate', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'learningRate',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
           </div>
           <div className="field">
@@ -65,9 +69,15 @@ function OptimizerSettings(props) {
               id="sgd-momentum-input"
               type="text"
               value={props.params.momentum}
-              onChange={(e) => handleParamChange(
-                'momentum', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'momentum',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
           </div>
           <div className="field">
@@ -76,9 +86,15 @@ function OptimizerSettings(props) {
               id="sgd-batch-size-input"
               type="text"
               value={props.params.batchSize}
-              onChange={(e) => handleParamChange(
-                'batchSize', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'batchSize',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
           </div>
           <div className="field">
@@ -87,14 +103,20 @@ function OptimizerSettings(props) {
               id="sgd-epochs-input"
               type="text"
               value={props.params.epochs}
-              onChange={(e) => handleParamChange(
-                'epochs', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'epochs',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
-          </div> 
+          </div>
         </>
       )}
-      {props.optimizer === "adam" && (
+      {props.optimizer === 'adam' && (
         <>
           <div className="field">
             <label htmlFor="adam-learning-rate-input">Learning Rate</label>
@@ -102,9 +124,15 @@ function OptimizerSettings(props) {
               id="adam-learning-rate-input"
               type="text"
               value={props.params.learningRate}
-              onChange={(e) => handleParamChange(
-                'learningRate', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'learningRate',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
           </div>
           <div className="field">
@@ -113,9 +141,15 @@ function OptimizerSettings(props) {
               id="adam-beta1-input"
               type="text"
               value={props.params.beta1}
-              onChange={(e) => handleParamChange(
-                'beta1', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'beta1',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
           </div>
           <div className="field">
@@ -124,9 +158,15 @@ function OptimizerSettings(props) {
               id="adam-beta2-input"
               type="text"
               value={props.params.beta2}
-              onChange={(e) => handleParamChange(
-                'beta2', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'beta2',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
           </div>
           <div className="field">
@@ -135,9 +175,15 @@ function OptimizerSettings(props) {
               id="adam-epsilon-input"
               type="text"
               value={props.params.epsilon}
-              onChange={(e) => handleParamChange(
-                'epsilon', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'epsilon',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
           </div>
           <div className="field">
@@ -146,9 +192,15 @@ function OptimizerSettings(props) {
               id="adam-batch-size-input"
               type="text"
               value={props.params.batchSize}
-              onChange={(e) => handleParamChange(
-                'batchSize', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'batchSize',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
           </div>
           <div className="field">
@@ -157,37 +209,33 @@ function OptimizerSettings(props) {
               id="adam-epochs-input"
               type="text"
               value={props.params.epochs}
-              onChange={(e) => handleParamChange(
-                'epochs', e.target.value, props.params, props.optimizer, props.onOptimizerChange
-              )}
+              onChange={(e) =>
+                handleParamChange(
+                  'epochs',
+                  e.target.value,
+                  props.params,
+                  props.optimizer,
+                  props.onOptimizerChange,
+                )
+              }
             />
           </div>
         </>
       )}
-			{ !props.isTraining && (
-				<>
-					<button onClick={props.onStartTraining}>
-						Start Training
-					</button>
-					<button onClick={props.onResetTraining}>
-						Reset Training
-					</button>
-				</>
-			)}
-			{ props.isTraining && (
-				<>
-					<button onClick={props.onPauseTraining}>
-						Pause Training
-					</button>
-					<button onClick={props.onContinueTraining}>
-						Continue Training
-					</button>
-					<button onClick={props.onStopTraining}>
-						Stop Training
-					</button>
-				</>
-			)}
-    </div> 
+      {!props.isTraining && (
+        <>
+          <button onClick={props.onStartTraining}>Start Training</button>
+          <button onClick={props.onResetTraining}>Reset Training</button>
+        </>
+      )}
+      {props.isTraining && (
+        <>
+          <button onClick={props.onPauseTraining}>Pause Training</button>
+          <button onClick={props.onContinueTraining}>Continue Training</button>
+          <button onClick={props.onStopTraining}>Stop Training</button>
+        </>
+      )}
+    </div>
   );
 }
 

src/components/network/OutputLayerViewer.jsx

@@ -1,4 +1,4 @@
-import "./LayerViewer.css";
+import './LayerViewer.css';
 
 function OutputLayerViewer(props) {
   const probs = props.probs;
@@ -9,14 +9,16 @@ function OutputLayerViewer(props) {
       <h3 className="layer-title">Output Layer (softmax)</h3>
 
       <div className="layer-details">
-        <div><strong>Number of Classes:</strong> {numClasses}</div>
+        <div>
+          <strong>Number of Classes:</strong> {numClasses}
+        </div>
       </div>
 
       <h4>Class Probabilities</h4>
       <div className="layer-grid output-layer-grid">
         {Array.from({ length: numClasses }).map((_, i) => (
           <div key={i} className="output-class-probability">
-            <strong>Class {i}:</strong> {(probs[i]).toFixed(2)}
+            <strong>Class {i}:</strong> {probs[i].toFixed(2)}
           </div>
         ))}
       </div>
@@ -24,5 +26,4 @@ function OutputLayerViewer(props) {
   );
 }
 
-
 export default OutputLayerViewer;

src/components/network/Sidebar.jsx

@@ -1,15 +1,15 @@
-import Tabs from "../Tabs/Tabs.jsx";
-import Button from "../Button/Button.jsx";
-import ArchitectureEditor from "./ArchitectureEditor.jsx";
-import OptimizerSettings from "./OptimizerSettings.jsx";
+import Tabs from '../Tabs/Tabs.jsx';
+import Button from '../Button/Button.jsx';
+import ArchitectureEditor from './ArchitectureEditor.jsx';
+import OptimizerSettings from './OptimizerSettings.jsx';
 
 function Sidebar(props) {
   const tabData = [
     {
-      label: "Dataset",
+      label: 'Dataset',
       content: (
         <div>
-          Dataset: 
+          Dataset:
           <select value="mnist">
             <option value="mnist">MNIST</option>
             <option value="cifar-10">CIFAR-10</option>
@@ -18,40 +18,37 @@ function Sidebar(props) {
       ),
     },
     {
-      label: "Architecture",
+      label: 'Architecture',
       content: (
-				<ArchitectureEditor 
-					architecture={props.architecture}
-					onChange={props.onArchitectureChange}
-				/>
-			),
+        <ArchitectureEditor
+          architecture={props.architecture}
+          onChange={props.onArchitectureChange}
+        />
+      ),
     },
     {
-      label: "Optimize",
+      label: 'Optimize',
       content: (
-				<>
-					<OptimizerSettings 
-						optimizer={props.optimizerType}
-						params={props.optimizerParams}
-						onOptimizerChange={props.onOptimizerChange}
-						onStartTraining={props.onStartTraining}
-				    onResetTraining={props.onResetTraining}
-				    onPauseTraining={props.onPauseTraining}
-				    onContinueTraining={props.onContinueTraining}
-				    onStopTraining={props.onStopTraining}
-				    isTraining={props.isTraining}
-					/>
-				</>
+        <>
+          <OptimizerSettings
+            optimizer={props.optimizerType}
+            params={props.optimizerParams}
+            onOptimizerChange={props.onOptimizerChange}
+            onStartTraining={props.onStartTraining}
+            onResetTraining={props.onResetTraining}
+            onPauseTraining={props.onPauseTraining}
+            onContinueTraining={props.onContinueTraining}
+            onStopTraining={props.onStopTraining}
+            isTraining={props.isTraining}
+          />
+        </>
       ),
     },
   ];
 
   return (
     <div className="sidebar">
-      <Tabs
-        defaultTab="Dataset"
-        tabs={tabData}
-      />
+      <Tabs defaultTab="Dataset" tabs={tabData} />
     </div>
   );
 }

src/components/network/old/AccPlot.jsx

@@ -1,4 +1,4 @@
-import Plot from "react-plotly.js";
+import Plot from 'react-plotly.js';
 
 function AccPlot(props) {
   return (
@@ -7,33 +7,33 @@ function AccPlot(props) {
         {
           x: props.epochs,
           y: props.acc,
-          type: "scatter",
-          mode: "lines",
-          name: "Training Accuracy",
-          line: { color: "red" },
-					xlabel: "Epochs",
-					ylabel: "Accuracy"
+          type: 'scatter',
+          mode: 'lines',
+          name: 'Training Accuracy',
+          line: { color: 'red' },
+          xlabel: 'Epochs',
+          ylabel: 'Accuracy',
         },
         {
           x: props.epochs,
           y: props.valAcc,
-          type: "scatter",
-          mode: "lines",
-          name: "Validation Accuracy",
-          line: { color: "orange" },
-					xlabel: "Epochs",
-					ylabel: "Accuracy"
+          type: 'scatter',
+          mode: 'lines',
+          name: 'Validation Accuracy',
+          line: { color: 'orange' },
+          xlabel: 'Epochs',
+          ylabel: 'Accuracy',
         },
       ]}
       layout={{
-        title: "Training Curves",
+        title: 'Training Curves',
         autosize: true,
-        xaxis: { title: "Epoch" },
-        yaxis: { title: "Value" },
-        legend: { orientation: "h" },
+        xaxis: { title: 'Epoch' },
+        yaxis: { title: 'Value' },
+        legend: { orientation: 'h' },
         margin: { t: 0 },
       }}
-      style={{ width: "100%", height: "100%" }}
+      style={{ width: '100%', height: '100%' }}
       useResizeHandler={true}
     />
   );

src/components/network/old/ActivationViewer.jsx

@@ -1,21 +1,17 @@
-import "./ActivationViewer.css";
+import './ActivationViewer.css';
 
 function ActivationViewer(props) {
   return (
     <div className="activations">
-        {props.sampleImage && (
-          <div>
-            <div className="sample-header">
-              <h3>Sample Input</h3>
-              <button
-                onClick={props.onSampleChange}
-              >
-                Change
-              </button>
-            </div>
-            <img src={props.sampleImage} alt="Sample Input" />
+      {props.sampleImage && (
+        <div>
+          <div className="sample-header">
+            <h3>Sample Input</h3>
+            <button onClick={props.onSampleChange}>Change</button>
           </div>
-        )}
+          <img src={props.sampleImage} alt="Sample Input" />
+        </div>
+      )}
 
       {props.activations &&
         props.activations.length > 0 &&
@@ -24,11 +20,7 @@ function ActivationViewer(props) {
             <h3>Layer {i + 1} Activations</h3>
             <div className="activation-maps">
               {layer.map((map, j) => (
-                <img
-                  key={j}
-                  src={map}
-                  alt={`Layer ${i + 1} Map ${j + 1}`}
-                />
+                <img key={j} src={map} alt={`Layer ${i + 1} Map ${j + 1}`} />
               ))}
             </div>
           </div>

src/components/network/old/ArchitectureEditor.css

@@ -1,69 +1,69 @@
 .cnn-editor {
-max-width: 700px;
-margin: 20px auto;
-font-family: sans-serif;
+  max-width: 700px;
+  margin: 20px auto;
+  font-family: sans-serif;
 }
 
 .layers {
-display: flex;
-flex-direction: column;
-gap: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
 
 .layer-card {
-border: 1px solid #ccc;
-padding: 15px;
-border-radius: 10px;
-background: #fafafa;
+  border: 1px solid #ccc;
+  padding: 15px;
+  border-radius: 10px;
+  background: #fafafa;
 }
 
 .layer-header {
-display: flex;
-justify-content: space-between;
-margin-bottom: 12px;
+  display: flex;
+  justify-content: space-between;
+  margin-bottom: 12px;
 }
 
 .layer-grid {
-display: grid;
-grid-template-columns: 1fr 1fr;
-gap: 10px 20px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 10px 20px;
 }
 
 .field {
-display: flex;
-flex-direction: column;
+  display: flex;
+  flex-direction: column;
 }
 
 .field label {
-font-size: 12px;
-margin-bottom: 4px;
-color: #555;
+  font-size: 12px;
+  margin-bottom: 4px;
+  color: #555;
 }
 
 .field input,
 .field select {
-padding: 5px;
-border-radius: 5px;
-border: 1px solid #ccc;
+  padding: 5px;
+  border-radius: 5px;
+  border: 1px solid #ccc;
 }
 
 .add-btn {
-margin-top: 20px;
-padding: 12px;
-width: 100%;
-background: #4caf50;
-border: none;
-color: white;
-font-size: 16px;
-border-radius: 8px;
-cursor: pointer;
+  margin-top: 20px;
+  padding: 12px;
+  width: 100%;
+  background: #4caf50;
+  border: none;
+  color: white;
+  font-size: 16px;
+  border-radius: 8px;
+  cursor: pointer;
 }
 
 .remove-btn {
-background: #ff4444;
-border: none;
-padding: 6px 10px;
-color: white;
-border-radius: 5px;
-cursor: pointer;
+  background: #ff4444;
+  border: none;
+  padding: 6px 10px;
+  color: white;
+  border-radius: 5px;
+  cursor: pointer;
 }

src/components/network/old/ArchitectureEditor.jsx

@@ -1,40 +1,40 @@
-import { useState } from "react";
-import "./ArchitectureEditor.css";
+import { useState } from 'react';
+import './ArchitectureEditor.css';
 
 function ArchitectureEditor() {
   const [layers, setLayers] = useState([
     {
-      type: "conv",
+      type: 'conv',
       kernelSize: 5,
       filters: 8,
       stride: 1,
       padding: 1,
-      activation: "relu",
+      activation: 'relu',
     },
     {
-      type: "maxpool",
+      type: 'maxpool',
       kernelSize: 2,
       stride: 2,
       padding: 0,
     },
     {
-      type: "conv",
+      type: 'conv',
       kernelSize: 5,
       filters: 16,
       stride: 1,
       padding: 1,
-      activation: "relu",
+      activation: 'relu',
     },
     {
-      type: "maxpool",
+      type: 'maxpool',
       kernelSize: 2,
       stride: 2,
       padding: 0,
     },
     {
-      type: "dense",
+      type: 'dense',
       units: 10,
-      activation: "softmax",
+      activation: 'softmax',
     },
   ]);
 
@@ -53,12 +53,12 @@ function ArchitectureEditor() {
     setLayers((prev) => [
       ...prev,
       {
-        type: "conv",
+        type: 'conv',
         kernelSize: 3,
         filters: 8,
         stride: 1,
         padding: 1,
-        activation: "relu",
+        activation: 'relu',
       },
     ]);
   }
@@ -71,17 +71,11 @@ function ArchitectureEditor() {
     <div className="cnn-editor">
       <div className="layers">
         {layers.map((layer, index) => (
-          <div
-            key={index}
-            className="layer-card"
-          >
+          <div key={index} className="layer-card">
             <div className="layer-header">
               <strong>Layer {index + 1}</strong>
 
-              <button
-                className="remove-btn"
-                onClick={() => removeLayer(index)}
-              >
+              <button className="remove-btn" onClick={() => removeLayer(index)}>
                 Remove
               </button>
             </div>
@@ -93,9 +87,7 @@ function ArchitectureEditor() {
 
                 <select
                   value={layer.type}
-                  onChange={(e) =>
-                    updateLayer(index, "type", e.target.value)
-                  }
+                  onChange={(e) => updateLayer(index, 'type', e.target.value)}
                 >
                   <option value="conv">Conv</option>
                   <option value="maxpool">Max Pool</option>
@@ -105,7 +97,7 @@ function ArchitectureEditor() {
               </div>
 
               {/* Conv fields */}
-              {layer.type === "conv" && (
+              {layer.type === 'conv' && (
                 <>
                   <div className="field">
                     <label>Filters</label>
@@ -114,7 +106,7 @@ function ArchitectureEditor() {
                       type="number"
                       value={layer.filters}
                       onChange={(e) =>
-                        updateLayer(index, "filters", Number(e.target.value))
+                        updateLayer(index, 'filters', Number(e.target.value))
                       }
                     />
                   </div>
@@ -126,7 +118,7 @@ function ArchitectureEditor() {
                       type="number"
                       value={layer.kernelSize}
                       onChange={(e) =>
-                        updateLayer(index, "kernelSize", Number(e.target.value))
+                        updateLayer(index, 'kernelSize', Number(e.target.value))
                       }
                     />
                   </div>
@@ -138,7 +130,7 @@ function ArchitectureEditor() {
                       type="number"
                       value={layer.stride}
                       onChange={(e) =>
-                        updateLayer(index, "stride", Number(e.target.value))
+                        updateLayer(index, 'stride', Number(e.target.value))
                       }
                     />
                   </div>
@@ -150,7 +142,7 @@ function ArchitectureEditor() {
                       type="number"
                       value={layer.padding}
                       onChange={(e) =>
-                        updateLayer(index, "padding", Number(e.target.value))
+                        updateLayer(index, 'padding', Number(e.target.value))
                       }
                     />
                   </div>
@@ -161,7 +153,7 @@ function ArchitectureEditor() {
                     <select
                       value={layer.activation}
                       onChange={(e) =>
-                        updateLayer(index, "activation", e.target.value)
+                        updateLayer(index, 'activation', e.target.value)
                       }
                     >
                       <option value="relu">ReLU</option>
@@ -174,7 +166,7 @@ function ArchitectureEditor() {
               )}
 
               {/* Pool fields */}
-              {(layer.type === "maxpool" || layer.type === "avgpool") && (
+              {(layer.type === 'maxpool' || layer.type === 'avgpool') && (
                 <>
                   <div className="field">
                     <label>Kernel Size</label>
@@ -183,7 +175,7 @@ function ArchitectureEditor() {
                       type="number"
                       value={layer.kernelSize}
                       onChange={(e) =>
-                        updateLayer(index, "kernelSize", Number(e.target.value))
+                        updateLayer(index, 'kernelSize', Number(e.target.value))
                       }
                     />
                   </div>
@@ -195,7 +187,7 @@ function ArchitectureEditor() {
                       type="number"
                       value={layer.stride}
                       onChange={(e) =>
-                        updateLayer(index, "stride", Number(e.target.value))
+                        updateLayer(index, 'stride', Number(e.target.value))
                       }
                     />
                   </div>
@@ -207,7 +199,7 @@ function ArchitectureEditor() {
                       type="number"
                       value={layer.padding}
                       onChange={(e) =>
-                        updateLayer(index, "padding", Number(e.target.value))
+                        updateLayer(index, 'padding', Number(e.target.value))
                       }
                     />
                   </div>
@@ -215,7 +207,7 @@ function ArchitectureEditor() {
               )}
 
               {/* Dense fields */}
-              {layer.type === "dense" && (
+              {layer.type === 'dense' && (
                 <>
                   <div className="field">
                     <label>Units</label>
@@ -224,7 +216,7 @@ function ArchitectureEditor() {
                       type="number"
                       value={layer.units}
                       onChange={(e) =>
-                        updateLayer(index, "units", Number(e.target.value))
+                        updateLayer(index, 'units', Number(e.target.value))
                       }
                     />
                   </div>
@@ -235,7 +227,7 @@ function ArchitectureEditor() {
                     <select
                       value={layer.activation}
                       onChange={(e) =>
-                        updateLayer(index, "activation", e.target.value)
+                        updateLayer(index, 'activation', e.target.value)
                       }
                     >
                       <option value="relu">ReLU</option>
@@ -252,10 +244,7 @@ function ArchitectureEditor() {
         ))}
       </div>
 
-      <button
-        className="add-btn"
-        onClick={addLayer}
-      >
+      <button className="add-btn" onClick={addLayer}>
         + Add Layer
       </button>
     </div>

src/components/network/old/KernelViewer.jsx

@@ -7,4 +7,3 @@ function KernelViewer() {
 }
 
 export default KernelViewer;
-

src/components/network/old/LossPlot.jsx

@@ -1,38 +1,38 @@
-import Plot from "react-plotly.js";
-
-function LossPlot(props) {
-  return (
-    <Plot
-      data={[
-        {
-          x: props.epochs,
-          y: props.loss,
-          type: "scatter",
-          mode: "lines",
-          name: "Training Loss",
-          line: { color: "red" },
-        },
-        {
-          x: props.epochs,
-          y: props.valLoss,
-          type: "scatter",
-          mode: "lines",
-          name: "Validation Loss",
-          line: { color: "orange" },
-        },
-      ]}
-      layout={{
-        title: "Training Curves",
-        autosize: true,
-        xaxis: { title: "Epoch" },
-        yaxis: { title: "Cross Entropy Loss" },
-        legend: { orientation: "h" },
-        margin: { t: 0 },
-      }}
-      style={{ width: "100%", height: "100%" }}
-      useResizeHandler={true}
-    />
-  );
-}
-
-export default LossPlot;
+import Plot from 'react-plotly.js';
+
+function LossPlot(props) {
+  return (
+    <Plot
+      data={[
+        {
+          x: props.epochs,
+          y: props.loss,
+          type: 'scatter',
+          mode: 'lines',
+          name: 'Training Loss',
+          line: { color: 'red' },
+        },
+        {
+          x: props.epochs,
+          y: props.valLoss,
+          type: 'scatter',
+          mode: 'lines',
+          name: 'Validation Loss',
+          line: { color: 'orange' },
+        },
+      ]}
+      layout={{
+        title: 'Training Curves',
+        autosize: true,
+        xaxis: { title: 'Epoch' },
+        yaxis: { title: 'Cross Entropy Loss' },
+        legend: { orientation: 'h' },
+        margin: { t: 0 },
+      }}
+      style={{ width: '100%', height: '100%' }}
+      useResizeHandler={true}
+    />
+  );
+}
+
+export default LossPlot;

src/components/network/old/MnistTrainer.css

@@ -1,8 +1,8 @@
 .mnist-trainer {
-	display: grid;
-	grid-template-columns: 2fr 1fr;
-	gap: 20px;
-	padding: 20px;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 20px;
+  padding: 20px;
 }
 
 .plots {
@@ -10,12 +10,11 @@
 }
 
 .activations {
-	min-width: 0;
+  min-width: 0;
 }
 
 .sidebar {
-	display: flex;
-	flex-direction: column;
-	gap: 20px;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
 }
-

src/components/network/old/MnistTrainer.jsx

@@ -1,22 +1,22 @@
-import { useEffect, useState, useRef } from "react";
-import * as tf from "@tensorflow/tfjs";
-import { MnistData } from "./mnist.js";
-import LossPlot from "./LossPlot.jsx";
-import AccPlot from "./AccPlot.jsx";
-import Tabs from "../utils/Tabs.jsx";
-import ActivationViewer from "./ActivationViewer.jsx";
-import ArchitectureEditor from "./ArchitectureEditor.jsx";
-import KernelViewer from "./KernelViewer.jsx";
-import "./MnistTrainer.css";
+import { useEffect, useState, useRef } from 'react';
+import * as tf from '@tensorflow/tfjs';
+import { MnistData } from './mnist.js';
+import LossPlot from './LossPlot.jsx';
+import AccPlot from './AccPlot.jsx';
+import Tabs from '../utils/Tabs.jsx';
+import ActivationViewer from './ActivationViewer.jsx';
+import ArchitectureEditor from './ArchitectureEditor.jsx';
+import KernelViewer from './KernelViewer.jsx';
+import './MnistTrainer.css';
 
 export default function MnistTrainer() {
   const [data, setData] = useState(null);
   const [model, setModel] = useState(null);
 
-	const [activationModel, setActivationModel] = useState(null);
-	const [activations, setActivations] = useState(null);
-	const [sampleTensor, setSampleTensor] = useState(null);
-	const [sampleImage, setSampleImage] = useState(null);
+  const [activationModel, setActivationModel] = useState(null);
+  const [activations, setActivations] = useState(null);
+  const [sampleTensor, setSampleTensor] = useState(null);
+  const [sampleImage, setSampleImage] = useState(null);
 
   const [epochs, setEpochs] = useState([]);
   const [loss, setLoss] = useState([]);
@@ -24,11 +24,11 @@ export default function MnistTrainer() {
   const [acc, setAcc] = useState([]);
   const [valAcc, setValAcc] = useState([]);
 
-  const [status, setStatus] = useState("Loading MNIST…");
+  const [status, setStatus] = useState('Loading MNIST…');
 
   const progressTabData = [
     {
-      label: "Curves",
+      label: 'Curves',
       content: (
         <div className="plots">
           <LossPlot epochs={epochs} loss={loss} valLoss={valLoss} />
@@ -37,48 +37,38 @@ export default function MnistTrainer() {
       ),
     },
     {
-      label: "Activations",
+      label: 'Activations',
       content: (
-        <ActivationViewer 
-          activations={activations} 
+        <ActivationViewer
+          activations={activations}
           sampleImage={sampleImage}
           onSampleChange={handleSampleChange}
         />
       ),
     },
     {
-      label: "Kernels",
-      content: (
-        <KernelViewer 
-        />
-      ),
+      label: 'Kernels',
+      content: <KernelViewer />,
     },
-
   ];
 
   const optionsTabData = [
     {
-      label: "Train",
+      label: 'Train',
       content: (
         <div className="train-options">
           <p>Status: {status}</p>
-          <button
-            onClick={handleTrain}
-            disabled={status === "Loading MNIST…"}
-          >
+          <button onClick={handleTrain} disabled={status === 'Loading MNIST…'}>
             Train Model
           </button>
-          <button
-            onClick={resetModel}
-            disabled={status === "Loading MNIST…"}
-          >
+          <button onClick={resetModel} disabled={status === 'Loading MNIST…'}>
             Reset Model
           </button>
         </div>
       ),
     },
     {
-      label: "Architecture",
+      label: 'Architecture',
       content: (
         <div>
           <ArchitectureEditor />
@@ -86,13 +76,13 @@ export default function MnistTrainer() {
       ),
     },
     {
-      label: "Optimization",
+      label: 'Optimization',
       content: (
         <div>
           <p>Optimization options will go here.</p>
         </div>
       ),
-    }
+    },
   ];
 
   function handleSampleChange() {
@@ -109,27 +99,27 @@ export default function MnistTrainer() {
     });
   }
 
-	async function load() {
-		const d = new MnistData();
-		await d.load();
-		setData(d);
+  async function load() {
+    const d = new MnistData();
+    await d.load();
+    setData(d);
 
-		const m = createModel();
-		setModel(m);
-		const aModel = createActivationModel(m);
-		setActivationModel(aModel);
+    const m = createModel();
+    setModel(m);
+    const aModel = createActivationModel(m);
+    setActivationModel(aModel);
 
-		const sample = d.nextTestBatch(1);
-		const sampleImg = sample.xs.reshape([1, 28, 28, 1]);
+    const sample = d.nextTestBatch(1);
+    const sampleImg = sample.xs.reshape([1, 28, 28, 1]);
 
-		setSampleTensor(sampleImg);
+    setSampleTensor(sampleImg);
 
-		tensorToImageUrl(sampleImg).then((url) => {
-			setSampleImage(url);
-		});
+    tensorToImageUrl(sampleImg).then((url) => {
+      setSampleImage(url);
+    });
 
-		setStatus("Ready");
-	}
+    setStatus('Ready');
+  }
 
   useEffect(() => {
     load();
@@ -143,9 +133,9 @@ export default function MnistTrainer() {
         inputShape: [28, 28, 1],
         kernelSize: 5,
         filters: 8,
-        activation: "relu",
-        kernelInitializer: "varianceScaling",
-      })
+        activation: 'relu',
+        kernelInitializer: 'varianceScaling',
+      }),
     );
 
     model.add(tf.layers.maxPooling2d({ poolSize: [2, 2], strides: [2, 2] }));
@@ -154,74 +144,67 @@ export default function MnistTrainer() {
       tf.layers.conv2d({
         kernelSize: 5,
         filters: 16,
-        activation: "relu",
-        kernelInitializer: "varianceScaling",
-      })
+        activation: 'relu',
+        kernelInitializer: 'varianceScaling',
+      }),
     );
 
     model.add(tf.layers.maxPooling2d({ poolSize: [2, 2], strides: [2, 2] }));
 
     model.add(tf.layers.flatten());
 
-    model.add(tf.layers.dense({ units: 10, activation: "softmax" }));
+    model.add(tf.layers.dense({ units: 10, activation: 'softmax' }));
 
     model.compile({
       optimizer: tf.train.adam(),
-      loss: "categoricalCrossentropy",
-      metrics: ["accuracy"],
+      loss: 'categoricalCrossentropy',
+      metrics: ['accuracy'],
     });
 
     return model;
   }
 
-	function createActivationModel(model) {
-		const layerOutputs = model.layers
-		  .filter((layer) => layer.name.includes("conv"))
-			.map((layer) => layer.output);
-		return tf.model({ inputs: model.input, outputs: layerOutputs });
-	}
-
-	async function tensorToImageUrl(tensor) {
-		// tensor must be shape [1, 28, 28, 1] or [28, 28]
-		const squeezed = tensor.squeeze(); 
-	
-		const canvas = document.createElement("canvas");
-		canvas.width = squeezed.shape[0];
-		canvas.height = squeezed.shape[1];
-	
-		await tf.browser.toPixels(squeezed, canvas);
-	
-		return canvas.toDataURL(); 
-	}
+  function createActivationModel(model) {
+    const layerOutputs = model.layers
+      .filter((layer) => layer.name.includes('conv'))
+      .map((layer) => layer.output);
+    return tf.model({ inputs: model.input, outputs: layerOutputs });
+  }
+
+  async function tensorToImageUrl(tensor) {
+    // tensor must be shape [1, 28, 28, 1] or [28, 28]
+    const squeezed = tensor.squeeze();
 
+    const canvas = document.createElement('canvas');
+    canvas.width = squeezed.shape[0];
+    canvas.height = squeezed.shape[1];
+
+    await tf.browser.toPixels(squeezed, canvas);
+
+    return canvas.toDataURL();
+  }
 
   async function handleTrain() {
     if (!model || !data) {
-			return;
-		}
+      return;
+    }
 
-    setStatus("Preparing training data…");
+    setStatus('Preparing training data…');
 
     const TRAIN_SIZE = 5000;
     const TEST_SIZE = 1000;
 
     const [trainXs, trainYs] = tf.tidy(() => {
       const d = data.nextTrainBatch(TRAIN_SIZE);
-      return [
-        d.xs.reshape([TRAIN_SIZE, 28, 28, 1]),
-        d.labels,
-      ];
+      return [d.xs.reshape([TRAIN_SIZE, 28, 28, 1]), d.labels];
     });
 
     const [testXs, testYs] = tf.tidy(() => {
       const d = data.nextTestBatch(TEST_SIZE);
-      return [
-        d.xs.reshape([TEST_SIZE, 28, 28, 1]),
-        d.labels,
-      ];
+      return [d.xs.reshape([TEST_SIZE, 28, 28, 1]), d.labels];
     });
 
-    setStatus("Training…");
+    setStatus('Training…');
 
     setEpochs([]);
     setLoss([]);
@@ -237,51 +220,49 @@ export default function MnistTrainer() {
 
       callbacks: {
         onBatchEnd: async (batch, logs) => {
-          setStatus(
-            `Training: epoch ${currentEpoch + 1} batch ${batch + 1}`
-          );
+          setStatus(`Training: epoch ${currentEpoch + 1} batch ${batch + 1}`);
 
           if (conv) {
             console.log(kernel);
             kernel.dispose();
           }
 
-					if (activationModel && sampleTensor) {
-						const acts = activationModel.predict(sampleTensor);
-
-						const allMaps = await Promise.all(
-							acts.map(async (act) => {
-								const [b, h, w, c] = act.shape;
-								const maps = [];
-								const slice = act.squeeze();
-
-								for (let i = 0; i < c; ++i) {
-									const channel = slice
-										.slice([0, 0, i], [h, w, 1])
-										.reshape([h, w]);
-
-									const min = channel.min();
-									const max = channel.max();
-									const range = max.sub(min);
-
-									let norm = channel.sub(min);
-									if (range.dataSync()[0] !== 0) {
-										norm = norm.div(range);
-									}
-
-									const canvas = document.createElement("canvas");
-									canvas.width = w;
-									canvas.height = h;
-									await tf.browser.toPixels(norm, canvas);
-									maps.push(canvas.toDataURL());
-								}
-								return maps;
-							})
-						);
-
-						setActivations(allMaps);
-					}
-  
+          if (activationModel && sampleTensor) {
+            const acts = activationModel.predict(sampleTensor);
+
+            const allMaps = await Promise.all(
+              acts.map(async (act) => {
+                const [b, h, w, c] = act.shape;
+                const maps = [];
+                const slice = act.squeeze();
+
+                for (let i = 0; i < c; ++i) {
+                  const channel = slice
+                    .slice([0, 0, i], [h, w, 1])
+                    .reshape([h, w]);
+
+                  const min = channel.min();
+                  const max = channel.max();
+                  const range = max.sub(min);
+
+                  let norm = channel.sub(min);
+                  if (range.dataSync()[0] !== 0) {
+                    norm = norm.div(range);
+                  }
+
+                  const canvas = document.createElement('canvas');
+                  canvas.width = w;
+                  canvas.height = h;
+                  await tf.browser.toPixels(norm, canvas);
+                  maps.push(canvas.toDataURL());
+                }
+                return maps;
+              }),
+            );
+
+            setActivations(allMaps);
+          }
+
           await tf.nextFrame();
         },
 
@@ -295,7 +276,7 @@ export default function MnistTrainer() {
         },
 
         onTrainEnd: () => {
-        	setStatus("Training complete");
+          setStatus('Training complete');
         },
       },
     });
@@ -306,44 +287,43 @@ export default function MnistTrainer() {
     testYs.dispose();
   }
 
-	async function resetModel() {
-		setStatus("Resetting...");
+  async function resetModel() {
+    setStatus('Resetting...');
 
-		await stopModel();
+    await stopModel();
 
-		setEpochs([]);
-		setLoss([]);
-		setValLoss([]);
-		setAcc([]);
-		setValAcc([]);
-		setActivations(null);
+    setEpochs([]);
+    setLoss([]);
+    setValLoss([]);
+    setAcc([]);
+    setValAcc([]);
+    setActivations(null);
 
-		await load();
-	}
+    await load();
+  }
 
-	async function stopModel() {
-		setStatus("Stopping...");
+  async function stopModel() {
+    setStatus('Stopping...');
 
-		if (model) {
-			model.stopTraining = true;
-		}
+    if (model) {
+      model.stopTraining = true;
+    }
 
-		await new Promise((resolve) => setTimeout(resolve, 50));
-		
-		setModel(null);
-		setActivationModel(null);
-	}
+    await new Promise((resolve) => setTimeout(resolve, 50));
+
+    setModel(null);
+    setActivationModel(null);
+  }
 
   return (
     <div className="mnist-trainer">
-			<div className="progress-section">
+      <div className="progress-section">
         <Tabs tabs={progressTabData} defaultTab="Curves" />
-			</div>
+      </div>
 
-			<div className="sidebar">
+      <div className="sidebar">
         <Tabs tabs={optionsTabData} defaultTab="Train" />
-			</div>
+      </div>
     </div>
   );
 }
-

src/components/network/old/mnist.js

@@ -27,9 +27,9 @@ 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';
+  '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';
+  'https://storage.googleapis.com/learnjs-data/model-builder/mnist_labels_uint8';
 
 /**
  * A class that fetches the sprited MNIST dataset and returns shuffled batches.
@@ -54,8 +54,9 @@ export class MnistData {
         img.width = img.naturalWidth;
         img.height = img.naturalHeight;
 
-        const datasetBytesBuffer =
-            new ArrayBuffer(NUM_DATASET_ELEMENTS * IMAGE_SIZE * 4);
+        const datasetBytesBuffer = new ArrayBuffer(
+          NUM_DATASET_ELEMENTS * IMAGE_SIZE * 4,
+        );
 
         const chunkSize = 5000;
         canvas.width = img.width;
@@ -63,11 +64,21 @@ export class MnistData {
 
         for (let i = 0; i < NUM_DATASET_ELEMENTS / chunkSize; i++) {
           const datasetBytesView = new Float32Array(
-              datasetBytesBuffer, i * IMAGE_SIZE * chunkSize * 4,
-              IMAGE_SIZE * chunkSize);
+            datasetBytesBuffer,
+            i * IMAGE_SIZE * chunkSize * 4,
+            IMAGE_SIZE * chunkSize,
+          );
           ctx.drawImage(
-              img, 0, i * chunkSize, img.width, chunkSize, 0, 0, img.width,
-              chunkSize);
+            img,
+            0,
+            i * chunkSize,
+            img.width,
+            chunkSize,
+            0,
+            0,
+            img.width,
+            chunkSize,
+          );
 
           const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
@@ -85,8 +96,10 @@ export class MnistData {
     });
 
     const labelsRequest = fetch(MNIST_LABELS_PATH);
-    const [imgResponse, labelsResponse] =
-        await Promise.all([imgRequest, labelsRequest]);
+    const [imgResponse, labelsResponse] = await Promise.all([
+      imgRequest,
+      labelsRequest,
+    ]);
 
     this.datasetLabels = new Uint8Array(await labelsResponse.arrayBuffer());
 
@@ -96,28 +109,36 @@ export class MnistData {
     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.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);
+    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];
-        });
+      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;
+        (this.shuffledTestIndex + 1) % this.testIndices.length;
       return this.testIndices[this.shuffledTestIndex];
     });
   }
@@ -129,18 +150,22 @@ export class MnistData {
     for (let i = 0; i < batchSize; i++) {
       const idx = index();
 
-      const image =
-          data[0].slice(idx * IMAGE_SIZE, idx * IMAGE_SIZE + IMAGE_SIZE);
+      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);
+      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};
+    return { xs, labels };
   }
 }

src/components/network/train.js

@@ -2,14 +2,14 @@ import * as tf from '@tensorflow/tfjs';
 import { MnistData } from '../../data/mnist.js';
 
 async function load(dataset) {
-	let data;
-	if (dataset === "mnist") {
-  	data = new MnistData();
-	} else {
-		throw new Error(`Dataset ${dataset} not supported`);
-	}
+  let data;
+  if (dataset === 'mnist') {
+    data = new MnistData();
+  } else {
+    throw new Error(`Dataset ${dataset} not supported`);
+  }
   await data.load();
-	return data;
+  return data;
 }
 
 class Cnn {
@@ -28,16 +28,15 @@ class Cnn {
         const shape = [layer.kernel, layer.kernel, inChannels, layer.filters];
         const layerWeights = tf.variable(
           tf.randomUniform(
-            shape, 
-            -Math.sqrt(1 / (layer.kernel * layer.kernel * inChannels)), 
-            Math.sqrt(1 / (layer.kernel * layer.kernel * inChannels))
-          )
+            shape,
+            -Math.sqrt(1 / (layer.kernel * layer.kernel * inChannels)),
+            Math.sqrt(1 / (layer.kernel * layer.kernel * inChannels)),
+          ),
         );
 
         weights.push(layerWeights);
         layer.weights = layerWeights;
         inChannels = layer.filters;
-
       } else if (layer.type === 'dense') {
         // determined when flatten layer is reached
         layer.weights = null;
@@ -63,210 +62,210 @@ class Cnn {
 
     for (const layer of this.architecture) {
       switch (layer.type) {
-        case "conv2d":
+        case 'conv2d':
           out = out.conv2d(layer.weights, layer.stride, layer.padding);
-					if (layer.activationType === "relu") {
-						out = out.relu();
-					}
+          if (layer.activationType === 'relu') {
+            out = out.relu();
+          }
           break;
-        case "maxpool":
-          out = out.maxPool([layer.size, layer.size], [layer.stride, layer.stride], 0);
+        case 'maxpool':
+          out = out.maxPool(
+            [layer.size, layer.size],
+            [layer.stride, layer.stride],
+            0,
+          );
           break;
-        case "flatten":
+        case 'flatten':
           const flatDim = out.shape[1] * out.shape[2] * out.shape[3];
           out = out.reshape([-1, flatDim]);
 
           // initialize dense layer weights and biases
           const next = this.architecture[this.architecture.indexOf(layer) + 1];
-          if (next?.type === "dense" && next.weights === null) {
+          if (next?.type === 'dense' && next.weights === null) {
             next.weights = tf.variable(
               tf.randomUniform(
-                [flatDim, next.units], 
-                -Math.sqrt(1 / flatDim), 
-                Math.sqrt(1 / flatDim)
-              )
+                [flatDim, next.units],
+                -Math.sqrt(1 / flatDim),
+                Math.sqrt(1 / flatDim),
+              ),
             );
             next.biases = tf.variable(tf.zeros([next.units]));
           }
           break;
 
-        case "dense":
+        case 'dense':
           out = out.matMul(layer.weights).add(layer.biases);
           break;
       }
     }
     return out;
-	}
-
-	forwardWithInfo(x) {
-		let out = x;
-		const info = [];
-
-		const inputShape = x.shape;
-		info.push({
-			type: "input",
-			output: out.dataSync(),
-			shape: inputShape
-		});
-
-		for (const layer of this.architecture) {
-			switch (layer.type) {
-
-				case "conv2d":
-					out = out.conv2d(layer.weights, layer.stride, layer.padding);
-					if (layer.activationType === "relu") {
-						out = out.relu();
-					}
-
-					info.push({
-						type: "conv2d",
-						output: out.dataSync(),
-						kernels: layer.weights.dataSync(),
-						outputShape: out.shape,
-						kernelShape: layer.weights.shape,
-						stride: layer.stride,
-						padding: layer.padding,
-            activationType: layer.activationType
-					});
-					break;
-
-				case "maxpool":
-					out = out.maxPool([layer.size, layer.size], [layer.stride, layer.stride], 0);
-
-					info.push({
-						type: "maxpool",
-						output: out.dataSync(),
-						shape: out.shape,
-						size: layer.size,
-						stride: layer.stride
-					});
-					break;
-
-				case "flatten":
-					const flatDim = out.shape[1] * out.shape[2] * out.shape[3];
-					out = out.reshape([-1, flatDim]);
-
-					info.push({
-						type: "flatten",
-						output: out.dataSync(),
-						shape: out.shape
-					});
-
-					// dense init
-					const next = this.architecture[this.architecture.indexOf(layer) + 1];
-					if (next?.type === "dense" && next.weights === null) {
-						next.weights = tf.variable(
-							tf.randomUniform(
-								[flatDim, next.units],
-								-Math.sqrt(1 / flatDim),
-								Math.sqrt(1 / flatDim)
-							)
-						);
-						next.biases = tf.variable(tf.zeros([next.units]));
-					}
-					break;
-
-				case "dense":
-					out = out.matMul(layer.weights).add(layer.biases);
-
-					info.push({
-						type: "dense",
-						output: out.dataSync(),
-						weights: layer.weights.dataSync(),
-						biases: layer.biases.dataSync(),
-						outputShape: out.shape,
-						weightShape: layer.weights.shape,
-						biasShape: layer.biases.shape,
-						units: layer.units
-					});
-					break;
-			}
-		}
-
-		return { output: out, info: info };
-	}
+  }
+
+  forwardWithInfo(x) {
+    let out = x;
+    const info = [];
+
+    const inputShape = x.shape;
+    info.push({
+      type: 'input',
+      output: out.dataSync(),
+      shape: inputShape,
+    });
+
+    for (const layer of this.architecture) {
+      switch (layer.type) {
+        case 'conv2d':
+          out = out.conv2d(layer.weights, layer.stride, layer.padding);
+          if (layer.activationType === 'relu') {
+            out = out.relu();
+          }
 
+          info.push({
+            type: 'conv2d',
+            output: out.dataSync(),
+            kernels: layer.weights.dataSync(),
+            outputShape: out.shape,
+            kernelShape: layer.weights.shape,
+            stride: layer.stride,
+            padding: layer.padding,
+            activationType: layer.activationType,
+          });
+          break;
+
+        case 'maxpool':
+          out = out.maxPool(
+            [layer.size, layer.size],
+            [layer.stride, layer.stride],
+            0,
+          );
+
+          info.push({
+            type: 'maxpool',
+            output: out.dataSync(),
+            shape: out.shape,
+            size: layer.size,
+            stride: layer.stride,
+          });
+          break;
+
+        case 'flatten':
+          const flatDim = out.shape[1] * out.shape[2] * out.shape[3];
+          out = out.reshape([-1, flatDim]);
+
+          info.push({
+            type: 'flatten',
+            output: out.dataSync(),
+            shape: out.shape,
+          });
+
+          // dense init
+          const next = this.architecture[this.architecture.indexOf(layer) + 1];
+          if (next?.type === 'dense' && next.weights === null) {
+            next.weights = tf.variable(
+              tf.randomUniform(
+                [flatDim, next.units],
+                -Math.sqrt(1 / flatDim),
+                Math.sqrt(1 / flatDim),
+              ),
+            );
+            next.biases = tf.variable(tf.zeros([next.units]));
+          }
+          break;
+
+        case 'dense':
+          out = out.matMul(layer.weights).add(layer.biases);
+
+          info.push({
+            type: 'dense',
+            output: out.dataSync(),
+            weights: layer.weights.dataSync(),
+            biases: layer.biases.dataSync(),
+            outputShape: out.shape,
+            weightShape: layer.weights.shape,
+            biasShape: layer.biases.shape,
+            units: layer.units,
+          });
+          break;
+      }
+    }
+
+    return { output: out, info: info };
+  }
 }
 
 async function train(
-	data, 
-	model, 
-	optimizer, 
-	batchSize, 
-	epochs,
-	controller,
-	onBatchEnd = null
+  data,
+  model,
+  optimizer,
+  batchSize,
+  epochs,
+  controller,
+  onBatchEnd = null,
 ) {
-	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
-					]
-				);
-				const preds = model.forward(xs);
-				const lossValue = tf.losses.softmaxCrossEntropy(
-					batch.labels, preds
-				).mean();
-				return lossValue;
-			}, true);
-
-			const lossVal = (await cost.data())[0];
-
-			const sample = data.getTestSample(controller.sampleIndex);
-
-			const { output, info } = model.forwardWithInfo(
-				sample.xs.reshape(
-					[
-						1, 
-						data.imageSize, 
-						data.imageSize, 
-						data.numInputChannels
-					]
-				)
-			);
+  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,
+        ]);
+        const preds = model.forward(xs);
+        const lossValue = tf.losses
+          .softmaxCrossEntropy(batch.labels, preds)
+          .mean();
+        return lossValue;
+      }, true);
+
+      const lossVal = (await cost.data())[0];
+
+      const sample = data.getTestSample(controller.sampleIndex);
+
+      const { output, info } = model.forwardWithInfo(
+        sample.xs.reshape([
+          1,
+          data.imageSize,
+          data.imageSize,
+          data.numInputChannels,
+        ]),
+      );
 
       // Add output layer info
       const probs = tf.tidy(() => {
-				return tf.softmax(output);
-			});
-			const shape = probs.shape;
+        return tf.softmax(output);
+      });
+      const shape = probs.shape;
       info.push({
-        type: "output",
+        type: 'output',
         output: probs.dataSync(),
-				shape: shape
+        shape: shape,
       });
 
-			if (controller.stopRequested) {
-				console.log("Training stopped");
-				return;
-			}
+      if (controller.stopRequested) {
+        console.log('Training stopped');
+        return;
+      }
 
-			if (onBatchEnd) {
-				onBatchEnd(epoch, b, lossVal, info);
-			}
+      if (onBatchEnd) {
+        onBatchEnd(epoch, b, lossVal, info);
+      }
 
-			await tf.nextFrame();
-		}
-	}
-	console.log("Training complete");
+      await tf.nextFrame();
+    }
+  }
+  console.log('Training complete');
 }
 
-
 export { load, train, Cnn };

src/data/convolution_presets.js

@@ -1,5 +1,5 @@
 const PRESETS_COLOR = {
-  "Laplacian": [
+  Laplacian: [
     [
       [-1, -1, -1],
       [-1, 8, -1],
@@ -16,7 +16,7 @@ const PRESETS_COLOR = {
       [-1, -1, -1],
     ],
   ],
-  "Red": [
+  Red: [
     [
       [0, 0, 0],
       [0, 1, 0],
@@ -33,7 +33,7 @@ const PRESETS_COLOR = {
       [0, 0, 0],
     ],
   ],
-  "Green": [
+  Green: [
     [
       [0, 0, 0],
       [0, 0, 0],
@@ -50,7 +50,7 @@ const PRESETS_COLOR = {
       [0, 0, 0],
     ],
   ],
-  "Blue": [
+  Blue: [
     [
       [0, 0, 0],
       [0, 0, 0],
@@ -70,7 +70,7 @@ const PRESETS_COLOR = {
 };
 
 const PRESETS_GRAY = {
-  "Laplacian": [
+  Laplacian: [
     [
       [-1, -1, -1],
       [-1, 8, -1],
@@ -87,7 +87,7 @@ const PRESETS_GRAY = {
       [-1, -1, -1],
     ],
   ],
-  "Sobel X": [
+  'Sobel X': [
     [
       [-1, 0, 1],
       [-2, 0, 2],
@@ -104,7 +104,7 @@ const PRESETS_GRAY = {
       [-1, 0, 1],
     ],
   ],
-  "Sobel Y": [
+  'Sobel Y': [
     [
       [-1, -2, -1],
       [0, 0, 0],
@@ -121,7 +121,7 @@ const PRESETS_GRAY = {
       [1, 2, 1],
     ],
   ],
-  "Sharpen": [
+  Sharpen: [
     [
       [0, -1, 0],
       [-1, 5, -1],
@@ -138,7 +138,7 @@ const PRESETS_GRAY = {
       [0, -1, 0],
     ],
   ],
-  "Box Blur": [
+  'Box Blur': [
     [
       [0.11, 0.11, 0.11],
       [0.11, 0.11, 0.11],
@@ -157,5 +157,4 @@ const PRESETS_GRAY = {
   ],
 };
 
-
 export { PRESETS_COLOR, PRESETS_GRAY };

src/data/mnist.js

@@ -27,9 +27,9 @@ 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';
+  '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';
+  'https://storage.googleapis.com/learnjs-data/model-builder/mnist_labels_uint8';
 
 /**
  * A class that fetches the sprited MNIST dataset and returns shuffled batches.
@@ -42,11 +42,11 @@ export class MnistData {
     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;
+    this.numClasses = NUM_CLASSES;
+    this.numInputChannels = 1;
+    this.trainSize = NUM_TRAIN_ELEMENTS;
+    this.testSize = NUM_TEST_ELEMENTS;
+    this.imageSize = 28;
   }
 
   async load() {
@@ -60,8 +60,9 @@ export class MnistData {
         img.width = img.naturalWidth;
         img.height = img.naturalHeight;
 
-        const datasetBytesBuffer =
-            new ArrayBuffer(NUM_DATASET_ELEMENTS * IMAGE_SIZE * 4);
+        const datasetBytesBuffer = new ArrayBuffer(
+          NUM_DATASET_ELEMENTS * IMAGE_SIZE * 4,
+        );
 
         const chunkSize = 5000;
         canvas.width = img.width;
@@ -69,11 +70,21 @@ export class MnistData {
 
         for (let i = 0; i < NUM_DATASET_ELEMENTS / chunkSize; i++) {
           const datasetBytesView = new Float32Array(
-              datasetBytesBuffer, i * IMAGE_SIZE * chunkSize * 4,
-              IMAGE_SIZE * chunkSize);
+            datasetBytesBuffer,
+            i * IMAGE_SIZE * chunkSize * 4,
+            IMAGE_SIZE * chunkSize,
+          );
           ctx.drawImage(
-              img, 0, i * chunkSize, img.width, chunkSize, 0, 0, img.width,
-              chunkSize);
+            img,
+            0,
+            i * chunkSize,
+            img.width,
+            chunkSize,
+            0,
+            0,
+            img.width,
+            chunkSize,
+          );
 
           const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
 
@@ -91,8 +102,10 @@ export class MnistData {
     });
 
     const labelsRequest = fetch(MNIST_LABELS_PATH);
-    const [imgResponse, labelsResponse] =
-        await Promise.all([imgRequest, labelsRequest]);
+    const [imgResponse, labelsResponse] = await Promise.all([
+      imgRequest,
+      labelsRequest,
+    ]);
 
     this.datasetLabels = new Uint8Array(await labelsResponse.arrayBuffer());
 
@@ -102,28 +115,36 @@ export class MnistData {
     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.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);
+    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];
-        });
+      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;
+        (this.shuffledTestIndex + 1) % this.testIndices.length;
       return this.testIndices[this.shuffledTestIndex];
     });
   }
@@ -135,31 +156,40 @@ export class MnistData {
     for (let i = 0; i < batchSize; i++) {
       const idx = index();
 
-      const image =
-          data[0].slice(idx * IMAGE_SIZE, idx * IMAGE_SIZE + IMAGE_SIZE);
+      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);
+      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};
+    return { xs, labels };
   }
 
-	getTestSample(index) {
-		const idx = index % NUM_TEST_ELEMENTS;
+  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 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 };
-	}
+    const xs = tf.tensor2d(image, [1, IMAGE_SIZE]);
+    const labels = tf.tensor2d(label, [1, NUM_CLASSES]);
 
+    return { xs, labels };
+  }
 }

src/main.jsx

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

src/styles.css

@@ -1,106 +1,106 @@
 .card {
-    background-color: #fff;
-    border: 1px solid #dcdfe6;
-    border-radius: 12px;
-    padding: 18px;
-    display: flex;
-    flex-direction: column;
-    gap: 24px;
-    width: 300px;
-    /* box-shadow: 0 10px 40px rgba(47, 61, 103, 0.08); */
+  background-color: #fff;
+  border: 1px solid #dcdfe6;
+  border-radius: 12px;
+  padding: 18px;
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 300px;
+  /* box-shadow: 0 10px 40px rgba(47, 61, 103, 0.08); */
 }
 
 .field {
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .field label,
 .field legend {
-    font-weight: 600;
-    color: #2c2f37;
-    align-self: flex-start;
+  font-weight: 600;
+  color: #2c2f37;
+  align-self: flex-start;
 }
 
-.field input[type="text"],
-.field input[type="number"],
+.field input[type='text'],
+.field input[type='number'],
 .field textarea {
-    border: 1px solid #ccd0dd;
-    border-radius: 6px;
-    padding: 8px 10px;
-    font-size: 0.95rem;
-    font-family: inherit;
-    background-color: #fafafe;
+  border: 1px solid #ccd0dd;
+  border-radius: 6px;
+  padding: 8px 10px;
+  font-size: 0.95rem;
+  font-family: inherit;
+  background-color: #fafafe;
 }
 
 .field textarea {
-    resize: vertical;
+  resize: vertical;
 }
 
 .field input[readonly],
 .field textarea[readonly] {
-    background-color: #f4f6fc;
-    color: #4a4f5c;
+  background-color: #f4f6fc;
+  color: #4a4f5c;
 }
 
 .double-field {
-    display: flex;
-    gap: 6px;
-    width: 100%;
-    justify-content: space-between;
+  display: flex;
+  gap: 6px;
+  width: 100%;
+  justify-content: space-between;
 }
 
 .double-field .field {
-    width: 140px;
+  width: 140px;
 }
 
 .input-button {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    gap: 8px;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 8px;
 }
 
 .fieldset {
-    border: 1px solid #ccd0dd;
-    border-radius: 6px;
-    padding: 10px 12px 12px 12px;
-    display: flex;
-    flex-direction: column;
-    gap: 6px;
+  border: 1px solid #ccd0dd;
+  border-radius: 6px;
+  padding: 10px 12px 12px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
 }
 
 .fieldset label {
-    font-weight: 500;
-    color: #343844;
+  font-weight: 500;
+  color: #343844;
 }
 
 .slider-field {
-    gap: 10px;
+  gap: 10px;
 }
 
 .slider-control {
-    display: flex;
-    align-items: center;
-    gap: 12px;
+  display: flex;
+  align-items: center;
+  gap: 12px;
 }
 
-.slider-control input[type="range"] {
-    width: 80px;
-    -webkit-appearance: none;
-    background-color: lightgray;
-    border-radius: 6px;
-    accent-color: var(--accent-color);
-    flex: 1;
+.slider-control input[type='range'] {
+  width: 80px;
+  -webkit-appearance: none;
+  background-color: lightgray;
+  border-radius: 6px;
+  accent-color: var(--accent-color);
+  flex: 1;
 }
 
-.slider-control input[type="range"]::-webkit-slider-runnable-track {
+.slider-control input[type='range']::-webkit-slider-runnable-track {
   height: 6px;
   background: lightgray;
   border-radius: 6px;
 }
 
-.slider-control input[type="range"]::-webkit-slider-thumb {
+.slider-control input[type='range']::-webkit-slider-thumb {
   -webkit-appearance: none;
   width: 14px;
   height: 14px;
@@ -112,7 +112,7 @@
 }
 
 .slider-control span {
-    min-width: 28px;
-    text-align: right;
-    font-weight: 600;
-}
+  min-width: 28px;
+  text-align: right;
+  font-weight: 600;
+}

src/utils/convolution.js

@@ -6,13 +6,12 @@ export function convolveGray(image, kernel) {
   const height = image.height;
   const inputData = image.data;
 
-  const outputWidth= width - kernelWidth + 1;
+  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) {
@@ -26,16 +25,16 @@ export function convolveGray(image, kernel) {
 
       const outputIndex = (y * outputWidth + x) * 4;
       const clampedValue = Math.min(Math.max(sum, 0), 255);
-      outputData[outputIndex] = clampedValue;     // R
+      outputData[outputIndex] = clampedValue; // R
       outputData[outputIndex + 1] = clampedValue; // G
       outputData[outputIndex + 2] = clampedValue; // B
-      outputData[outputIndex + 3] = 255;          // A
+      outputData[outputIndex + 3] = 255; // A
     }
   }
 
   return new ImageData(outputData, outputWidth, outputHeight);
 }
-    
+
 export function convolveColor(image, kernel) {
   const kernelWidth = kernel[0][0].length;
   const kernelHeight = kernel[0].length;
@@ -44,13 +43,12 @@ export function convolveColor(image, kernel) {
   const height = image.height;
   const inputData = image.data;
 
-  const outputWidth= width - kernelWidth + 1;
+  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) {
@@ -59,7 +57,7 @@ export function convolveColor(image, kernel) {
           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];
@@ -69,14 +67,12 @@ export function convolveColor(image, kernel) {
 
       const outputIndex = (y * outputWidth + x) * 4;
       const clampedValue = Math.min(Math.max(sum, 0), 255);
-      outputData[outputIndex] = clampedValue;     // R
+      outputData[outputIndex] = clampedValue; // R
       outputData[outputIndex + 1] = clampedValue; // G
       outputData[outputIndex + 2] = clampedValue; // B
-      outputData[outputIndex + 3] = 255;          // A
+      outputData[outputIndex + 3] = 255; // A
     }
   }
 
   return new ImageData(outputData, outputWidth, outputHeight);
 }
-
-

src/utils/image.js

@@ -35,4 +35,3 @@ export function convertToGrayscale(imageData) {
 
   return grayData;
 }
-