diff --git a/cnn_website/public/cherry_bird.jpeg b/cnn_website/public/cherry_bird.jpeg new file mode 100644 index 0000000..c8756ae Binary files /dev/null and b/cnn_website/public/cherry_bird.jpeg differ diff --git a/cnn_website/src/App.css b/cnn_website/src/App.css index f90339d..373e7b0 100644 --- a/cnn_website/src/App.css +++ b/cnn_website/src/App.css @@ -1,184 +1,14 @@ -.counter { - font-size: 16px; - padding: 5px 10px; - border-radius: 5px; - color: var(--accent); - background: var(--accent-bg); - border: 2px solid transparent; - transition: border-color 0.3s; - margin-bottom: 24px; - - &:hover { - border-color: var(--accent-border); - } - &:focus-visible { - outline: 2px solid var(--accent); - outline-offset: 2px; - } +* { + box-sizing: border-box; } -.hero { - position: relative; - - .base, - .framework, - .vite { - inset-inline: 0; - margin: 0 auto; - } - - .base { - width: 170px; - position: relative; - z-index: 0; - } - - .framework, - .vite { - position: absolute; - } - - .framework { - z-index: 1; - top: 34px; - height: 28px; - transform: perspective(2000px) rotateZ(300deg) rotateX(44deg) rotateY(39deg) - scale(1.4); - } - - .vite { - z-index: 0; - top: 107px; - height: 26px; - width: auto; - transform: perspective(2000px) rotateZ(300deg) rotateX(40deg) rotateY(39deg) - scale(0.8); - } -} - -#center { +.menu-bar { + position: absolute; + top: 0; + left: 0; + height: 80px; display: flex; - flex-direction: column; - gap: 25px; - place-content: center; - place-items: center; - flex-grow: 1; - - @media (max-width: 1024px) { - padding: 32px 20px 24px; - gap: 18px; - } -} - -#next-steps { - display: flex; - border-top: 1px solid var(--border); - text-align: left; - - & > div { - flex: 1 1 0; - padding: 32px; - @media (max-width: 1024px) { - padding: 24px 20px; - } - } - - .icon { - margin-bottom: 16px; - width: 22px; - height: 22px; - } - - @media (max-width: 1024px) { - flex-direction: column; - text-align: center; - } -} - -#docs { - border-right: 1px solid var(--border); - - @media (max-width: 1024px) { - border-right: none; - border-bottom: 1px solid var(--border); - } -} - -#next-steps ul { - list-style: none; - padding: 0; - display: flex; - gap: 8px; - margin: 32px 0 0; - - .logo { - height: 18px; - } - - a { - color: var(--text-h); - font-size: 16px; - border-radius: 6px; - background: var(--social-bg); - display: flex; - padding: 6px 12px; - align-items: center; - gap: 8px; - text-decoration: none; - transition: box-shadow 0.3s; - - &:hover { - box-shadow: var(--shadow); - } - .button-icon { - height: 18px; - width: 18px; - } - } - - @media (max-width: 1024px) { - margin-top: 20px; - flex-wrap: wrap; - justify-content: center; - - li { - flex: 1 1 calc(50% - 8px); - } - - a { - width: 100%; - justify-content: center; - box-sizing: border-box; - } - } -} - -#spacer { - height: 88px; - border-top: 1px solid var(--border); - @media (max-width: 1024px) { - height: 48px; - } -} - -.ticks { - position: relative; + justify-content: center; + align-items: center; width: 100%; - - &::before, - &::after { - content: ''; - position: absolute; - top: -4.5px; - border: 5px solid transparent; - } - - &::before { - left: 0; - border-left-color: var(--border); - } - &::after { - right: 0; - border-right-color: var(--border); - } -} +} \ No newline at end of file diff --git a/cnn_website/src/App.jsx b/cnn_website/src/App.jsx index 0c144e7..a59f7a1 100644 --- a/cnn_website/src/App.jsx +++ b/cnn_website/src/App.jsx @@ -12,7 +12,9 @@ function App() { return ( <> - +
+ +
} /> } /> diff --git a/cnn_website/src/Bird_CNN.css b/cnn_website/src/Bird_CNN.css index bd17af2..e7c8b23 100644 --- a/cnn_website/src/Bird_CNN.css +++ b/cnn_website/src/Bird_CNN.css @@ -1,5 +1,75 @@ +#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 { + padding: 10px 20px; + background: #333; + color: rgb(225, 225, 225); + cursor: pointer; + border-radius: 6px; + border: 1px solid black; +} + +.custom-button:hover { + border-color: white; + color: white; +} + +.response-block { + margin-top: auto; + width: 20%; + display: flex; + flex-direction: column; + justify-content: left; +} + +.image-box { + border: 1px solid black; + background: rgb(69, 69, 69); + height: 300px; + width: 500px; + margin-top: 40px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 8px; + opacity: 0.5; +} + +.image-box.active { + opacity: 1; + background: none; + border: none; } \ No newline at end of file diff --git a/cnn_website/src/Bird_CNN.jsx b/cnn_website/src/Bird_CNN.jsx index d5b9d49..d536fc3 100644 --- a/cnn_website/src/Bird_CNN.jsx +++ b/cnn_website/src/Bird_CNN.jsx @@ -1,18 +1,29 @@ import { useState } from 'react' +import { useRef } from "react"; import './Bird_CNN.css' function Bird_CNN() { const apiUrl = process.env.NODE_ENV === "development" - ? "http://127.0.0.1:8000" + ? "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 handleImage = (e) => { setFile(e.target.files[0]); + + if (e.target.files[0]) { + setPreview(URL.createObjectURL(e.target.files[0])); + boxRef.current.classList.add("active"); + } + setConfidence(null); + setBirdClass(null); }; const sendImage = async (e) => { @@ -46,10 +57,30 @@ function Bird_CNN() { return ( <> -

bird-cnn

-
- - +
+
+

Bird Species Expert

+
+ + +
+ +
+ {preview && ( + preview + )} +
diff --git a/cnn_website/src/Menu.css b/cnn_website/src/Menu.css index 7e3611a..a4fdcda 100644 --- a/cnn_website/src/Menu.css +++ b/cnn_website/src/Menu.css @@ -1,4 +1,12 @@ #navbar-main { + width: 90%; + height: 80px; display: flex; 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; } \ No newline at end of file diff --git a/cnn_website/src/index.css b/cnn_website/src/index.css index e69de29..8a472dc 100644 --- a/cnn_website/src/index.css +++ b/cnn_website/src/index.css @@ -0,0 +1,3 @@ +body { + background: rgb(130, 170, 205); +} \ No newline at end of file