diff --git a/cnn_website/src/Bird_CNN.css b/cnn_website/src/Bird_CNN.css index 42d7671..2186d8e 100644 --- a/cnn_website/src/Bird_CNN.css +++ b/cnn_website/src/Bird_CNN.css @@ -13,11 +13,13 @@ .custom-button:hover { border-color: white; + color: white; } .custom-button.inactive { opacity: 0.3; cursor: default; + color: black; } .custom-button.inactive:hover { diff --git a/cnn_website/src/Bird_CNN.jsx b/cnn_website/src/Bird_CNN.jsx index 8b3629e..27ff56d 100644 --- a/cnn_website/src/Bird_CNN.jsx +++ b/cnn_website/src/Bird_CNN.jsx @@ -15,26 +15,41 @@ function Bird_CNN() { const [loading, setLoading] = useState(false); const fileInputRef = useRef(null); const uploadButton = useRef(null); - const scrollRef = useRef(null); + const scrollRefClassifiction = useRef(null); + const scrollRefUploadButton = useRef(null); + + const isPartiallyInViewport = (el) => { + if (!el) return false; + + const rect = el.getBoundingClientRect(); + + return ( + rect.top < window.innerHeight && + rect.bottom > 0 + ); + }; const handleImageDivClick = () => { fileInputRef.current.click(); } const handleImage = (e) => { - if (e.target.files[0]) { - setFile(e.target.files[0]); - setPreview(URL.createObjectURL(e.target.files[0])); - uploadButton.current.classList.remove("inactive"); - } + if (!e.target.files[0]) { return; } + setFile(e.target.files[0]); + setPreview(URL.createObjectURL(e.target.files[0])); + uploadButton.current.classList.remove("inactive"); + + scrollRefUploadButton.current.scrollIntoView({ behavior: "smooth" }); + setConfidence(null); setBirdClass(null); + }; const sendImage = async (e) => { if (!file) return; - scrollRef.current.scrollIntoView({ behavior: "smooth" }); + scrollRefClassifiction.current.scrollIntoView({ behavior: "smooth" }); const formData = new FormData(); formData.append("file", file); @@ -76,7 +91,7 @@ function Bird_CNN() {