changed cnn architecture, added website image upload

2026-04-29 14:02:56 +02:00
parent fd1c111739
commit 262dbe9f98
18 changed files with 264 additions and 51 deletions
@@ -9,7 +9,8 @@
      "version": "0.0.0",
      "dependencies": {
        "react": "^19.2.5",
-        "react-dom": "^19.2.5"
+        "react-dom": "^19.2.5",
+        "react-router-dom": "^7.14.2"
      },
      "devDependencies": {
        "@eslint/js": "^10.0.1",
@@ -264,31 +265,6 @@
        "node": ">=6.9.0"
      }
    },
-    "node_modules/@emnapi/core": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/core/-/core-1.10.0.tgz",
-      "integrity": "sha512-yq6OkJ4p82CAfPl0u9mQebQHKPJkY7WrIuk205cTYnYe+k2Z8YBh11FrbRG/H6ihirqcacOgl2BIO8oyMQLeXw==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@emnapi/wasi-threads": "1.2.1",
-        "tslib": "^2.4.0"
-      }
-    },
-    "node_modules/@emnapi/runtime": {
-      "version": "1.10.0",
-      "resolved": "https://registry.npmjs.org/@emnapi/runtime/-/runtime-1.10.0.tgz",
-      "integrity": "sha512-ewvYlk86xUoGI0zQRNq/mC+16R1QeDlKQy21Ki3oSYXNgLb45GV1P6A0M+/s6nyCuNDqe5VpaY84BzXGwVbwFA==",
-      "dev": true,
-      "license": "MIT",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "tslib": "^2.4.0"
-      }
-    },
    "node_modules/@emnapi/wasi-threads": {
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/@emnapi/wasi-threads/-/wasi-threads-1.2.1.tgz",
@@ -1056,6 +1032,19 @@
      "dev": true,
      "license": "MIT"
    },
+    "node_modules/cookie": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/cookie/-/cookie-1.1.1.tgz",
+      "integrity": "sha512-ei8Aos7ja0weRpFzJnEA9UHJ/7XQmqglbRwnf2ATjcB9Wq874VKH9kfjjirM6UhU2/E5fFYadylyhFldcqSidQ==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/express"
+      }
+    },
    "node_modules/cross-spawn": {
      "version": "7.0.6",
      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2110,6 +2099,7 @@
      "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.2.5.tgz",
      "integrity": "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag==",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "scheduler": "^0.27.0"
      },
@@ -2117,6 +2107,44 @@
        "react": "^19.2.5"
      }
    },
+    "node_modules/react-router": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-7.14.2.tgz",
+      "integrity": "sha512-yCqNne6I8IB6rVCH7XUvlBK7/QKyqypBFGv+8dj4QBFJiiRX+FG7/nkdAvGElyvVZ/HQP5N19wzteuTARXi5Gw==",
+      "license": "MIT",
+      "dependencies": {
+        "cookie": "^1.0.1",
+        "set-cookie-parser": "^2.6.0"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      },
+      "peerDependenciesMeta": {
+        "react-dom": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "7.14.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-7.14.2.tgz",
+      "integrity": "sha512-YZcM5ES8jJSM+KrJ9BdvHHqlnGTg5tH3sC5ChFRj4inosKctdyzBDhOyyHdGk597q2OT6NTrCA1OvB/YDwfekQ==",
+      "license": "MIT",
+      "dependencies": {
+        "react-router": "7.14.2"
+      },
+      "engines": {
+        "node": ">=20.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=18",
+        "react-dom": ">=18"
+      }
+    },
    "node_modules/rolldown": {
      "version": "1.0.0-rc.17",
      "resolved": "https://registry.npmjs.org/rolldown/-/rolldown-1.0.0-rc.17.tgz",
@@ -2174,6 +2202,12 @@
        "semver": "bin/semver.js"
      }
    },
+    "node_modules/set-cookie-parser": {
+      "version": "2.7.2",
+      "resolved": "https://registry.npmjs.org/set-cookie-parser/-/set-cookie-parser-2.7.2.tgz",
+      "integrity": "sha512-oeM1lpU/UvhTxw+g3cIfxXHyJRc/uidd3yK1P242gzHds0udQBYzs3y8j4gCCW+ZJ7ad0yctld8RYO+bdurlvw==",
+      "license": "MIT"
+    },
    "node_modules/shebang-command": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz",
@@ -11,7 +11,8 @@
  },
  "dependencies": {
    "react": "^19.2.5",
-    "react-dom": "^19.2.5"
+    "react-dom": "^19.2.5",
+    "react-router-dom": "^7.14.2"
  },
  "devDependencies": {
    "@eslint/js": "^10.0.1",
@@ -1,15 +1,22 @@
 import { useState } from 'react'
+import { BrowserRouter as Router, Routes, Route } from "react-router-dom";
 import reactLogo from './assets/react.svg'
 import viteLogo from './assets/vite.svg'
 import heroImg from './assets/hero.png'
 import './App.css'
 import Menu from './Menu'
+import Homepage from './Homepage';
+import Bird_CNN from './Bird_CNN';

 function App() {

  return (
    <>
      <Menu />
+      <Routes>
+        <Route path="/" element={<Homepage />} />
+        <Route path="/bird_cnn" element={<Bird_CNN />} />
+      </Routes>
    </>
  );
 }
@@ -0,0 +1,5 @@
+.content-block {
+    display: flex;
+    align-items: baseline;
+    gap: 20px;
+}
@@ -0,0 +1,68 @@
+import { useState } from 'react'
+import './Bird_CNN.css'
+
+function Bird_CNN() {
+
+    const [file, setFile] = useState(null);
+    const [birdClass, setBirdClass] = useState(null);
+    const [confidence, setConfidence] = useState(null);
+    const [error, setError] = useState(false);
+
+    const handleImage = (e) => {
+        setFile(e.target.files[0]);
+    };
+
+    const sendImage = async (e) => {
+        if (!file) return;
+
+        const formData = new FormData();
+        formData.append("file", file);
+
+        try {
+            const response = await fetch("http://127.0.0.1:8000/predict", {
+                method: "POST",
+                body: formData,
+            });
+
+            if (!response.ok) {
+                setError(true);
+            }
+            else {
+                setError(false);
+            }
+
+            const result = await response.json();
+            setBirdClass(result["class"]);
+            const confidence = result["confidence"];
+            setConfidence(`${Math.round(confidence * 100)}%`);
+        }
+        catch (error) {
+            console.error("Upload failed:", error);
+        }
+    };
+
+    return (
+        <>
+            <h1>bird-cnn</h1>
+            <div>
+                <input type="file" accept="image/jpeg" onChange={handleImage} />
+                <button onClick={sendImage}>Upload</button>
+
+
+                <div className='response-block'>
+                    {!error && <div className='content-block class'>
+                        <h3>Bird Species: </h3>
+                        <p id='bird-class-text'>{birdClass}</p>
+                    </div>}
+                    {!error && <div className='content-block confidence'>
+                        <h4>Model Confidence: </h4>
+                        <p id='bird-confidence-text'>{confidence}</p>
+                    </div>}
+                    {error && <h4>An Error has uccured. Please try again later.</h4>}
+                </div>
+            </div>
+        </>
+    );
+}
+
+export default Bird_CNN;
@@ -0,0 +1,9 @@
+function Homepage() {
+    return (
+        <>
+            <p>Homepage</p>
+        </>
+    );
+}
+
+export default Homepage;
@@ -1,15 +1,12 @@
+import { Link } from 'react-router-dom';
 import './Menu.css'

 function Menu() {
    return (
        <>
            <nav id="navbar-main">
-                <li className="menu-item">
-                    <a className="link-text">Test</a>
-                </li>
-                <li className="menu-item">
-                    <a className="link-text">Test2</a>
-                </li>
+                <Link to="/">Homepage</Link>
+                <Link to="/bird_cnn">Birds</Link>
            </nav>
        </>
    );
@@ -2,9 +2,12 @@ import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'
+import { BrowserRouter } from 'react-router-dom'

 createRoot(document.getElementById('root')).render(
  <StrictMode>
-    <App />
-  </StrictMode>,
-)
+    <BrowserRouter>
+      <App />
+    </BrowserRouter>
+  </StrictMode>
+);