changed cnn architecture, added website image upload

cnn_website/src/App.jsx

@@ -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>
     </>
   );
 }

cnn_website/src/Bird_CNN.css

@@ -0,0 +1,5 @@
+.content-block {
+    display: flex;
+    align-items: baseline;
+    gap: 20px;
+}

cnn_website/src/Bird_CNN.jsx

@@ -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;

cnn_website/src/Homepage.jsx

@@ -0,0 +1,9 @@
+function Homepage() {
+    return (
+        <>
+            <p>Homepage</p>
+        </>
+    );
+}
+
+export default Homepage;

cnn_website/src/Menu.jsx

@@ -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>
         </>
     );

cnn_website/src/main.jsx

@@ -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>
+);