Spaces:
Running
Running
Commit
·
7a85ee8
1
Parent(s):
c954660
Update styling
Browse files- web/static/script.js +13 -5
- web/static/styles.css +2 -0
- web/templates/index.html +6 -7
web/static/script.js
CHANGED
|
@@ -8,11 +8,14 @@ document.addEventListener("DOMContentLoaded", () => {
|
|
| 8 |
const predictedImagesContainer = document.getElementById("predicted-images");
|
| 9 |
predictedImagesContainer.innerHTML = "";
|
| 10 |
|
|
|
|
|
|
|
| 11 |
const imageElement = document.createElement("img");
|
| 12 |
imageElement.src = "static/loading.gif";
|
| 13 |
-
imageElement.style.height = "
|
| 14 |
-
imageElement.style.width = "
|
| 15 |
-
|
|
|
|
| 16 |
|
| 17 |
const selectedFeature = featureSelect.value;
|
| 18 |
const formData = new FormData();
|
|
@@ -41,8 +44,6 @@ document.addEventListener("DOMContentLoaded", () => {
|
|
| 41 |
uploadedImage.classList.add("uploaded-image");
|
| 42 |
uploadedImage.onload = async () => {
|
| 43 |
|
| 44 |
-
const dropzoneWidth = dropzone.offsetWidth;
|
| 45 |
-
const dropzoneHeight = dropzone.offsetHeight;
|
| 46 |
const imageWidth = uploadedImage.width;
|
| 47 |
const imageHeight = uploadedImage.height;
|
| 48 |
const widthScale = 225 / imageWidth;
|
|
@@ -100,6 +101,13 @@ featureSelect.addEventListener("change", () => {
|
|
| 100 |
|
| 101 |
function displayResults(data) {
|
| 102 |
thinkingText.innerText = "";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 103 |
const predictedImagesContainer = document.getElementById("predicted-images");
|
| 104 |
predictedImagesContainer.innerHTML = ""; // Clear previous images
|
| 105 |
|
|
|
|
| 8 |
const predictedImagesContainer = document.getElementById("predicted-images");
|
| 9 |
predictedImagesContainer.innerHTML = "";
|
| 10 |
|
| 11 |
+
const predictionContainer = document.getElementById("prediction-container");
|
| 12 |
+
|
| 13 |
const imageElement = document.createElement("img");
|
| 14 |
imageElement.src = "static/loading.gif";
|
| 15 |
+
imageElement.style.height = "50px";
|
| 16 |
+
imageElement.style.width = "50px";
|
| 17 |
+
imageElement.style.margin = 'auto';
|
| 18 |
+
predictionContainer.appendChild(imageElement);
|
| 19 |
|
| 20 |
const selectedFeature = featureSelect.value;
|
| 21 |
const formData = new FormData();
|
|
|
|
| 44 |
uploadedImage.classList.add("uploaded-image");
|
| 45 |
uploadedImage.onload = async () => {
|
| 46 |
|
|
|
|
|
|
|
| 47 |
const imageWidth = uploadedImage.width;
|
| 48 |
const imageHeight = uploadedImage.height;
|
| 49 |
const widthScale = 225 / imageWidth;
|
|
|
|
| 101 |
|
| 102 |
function displayResults(data) {
|
| 103 |
thinkingText.innerText = "";
|
| 104 |
+
|
| 105 |
+
const predictionContainer = document.getElementById("prediction-container");
|
| 106 |
+
const loadingImage = predictionContainer.querySelector('img[src="static/loading.gif"]');
|
| 107 |
+
if (loadingImage) {
|
| 108 |
+
predictionContainer.removeChild(loadingImage);
|
| 109 |
+
}
|
| 110 |
+
|
| 111 |
const predictedImagesContainer = document.getElementById("predicted-images");
|
| 112 |
predictedImagesContainer.innerHTML = ""; // Clear previous images
|
| 113 |
|
web/static/styles.css
CHANGED
|
@@ -3,6 +3,7 @@ body {
|
|
| 3 |
margin-top: 40px;
|
| 4 |
margin-left: 10px;
|
| 5 |
margin-right: 10px;
|
|
|
|
| 6 |
padding: 0;
|
| 7 |
text-align: center;
|
| 8 |
}
|
|
@@ -22,6 +23,7 @@ body {
|
|
| 22 |
.dropzone {
|
| 23 |
margin-top: 20px;
|
| 24 |
width: 95%;
|
|
|
|
| 25 |
border: 2px dashed #000000;
|
| 26 |
display: flex;
|
| 27 |
justify-content: center;
|
|
|
|
| 3 |
margin-top: 40px;
|
| 4 |
margin-left: 10px;
|
| 5 |
margin-right: 10px;
|
| 6 |
+
margin-bottom: 40px;
|
| 7 |
padding: 0;
|
| 8 |
text-align: center;
|
| 9 |
}
|
|
|
|
| 23 |
.dropzone {
|
| 24 |
margin-top: 20px;
|
| 25 |
width: 95%;
|
| 26 |
+
min-height: 50px;
|
| 27 |
border: 2px dashed #000000;
|
| 28 |
display: flex;
|
| 29 |
justify-content: center;
|
web/templates/index.html
CHANGED
|
@@ -9,16 +9,10 @@
|
|
| 9 |
<body>
|
| 10 |
<div class="header">
|
| 11 |
<h1>What Plant is This?</h1>
|
| 12 |
-
<p> Have a neural net try to identify the plant you found.</p>
|
| 13 |
</div>
|
| 14 |
|
| 15 |
-
<div id="dropzone" class="dropzone">
|
| 16 |
-
<p>Drop an image</p>
|
| 17 |
-
</div>
|
| 18 |
-
|
| 19 |
-
<img id="uploaded-image" src="#" alt="Uploaded Image" />
|
| 20 |
-
|
| 21 |
<div class="feature-select">
|
|
|
|
| 22 |
<select name="feature" id="feature-select">
|
| 23 |
<option value="flower">flower</option>
|
| 24 |
<option value="leaf">leaf</option>
|
|
@@ -26,6 +20,11 @@
|
|
| 26 |
</select>
|
| 27 |
</div>
|
| 28 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 29 |
<div id="prediction-container" class="prediction-container">
|
| 30 |
<p id="thinking-text">Suggestions will appear here...</p>
|
| 31 |
<div class="image-grid">
|
|
|
|
| 9 |
<body>
|
| 10 |
<div class="header">
|
| 11 |
<h1>What Plant is This?</h1>
|
|
|
|
| 12 |
</div>
|
| 13 |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 14 |
<div class="feature-select">
|
| 15 |
+
<label for="feature">Have a neural net try to identify your...</label>
|
| 16 |
<select name="feature" id="feature-select">
|
| 17 |
<option value="flower">flower</option>
|
| 18 |
<option value="leaf">leaf</option>
|
|
|
|
| 20 |
</select>
|
| 21 |
</div>
|
| 22 |
|
| 23 |
+
<div id="dropzone" class="dropzone">
|
| 24 |
+
<p>Drop an image</p>
|
| 25 |
+
</div>
|
| 26 |
+
<img id="uploaded-image" src="#" alt="Uploaded Image" />
|
| 27 |
+
|
| 28 |
<div id="prediction-container" class="prediction-container">
|
| 29 |
<p id="thinking-text">Suggestions will appear here...</p>
|
| 30 |
<div class="image-grid">
|