Hugging Face's logo

Spaces:
BraydenMoore
/
plantvision
Running

App Files Community
BraydenMoore commited on
Commit
b11b450
·
1 Parent(s): 77858b6

Update styling

Browse files
Files changed (3) hide show
  1. web/static/script.js +1 -1
  2. web/static/styles.css +4 -10
  3. web/templates/index.html +4 -3
web/static/script.js CHANGED
@@ -1,6 +1,6 @@
1
  document.addEventListener("DOMContentLoaded", () => {
2
  let lastUploadedImage = null;
3
- const dropzone = document.getElementById("image-dropzone");
4
  const featureSelect = document.getElementById("feature-select");
5
  const thinkingText = document.getElementById("thinking-text");
6
 
 
1
  document.addEventListener("DOMContentLoaded", () => {
2
  let lastUploadedImage = null;
3
+ const dropzone = document.getElementById("dropzone");
4
  const featureSelect = document.getElementById("feature-select");
5
  const thinkingText = document.getElementById("thinking-text");
6
 
web/static/styles.css CHANGED
@@ -31,10 +31,9 @@ body {
31
  margin: 20px auto; /* Auto margins for horizontal centering */
32
  }
33
 
34
- .right-container {
35
  margin-top: 20px;
36
  width: 95%;
37
- padding: 20px;
38
  border: 2px solid #000000;
39
  display: block;
40
  margin: 20px auto; /* Auto margins for horizontal centering */
@@ -61,7 +60,7 @@ body {
61
  display: grid;
62
  row-gap: 1%;
63
  column-gap: 1%;
64
- width: 100%;
65
  grid-template-columns: repeat(3, 1fr);
66
  grid-template-rows: repeat(3, fr);
67
  position: relative; /* Set the container as a relative positioning context */
@@ -164,16 +163,11 @@ visibility: visible; /* Show the tooltip on image hover */
164
  text-align: center;
165
  }
166
 
167
- .container {
168
- flex-direction: row;
169
- justify-content: space-around;
170
- }
171
-
172
- .left-container, .dropzone {
173
  width: 48%;
174
  }
175
 
176
- .right-container {
177
  width: 48%;
178
  }
179
 
 
31
  margin: 20px auto; /* Auto margins for horizontal centering */
32
  }
33
 
34
+ .prediction-container {
35
  margin-top: 20px;
36
  width: 95%;
 
37
  border: 2px solid #000000;
38
  display: block;
39
  margin: 20px auto; /* Auto margins for horizontal centering */
 
60
  display: grid;
61
  row-gap: 1%;
62
  column-gap: 1%;
63
+ width: 95%;
64
  grid-template-columns: repeat(3, 1fr);
65
  grid-template-rows: repeat(3, fr);
66
  position: relative; /* Set the container as a relative positioning context */
 
163
  text-align: center;
164
  }
165
 
166
+ .dropzone {
 
 
 
 
 
167
  width: 48%;
168
  }
169
 
170
+ .prediction-container {
171
  width: 48%;
172
  }
173
 
web/templates/index.html CHANGED
@@ -1,6 +1,7 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
 
4
  <title>What Plant Is This?</title>
5
  <link rel="stylesheet" href="static/styles.css">
6
  <link rel="icon" type="image/png" href="https://images.squarespace-cdn.com/content/v1/64790f5777b5d772678cce83/6d71eaee-f825-4324-be9b-2def32469eac/Untitled+drawing+%2811%29.png?format=100w">
@@ -20,14 +21,14 @@
20
  </select>
21
  </div>
22
 
23
- <div id="image-dropzone" class="dropzone">
24
  <p>Drop an image</p>
25
  </div>
26
 
27
  <img id="uploaded-image" src="#" alt="Uploaded Image" />
28
 
29
- <div class="right-container">
30
- <h2 id="thinking-text">Suggestions will appear here...</h2>
31
  <div class="image-grid">
32
  <div id="predicted-images">
33
  </div>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
5
  <title>What Plant Is This?</title>
6
  <link rel="stylesheet" href="static/styles.css">
7
  <link rel="icon" type="image/png" href="https://images.squarespace-cdn.com/content/v1/64790f5777b5d772678cce83/6d71eaee-f825-4324-be9b-2def32469eac/Untitled+drawing+%2811%29.png?format=100w">
 
21
  </select>
22
  </div>
23
 
24
+ <div id="dropzone" class="dropzone">
25
  <p>Drop an image</p>
26
  </div>
27
 
28
  <img id="uploaded-image" src="#" alt="Uploaded Image" />
29
 
30
+ <div id="prediction-container" class="prediction-container">
31
+ <p id="thinking-text">Suggestions will appear here...</p>
32
  <div class="image-grid">
33
  <div id="predicted-images">
34
  </div>