modal working

pranjalkar99 · Nov 30, 2023 · 02f0606 · 02f0606
1 parent 86386ee
commit 02f0606
Show file tree

Hide file tree

Showing 3 changed files with 138 additions and 121 deletions.
diff --git a/.firebase/hosting.ZGlzdA.cache b/.firebase/hosting.ZGlzdA.cache
@@ -1,43 +1,43 @@
-index.html,1700823767695,6e7b6057c2b3b4a04f2faf530befe5d6ffe1e03a637f401f7107b1edb3538648
-manifest.webmanifest,1700823767695,b4c3d3ed910cd5f728973ce2422e66b396a34ae1a7382cd6747406d39aa8f34d
-favicon.png,1700823754051,b1478580497a5822da29f6e15dcb675c88e05446c6b3d13001abb36cfffd80a9
-registerSW.js,1700823767695,cffcd66cea54ba3f643931972304147da9b9e11da6411f809b0c540221cffb5e
-sw.js,1700823771523,d39ff554d249ab0346212be3c7a040a4f3788cf88eea6c7a9ddd94ed5d9727da
-assets/DetailsPage-61b03295.js,1700823767691,6c68ba0cec4e9c2776549890ca18f7edfec2da7cbae8c4df22e688b26f6f19b2
-assets/DetailsPage-legacy-7f32cc11.js,1700823767283,59dbae387f21ccd1707086f6a25773b5ead5efed7cb1784781d3d994053db8c2
-assets/DetailsPage-de62a9a0.css,1700823767691,f68bea2e3a9ca3d9f58dff8ed7bf72edcefbd6e060eced31d23ee076891aeffb
-assets/HomePage-d3734d87.css,1700823767691,a2590ce4c908e94fb6a020be0ea0f826ad387adc9a0a961c3b1e6b554ab5be93
-workbox-fa446783.js,1700823771539,b050508a87d24b9846f2ec33341530d16d32b7a9d56b01bc96ea2d14a88bf57d
-assets/PlantDetailsPage-2d42f678.js,1700823767691,91a814d4602d31062e39961425a756825ea1069dc6bdbd6d25ee29444b48e52b
-assets/PlantDetailsPage-9f7c5337.css,1700823767691,61ac82c8f378c32b7c86cac0e24f2bffa0f40b14df55d8b007f8932c7df1e311
-assets/HomePage-legacy-0f7b2b1a.js,1700823767283,6b416f9876e8382f03c55c906a781efe0380117e643c492b3896b14c33ac1c55
-assets/RadioPage-5be363b1.css,1700823767691,fad6085e69524bcefb45a03a3080e6649553e7b92deb9b7e1f1bc6ae45f065df
-assets/RadioPage-5f55041b.js,1700823767691,c1147a5db01af6a45251b7d7eeeaf0c101a9df3ed08f20d6c9ce2c0103474a69
-assets/RadioPage-legacy-caebfc66.js,1700823767283,bfe6201002653a6d4fd026322a85664be3a862a6b6e601488ee6d03edecc4346
-assets/focus-visible-9c13edeb.js,1700823767691,11c57e7f8a3a0138cc50ff7d77667afa69ce70d67ac3d9f341f9127892155e92
-assets/PlantDetailsPage-legacy-54da1cf6.js,1700823767283,a518cfb01ad1ee5f1b35117a42252c22bc36cd4a2d31ce31d062b6e66f7969a9
-assets/focus-visible-legacy-b3e947fe.js,1700823767283,72b934c8e6f3da2be2e09fea9326bd5552e53cbe8a0aeaec576ba47d6484c17d
-assets/index9-32db5acd.js,1700823767691,842ded9b2db942d44f6813aeff65ea382e63940a700acb03e67a1f0d584bc6f1
-assets/index9-legacy-bf1fd525.js,1700823767283,a691d1b7c5ecd348740953ebc507815f0712a3bb1535630bce226f4fc2f44149
-assets/input-shims-869ac33d.js,1700823767691,f6b49d3670d226c63ca114c0eca537e3cd8552cb6100823ee29da93d12ff69b9
-assets/input-shims-legacy-a47e4128.js,1700823767283,95b49781a61213144b205330606a1f548f1eb141bf54605f8ac3f51d7ab6437f
-assets/ios.transition-457a2fd0.js,1700823767691,15895e0480996631817b63a73812e1113648acf4f7c9cf30c5f895b1ddd8ec04
-assets/keyboard2-071ca0c2.js,1700823767691,2a17fa9897ac8a5205a55bf5b2fed089d3d04455b8a4275270540a0adbaaa486
-assets/index-a9f1f86f.css,1700823767691,5726ec8054325ed5525606403042832323081fd1a7a844ce4ab682b3ca63608a
-assets/keyboard2-legacy-fa98afaa.js,1700823767283,2eeb32f13e2163e0db9ca06d5083e11621fd2bcd17f9b18b41c4418a2ea7bf08
-assets/md.transition-23b453f8.js,1700823767691,a249a571fbb44ca7c8a835daa9fa59aa69631e8aab824aa18d35bcaa33fd2552
-assets/ios.transition-legacy-1000ca4b.js,1700823767283,1a182082f6b7ec96b3b9a00837f45ff497c786c40cdc48df74faad3981ee03b2
-assets/md.transition-legacy-9e8482e3.js,1700823767283,f5d5e926e4af21223f64e37f1601b82a26fadeb2bdabe6e750d33be799e6912e
-assets/status-tap-3e30b89f.js,1700823767691,89528779990145811e8de02c6bc5c42d66b3facd5df82d3c8e2a1d01833426e8
-assets/swipe-back-76cd2adf.js,1700823767691,fc0e68bb3b5a84c6deb5337b0c4e4962fb4f801554d540039ba89212c9e9c727
-assets/web-legacy-ae54c251.js,1700823767283,0b283ace09c38ad2320093b334c550a6e16431b8a6f12f9335bc3307690d90bd
-assets/web-38e1ab89.js,1700823767691,25980d0f8cab1c8d199df2848485dc51e6688a0238cf00d94b8490cdc3aac265
-assets/HomePage-c54a2b4f.js,1700823767711,7fa341b9d13c8d2fde83f21168265ffa8ecb242045f68696f67c8172f6291433
-assets/swipe-back-legacy-b6f35990.js,1700823767283,c6526ee45a06cfd8984fe8ef5cb102835d678f6af37d4a7f03e159e33eb362f9
-assets/web-5bf9ed7b.js,1700823767691,1f144bcaf41f5f4766fa17947329fa66e23836101ce99a78bed24de143328e6a
-assets/polyfills-legacy-c89c4da6.js,1700823767287,db38a6ecf381c944347ec3031b970c79247cfaeba5cfd5926fc06704c20a9b75
-assets/web-legacy-20fc53a7.js,1700823767283,4abf413ad9fcbd531039b938ae2cf97a13d87701e224df9ebf822be6bdd10b4e
-assets/status-tap-legacy-0f43bcc7.js,1700823767283,1878d2eb7ccd703d1220575fbb7bec1ed620ac30e940dd9ab44fb4dcbb4f654e
-assets/index-ce44e868.js,1700823767711,52164561ada1d72e7ae80df86a497544e93ef8f749dd38ed11795de2d31f9644
-assets/index-legacy-e30e029d.js,1700823767287,a87f5710799af4e8563cd685acba7db138eb60dbcc01979593e59df17c424862
-plant_village-1.0.2.png,1700823754071,6cb07aaa72a124ea5f7df2e28faa662eb2d2d2840ccfb98cb0a0f1afafee42d9
+favicon.png,1701098104719,b1478580497a5822da29f6e15dcb675c88e05446c6b3d13001abb36cfffd80a9
+registerSW.js,1701098116651,cffcd66cea54ba3f643931972304147da9b9e11da6411f809b0c540221cffb5e
+sw.js,1701098118999,525043a08804d2006997a9fc5eaa04ec274acb48e212f150bc8a2b9010adfba5
+workbox-fa446783.js,1701098119011,b050508a87d24b9846f2ec33341530d16d32b7a9d56b01bc96ea2d14a88bf57d
+assets/DetailsPage-9260193d.js,1701098116651,2bd1f684a567b414b2c98778c557c2b2e7e616c406ca73d16230ba4c88b37add
+assets/DetailsPage-de62a9a0.css,1701098116651,f68bea2e3a9ca3d9f58dff8ed7bf72edcefbd6e060eced31d23ee076891aeffb
+assets/DetailsPage-legacy-1fa17fc0.js,1701098116207,319bd323955c6dbc3ac1b854fc19a0c9ef657ff197804d2e3383175976d5c963
+assets/HomePage-249a93ba.css,1701098116643,60929c034be972c1bde9ca8735ebfd90c4ef379d356fe6ddb996465f3264aa42
+index.html,1701098116651,f80fb07a9ad585789b1d24277c066ef2cab03a21772c52704c14912f7054d195
+manifest.webmanifest,1701098116651,b4c3d3ed910cd5f728973ce2422e66b396a34ae1a7382cd6747406d39aa8f34d
+assets/PlantDetailsPage-9f7c5337.css,1701098116643,61ac82c8f378c32b7c86cac0e24f2bffa0f40b14df55d8b007f8932c7df1e311
+assets/PlantDetailsPage-c174e9b1.js,1701098116643,fad9b08d0af62e1134b3fcb323e6f34bd6eba6b678cb19e24dc40c24942d5d3e
+assets/RadioPage-5be363b1.css,1701098116651,fad6085e69524bcefb45a03a3080e6649553e7b92deb9b7e1f1bc6ae45f065df
+assets/RadioPage-legacy-2a270b65.js,1701098116207,b37091476173811422370e130aa40de93049495fcb73c3cead96caf873c1d0cb
+assets/focus-visible-9c13edeb.js,1701098116651,11c57e7f8a3a0138cc50ff7d77667afa69ce70d67ac3d9f341f9127892155e92
+assets/focus-visible-legacy-b3e947fe.js,1701098116207,72b934c8e6f3da2be2e09fea9326bd5552e53cbe8a0aeaec576ba47d6484c17d
+assets/index-a9f1f86f.css,1701098116643,5726ec8054325ed5525606403042832323081fd1a7a844ce4ab682b3ca63608a
+assets/PlantDetailsPage-legacy-f5c0bb0f.js,1701098116207,c69c1660731de87820de1eb5fe5d03232029d7ccb66cc0fbcba0083b50e8d518
+assets/index9-dd6b0c70.js,1701098116643,21f04bbd0aaaf5420249b2e4a420a3fa8e9a313e7be1b156d0a6e86581b1f2d4
+assets/index9-legacy-614f9e07.js,1701098116203,60411f87953fc7a98744a3d306fbbecfa825f838c03efdd30ba2ead3d58fd985
+assets/input-shims-eb99b4e1.js,1701098116651,452b9fa3412f141abdde7955f92d3251f93a236626738c6a65ceb9b5a031fb22
+assets/ios.transition-f5c4069c.js,1701098116651,d5e88abfa154c72fb903e49069530c002b7b444f51fe69b90893ff12437b37b6
+assets/input-shims-legacy-ba1e673d.js,1701098116207,41fae66f6512ee367a38cd84d07fa58521d29749a2607a0c3eade846fd1b2d80
+assets/md.transition-6e7127a2.js,1701098116643,bc0b93add51b798044b83a16367106685f5e823bde8e326230c5226113551e16
+assets/md.transition-legacy-de5ec38b.js,1701098116203,7f4de6bc091383ca7b529ed5394eb76a52750d87bd1b97521d1af929762ab601
+assets/RadioPage-2f459df3.js,1701098116663,95ec91555d91d0742ccfaffe3c4c5caaf5c4fc29d16fd0adcfe59d076fb3d04c
+assets/status-tap-3b306f1d.js,1701098116651,2dbbfbada2c9069762ee2d6d1ba4832f4ed064f5b74bae1a1658249413047ded
+assets/status-tap-legacy-6a8be48c.js,1701098116207,8161e9ceb26b405ab6ad475ad8a715f6466e91a110fad0fe14bf53cdfb1f52b7
+assets/swipe-back-ee7c20b7.js,1701098116651,6c60a4c24a820128cd94593bb8bd3a0c705ef5d9099bae73e924ffe62c33f597
+assets/swipe-back-legacy-e231f1f9.js,1701098116203,0016de1de8142284a4c36ddb8708ef8ca36a4b6d21e89ba5c18298853361a5c9
+assets/web-d7b03cfc.js,1701098116651,a0b5a6ff55df92ed6d6102e85f8baa1c3d671f964273857e8919e08a700c86f8
+assets/web-legacy-2a895f26.js,1701098116207,2e5652d176fd83188636d8ca44d5c84feb02595c68d89c340fe84a4df984dbf4
+assets/web-legacy-be5a2453.js,1701098116207,8c0a348585afc0e857f5595e9f39711b1cc464fc72aa608b18ac08e61a709db9
+assets/temppage-19d79b4f.js,1701098116643,27b9f59399a915797324c710bb8e61d2ab6e76d8ac4a15d0af7951ce20c3d2b6
+assets/ios.transition-legacy-802b3afe.js,1701098116203,e3681a653042f7527ca5792a8d06b9d9e1133df4ae355369dbc369078b7eed7d
+assets/HomePage-legacy-ed93a7d1.js,1701098116207,6de9e168f8eac57d43c06ddd1184248dbc1f7b5d5ce25e18fcf2761a45d38739
+assets/HomePage-ae6b1775.js,1701098116663,61373e498797fadb484ec4e34922dc0be77119106ab506ad340e94d3486b12c2
+assets/temppage-legacy-a17315e1.js,1701098116199,8c6aa32bc45a7c38c36de95ac63d573b78f0d7bd9a607f39c4456b27261d919f
+assets/web-c22f4d7c.js,1701098116643,deca0f4e7f5774560e731407227adac035499418a5caa0f87ea9822831434195
+assets/polyfills-legacy-c89c4da6.js,1701098116207,db38a6ecf381c944347ec3031b970c79247cfaeba5cfd5926fc06704c20a9b75
+assets/index-1618e64d.js,1701098116663,11b01cedf4d9b6e48e433d17ed7634e1a0c1f905dc95cfc889d786af4409c222
+assets/index-legacy-39a9c10a.js,1701098116207,54d36620b839d9ac13d8a4ede68b8d2c2fdcdd04a844576c836e030eae6d8cf8
+plant_village-1.0.2.png,1701098104747,6cb07aaa72a124ea5f7df2e28faa662eb2d2d2840ccfb98cb0a0f1afafee42d9
diff --git a/dev-dist/sw.js b/dev-dist/sw.js
@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.tv4s6gir0q"
+    "revision": "0.ivl8m13g89o"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

diff --git a/src/views/HomePage.vue b/src/views/HomePage.vue
@@ -16,39 +16,11 @@
                   <ion-card>
                     <ion-img :src="photo.webviewPath"></ion-img>
                     <ion-card-content>
-                      <ion-button
-                        v-if="!photo.prediction && !photo.processing"
-                        shape="round"
-                        @click="getInference(photo)"
-                      >
+                      <ion-button v-if="!photo.prediction && !photo.processing" shape="round"
+                        @click="getInference(photo)">
                         Get Inference
                       </ion-button>
 
-                      <!-- Loading Spinner -->
-                      <ion-spinner v-if="photo.processing" color="success"></ion-spinner>
-                               <ion-button expand="block" @click="() => setOpen(true)">Open</ion-button>
-
-<div v-if="photo.prediction !== undefined">
-    <ion-content class="ion-padding">
-    <ion-modal :is-open="isOpen">
-      <ion-header>
-        <ion-toolbar>
-          <ion-title>Modal</ion-title>
-          <ion-buttons slot="end">
-            <ion-button @click="setOpen(false)">Close</ion-button>
-          </ion-buttons>
-        </ion-toolbar>
-      </ion-header>
-      <ion-content class="ion-padding">
-        <p>
-          Lorem ipsum dolor sit amet consectetur adipisicing elit. Magni illum quidem recusandae ducimus quos
-          reprehenderit. Veniam, molestias quos, dolorum consequuntur nisi deserunt omnis id illo sit cum qui. Eaque,
-          dicta.
-        </p>
-      </ion-content>
-    </ion-modal>
-    </ion-content>
-</div>
                       <div v-if="photo.prediction !== undefined">
                         <ion-card-title>
                           <span class="predicted-class-key">Predicted Class:</span>
@@ -62,38 +34,82 @@
                               ).toFixed(2)
                             }}%
                           </ion-badge> -->
+
                         </ion-card-title>
                         <!-- <ion-button @click="goToDetailsPage">Show Details</ion-button> -->
+                        <!-- Loading Spinner -->
+                        <!-- <ion-spinner v-if="photo.processing" color="success"></ion-spinner>
+                      <ion-button expand="block" @click="() => setOpen(true)">Open</ion-button>
+
+                      
                         <ion-item v-if="photo.prediction.details && photo.showDetails">
                           <ion-label>Details:</ion-label>
                           <ion-text>
                             <pre>{{
                               JSON.stringify(photo.prediction.details, null, 2)
                             }}</pre>
                           </ion-text>
-                        </ion-item>
+                        </ion-item> -->
 
-                        <ion-button @click="handleDetailsClick(photo)">
+                        <!-- <ion-button @click="handleDetailsClick(photo)">
                           {{ photo.showDetails ? "Hide Details" : "Show Details" }}
-                        </ion-button>
+                        </ion-button> -->
                       </div>
-                      <ion-select
-                        v-if="!photo.prediction && !photo.processing"
-                        placeholder="Select Option"
-                        @ionChange="handleDropdownChange"
-                      >
-                        <ion-select-option value="option1"
-                          >Model-1(PlantVillage Dataset){default}</ion-select-option
-                        >
-                        <ion-select-option value="option2"
-                          >Model-2(Own 27 classes Dataset)</ion-select-option
-                        >
-                        <ion-select-option value="option3"
-                          >Model-3(Plant Leaf dataset)</ion-select-option
-                        >
-                        <ion-select-option value="option4"
-                          >Model-3(Merged Plant dataset{25 classes})</ion-select-option
-                        >
+
+                      <ion-button v-if="photo.prediction" @click="() => setOpen(true)">
+                        Show Details
+
+                        <ion-content class="ion-padding">
+                          <ion-modal :is-open="isOpen">
+                            <ion-header>
+                              <ion-toolbar>
+                                <ion-title>Modal</ion-title>
+                                <ion-buttons slot="end">
+                                  <ion-button @click="setOpen(false)">Close</ion-button>
+                                </ion-buttons>
+                              </ion-toolbar>
+                            </ion-header>
+                            <ion-content class="ion-padding">
+                              <p>
+                                {{ photo.prediction.predicted_class }}
+                              </p>
+                              <p v-if="photo.details">
+  <!-- Parse the JSON string into an object -->
+  <strong>Plant Name:</strong> {{ photo.details[0]['Plant Name'] }}<br>
+  <strong>Full Scientific Name:</strong> {{ photo.details[0]['Full Scientific Name'] }}<br>
+  <strong>Common Names in India:</strong> {{ photo.details[0]['Common Names in India'] }}<br>
+
+  <strong>Medicinal Uses:</strong>
+  <ul>
+    <li v-for="use in photo.details[0]['Medicinal Uses']">{{ use }}</li>
+  </ul>
+
+  <strong>Diseases Treated:</strong>
+  <ul>
+    <li v-for="disease in photo.details[0]['Diseases Treated']">{{ disease }}</li>
+  </ul>
+
+  <!-- Repeat a similar pattern for other sections -->
+
+  <strong>Sources:</strong>
+  <ul>
+    <li v-for="source in photo.details[0]['Sources']">
+      <a :href="source">{{ source }}</a>
+    </li>
+  </ul>
+</p>
+
+                            </ion-content>
+                          </ion-modal>
+                        </ion-content>
+                      </ion-button>
+
+                      <ion-select v-if="!photo.prediction && !photo.processing" placeholder="Select Option"
+                        @ionChange="handleDropdownChange">
+                        <ion-select-option value="option1">Model-1(PlantVillage Dataset){default}</ion-select-option>
+                        <ion-select-option value="option2">Model-2(Own 27 classes Dataset)</ion-select-option>
+                        <ion-select-option value="option3">Model-3(Plant Leaf dataset)</ion-select-option>
+                        <ion-select-option value="option4">Model-4(Merged Plant dataset{25 classes})</ion-select-option>
                         <!-- Add more options as needed -->
                       </ion-select>
                     </ion-card-content>
@@ -136,26 +152,26 @@
 <script lang="ts">
 import axios from "axios";
 import {
-    IonContent,       
-    IonPage,
-    IonHeader,
-    IonTitle,
-    IonToolbar,
-    IonFab,
-    IonFabButton,
-    IonButtons,
-    IonButton,
-    IonModal,
-    IonIcon,
-    IonGrid,
-    IonRow,
-    IonCol,
-    IonImg,
-    IonCard,
-    IonCardContent,
-    IonSelect,
-    IonSelectOption,
-  
+  IonContent,
+  IonPage,
+  IonHeader,
+  IonTitle,
+  IonToolbar,
+  IonFab,
+  IonFabButton,
+  IonButtons,
+  IonButton,
+  IonModal,
+  IonIcon,
+  IonGrid,
+  IonRow,
+  IonCol,
+  IonImg,
+  IonCard,
+  IonCardContent,
+  IonSelect,
+  IonSelectOption,
+
 } from "@ionic/vue";
 import { ref } from "vue";
 import { camera } from "ionicons/icons";
@@ -172,11 +188,11 @@ const details = ref(null);
 
 
 
- 
+
 
 export default {
   components: {
-    IonContent,                       
+    IonContent,
     IonPage,
     IonHeader,
     IonTitle,
@@ -208,10 +224,10 @@ export default {
   setup() {
     const { takePhoto, photos } = useCamera();
     const isOpen = ref(false);
-   const setOpen = (open) => {
-  console.log("Setting isOpen to:", open);
-  isOpen.value = open;
-};
+    const setOpen = (open) => {
+      console.log("Setting isOpen to:", open);
+      isOpen.value = open;
+    };
 
     const handleDropdownChange = (event) => {
       selectedOption.value = event.detail.value; // Update the selected option
@@ -283,7 +299,8 @@ export default {
         photo.prediction = axiosResponse.data;
         photo.processing = false;
         if (axiosResponse.data.details) {
-          photo.details = axiosResponse.data.details;
+          photo.details = JSON.parse(axiosResponse.data.details);
+          console.log("this is inside photo.details:",photo.details);
         }
       } catch (error) {
         console.error("Error sending photo:", error);