67 lines
1.9 KiB
Vue
67 lines
1.9 KiB
Vue
<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> |