From 4c38140661e58f7cf1babbc31113a146195018f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= <koro.no.omo@gmail.com>
Date: Thu, 30 Apr 2026 20:04:41 +0200
Subject: [PATCH] changes website design

---
 cnn_website/src/Bird_CNN.css | 115 +++++++++++++++++++++--------------
 cnn_website/src/Bird_CNN.jsx |  95 +++++++++++++++++++----------
 2 files changed, 133 insertions(+), 77 deletions(-)

diff --git a/cnn_website/src/Bird_CNN.css b/cnn_website/src/Bird_CNN.css
index e7c8b23..89ec9f0 100644
--- a/cnn_website/src/Bird_CNN.css
+++ b/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 {
-    margin-top: auto;
-    width: 20%;
+.custom-button.inactive {
+    background: #333;
+    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;
-    width: 500px;
+    height: 400px;
+    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;
 }
\ No newline at end of file
diff --git a/cnn_website/src/Bird_CNN.jsx b/cnn_website/src/Bird_CNN.jsx
index d536fc3..46825df 100644
--- a/cnn_website/src/Bird_CNN.jsx
+++ b/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,42 +64,64 @@ function Bird_CNN() {
 
     return (
         <>
-            <div id='background'></div>
-            <div className='site-content'>
-                <h1 id='site-headline'>Bird Species Expert</h1>
-                <div className='input-box'>
-                    <input type="file" id='fileUpload' accept="image/jpeg" onChange={handleImage} style={{ display: "none" }} />
-                    <label htmlFor="fileUpload" className="custom-button">
-                        Choose an image
-                    </label>
-                    <button id='button-send' onClick={sendImage} style={{ display: "none" }} />
-                    <label htmlFor="button-send" className="custom-button">
-                        Ask Expert
-                    </label>
+            <div className='site-box' style={{ marginTop: "150px" }}>
+                <h1 id='site-headline' style={{ marginLeft: "100px", marginBottom: "50px" }}>Bird Species Expert</h1>
+                <div className='content-box' style={{ display: "flex" }}>
+                    <div className='explanation-box'>
+                        <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>
+                    <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">
+                                    Select an image
+                                </label>
+                            </div>
+                            <div>
+                                <button id='button-send' onClick={sendImage} style={{ display: "none" }} />
+                                <label htmlFor="button-send" className="custom-button inactive" ref={uploadButton}>
+                                    Ask Expert
+                                </label>
+                            </div>
 
-                <div ref={boxRef} className='image-box'>
-                    {preview && (
-                        <img
-                            src={preview}
-                            alt="preview"
-                            style={{ height: "300px", border: "1px solid black" }}
-                        />
-                    )}
-                </div>
+                        </div>
+
+                        <div ref={boxRef} className='image-box' onClick={handleImageDivClick}>
+                            {!preview && <p>Select Image</p>}
+                            {preview && (
+                                <img
+                                    src={preview}
+                                    alt="preview"
+                                    style={{ height: "400px" }}
+                                />
+                            )}
+                        </div>
 
 
-                <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 className='response-block' style={{ width: "80%", margin: "40px", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px" }}>
+                            <div className='content-block class'>
+                                <h3>Bird Species: </h3>
+                                <p id='bird-class-text'>{birdClass}</p>
+                            </div>
+                            <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>
+
+                    <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>
         </>