Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-08-02 20:15:24 +02:00
Code Issues Releases Activity

feat: OpenAI Ingredient Parsing (#3581)

Browse source
This commit is contained in:
Michael Genson 2024-05-22 04:45:07 -05:00 • committed by GitHub
parent 4c8bbdcde2
commit 5c57b3dd1a
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
28 changed files with 789 additions and 274 deletions
Download patch file Download diff file Expand all files Collapse all files

65
frontend/components/global/BaseOverflowButton.vue
View file

@ -11,44 +11,50 @@
</v-icon>
</v-btn>
</template>
<!-- Model -->
<!-- Model -->
<v-list v-if="mode === MODES.model" dense>
<v-list-item-group v-model="itemGroup">
<template v-for="(item, index) in items">
<v-list-item :key="index" @click="setValue(item)">
<div v-if="!item.hide" :key="index">
<v-list-item @click="setValue(item)">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
<v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
</div>
</template>
</v-list-item-group>
</v-list>
<!-- Links -->
<v-list v-else-if="mode === MODES.link" dense>
<v-list-item-group v-model="itemGroup">
<template v-for="(item, index) in items">
<div v-if="!item.hide" :key="index">
<v-list-item :to="item.to">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
<v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>\
</div>
</template>
</v-list-item-group>
</v-list>
<!-- Event -->
<v-list v-else-if="mode === MODES.event" dense>
<template v-for="(item, index) in items">
<div v-if="!item.hide" :key="index">
<v-list-item @click="$emit(item.event)">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
<v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
</template>
</v-list-item-group>
</v-list>
<!-- Links -->
<v-list v-else-if="mode === MODES.link" dense>
<v-list-item-group v-model="itemGroup">
<template v-for="(item, index) in items">
<v-list-item :key="index" :to="item.to">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
<v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
</template>
</v-list-item-group>
</v-list>
<!-- Event -->
<v-list v-else-if="mode === MODES.event" dense>
<template v-for="(item, index) in items">
<v-list-item :key="index" @click="$emit(item.event)">
<v-list-item-icon v-if="item.icon">
<v-icon>{{ item.icon }}</v-icon>
</v-list-item-icon>
<v-list-item-title>{{ item.text }}</v-list-item-title>
</v-list-item>
<v-divider v-if="item.divider" :key="`divider-${index}`" class="my-1" ></v-divider>
</div>
</template>
</v-list>
</v-menu>
@ -74,6 +80,7 @@ export interface MenuItem {
value?: string;
event?: string;
divider?: boolean;
hide?:boolean;
}
export default defineComponent({

20
frontend/composables/use-users/preferences.ts
View file

@ -1,6 +1,6 @@
import { Ref, useContext } from "@nuxtjs/composition-api";
import { useLocalStorage, useSessionStorage } from "@vueuse/core";
import { TimelineEventType } from "~/lib/api/types/recipe";
import { RegisteredParser, TimelineEventType } from "~/lib/api/types/recipe";
export interface UserPrintPreferences {
imagePosition: string;
@ -36,6 +36,10 @@ export interface UserTimelinePreferences {
types: TimelineEventType[];
}
export interface UserParsingPreferences {
parser: RegisteredParser;
}
export function useUserPrintPreferences(): Ref<UserPrintPreferences> {
const fromStorage = useLocalStorage(
"recipe-print-preferences",
@ -116,3 +120,17 @@ export function useTimelinePreferences(): Ref<UserTimelinePreferences> {
return fromStorage;
}
export function useParsingPreferences(): Ref<UserParsingPreferences> {
const fromStorage = useLocalStorage(
"parsing-preferences",
{
parser: "nlp",
},
{ mergeDefaults: true }
// we cast to a Ref because by default it will return an optional type ref
// but since we pass defaults we know all properties are set.
) as unknown as Ref<UserParsingPreferences>;
return fromStorage;
}

7
frontend/lang/messages/en-US.json
View file

@ -594,6 +594,7 @@
"select-parser": "Select Parser",
"natural-language-processor": "Natural Language Processor",
"brute-parser": "Brute Parser",
"openai-parser": "OpenAI Parser",
"parse-all": "Parse All",
"no-unit": "No unit",
"missing-unit": "Create missing unit: {unit}",
@ -764,7 +765,10 @@
"recipe-scraper-version": "Recipe Scraper Version",
"oidc-ready": "OIDC Ready",
"oidc-ready-error-text": "Not all OIDC Values are configured. This can be ignored if you are not using OIDC Authentication.",
"oidc-ready-success-text": "Required OIDC variables are all set."
"oidc-ready-success-text": "Required OIDC variables are all set.",
"openai-ready": "OpenAI Ready",
"openai-ready-error-text": "Not all OpenAI Values are configured. This can be ignored if you are not using OpenAI features.",
"openai-ready-success-text": "Required OpenAI variables are all set."
},
"shopping-list": {
"all-lists": "All Lists",
@ -1170,6 +1174,7 @@
"ingredients-natural-language-processor-explanation-2": "It's not perfect, but it yields great results in general and is a good starting point for manually parsing ingredients into individual fields. Alternatively, you can also use the \"Brute\" processor that uses a pattern matching technique to identify ingredients.",
"nlp": "NLP",
"brute": "Brute",
"openai": "OpenAI",
"show-individual-confidence": "Show individual confidence",
"ingredient-text": "Ingredient Text",
"average-confident": "{0} Confident",

3
frontend/lib/api/types/admin.ts
View file

@ -13,6 +13,7 @@ export interface AdminAboutInfo {
enableOidc: boolean;
oidcRedirect: boolean;
oidcProviderName: string;
enableOpenai: boolean;
versionLatest: string;
apiPort: number;
apiDocs: boolean;
@ -40,6 +41,7 @@ export interface AppInfo {
enableOidc: boolean;
oidcRedirect: boolean;
oidcProviderName: string;
enableOpenai: boolean;
}
export interface AppStartupInfo {
isFirstLogin: boolean;
@ -80,6 +82,7 @@ export interface CheckAppConfig {
emailReady: boolean;
ldapReady: boolean;
oidcReady: boolean;
enableOpenai: boolean;
baseUrlSet: boolean;
isUpToDate: boolean;
}

2
frontend/lib/api/types/recipe.ts
View file

@ -6,7 +6,7 @@
*/
export type ExportTypes = "json";
export type RegisteredParser = "nlp" | "brute";
export type RegisteredParser = "nlp" | "brute" | "openai";
export type TimelineEventType = "system" | "info" | "comment";
export type TimelineEventImage = "has image" | "does not have image";

2
frontend/lib/api/user/recipes/recipe.ts
View file

@ -17,7 +17,7 @@ import {
} from "~/lib/api/types/recipe";
import { ApiRequestInstance, PaginationData } from "~/lib/api/types/non-generated";
export type Parser = "nlp" | "brute";
export type Parser = "nlp" | "brute" | "openai";
export interface CreateAsset {
name: string;

3
frontend/pages/admin/parser.vue
View file

@ -13,6 +13,7 @@
<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>
@ -63,8 +64,8 @@
<script lang="ts">
import { defineComponent, reactive, ref, toRefs, useContext } from "@nuxtjs/composition-api";
import { IngredientConfidence } from "~/lib/api/types/recipe";
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";

9
frontend/pages/admin/site-settings.vue
View file

@ -268,6 +268,15 @@ export default defineComponent({
color: appConfig.value.oidcReady ? goodColor : warningColor,
icon: appConfig.value.oidcReady ? goodIcon : warningIcon,
},
{
id: "openai-ready",
text: i18n.t("settings.openai-ready"),
status: appConfig.value.enableOpenai,
errorText: i18n.t("settings.openai-ready-error-text"),
successText: i18n.t("settings.openai-ready-success-text"),
color: appConfig.value.enableOpenai ? goodColor : warningColor,
icon: appConfig.value.enableOpenai ? goodIcon : warningIcon,
},
];
return data;
});

172
frontend/pages/g/_groupSlug/r/_slug/ingredient-parser.vue
View file

@ -19,87 +19,93 @@
<BaseOverflowButton
v-model="parser"
btn-class="mx-2 mb-4"
:items="[
{
text: $tc('recipe.parser.natural-language-processor'),
value: 'nlp',
},
{
text: $tc('recipe.parser.brute-parser'),
value: 'brute',
},
]"
:items="availableParsers"
/>
</div>
</BaseCardSectionTitle>
<div class="d-flex mt-n3 mb-4 justify-end" style="gap: 5px">
<BaseButton cancel class="mr-auto" @click="$router.go(-1)"></BaseButton>
<BaseButton color="info" @click="fetchParsed">
<BaseButton color="info" :disabled="parserLoading" @click="fetchParsed">
<template #icon> {{ $globals.icons.foods }}</template>
{{ $tc("recipe.parser.parse-all") }}
</BaseButton>
<BaseButton save @click="saveAll" />
<BaseButton save :disabled="parserLoading" @click="saveAll" />
</div>
<v-expansion-panels v-model="panels" multiple>
<draggable
v-if="parsedIng.length > 0"
v-model="parsedIng"
handle=".handle"
:style="{ width: '100%' }"
ghost-class="ghost"
>
<v-expansion-panel v-for="(ing, index) in parsedIng" :key="index">
<v-expansion-panel-header class="my-0 py-0" disable-icon-rotate>
<template #default="{ open }">
<v-fade-transition>
<span v-if="!open" key="0"> {{ ing.input }} </span>
</v-fade-transition>
</template>
<template #actions>
<v-icon left :color="isError(ing) ? 'error' : 'success'">
{{ isError(ing) ? $globals.icons.alert : $globals.icons.check }}
</v-icon>
<div class="my-auto" :color="isError(ing) ? 'error-text' : 'success-text'">
{{ ing.confidence ? asPercentage(ing.confidence.average) : "" }}
</div>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content class="pb-0 mb-0">
<RecipeIngredientEditor v-model="parsedIng[index].ingredient" allow-insert-ingredient @insert-ingredient="insertIngredient(index)" @delete="deleteIngredient(index)" />
{{ ing.input }}
<v-card-actions>
<v-spacer />
<BaseButton
v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
color="warning"
small
@click="createUnit(ing.ingredient.unit, index)"
>
{{ errors[index].unitErrorMessage }}
</BaseButton>
<BaseButton
v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
color="warning"
small
@click="createFood(ing.ingredient.food, index)"
>
{{ errors[index].foodErrorMessage }}
</BaseButton>
</v-card-actions>
</v-expansion-panel-content>
</v-expansion-panel>
</draggable>
</v-expansion-panels>
<div v-if="parserLoading">
<AppLoader
v-if="parserLoading"
:loading="parserLoading"
waiting-text=""
/>
</div>
<div v-else>
<v-expansion-panels v-model="panels" multiple>
<draggable
v-if="parsedIng.length > 0"
v-model="parsedIng"
handle=".handle"
:style="{ width: '100%' }"
ghost-class="ghost"
>
<v-expansion-panel v-for="(ing, index) in parsedIng" :key="index">
<v-expansion-panel-header class="my-0 py-0" disable-icon-rotate>
<template #default="{ open }">
<v-fade-transition>
<span v-if="!open" key="0"> {{ ing.input }} </span>
</v-fade-transition>
</template>
<template #actions>
<v-icon left :color="isError(ing) ? 'error' : 'success'">
{{ isError(ing) ? $globals.icons.alert : $globals.icons.check }}
</v-icon>
<div class="my-auto" :color="isError(ing) ? 'error-text' : 'success-text'">
{{ ing.confidence ? asPercentage(ing.confidence.average) : "" }}
</div>
</template>
</v-expansion-panel-header>
<v-expansion-panel-content class="pb-0 mb-0">
<RecipeIngredientEditor v-model="parsedIng[index].ingredient" allow-insert-ingredient @insert-ingredient="insertIngredient(index)" @delete="deleteIngredient(index)" />
{{ ing.input }}
<v-card-actions>
<v-spacer />
<BaseButton
v-if="errors[index].unitError && errors[index].unitErrorMessage !== ''"
color="warning"
small
@click="createUnit(ing.ingredient.unit, index)"
>
{{ errors[index].unitErrorMessage }}
</BaseButton>
<BaseButton
v-if="errors[index].foodError && errors[index].foodErrorMessage !== ''"
color="warning"
small
@click="createFood(ing.ingredient.food, index)"
>
{{ errors[index].foodErrorMessage }}
</BaseButton>
</v-card-actions>
</v-expansion-panel-content>
</v-expansion-panel>
</draggable>
</v-expansion-panels>
</div>
</v-container>
</v-container>
</template>
<script lang="ts">
import { computed, defineComponent, ref, useContext, useRoute, useRouter } from "@nuxtjs/composition-api";
import { computed, defineComponent, ref, useContext, useRoute, useRouter, watch } from "@nuxtjs/composition-api";
import { invoke, until } from "@vueuse/core";
import draggable from "vuedraggable";
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
import { useAppInfo, useUserApi } from "~/composables/api";
import { useRecipe } from "~/composables/recipes";
import { useFoodData, useFoodStore, useUnitData, useUnitStore } from "~/composables/store";
import { useParsingPreferences } from "~/composables/use-users/preferences";
import { uuid4 } from "~/composables/use-utils";
import {
CreateIngredientFood,
CreateIngredientUnit,
@ -108,12 +114,7 @@ import {
ParsedIngredient,
RecipeIngredient,
} from "~/lib/api/types/recipe";
import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
import { useUserApi } from "~/composables/api";
import { useRecipe } from "~/composables/recipes";
import { useFoodData, useFoodStore, useUnitStore, useUnitData } from "~/composables/store";
import { Parser } from "~/lib/api/user/recipes/recipe";
import { uuid4 } from "~/composables/use-utils";
interface Error {
ingredientIndex: number;
@ -130,7 +131,7 @@ export default defineComponent({
},
middleware: ["auth", "group-only"],
setup() {
const { $auth } = useContext();
const { $auth, i18n } = useContext();
const panels = ref<number[]>([]);
const route = useRoute();
@ -139,10 +140,10 @@ export default defineComponent({
const router = useRouter();
const slug = route.value.params.slug;
const api = useUserApi();
const { i18n } = useContext();
const appInfo = useAppInfo();
const { recipe, loading } = useRecipe(slug);
const parserLoading = ref(false);
invoke(async () => {
await until(recipe).not.toBeNull();
@ -152,10 +153,32 @@ export default defineComponent({
const ingredients = ref<any[]>([]);
const availableParsers = computed(() => {
return [
{
"text": i18n.tc("recipe.parser.natural-language-processor"),
"value": "nlp",
},
{
"text": i18n.tc("recipe.parser.brute-parser"),
"value": "brute",
},
{
"text": i18n.tc("recipe.parser.openai-parser"),
"value": "openai",
"hide": !appInfo.value?.enableOpenai,
},
]
});
// =========================================================
// Parser Logic
const parser = ref<Parser>("nlp");
const parserPreferences = useParsingPreferences();
const parser = ref<Parser>(parserPreferences.value.parser || "nlp");
const parsedIng = ref<ParsedIngredient[]>([]);
watch(parser, (val) => {
parserPreferences.value.parser = val;
});
function processIngredientError(ing: ParsedIngredient, index: number): Error {
const unitError = !checkForUnit(ing.ingredient.unit);
@ -195,7 +218,10 @@ export default defineComponent({
return;
}
const raw = recipe.value.recipeIngredient.map((ing) => ing.note ?? "");
parserLoading.value = true;
const { data } = await api.recipes.parseIngredients(parser.value, raw);
parserLoading.value = false;
if (data) {
// When we send the recipe ingredient text to be parsed, we lose the reference to the original unparsed ingredient.
@ -343,6 +369,7 @@ export default defineComponent({
return {
parser,
availableParsers,
saveAll,
createFood,
createUnit,
@ -358,6 +385,7 @@ export default defineComponent({
parsedIng,
recipe,
loading,
parserLoading,
ingredients,
};
},