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

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

@@ -0,0 +1,67 @@
+<template>
+  <v-app>
+    <v-app-bar title="Seasoned AI Recipe Parser" color="primary"></v-app-bar>
+    <v-main>
+      <v-container>
+        <v-card class="mx-auto mt-5" max-width="600">
+          <v-card-text>
+            <v-file-input
+              v-model="selectedFile"
+              label="Upload Recipe Photo"
+              accept="image/*"
+              prepend-icon="mdi-camera"
+              @change="onFileSelect"
+            ></v-file-input>
+            
+            <v-btn 
+              :loading="loading" 
+              color="success" 
+              block 
+              @click="uploadImage"
+              :disabled="!selectedFile"
+            >
+              Analyze with C# Backend
+            </v-btn>
+          </v-card-text>
+        </v-card>
+
+        <v-card v-if="recipe" class="mx-auto mt-5" max-width="600">
+          <v-card-title>{{ recipe.title }}</v-card-title>
+          <v-card-text>
+            <div class="text-subtitle-1">Ingredients:</div>
+            <ul>
+              <li v-for="item in recipe.ingredients" :key="item">{{ item }}</li>
+            </ul>
+          </v-card-text>
+        </v-card>
+      </v-container>
+    </v-main>
+  </v-app>
+</template>
+
+<script setup>
+import axios from 'axios'
+const selectedFile = ref(null)
+const loading = ref(false)
+const recipe = ref(null)
+
+const uploadImage = async () => {
+  if (!selectedFile.value) return
+  loading.value = true
+  
+  const formData = new FormData()
+  // We use [0] because v-file-input returns an array
+  formData.append('image', selectedFile.value[0])
+
+  try {
+    // This points to your C# Backend we built earlier!
+    const response = await axios.post('http://localhost:5000/api/recipe/upload', formData)
+    recipe.value = response.data
+  } catch (error) {
+    console.error("Backend Error:", error)
+    alert("Make sure your C# Backend is running on port 5000!")
+  } finally {
+    loading.value = false
+  }
+}
+</script>