playing with AI import

vue3/src/pages/RecipeImportPage.vue

@@ -27,6 +27,12 @@
                                             </template>
                                         </v-text-field>
 
+                                        <v-file-input v-model="image" :label="$t('Image')" @click="uploadAndConvertImage()">
+                                            <template #append>
+                                                <v-btn>AI Import</v-btn>
+                                            </template>
+                                        </v-file-input>
+
                                         <!-- <v-textarea :placeholder="$t('paste_json')"></v-textarea> -->
 
                                         <v-alert variant="tonal" v-if="importResponse.duplicates && importResponse.duplicates.length > 0">
@@ -220,13 +226,17 @@ import {useDisplay} from "vuetify";
 
 const {mobile} = useDisplay()
 const router = useRouter()
-const {updateRecipeImage, fileApiLoading} = useFileApi()
+const {updateRecipeImage, convertImageToRecipe, fileApiLoading} = useFileApi()
 
 const stepper = ref("1")
 const dialog = ref(false)
 const loading = ref(false)
 const importUrl = ref("")
 
+
+
+const image = ref<null|File>(null)
+
 const importResponse = ref({} as RecipeFromSourceResponse)
 const keywordSelect = ref<null | SourceImportKeyword>(null)
 const editingIngredient = ref({} as SourceImportIngredient)
@@ -246,6 +256,14 @@ function loadRecipeFromUrl() {
     })
 }
 
+function uploadAndConvertImage(){
+    if(image.value != null){
+        convertImageToRecipe(image.value).then(r => {
+            importResponse.value = r
+        })
+    }
+}
+
 /**
  * create recipe in database
  */