Organize workspace: Frontend, Backend, and Tests in one repo

.vscode-server/data/User/History/-4dbca32d/wG0o.vue

@@ -0,0 +1,82 @@
+<template>
+  <v-app>
+    <v-main>
+      <v-container>
+        <v-card class="pa-5 mx-auto mt-10" max-width="500" elevation="10">
+          <v-card-title class="text-center">Seasoned AI</v-card-title>
+          
+          <v-divider class="my-3"></v-divider>
+
+          <v-file-input
+            v-model="files"
+            label="Pick a recipe photo"
+            prepend-icon="mdi-camera"
+            variant="outlined"
+            accept="image/*"
+          ></v-file-input>
+
+          <v-btn 
+            color="primary" 
+            block 
+            size="x-large"
+            :loading="loading"
+            @click="uploadImage"
+          >
+            Analyze Recipe
+          </v-btn>
+
+          <div v-if="recipe" class="mt-5">
+            <h3 class="text-h6">{{ recipe.title }}</h3>
+            <p>{{ recipe.description }}</p>
+          </div>
+        </v-card>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+import axios from 'axios'
+import { ref } from 'vue'
+
+const files = ref([])
+const loading = ref(false)
+const recipe = ref(null)
+
+const uploadImage = async () => {
+  // 1. Debug: Check what Vuetify is actually giving us
+  console.log("Files variable:", files.value);
+
+  // Vuetify 3 v-file-input can return a single File or an Array of Files
+  // We need to ensure we have the actual File object
+  const fileToUpload = Array.isArray(files.value) ? files.value[0] : files.value;
+
+  if (!fileToUpload) {
+    alert("Please select a file first!");
+    return;
+  }
+
+  loading.value = true;
+  const formData = new FormData();
+  
+  // 2. Append the file. The string 'image' MUST match your C# parameter name
+  formData.append('image', fileToUpload);
+
+  try {
+    // 3. Post with explicit multipart/form-data header (Axios usually does this, but let's be sure)
+    const response = await axios.post('http://localhost:5000/api/recipe/upload', formData, {
+      headers: {
+        'Content-Type': 'multipart/form-data'
+      }
+    });
+    
+    recipe.value = response.data;
+    console.log("Success:", response.data);
+  } catch (error) {
+    console.error("Detailed Error:", error.response?.data || error.message);
+    alert("Backend error: Check the browser console for details.");
+  } finally {
+    loading.value = false;
+  }
+}
+</script>