Docker/mealie
Docker/mealie
1
0
Fork 0
mirror of https://github.com/mealie-recipes/mealie.git synced 2025-07-22 22:59:41 +02:00
Code Issues Releases Activity

feat: ✨ Add brute strategy to ingredient processor (#744)

Browse source 
* fix UI column width

* words

* update parser to support diff strats

* add new model url

* make button more visible

* fix nutrition error

* feat(backend): ✨ add 'brute' strategy for parsing ingredients

* satisfy linter

* update UI for creation page

* feat(backend): ✨ log 422 errors in detail when not in PRODUCTION

* add strategy selector

Co-authored-by: Hayden <hay-kot@pm.me>
This commit is contained in:
Hayden 2021-10-16 16:06:13 -08:00 • committed by GitHub
parent 60908e5a88
commit 3b920babe3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
25 changed files with 961 additions and 131 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -1,18 +1,28 @@
<template>
<v-container>
<v-container class="pa-0">
<v-container>
<BaseCardSectionTitle title="Ingredients Natural Language Processor">
Mealie uses conditional random Conditional Random Fields (CRFs) for parsing and processing ingredients. The
model used for ingredients is based off a data set of over 100,000 ingredients from a dataset compiled by the
New York Times. Note that as the model is trained in English only, you may have varied results when using the
model in other languages. This page is a playground for testing the model.
Mealie uses Conditional Random Fields (CRFs) for parsing and processing ingredients. The model used for
ingredients is based off a data set of over 100,000 ingredients from a dataset compiled by the New York Times.
Note that as the model is trained in English only, you may have varied results when using the model in other
languages. This page is a playground for testing the model.
<p class="pt-3">
It's not perfect, but it yields great results in general and is a good starting point for manually parsing
ingredients into individual fields.
ingredients into individual fields. Alternatively, you can also use the "Brute" processor that uses a pattern
matching technique to identify ingredients.
</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"> NLP </v-btn>
<v-btn value="brute"> Brute </v-btn>
</v-btn-toggle>
<v-checkbox v-model="showConfidence" class="ml-5" label="Show individual confidence"></v-checkbox>
</div>
<v-card flat>
<v-card-text>
<v-text-field v-model="ingredient" label="Ingredient Text"> </v-text-field>
@ -26,22 +36,29 @@
</v-card>
</v-container>
<v-container v-if="results">
<v-row class="d-flex">
<div v-if="parser !== 'brute' && getConfidence('average')" class="d-flex">
<v-chip dark :color="getColor('average')" class="mx-auto mb-2">
{{ getConfidence("average") }} Confident
</v-chip>
</div>
<div class="d-flex justify-center flex-wrap" style="gap: 1.5rem">
<template v-for="(prop, index) in properties">
<v-col v-if="prop.value" :key="index" xs="12" sm="6" lg="3">
<v-card>
<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-col>
<v-chip v-if="prop.confidence && showConfidence" dark :color="prop.color" class="mt-2">
{{ prop.confidence }} Confident
</v-chip>
</div>
</template>
</v-row>
</div>
</v-container>
<v-container class="narrow-container">
<v-card-title> 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>
@ -50,7 +67,8 @@
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
import { defineComponent, reactive, ref, toRefs } from "@nuxtjs/composition-api";
import { Confidence, Parser } from "~/api/class-interfaces/recipes";
import { useApiSingleton } from "~/composables/use-api";
export default defineComponent({
@ -62,8 +80,41 @@ export default defineComponent({
loading: false,
ingredient: "",
results: false,
parser: "nlp" as Parser,
});
const confidence = ref<Confidence>({});
function getColor(attribute: string) {
const percentage = getConfidence(attribute);
// @ts-ignore
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: string) {
attribute = attribute.toLowerCase();
if (!confidence.value) {
return;
}
// @ts-ignore
const property: number = confidence.value[attribute];
if (property) {
return `${(property * 100).toFixed(0)}%`;
}
return null;
}
const tryText = [
"2 tbsp minced cilantro, leaves and stems",
"1 large yellow onion, coarsely chopped",
@ -78,23 +129,39 @@ export default defineComponent({
}
async function processIngredient() {
if (state.ingredient === "") {
return;
}
state.loading = true;
const { data } = await api.recipes.parseIngredient(state.ingredient);
const { data } = await api.recipes.parseIngredient(state.parser, state.ingredient);
if (data) {
state.results = true;
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
// @ts-ignore
properties.comments.value = data.ingredient.note || null;
// @ts-ignore
properties.quantity.value = data.ingredient.quantity || null;
// @ts-ignore
properties.unit.value = data.ingredient.unit.name || null;
// @ts-ignore
properties.food.value = data.ingredient.food.name || null;
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 || "";
for (const property in properties) {
const color = getColor(property);
const confidence = getConfidence(property);
if (color) {
// @ts-ignore
properties[property].color = color;
}
if (confidence) {
// @ts-ignore
properties[property].confidence = confidence;
}
}
}
state.loading = false;
}
@ -102,23 +169,37 @@ export default defineComponent({
const properties = reactive({
quantity: {
subtitle: "Quantity",
value: "Value",
value: "" as any,
color: null,
confidence: null,
},
unit: {
subtitle: "Unit",
value: "Value",
value: "",
color: null,
confidence: null,
},
food: {
subtitle: "Food",
value: "Value",
value: "",
color: null,
confidence: null,
},
comments: {
subtitle: "Comments",
value: "Value",
comment: {
subtitle: "Comment",
value: "",
color: null,
confidence: null,
},
});
const showConfidence = ref(false);
return {
showConfidence,
getColor,
confidence,
getConfidence,
...toRefs(state),
tryText,
properties,