Use the old react version temporarily

.gitignore

@@ -0,0 +1 @@
+node_modules/

README.md

@@ -3,10 +3,7 @@ title: Cnn Visualizer
 emoji: 🌍
 colorFrom: indigo
 colorTo: red
-sdk: gradio
-sdk_version: 5.46.0
-app_file: app.py
+sdk: static
+app_file: dist/index.html
 pinned: false
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+---

dist/assets/index-BoCAEVud.css

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

dist/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>moz-todo-react</title>
+    <script type="module" crossorigin src="/assets/index-CARha6nB.js"></script>
+    <link rel="stylesheet" crossorigin href="/assets/index-BoCAEVud.css">
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

eslint.config.js

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

index.html

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

package.json

@@ -0,0 +1,29 @@
+{
+  "name": "moz-todo-react",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@tensorflow/tfjs": "^4.22.0",
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0",
+    "react-plotly.js": "^2.6.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^5.1.1",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "vite": "^7.3.1"
+  }
+}

src/App.css

@@ -0,0 +1,12 @@
+h1 {
+  font-size: 40px;
+  font-weight: bold;
+  text-align: left;
+}
+
+.main-container {
+  flex: 1;
+  display: grid;
+  grid-template-columns: 2fr 1fr;
+  gap: 2rem;
+}

src/App.jsx

@@ -0,0 +1,30 @@
+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 />,
+		},
+	];
+
+  return (
+    <>
+      <h1>CNN Visualizer</h1>
+			<Tabs
+				defaultTab="Convolution"
+				tabs={tabData}
+			/>
+    </>
+  )
+}
+
+export default App;