working 2 models

dev-dist/sw.js

@@ -82,7 +82,7 @@ define(['./workbox-5357ef54'], (function (workbox) { 'use strict';
     "revision": "3ca0b8505b4bec776b69afdba2768812"
   }, {
     "url": "index.html",
-    "revision": "0.3f70amjkti8"
+    "revision": "0.kh3hanp6om"
   }], {});
   workbox.cleanupOutdatedCaches();
   workbox.registerRoute(new workbox.NavigationRoute(workbox.createHandlerBoundToURL("index.html"), {

package.json

@@ -28,7 +28,8 @@
     "http-server": "^14.1.1",
     "ionicons": "^7.0.0",
     "vue": "^3.2.45",
-    "vue-router": "^4.1.6"
+    "vue-router": "^4.2.5",
+    "vuex": "^4.1.0"
   },
   "devDependencies": {
     "@capacitor/cli": "5.3.0",

src/router/index.ts

@@ -29,6 +29,7 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'plant',
+        name:'plant',
         component: () => import('../views/PlantDetailsPage.vue'),
       }
     ],

src/views/HomePage.vue

@@ -5,34 +5,57 @@
         <ion-title>Use Camera</ion-title>
       </ion-toolbar>
     </ion-header>
-    
+
     <ion-content>
       <ion-grid>
         <ion-row>
           <ion-col size="12">
-            <ion-scroll style="height: 100%;">
+            <ion-scroll style="height: 100%">
               <ion-row v-for="photo in photos" :key="photo.filepath">
                 <ion-col size="12">
                   <ion-card>
-                    <ion-img :src="photo.webviewPath" @click="showProgress(photo)"></ion-img>
+                    <ion-img
+                      :src="photo.webviewPath"
+                      @click="showProgress(photo)"
+                    ></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>
-                      
+
                       <div v-if="photo.prediction">
                         <ion-card-title>
-                          <span class="predicted-class-key">Predicted Class:</span> 
+                          <span class="predicted-class-key">Predicted Class:</span>
                           {{ photo.prediction.predicted_class }}
                           <ion-badge color="danger">
-                            {{ (Math.max(...photo.prediction.class_probabilities[0].map(value => value * 100))).toFixed(2) }}%
-
+                            {{
+                              Math.max(
+                                ...photo.prediction.class_probabilities[0].map(
+                                  (value) => value * 100
+                                )
+                              ).toFixed(2)
+                            }}%
                           </ion-badge>
                         </ion-card-title>
+                          <ion-button @click="goToDetailsPage">Show Details</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="option2">Model-3(Own 20 classes Dataset {500 each})</ion-select-option>
+                        <!-- Add more options as needed -->
+                      </ion-select>
                     </ion-card-content>
                   </ion-card>
                 </ion-col>
@@ -42,7 +65,7 @@
         </ion-row>
       </ion-grid>
     </ion-content>
-    
+
     <ion-footer>
       <div class="example-content">
         <!-- Add a button to trigger the camera -->
@@ -57,23 +80,21 @@
 </template>
 
 <style scoped>
-  .example-content {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    height: 100%;
-  }
-
-  .predicted-class-key {
-    font-weight: bold;
-    font-size: 1.2em;
-    text-decoration: underline;
-  }
-</style>
-
+.example-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+}
 
+.predicted-class-key {
+  font-weight: bold;
+  font-size: 1.2em;
+  text-decoration: underline;
+}
+</style>
 <script lang="ts">
-import axios from 'axios';
+import axios from "axios";
 import {
   IonContent,
   IonPage,
@@ -90,12 +111,19 @@ import {
   IonButton,
   IonCard,
   IonCardContent,
-} from '@ionic/vue';
-import { ref } from 'vue';
-import { camera } from 'ionicons/icons';
-import { useCamera } from '@/composables/useCamera';
+  IonSelect,
+  IonSelectOption,
+} from "@ionic/vue";
+import { ref } from "vue";
+import { camera } from "ionicons/icons";
+import { useCamera } from "@/composables/useCamera";
+import { useRouter } from "vue-router";
+
+
+const BACKEND_URL = ref("https://pranjalkar9-patta-ai.hf.space/predict/");
+const selectedOption = ref("option1"); // Add this line to store the selected option
+const details = ref(null);
 
-const BACKEND_URL = 'https://pranjalkar9-patta-ai.hf.space/predict/';
 
 export default {
   components: {
@@ -114,73 +142,89 @@ export default {
     IonButton,
     IonCard,
     IonCardContent,
+    IonSelect,
+    IonSelectOption,
   },
+   methods: {
+   goToDetailsPage() {
+  // Navigate to the details page
+  this.$router.push({ name: "plant", params: { details: JSON.parse(details.value) } });
+},
+
+   },
   setup() {
     const { takePhoto, photos } = useCamera();
-    function base64ToBlob(base64: string): Blob {
-     
-    const binaryString = window.atob(base64.split(',')[1]);
-    const len = binaryString.length;
-    const bytes = new Uint8Array(len);
-    for (let i = 0; i < len; i++) {
-        bytes[i] = binaryString.charCodeAt(i);
-    }
-    return new Blob([bytes], {type: 'image/jpeg'});
-}
 
+    const handleDropdownChange = (event) => {
+      selectedOption.value = event.detail.value; // Update the selected option
+      updateBackendUrl(); // Call the function to update the backend URL
+    };
 
-const getInference = async (photo: UserPhoto) => {
-  try {
-    photo.processing = true;
-    // Fetch the blob from the blob URL
-    const response = await fetch(photo.webviewPath);
-    const blob = await response.blob();
-
-    // Convert the blob to a base64 string
-    const reader = new FileReader();
-    reader.readAsDataURL(blob);
-    reader.onloadend = async function() {
-      const base64data = reader.result as string;
-      const base64Content = base64data.split(',')[1];
-
-      const formData = new FormData();
-      formData.append('file', blob, photo.filepath);
-
-      // Make the POST request
-      const response = await axios.post('https://pranjalkar9-patta-ai.hf.space/predict/', formData, {
-        headers: {
-          'Content-Type': 'multipart/form-data',
-          accept: 'application/json',
-        },
-      });
-      console.log(response.data)
-
-      photo.prediction = response.data;
-      photo.processing = false;
-    }
-  } catch (error) {
-    console.error("Error sending photo:", error);
-    photo.processing = false;
-  }
-};
+    const updateBackendUrl = () => {
+      switch (selectedOption.value) {
+        case "option1":
+          BACKEND_URL.value = "https://pranjalkar9-patta-ai.hf.space/predict/";
+          break;
+        case "option2":
+          BACKEND_URL.value = "https://pranjalkar9-patta-ai.hf.space/predict-self-dataset-27/";
+          break;
+        case "option3":
+          BACKEND_URL.value = "https://pranjalkar9-patta-ai.hf.space/predict_20/";
+          break;
+        // Add more cases if needed
+      }
+    };
 
+    const getInference = async (photo) => {
+      try {
+        photo.processing = true;
+        updateBackendUrl(); // Call the function to update the backend URL
+        console.log("We are now calling this URL:", BACKEND_URL.value);
+
+        // Convert the blob URL to a blob
+        const response = await fetch(photo.webviewPath);
+        const blob = await response.blob();
+
+        // Create a FormData object and append the blob
+        const formData = new FormData();
+        formData.append("file", blob, photo.filepath);
+
+        // Make the POST request
+        const axiosResponse = await axios.post(BACKEND_URL.value, formData, {
+          headers: {
+            "Content-Type": "multipart/form-data",
+            accept: "application/json",
+          },
+        });
+
+        console.log(axiosResponse.data);
+        
+        if (axiosResponse.data.details) {
+      // Navigate to the details page
+      console.log("go to /plant");
+      // Use Vue Router to navigate
+      details.value = axiosResponse.data.details;
+      // router.push({ name: "plant", params: { details } });
+    }
 
+console.log("This is now the details:",details.value)
+        photo.prediction = axiosResponse.data;
+        photo.processing = false;
+      } catch (error) {
+        console.error("Error sending photo:", error);
+        photo.processing = false;
+      }
+    };
 
     return {
       camera,
       takePhoto,
       photos,
       getInference,
+      BACKEND_URL,
+      handleDropdownChange,
     };
   },
 };
 </script>
 
-<style scoped>
-.example-content {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-}
-</style>