marvin/CNN_Website
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

changed website structure, added new cnn files

Browse Source
This commit is contained in:
marvin
2026-05-06 16:01:10 +02:00
parent ad5acf85f9
commit 17d0147173
5 changed files with 225 additions and 23 deletions
Download Patch File Download Diff File Expand all files Collapse all files
cnn_website/src/Bird_CNN.css
+77 -10
View File
@@ -1,3 +1,7 @@
.button-div {
height: 40px;
}
.custom-button {
font-size: 1rem;
font-weight: bold;
@@ -27,11 +31,10 @@
}
#site-headline {
margin-left: 100px;
margin-bottom: 50px;
margin: 50px min(100px, 10vw) 50px min(100px, 10vw);
color: rgb(47, 168, 208);
font-weight: bold;
font-size: 4rem;
font-size: clamp(1rem, 8vw, 4rem);
position: relative;
width: fit-content;
}
@@ -67,12 +70,13 @@ a:hover {
flex-wrap: wrap;
overflow: hidden;
border-radius: 12px;
margin: 180px 50px 50px 50px;
margin: 50px 50px 50px 50px;
}
.image-box {
height: 400px;
height: fit-content;
margin-top: 40px;
margin-bottom: 40px;
display: flex;
align-items: center;
justify-content: center;
@@ -86,7 +90,10 @@ a:hover {
cursor: pointer;
border: 2px solid black;
border-Radius: 10px;
user-select: none;
height: auto;
max-height: 400px;
max-width: min(700px, 80vw);
}
.image-box img:hover {
@@ -95,15 +102,27 @@ a:hover {
.content-block {
display: flex;
justify-content: center;
align-items: center;
gap: 20px;
height: 40px;
flex-wrap: wrap;
column-gap: 20px;
height: fit-content;
width: fit-content;
}
.loader-container {
scroll-margin-top: 100px;
width: 85px;
height: 35px;
display: flex;
justify-content: center;
padding: 20px 0px 20px 0px;
}
/* HTML: <div class="loader"></div> */
.loader {
width: 85px;
height: 25px;
width: 100%;
height: 100%;
--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);
@@ -136,4 +155,52 @@ a:hover {
100% {
background-size: 25px 100%, 25px 100%, 25px 100%
}
}
.site-box {
margin-top: 150px;
width: 100%;
}
.request-box {
height: fit-content;
width: min(700px, 80%);
display: flex;
flex-direction: column;
align-items: center;
flex: 0 0 auto;
margin: 0px 50px 0px 50px;
}
.request-box * {
box-sizing: content-box;
}
.input-box {
scroll-margin-top: 100px;
width: min(500px, 100%);
height: 160px;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.response-block {
width: 80%;
height: 100px;
margin: 40px;
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: center;
gap: 40px;
}
.conten-block-text {
display: flex;
flex-direction: column;
justify-content: center;
margin: 0;
}
cnn_website/src/Bird_CNN.jsx
+12 -13
View File
@@ -85,7 +85,7 @@ function Bird_CNN() {
return (
<>
<div className='site-box' style={{ marginTop: "150px" }}>
<div className='site-box'>
<h1 id='site-headline'>Bird Species Expert</h1>
<div className='content-box' style={{ display: "flex", flexWrap: "wrap", justifyContent: "center" }}>
<div className='explanation-box left'>
@@ -93,15 +93,15 @@ function Bird_CNN() {
<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: "800px", width: "700px", display: "flex", flexDirection: "column", alignItems: "center", flex: "0 0 auto", margin: "100px 50px 0px 50px" }}>
<div ref={scrollRefUploadButton} className='input-box' style={{ scrollMarginTop: "100px", marginBottom: "80px", width: "500px", height: "40px", display: "flex", justifyContent: "space-evenly", alignItems: "center" }}>
<div>
<div className='request-box'>
<div ref={scrollRefUploadButton} className='input-box'>
<div className='button-div'>
<input disabled={loading} ref={fileInputRef} type="file" id='fileUpload' accept="image/jpeg" onChange={handleImage} style={{ display: "none" }} />
<label htmlFor="fileUpload" className="custom-button">
Select Image
</label>
</div>
<div>
<div className='button-div'>
<button id='button-send' onClick={sendImage} style={{ display: "none" }} disabled={loading} />
<label htmlFor="button-send" className="custom-button inactive" ref={uploadButton}>
Ask Expert
@@ -116,25 +116,24 @@ function Bird_CNN() {
disabled={loading}
src={preview}
alt="preview"
style={{ height: "100%", userSelect: "none", maxWidth: "700px" }}
/>
</div>
<div ref={scrollRefClassifiction} style={{ scrollMarginTop: "100px", paddingTop: "10px", marginTop: "30px", width: "85px", height: "35px", display: "flex", justifyContent: "center", minHeight: "25px", minWidth: "85px" }}>
<div ref={scrollRefClassifiction} className='loader-container'>
{loading && <div className='loader'></div>}
</div>
<div className='response-block' style={{ marginTop: "40px", width: "80%", margin: "40px", display: "flex", flexDirection: "column", alignItems: "flex-start", gap: "10px" }}>
<div className='response-block'>
<div className='content-block class'>
<h3>Bird Species: </h3>
<p id='bird-class-text'>{birdClass}</p>
<h3 className='conten-block-text'>Bird Species: </h3>
<p id='bird-class-text' className='conten-block-text'>{birdClass}</p>
</div>
<div className='content-block confidence'>
<h4>Model Confidence: </h4>
<p id='bird-confidence-text'>{confidence}</p>
<h4 className='conten-block-text'>Model Confidence: </h4>
<p id='bird-confidence-text' className='conten-block-text'>{confidence}</p>
</div>
{error && <h4>An Error has uccured. Please try again later.</h4>}
{error && <h4 className='conten-block-text'>An Error has uccured. Please try again later.</h4>}
</div>
</div>