Feature/CRF++ and server side locales (#731)

* add universal toast plugin

* add server side locales

* integrate CRF++ into CI/CD Pipeline

* docs(docs): 📝 add recipe parser docs

* feat(backend): ✨ Continued work on ingredient parsers

* add new model dest

* feat(frontend): ✨ New ingredient parser page

* formatting

Co-authored-by: Hayden <hay-kot@pm.me>

frontend/pages/admin/parser.vue

@@ -0,0 +1,138 @@
+<template>
+  <v-container>
+    <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.
+
+        <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.
+        </p>
+      </BaseCardSectionTitle>
+
+      <v-card flat>
+        <v-card-text>
+          <v-text-field v-model="ingredient" label="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">
+      <v-row class="d-flex">
+        <template v-for="(prop, index) in properties">
+          <v-col v-if="prop.value" :key="index" xs="12" sm="6" lg="3">
+            <v-card>
+              <v-card-title> {{ prop.value }} </v-card-title>
+              <v-card-text>
+                {{ prop.subtitle }}
+              </v-card-text>
+            </v-card>
+          </v-col>
+        </template>
+      </v-row>
+    </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>
+    </v-container>
+  </v-container>
+</template>
+    
+<script lang="ts">
+import { defineComponent, reactive, toRefs } from "@nuxtjs/composition-api";
+import { useApiSingleton } from "~/composables/use-api";
+
+export default defineComponent({
+  layout: "admin",
+  setup() {
+    const api = useApiSingleton();
+
+    const state = reactive({
+      loading: false,
+      ingredient: "",
+      results: false,
+    });
+
+    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() {
+      state.loading = true;
+      const { data } = await api.recipes.parseIngredient(state.ingredient);
+
+      if (data) {
+        state.results = true;
+
+        // 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;
+      }
+      state.loading = false;
+    }
+
+    const properties = reactive({
+      quantity: {
+        subtitle: "Quantity",
+        value: "Value",
+      },
+      unit: {
+        subtitle: "Unit",
+        value: "Value",
+      },
+      food: {
+        subtitle: "Food",
+        value: "Value",
+      },
+      comments: {
+        subtitle: "Comments",
+        value: "Value",
+      },
+    });
+
+    return {
+      ...toRefs(state),
+      tryText,
+      properties,
+      processTryText,
+      processIngredient,
+    };
+  },
+  head() {
+    return {
+      title: "Parser",
+    };
+  },
+});
+</script>
+    
+<style scoped>
+</style>

frontend/pages/recipe/_slug/index.vue

@@ -110,7 +110,7 @@
               />
             </draggable>
             <div class="d-flex justify-end mt-2">
-              <RecipeIngredientParserMenu class="mr-1" :ingredients="recipe.recipeIngredient" />
+              <RecipeIngredientParserMenu class="mr-1" :slug="recipe.slug" :ingredients="recipe.recipeIngredient" />
               <RecipeDialogBulkAdd class="mr-1" @bulk-data="addIngredient" />
               <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
             </div>

frontend/pages/recipe/_slug/ingredient-parser.vue

@@ -0,0 +1,73 @@
+<template>
+  <v-container v-if="recipe">
+    <v-container>
+      <BaseCardSectionTitle title="Ingredients Processor"> </BaseCardSectionTitle>
+      <v-card-actions class="justify-end">
+        <BaseButton color="info">
+          <template #icon> {{ $globals.icons.foods }}</template>
+          Parse All
+        </BaseButton>
+        <BaseButton save> Save All </BaseButton>
+      </v-card-actions>
+
+      </v-card>
+      <v-expansion-panels v-model="panels" multiple>
+        <v-expansion-panel v-for="(ing, index) in ingredients" :key="index">
+          <v-expansion-panel-header class="my-0 py-0">
+            {{ recipe.recipeIngredient[index].note }}
+          </v-expansion-panel-header>
+          <v-expansion-panel-content class="pb-0 mb-0">
+            <RecipeIngredientEditor v-model="ingredients[index]" />
+          </v-expansion-panel-content>
+        </v-expansion-panel>
+      </v-expansion-panels>
+    </v-container>
+  </v-container>
+</template>
+  
+<script lang="ts">
+import { defineComponent, reactive, ref, toRefs, useRoute, watch } from "@nuxtjs/composition-api";
+import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
+import { useApiSingleton } from "~/composables/use-api";
+import { useRecipeContext } from "~/composables/use-recipe-context";
+export default defineComponent({
+  components: {
+    RecipeIngredientEditor,
+  },
+  setup() {
+    const state = reactive({
+      panels: null,
+    });
+    const route = useRoute();
+    const slug = route.value.params.slug;
+    const api = useApiSingleton();
+
+    const { getBySlug, loading } = useRecipeContext();
+
+    const recipe = getBySlug(slug);
+
+    const ingredients = ref<any[]>([]);
+
+    watch(recipe, () => {
+      const copy = recipe?.value?.recipeIngredient || [];
+      ingredients.value = [...copy];
+    });
+
+    return {
+      ...toRefs(state),
+      api,
+      recipe,
+      loading,
+      ingredients,
+    };
+  },
+  head() {
+    return {
+      title: "Parser",
+    };
+  },
+});
+</script>
+  
+<style scoped>
+</style>