mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-07-24 15:49:42 +02:00
feat: OpenAI Custom Headers/Params and Debug Page (#4227)
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com>
This commit is contained in:
Michael Genson
GitHub
parent
7c274de778
commit
ea1f727a8b
20 changed files with 277 additions and 17 deletions
127
frontend/pages/admin/debug/openai.vue
Normal file
127
frontend/pages/admin/debug/openai.vue
Normal file
|
|
@ -0,0 +1,127 @@
|
|||
<template>
|
||||
<v-container class="pa-0">
|
||||
<v-container>
|
||||
<BaseCardSectionTitle :title="$tc('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="$i18n.tc('recipe.upload-image')"
|
||||
:text-btn="false"
|
||||
:post="false"
|
||||
@uploaded="uploadImage"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="!!uploadedImage"
|
||||
color="error"
|
||||
@click="clearImage"
|
||||
>
|
||||
<v-icon left>{{ $globals.icons.close }}</v-icon>
|
||||
{{ $i18n.tc("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="$i18n.tc('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 lang="ts">
|
||||
import { defineComponent, ref } from "@nuxtjs/composition-api";
|
||||
import { useAdminApi } from "~/composables/api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { VForm } from "~/types/vuetify";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const api = useAdminApi();
|
||||
const loading = ref(false);
|
||||
const response = ref("");
|
||||
|
||||
const uploadForm = ref<VForm | null>(null);
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
||||
return {
|
||||
loading,
|
||||
response,
|
||||
uploadForm,
|
||||
uploadedImage,
|
||||
uploadedImagePreviewUrl,
|
||||
uploadImage,
|
||||
clearImage,
|
||||
testOpenAI,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("admin.debug-openai-services"),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
221
frontend/pages/admin/debug/parser.vue
Normal file
221
frontend/pages/admin/debug/parser.vue
Normal file
|
|
@ -0,0 +1,221 @@
|
|||
<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="parser" dense mandatory @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-checkbox v-model="showConfidence" class="ml-5" :label="$t('admin.show-individual-confidence')"></v-checkbox>
|
||||
</div>
|
||||
|
||||
<v-card flat>
|
||||
<v-card-text>
|
||||
<v-text-field v-model="ingredient" :label="$t('admin.ingredient-text')"> </v-text-field>
|
||||
</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="results">
|
||||
<div v-if="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 lang="ts">
|
||||
import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
|
||||
import { alert } from "~/composables/use-toast";
|
||||
import { useUserApi } from "~/composables/api";
|
||||
import { IngredientConfidence } from "~/lib/api/types/recipe";
|
||||
import { Parser } from "~/lib/api/user/recipes/recipe";
|
||||
|
||||
type ConfidenceAttribute = "average" | "comment" | "name" | "unit" | "quantity" | "food";
|
||||
|
||||
export default defineComponent({
|
||||
layout: "admin",
|
||||
setup() {
|
||||
const api = useUserApi();
|
||||
|
||||
const state = reactive({
|
||||
loading: false,
|
||||
ingredient: "",
|
||||
results: false,
|
||||
parser: "nlp" as Parser,
|
||||
});
|
||||
|
||||
const { i18n } = useContext();
|
||||
|
||||
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) {
|
||||
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) {
|
||||
// @ts-ignore See above
|
||||
properties[property].color = color;
|
||||
}
|
||||
if (confidence) {
|
||||
// @ts-ignore See above
|
||||
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);
|
||||
|
||||
return {
|
||||
showConfidence,
|
||||
getColor,
|
||||
confidence,
|
||||
getConfidence,
|
||||
...toRefs(state),
|
||||
tryText,
|
||||
properties,
|
||||
processTryText,
|
||||
processIngredient,
|
||||
};
|
||||
},
|
||||
head() {
|
||||
return {
|
||||
title: this.$t("admin.parser"),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
Loading…
Add table
Add a link
Reference in a new issue