mirror of
https://github.com/mealie-recipes/mealie.git
synced 2026-04-08 22:15:34 -04:00
chore: Nuxt 4 upgrade (#7426)
This commit is contained in:
Kuchenpirat
GitHub
@@ -1,135 +0,0 @@
|
||||
<template>
|
||||
<v-container class="pa-0">
|
||||
<v-container>
|
||||
<BaseCardSectionTitle :title="$t('admin.debug-openai-services')">
|
||||
{{ $t('admin.debug-openai-services-description') }}
|
||||
<br>
|
||||
<DocLink
|
||||
class="mt-2"
|
||||
link="/documentation/getting-started/installation/open-ai"
|
||||
/>
|
||||
</BaseCardSectionTitle>
|
||||
</v-container>
|
||||
<v-form
|
||||
ref="uploadForm"
|
||||
@submit.prevent="testOpenAI"
|
||||
>
|
||||
<div>
|
||||
<v-card-text>
|
||||
<v-container class="pa-0">
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="auto"
|
||||
align-self="center"
|
||||
>
|
||||
<AppButtonUpload
|
||||
v-if="!uploadedImage"
|
||||
class="ml-auto"
|
||||
url="none"
|
||||
file-name="image"
|
||||
accept="image/*"
|
||||
:text="$t('recipe.upload-image')"
|
||||
:text-btn="false"
|
||||
:post="false"
|
||||
@uploaded="uploadImage"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="!!uploadedImage"
|
||||
color="error"
|
||||
@click="clearImage"
|
||||
>
|
||||
<v-icon start>
|
||||
{{ $globals.icons.close }}
|
||||
</v-icon>
|
||||
{{ $t("recipe.remove-image") }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
<v-row
|
||||
v-if="uploadedImage && uploadedImagePreviewUrl"
|
||||
style="max-width: 25%;"
|
||||
>
|
||||
<v-spacer />
|
||||
<v-col cols="12">
|
||||
<v-img :src="uploadedImagePreviewUrl" />
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<BaseButton
|
||||
type="submit"
|
||||
:text="$t('admin.run-test')"
|
||||
:icon="$globals.icons.check"
|
||||
:loading="loading"
|
||||
class="ml-auto"
|
||||
/>
|
||||
</v-card-actions>
|
||||
</div>
|
||||
</v-form>
|
||||
<v-divider
|
||||
v-if="response"
|
||||
class="mt-4"
|
||||
/>
|
||||
<v-container
|
||||
v-if="response"
|
||||
class="ma-0 pa-0"
|
||||
>
|
||||
<v-card-title> {{ $t('admin.test-results') }} </v-card-title>
|
||||
<v-card-text> {{ response }} </v-card-text>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { useAdminApi } from "~/composables/api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const api = useAdminApi();
|
||||
const i18n = useI18n();
|
||||
|
||||
// Set page title
|
||||
useSeoMeta({
|
||||
title: i18n.t("admin.debug-openai-services"),
|
||||
});
|
||||
|
||||
const loading = ref(false);
|
||||
const response = ref("");
|
||||
|
||||
const uploadedImage = ref<Blob | File>();
|
||||
const uploadedImageName = ref<string>("");
|
||||
const uploadedImagePreviewUrl = ref<string>();
|
||||
|
||||
function uploadImage(fileObject: File) {
|
||||
uploadedImage.value = fileObject;
|
||||
uploadedImageName.value = fileObject.name;
|
||||
uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
|
||||
}
|
||||
|
||||
function clearImage() {
|
||||
uploadedImage.value = undefined;
|
||||
uploadedImageName.value = "";
|
||||
uploadedImagePreviewUrl.value = undefined;
|
||||
}
|
||||
|
||||
async function testOpenAI() {
|
||||
response.value = "";
|
||||
|
||||
loading.value = true;
|
||||
const { data } = await api.debug.debugOpenAI(uploadedImage.value);
|
||||
loading.value = false;
|
||||
|
||||
if (!data) {
|
||||
alert.error("Unable to test OpenAI services");
|
||||
}
|
||||
else {
|
||||
response.value = data.response || (data.success ? "Test Successful" : "Test Failed");
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,257 +0,0 @@
|
||||
<template>
|
||||
<v-container class="pa-0">
|
||||
<v-container>
|
||||
<BaseCardSectionTitle :title="$t('admin.ingredients-natural-language-processor')">
|
||||
{{ $t('admin.ingredients-natural-language-processor-explanation') }}
|
||||
|
||||
<p class="pt-3">
|
||||
{{ $t('admin.ingredients-natural-language-processor-explanation-2') }}
|
||||
</p>
|
||||
</BaseCardSectionTitle>
|
||||
|
||||
<div class="d-flex align-center justify-center justify-md-start flex-wrap">
|
||||
<v-btn-toggle
|
||||
v-model="state.parser"
|
||||
density="compact"
|
||||
mandatory="force"
|
||||
@change="processIngredient"
|
||||
>
|
||||
<v-btn value="nlp">
|
||||
{{ $t('admin.nlp') }}
|
||||
</v-btn>
|
||||
<v-btn value="brute">
|
||||
{{ $t('admin.brute') }}
|
||||
</v-btn>
|
||||
<v-btn value="openai">
|
||||
{{ $t('admin.openai') }}
|
||||
</v-btn>
|
||||
</v-btn-toggle>
|
||||
<v-spacer />
|
||||
<v-checkbox
|
||||
v-model="showConfidence"
|
||||
class="ml-5"
|
||||
:label="$t('admin.show-individual-confidence')"
|
||||
hide-details
|
||||
/>
|
||||
</div>
|
||||
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-text-field
|
||||
v-model="state.ingredient"
|
||||
:label="$t('admin.ingredient-text')"
|
||||
/>
|
||||
</v-card-text>
|
||||
<v-card-actions>
|
||||
<BaseButton
|
||||
class="ml-auto"
|
||||
@click="processIngredient"
|
||||
>
|
||||
<template #icon>
|
||||
{{ $globals.icons.check }}
|
||||
</template>
|
||||
{{ $t("general.submit") }}
|
||||
</BaseButton>
|
||||
</v-card-actions>
|
||||
</v-card>
|
||||
</v-container>
|
||||
<v-container v-if="state.results">
|
||||
<div
|
||||
v-if="state.parser !== 'brute' && getConfidence('average')"
|
||||
class="d-flex"
|
||||
>
|
||||
<v-chip
|
||||
dark
|
||||
:color="getColor('average')"
|
||||
class="mx-auto mb-2"
|
||||
>
|
||||
{{ $t('admin.average-confident', [getConfidence("average")]) }}
|
||||
</v-chip>
|
||||
</div>
|
||||
<div
|
||||
class="d-flex justify-center flex-wrap"
|
||||
style="gap: 1.5rem"
|
||||
>
|
||||
<template v-for="(prop, index) in properties">
|
||||
<div
|
||||
v-if="prop.value"
|
||||
:key="index"
|
||||
class="flex-grow-1"
|
||||
>
|
||||
<v-card min-width="200px">
|
||||
<v-card-title> {{ prop.value }} </v-card-title>
|
||||
<v-card-text>
|
||||
{{ prop.subtitle }}
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
<v-chip
|
||||
v-if="prop.confidence && showConfidence"
|
||||
dark
|
||||
:color="prop.color!"
|
||||
class="mt-2"
|
||||
>
|
||||
{{ $t('admin.average-confident', [prop.confidence]) }}
|
||||
</v-chip>
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
</v-container>
|
||||
<v-container class="narrow-container">
|
||||
<v-card-title> {{ $t('admin.try-an-example') }} </v-card-title>
|
||||
<v-card
|
||||
v-for="(text, idx) in tryText"
|
||||
:key="idx"
|
||||
class="my-2"
|
||||
hover
|
||||
@click="processTryText(text)"
|
||||
>
|
||||
<v-card-text> {{ text }} </v-card-text>
|
||||
</v-card>
|
||||
</v-container>
|
||||
</v-container>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import type { IngredientConfidence } from "~/lib/api/types/recipe";
|
||||
import type { Parser } from "~/lib/api/user/recipes/recipe";
|
||||
|
||||
type ConfidenceAttribute = "average" | "comment" | "name" | "unit" | "quantity" | "food";
|
||||
|
||||
definePageMeta({
|
||||
layout: "admin",
|
||||
});
|
||||
|
||||
const api = useUserApi();
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
ingredient: "",
|
||||
results: false,
|
||||
parser: "nlp" as Parser,
|
||||
});
|
||||
|
||||
const i18n = useI18n();
|
||||
|
||||
// Set page title
|
||||
useSeoMeta({
|
||||
title: i18n.t("admin.parser"),
|
||||
});
|
||||
|
||||
const confidence = ref<IngredientConfidence>({});
|
||||
|
||||
function getColor(attribute: ConfidenceAttribute) {
|
||||
const percentage = getConfidence(attribute);
|
||||
if (percentage === undefined) return;
|
||||
|
||||
const p_as_num = parseFloat(percentage.replace("%", ""));
|
||||
|
||||
// Set color based off range
|
||||
if (p_as_num > 75) {
|
||||
return "success";
|
||||
}
|
||||
else if (p_as_num > 60) {
|
||||
return "warning";
|
||||
}
|
||||
else {
|
||||
return "error";
|
||||
}
|
||||
}
|
||||
|
||||
function getConfidence(attribute: ConfidenceAttribute) {
|
||||
if (!confidence.value) {
|
||||
return;
|
||||
}
|
||||
|
||||
const property = confidence.value[attribute];
|
||||
if (property !== undefined && property !== null) {
|
||||
return `${(+property * 100).toFixed(0)}%`;
|
||||
}
|
||||
return undefined;
|
||||
}
|
||||
|
||||
const tryText = [
|
||||
"2 tbsp minced cilantro, leaves and stems",
|
||||
"1 large yellow onion, coarsely chopped",
|
||||
"1 1/2 tsp garam masala",
|
||||
"1 inch piece fresh ginger, (peeled and minced)",
|
||||
"2 cups mango chunks, (2 large mangoes) (fresh or frozen)",
|
||||
];
|
||||
|
||||
function processTryText(str: string) {
|
||||
state.ingredient = str;
|
||||
processIngredient();
|
||||
}
|
||||
|
||||
async function processIngredient() {
|
||||
if (state.ingredient === "") {
|
||||
return;
|
||||
}
|
||||
|
||||
state.loading = true;
|
||||
|
||||
const { data } = await api.recipes.parseIngredient(state.parser, state.ingredient);
|
||||
|
||||
if (data) {
|
||||
state.results = true;
|
||||
|
||||
if (data.confidence) confidence.value = data.confidence;
|
||||
|
||||
// TODO: Remove ts-ignore
|
||||
// ts-ignore because data will likely change significantly once I figure out how to return results
|
||||
// for the parser. For now we'll leave it like this
|
||||
properties.comment.value = data.ingredient.note || "";
|
||||
properties.quantity.value = data.ingredient.quantity || "";
|
||||
properties.unit.value = data.ingredient?.unit?.name || "";
|
||||
properties.food.value = data.ingredient?.food?.name || "";
|
||||
|
||||
(["comment", "quantity", "unit", "food"] as ConfidenceAttribute[]).forEach((property) => {
|
||||
const color = getColor(property);
|
||||
const confidence = getConfidence(property);
|
||||
if (color) {
|
||||
properties[property].color = color;
|
||||
}
|
||||
if (confidence) {
|
||||
properties[property].confidence = confidence;
|
||||
}
|
||||
});
|
||||
}
|
||||
else {
|
||||
alert.error(i18n.t("events.something-went-wrong") as string);
|
||||
state.results = false;
|
||||
}
|
||||
state.loading = false;
|
||||
}
|
||||
|
||||
const properties = reactive({
|
||||
quantity: {
|
||||
subtitle: i18n.t("recipe.quantity"),
|
||||
value: "" as string | number,
|
||||
color: null,
|
||||
confidence: null,
|
||||
},
|
||||
unit: {
|
||||
subtitle: i18n.t("recipe.unit"),
|
||||
value: "",
|
||||
color: null,
|
||||
confidence: null,
|
||||
},
|
||||
food: {
|
||||
subtitle: i18n.t("shopping-list.food"),
|
||||
value: "",
|
||||
color: null,
|
||||
confidence: null,
|
||||
},
|
||||
comment: {
|
||||
subtitle: i18n.t("recipe.comment"),
|
||||
value: "",
|
||||
color: null,
|
||||
confidence: null,
|
||||
},
|
||||
});
|
||||
|
||||
const showConfidence = ref(false);
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Reference in New Issue
Block a user