dkguo · odina-1ai · Jul 25, 2023 · Jul 25, 2023 · Jul 25, 2023 · Jul 25, 2023
diff --git a/README.md b/README.md
@@ -1,6 +1,8 @@
 # Project Classification + X
 
-[See this example live!](https://dkguo.github.io/classification-web-template/)
+[See this example live!](https://odina-1ai.github.io/classification-web-templateORA/)
+
+
 
 This is a template website to host a TensorFlow JS (TFJS) version of image classification models online. 
 

diff --git a/data.json b/data.json
diff --git a/dataset-cover.png b/dataset-cover.png
diff --git a/favicon-16x16.png b/favicon-16x16.png
diff --git a/index.html b/index.html
@@ -14,51 +14,36 @@
 limitations under the License.
 ==============================================================================
 -->
-
+<!-- commit test -->
 <!doctype html>
 
 <head>
-  <title>Project Classification+X</title>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1">
-  <link rel="stylesheet" href="shared/tfjs-examples.css" />
-</head>
 
-<style>
-  .pred-container {
-    margin-bottom: 20px;
-  }
-
-  .pred-container > div {
-    display: inline-block;
-    margin-right: 20px;
-    vertical-align: top;
-  }
-
-  .row {
-    display: table-row;
-  }
-  .cell {
-    display: table-cell;
-    padding-right: 20px;
-  }
-
-  #file-container {
-    margin-bottom: 20px;
-  }
-</style>
+
+ <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Flowa-dex</title>
+    <link rel="icon" href="favicon-16x16.png">
+    <link rel="stylesheet" href="shared/tfjs-examples.css"/>    
+    <link rel="stylesheet" href="styles.css">
+
+
+</head>
 
 <body>
   <div class="tfjs-example-container">
     <section class='title-area'>
-      <h1>Fruits and Veggies Classification</h1>
+      <h1>Flower Classification</h1>
     </section>
 
     <section>
-      <img src="dataset.jpg" style="width: 50%;">
+      <img src="dataset-cover.png" style="width: 50%;">
       <p class='section-head'>Description</p>
+      <!-- new model card code here -->
       <p>
-        We classify 9 categories of fruits and veggies. 
+        Identifies species of flower in an image and provides information on the edibility of that flower. 
+        (want me to add a general statement about the model here as well?)
       </p>
     </section>
 
@@ -70,6 +55,8 @@ <h1>Fruits and Veggies Classification</h1>
     <section>
       <p class='section-head'>Model Output</p>
 
+      <div id="output-container"></div>
+
       <div id="file-container" style="display: none">
         Upload an image: <input type="file" id="files" name="files[]" multiple />
       </div>

diff --git a/index.js b/index.js
@@ -15,22 +15,121 @@
  * =============================================================================
  */
 const CLASSES_NAMES = {
-  0: 'apple',
-  1: 'avocado',
-  2: 'banana',
-  3: 'carrot',
-  4: 'lettuce',
-  5: 'onion',
-  6: 'pepper',
-  7: 'potato',
-  8: 'tomato',
+
+  0: 'Alpine sea holly',
+  1: 'Anthurium',
+  2: 'Artichoke',
+  3: 'Azalea',
+  4: 'Balloon Flower',
+  5: 'Barberton Daisy',
+  6: 'Bee Balm',
+  7: 'Bird of paradise',
+  8: 'Bishop of llandaf',
+  9: 'Black-eyed susan',
+  10: 'Blackberry lily',
+  11: 'Blanket Flower',
+  12: 'Bolero deep blue',
+  13: 'Bougainvillea',
+  14: 'Bromelia',
+  15: 'Buttercup',
+  16: 'Californian poppy',
+  17: 'Camellia',
+  18: 'Canna lily',
+  19: 'Canterbury bells',
+  20: 'Cape flower',
+  21: 'Carnation',
+  22: 'Cautleya Spicata',
+  23: 'Clematis',
+  24: 'Colts foot',
+  25: 'Columbine',
+  26: 'Common dandelian',
+  27: 'Common tulip',
+  28: 'Corn poppy',
+  29: 'Cosmos',
+  30: 'Cyclamen',
+  31: 'Daffodil',
+  32: 'Daisy',
+  33: 'Desert-rose',
+  34: 'Fire lily',
+  35: 'Foxglove',
+  36: 'Frangipani',
+  37: 'Fritillary',
+  38: 'Garden phlox',
+  39: 'Gaura',
+  40: 'Gazania',
+  41: 'Geranium',
+  42: 'Giant white arum lily',
+  43: 'Globe thistle',
+  44: 'Globe-flower',
+  45: 'Grape hyacinth',
+  46: 'Great masterwort',
+  47: 'Hard-leaved pocket orchid',
+  48: 'Hibiscus',
+  49: 'Hippeastrum',
+  50: 'Iris',
+  51: 'Japanese anemone',
+  52: 'King protea',
+  53: 'Lenten rose',
+  54: 'Lilac hibiscus',
+  55: 'Lotus',
+  56: 'Love in the mist',
+  57: 'Magnolia',
+  58: 'Mallow',
+  59: 'Marigold',
+  60: 'Mexican petunia',
+  61: 'Monkshood',
+  62: 'Moon orchid',
+  63: 'Morning glory',
+  64: 'Orange dahlia',
+  65: 'Osteospermum',
+  66: 'Passion flower',
+  67: 'Peruvian lily',
+  68: 'Petunia',
+  69: 'Pincushion flower',
+  70: 'Pink primrose',
+  71: 'Pink quill',
+  72: 'Pink-yellow dahlia',
+  73: 'Poinsettia',
+  74: 'Primula',
+  75: 'Prince of wales feathers',
+  76: 'Purple coneflower',
+  77: 'Red ginger',
+  78: 'Rose',
+  79: 'Ruby-lipped cattleya',
+  80: 'Siam tulip',
+  81: 'Silverbush',
+  82: 'Snapdragon',
+  83: 'Spear thistle',
+  84: 'Spring crocus',
+  85: 'Stemless gentian',
+  86: 'Sunflower',
+  87: 'Sweet pea',
+  88: 'Sweet william',
+  89: 'Sword lily',
+  90: 'Thorn apple',
+  91: 'Tiger lily',
+  92: 'Toad lily',
+  93: 'Tree mallow',
+  94: 'Tree poppy',
+  95: 'Trumpet creeper',
+  96: 'Wallflower',
+  97: 'Water lily',
+  98: 'Watercress',
+  99: 'Wild geranium',
+  100: 'Wild pansy',
+  101: 'Wild rose',
+  102: 'Windflower',
+  103: 'Yellow iris',
+
+
+
  }
 
 const MOBILENET_MODEL_PATH =
     // tslint:disable-next-line:max-line-length
     'model_tfjs';
 
-const IMAGE_SIZE = 128;
+const IMAGE_SIZE = 224;
 const TOPK_PREDICTIONS = 3;
 
 let mobilenet;
@@ -159,16 +258,25 @@ function showResults(imgElement, classes) {
     classElement.innerText = classes[i].className;
     row.appendChild(classElement);
 
-    // const predElement = document.createElement('div');
-    // classElement.className = 'cell';
-    // classElement.innerText = classes[i].pred;
-    // row.appendChild(classElement);
-
     const probsElement = document.createElement('div');
     probsElement.className = 'cell';
     probsElement.innerText = classes[i].probability.toFixed(3);
     row.appendChild(probsElement);
 
+    // const predElement = document.createElement('div');
+    // classElement.className = 'cell';
+    // classElement.innerText = classes[i].pred;
+    // row.appendChild(classElement);
+    var description = "";
+    for (var j = 0; j < jsonData.length; j++){
+      if (jsonData[j]["Flower Type"] === classes[i].className) {
+        description = jsonData[j]["Description"];}
+    }
+    const descriptionElement = document.createElement('div');
+    descriptionElement.className = 'cell';
+    descriptionElement.innerText = description;
+    row.appendChild(descriptionElement);
+
     probsContainer.appendChild(row);
   }
   predictionContainer.appendChild(probsContainer);
@@ -207,3 +315,15 @@ const status = msg => demoStatusElement.innerText = msg;
 const predictionsElement = document.getElementById('predictions');
 
 mobilenetDemo();
+
+async function fetchJSONData() {
+  try {
+    const response = await fetch('data.json'); 
+    jsonData = await response.json();
+    console.log('JSON data:', jsonData);
+    mobilenetDemo(); 
+  } catch (error) {
+    console.error('Error fetching JSON data:', error);
+  }
+}
+fetchJSONData();
diff --git a/model_tfjs/group1-shard10of20.bin b/model_tfjs/group1-shard10of20.bin
diff --git a/model_tfjs/group1-shard11of20.bin b/model_tfjs/group1-shard11of20.bin
diff --git a/model_tfjs/group1-shard12of20.bin b/model_tfjs/group1-shard12of20.bin
diff --git a/model_tfjs/group1-shard13of20.bin b/model_tfjs/group1-shard13of20.bin
diff --git a/model_tfjs/group1-shard14of20.bin b/model_tfjs/group1-shard14of20.bin
diff --git a/model_tfjs/group1-shard15of20.bin b/model_tfjs/group1-shard15of20.bin
diff --git a/model_tfjs/group1-shard16of20.bin b/model_tfjs/group1-shard16of20.bin
diff --git a/model_tfjs/group1-shard17of20.bin b/model_tfjs/group1-shard17of20.bin
diff --git a/model_tfjs/group1-shard18of20.bin b/model_tfjs/group1-shard18of20.bin
diff --git a/model_tfjs/group1-shard19of20.bin b/model_tfjs/group1-shard19of20.bin
diff --git a/model_tfjs/group1-shard1of20.bin b/model_tfjs/group1-shard1of20.bin
diff --git a/model_tfjs/group1-shard1of4.bin b/model_tfjs/group1-shard1of4.bin
diff --git a/model_tfjs/group1-shard20of20.bin b/model_tfjs/group1-shard20of20.bin
diff --git a/model_tfjs/group1-shard2of20.bin b/model_tfjs/group1-shard2of20.bin
diff --git a/model_tfjs/group1-shard2of4.bin b/model_tfjs/group1-shard2of4.bin
diff --git a/model_tfjs/group1-shard3of20.bin b/model_tfjs/group1-shard3of20.bin
diff --git a/model_tfjs/group1-shard3of4.bin b/model_tfjs/group1-shard3of4.bin
diff --git a/model_tfjs/group1-shard4of20.bin b/model_tfjs/group1-shard4of20.bin
diff --git a/model_tfjs/group1-shard4of4.bin b/model_tfjs/group1-shard4of4.bin
diff --git a/model_tfjs/group1-shard5of20.bin b/model_tfjs/group1-shard5of20.bin
diff --git a/model_tfjs/group1-shard6of20.bin b/model_tfjs/group1-shard6of20.bin
diff --git a/model_tfjs/group1-shard7of20.bin b/model_tfjs/group1-shard7of20.bin
diff --git a/model_tfjs/group1-shard8of20.bin b/model_tfjs/group1-shard8of20.bin
diff --git a/model_tfjs/group1-shard9of20.bin b/model_tfjs/group1-shard9of20.bin
diff --git a/model_tfjs/model.json b/model_tfjs/model.json
diff --git a/modelcard.html b/modelcard.html
@@ -0,0 +1,40 @@
+<!-- Model Card Draft
+
+/////template link: https://huggingface.co/docs/hub/model-cards
+/////ADD HTML TAGS
+
+(Possible name: Flowadex, Flowa-dex(not taken or copyright)) -->
+
+<h1>Model Title: Flower Identification Model</h1>
+<h2>Project Title: Rubber Duckies Model Card</h2>
+
+
+<p class = 'section-head'> Purpose:</p>
+<p> Meant to be used as an educational tool for users to determine whether flowers are posionous or not. <p>
+<p class = 'section-head'</p>
+<p> Current limitations: Flowers can be both posionous and edible, depending on dosage.
+- certain parts of flowers can be poisonous and other parts are not( are these concerns still relevant???) </p>
+
+<p>(What type of neural network/model? What functions are being used? One's binary and one's an image
+  classifier???) - Classification Model <br><br>
+
+Hyperparameters:<br>
+Batch Size:<br>
+Epochs:<br>
+Learning Rate:<br><br>
+
+Datasets used to train the model: 104 Flowers: Garden of Eden Kaggle Dataset<br>
+104 Classes<br>
+224x224x3 (what type of file? jpg? jpeg? png) Images<br>
+- 104 Training Images<br>
+- 7382 Test Images<br>
+- 104 Validation Images<br><br>
+
+(More details about images we choose to take around campus PLEASE)<br>
+https://www.kaggle.com/datasets/msheriey/104-flowers-garden-of-eden<br><br>
+
+Training Results: <br>
+Testing Results:<br>
+Validation Results:<br><br>
+
+  (Cite the Model Card Template Here so we don't get sued...) </p>
diff --git a/styles.css b/styles.css
@@ -0,0 +1,23 @@
+
+  .pred-container {
+    margin-bottom: 20px;
+  }
+
+  .pred-container > div {
+    display: inline-block;
+    margin-right: 20px;
+    vertical-align: top;
+  }
+
+  .row {
+    display: table-row;
+  }
+  .cell {
+    display: table-cell;
+    padding-right: 20px;
+  }
+
+  #file-container {
+    margin-bottom: 20px;
+  }
+