From d1384be6f45c08badcb6e390f1d9f63b987a66de Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Marvin=20Krau=C3=9Fer?= Date: Fri, 1 May 2026 01:41:34 +0200 Subject: [PATCH] changed design. added dockerfile --- cnn_website/Dockerfile | 19 ++++++ cnn_website/index.html | 25 ++++---- cnn_website/public/loading.gif | Bin 0 -> 20432 bytes cnn_website/src/Bird_CNN.css | 105 ++++++++++++++++++++++----------- cnn_website/src/Bird_CNN.jsx | 58 +++++++++--------- cnn_website/src/Menu.css | 7 +-- cnn_website/src/index.css | 20 ++++++- 7 files changed, 155 insertions(+), 79 deletions(-) create mode 100644 cnn_website/Dockerfile create mode 100644 cnn_website/public/loading.gif diff --git a/cnn_website/Dockerfile b/cnn_website/Dockerfile new file mode 100644 index 0000000..ea1badc --- /dev/null +++ b/cnn_website/Dockerfile @@ -0,0 +1,19 @@ +FROM node:20-alpine AS build + +WORKDIR /app + +COPY package*.json ./ +RUN npm install + +COPY . . + +RUN npm run build + + +FROM nginx:alpine + +COPY --from=build /app/dist /usr/share/nginx/html + +EXPOSE 80 + +CMD ["nginx", "-g", "daemon off;"] \ No newline at end of file diff --git a/cnn_website/index.html b/cnn_website/index.html index 8c0e3ed..59046b6 100644 --- a/cnn_website/index.html +++ b/cnn_website/index.html @@ -1,13 +1,16 @@ - - - - - cnn_website - - -
- - - + + + + + + cnn_website + + + +
+ + + + \ No newline at end of file diff --git a/cnn_website/public/loading.gif b/cnn_website/public/loading.gif new file mode 100644 index 0000000000000000000000000000000000000000..0e8f9ae0c44bbf7bf5b3bf43759adec92c31e367 GIT binary patch literal 20432 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⪼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 literal 0 HcmV?d00001 diff --git a/cnn_website/src/Bird_CNN.css b/cnn_website/src/Bird_CNN.css index 89ec9f0..b4fcaad 100644 --- a/cnn_website/src/Bird_CNN.css +++ b/cnn_website/src/Bird_CNN.css @@ -1,73 +1,77 @@ .custom-button { height: 40px; padding: 10px 20px; - background: #333; - color: rgb(225, 225, 225); + background: rgb(25, 100, 126); + color: rgb(255, 255, 255); cursor: pointer; - border-radius: 6px; - border: 1px solid black; + border-radius: 20px; + border: 1px solid rgb(25, 100, 126); + user-select: none; } .custom-button:hover { border-color: white; - color: white; } .custom-button.inactive { - background: #333; - color: rgb(117, 117, 117); + opacity: 0.3; cursor: default; } .custom-button.inactive:hover { - border-color: black; + border-color: rgb(25, 100, 126); } -.explanation-box a, -span, -p { - line-height: 1.7; - font-size: 17px; +#site-headline { + margin-left: 100px; + margin-bottom: 50px; + color: rgb(47, 168, 208); + font-weight: bold; + font-size: 4rem; + position: relative; + width: fit-content; +} + +#site-headline::before { + content: ""; + position: absolute; + bottom: 0; + right: 0; + height: 4px; + width: 100%; + border-radius: 20px; + background: rgb(47, 168, 208); } a { - color: rgb(0, 0, 0); text-decoration: none; - border-bottom: 1px solid black; + border-bottom: 1px solid rgb(255, 255, 255); padding-bottom: 2px; transition: border-color 0.15s; } a:hover { - border-color: white; + border-color: #c59eff; } .explanation-box { flex: 1; - min-width: 0; + min-width: 300px; display: flex; flex-direction: column; flex-wrap: wrap; overflow: hidden; - border: 3px solid rgb(48, 62, 74); - margin: 50px; - padding: 50px; border-radius: 12px; - background: rgb(97, 125, 151); + margin: 180px 50px 0px 50px; } .image-box { - border: 2px solid black; - background: rgb(69, 69, 69); height: 400px; - width: 600px; margin-top: 40px; display: flex; align-items: center; justify-content: center; - border-radius: 8px; - background: rgba(0, 0, 0, 0.5); cursor: pointer; } @@ -77,26 +81,55 @@ a:hover { .image-box img { border: 2px solid black; - border-Radius: 8px; + border-Radius: 10px; } -.image-box:hover p { - color: white; -} - .image-box img:hover { border-color: white; } -.image-box.active { - background: none; - border: none; -} - .content-block { display: flex; align-items: center; gap: 20px; height: 40px; +} + +/* HTML:
*/ +.loader { + width: 85px; + height: 25px; + --g1: conic-gradient(from 90deg at left 3px top 3px, #0000 90deg, #fff 0); + --g2: conic-gradient(from -90deg at bottom 3px right 3px, #0000 90deg, #fff 0); + background: var(--g1), var(--g1), var(--g1), var(--g2), var(--g2), var(--g2); + background-position: left, center, right; + background-repeat: no-repeat; + animation: l8 1s infinite; +} + +@keyframes l8 { + 0% { + background-size: 25px 100%, 25px 100%, 25px 100% + } + + 20% { + background-size: 25px 50%, 25px 100%, 25px 100% + } + + 40% { + background-size: 25px 50%, 25px 50%, 25px 100% + } + + 60% { + background-size: 25px 100%, 25px 50%, 25px 50% + } + + 80% { + background-size: 25px 100%, 25px 100%, 25px 50% + } + + 100% { + background-size: 25px 100%, 25px 100%, 25px 100% + } } \ No newline at end of file diff --git a/cnn_website/src/Bird_CNN.jsx b/cnn_website/src/Bird_CNN.jsx index 46825df..76a81c5 100644 --- a/cnn_website/src/Bird_CNN.jsx +++ b/cnn_website/src/Bird_CNN.jsx @@ -7,26 +7,24 @@ function Bird_CNN() { ? "http://134.60.154.7:8000" : "http://134.60.154.7:8000"; - const boxRef = useRef(null); - const [file, setFile] = useState(null); const [birdClass, setBirdClass] = useState(null); const [confidence, setConfidence] = useState(null); const [error, setError] = useState(false); - const [preview, setPreview] = useState(null); + const [preview, setPreview] = useState("\\cherry_bird.jpeg"); + const [loading, setLoading] = useState(false); const fileInputRef = useRef(null); const uploadButton = useRef(null); + const scrollRef = useRef(null); const handleImageDivClick = () => { fileInputRef.current.click(); } const handleImage = (e) => { - setFile(e.target.files[0]); - if (e.target.files[0]) { + setFile(e.target.files[0]); setPreview(URL.createObjectURL(e.target.files[0])); - boxRef.current.classList.add("active"); uploadButton.current.classList.remove("inactive"); } setConfidence(null); @@ -36,15 +34,20 @@ function Bird_CNN() { const sendImage = async (e) => { if (!file) return; + scrollRef.current.scrollIntoView({ behavior: "smooth" }); + const formData = new FormData(); formData.append("file", file); try { + setLoading(true); const response = await fetch(`${apiUrl}/predict`, { method: "POST", body: formData, }); + setLoading(false); + if (!response.ok) { setError(true); } @@ -65,23 +68,23 @@ function Bird_CNN() { return ( <>
-

Bird Species Expert

-
-
-

Explanation

+

Bird Species Expert

+
+
+

Explanation

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.
-
-
+
+
- +
-
-
- {!preview &&

Select Image

} - {preview && ( - preview - )} +
+ preview +
+ +
+ {loading &&
}
-
+

Bird Species:

{birdClass}

@@ -114,7 +118,7 @@ function Bird_CNN() {
-
+

Model Architecture

The model used for classification is a convolutional neural network (CNN) based on depthwise separable convolutions, as introduced in the @@ -123,7 +127,7 @@ function Bird_CNN() {
-
+
); } diff --git a/cnn_website/src/Menu.css b/cnn_website/src/Menu.css index a4fdcda..4aae397 100644 --- a/cnn_website/src/Menu.css +++ b/cnn_website/src/Menu.css @@ -5,8 +5,7 @@ gap: 20px; justify-content: center; align-items: center; - background-color: rgb(33, 122, 194); - border: 1px solid black; - border-bottom-left-radius: 8px; - border-bottom-right-radius: 8px; + background-color: rgb(25, 100, 126); + border-bottom-left-radius: 40px; + border-bottom-right-radius: 40px; } \ No newline at end of file diff --git a/cnn_website/src/index.css b/cnn_website/src/index.css index 8a472dc..6a509c1 100644 --- a/cnn_website/src/index.css +++ b/cnn_website/src/index.css @@ -1,3 +1,21 @@ +html { + font-family: system-ui, sans-serif; + color: rgb(255, 255, 255); + font-size: 1rem; + line-height: 1.7; +} + body { - background: rgb(130, 170, 205); + background: rgb(4, 0, 10); +} + +a { + color: rgb(255, 255, 255); +} + +h1, +h2, +h3, +h4 { + font-family: 'Times New Roman', serif; } \ No newline at end of file