feat (WIP): bring png OCR scanning support (#1670)

* Add pytesseract

* Add simple ocr endpoint

replace extension argument

* feat/ocr-editor gui

* fix frontend linting issues

* Add service unit tests

* Add split text modes & single ingredient/instruction editing

* make split mode really reactive

* Remove default step and ingredient

* make the linter haappy

* Accept only image uploads

* Add automatic recipe title suggestion

* Correct regex

* fix incorrect array.map method usage

* make the linter happy again

* Swap route to use asset name

* Rearange buttons

* fix test data

* feat: Allow making image the recipe image

* Add translation

* Make the linter happy

* Restrict function setPropertyValueByPath generic

* Restrict template literal type

* Add a more friendly icon to creation page

* update poetry lock file

* Correct sloppy ocr classes

* Make MyPy happy

* Rewrite safer tests

* Add tesseract to backend test CI container dependencies

* Make canvas element a component global

* Remove unwanted spaces in selected text

* Add way to know if recipe was created with ocr

* Access to ocr-editor for ocr recipes

* Update Alembic revision

* Make the frontend build

* Fix scrolling offset bug

* Allow creation of recipes with custom settings

* Fix rebasing mistakes

* Add format_tsv_output test

* Exclude the tests data directory only

* Enforce camelCase for frontend functions

* Remove import of unused component

* Fix type and class initialization

* Add multi-language support

* Highlight words in mount

* Fix image ratio bug

* Better ocr creation page

* Revert awkward feature to scroll in Selection mode

* Rebasing alembic migrations sux

* Remove obsolete getShared function

* Add function docstring

* Move down ocr creation option

* Make toolbar icons more generic

* Show help at the bottom of the page

* move ocr types to own file

* Use template ref for the canvas

* Use i18n.tc to get strings directly

* Correct naming mistake

* Move Ocr editor to own directory

* Create Ocr Editor parts

* Safeguard recipe properties access

* Add loading frontend animation due to longer request time

* minor cleanup chores

Co-authored-by: Miroito <alban.vachette@gmail.com>

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

@@ -60,7 +60,7 @@
                 {{ isError(ing) ? $globals.icons.alert : $globals.icons.check }}
               </v-icon>
               <div class="my-auto" :color="isError(ing) ? 'error-text' : 'success-text'">
-                {{ asPercentage(ing.confidence.average) }}
+                {{ ing.confidence ? asPercentage(ing.confidence.average) : "" }}
               </div>
             </template>
           </v-expansion-panel-header>
@@ -197,7 +197,11 @@ export default defineComponent({
       return !(ing.confidence.average >= 0.75);
     }
 
-    function asPercentage(num: number) {
+    function asPercentage(num: number | undefined): string {
+      if (!num) {
+        return "0%";
+      }
+
       return Math.round(num * 100).toFixed(2) + "%";
     }
 
@@ -230,7 +234,11 @@ export default defineComponent({
       return false;
     }
 
-    async function createFood(food: CreateIngredientFood, index: number) {
+    async function createFood(food: CreateIngredientFood | undefined, index: number) {
+      if (!food) {
+        return;
+      }
+
       foodData.data.name = food.name;
       await foodStore.actions.createOne(foodData.data);
       errors.value[index].foodError = false;

frontend/pages/recipe/_slug/ocr-editor.vue

@@ -0,0 +1,51 @@
+<template>
+  <div>
+    <RecipeOcrEditorPage v-if="recipe" :recipe="recipe" />
+  </div>
+</template>
+
+<script lang="ts">
+import { defineComponent, useRoute } from "@nuxtjs/composition-api";
+import RecipeOcrEditorPage from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue";
+import { useRecipe } from "~/composables/recipes";
+
+export default defineComponent({
+  components: { RecipeOcrEditorPage },
+  setup() {
+    const route = useRoute();
+    const slug = route.value.params.slug;
+
+    const { recipe, loading } = useRecipe(slug);
+
+    return {
+      recipe,
+      loading,
+    };
+  },
+});
+</script>
+
+<style lang="css">
+.ghost {
+  opacity: 0.5;
+}
+
+body {
+  background: #eee;
+}
+
+canvas {
+  background: white;
+  box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.2);
+  width: 100%;
+  image-rendering: optimizeQuality;
+}
+
+.box {
+  position: absolute;
+  border: 2px #90ee90 solid;
+  background-color: #90ee90;
+
+  z-index: 3;
+}
+</style>

frontend/pages/recipe/create.vue

@@ -52,6 +52,11 @@ export default defineComponent({
         text: "Import with .zip",
         value: "zip",
       },
+      {
+        icon: $globals.icons.fileImage,
+        text: "Create recipe from an image",
+        value: "ocr",
+      },
       {
         icon: $globals.icons.link,
         text: "Bulk URL Import",

frontend/pages/recipe/create/ocr.vue

@@ -0,0 +1,81 @@
+<template>
+  <div>
+    <v-card-title class="headline"> Create Recipe from an Image </v-card-title>
+    <v-card-text>
+      Create a recipe by uploading a scan.
+      <v-form ref="domCreateByOcr"> </v-form>
+    </v-card-text>
+    <v-card-actions class="justify-center">
+      <v-file-input
+        v-model="imageUpload"
+        accept=".png"
+        label="recipe.png"
+        filled
+        clearable
+        class="rounded-lg mt-2"
+        rounded
+        truncate-length="100"
+        hint="Upload a png image from a recipe book"
+        persistent-hint
+        prepend-icon=""
+        :prepend-inner-icon="$globals.icons.fileImage"
+      />
+    </v-card-actions>
+    <v-card-actions class="justify-center">
+      <v-checkbox v-model="makeFileRecipeImage" :label="$t('new-recipe.make-recipe-image')" />
+    </v-card-actions>
+    <v-card-actions class="justify-center">
+      <div style="width: 250px">
+        <BaseButton :disabled="imageUpload === null" large rounded block :loading="loading" @click="createByOcr" />
+      </div>
+    </v-card-actions>
+  </div>
+</template>
+<script lang="ts">
+import { defineComponent, reactive, toRefs, ref, useRouter } from "@nuxtjs/composition-api";
+import { AxiosResponse } from "axios";
+import { useUserApi } from "~/composables/api";
+import { validators } from "~/composables/use-validators";
+import { VForm } from "~/types/vuetify";
+
+export default defineComponent({
+  setup() {
+    const state = reactive({
+      error: false,
+      loading: false,
+      makeFileRecipeImage: false,
+    });
+    const api = useUserApi();
+    const router = useRouter();
+
+    const imageUpload = ref<File | null>(null);
+
+    function handleResponse(response: AxiosResponse<string> | null) {
+      if (response?.status !== 201) {
+        state.error = true;
+        state.loading = false;
+        return;
+      }
+      router.push(`/recipe/${response.data}/ocr-editor`);
+    }
+
+    const domCreateByOcr = ref<VForm | null>(null);
+
+    async function createByOcr() {
+      if (imageUpload.value === null) return; // Should never be true due to circumstances
+      state.loading = true;
+      const { response } = await api.recipes.createFromOcr(imageUpload.value, state.makeFileRecipeImage);
+      // @ts-ignore returns a string and not a full Recipe
+      handleResponse(response);
+    }
+
+    return {
+      domCreateByOcr,
+      createByOcr,
+      ...toRefs(state),
+      validators,
+      imageUpload,
+    };
+  },
+});
+</script>