changes website design

cnn_website/src/Bird_CNN.css

@@ -1,39 +1,5 @@
-#background {
-    position: absolute;
-    left: 0;
-    top: 0;
-    background-image: url('/cherry_bird.jpeg');
-    background-size: cover;
-    background-position: center;
-    height: 100vh;
-    width: 100%;
-    z-index: 0;
-    opacity: 0.1;
-    pointer-events: none;
-}
-
-.site-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    position: relative;
-    z-index: 1;
-    margin-top: 120px;
-    height: 600px;
-}
-
-.content-block {
-    display: flex;
-    align-items: baseline;
-    gap: 20px;
-}
-
-.input-box {
-    display: flex;
-    gap: 20px;
-}
-
 .custom-button {
+    height: 40px;
     padding: 10px 20px;
     background: #333;
     color: rgb(225, 225, 225);
@@ -47,29 +13,90 @@
     color: white;
 }
 
-.response-block {
+.custom-button.inactive {
-    margin-top: auto;
+    background: #333;
-    width: 20%;
+    color: rgb(117, 117, 117);
+    cursor: default;
+}
+
+.custom-button.inactive:hover {
+    border-color: black;
+}
+
+.explanation-box a,
+span,
+p {
+    line-height: 1.7;
+    font-size: 17px;
+}
+
+a {
+    color: rgb(0, 0, 0);
+    text-decoration: none;
+    border-bottom: 1px solid black;
+    padding-bottom: 2px;
+    transition: border-color 0.15s;
+}
+
+a:hover {
+    border-color: white;
+}
+
+
+.explanation-box {
+    flex: 1;
+    min-width: 0;
     display: flex;
     flex-direction: column;
-    justify-content: left;
+    flex-wrap: wrap;
+    overflow: hidden;
+    border: 3px solid rgb(48, 62, 74);
+    margin: 50px;
+    padding: 50px;
+    border-radius: 12px;
+    background: rgb(97, 125, 151);
 }
 
 .image-box {
-    border: 1px solid black;
+    border: 2px solid black;
     background: rgb(69, 69, 69);
-    height: 300px;
+    height: 400px;
-    width: 500px;
+    width: 600px;
     margin-top: 40px;
     display: flex;
     align-items: center;
     justify-content: center;
     border-radius: 8px;
-    opacity: 0.5;
+    background: rgba(0, 0, 0, 0.5);
+    cursor: pointer;
+}
+
+.image-box:hover {
+    border-color: white;
+}
+
+.image-box img {
+    border: 2px solid black;
+    border-Radius: 8px;
+
+}
+
+.image-box:hover p {
+    color: white;
+}
+
+.image-box img:hover {
+    border-color: white;
 }
 
 .image-box.active {
-    opacity: 1;
     background: none;
     border: none;
 }
+
+.content-block {
+    display: flex;
+    align-items: center;
+    gap: 20px;
+    height: 40px;
+}

cnn_website/src/Bird_CNN.jsx

@@ -1,6 +1,6 @@
 import { useState } from 'react'
 import { useRef } from "react";
-import './Bird_CNN.css'
+import './Bird_CNN.css';
 
 function Bird_CNN() {
     const apiUrl = process.env.NODE_ENV === "development"
@@ -14,6 +14,12 @@ function Bird_CNN() {
     const [confidence, setConfidence] = useState(null);
     const [error, setError] = useState(false);
     const [preview, setPreview] = useState(null);
+    const fileInputRef = useRef(null);
+    const uploadButton = useRef(null);
+
+    const handleImageDivClick = () => {
+        fileInputRef.current.click();
+    }
 
     const handleImage = (e) => {
         setFile(e.target.files[0]);
@@ -21,6 +27,7 @@ function Bird_CNN() {
         if (e.target.files[0]) {
             setPreview(URL.createObjectURL(e.target.files[0]));
             boxRef.current.classList.add("active");
+            uploadButton.current.classList.remove("inactive");
         }
         setConfidence(null);
         setBirdClass(null);
@@ -57,44 +64,66 @@ function Bird_CNN() {
 
     return (
         <>
-            <div id='background'></div>
+            <div className='site-box' style={{ marginTop: "150px" }}>
-            <div className='site-content'>
+                <h1 id='site-headline' style={{ marginLeft: "100px", marginBottom: "50px" }}>Bird Species Expert</h1>
-                <h1 id='site-headline'>Bird Species Expert</h1>
+                <div className='content-box' style={{ display: "flex" }}>
-                <div className='input-box'>
+                    <div className='explanation-box'>
-                    <input type="file" id='fileUpload' accept="image/jpeg" onChange={handleImage} style={{ display: "none" }} />
+                        <h2 style={{ color: "Blue" }}>Explanation</h2>
+                        <span>Select an image and upload it to our bird expert. You will receive a classification and how certain the expert is with her opinion. Be aware that the expert may not be always right.</span>
+                    </div>
+
+                    <div className='request-box' style={{ height: "700px", width: "700px", display: "flex", flexDirection: "column", alignItems: "center", flex: "0 0 auto" }}>
+                        <div className='input-box' style={{ width: "500px", height: "40px", display: "flex", justifyContent: "space-evenly", alignItems: "center" }}>
+                            <div>
+                                <input ref={fileInputRef} type="file" id='fileUpload' accept="image/jpeg" onChange={handleImage} style={{ display: "none" }} />
                                 <label htmlFor="fileUpload" className="custom-button">
-                        Choose an image
+                                    Select an image
                                 </label>
+                            </div>
+                            <div>
                                 <button id='button-send' onClick={sendImage} style={{ display: "none" }} />
-                    <label htmlFor="button-send" className="custom-button">
+                                <label htmlFor="button-send" className="custom-button inactive" ref={uploadButton}>
                                     Ask Expert
                                 </label>
+                            </div>
 
                         </div>
 
-                <div ref={boxRef} className='image-box'>
+                        <div ref={boxRef} className='image-box' onClick={handleImageDivClick}>
+                            {!preview && <p>Select Image</p>}
                             {preview && (
                                 <img
                                     src={preview}
                                     alt="preview"
-                            style={{ height: "300px", border: "1px solid black" }}
+                                    style={{ height: "400px" }}
                                 />
                             )}
                         </div>
 
 
-                <div className='response-block'>
+                        <div className='response-block' style={{ width: "80%", margin: "40px", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px" }}>
-                    {!error && <div className='content-block class'>
+                            <div className='content-block class'>
                                 <h3>Bird Species: </h3>
                                 <p id='bird-class-text'>{birdClass}</p>
-                    </div>}
+                            </div>
-                    {!error && <div className='content-block confidence'>
+                            <div className='content-block confidence'>
                                 <h4>Model Confidence: </h4>
                                 <p id='bird-confidence-text'>{confidence}</p>
-                    </div>}
+                            </div>
                             {error && <h4>An Error has uccured. Please try again later.</h4>}
                         </div>
                     </div>
+
+                    <div className='explanation-box'>
+                        <h3>Model Architecture</h3>
+                        <div style={{ display: "inline" }}>
+                            <span>The model used for classification is a convolutional neural network (CNN) based on depthwise separable convolutions, as introduced in the </span>
+                            <a href='https://arxiv.org/pdf/1610.02357' target='_blank' rel='noopener noreferrer'>Xception: Deep Learning with Depthwise Separable Convolutions</a>
+                            <span> paper by François Chollet. It uses who knows how many layers, a dropout and multiple batchnormalsation.</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
         </>
     );
 }