From c712e2c1bd69242ddbf983eecafd70301a373535 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Tue, 17 May 2022 11:41:43 +0200
Subject: [PATCH 01/62] Add pytesseract

---
 poetry.lock    | 42 ++++++++++++++++++++++++++++++------------
 pyproject.toml |  1 +
 2 files changed, 31 insertions(+), 12 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index 51a04fe7dfc..39fad0e7787 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -821,7 +821,7 @@ requests = ["requests"]
 name = "packaging"
 version = "21.3"
 description = "Core utilities for Python packages"
-category = "dev"
+category = "main"
 optional = false
 python-versions = ">=3.6"
 
@@ -1083,6 +1083,17 @@ category = "dev"
 optional = false
 python-versions = ">=3.7"
 
+name = "pytesseract"
+version = "0.3.9"
+description = "Python-tesseract is a python wrapper for Google's Tesseract-OCR"
+category = "main"
+optional = false
+python-versions = ">=3.7"
+
+[package.dependencies]
+packaging = ">=21.3"
+Pillow = ">=8.0.0"
+
 [[package]]
 name = "pytest"
 version = "6.2.5"
@@ -1647,17 +1658,16 @@ attrs = [
     {file = "attrs-21.4.0.tar.gz", hash = "sha256:626ba8234211db98e869df76230a137c4c40a12d72445c45d5f5b716f076e2fd"},
 ]
 bcrypt = [
-    {file = "bcrypt-3.2.2-cp36-abi3-macosx_10_10_universal2.whl", hash = "sha256:7180d98a96f00b1050e93f5b0f556e658605dd9f524d0b0e68ae7944673f525e"},
-    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_17_aarch64.manylinux2014_aarch64.manylinux_2_24_aarch64.whl", hash = "sha256:61bae49580dce88095d669226d5076d0b9d927754cedbdf76c6c9f5099ad6f26"},
-    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:88273d806ab3a50d06bc6a2fc7c87d737dd669b76ad955f449c43095389bc8fb"},
-    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:6d2cb9d969bfca5bc08e45864137276e4c3d3d7de2b162171def3d188bf9d34a"},
-    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2b02d6bfc6336d1094276f3f588aa1225a598e27f8e3388f4db9948cb707b521"},
-    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:a2c46100e315c3a5b90fdc53e429c006c5f962529bc27e1dfd656292c20ccc40"},
-    {file = "bcrypt-3.2.2-cp36-abi3-musllinux_1_1_aarch64.whl", hash = "sha256:7d9ba2e41e330d2af4af6b1b6ec9e6128e91343d0b4afb9282e54e5508f31baa"},
-    {file = "bcrypt-3.2.2-cp36-abi3-musllinux_1_1_x86_64.whl", hash = "sha256:cd43303d6b8a165c29ec6756afd169faba9396a9472cdff753fe9f19b96ce2fa"},
-    {file = "bcrypt-3.2.2-cp36-abi3-win32.whl", hash = "sha256:4e029cef560967fb0cf4a802bcf4d562d3d6b4b1bf81de5ec1abbe0f1adb027e"},
-    {file = "bcrypt-3.2.2-cp36-abi3-win_amd64.whl", hash = "sha256:7ff2069240c6bbe49109fe84ca80508773a904f5a8cb960e02a977f7f519b129"},
-    {file = "bcrypt-3.2.2.tar.gz", hash = "sha256:433c410c2177057705da2a9f2cd01dd157493b2a7ac14c8593a16b3dab6b6bfb"},
+    {file = "bcrypt-3.2.0-cp36-abi3-macosx_10_10_universal2.whl", hash = "sha256:b589229207630484aefe5899122fb938a5b017b0f4349f769b8c13e78d99a8fd"},
+    {file = "bcrypt-3.2.0-cp36-abi3-macosx_10_9_x86_64.whl", hash = "sha256:c95d4cbebffafcdd28bd28bb4e25b31c50f6da605c81ffd9ad8a3d1b2ab7b1b6"},
+    {file = "bcrypt-3.2.0-cp36-abi3-manylinux1_x86_64.whl", hash = "sha256:63d4e3ff96188e5898779b6057878fecf3f11cfe6ec3b313ea09955d587ec7a7"},
+    {file = "bcrypt-3.2.0-cp36-abi3-manylinux2010_x86_64.whl", hash = "sha256:cd1ea2ff3038509ea95f687256c46b79f5fc382ad0aa3664d200047546d511d1"},
+    {file = "bcrypt-3.2.0-cp36-abi3-manylinux2014_aarch64.whl", hash = "sha256:cdcdcb3972027f83fe24a48b1e90ea4b584d35f1cc279d76de6fc4b13376239d"},
+    {file = "bcrypt-3.2.0-cp36-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:a0584a92329210fcd75eb8a3250c5a941633f8bfaf2a18f81009b097732839b7"},
+    {file = "bcrypt-3.2.0-cp36-abi3-musllinux_1_1_x86_64.whl", hash = "sha256:56e5da069a76470679f312a7d3d23deb3ac4519991a0361abc11da837087b61d"},
+    {file = "bcrypt-3.2.0-cp36-abi3-win32.whl", hash = "sha256:a67fb841b35c28a59cebed05fbd3e80eea26e6d75851f0574a9273c80f3e9b55"},
+    {file = "bcrypt-3.2.0-cp36-abi3-win_amd64.whl", hash = "sha256:81fec756feff5b6818ea7ab031205e1d323d8943d237303baca2c5f9c7846f34"},
+    {file = "bcrypt-3.2.0.tar.gz", hash = "sha256:5b93c1726e50a93a033c36e5ca7fdcd29a5c7395af50a6892f5d9e7c6cfbfb29"},
 ]
 beautifulsoup4 = [
     {file = "beautifulsoup4-4.11.1-py3-none-any.whl", hash = "sha256:58d5c3d29f5a36ffeb94f02f0d786cd53014cf9b3b3951d42e0080d8a9498d30"},
@@ -1800,6 +1810,7 @@ greenlet = [
     {file = "greenlet-1.1.2-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:97e5306482182170ade15c4b0d8386ded995a07d7cc2ca8f27958d34d6736497"},
     {file = "greenlet-1.1.2-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:e6a36bb9474218c7a5b27ae476035497a6990e21d04c279884eb10d9b290f1b1"},
     {file = "greenlet-1.1.2-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:abb7a75ed8b968f3061327c433a0fbd17b729947b400747c334a9c29a9af6c58"},
+    {file = "greenlet-1.1.2-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:b336501a05e13b616ef81ce329c0e09ac5ed8c732d9ba7e3e983fcc1a9e86965"},
     {file = "greenlet-1.1.2-cp310-cp310-win_amd64.whl", hash = "sha256:14d4f3cd4e8b524ae9b8aa567858beed70c392fdec26dbdb0a8a418392e71708"},
     {file = "greenlet-1.1.2-cp35-cp35m-macosx_10_14_x86_64.whl", hash = "sha256:17ff94e7a83aa8671a25bf5b59326ec26da379ace2ebc4411d690d80a7fbcf23"},
     {file = "greenlet-1.1.2-cp35-cp35m-manylinux1_x86_64.whl", hash = "sha256:9f3cba480d3deb69f6ee2c1825060177a22c7826431458c697df88e6aeb3caee"},
@@ -1812,6 +1823,7 @@ greenlet = [
     {file = "greenlet-1.1.2-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f9d29ca8a77117315101425ec7ec2a47a22ccf59f5593378fc4077ac5b754fce"},
     {file = "greenlet-1.1.2-cp36-cp36m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:21915eb821a6b3d9d8eefdaf57d6c345b970ad722f856cd71739493ce003ad08"},
     {file = "greenlet-1.1.2-cp36-cp36m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:eff9d20417ff9dcb0d25e2defc2574d10b491bf2e693b4e491914738b7908168"},
+    {file = "greenlet-1.1.2-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:b8c008de9d0daba7b6666aa5bbfdc23dcd78cafc33997c9b7741ff6353bafb7f"},
     {file = "greenlet-1.1.2-cp36-cp36m-win32.whl", hash = "sha256:32ca72bbc673adbcfecb935bb3fb1b74e663d10a4b241aaa2f5a75fe1d1f90aa"},
     {file = "greenlet-1.1.2-cp36-cp36m-win_amd64.whl", hash = "sha256:f0214eb2a23b85528310dad848ad2ac58e735612929c8072f6093f3585fd342d"},
     {file = "greenlet-1.1.2-cp37-cp37m-macosx_10_14_x86_64.whl", hash = "sha256:b92e29e58bef6d9cfd340c72b04d74c4b4e9f70c9fa7c78b674d1fec18896dc4"},
@@ -1820,6 +1832,7 @@ greenlet = [
     {file = "greenlet-1.1.2-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1e12bdc622676ce47ae9abbf455c189e442afdde8818d9da983085df6312e7a1"},
     {file = "greenlet-1.1.2-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8c790abda465726cfb8bb08bd4ca9a5d0a7bd77c7ac1ca1b839ad823b948ea28"},
     {file = "greenlet-1.1.2-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f276df9830dba7a333544bd41070e8175762a7ac20350786b322b714b0e654f5"},
+    {file = "greenlet-1.1.2-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:8c5d5b35f789a030ebb95bff352f1d27a93d81069f2adb3182d99882e095cefe"},
     {file = "greenlet-1.1.2-cp37-cp37m-win32.whl", hash = "sha256:64e6175c2e53195278d7388c454e0b30997573f3f4bd63697f88d855f7a6a1fc"},
     {file = "greenlet-1.1.2-cp37-cp37m-win_amd64.whl", hash = "sha256:b11548073a2213d950c3f671aa88e6f83cda6e2fb97a8b6317b1b5b33d850e06"},
     {file = "greenlet-1.1.2-cp38-cp38-macosx_10_14_x86_64.whl", hash = "sha256:9633b3034d3d901f0a46b7939f8c4d64427dfba6bbc5a36b1a67364cf148a1b0"},
@@ -1828,6 +1841,7 @@ greenlet = [
     {file = "greenlet-1.1.2-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e859fcb4cbe93504ea18008d1df98dee4f7766db66c435e4882ab35cf70cac43"},
     {file = "greenlet-1.1.2-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:00e44c8afdbe5467e4f7b5851be223be68adb4272f44696ee71fe46b7036a711"},
     {file = "greenlet-1.1.2-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:ec8c433b3ab0419100bd45b47c9c8551248a5aee30ca5e9d399a0b57ac04651b"},
+    {file = "greenlet-1.1.2-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:2bde6792f313f4e918caabc46532aa64aa27a0db05d75b20edfc5c6f46479de2"},
     {file = "greenlet-1.1.2-cp38-cp38-win32.whl", hash = "sha256:288c6a76705dc54fba69fbcb59904ae4ad768b4c768839b8ca5fdadec6dd8cfd"},
     {file = "greenlet-1.1.2-cp38-cp38-win_amd64.whl", hash = "sha256:8d2f1fb53a421b410751887eb4ff21386d119ef9cde3797bf5e7ed49fb51a3b3"},
     {file = "greenlet-1.1.2-cp39-cp39-macosx_10_14_x86_64.whl", hash = "sha256:166eac03e48784a6a6e0e5f041cfebb1ab400b394db188c48b3a84737f505b67"},
@@ -1836,6 +1850,7 @@ greenlet = [
     {file = "greenlet-1.1.2-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:b1692f7d6bc45e3200844be0dba153612103db241691088626a33ff1f24a0d88"},
     {file = "greenlet-1.1.2-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:7227b47e73dedaa513cdebb98469705ef0d66eb5a1250144468e9c3097d6b59b"},
     {file = "greenlet-1.1.2-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7ff61ff178250f9bb3cd89752df0f1dd0e27316a8bd1465351652b1b4a4cdfd3"},
+    {file = "greenlet-1.1.2-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:0051c6f1f27cb756ffc0ffbac7d2cd48cb0362ac1736871399a739b2885134d3"},
     {file = "greenlet-1.1.2-cp39-cp39-win32.whl", hash = "sha256:f70a9e237bb792c7cc7e44c531fd48f5897961701cdaa06cf22fc14965c496cf"},
     {file = "greenlet-1.1.2-cp39-cp39-win_amd64.whl", hash = "sha256:013d61294b6cd8fe3242932c1c5e36e5d1db2c8afb58606c5a67efce62c1f5fd"},
     {file = "greenlet-1.1.2.tar.gz", hash = "sha256:e30f5ea4ae2346e62cedde8794a56858a67b878dd79f7df76a0767e356b1744a"},
@@ -2308,6 +2323,9 @@ pyrsistent = [
     {file = "pyrsistent-0.18.1-cp39-cp39-win32.whl", hash = "sha256:1b34eedd6812bf4d33814fca1b66005805d3640ce53140ab8bbb1e2651b0d9bc"},
     {file = "pyrsistent-0.18.1-cp39-cp39-win_amd64.whl", hash = "sha256:e24a828f57e0c337c8d8bb9f6b12f09dfdf0273da25fda9e314f0b684b415a07"},
     {file = "pyrsistent-0.18.1.tar.gz", hash = "sha256:d4d61f8b993a7255ba714df3aca52700f8125289f84f704cf80916517c46eb96"},
+pytesseract = [
+    {file = "pytesseract-0.3.9-py2.py3-none-any.whl", hash = "sha256:fecda37d1e4eaf744c657cd03a5daab4eb97c61506ac5550274322c8ae32eca2"},
+    {file = "pytesseract-0.3.9.tar.gz", hash = "sha256:7e2bafc7f48d1bb71443ce4633a56f5e21925a98f220a36c336297edcd1956d0"},
 ]
 pytest = [
     {file = "pytest-6.2.5-py3-none-any.whl", hash = "sha256:7310f8d27bc79ced999e760ca304d69f6ba6c6649c0b60fb0e04a4a77cacc134"},
diff --git a/pyproject.toml b/pyproject.toml
index 9120221ef80..84decf7fc7c 100644
--- a/pyproject.toml
+++ b/pyproject.toml
@@ -38,6 +38,7 @@ python-ldap = "^3.3.1"
 pydantic = "^1.9.1"
 tzdata = "^2021.5"
 pyhumps = "^3.5.3"
+pytesseract = "^0.3.9"
 
 [tool.poetry.dev-dependencies]
 pylint = "^2.6.0"

From cd164b450ef6095d848360890bb0f141d194c902 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Tue, 17 May 2022 14:08:26 +0200
Subject: [PATCH 02/62] Add simple ocr endpoint

replace extension argument
---
 frontend/api/class-interfaces/recipes/recipe.ts | 12 ++++++++++++
 frontend/pages/recipe/create.vue                |  5 +++++
 mealie/routes/__init__.py                       |  2 ++
 mealie/routes/ocr/__init__.py                   |  7 +++++++
 mealie/routes/ocr/pytesseract.py                | 13 +++++++++++++
 mealie/routes/recipe/recipe_crud_routes.py      | 16 ++++++++++++++++
 mealie/services/ocr/__init.py__                 |  0
 mealie/services/ocr/pytesseract.py              | 16 ++++++++++++++++
 8 files changed, 71 insertions(+)
 create mode 100644 mealie/routes/ocr/__init__.py
 create mode 100644 mealie/routes/ocr/pytesseract.py
 create mode 100644 mealie/services/ocr/__init.py__
 create mode 100644 mealie/services/ocr/pytesseract.py

diff --git a/frontend/api/class-interfaces/recipes/recipe.ts b/frontend/api/class-interfaces/recipes/recipe.ts
index 2f305b7ff6c..669b29c2e80 100644
--- a/frontend/api/class-interfaces/recipes/recipe.ts
+++ b/frontend/api/class-interfaces/recipes/recipe.ts
@@ -34,6 +34,7 @@ const routes = {
   recipesCategory: `${prefix}/recipes/category`,
   recipesParseIngredient: `${prefix}/parser/ingredient`,
   recipesParseIngredients: `${prefix}/parser/ingredients`,
+  recipesCreateFromOcr: `${prefix}/recipes/create-ocr`,
 
   recipesRecipeSlug: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}`,
   recipesRecipeSlugExport: (recipe_slug: string) => `${prefix}/recipes/${recipe_slug}/exports`,
@@ -116,4 +117,15 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
   getZipRedirectUrl(recipeSlug: string, token: string) {
     return `${routes.recipesRecipeSlugExportZip(recipeSlug)}?token=${token}`;
   }
+
+  async getShared(item_id: string) {
+    return await this.requests.get<Recipe>(routes.recipeShareToken(item_id));
+  }
+
+  async createFromOcr(file: File) {
+    const formData = new FormData();
+    formData.append("file", file);
+    formData.append("extension", file.name.split(".").pop() ?? "");
+    return await this.requests.post(routes.recipesCreateFromOcr, formData);
+  }
 }
diff --git a/frontend/pages/recipe/create.vue b/frontend/pages/recipe/create.vue
index f6432552692..becad45f2eb 100644
--- a/frontend/pages/recipe/create.vue
+++ b/frontend/pages/recipe/create.vue
@@ -42,6 +42,11 @@ export default defineComponent({
         text: "Import with URL",
         value: "url",
       },
+      {
+        icon: $globals.icons.edit,
+        text: "Create recipe from image",
+        value: "ocr",
+      },
       {
         icon: $globals.icons.edit,
         text: "Create Recipe",
diff --git a/mealie/routes/__init__.py b/mealie/routes/__init__.py
index 849ec5b571f..e421c01ae5a 100644
--- a/mealie/routes/__init__.py
+++ b/mealie/routes/__init__.py
@@ -7,6 +7,7 @@
     comments,
     explore,
     groups,
+    ocr,
     organizers,
     parser,
     recipe,
@@ -31,3 +32,4 @@
 router.include_router(admin.router)
 router.include_router(validators.router)
 router.include_router(explore.router)
+router.include_router(ocr.router)
diff --git a/mealie/routes/ocr/__init__.py b/mealie/routes/ocr/__init__.py
new file mode 100644
index 00000000000..e23bbc92ec8
--- /dev/null
+++ b/mealie/routes/ocr/__init__.py
@@ -0,0 +1,7 @@
+from fastapi import APIRouter
+
+from . import pytesseract
+
+router = APIRouter(prefix="/ocr")
+
+router.include_router(pytesseract.router)
diff --git a/mealie/routes/ocr/pytesseract.py b/mealie/routes/ocr/pytesseract.py
new file mode 100644
index 00000000000..5142c4cb25f
--- /dev/null
+++ b/mealie/routes/ocr/pytesseract.py
@@ -0,0 +1,13 @@
+from fastapi import APIRouter, File
+
+from mealie.routes._base import BaseUserController, controller
+from mealie.services.ocr.pytesseract import OCR
+
+router = APIRouter()
+
+
+@controller(router)
+class OCRController(BaseUserController):
+    @router.post("/", response_model=str)
+    def image_to_string(self, file: bytes = File(...)):
+        return OCR.image_to_string(file)
diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index 2459e613d26..61c5f938f6e 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -44,6 +44,7 @@
     EventTypes,
 )
 from mealie.services.recipe.recipe_data_service import InvalidDomainError, NotAnImageError, RecipeDataService
+from mealie.services.ocr.pytesseract import OCR
 from mealie.services.recipe.recipe_service import RecipeService
 from mealie.services.recipe.template_service import TemplateService
 from mealie.services.scraper.recipe_bulk_scraper import RecipeBulkScraperService
@@ -435,3 +436,18 @@ def upload_recipe_asset(
         self.mixins.update_one(recipe, slug)
 
         return asset_in
+
+    # ==================================================================================================================
+    # OCR
+    @router.post("/create-ocr", status_code=201, response_model=str)
+    def create_recipe_ocr(self, extension: str = Form(...), file: UploadFile = File(...)):
+        """Takes an image and creates a recipe based on the image"""
+        slug = self.service.create_one(CreateRecipe(name="New OCR Recipe")).slug
+        RecipeController.upload_recipe_asset(self, slug, "Original recipe image", "", extension, file)
+        description = OCR.image_to_string(file.file)
+        recipe = self.mixins.get_one(slug)
+        recipe.description = description
+        recipe.settings.show_assets = True
+        self.mixins.update_one(recipe, slug)
+
+        return slug
diff --git a/mealie/services/ocr/__init.py__ b/mealie/services/ocr/__init.py__
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/mealie/services/ocr/pytesseract.py b/mealie/services/ocr/pytesseract.py
new file mode 100644
index 00000000000..b1f6047a0e2
--- /dev/null
+++ b/mealie/services/ocr/pytesseract.py
@@ -0,0 +1,16 @@
+import pytesseract
+from PIL import Image
+
+from mealie.services._base_service import BaseService
+
+
+class OCR(BaseService):
+    """
+    Class for ocr engines.
+    """
+
+    def image_to_string(image_data):
+        """
+        Returns a plain text translation of an image
+        """
+        return pytesseract.image_to_string(Image.open(image_data))

From 42b0fbe4cbb46d2b7b621b25e2eb87efa341470e Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Thu, 14 Jul 2022 11:30:10 +0200
Subject: [PATCH 03/62] feat/ocr-editor gui

---
 frontend/api/class-interfaces/ocr.ts          |  13 +
 frontend/api/index.ts                         |   5 +
 .../Domain/Recipe/RecipeDialogBulkAdd.vue     |  13 +-
 frontend/pages/recipe/_slug/ocr-editor.vue    | 713 ++++++++++++++++++
 frontend/pages/recipe/create.vue              |   2 +-
 frontend/pages/recipe/create/ocr.vue          |  57 ++
 frontend/types/api-types/ocr.ts               |  21 +
 frontend/types/components.d.ts                |   4 -
 frontend/utils/icons/icons.ts                 |   6 +
 mealie/routes/ocr/pytesseract.py              |  22 +
 mealie/routes/recipe/recipe_crud_routes.py    |   3 -
 mealie/schema/ocr/__init__.py                 |   0
 mealie/schema/ocr/ocr.py                      |  16 +
 mealie/services/ocr/pytesseract.py            |   8 +
 14 files changed, 872 insertions(+), 11 deletions(-)
 create mode 100644 frontend/api/class-interfaces/ocr.ts
 create mode 100644 frontend/pages/recipe/_slug/ocr-editor.vue
 create mode 100644 frontend/pages/recipe/create/ocr.vue
 create mode 100644 frontend/types/api-types/ocr.ts
 create mode 100644 mealie/schema/ocr/__init__.py
 create mode 100644 mealie/schema/ocr/ocr.py

diff --git a/frontend/api/class-interfaces/ocr.ts b/frontend/api/class-interfaces/ocr.ts
new file mode 100644
index 00000000000..488da87a20e
--- /dev/null
+++ b/frontend/api/class-interfaces/ocr.ts
@@ -0,0 +1,13 @@
+import { BaseAPI } from "~/api/_base";
+
+const prefix = "/api";
+
+export class OcrAPI extends BaseAPI {
+
+  async tsv(file: File) {
+    const formData = new FormData();
+    formData.append("file", file);
+    return await this.requests.post(`${prefix}/ocr/tsv`, formData);
+  }
+
+}
diff --git a/frontend/api/index.ts b/frontend/api/index.ts
index d434b5b7403..3acb52f1a5b 100644
--- a/frontend/api/index.ts
+++ b/frontend/api/index.ts
@@ -24,6 +24,7 @@ import { MultiPurposeLabelsApi } from "./class-interfaces/group-multiple-purpose
 import { GroupEventNotifierApi } from "./class-interfaces/group-event-notifier";
 import { MealPlanRulesApi } from "./class-interfaces/group-mealplan-rules";
 import { GroupDataSeederApi } from "./class-interfaces/group-seeder";
+import {OcrAPI} from "./class-interfaces/ocr";
 import { ApiRequestInstance } from "~/types/api";
 
 class Api {
@@ -52,6 +53,7 @@ class Api {
   public groupEventNotifier: GroupEventNotifierApi;
   public upload: UploadFile;
   public seeders: GroupDataSeederApi;
+  public ocr: OcrAPI;
 
   constructor(requests: ApiRequestInstance) {
     // Recipes
@@ -90,6 +92,9 @@ class Api {
     this.bulk = new BulkActionsAPI(requests);
     this.groupEventNotifier = new GroupEventNotifierApi(requests);
 
+    // ocr
+    this.ocr = new OcrAPI(requests);
+
     Object.freeze(this);
   }
 }
diff --git a/frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue b/frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue
index 620cb2d3105..445d3a690ee 100644
--- a/frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue
+++ b/frontend/components/Domain/Recipe/RecipeDialogBulkAdd.vue
@@ -2,7 +2,7 @@
   <div class="text-center">
     <v-dialog v-model="dialog" width="800">
       <template #activator="{ on, attrs }">
-        <BaseButton v-bind="attrs" v-on="on" @click="inputText = ''">
+        <BaseButton v-bind="attrs" v-on="on" @click="inputText = inputTextProp">
           {{ $t("new-recipe.bulk-add") }}
         </BaseButton>
       </template>
@@ -58,10 +58,17 @@
 <script lang="ts">
 import { reactive, toRefs, defineComponent, useContext } from "@nuxtjs/composition-api";
 export default defineComponent({
-  setup(_, context) {
+  props: {
+    inputTextProp: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+  setup(props, context) {
     const state = reactive({
       dialog: false,
-      inputText: "",
+      inputText: props.inputTextProp,
     });
 
     function splitText() {
diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
new file mode 100644
index 00000000000..358c3cf6eb3
--- /dev/null
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -0,0 +1,713 @@
+<template>
+  <v-container
+    v-if="recipe"
+    :class="{
+      'pa-0': $vuetify.breakpoint.smAndDown,
+    }"
+  >
+    <BannerExperimental />
+    <BaseButton save @click="updateRecipe(recipe.slug, recipe)">
+      {{ $t("general.save") }}
+    </BaseButton>
+    <BaseButton cancel @click="$router.push('/recipe/' + recipe.slug)">
+      {{ $t("general.close") }}
+    </BaseButton>
+    <v-row v-if="!loading">
+      <v-col cols="12" sm="7" md="7" lg="7">
+        <v-card flat tile>
+          <v-toolbar dense>
+            <v-toolbar-title>Toolbar</v-toolbar-title>
+            <v-tooltip bottom>
+              <template #activator="{ on, attrs }">
+                <v-btn icon>
+                  <v-icon
+                    :color="canvasMode === 'selection' ? 'primary' : 'default'"
+                    v-bind="attrs"
+                    @click="switchCanvasMode('selection')"
+                    v-on="on"
+                  >
+                    {{ $globals.icons.selectMode }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>Selection mode</span>
+            </v-tooltip>
+            <v-tooltip bottom>
+              <template #activator="{ on, attrs }">
+                <v-btn icon>
+                  <v-icon
+                    :color="canvasMode === 'panAndZoom' ? 'primary' : 'default'"
+                    v-bind="attrs"
+                    @click="switchCanvasMode('panAndZoom')"
+                    v-on="on"
+                  >
+                    {{ $globals.icons.panAndZoom }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>Pan and zoom picture</span>
+            </v-tooltip>
+            <v-spacer></v-spacer>
+            <v-tooltip bottom>
+              <template #activator="{ on, attrs }">
+                <v-btn icon>
+                  <v-icon v-bind="attrs" v-on="on"> {{ $globals.icons.help }} </v-icon>
+                </v-btn>
+              </template>
+              <span>Click here for help on how to use this feature!</span>
+            </v-tooltip>
+          </v-toolbar>
+          <canvas
+            id="canvas"
+            @mousedown="handleMouseDown"
+            @mouseup="handleMouseUp"
+            @mousemove="handleMouseMove"
+            @wheel="handleMouseScroll"
+          ></canvas>
+          <p>
+            {{ selectedText }}
+          </p>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="5" md="5" lg="5">
+        <v-tabs v-model="tab" fixed-tabs>
+          <v-tab key="header">
+            {{ $t("general.recipe") }}
+          </v-tab>
+          <v-tab key="ingredients">
+            {{ $t("recipe.ingredients") }}
+          </v-tab>
+          <v-tab key="instructions">
+            {{ $t("recipe.instructions") }}
+          </v-tab>
+        </v-tabs>
+        <v-tabs-items v-model="tab">
+          <v-tab-item key="header">
+            <v-text-field
+              v-model="recipe.name"
+              class="my-3"
+              :label="$t('recipe.recipe-name')"
+              :rules="[validators.required]"
+              @focus="selectedRecipeField = 'name'"
+            >
+            </v-text-field>
+
+            <div class="d-flex flex-wrap">
+              <v-text-field
+                v-model="recipe.totalTime"
+                class="mx-2"
+                :label="$t('recipe.total-time')"
+                @click="selectedRecipeField = 'totalTime'"
+              ></v-text-field>
+              <v-text-field
+                v-model="recipe.prepTime"
+                class="mx-2"
+                :label="$t('recipe.prep-time')"
+                @click="selectedRecipeField = 'prepTime'"
+              ></v-text-field>
+              <v-text-field
+                v-model="recipe.performTime"
+                class="mx-2"
+                :label="$t('recipe.perform-time')"
+                @click="selectedRecipeField = 'performTime'"
+              ></v-text-field>
+            </div>
+
+            <v-textarea
+              v-model="recipe.description"
+              auto-grow
+              min-height="100"
+              :label="$t('recipe.description')"
+              @click="selectedRecipeField = 'description'"
+            >
+            </v-textarea>
+            <v-text-field
+              v-model="recipe.recipeYield"
+              dense
+              :label="$t('recipe.servings')"
+              @click="selectedRecipeField = 'recipeYield'"
+            >
+            </v-text-field>
+          </v-tab-item>
+          <v-tab-item key="ingredients">
+            <RecipeDialogBulkAdd :input-text-prop="selectedText" @bulk-data="addIngredient" />
+            <draggable
+              v-if="recipe.recipeIngredient.length > 0"
+              v-model="recipe.recipeIngredient"
+              handle=".handle"
+              v-bind="{
+                animation: 200,
+                group: 'description',
+                disabled: false,
+                ghostClass: 'ghost',
+              }"
+              @start="drag = true"
+              @end="drag = false"
+            >
+              <TransitionGroup type="transition" :name="!drag ? 'flip-list' : ''">
+                <RecipeIngredientEditor
+                  v-for="(ingredient, index) in recipe.recipeIngredient"
+                  :key="ingredient.referenceId"
+                  v-model="recipe.recipeIngredient[index]"
+                  class="list-group-item"
+                  :disable-amount="recipe.settings.disableAmount"
+                  @delete="recipe.recipeIngredient.splice(index, 1)"
+                />
+              </TransitionGroup>
+            </draggable>
+          </v-tab-item>
+          <v-tab-item key="instructions">
+            <RecipeDialogBulkAdd :input-text-prop="selectedText" @bulk-data="addStep" />
+            <RecipeInstructions
+              v-model="recipe.recipeInstructions"
+              :ingredients="recipe.recipeIngredient"
+              :disable-amount="recipe.settings.disableAmount"
+              :edit="true"
+              :recipe-id="recipe.id"
+              :recipe-slug="recipe.slug"
+              :assets.sync="recipe.assets"
+            />
+          </v-tab-item>
+        </v-tabs-items>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  useRoute,
+  ref,
+  onMounted,
+  reactive,
+  toRefs,
+  useContext,
+  useRouter,
+} from "@nuxtjs/composition-api";
+import { until } from "@vueuse/core";
+import { invoke } from "@vueuse/shared";
+import draggable from "vuedraggable";
+import { nextTick } from "vue";
+import { useUserApi, useStaticRoutes } from "~/composables/api";
+import { useRecipe } from "~/composables/recipes";
+import { OcrTsvResponse } from "~/types/api-types/ocr";
+import { validators } from "~/composables/use-validators";
+import { Recipe } from "~/types/api-types/recipe";
+import BannerExperimental from "~/components/global/BannerExperimental.vue";
+import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
+import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
+import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
+import RecipeActionMenu from "~/components/Domain/Recipe/RecipeContextMenu.vue";
+import { uuid4 } from "~/composables/use-utils";
+
+type CanvasRect = {
+  startX: number;
+  startY: number;
+  w: number;
+  h: number;
+};
+
+type ImagePosition = {
+  sx: number;
+  sy: number;
+  sWidth: number;
+  sHeight: number;
+  dx: number;
+  dy: number;
+  dWidth: number;
+  dHeight: number;
+  scale: number;
+  panStartPoint: {
+    x: number;
+    y: number;
+  };
+};
+
+type Mouse = {
+  current: {
+    x: number;
+    y: number;
+  };
+  down: boolean;
+};
+
+// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object/58436959#58436959
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]];
+
+type Join<K, P> = K extends string | number
+  ? P extends string | number
+    ? `${K}${"" extends P ? "" : "."}${P}`
+    : never
+  : never;
+
+type Paths<T, D extends number = 10> = [D] extends [never]
+  ? never
+  : T extends object
+  ? {
+      [K in keyof T]-?: K extends string | number ? `${K}` | Join<K, Paths<T[K], Prev[D]>> : never;
+    }[keyof T]
+  : "";
+
+type Leaves<T, D extends number = 10> = [D] extends [never]
+  ? never
+  : T extends object
+  ? { [K in keyof T]-?: Join<K, Leaves<T[K], Prev[D]>> }[keyof T]
+  : "";
+
+type SelectedRecipeLeaves = Leaves<Recipe>;
+
+type CanvasModes = "selection" | "panAndZoom";
+
+export default defineComponent({
+  components: {
+    RecipeIngredientEditor,
+    draggable,
+    BannerExperimental,
+    RecipeDialogBulkAdd,
+    RecipeInstructions,
+    RecipeActionMenu,
+  },
+  setup() {
+    const { $globals } = useContext();
+    const route = useRoute();
+    const router = useRouter();
+    const slug = route.value.params.slug;
+    const api = useUserApi();
+
+    const loadingTsv = ref(true);
+    const tsv = ref<OcrTsvResponse[]>([]);
+
+    const { recipe, loading, fetchRecipe } = useRecipe(slug);
+
+    const drag = ref(false);
+
+    const { recipeAssetPath } = useStaticRoutes();
+
+    function assetURL(assetName: string) {
+      return recipeAssetPath(recipe.value?.id as string, assetName);
+    }
+
+    const state = reactive({
+      loading: true,
+      tab: null,
+      rect: {
+        startX: 0,
+        startY: 0,
+        w: 0,
+        h: 0,
+      },
+      mouse: {
+        current: {
+          x: 0,
+          y: 0,
+        },
+        down: false,
+      },
+      selectedText: "",
+      selectedRecipeField: "" as SelectedRecipeLeaves | "",
+      canvasMode: "selection" as CanvasModes,
+      imagePosition: {
+        sx: 0,
+        sy: 0,
+        sWidth: 0,
+        sHeight: 0,
+        dx: 0,
+        dy: 0,
+        dWidth: 0,
+        dHeight: 0,
+        scale: 1,
+        panStartPoint: {
+          x: 0,
+          y: 0,
+        },
+      } as ImagePosition,
+    });
+
+    const setPropertyValueByPath = function <T>(object: T, path: Paths<T>, value: any) {
+      const a = path.split(".");
+      let nextProperty: any = object;
+      for (let i = 0, n = a.length - 1; i < n; ++i) {
+        const k = a[i];
+        if (k in nextProperty) {
+          nextProperty = nextProperty[k];
+        } else {
+          return;
+        }
+      }
+      nextProperty[a[a.length - 1]] = value;
+    };
+
+    const image = new Image();
+
+    function updateImageScale() {
+      state.imagePosition.scale = Math.min(state.imagePosition.dWidth / image.width, 1);
+    }
+
+    onMounted(() => {
+      invoke(async () => {
+        await until(recipe).not.toBeNull();
+
+        if (recipe.value === null) {
+          // Throw error
+        }
+
+        const assetName = recipe.value?.assets[0].fileName as string;
+        const imagesrc = assetURL(assetName);
+        const response = await fetch(imagesrc);
+        const blob = await response.blob();
+        const file = new File([blob], assetName, { type: blob.type });
+        image.src = imagesrc;
+
+        const res = await api.ocr.tsv(file);
+        tsv.value = res.data as OcrTsvResponse[];
+        state.loading = false;
+
+        nextTick(() => {
+          const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+          const ctx = <CanvasRenderingContext2D>c.getContext("2d");
+          ctx.imageSmoothingEnabled = false;
+          const clientCanvasDimensions = c.getBoundingClientRect();
+
+          c.width = clientCanvasDimensions.width;
+          state.imagePosition.scale = Math.min(c.width / image.width, 1);
+          c.height = Math.min(image.height * state.imagePosition.scale, 700); // Max height of 700px
+
+          state.imagePosition.sWidth = image.width;
+          state.imagePosition.sHeight = image.height;
+          state.imagePosition.dWidth = c.width;
+          state.imagePosition.dHeight = image.height * state.imagePosition.scale;
+          drawImage(ctx);
+        });
+      });
+    });
+
+    function drawImage(ctx: CanvasRenderingContext2D) {
+      ctx.drawImage(
+        image,
+        state.imagePosition.sx,
+        state.imagePosition.sy,
+        state.imagePosition.sWidth,
+        state.imagePosition.sHeight,
+        state.imagePosition.dx,
+        state.imagePosition.dy,
+        state.imagePosition.dWidth,
+        state.imagePosition.dHeight
+      );
+    }
+
+    function switchCanvasMode(mode: CanvasModes) {
+      state.canvasMode = mode;
+      const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+      if (mode === "panAndZoom") {
+        c.style.cursor = "pointer";
+      } else {
+        c.style.cursor = "default";
+      }
+    }
+
+    function draw() {
+      if (state.mouse.down) {
+        const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+        const ctx = <CanvasRenderingContext2D>c.getContext("2d");
+        ctx.imageSmoothingEnabled = false;
+        ctx.fillStyle = "rgb(255, 255, 255)";
+        ctx.fillRect(0, 0, c.width, c.height);
+        drawImage(ctx);
+        ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
+        ctx.setLineDash([6]);
+        ctx.fillRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
+        ctx.strokeRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
+      }
+    }
+
+    function isMouseInRect(mouse: Mouse, rect: CanvasRect) {
+      const correctRect = correctRectCoordinates(rect);
+
+      return (
+        mouse.current.x > correctRect.startX &&
+        mouse.current.x < correctRect.startX + correctRect.w &&
+        mouse.current.y > correctRect.startY &&
+        mouse.current.y < correctRect.startY + correctRect.h
+      );
+    }
+
+    function resetSelection() {
+      state.rect.w = 0;
+      state.rect.h = 0;
+      state.selectedText = "";
+    }
+
+    function handleMouseDown(event: MouseEvent) {
+      state.mouse.down = true;
+      const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+      const canvasRect = c.getBoundingClientRect();
+      state.mouse.current = {
+        x: event.clientX - canvasRect.left,
+        y: event.clientY - canvasRect.top,
+      };
+      if (state.canvasMode === "selection") {
+        if (isMouseInRect(state.mouse, state.rect)) {
+          // Update the right field in the recipe
+
+          if (state.selectedRecipeField !== "") {
+            // Just trust me Typescript
+            setPropertyValueByPath<Recipe>(recipe.value, state.selectedRecipeField, state.selectedText);
+          }
+        } else {
+          const ctx = <CanvasRenderingContext2D>c.getContext("2d");
+
+          ctx.fillStyle = "rgb(255, 255, 255)";
+          ctx.fillRect(0, 0, c.width, c.height);
+          drawImage(ctx);
+          state.rect.startX = state.mouse.current.x;
+          state.rect.startY = state.mouse.current.y;
+          resetSelection();
+        }
+        return;
+      }
+      if (state.canvasMode === "panAndZoom") {
+        state.imagePosition.panStartPoint.x = state.mouse.current.x - state.imagePosition.dx;
+        state.imagePosition.panStartPoint.y = state.mouse.current.y - state.imagePosition.dy;
+        resetSelection();
+      }
+    }
+
+    function handleMouseUp(_event: MouseEvent) {
+      state.mouse.down = false;
+      state.selectedText = getWordsInSelection(tsv.value, state.rect);
+    }
+
+    function keepImageInCanvas() {
+      const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+      // Prevent
+      if (state.imagePosition.dWidth - c.width < 0) {
+        state.imagePosition.dWidth = c.width;
+      }
+
+      if (state.imagePosition.dHeight - c.height < 0) {
+        state.imagePosition.dHeight = image.height * state.imagePosition.scale;
+      }
+
+      if (c.width - state.imagePosition.dx - state.imagePosition.dWidth > 0) {
+        state.imagePosition.dx = c.width - state.imagePosition.dWidth;
+      }
+
+      if (c.height - state.imagePosition.dy - state.imagePosition.dHeight > 0) {
+        state.imagePosition.dy = c.height - state.imagePosition.dHeight;
+      }
+
+      if (state.imagePosition.dx > 0) {
+        state.imagePosition.dx = 0;
+      }
+
+      if (state.imagePosition.dy > 0) {
+        state.imagePosition.dy = 0;
+      }
+    }
+
+    function handleMouseMove(event: MouseEvent) {
+      const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+      const canvasRect = c.getBoundingClientRect();
+      state.mouse.current = {
+        x: event.clientX - canvasRect.left,
+        y: event.clientY - canvasRect.top,
+      };
+
+      if (state.mouse.down) {
+        if (state.canvasMode === "selection") {
+          state.rect.w = state.mouse.current.x - state.rect.startX;
+          state.rect.h = state.mouse.current.y - state.rect.startY;
+          draw();
+          return;
+        }
+
+        if (state.canvasMode === "panAndZoom") {
+          c.style.cursor = "move";
+          state.imagePosition.dx = state.mouse.current.x - state.imagePosition.panStartPoint.x;
+          state.imagePosition.dy = state.mouse.current.y - state.imagePosition.panStartPoint.y;
+          keepImageInCanvas();
+          const ctx = <CanvasRenderingContext2D>c.getContext("2d");
+          ctx.fillStyle = "rgb(255, 255, 255)";
+          ctx.fillRect(0, 0, c.width, c.height);
+          drawImage(ctx);
+          return;
+        }
+      }
+
+      if (isMouseInRect(state.mouse, state.rect) && state.canvasMode === "selection") {
+        c.style.cursor = "pointer";
+      } else {
+        c.style.cursor = "default";
+      }
+    }
+
+    const scrollSensitivity = 0.05;
+
+    function handleMouseScroll(event: WheelEvent) {
+      if (state.canvasMode === "panAndZoom") {
+        event.preventDefault();
+
+        const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+        const canvasRect = c.getBoundingClientRect();
+        state.mouse.current = {
+          x: event.clientX - canvasRect.left,
+          y: event.clientY - canvasRect.top,
+        };
+        const m = Math.sign(event.deltaY);
+
+        const ndx = m * c.width * scrollSensitivity;
+        const ndy = m * c.height * scrollSensitivity;
+        const ndw = -m * c.width * scrollSensitivity * 2;
+        const ndh = -m * c.height * scrollSensitivity * 2;
+
+        if ((ndw - ndx) / image.width < 1) {
+          state.imagePosition.dx += ndx;
+          state.imagePosition.dy += ndy;
+          state.imagePosition.dWidth += ndw;
+          state.imagePosition.dHeight += ndh;
+        }
+
+        updateImageScale();
+
+        keepImageInCanvas();
+
+        const ctx = <CanvasRenderingContext2D>c.getContext("2d");
+        ctx.fillStyle = "rgb(255, 255, 255)";
+        ctx.fillRect(0, 0, c.width, c.height);
+        drawImage(ctx);
+      }
+    }
+
+    function correctRectCoordinates(rect: CanvasRect) {
+      if (rect.w < 0) {
+        rect.startX = rect.startX + rect.w;
+        rect.w = -rect.w;
+      }
+
+      if (rect.h < 0) {
+        rect.startY = rect.startY + rect.h;
+        rect.h = -rect.h;
+      }
+      return rect;
+    }
+
+    function getWordsInSelection(tsv: OcrTsvResponse[], rect: CanvasRect) {
+      const correctedRect = correctRectCoordinates(rect);
+
+      return tsv
+        .filter(
+          (element) =>
+            element.level === 5 &&
+            correctedRect.startY - state.imagePosition.dy < element.top * state.imagePosition.scale &&
+            correctedRect.startX - state.imagePosition.dx < element.left * state.imagePosition.scale &&
+            correctedRect.startX + correctedRect.w >
+              (element.left + element.width) * state.imagePosition.scale + state.imagePosition.dx &&
+            correctedRect.startY + correctedRect.h >
+              (element.top + element.height) * state.imagePosition.scale + state.imagePosition.dy
+        )
+        .map((element) => {
+          return element.text;
+        })
+        .join(" ");
+    }
+
+    function addIngredient(ingredients: Array<string> | null = null) {
+      if (ingredients?.length) {
+        const newIngredients = ingredients.map((x) => {
+          return {
+            referenceId: uuid4(),
+            title: "",
+            note: x,
+            unit: undefined,
+            food: undefined,
+            disableAmount: true,
+            quantity: 1,
+          };
+        });
+
+        if (newIngredients) {
+          recipe?.value?.recipeIngredient?.push(...newIngredients);
+        }
+      } else {
+        recipe?.value?.recipeIngredient?.push({
+          referenceId: uuid4(),
+          title: "",
+          note: "",
+          unit: undefined,
+          food: undefined,
+          disableAmount: true,
+          quantity: 1,
+        });
+      }
+    }
+
+    function addStep(steps: Array<string> | null = null) {
+      if (!recipe.value?.recipeInstructions) {
+        return;
+      }
+
+      if (steps) {
+        const cleanedSteps = steps.map((step) => {
+          return { id: uuid4(), text: step, title: "", ingredientReferences: [] };
+        });
+
+        recipe.value.recipeInstructions.push(...cleanedSteps);
+      } else {
+        recipe.value.recipeInstructions.push({ id: uuid4(), text: "", title: "", ingredientReferences: [] });
+      }
+    }
+
+    async function updateRecipe(slug: string, recipe: Recipe) {
+      const { data } = await api.recipes.updateOne(slug, recipe);
+      if (data?.slug) {
+        router.push("/recipe/" + data.slug);
+      }
+    }
+
+    return {
+      ...toRefs(state),
+      addIngredient,
+      addStep,
+      api,
+      recipe,
+      loading,
+      fetchRecipe,
+      drag,
+      assetURL,
+      handleMouseDown,
+      handleMouseUp,
+      handleMouseMove,
+      handleMouseScroll,
+      updateRecipe,
+      tsv,
+      validators,
+      switchCanvasMode,
+    };
+  },
+});
+</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>
diff --git a/frontend/pages/recipe/create.vue b/frontend/pages/recipe/create.vue
index becad45f2eb..ba10b4715bf 100644
--- a/frontend/pages/recipe/create.vue
+++ b/frontend/pages/recipe/create.vue
@@ -44,7 +44,7 @@ export default defineComponent({
       },
       {
         icon: $globals.icons.edit,
-        text: "Create recipe from image",
+        text: "Create recipe from an image",
         value: "ocr",
       },
       {
diff --git a/frontend/pages/recipe/create/ocr.vue b/frontend/pages/recipe/create/ocr.vue
new file mode 100644
index 00000000000..cc81b03dfaf
--- /dev/null
+++ b/frontend/pages/recipe/create/ocr.vue
@@ -0,0 +1,57 @@
+<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">
+      <div style="width: 250px">
+        <AppButtonUpload :post="false" file-name="file" :text-btn="false" @uploaded="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,
+    });
+    const api = useUserApi();
+    const router = useRouter();
+
+    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(file: File) {
+      console.log("file: ", file);
+      const { response } = await api.recipes.createFromOcr(file);
+      // @ts-ignore
+      handleResponse(response);
+    }
+
+    return {
+      domCreateByOcr,
+      createByOcr,
+      ...toRefs(state),
+      validators,
+    };
+  },
+});
+</script>
diff --git a/frontend/types/api-types/ocr.ts b/frontend/types/api-types/ocr.ts
new file mode 100644
index 00000000000..c8ffde1e4c2
--- /dev/null
+++ b/frontend/types/api-types/ocr.ts
@@ -0,0 +1,21 @@
+/* tslint:disable */
+/* eslint-disable */
+/**
+/* This file was automatically generated from pydantic models by running pydantic2ts.
+/* Do not modify it by hand - just update the pydantic models and then re-run the script
+*/
+
+export interface OcrTsvResponse {
+  level: number;
+  pageNum: number;
+  blockNum: number;
+  parNum: number;
+  lineNum: number;
+  wordNum: number;
+  left: number;
+  top: number;
+  width: number;
+  height: number;
+  conf: number;
+  text: string;
+}
diff --git a/frontend/types/components.d.ts b/frontend/types/components.d.ts
index 0d9e4c134e7..1c7d22d8875 100644
--- a/frontend/types/components.d.ts
+++ b/frontend/types/components.d.ts
@@ -30,10 +30,6 @@ import AdvancedOnly from "@/components/global/AdvancedOnly.vue";
 import BasePageTitle from "@/components/global/BasePageTitle.vue";
 import ButtonLink from "@/components/global/ButtonLink.vue";
 
-import TheSnackbar from "@/components/layout/TheSnackbar.vue";
-import AppHeader from "@/components/layout/AppHeader.vue";
-import AppSidebar from "@/components/layout/AppSidebar.vue";
-import AppFooter from "@/components/layout/AppFooter.vue";
 
 declare module "vue" {
   export interface GlobalComponents {
diff --git a/frontend/utils/icons/icons.ts b/frontend/utils/icons/icons.ts
index 41a45e02bb9..9686ebc348b 100644
--- a/frontend/utils/icons/icons.ts
+++ b/frontend/utils/icons/icons.ts
@@ -118,6 +118,8 @@ import {
   mdiHelpCircleOutline,
   mdiDocker,
   mdiUndo,
+  mdiSelectionDrag,
+  mdiCursorMove
 } from "@mdi/js";
 
 export const icons = {
@@ -253,4 +255,8 @@ export const icons = {
   slotMachine: mdiSlotMachine,
   chevronDown: mdiChevronDown,
   chevronRight: mdiChevronRight,
+
+  // Ocr toolbar
+  selectMode: mdiSelectionDrag,
+  panAndZoom: mdiCursorMove,
 };
diff --git a/mealie/routes/ocr/pytesseract.py b/mealie/routes/ocr/pytesseract.py
index 5142c4cb25f..2433a542edd 100644
--- a/mealie/routes/ocr/pytesseract.py
+++ b/mealie/routes/ocr/pytesseract.py
@@ -1,6 +1,7 @@
 from fastapi import APIRouter, File
 
 from mealie.routes._base import BaseUserController, controller
+from mealie.schema.ocr.ocr import OcrTsvResponse
 from mealie.services.ocr.pytesseract import OCR
 
 router = APIRouter()
@@ -11,3 +12,24 @@ class OCRController(BaseUserController):
     @router.post("/", response_model=str)
     def image_to_string(self, file: bytes = File(...)):
         return OCR.image_to_string(file)
+
+    @router.post("/tsv", response_model=list[OcrTsvResponse])
+    def image_to_tsv(self, file: bytes = File(...)):
+        tsv = OCR.image_to_tsv(file)
+        lines = tsv.split("\n")
+        titles = [t.strip() for t in lines[0].split("\t")]
+        response = []
+        #  len-1 because the last line is empty
+        for i in range(1, len(lines) - 1):
+            d = {}
+            for key, value in zip(titles, lines[i].split("\t")):
+                if key == "text":
+                    d[key] = value.strip()
+                elif key == "conf":
+                    d[key] = float(value.strip())
+                else:
+                    d[key] = int(value.strip())
+
+            response.append(d)
+
+        return response
diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index 61c5f938f6e..c61939d7f74 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -44,7 +44,6 @@
     EventTypes,
 )
 from mealie.services.recipe.recipe_data_service import InvalidDomainError, NotAnImageError, RecipeDataService
-from mealie.services.ocr.pytesseract import OCR
 from mealie.services.recipe.recipe_service import RecipeService
 from mealie.services.recipe.template_service import TemplateService
 from mealie.services.scraper.recipe_bulk_scraper import RecipeBulkScraperService
@@ -444,9 +443,7 @@ def create_recipe_ocr(self, extension: str = Form(...), file: UploadFile = File(
         """Takes an image and creates a recipe based on the image"""
         slug = self.service.create_one(CreateRecipe(name="New OCR Recipe")).slug
         RecipeController.upload_recipe_asset(self, slug, "Original recipe image", "", extension, file)
-        description = OCR.image_to_string(file.file)
         recipe = self.mixins.get_one(slug)
-        recipe.description = description
         recipe.settings.show_assets = True
         self.mixins.update_one(recipe, slug)
 
diff --git a/mealie/schema/ocr/__init__.py b/mealie/schema/ocr/__init__.py
new file mode 100644
index 00000000000..e69de29bb2d
diff --git a/mealie/schema/ocr/ocr.py b/mealie/schema/ocr/ocr.py
new file mode 100644
index 00000000000..aee3adcb91f
--- /dev/null
+++ b/mealie/schema/ocr/ocr.py
@@ -0,0 +1,16 @@
+from mealie.schema._mealie import MealieModel
+
+
+class OcrTsvResponse(MealieModel):
+    level: int
+    page_num: int
+    block_num: int
+    par_num: int
+    line_num: int
+    word_num: int
+    left: int
+    top: int
+    width: int
+    height: int
+    conf: float
+    text: str
diff --git a/mealie/services/ocr/pytesseract.py b/mealie/services/ocr/pytesseract.py
index b1f6047a0e2..78ba69232b5 100644
--- a/mealie/services/ocr/pytesseract.py
+++ b/mealie/services/ocr/pytesseract.py
@@ -1,3 +1,5 @@
+from io import BytesIO
+
 import pytesseract
 from PIL import Image
 
@@ -14,3 +16,9 @@ def image_to_string(image_data):
         Returns a plain text translation of an image
         """
         return pytesseract.image_to_string(Image.open(image_data))
+
+    def image_to_tsv(image_data):
+        """
+        Returns tsv formatted output
+        """
+        return pytesseract.image_to_data(Image.open(BytesIO(image_data)))

From 13c5fe56caf9d69fa86ec868a4cb4c987604711f Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Thu, 14 Jul 2022 12:19:44 +0200
Subject: [PATCH 04/62] fix frontend linting issues

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 5 +----
 frontend/pages/recipe/create/ocr.vue       | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 358c3cf6eb3..7af5b400260 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -182,13 +182,12 @@ import {
   onMounted,
   reactive,
   toRefs,
-  useContext,
   useRouter,
+  nextTick,
 } from "@nuxtjs/composition-api";
 import { until } from "@vueuse/core";
 import { invoke } from "@vueuse/shared";
 import draggable from "vuedraggable";
-import { nextTick } from "vue";
 import { useUserApi, useStaticRoutes } from "~/composables/api";
 import { useRecipe } from "~/composables/recipes";
 import { OcrTsvResponse } from "~/types/api-types/ocr";
@@ -269,13 +268,11 @@ export default defineComponent({
     RecipeActionMenu,
   },
   setup() {
-    const { $globals } = useContext();
     const route = useRoute();
     const router = useRouter();
     const slug = route.value.params.slug;
     const api = useUserApi();
 
-    const loadingTsv = ref(true);
     const tsv = ref<OcrTsvResponse[]>([]);
 
     const { recipe, loading, fetchRecipe } = useRecipe(slug);
diff --git a/frontend/pages/recipe/create/ocr.vue b/frontend/pages/recipe/create/ocr.vue
index cc81b03dfaf..0d9527deb12 100644
--- a/frontend/pages/recipe/create/ocr.vue
+++ b/frontend/pages/recipe/create/ocr.vue
@@ -42,7 +42,7 @@ export default defineComponent({
     async function createByOcr(file: File) {
       console.log("file: ", file);
       const { response } = await api.recipes.createFromOcr(file);
-      // @ts-ignore
+      // @ts-ignore returns a string and not a full Recipe
       handleResponse(response);
     }
 

From 362cafd39d2bab93b399707fbcfa762264d13798 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 16 Jul 2022 12:22:41 +0200
Subject: [PATCH 05/62] Add service unit tests

---
 .pre-commit-config.yaml                       |   1 +
 tests/data/images/test-ocr.png                | Bin 0 -> 11513 bytes
 tests/data/text/test-ocr.tsv                  |  73 ++++++++++++++++++
 tests/data/text/test-ocr.txt                  |   9 +++
 .../services_tests/test_ocr_service.py        |  15 ++++
 5 files changed, 98 insertions(+)
 create mode 100644 tests/data/images/test-ocr.png
 create mode 100644 tests/data/text/test-ocr.tsv
 create mode 100644 tests/data/text/test-ocr.txt
 create mode 100644 tests/unit_tests/services_tests/test_ocr_service.py

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index cc3cf44705b..4b6eabec8c6 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -9,6 +9,7 @@ repos:
       - id: check-toml
       - id: end-of-file-fixer
       - id: trailing-whitespace
+        exclude-types: ["txt","tsv"]
   - repo: https://github.com/sondrelg/pep585-upgrade
     rev: "v1.0.1" # Use the sha / tag you want to point at
     hooks:
diff --git a/tests/data/images/test-ocr.png b/tests/data/images/test-ocr.png
new file mode 100644
index 0000000000000000000000000000000000000000..1b699c9778d0b7b691845573347eac2e213664cb
GIT binary patch
literal 11513
zcmeI2XHb)0yY531X`<4*h)RhR4WSn$G(mc=0@Ay*P^733M7j{bPy&MVUV;!hqO{N<
z^d`Lq2)!Nt@4NRtbI$C~XXec856@)gp3MEMN!DEJx_<YH&{S8VB4;KC00304l;yPn
z0KyOefMEVM;Z3E!O10|dgUnso$P)lyZ~NyVa2@cLxhY!u>l%7#TS6bWd$`#;INLn%
z@^iO&AZF#@0s#0<nnj_hLWC&g12o=orO9gdioJO8-QqgwNeCP}W8i^yB>-e<Nwr%=
zsLM*oCN5<ttQB9+tUu!Adad4|;AFh*&8qjBeUgF0`^YM^<)0P!xWBaf&!qv{UvhE*
z08ekdl7Fe|JGnhGm{iOc6=E4M)^H8Pn&Ky=y=fuJgk)#I1_4kw`Mrqm+Oo+0)tfd>
zml{3<H_PL?FLcvW`KI%u2LwcbxDaAWzzf3vDgJ-|gPhF4S<X*SEBH@N->XMnU)gw}
zA*vIFB5pK^M)_?V5Hr}~-O7#*_VVlsNoLF8A>t^zbLrnnY!;E83p49~7mW=pN<G31
zC%WT?P*6(U__kfEPn`BXOZ2_%EOn_mrFrKy9itl7r4C_tC%VfWrqp>MVQp^K>vZlQ
zID#}OeQL&)#(rOZHZD*jb?Q4h>z!3J|DAAck)MROY=yk&v9FIV8T>f_5akx%bR-hl
zV%>H47?8Tn(KaMy$}LOlz7gqix&Be@HjvUNuWl)C*OwhSG9Bygx>FyK2*f&ldNv(7
zC^+Pd%(f9yYO2dTuwatLg?C$&Rvy46qh3S{SWzTezO?&<71W#fO*UTM3>L*n#o|gP
zLUG3}^i1aagBY+R`leHXTUnqC5?v1rnB95Uc8sxMEX>w~YBcVQc}{byV=A@0DJe5$
zHT&-S5P|(I{3~m+E^M|Xi1}AJ`<WH7RUR}w869SK({^i0rl(htE#4AEvUn{~ebA(y
zD=PxYcRc@*P5N!DuLwhBr<B|a=SKgqF(=d>9qyf{i?F|b0Mv)c+lRF#!lr+5)@AK{
zckZz))t=wSv6<;PhK&X+hu&AG(NLGJ1rPf9pAO$qY$X#m2oyi-)4bSFXBS{Y<x+S+
zETv1|T^`KCj7BNp!f9vR{_@qwCjSbvvXI!GzH&_Ts9DKGgIZ_*;w}1f<^`O7ldtE3
zoO+--c+_hVJ0I$G3B68N*{KQpI-UM3XXN4gSTE7Mh~E`CWgyzC(pF^3)NcVFwU&P0
z8f<yQ;2*^mIRATV-{lp#-p$R!S`W19H_=-2<9ZkS2NHoe@dnD7qM<;RkSmYVon4Z1
z(r7c9avf+(_uRvFQLUvf?nj>H2O<o>J^4Q(c87n%=3GXL8kFeq-YfeSy8$g)N0&7)
zJABm?TLOi7xV_9bDTjiG&X3*n>(nC=6-vUu1~k9%>OusLZ+ESc%+U96@wQ_+NaR@!
zr%Vm}kN<4X=ZNpF-|c43X4*bBxxz%fly=ox!o{c|BP_NbQhgzw#j!E$CiXJ-jz(%7
zjt@78FI0a<a~yi1gK02a;Srx1xX#sW?yP(3huiJ4UAOBWoYgz(3B(XzT+>TwuFm}$
zfu(qpR-Ck68+0}Y8~C<~xEIJ@JuztL21nL*w6~kc4rJno@-l<39D<m^k~3RsTc!I|
z*>cZ@kjyh@>+e`FG<|c__)_Fd!Ff73V2L^Z4^%!vqxrm1nBdx|d{ty7G`O<gFhaUx
zWUDB4mFP^xsJ4qt<Ni99p2sP6JU3@XRFy3kRS}l_WPUuN!@$)lpW1`oWLE#=T(_!-
zo+WL(e(q91w)UzCOR(|;d%?5W`k5pk$E0Q_;bFJJM(0LM(gHg!Xjps22RLIz-8k!B
zkI`|@d@WvttV-(+JYy@x^WMVjR+w_2^~N>@tgzfcaO`K)SB`7U@xhVu$%<5D6nozX
z!LM6E-+;dBbhw3-i>Ed;`=W32s@6+OPS+b8a3a#RhX!->s}l<dFZ~T<lx7t?O9P&2
z*q}t2s_G1)P^8IA3PxQJJ1fg+Ej0BAe>i>WPJ>Zc!923#L2;Az&)$Pa?~KK{`^7w&
zQs2ulw8Z&&>A}828KPWT5HF%#UA^M{R);H!W*Q^M=MSmp{Wkg`#1^OvpalS6{`tQ>
zz49^%0Lm?N|JOms@s?*h{orw9;h2Yw68GyMjWu?hs+bMfWH10RreaD!q|kA7)YH^#
z@HudB!}^g$=6Bpysu^d)os!Z>PWuNsTN)(}zbgo6TmN@sW%iFK>F#`^jbq7Rq(A!t
z3;)tuLQ#gMFTHNk^%}{keaD369#a^S`TZ2CepI%^hesyQHn>(~d3dDzQ;|tFI<u?e
zWVYL$D<TkO+FZ9o4!QF!PELI$Z5jrS#+5z}VDA;#I>zOCm<Nx6mfHe()eg1=4jbKi
zUp7pc)^3s&j6l1TcDKb7K6s?d#bGKo#wImS;^>#(sF;uP4v&u&o2KUOqR(wbEvL7e
zvI@J@Ht|Z9kc{W{QKbW(ohg1XPN%WiCW+9r@{(a~%;6vQ@&&aYyq34?&n?bo@<2(I
zbd{%CzI)C<VQfA6b4h-7#q(Xk_B>$n<mbHLx~Z9!%xLr4iAuL)o%V+x^p0?>SWsxJ
zXv(#~`}!?L4fc;sEWn#1Nh@QN@9o0GCI*wP!eeSZ$N%st*sFKC<e*-BmE7e6qB=3y
z1;q$cx+=Zk<T}7^&W{%XvvLv5J>d<uF4%p0dNNt-JBOTQQHqIie<xdf{?6+PLDt%+
z$C>_|)Q%do$cf1yV{L`!>va#DpmTc++U7^b6gFhd%}+uXPuz$agD?|Mdx0a^Nt#*L
z7m7VXw2->s;C9NFeLeD*oWW-ZPl!j?Wq8y=oa}3}Z+USQHFqpaZI$Wo_L0D+4pjrl
zjb#hWp}dz7+RB{aF)qPOQXT9rbEtHWl%pO*`Gt#>mx%`@dbI~lE#II2xz5`m)O7hA
zd1tV!+o$t&A=W&5;B3HKFqc7?ZeobIcmjj^5_n~#uYA4t)`>O2);ju2M$?$wD=DDc
z>~mW70Taz-C2f&Dzwq~-=<pr;A>sQPtQ&?trb-3w&gzbQYU0Nswe~a#<V@ZN7Ok%~
zKceNeiX3AeU?lhEE(x*gBM_21T!K}V*|8E!?VA~EyD4TgtZMLGmFG1D&O&rHVJrLh
z&tdhawrwM#Q5?II3a<AEPCp<fqH}WjeM~LHFJA>3=~zB_%KC>ZsQT9t{e$n$@m)*Y
z(nzejNQtfr4YNOw7+)caDM2=Gd9)7_G`Y-3?<y^#@nx8!bsQlC|8@42H8(jpaobv_
zBX-j-djJ%Jf2H<#mE70<j~yFzg0Y>hw=M1NfsNvfUGkgK&qBF5rmI^ix-^IMA^Vab
zl_@jpmrfdP;=ov^s)yX3&?hAB4uoTgv!Hi+odUY_&)sRQ><JkzCF8*?_$YxFvurEF
zmL`-vin9<|IDDaFhsjL>tbu|tlT|*QWx(oJR2Gahl0KD<OX?H~PveF&tL#hDi`F!O
zXeZKG+rja{spF*>k!O~el3vZMP!tvue&^Nl8Pz6bd{Rhi9wQ>*&gzRrd(JS8)C8%{
zj^Wo8!n(XuE6z@l`+*~53D!)VO7Z+Bc}(4us?y_Yk-HSkDK6b4{fXd1leTUd&<{lv
z(UFiDa|g`z5Ml@|bB2XJC@cwP&}MRNf5@py#h+hs)rof-tZRmKTTI#1mD-GP@N&%b
zV{ap2totG}qLR`b<3*2`k~FVF8$6#^u3SFBxDFxHS-$Wo|0K*1el@kVx>o;Y?MN;A
zurlzGTVFYfDVE*0(Du$}%Xo6NcQ8jC>OM)|Z~;Z7$cn3$i6Y-fJNpW%Al9)y&Ya$F
zAWN{_Dft^m8&0ClAI=0?&}0`I-0eB5`KyhjCD2u5PMuU4Wmto&a6R-&#PR%N!zaS?
zxQ=vf<vsl*m)~edm<s=9uaflY4^cpik1)~5sB4i@!8xrk06?uscnh#JZgp$e?<Q%4
z5FaAhk<oQGs;v50hC!d);HD;AhG`<zcu52p3mBr-nE3SKHUMB4%V`e)+>Z;nk?-;e
zodHxtD?$}KCu<@*N3KCc*dn>@MZyXX+{`yck$4At9uioj60?pQG1PUx_dN6SoFSOU
z+Cm1x&!MUpn*};tfR-jy-OWPgU$JL|Fl`V6MiQm&g|8I+ML*(8Hmw>tByFTxen#w`
zuXu(@FZ2xT4XAF)?hkePQjgsoCu)&$I1VXedw1NJnZJEiI#<53@(^2WYxrtwMV%re
z_x<^$8|VtVR5Gz+7LAX$)Rq7UCJGVH1YYN?{M=i7o+_H>XQZnB4dT5XRJSrq9O6Z0
zzz!u!-3R1uLsP?Ej$}oM32#12R+Bv{q8xlCgW%6|u`^6;B@Hn!3M6^zHG%BU3xdAq
zw>$|sMcnP$WD2xVy+Z+*=iBC8b0syiTdNGH6XBgmfh_eVJ9$U}8m4c=rK<oxY3415
zKjlV00F)!s@-juYE5Y1%r3Osw)(8Q7Q*M0Sc2my+whe6o%E!2G<zoR;%YqXO0Oy~C
z>^RiY<Y?e(3Z4=G^(YNlPu_J#{Pkm|04VaSwZKk8p?ht}<lUz9LsST$C9eKBgu+~%
zKf^~WL+C!Byr!CXy1}~mn{mCTS;vh-N%LFj@k4|a*8vGKV@9bh(}TkQNG0o7RfLT^
z&mOmd<U~bO`d~P$RLZyjy$S9l&M7<<AK@K4G6TAg<V|Sr101`VJ~pWeEocl~m8jJj
zpPu)8ap8f`*Tq3)g`VnKdL<LI<j%^tJp=%FH)Ket04<;5|JgP#ZvO8F1Z0dio9@w#
zLHPGx`oD`$FQ45yNW5$w_HOh+T<r+%-YNN2m(lWYfrq1Ou>-hV!#2W0co=@;Fj{CY
zo)<WOBEHzyc?1~0S5WJ;e%A{Gf6h9nU>FyMBJHjEmmBDZ{PWt@A<i`>MdZ-P_45mR
zf|#-0e&pEoIn**6Bj}YZG0k;)6>bJ6IVn|zW+T!clPc9k49A>bdCc?QKPYsj5ZNqs
zP(=VH+XO<fKEWIHKRNY3EO-wkTIY+dDIPMe$Kds3T-x5)YVh+-i4nx^{9U0T$i9qk
zkh3Yn9~@+h3zZ_xlgSGb4~)nHS(}>uE|1M7hetLAav+aow=)MXS?)hv{`f~(=Xy%N
zmIP4*s@4THKm#w28Stx_81KG2Zq8EZ^jFG~x{B-7%}XV7U}~G@+9qy|>dm{=<+0&c
zrKetA@izTeVY+-9LldW3qUSMVn?L)H`~3MS;yLfMY5!n<1*c##2^*K;lxmo<k_Vgh
zTY}5>a*mhkM4AX?T>ZB<{gUF|I%A2U*&IM<vk+l+neO~aVHN<A9dky58wBvFri|-4
zzZ*afTRSL17{wV1pT;UE9g-n_i_3e`zWH<nMLev9ET_{3w(E-ow8wetYh<`$f%AVW
ziG*J^2mSG*y-9Yv;Iu3B(>pLt*5S%B50~uYiybS;-K{_LdX_F{xmKSc(1P)KF|+J<
zmu>c^hxe}3DQDE)Bv;b8<>UTTA8>neh?SA)t#wsxAwr0d@cc1RDm^}Hs)~tYypo9)
zm8jBNh;EMF_~L`zc*N5CEjt#E6y{mic&pug_81v=qoYyX?N`#LrDS4S1wIcFTYU<2
z)3U11-u1boa=*W#3)rq9!QT@QL)YX!+Ml9Fc|V+)Jq`)CKdWin;n3COG(AIG1w3mm
zB#!2PIQE`7*b%<TapNjF1WQBaO4UV$vmcqThUS;`Syl#c?nM({aNx21xTs|O2T2%u
zB-?3rQlQ3n@Gf2eZT(?bUKdS?JxR}{^?g+`h;M7Wj^dNerf>d97*rPLBXvkZ)?TT>
z90qCzQbzN)6*bKHCBFYjY4&LTFJqc(uI`(;bd^^E)&=#UMZ+{yYMY?5*H2^OZ*R_h
z6@30<#;oFP>T&m3UzHiZd18oNv-qT0|JrL5;k8rcL1D15$%xd{nOwJ#%W|09*psE?
zmqh$iadQJKZ|0zOE2I8HWn#Wf`kr&rmGsRS$Pl>B#nkPDI%<BgGD-^b3Q^LR0=@Q)
z8>YJ=6W>Rqvax9kBqBn75SWUZRZKZ98NL3pt$pe#%rZA-=Mg7MI_RbicbV_)O}wN~
z8`jEz=Rjk0NwB>}xq_j%FGtLw1~}m}eE7#M@m<OwpY;!aX`9T%1(#B8k%k2`oii9B
z=wnbJPc1!2>YDt-;3RB*&5hDm24TkAFI-pwmY_XwVBw?F6G?rwZRzz8HD1Twetf>T
zZ{H?aomn^5ll$Ryn%lm?2(PLuztuALeAZ^)pn`hj9Glh$U^Ux#Mz(<wueg67cbrmq
zo3m0pNOV(_If#-}gwBRFQC4-ncto>xB@AoIZX(h+1z#ceug}doD8$KVzCo?bMdFtt
zX7>r#tQzize5Axw`l<?;OT9Sy6427Z5*HoPxJ3Pu$S`wcSQ~KXz7S3dD{AO0`{GsK
ztz4_y%)YlVQ{XedOiEP(#x^=394n{bn|BKo#jQF6Eg-*)t}h62f{=f+KiEHM>0c7r
zx{;TO6g3DrB~^+{)aPAZz1S#k{LNL&{m6fJngK)`YrVG!uQVwBN$9iSrv(V1A`>&*
z8!lb!APPCQco@UT@)%{Sl?^jQeo1+753^fvgMR)I<M9}l8@g8Y1u}5vXAkGaL8%a3
zfr&H#vs$2FKI{CpYvT%05Nu%+R{%@3`5Bq#VVB;NIVZWIa(Z0W^kbdF30tf~qaD~%
zHb?Dzx`O8K^9d^HTPw2?X0aA6M;r;3b(d$g81g3bjXvI>Q)z)t2wz~R)Rbsy_R+e5
zpG)cjQc*E0Wjj$BAipOv&Wa}^4Ab6JuoB^8b>$yv=LW&rC+Ej=U($jaTF3n1t@rLo
zTV`idJ$)p<uZ<uHbNL3Xejc)~4Ow6#zp7E-P5wev#*Z>8q<rbbY=fbEl&CLIjw@)e
zh*x}~>yF<=XefzR7uSU9cAwr&E8*|rSl^`Ex58^O5vG1Q<;n_Op(`DsD&suK=8zU^
zPzfsyx%Sd%-))*Ob^I;Z@;=tV3FQI3<u4(ADHBXt=W3Ge*Yxy_`b?m(SBzlnZb=sJ
zC)0xQLEq&j#>wv`=1_Q}iM)>7!I+Dh!Z`Sh)g1~p`eWuRy^MWoL$NypQ&csSj{sVT
zCn%WR<uTFTqE*1s1<4=>XUn%F<?`xzhF^CI(9>&>4Gx&Q!a9uhH=72EU8);-4FU{a
z2LF(9k}OtRHg-~LcAMe?b}i7!zy-f3COg6m*l#rh-F@W4;mR$+w%pAh!5bNzNrf@Z
zO*0e^+EYrh7&+54xQj0a156%{)Xv&q{T5<T-;lQpf`wpJdg4o>g+vTbf5;PFUHpAB
zI&knCdQJ88lco(u30~zEzfa5i+iYTo`6wrTHETWvc?e1z!}+?zOG^rW9hBw<Y8SkE
zJcz8I0)sBKz1xa(_t<fQtDf}GaC|qAyT5BD<`^WLG`iXP%#;gfc$ZzJtYuo){;i5!
z=96g5)^~lvqw1AzhR7fj>}T~2sw;_!X4;-0QtQXCOzPtRE*R<8@LQ0O0`u|PP^26I
z4)~7bsciLoL!=6aUL6;Yn7iFUlyRt-*%KLC28zSL1;1O?{jLXQdZi)3flX`4d;z)v
zxeZ+c0XfMWZ`FdI@v^W&xO8Py^-BCa)B5Py^Z&@p$P$qDwd4gC?Yd1c{k4EGya0p!
zU#HUWu^av&UpPB`Ueo(Q<ENO(F0=#e#1n9pRkk%Kk^Uuc#a_Dt%OcGp3C=kyvC$18
z+<CrK80|Hu<ZpOq$LDpo#Mv7uaBsAzae<Qq8mT_nkq{HZe@9}~RDB?_(ST8M!Cvi@
zY+Q)u>@d4hN%cV6!b@PdvSv8J^YzK=&c1ckb|AQ#kHwB)XN(CwiBEDaQupMwG|xlt
zzE+_I`CLY|-S*5_D=L?1(1G75ZLF<*k4Qj^_fTcQ>AB}=I+I#~u)_TnL-pMm{4+9f
z-3uU|0ipwIAxm%>Wim@GITT4w7p55EG11WyuxScaE*K#^d->E8#4@9AbZXENzR1I$
zVN3~^xK*_ay7e7HqsQFDaTV`!?~<Hbx<&Tw*$X=do!5@k*`B^75hnUbapOI;c9wj3
zLYW;RGx5wBQls5&K`an@A3b5h6b-ix+dutM$=IF#eJ%^e?C0tnPWz(D7g}QzYh?1d
zS830C#O1egYSx~U+|sv>ekPs+Z5x)1`Gqoe74V$(620w~6|J>>QiqAh-lCrVCc6;8
zIog@Hkq<HuxgEel*U~hLbELx0`jRwsoT~y*M^pXNGg#{2X=+J-1Hu*4`z^YNTBj#!
zkPq7pUboK}>=FTO7+;mNzKwYEV_Lj}>21Kuo>YQ@-Jx%p>Wwby;x_(CJ(d4TJ-E`m
zOd2{r>FfA1i_<qa<)<aHZjJ19q+q$2%<(lk@qCW?n)oGhF~hC0?(9f=qH$U>vHM*X
z701LEE(W(+ScHh9xyN~Ay@Ln*v+IlH4RKO8T<brEJRg@h?J=FH`vl^CV~m$~=lc8m
zy|3^)IPAJ@jx9M$d;VX<hwja2JvCjDx!7HQpYP=kej2<S31eG3hy<Ew8F}WbY2PZF
zS$H8!`wGJoHk}M11O?74c}Ec}sXB4q^+s&_=dK{>k<^Ob1ikZEW1m)9Qb<`~ZE&B+
z@?6;3br3%FlLn}8O65lv>7UMtPagMJ#G^9I*U!gy^s880E~^Ys17HfxgAZkcpk^G(
z+O_vA`!Bx00~@8^T^D@#?&o>IE%9xK4V#@@#C4<3CsYfwT#hM@(P1NaYUmh5@rd#z
z^vwuUcP{ME{>!tnTDF<|JbEn>&)?S7a3wanY|QJr8T==d$;+vGwC6fCJ$(jpe01LH
zTNnAMfl8a+)2jh?jY(mhcS$V^9P<XdAOldUo%87&Kl&pzM(Z_K<u_6o(L;v4?)}ga
zImlW_C>52N!{xTpbwu6@d#hP=A`weoY$01M#{PZsfiV~(z&;6vMtj;63zK#ZgsABD
zj4)WN75HA4PtU*-AHR0yLy6JKeld7MK;d$EaN7G5^|SQoToARjC^)nR>#cE5!qAhh
zZo9~Og3y~zQiCboV@bj_?0oIV%um=lAvT(@#gwE#xD!ht_qG7)pfAW-i*78}jSrP=
zXwD}h7UZDuk~;c4HPxW?Gs}*vKvCF&ZPW!Dr0XrvDSvRSL*?OWHV?c=M7JOg{L6N3
zn8QWkkR!J5E}a7%N~|*==kpIT!(nDcq8z5+B+<mw17ST7R!(rEP+@0KTakBnqo`Qj
zU(1OPJ{b0VTmb&%APp<xMy65HR8r8ZOi!{rO=M30(+;0uRD+YMv<zs??7TPnek)UX
zA}#SPV}JhEbGkOVlPCq=6$3b`93#)_Es(*!wc6af`K+On#f0KoWn)fSE>ohhJL>Cz
zf6wF-0#QA*$7FJFv0j~6K%vahAjsYp_o6iXnz0=;IlX1<wfm7;dh?zKgY3*9|CM$J
zC_s^4F3p_neXqcd1g3oNt1&jwlVt1tlkz^_!S?qzT221VL;ywK2Oemd<+_+?|Fthw
z87|xmYzX^7CU!KIX(>{<nP*Zx(p@8DJr{lF>nlMMtnf&jO4tuc_*c_TZErGzRd*Id
zI^VJQSDTGlqNCnh7g6a3IrQBT^=Tk7jg2Ripdq~!^LH5&ZZSUCzv89g`Zh&9Ib@dK
zS0=_7wEG-^e~?uomMIg^#+&FY#lNliM+BH)2^lRe=ook+H32<(#yi)d--kYxW-5I0
z0PbBhUyxj9WA0Y1!Ph=8QXcu~0fTL|xpyfv)me*q<1%!OPRiFnHuSLWqI+NliwBxk
zWpQe8r))Y|I%R|U(g=C~KGCqkHnQ^09tU2X|Cd#M@b^EhGOXg~E}|8c+S@o6rT^?z
z8(sN<^9VAPsz{|elYS<otigiHG_Q`6<W54;{n;evXHn@}phE48cQLqiRp}Cg>l*SZ
z_&3?F&6%eGVOO$tw~bS@rQY++gIUf@N<3S$hL|1S)n=^}=H||VOWttQPDlE-JJ>k)
zyUt>v{C2;!uT;FLg-r-xjyZFmP}0k<>-%oe-+!nU2!1E_V~U*Vc!|HPDGL#3w-`1g
z@ae!8u8rAWpm~?sL>^8MV#fo2gWhO@5d&UiI#RpGg~VHwRp|nz>Y5sKaVQ4JfMMR`
zI(JC;U_*oMqjPps0xqrec0kM95x>*I$h^#o$$%iATQ5o%q3AX8e?|v)Zy46UXXHG1
zTCY~SUqE1xTXu}ZheDmNIOfX&Q}A^^jkFuJqx|Su`e4F4lBjUTGikq*ZFt~^k2eEO
zLhW5EVpbebm>9DTDo>BTGll;CT$qpR>47`Re~sJ8sa|qi|Nf}X#g38XOO`O!5E8-W
z`rSIO&l+qk8cqkbYiqT??EdQYY3?$n2{*SnNP6Vjbm;nt>B}lY2_MexG&CJHO6sZI
z5{~$m8#)Su0IPr4;&YFFEWrJ@%|hhJPTV+z^Y|K4n>Ech@ae-hK2qmk7)=F6XASNQ
zl_xf{3?=`fpK@J@oh2JMoJ&xb6yD@0RIq4WTI5B3AV(hRTyMeaTAl9ukz~7c(cd*8
zSaSC}(+*}$jQ5LJrG5#WvYJ=Q4i*)(ajk?rCet`T6=HgtW@3A5KJ$$usKSuiQNPtd
z!rI;TCL6b`t7AYCq>#H89lob{>Kosi=NQ960TIpco;6cq=Soh2)(v=i&A^wuI@V<=
zo%Na`OPswrjho9ZYd(J&)qGzH+%mtv?vR^vSN(73&r7;}yw>s^<B23;0wc|+!>l!S
zHaK*LxxblEMgZ-z)(rEWWh26ZfyrlAlk3g?awazsLZ+-4Ehu1M#5DEdtZ}6*tjamO
z;4S}Xwi(2($55e=D_LoxJPgt=(%`n)ba7$BGpb)DB}>rHsN_<r(^TSN5Ov7!#)DPI
z2uJph9R`$m@Dn3s-W~C8y9y_^vj-crAGF(AGJ@WC4v9EG7Hl4zU-<_SCXG%X^Ew2~
z5`CL8GK%b%)v__yaaL<gQ`IYqkG`_>UQPyT>UUq;{`%Xv%<e9smQZr4dN`BniIze+
z#_2`c$!q9frcLfg0!<vHIWsDp?l)eN`+n6Xebu@@zqHy+8F_t)mUJ9?|F=k81L3XX
zDcS$Iw+H>?zB?xio0g!gvz7R#t`K$<1ajGN7f<Vyk!og?zQTjoT3@JqMTcx8JN+@9
zWe|$Icd+?)tv}zum;Wfb_s|=y23-6@hXWS7&GrA3&oGPBIb#iEb`n0%P|O<sgM@?L
zOK0;d@WP9v(7A1!J?qLXr=e3pC?*6w?a2<;B`^d|U3XZ6dyRB5Y4{n(-L6W8qy)y>
zV(r=Oea8hv9uSy}+oleec{-x2A0Mu8NuijC%RupZ`pxuOAhJJS(k;N!ownVkHYR=(
z1VpQ!LU${42<cbuDhu|S8E@RFVq76WjT#Gd<=~s0Av*l|3Z68e`$JoKG`*PO)4_H{
z-qiCEO+gH$>&(}a$SflvcgJz1$t})e?Eq!*In43vhO<_aW$lVE*@yLihkM&2p++Nt
z7;sJb_Hvets7)bQW0>wvDEj7fPS8O;_T+bt9-hb{lFV<Z>#n`QeeRu!mvstk5>#mh
zdpm(OSsKzE6wU3)&%xs#&l7F(qz;@HnMK>TV;jf)0aM5Avc~!aZ&%Hnt6mby{36>+
z&DOiZbZrX19tg%7^`xIfy&)8$ZAZbghVNYmr6m^GHrtK5FzOsEH^3<lB`$63rJ6lR
z`D-mrs2{lX4T%3b`k@6c^x>^}oyAc8WsdFX4G?fkZZ#P%4~A;(k*6pU_3E5HyzdMD
zLdMuan6^$>r`*yK>3&Kv5`WEnUz$)TRqC&B2<`F>-em}Jzxd6esTpxIzSigmCKCIW
zi(YS0YThM%bR&M<R5xfIck5pawK#|z!E5~e-|@fgk&}uy;bFrH#&e(dCg5xKnagT6
zOUk8(5mRQ;@4u7~2*!3IKNH3NBA|2*Z})jt`X5*}<k+f3R_p3+^?ujy-HFQj*asPi
zn}OXv-lSXYBGBK=WS%DV-_9}63ss5!7YH>NuR{o?9nEVN6Si;W@J85DZ)E%D$Bt$3
zAw?DhtMcg8vllkbb}ogVF-7}8UqasSmxbTk?IkXryPTVAxH=cu_BIGG<X(01p$T?k
zaT(*})E4lK@*)nNlF)Onrk5*#B{{;5OUtgWK30-8o2+i(e*dnT3WrrgY!cPaRcFu4
z4t|<A3TL2<Lw{|2?vs#vbZJnHg|jd>c$77oPTqh~7MRS2?VII1=p3tyzz0kZ>q7`@
z=noY(ArH>CMHVJgYuYO~pU8WoUee*C4ZmqvR`Wd^$8<JAh7!kECH!6r1jmv?1~8O-
zNM7n_i4BbwxUgL%OoePz{1;H_1OJ^fPsCG<{cWz*@WuBRuIX(*T4t2aetfSivrP|X
z$e!`ZZ%Fv=Hr{RP##pJpvl(X`wP7yrxcHaV0-LBA%&jniy#3Y|e4ZfRMQzCx^w<TT
zF}Hf)AYi5Hkihr2Y<uJ<{F8IHnAZ){h#3YmV+Es<-f%4J&X%LsH?>iVRCHG<K39*h
z*d#NnNb5~$!uH2@mHF|(Hh<{A1A(=2bzGIw-}dCbk@+f`3s1AMU4E<rIQ@5IlpM%f
zFBeUBGGgM(X~*4sD0R7Uc%<p?z2V#Aqzp4F<yfV(+k7ru@G&>|d#rn_k|_AGgU@?j
zhT_=c(?89HS*y{zS1g9NvbqtmolVf89Rh=Ks{am@^417#g}K&m>`WJkR)y0~FIv1x
zyuO<>7ZqsQ0BjXNt%aa?mK3G--XC==9yl)HlQ`{v*a)r@@lrwyl&}rp>ojqv%3W_+
z5Bi#HZc_q5cZBvlQy`VI`Ojmd*78KnTE_62=aNo;=*C>0Vez6oYqlKoW<nnaW|tiD
zHWIgC7dl`4e0nu9sG!npAg9jC{bnAdo5#(J7_-BFGi2quH`X6o{<IUds@u---2X-P
zKGteO@|W5i12w4cd)nozlO<5Bt^k3g$yd8J*=46)iXqScgP!hF)#V!tru_89JAseQ
z3XB;&MiuLKx#B;iKBp-cYCY!h+lBROR(<7H!GQcNzqX-wf3fqyB2E~DlnhULX7CRd
z7F_7tg>;mlU*n?tzG*u?JNv|eiS0g8fLwMhFn$k6T?#K3=FRGJG?2jLIT||h+(BXd
z5;xHB58ANWx{Prgp8@0Z(Pab`_>%ZicW}|zUZBRsbG?(w<9DJt>`Gqek!90Pw7)}h
zHE@2=PaX`6O1~#l?ks}3`^}DY<U%?JD4hHrHu!IPYL`T`%24RC*7p%O5@+m%j$za3
zv7g4bNB>Z7t$Nf?A}v8{EBPg@&Zv2i$u1N2%#)Lp^6*|leUxpqaD=<|wGB@!f9mYE
ziYEz1@{CccY~Q&vlVx_?6W?N79HpJ;s_XKOLiX?bN3-2>NK3E$lMwB_MFN%TrIKg&
zNX1|T4_?+`<20#i9YYXeB2Xp5-`D6SXN!Q}UxNrzTq2K?AH2QIT$oISKX}2EM40)9
zZ0D^zNz~ul{-<Ap2n=I~rvvwBh5MxXtrak7fEO(vjwt`7l|sZ+|8t%4f9{w5Ke=0b
zMa^NaF0=My9t!{f7`zk=y}TT3Z6!S1pq~8hHXi(*ULFqafM-I__YhZiZ@vO}rJycf
JDrfQWe*sjRE(-tv

literal 0
HcmV?d00001

diff --git a/tests/data/text/test-ocr.tsv b/tests/data/text/test-ocr.tsv
new file mode 100644
index 00000000000..b16de5b1d26
--- /dev/null
+++ b/tests/data/text/test-ocr.tsv
@@ -0,0 +1,73 @@
+level	page_num	block_num	par_num	line_num	word_num	left	top	width	height	conf	text
+1	1	0	0	0	0	0	0	640	480	-1
+2	1	1	0	0	0	36	92	582	269	-1
+3	1	1	1	0	0	36	92	582	92	-1
+4	1	1	1	1	0	36	92	544	30	-1
+5	1	1	1	1	1	36	92	60	24	87.137558	This
+5	1	1	1	1	2	109	92	20	24	87.137558	is
+5	1	1	1	1	3	141	98	15	18	87.823906	a
+5	1	1	1	1	4	169	92	32	24	87.823906	lot
+5	1	1	1	1	5	212	92	28	24	92.965874	of
+5	1	1	1	1	6	251	92	31	24	93.247513	12
+5	1	1	1	1	7	296	92	68	30	92.734741	point
+5	1	1	1	1	8	374	93	53	23	92.996040	text
+5	1	1	1	1	9	437	93	26	23	93.160057	to
+5	1	1	1	1	10	474	93	52	23	92.312637	test
+5	1	1	1	1	11	536	92	44	24	92.312637	the
+4	1	1	1	2	0	36	126	582	31	-1
+5	1	1	1	2	1	36	132	45	18	90.505524	ocr
+5	1	1	1	2	2	91	126	69	24	90.505524	code
+5	1	1	1	2	3	172	126	51	24	91.169167	and
+5	1	1	1	2	4	236	132	50	18	89.765854	see
+5	1	1	1	2	5	299	126	15	24	85.827324	if
+5	1	1	1	2	6	325	126	14	24	93.116241	it
+5	1	1	1	2	7	348	126	85	24	92.394562	works
+5	1	1	1	2	8	445	132	33	18	30.119690	on
+5	1	1	1	2	9	500	126	29	24	30.119690	all
+5	1	1	1	2	10	541	127	77	30	92.090988	types
+4	1	1	1	3	0	36	160	187	24	-1
+5	1	1	1	3	1	36	160	28	24	92.476135	of
+5	1	1	1	3	2	72	160	41	24	90.919365	file
+5	1	1	1	3	3	123	160	100	24	91.360367	format.
+3	1	1	2	0	0	36	194	561	167	-1
+4	1	1	2	1	0	36	194	549	31	-1
+5	1	1	2	1	1	36	194	55	24	89.098892	The
+5	1	1	2	1	2	102	194	75	30	89.098892	quick
+5	1	1	2	1	3	189	194	85	24	91.415680	brown
+5	1	1	2	1	4	287	194	52	31	91.943085	dog
+5	1	1	2	1	5	348	194	108	31	92.167969	jumped
+5	1	1	2	1	6	468	200	63	18	91.970985	over
+5	1	1	2	1	7	540	194	45	24	92.843704	the
+4	1	1	2	2	0	37	228	548	31	-1
+5	1	1	2	2	1	37	228	55	31	92.262550	lazy
+5	1	1	2	2	2	103	228	50	24	92.693161	fox.
+5	1	1	2	2	3	165	228	55	24	92.947639	The
+5	1	1	2	2	4	232	228	75	30	90.589806	quick
+5	1	1	2	2	5	319	228	85	24	91.051247	brown
+5	1	1	2	2	6	417	228	51	31	91.925011	dog
+5	1	1	2	2	7	478	228	107	31	91.471077	jumped
+4	1	1	2	3	0	36	262	561	31	-1
+5	1	1	2	3	1	36	268	63	18	90.210129	over
+5	1	1	2	3	2	109	262	44	24	90.210129	the
+5	1	1	2	3	3	165	262	56	31	91.178192	lazy
+5	1	1	2	3	4	231	262	50	24	92.794647	fox.
+5	1	1	2	3	5	294	262	55	24	91.388016	The
+5	1	1	2	3	6	360	262	75	30	92.525742	quick
+5	1	1	2	3	7	447	262	85	24	90.425552	brown
+5	1	1	2	3	8	545	262	52	31	90.425552	dog
+4	1	1	2	4	0	43	296	518	31	-1
+5	1	1	2	4	1	43	296	107	31	91.759590	jumped
+5	1	1	2	4	2	162	302	64	18	92.923576	over
+5	1	1	2	4	3	235	296	44	24	92.017929	the
+5	1	1	2	4	4	292	296	55	31	91.558884	lazy
+5	1	1	2	4	5	357	296	50	24	92.687485	fox.
+5	1	1	2	4	6	420	296	55	24	91.922661	The
+5	1	1	2	4	7	486	296	75	30	91.870224	quick
+4	1	1	2	5	0	37	330	524	31	-1
+5	1	1	2	5	1	37	330	85	24	92.923935	brown
+5	1	1	2	5	2	135	330	52	31	91.468765	dog
+5	1	1	2	5	3	196	330	108	31	91.425491	jumped
+5	1	1	2	5	4	316	336	63	18	91.489830	over
+5	1	1	2	5	5	388	330	45	24	91.740379	the
+5	1	1	2	5	6	445	330	55	31	92.110054	lazy
+5	1	1	2	5	7	511	330	50	24	93.180054	fox.
diff --git a/tests/data/text/test-ocr.txt b/tests/data/text/test-ocr.txt
new file mode 100644
index 00000000000..02d3a77cbb5
--- /dev/null
+++ b/tests/data/text/test-ocr.txt
@@ -0,0 +1,9 @@
+This is a lot of 12 point text to test the
+ocr code and see if it works on all types
+of file format.
+
+The quick brown dog jumped over the
+lazy fox. The quick brown dog jumped
+over the lazy fox. The quick brown dog
+jumped over the lazy fox. The quick
+brown dog jumped over the lazy fox.
diff --git a/tests/unit_tests/services_tests/test_ocr_service.py b/tests/unit_tests/services_tests/test_ocr_service.py
new file mode 100644
index 00000000000..e5e88e1c11a
--- /dev/null
+++ b/tests/unit_tests/services_tests/test_ocr_service.py
@@ -0,0 +1,15 @@
+from pathlib import Path
+
+from mealie.services.ocr.pytesseract import OCR
+
+
+def test_image_to_string():
+    result = OCR.image_to_string(open(Path("tests/data/images/test-ocr.png"), "rb"))
+    expected_result = open(Path("tests/data/text/test-ocr.txt"))
+    assert result == expected_result.read()
+
+
+def test_image_to_tsv():
+    result = OCR.image_to_tsv(open(Path("tests/data/images/test-ocr.png"), "rb").read())
+    expected_result = open(Path("tests/data/text/test-ocr.tsv"))
+    assert result == expected_result.read()

From 65fb53e9cc1a77ba56ef1db461208680571cbfff Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 16 Jul 2022 14:07:00 +0200
Subject: [PATCH 06/62] Add split text modes & single ingredient/instruction
 editing

---
 .../Domain/Recipe/RecipeIngredientEditor.vue  |  11 +-
 .../Domain/Recipe/RecipeInstructions.vue      |   1 +
 frontend/pages/recipe/_slug/ocr-editor.vue    | 131 +++++++++++++++---
 frontend/utils/icons/icons.ts                 |   8 +-
 4 files changed, 130 insertions(+), 21 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
index 78f3e14141b..faea6c1002b 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
@@ -8,6 +8,7 @@
       class="mx-1 mt-3 mb-4"
       :placeholder="$t('recipe.section-title')"
       style="max-width: 500px"
+      @click="$emit('clickIngredientField', 'title')"
     >
     </v-text-field>
     <v-row :no-gutters="$vuetify.breakpoint.mdAndUp" dense class="d-flex flex-wrap my-1">
@@ -81,7 +82,15 @@
       </v-col>
       <v-col sm="12" md="" cols="12">
         <div class="d-flex">
-          <v-text-field v-model="value.note" hide-details dense solo class="mx-1" :placeholder="$t('recipe.notes')">
+          <v-text-field
+            v-model="value.note"
+            hide-details
+            dense
+            solo
+            class="mx-1"
+            placeholder="$t('recipe.notes')"
+            @click="$emit('clickIngredientField', 'note')"
+          >
             <v-icon v-if="disableAmount && $listeners && $listeners.delete" slot="prepend" class="mr-n1 handle">
               {{ $globals.icons.arrowUpDown }}
             </v-icon>
diff --git a/frontend/components/Domain/Recipe/RecipeInstructions.vue b/frontend/components/Domain/Recipe/RecipeInstructions.vue
index 6e5fb619c2b..d569bc7ac56 100644
--- a/frontend/components/Domain/Recipe/RecipeInstructions.vue
+++ b/frontend/components/Domain/Recipe/RecipeInstructions.vue
@@ -176,6 +176,7 @@
                   blur: imageUploadMode,
                 }"
                 @drop.stop.prevent="handleImageDrop(index, $event)"
+                @click="$emit('clickInstructionField', `${index}.text`)"
               >
                 <MarkdownEditor
                   v-model="value[index]['text']"
diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 7af5b400260..91413bd8382 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -32,7 +32,7 @@
               </template>
               <span>Selection mode</span>
             </v-tooltip>
-            <v-tooltip bottom>
+            <v-tooltip v-if="!isImageSmallerThanCanvas" bottom>
               <template #activator="{ on, attrs }">
                 <v-btn icon>
                   <v-icon
@@ -47,6 +47,54 @@
               </template>
               <span>Pan and zoom picture</span>
             </v-tooltip>
+            <v-divider vertical class="mx-2" />
+            <v-toolbar-title>Split text </v-toolbar-title>
+            <v-tooltip bottom>
+              <template #activator="{ on, attrs }">
+                <v-btn icon>
+                  <v-icon
+                    :color="selectedTextSplitMode === 'lineNum' ? 'primary' : 'default'"
+                    v-bind="attrs"
+                    @click="selectedTextSplitMode = 'lineNum'"
+                    v-on="on"
+                  >
+                    {{ $globals.icons.preserveLines }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>Preserve original line breaks</span>
+            </v-tooltip>
+            <v-tooltip bottom>
+              <template #activator="{ on, attrs }">
+                <v-btn icon>
+                  <v-icon
+                    :color="selectedTextSplitMode === 'blockNum' ? 'primary' : 'default'"
+                    v-bind="attrs"
+                    @click="selectedTextSplitMode = 'blockNum'"
+                    v-on="on"
+                  >
+                    {{ $globals.icons.preserveBlocks }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>Split by text block</span>
+            </v-tooltip>
+            <v-tooltip bottom>
+              <template #activator="{ on, attrs }">
+                <v-btn icon>
+                  <v-icon
+                    :color="selectedTextSplitMode === 'flatten' ? 'primary' : 'default'"
+                    v-bind="attrs"
+                    @click="selectedTextSplitMode = 'flatten'"
+                    v-on="on"
+                  >
+                    {{ $globals.icons.flatten }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>Flatten regardless of original formating</span>
+            </v-tooltip>
+
             <v-spacer></v-spacer>
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
@@ -130,6 +178,7 @@
             </v-text-field>
           </v-tab-item>
           <v-tab-item key="ingredients">
+            <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
             <RecipeDialogBulkAdd :input-text-prop="selectedText" @bulk-data="addIngredient" />
             <draggable
               v-if="recipe.recipeIngredient.length > 0"
@@ -152,11 +201,13 @@
                   class="list-group-item"
                   :disable-amount="recipe.settings.disableAmount"
                   @delete="recipe.recipeIngredient.splice(index, 1)"
+                  @clickIngredientField="setSingleIngredient($event, index)"
                 />
               </TransitionGroup>
             </draggable>
           </v-tab-item>
           <v-tab-item key="instructions">
+            <BaseButton class="my-2" @click="addStep()"> {{ $t("general.new") }}</BaseButton>
             <RecipeDialogBulkAdd :input-text-prop="selectedText" @bulk-data="addStep" />
             <RecipeInstructions
               v-model="recipe.recipeInstructions"
@@ -166,6 +217,7 @@
               :recipe-id="recipe.id"
               :recipe-slug="recipe.slug"
               :assets.sync="recipe.assets"
+              @clickInstructionField="setSingleStep"
             />
           </v-tab-item>
         </v-tabs-items>
@@ -192,7 +244,7 @@ import { useUserApi, useStaticRoutes } from "~/composables/api";
 import { useRecipe } from "~/composables/recipes";
 import { OcrTsvResponse } from "~/types/api-types/ocr";
 import { validators } from "~/composables/use-validators";
-import { Recipe } from "~/types/api-types/recipe";
+import { Recipe, RecipeIngredient, RecipeStep } from "~/types/api-types/recipe";
 import BannerExperimental from "~/components/global/BannerExperimental.vue";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
 import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
@@ -258,6 +310,8 @@ type SelectedRecipeLeaves = Leaves<Recipe>;
 
 type CanvasModes = "selection" | "panAndZoom";
 
+type SelectedTextSplitModes = keyof OcrTsvResponse | "flatten";
+
 export default defineComponent({
   components: {
     RecipeIngredientEditor,
@@ -319,6 +373,8 @@ export default defineComponent({
           y: 0,
         },
       } as ImagePosition,
+      isImageSmallerThanCanvas: false,
+      selectedTextSplitMode: "lineNum" as SelectedTextSplitModes,
     });
 
     const setPropertyValueByPath = function <T>(object: T, path: Paths<T>, value: any) {
@@ -338,7 +394,13 @@ export default defineComponent({
     const image = new Image();
 
     function updateImageScale() {
-      state.imagePosition.scale = Math.min(state.imagePosition.dWidth / image.width, 1);
+      state.imagePosition.scale = state.imagePosition.dWidth / image.width;
+
+      // Don't let images bigger than the canvas be zoomed in more than 1:1 scale
+      // Meaning only let images smaller than the canvas to have a scale > 1
+      if (!state.isImageSmallerThanCanvas && state.imagePosition.scale > 1) {
+        state.imagePosition.scale = 1;
+      }
     }
 
     onMounted(() => {
@@ -367,7 +429,12 @@ export default defineComponent({
           const clientCanvasDimensions = c.getBoundingClientRect();
 
           c.width = clientCanvasDimensions.width;
-          state.imagePosition.scale = Math.min(c.width / image.width, 1);
+          if (image.width < c.width) {
+            state.isImageSmallerThanCanvas = true;
+          }
+          state.imagePosition.dWidth = c.width;
+
+          updateImageScale();
           c.height = Math.min(image.height * state.imagePosition.scale, 700); // Max height of 700px
 
           state.imagePosition.sWidth = image.width;
@@ -477,27 +544,33 @@ export default defineComponent({
 
     function keepImageInCanvas() {
       const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
-      // Prevent
+
+      // Prevent image from being smaller than the canvas width
       if (state.imagePosition.dWidth - c.width < 0) {
         state.imagePosition.dWidth = c.width;
       }
 
+      // Prevent image from being smaller than the canvas height
       if (state.imagePosition.dHeight - c.height < 0) {
         state.imagePosition.dHeight = image.height * state.imagePosition.scale;
       }
 
+      // Prevent to move the image too much to the left
       if (c.width - state.imagePosition.dx - state.imagePosition.dWidth > 0) {
         state.imagePosition.dx = c.width - state.imagePosition.dWidth;
       }
 
+      // Prevent to move the image too much to the top
       if (c.height - state.imagePosition.dy - state.imagePosition.dHeight > 0) {
         state.imagePosition.dy = c.height - state.imagePosition.dHeight;
       }
 
+      // Prevent to move the image too much to the right
       if (state.imagePosition.dx > 0) {
         state.imagePosition.dx = 0;
       }
 
+      // Prevent to move the image too much to the bottom
       if (state.imagePosition.dy > 0) {
         state.imagePosition.dy = 0;
       }
@@ -542,6 +615,7 @@ export default defineComponent({
     const scrollSensitivity = 0.05;
 
     function handleMouseScroll(event: WheelEvent) {
+      if (state.isImageSmallerThanCanvas) return;
       if (state.canvasMode === "panAndZoom") {
         event.preventDefault();
 
@@ -553,21 +627,21 @@ export default defineComponent({
         };
         const m = Math.sign(event.deltaY);
 
-        const ndx = m * c.width * scrollSensitivity;
-        const ndy = m * c.height * scrollSensitivity;
-        const ndw = -m * c.width * scrollSensitivity * 2;
-        const ndh = -m * c.height * scrollSensitivity * 2;
-
-        if ((ndw - ndx) / image.width < 1) {
-          state.imagePosition.dx += ndx;
-          state.imagePosition.dy += ndy;
-          state.imagePosition.dWidth += ndw;
-          state.imagePosition.dHeight += ndh;
+        const ndx = state.imagePosition.dx + m * state.imagePosition.dWidth * scrollSensitivity;
+        const ndy = state.imagePosition.dy + m * state.imagePosition.dHeight * scrollSensitivity;
+        const ndw = state.imagePosition.dWidth + -m * state.imagePosition.dWidth * scrollSensitivity * 2;
+        const ndh = state.imagePosition.dHeight + -m * state.imagePosition.dHeight * scrollSensitivity * 2;
+
+        console.log("ndw", ndw, "iwidth", image.width);
+        if (ndw < image.width) {
+          state.imagePosition.dx = ndx;
+          state.imagePosition.dy = ndy;
+          state.imagePosition.dWidth = ndw;
+          state.imagePosition.dHeight = ndh;
         }
 
-        updateImageScale();
-
         keepImageInCanvas();
+        updateImageScale();
 
         const ctx = <CanvasRenderingContext2D>c.getContext("2d");
         ctx.fillStyle = "rgb(255, 255, 255)";
@@ -603,8 +677,16 @@ export default defineComponent({
             correctedRect.startY + correctedRect.h >
               (element.top + element.height) * state.imagePosition.scale + state.imagePosition.dy
         )
-        .map((element) => {
-          return element.text;
+        .map((element, index, array) => {
+          let newLine = "";
+          if (
+            state.selectedTextSplitMode !== "flatten" &&
+            index !== array.length - 1 &&
+            element[state.selectedTextSplitMode] !== array[index + 1][state.selectedTextSplitMode]
+          ) {
+            newLine = "\n";
+          }
+          return element.text + newLine;
         })
         .join(" ");
     }
@@ -662,6 +744,15 @@ export default defineComponent({
       }
     }
 
+    function setSingleIngredient(f: keyof RecipeIngredient, index: number) {
+      state.selectedRecipeField = `recipeIngredient.${index}.${f}`;
+    }
+
+    function setSingleStep(path: Leaves<RecipeStep[]>) {
+      //@ts-ignore Either I am missing something or TS is not looking properly at the type of path
+      state.selectedRecipeField = `recipeInstructions.${path}`;
+    }
+
     return {
       ...toRefs(state),
       addIngredient,
@@ -680,6 +771,8 @@ export default defineComponent({
       tsv,
       validators,
       switchCanvasMode,
+      setSingleIngredient,
+      setSingleStep,
     };
   },
 });
diff --git a/frontend/utils/icons/icons.ts b/frontend/utils/icons/icons.ts
index 9686ebc348b..9e97a668ea8 100644
--- a/frontend/utils/icons/icons.ts
+++ b/frontend/utils/icons/icons.ts
@@ -119,7 +119,9 @@ import {
   mdiDocker,
   mdiUndo,
   mdiSelectionDrag,
-  mdiCursorMove
+  mdiCursorMove,
+  mdiText,
+  mdiTextBoxOutline,
 } from "@mdi/js";
 
 export const icons = {
@@ -259,4 +261,8 @@ export const icons = {
   // Ocr toolbar
   selectMode: mdiSelectionDrag,
   panAndZoom: mdiCursorMove,
+  preserveLines: mdiText,
+  preserveBlocks: mdiTextBoxOutline,
+  flatten: mdiMinus,
+
 };

From 050b0f21ae57bd7dc26ceb0a7cb4d96f3d089d70 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 16 Jul 2022 14:17:48 +0200
Subject: [PATCH 07/62] make split mode really reactive

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 13 +++++++++----
 1 file changed, 9 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 91413bd8382..9f0d2ec62fe 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -55,7 +55,7 @@
                   <v-icon
                     :color="selectedTextSplitMode === 'lineNum' ? 'primary' : 'default'"
                     v-bind="attrs"
-                    @click="selectedTextSplitMode = 'lineNum'"
+                    @click="switchSplitTextMode('lineNum')"
                     v-on="on"
                   >
                     {{ $globals.icons.preserveLines }}
@@ -70,7 +70,7 @@
                   <v-icon
                     :color="selectedTextSplitMode === 'blockNum' ? 'primary' : 'default'"
                     v-bind="attrs"
-                    @click="selectedTextSplitMode = 'blockNum'"
+                    @click="switchSplitTextMode('blockNum')"
                     v-on="on"
                   >
                     {{ $globals.icons.preserveBlocks }}
@@ -85,7 +85,7 @@
                   <v-icon
                     :color="selectedTextSplitMode === 'flatten' ? 'primary' : 'default'"
                     v-bind="attrs"
-                    @click="selectedTextSplitMode = 'flatten'"
+                    @click="switchSplitTextMode('flatten')"
                     v-on="on"
                   >
                     {{ $globals.icons.flatten }}
@@ -470,6 +470,11 @@ export default defineComponent({
       }
     }
 
+    function switchSplitTextMode(mode: SelectedTextSplitModes) {
+      state.selectedTextSplitMode = mode;
+      state.selectedText = getWordsInSelection(tsv.value, state.rect);
+    }
+
     function draw() {
       if (state.mouse.down) {
         const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
@@ -632,7 +637,6 @@ export default defineComponent({
         const ndw = state.imagePosition.dWidth + -m * state.imagePosition.dWidth * scrollSensitivity * 2;
         const ndh = state.imagePosition.dHeight + -m * state.imagePosition.dHeight * scrollSensitivity * 2;
 
-        console.log("ndw", ndw, "iwidth", image.width);
         if (ndw < image.width) {
           state.imagePosition.dx = ndx;
           state.imagePosition.dy = ndy;
@@ -773,6 +777,7 @@ export default defineComponent({
       switchCanvasMode,
       setSingleIngredient,
       setSingleStep,
+      switchSplitTextMode,
     };
   },
 });

From 18aa20db778625b9818e52f0c38d4e8e69c0063f Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sun, 17 Jul 2022 11:42:45 +0200
Subject: [PATCH 08/62] Remove default step and ingredient

---
 mealie/routes/recipe/recipe_crud_routes.py | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index c61939d7f74..df5e6da5646 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -33,7 +33,9 @@
     RecipeSummary,
 )
 from mealie.schema.recipe.recipe_asset import RecipeAsset
+from mealie.schema.recipe.recipe_ingredient import RecipeIngredient
 from mealie.schema.recipe.recipe_scraper import ScrapeRecipeTest
+from mealie.schema.recipe.recipe_step import RecipeStep
 from mealie.schema.recipe.request_helpers import RecipeZipTokenResponse, UpdateImageResponse
 from mealie.schema.response.responses import ErrorResponse
 from mealie.services import urls
@@ -441,7 +443,13 @@ def upload_recipe_asset(
     @router.post("/create-ocr", status_code=201, response_model=str)
     def create_recipe_ocr(self, extension: str = Form(...), file: UploadFile = File(...)):
         """Takes an image and creates a recipe based on the image"""
-        slug = self.service.create_one(CreateRecipe(name="New OCR Recipe")).slug
+        slug = self.service.create_one(
+            Recipe(
+                name="New OCR Recipe",
+                recipe_ingredient=[RecipeIngredient(note="")],
+                recipe_instructions=[RecipeStep(text="")],
+            )
+        ).slug
         RecipeController.upload_recipe_asset(self, slug, "Original recipe image", "", extension, file)
         recipe = self.mixins.get_one(slug)
         recipe.settings.show_assets = True

From 9ff6427e1c1446be387ff78f8578b990d0852c2f Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sun, 17 Jul 2022 11:44:59 +0200
Subject: [PATCH 09/62] make the linter haappy

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 9f0d2ec62fe..f9a15779b02 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -753,7 +753,7 @@ export default defineComponent({
     }
 
     function setSingleStep(path: Leaves<RecipeStep[]>) {
-      //@ts-ignore Either I am missing something or TS is not looking properly at the type of path
+      // @ts-ignore Either I am missing something or TS is not looking properly at the type of path
       state.selectedRecipeField = `recipeInstructions.${path}`;
     }
 

From 66d558a70f8f7e3e569adbed451bd15432d09227 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sun, 17 Jul 2022 16:25:50 +0200
Subject: [PATCH 10/62] Accept only image uploads

---
 frontend/pages/recipe/create/ocr.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/recipe/create/ocr.vue b/frontend/pages/recipe/create/ocr.vue
index 0d9527deb12..8e4cd3ed15c 100644
--- a/frontend/pages/recipe/create/ocr.vue
+++ b/frontend/pages/recipe/create/ocr.vue
@@ -7,7 +7,7 @@
     </v-card-text>
     <v-card-actions class="justify-center">
       <div style="width: 250px">
-        <AppButtonUpload :post="false" file-name="file" :text-btn="false" @uploaded="createByOcr" />
+        <AppButtonUpload :post="false" file-name="file" :text-btn="false" @uploaded="createByOcr" accept="image/*" />
       </div>
     </v-card-actions>
   </div>

From c0cb82f4bb71be930efc5f10ef1f1a3bc639cfb2 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 18 Jul 2022 12:03:16 +0200
Subject: [PATCH 11/62] Add automatic recipe title suggestion

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 41 ++++++++++++++++++++++
 1 file changed, 41 insertions(+)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index f9a15779b02..ce7e14a58b5 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -403,6 +403,43 @@ export default defineComponent({
       }
     }
 
+    function findRecipeTitle() {
+      // This function will find the title of a recipe with the assumption that the title has the biggest ratio of surface area on number of words on the image
+
+      const filtered = tsv.value.filter((element) => element.level === 2 || element.level === 5);
+      const blocks = [[]] as OcrTsvResponse[][];
+      let blockNum = 1;
+      filtered.forEach((element, index, array) => {
+        if (index !== 0 && array[index - 1].blockNum !== element.blockNum) {
+          blocks.push([]);
+          blockNum = element.blockNum;
+        }
+        blocks[blockNum - 1].push(element);
+      });
+
+      let bestScore = 0;
+      let bestBlock = blocks[0];
+      blocks.forEach((element) => {
+        // element[0] is the block declaration line containing the blocks total dimensions
+        // element.lenght is the number of words (+ 2) contained in that block
+        const elementScore = (element[0].height * element[0].width) / element.length; // Prettier is adding useless parenthesis for a mysterious reason
+        const elementText = element.map((element) => element.text).join(""); // Identify empty blocks and don't count them
+        if (elementScore > bestScore && elementText !== "") {
+          bestBlock = element;
+          bestScore = elementScore;
+        }
+      });
+
+      return bestBlock
+        .filter((element) => element.level === 5)
+        .map((element) => {
+          if (element.conf >= 40) {
+            return element.text.trim();
+          }
+        })
+        .join(" ");
+    }
+
     onMounted(() => {
       invoke(async () => {
         await until(recipe).not.toBeNull();
@@ -422,6 +459,10 @@ export default defineComponent({
         tsv.value = res.data as OcrTsvResponse[];
         state.loading = false;
 
+        if (recipe.value.name?.match(/New\sOCR\sRecipe\s\([0-9]+\)/g)) {
+          recipe.value.name = findRecipeTitle();
+        }
+
         nextTick(() => {
           const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
           const ctx = <CanvasRenderingContext2D>c.getContext("2d");

From a283c43605006f3985345396d2e691d8252da61d Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 18 Jul 2022 12:14:36 +0200
Subject: [PATCH 12/62] Correct regex

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index ce7e14a58b5..f7e2270b1a3 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -459,7 +459,7 @@ export default defineComponent({
         tsv.value = res.data as OcrTsvResponse[];
         state.loading = false;
 
-        if (recipe.value.name?.match(/New\sOCR\sRecipe\s\([0-9]+\)/g)) {
+        if (recipe.value.name?.match(/New\sOCR\sRecipe(\s\([0-9]+\))?/g)) {
           recipe.value.name = findRecipeTitle();
         }
 

From 52348c9d1aa3df96cb355148fa8dd3e3c0b0ce52 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 18 Jul 2022 13:06:41 +0200
Subject: [PATCH 13/62] fix incorrect array.map method usage

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index f7e2270b1a3..6093bbceac8 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -431,11 +431,9 @@ export default defineComponent({
       });
 
       return bestBlock
-        .filter((element) => element.level === 5)
+        .filter((element) => element.level === 5 && element.conf >= 40)
         .map((element) => {
-          if (element.conf >= 40) {
-            return element.text.trim();
-          }
+          return element.text.trim();
         })
         .join(" ");
     }

From 2f32824228de6ca862de34aee96d82e42ba28ab3 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 18 Jul 2022 13:10:34 +0200
Subject: [PATCH 14/62] make the linter happy again

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 6093bbceac8..b5a44d3621e 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -792,8 +792,7 @@ export default defineComponent({
     }
 
     function setSingleStep(path: Leaves<RecipeStep[]>) {
-      // @ts-ignore Either I am missing something or TS is not looking properly at the type of path
-      state.selectedRecipeField = `recipeInstructions.${path}`;
+      state.selectedRecipeField = `recipeInstructions.${path}` as SelectedRecipeLeaves;
     }
 
     return {

From d4f03f6fda0c77cfaa47ae5adcf96efd7803a87a Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Fri, 22 Jul 2022 12:12:21 +0200
Subject: [PATCH 15/62] Swap route to use asset name

---
 frontend/api/class-interfaces/ocr.ts       |  9 ++++--
 frontend/pages/recipe/_slug/ocr-editor.vue |  2 +-
 mealie/routes/ocr/pytesseract.py           | 32 ++++++++++------------
 mealie/schema/ocr/ocr.py                   |  5 ++++
 mealie/services/ocr/pytesseract.py         | 21 ++++++++++++++
 5 files changed, 48 insertions(+), 21 deletions(-)

diff --git a/frontend/api/class-interfaces/ocr.ts b/frontend/api/class-interfaces/ocr.ts
index 488da87a20e..cde31b7125e 100644
--- a/frontend/api/class-interfaces/ocr.ts
+++ b/frontend/api/class-interfaces/ocr.ts
@@ -4,10 +4,15 @@ const prefix = "/api";
 
 export class OcrAPI extends BaseAPI {
 
-  async tsv(file: File) {
+  // Currently unused in favor for the endpoint using asset names
+  async file_to_tsv(file: File) {
     const formData = new FormData();
     formData.append("file", file);
-    return await this.requests.post(`${prefix}/ocr/tsv`, formData);
+    return await this.requests.post(`${prefix}/ocr/file-to-tsv`, formData);
+  }
+
+  async asset_to_tsv(recipeSlug: string, assetName: string) {
+    return await this.requests.post(`${prefix}/ocr/asset-to-tsv`, {recipeSlug, assetName});
   }
 
 }
diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index b5a44d3621e..49ede733e80 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -453,7 +453,7 @@ export default defineComponent({
         const file = new File([blob], assetName, { type: blob.type });
         image.src = imagesrc;
 
-        const res = await api.ocr.tsv(file);
+        const res = await api.ocr.asset_to_tsv(recipe.value.slug, assetName);
         tsv.value = res.data as OcrTsvResponse[];
         state.loading = false;
 
diff --git a/mealie/routes/ocr/pytesseract.py b/mealie/routes/ocr/pytesseract.py
index 2433a542edd..7fc4d8f7c99 100644
--- a/mealie/routes/ocr/pytesseract.py
+++ b/mealie/routes/ocr/pytesseract.py
@@ -1,8 +1,10 @@
 from fastapi import APIRouter, File
 
 from mealie.routes._base import BaseUserController, controller
-from mealie.schema.ocr.ocr import OcrTsvResponse
+from mealie.schema.ocr.ocr import OcrAssetReq, OcrTsvResponse
 from mealie.services.ocr.pytesseract import OCR
+from mealie.services.recipe.recipe_data_service import RecipeDataService
+from mealie.services.recipe.recipe_service import RecipeService
 
 router = APIRouter()
 
@@ -13,23 +15,17 @@ class OCRController(BaseUserController):
     def image_to_string(self, file: bytes = File(...)):
         return OCR.image_to_string(file)
 
-    @router.post("/tsv", response_model=list[OcrTsvResponse])
-    def image_to_tsv(self, file: bytes = File(...)):
+    @router.post("/file-to-tsv", response_model=list[OcrTsvResponse])
+    def file_to_tsv(self, file: bytes = File(...)):
         tsv = OCR.image_to_tsv(file)
-        lines = tsv.split("\n")
-        titles = [t.strip() for t in lines[0].split("\t")]
-        response = []
-        #  len-1 because the last line is empty
-        for i in range(1, len(lines) - 1):
-            d = {}
-            for key, value in zip(titles, lines[i].split("\t")):
-                if key == "text":
-                    d[key] = value.strip()
-                elif key == "conf":
-                    d[key] = float(value.strip())
-                else:
-                    d[key] = int(value.strip())
+        return OCR.format_tsv_output(tsv)
 
-            response.append(d)
+    @router.post("/asset-to-tsv", response_model=list[OcrTsvResponse])
+    def asset_to_tsv(self, req: OcrAssetReq):
+        recipe = RecipeService._get_recipe(self, req.recipe_slug)
+        data_service = RecipeDataService(recipe.id, recipe.group_id)
+        asset_path = data_service.dir_assets.joinpath(req.asset_name)
+        file = open(asset_path, "rb")
+        tsv = OCR.image_to_tsv(file.read())
 
-        return response
+        return OCR.format_tsv_output(tsv)
diff --git a/mealie/schema/ocr/ocr.py b/mealie/schema/ocr/ocr.py
index aee3adcb91f..151e485ded1 100644
--- a/mealie/schema/ocr/ocr.py
+++ b/mealie/schema/ocr/ocr.py
@@ -14,3 +14,8 @@ class OcrTsvResponse(MealieModel):
     height: int
     conf: float
     text: str
+
+
+class OcrAssetReq(MealieModel):
+    recipe_slug: str
+    asset_name: str
diff --git a/mealie/services/ocr/pytesseract.py b/mealie/services/ocr/pytesseract.py
index 78ba69232b5..3f37ad47eef 100644
--- a/mealie/services/ocr/pytesseract.py
+++ b/mealie/services/ocr/pytesseract.py
@@ -3,6 +3,7 @@
 import pytesseract
 from PIL import Image
 
+from mealie.schema.ocr.ocr import OcrTsvResponse
 from mealie.services._base_service import BaseService
 
 
@@ -21,4 +22,24 @@ def image_to_tsv(image_data):
         """
         Returns tsv formatted output
         """
+
         return pytesseract.image_to_data(Image.open(BytesIO(image_data)))
+
+    def format_tsv_output(tsv: str) -> OcrTsvResponse:
+        lines = tsv.split("\n")
+        titles = [t.strip() for t in lines[0].split("\t")]
+        response = []
+        #  len-1 because the last line is empty
+        for i in range(1, len(lines) - 1):
+            d = {}
+            for key, value in zip(titles, lines[i].split("\t")):
+                if key == "text":
+                    d[key] = value.strip()
+                elif key == "conf":
+                    d[key] = float(value.strip())
+                else:
+                    d[key] = int(value.strip())
+
+            response.append(d)
+
+        return response

From 16c28b8f3b645ab9f40dc6a22c92aab78beb2d26 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Fri, 22 Jul 2022 19:16:10 +0200
Subject: [PATCH 16/62] Rearange buttons

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 25 +++++++++++++---------
 1 file changed, 15 insertions(+), 10 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 49ede733e80..dcbd8c69389 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -6,12 +6,7 @@
     }"
   >
     <BannerExperimental />
-    <BaseButton save @click="updateRecipe(recipe.slug, recipe)">
-      {{ $t("general.save") }}
-    </BaseButton>
-    <BaseButton cancel @click="$router.push('/recipe/' + recipe.slug)">
-      {{ $t("general.close") }}
-    </BaseButton>
+
     <v-row v-if="!loading">
       <v-col cols="12" sm="7" md="7" lg="7">
         <v-card flat tile>
@@ -96,6 +91,12 @@
             </v-tooltip>
 
             <v-spacer></v-spacer>
+            <BaseButton class="ml-1 mr-1" save @click="updateRecipe(recipe.slug, recipe)">
+              {{ $t("general.save") }}
+            </BaseButton>
+            <BaseButton cancel @click="$router.push('/recipe/' + recipe.slug)">
+              {{ $t("general.close") }}
+            </BaseButton>
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
                 <v-btn icon>
@@ -178,8 +179,10 @@
             </v-text-field>
           </v-tab-item>
           <v-tab-item key="ingredients">
-            <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
-            <RecipeDialogBulkAdd :input-text-prop="selectedText" @bulk-data="addIngredient" />
+            <div class="d-flex justify-end mt-2">
+              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="selectedText" @bulk-data="addIngredient" />
+              <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
+            </div>
             <draggable
               v-if="recipe.recipeIngredient.length > 0"
               v-model="recipe.recipeIngredient"
@@ -207,8 +210,10 @@
             </draggable>
           </v-tab-item>
           <v-tab-item key="instructions">
-            <BaseButton class="my-2" @click="addStep()"> {{ $t("general.new") }}</BaseButton>
-            <RecipeDialogBulkAdd :input-text-prop="selectedText" @bulk-data="addStep" />
+            <div class="d-flex justify-end mt-2">
+              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="selectedText" @bulk-data="addStep" />
+              <BaseButton @click="addStep()"> {{ $t("general.new") }}</BaseButton>
+            </div>
             <RecipeInstructions
               v-model="recipe.recipeInstructions"
               :ingredients="recipe.recipeIngredient"

From 651b30e84959eecc45a158c80c1a97b47a7fc357 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 25 Jul 2022 14:34:38 +0200
Subject: [PATCH 17/62] fix test data

---
 .pre-commit-config.yaml      |  2 +-
 tests/data/text/test-ocr.tsv | 24 ++++++++++++------------
 2 files changed, 13 insertions(+), 13 deletions(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index 4b6eabec8c6..a3d5786a581 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -9,7 +9,7 @@ repos:
       - id: check-toml
       - id: end-of-file-fixer
       - id: trailing-whitespace
-        exclude-types: ["txt","tsv"]
+        exclude: ^tests/
   - repo: https://github.com/sondrelg/pep585-upgrade
     rev: "v1.0.1" # Use the sha / tag you want to point at
     hooks:
diff --git a/tests/data/text/test-ocr.tsv b/tests/data/text/test-ocr.tsv
index b16de5b1d26..4cb717e199d 100644
--- a/tests/data/text/test-ocr.tsv
+++ b/tests/data/text/test-ocr.tsv
@@ -1,8 +1,8 @@
 level	page_num	block_num	par_num	line_num	word_num	left	top	width	height	conf	text
-1	1	0	0	0	0	0	0	640	480	-1
-2	1	1	0	0	0	36	92	582	269	-1
-3	1	1	1	0	0	36	92	582	92	-1
-4	1	1	1	1	0	36	92	544	30	-1
+1	1	0	0	0	0	0	0	640	480	-1	
+2	1	1	0	0	0	36	92	582	269	-1	
+3	1	1	1	0	0	36	92	582	92	-1	
+4	1	1	1	1	0	36	92	544	30	-1	
 5	1	1	1	1	1	36	92	60	24	87.137558	This
 5	1	1	1	1	2	109	92	20	24	87.137558	is
 5	1	1	1	1	3	141	98	15	18	87.823906	a
@@ -14,7 +14,7 @@ level	page_num	block_num	par_num	line_num	word_num	left	top	width	height	conf	te
 5	1	1	1	1	9	437	93	26	23	93.160057	to
 5	1	1	1	1	10	474	93	52	23	92.312637	test
 5	1	1	1	1	11	536	92	44	24	92.312637	the
-4	1	1	1	2	0	36	126	582	31	-1
+4	1	1	1	2	0	36	126	582	31	-1	
 5	1	1	1	2	1	36	132	45	18	90.505524	ocr
 5	1	1	1	2	2	91	126	69	24	90.505524	code
 5	1	1	1	2	3	172	126	51	24	91.169167	and
@@ -25,12 +25,12 @@ level	page_num	block_num	par_num	line_num	word_num	left	top	width	height	conf	te
 5	1	1	1	2	8	445	132	33	18	30.119690	on
 5	1	1	1	2	9	500	126	29	24	30.119690	all
 5	1	1	1	2	10	541	127	77	30	92.090988	types
-4	1	1	1	3	0	36	160	187	24	-1
+4	1	1	1	3	0	36	160	187	24	-1	
 5	1	1	1	3	1	36	160	28	24	92.476135	of
 5	1	1	1	3	2	72	160	41	24	90.919365	file
 5	1	1	1	3	3	123	160	100	24	91.360367	format.
-3	1	1	2	0	0	36	194	561	167	-1
-4	1	1	2	1	0	36	194	549	31	-1
+3	1	1	2	0	0	36	194	561	167	-1	
+4	1	1	2	1	0	36	194	549	31	-1	
 5	1	1	2	1	1	36	194	55	24	89.098892	The
 5	1	1	2	1	2	102	194	75	30	89.098892	quick
 5	1	1	2	1	3	189	194	85	24	91.415680	brown
@@ -38,7 +38,7 @@ level	page_num	block_num	par_num	line_num	word_num	left	top	width	height	conf	te
 5	1	1	2	1	5	348	194	108	31	92.167969	jumped
 5	1	1	2	1	6	468	200	63	18	91.970985	over
 5	1	1	2	1	7	540	194	45	24	92.843704	the
-4	1	1	2	2	0	37	228	548	31	-1
+4	1	1	2	2	0	37	228	548	31	-1	
 5	1	1	2	2	1	37	228	55	31	92.262550	lazy
 5	1	1	2	2	2	103	228	50	24	92.693161	fox.
 5	1	1	2	2	3	165	228	55	24	92.947639	The
@@ -46,7 +46,7 @@ level	page_num	block_num	par_num	line_num	word_num	left	top	width	height	conf	te
 5	1	1	2	2	5	319	228	85	24	91.051247	brown
 5	1	1	2	2	6	417	228	51	31	91.925011	dog
 5	1	1	2	2	7	478	228	107	31	91.471077	jumped
-4	1	1	2	3	0	36	262	561	31	-1
+4	1	1	2	3	0	36	262	561	31	-1	
 5	1	1	2	3	1	36	268	63	18	90.210129	over
 5	1	1	2	3	2	109	262	44	24	90.210129	the
 5	1	1	2	3	3	165	262	56	31	91.178192	lazy
@@ -55,7 +55,7 @@ level	page_num	block_num	par_num	line_num	word_num	left	top	width	height	conf	te
 5	1	1	2	3	6	360	262	75	30	92.525742	quick
 5	1	1	2	3	7	447	262	85	24	90.425552	brown
 5	1	1	2	3	8	545	262	52	31	90.425552	dog
-4	1	1	2	4	0	43	296	518	31	-1
+4	1	1	2	4	0	43	296	518	31	-1	
 5	1	1	2	4	1	43	296	107	31	91.759590	jumped
 5	1	1	2	4	2	162	302	64	18	92.923576	over
 5	1	1	2	4	3	235	296	44	24	92.017929	the
@@ -63,7 +63,7 @@ level	page_num	block_num	par_num	line_num	word_num	left	top	width	height	conf	te
 5	1	1	2	4	5	357	296	50	24	92.687485	fox.
 5	1	1	2	4	6	420	296	55	24	91.922661	The
 5	1	1	2	4	7	486	296	75	30	91.870224	quick
-4	1	1	2	5	0	37	330	524	31	-1
+4	1	1	2	5	0	37	330	524	31	-1	
 5	1	1	2	5	1	37	330	85	24	92.923935	brown
 5	1	1	2	5	2	135	330	52	31	91.468765	dog
 5	1	1	2	5	3	196	330	108	31	91.425491	jumped

From bf9e9a9ff302bc30385712bb5766e70be6ab78e0 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 25 Jul 2022 14:38:16 +0200
Subject: [PATCH 18/62] feat: Allow making image the recipe image

---
 frontend/api/class-interfaces/recipes/recipe.ts |  4 +++-
 frontend/pages/recipe/create/ocr.vue            | 10 ++++++----
 mealie/routes/recipe/recipe_crud_routes.py      |  7 ++++++-
 3 files changed, 15 insertions(+), 6 deletions(-)

diff --git a/frontend/api/class-interfaces/recipes/recipe.ts b/frontend/api/class-interfaces/recipes/recipe.ts
index 669b29c2e80..a4e8a554bb3 100644
--- a/frontend/api/class-interfaces/recipes/recipe.ts
+++ b/frontend/api/class-interfaces/recipes/recipe.ts
@@ -122,10 +122,12 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     return await this.requests.get<Recipe>(routes.recipeShareToken(item_id));
   }
 
-  async createFromOcr(file: File) {
+  async createFromOcr(file: File, makeFileRecipeImage: boolean) {
     const formData = new FormData();
     formData.append("file", file);
     formData.append("extension", file.name.split(".").pop() ?? "");
+    formData.append("makefilerecipeimage", String(makeFileRecipeImage));
+
     return await this.requests.post(routes.recipesCreateFromOcr, formData);
   }
 }
diff --git a/frontend/pages/recipe/create/ocr.vue b/frontend/pages/recipe/create/ocr.vue
index 8e4cd3ed15c..f7facc7dc0d 100644
--- a/frontend/pages/recipe/create/ocr.vue
+++ b/frontend/pages/recipe/create/ocr.vue
@@ -6,9 +6,10 @@
       <v-form ref="domCreateByOcr"> </v-form>
     </v-card-text>
     <v-card-actions class="justify-center">
-      <div style="width: 250px">
-        <AppButtonUpload :post="false" file-name="file" :text-btn="false" @uploaded="createByOcr" accept="image/*" />
-      </div>
+      <v-checkbox v-model="makeFileRecipeImage" label="Make this the recipe image" />
+    </v-card-actions>
+    <v-card-actions class="justify-center">
+      <AppButtonUpload :post="false" file-name="file" :text-btn="false" @uploaded="createByOcr" accept="image/*" />
     </v-card-actions>
   </div>
 </template>
@@ -24,6 +25,7 @@ export default defineComponent({
     const state = reactive({
       error: false,
       loading: false,
+      makeFileRecipeImage: false,
     });
     const api = useUserApi();
     const router = useRouter();
@@ -41,7 +43,7 @@ export default defineComponent({
 
     async function createByOcr(file: File) {
       console.log("file: ", file);
-      const { response } = await api.recipes.createFromOcr(file);
+      const { response } = await api.recipes.createFromOcr(file, state.makeFileRecipeImage);
       // @ts-ignore returns a string and not a full Recipe
       handleResponse(response);
     }
diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index df5e6da5646..114236b4272 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -441,7 +441,9 @@ def upload_recipe_asset(
     # ==================================================================================================================
     # OCR
     @router.post("/create-ocr", status_code=201, response_model=str)
-    def create_recipe_ocr(self, extension: str = Form(...), file: UploadFile = File(...)):
+    def create_recipe_ocr(
+        self, extension: str = Form(...), file: UploadFile = File(...), makefilerecipeimage: bool = Form(...)
+    ):
         """Takes an image and creates a recipe based on the image"""
         slug = self.service.create_one(
             Recipe(
@@ -451,6 +453,9 @@ def create_recipe_ocr(self, extension: str = Form(...), file: UploadFile = File(
             )
         ).slug
         RecipeController.upload_recipe_asset(self, slug, "Original recipe image", "", extension, file)
+        if makefilerecipeimage:
+            file.file.seek(0)  # Get the pointer to the beginning of the file to read it once more
+            self.update_recipe_image(slug, file.file, extension)
         recipe = self.mixins.get_one(slug)
         recipe.settings.show_assets = True
         self.mixins.update_one(recipe, slug)

From 1c56790715557edc9c3a65378655c38d05207c8f Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 25 Jul 2022 17:45:59 +0200
Subject: [PATCH 19/62] Add translation

---
 frontend/lang/messages/en-US.json    | 3 ++-
 frontend/pages/recipe/create/ocr.vue | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index faaa0d430a1..44fbabb080d 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -248,7 +248,8 @@
     "trim-prefix-description": "Trim first character from each line",
     "split-by-numbered-line-description": "Attempts to split a paragraph by matching '1)' or '1.' patterns",
     "import-by-url": "Import a recipe by URL",
-    "create-manually": "Create a recipe manually"
+    "create-manually": "Create a recipe manually",
+    "make-recipe-image": "Make this the recipe image"
   },
   "page": {
     "404-page-not-found": "404 Page not found",
diff --git a/frontend/pages/recipe/create/ocr.vue b/frontend/pages/recipe/create/ocr.vue
index f7facc7dc0d..693dbca8273 100644
--- a/frontend/pages/recipe/create/ocr.vue
+++ b/frontend/pages/recipe/create/ocr.vue
@@ -6,7 +6,7 @@
       <v-form ref="domCreateByOcr"> </v-form>
     </v-card-text>
     <v-card-actions class="justify-center">
-      <v-checkbox v-model="makeFileRecipeImage" label="Make this the recipe image" />
+      <v-checkbox v-model="makeFileRecipeImage" :label="$t('new-recipe.make-recipe-image')" />
     </v-card-actions>
     <v-card-actions class="justify-center">
       <AppButtonUpload :post="false" file-name="file" :text-btn="false" @uploaded="createByOcr" accept="image/*" />

From b1c45db7b4178d6b17d9017e17040481e0435b60 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 25 Jul 2022 22:22:46 +0200
Subject: [PATCH 20/62] Make the linter happy

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 13 +++++--------
 frontend/pages/recipe/create/ocr.vue       |  2 +-
 2 files changed, 6 insertions(+), 9 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index dcbd8c69389..eb126d8d259 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -1,6 +1,6 @@
 <template>
   <v-container
-    v-if="recipe"
+    v-if="recipe && recipe.slug && recipe.settings && recipe.recipeIngredient"
     :class="{
       'pa-0': $vuetify.breakpoint.smAndDown,
     }"
@@ -447,15 +447,12 @@ export default defineComponent({
       invoke(async () => {
         await until(recipe).not.toBeNull();
 
-        if (recipe.value === null) {
-          // Throw error
+        if (!recipe.value || !recipe.value.assets || !recipe.value.slug) {
+          return;
         }
 
         const assetName = recipe.value?.assets[0].fileName as string;
         const imagesrc = assetURL(assetName);
-        const response = await fetch(imagesrc);
-        const blob = await response.blob();
-        const file = new File([blob], assetName, { type: blob.type });
         image.src = imagesrc;
 
         const res = await api.ocr.asset_to_tsv(recipe.value.slug, assetName);
@@ -564,7 +561,7 @@ export default defineComponent({
           // Update the right field in the recipe
 
           if (state.selectedRecipeField !== "") {
-            // Just trust me Typescript
+            if (recipe.value === null) return;
             setPropertyValueByPath<Recipe>(recipe.value, state.selectedRecipeField, state.selectedText);
           }
         } else {
@@ -793,7 +790,7 @@ export default defineComponent({
     }
 
     function setSingleIngredient(f: keyof RecipeIngredient, index: number) {
-      state.selectedRecipeField = `recipeIngredient.${index}.${f}`;
+      state.selectedRecipeField = `recipeIngredient.${index}.${f}` as SelectedRecipeLeaves;
     }
 
     function setSingleStep(path: Leaves<RecipeStep[]>) {
diff --git a/frontend/pages/recipe/create/ocr.vue b/frontend/pages/recipe/create/ocr.vue
index 693dbca8273..d9b0991f465 100644
--- a/frontend/pages/recipe/create/ocr.vue
+++ b/frontend/pages/recipe/create/ocr.vue
@@ -9,7 +9,7 @@
       <v-checkbox v-model="makeFileRecipeImage" :label="$t('new-recipe.make-recipe-image')" />
     </v-card-actions>
     <v-card-actions class="justify-center">
-      <AppButtonUpload :post="false" file-name="file" :text-btn="false" @uploaded="createByOcr" accept="image/*" />
+      <AppButtonUpload :post="false" file-name="file" :text-btn="false" accept="image/*" @uploaded="createByOcr" />
     </v-card-actions>
   </div>
 </template>

From e6b80e1daa0858e84c21a81fc2de3f6706233ad2 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Tue, 26 Jul 2022 13:21:10 +0200
Subject: [PATCH 21/62] Restrict function setPropertyValueByPath generic

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index eb126d8d259..57d83ac7bef 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -382,7 +382,7 @@ export default defineComponent({
       selectedTextSplitMode: "lineNum" as SelectedTextSplitModes,
     });
 
-    const setPropertyValueByPath = function <T>(object: T, path: Paths<T>, value: any) {
+    const setPropertyValueByPath = function <T extends Recipe>(object: T, path: Paths<T>, value: any) {
       const a = path.split(".");
       let nextProperty: any = object;
       for (let i = 0, n = a.length - 1; i < n; ++i) {

From 1398164a937ce21f170288048a7d4ede84a002a2 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Thu, 28 Jul 2022 19:40:57 +0200
Subject: [PATCH 22/62] Restrict template literal type

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 61 ++++++++++++++++++++--
 1 file changed, 57 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 57d83ac7bef..add9c0129e0 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -100,7 +100,7 @@
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
                 <v-btn icon>
-                  <v-icon v-bind="attrs" v-on="on"> {{ $globals.icons.help }} </v-icon>
+                  <v-icon v-bind="attrs" v-on="on" @click="showHelp = !showHelp"> {{ $globals.icons.help }} </v-icon>
                 </v-btn>
               </template>
               <span>Click here for help on how to use this feature!</span>
@@ -113,9 +113,9 @@
             @mousemove="handleMouseMove"
             @wheel="handleMouseScroll"
           ></canvas>
-          <p>
+          <span style="white-space: pre-wrap">
             {{ selectedText }}
-          </p>
+          </span>
         </v-card>
       </v-col>
       <v-col cols="12" sm="5" md="5" lg="5">
@@ -228,6 +228,55 @@
         </v-tabs-items>
       </v-col>
     </v-row>
+    <v-dialog v-model="showHelp" width="800px">
+      <v-card>
+        <v-app-bar dense dark color="primary" class="mb-2">
+          <v-icon large left>
+            {{ $globals.icons.help }}
+          </v-icon>
+          <v-toolbar-title class="headline"> Help </v-toolbar-title>
+          <v-spacer></v-spacer>
+        </v-app-bar>
+        <v-card-text>
+          <h1>Mouse modes</h1>
+          <v-divider class="mb-2 mt-1" />
+          <h2 class="my-2">
+            <v-icon> {{ $globals.icons.selectMode }} </v-icon>Selection Mode (default)
+          </h2>
+          <p class="my-1">The selection mode is the main mode that can be used to enter data:</p>
+          <ol>
+            <li>Draw a rectangle on the text you want to select.</li>
+            <li>Click on any field on the right and then click back on the rectangle above the image.</li>
+            <li>The selected text will appear inside the previously selected field.</li>
+          </ol>
+          <h2 class="my-2">
+            <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>Pan and Zoom Mode
+          </h2>
+          Select pan and zoom by clicking the icon. This mode allows to zoom inside the image and move around to make
+          using big images easier.
+          <h1 class="mt-5">Split Text modes</h1>
+          <v-divider class="mb-2 mt-1" />
+          <h2 class="my-2">
+            <v-icon> {{ $globals.icons.preserveLines }} </v-icon> Line mode (default)
+          </h2>
+          <p>
+            In line mode, the text will be propagated by keeping the original line breaks. This mode is useful when
+            using bulk add on a list of ingredients where one ingredient is one line.
+          </p>
+          <h2 class="my-2">
+            <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon> Block mode
+          </h2>
+          <p>
+            In block mode, the text will be split in blocks. This mode is useful when bulk adding instructions that are
+            usually written in paragraphs.
+          </p>
+          <h2 class="my-2">
+            <v-icon> {{ $globals.icons.flatten }} </v-icon> Flat mode
+          </h2>
+          <p>In flat mode, the text will be added to the selected recipe field with no line breaks.</p>
+        </v-card-text>
+      </v-card>
+    </v-dialog>
   </v-container>
 </template>
 
@@ -380,6 +429,7 @@ export default defineComponent({
       } as ImagePosition,
       isImageSmallerThanCanvas: false,
       selectedTextSplitMode: "lineNum" as SelectedTextSplitModes,
+      showHelp: false,
     });
 
     const setPropertyValueByPath = function <T extends Recipe>(object: T, path: Paths<T>, value: any) {
@@ -793,7 +843,10 @@ export default defineComponent({
       state.selectedRecipeField = `recipeIngredient.${index}.${f}` as SelectedRecipeLeaves;
     }
 
-    function setSingleStep(path: Leaves<RecipeStep[]>) {
+    // Leaves<RecipeStep[]> will return some function types making eslint very unhappy
+    type RecipeStepsLeaves = `${number}.${Leaves<RecipeStep>}`
+
+    function setSingleStep(path: RecipeStepsLeaves ) {
       state.selectedRecipeField = `recipeInstructions.${path}` as SelectedRecipeLeaves;
     }
 

From 91d441f0feb8fe3e0c2c2e199df8479b03b15ab8 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Thu, 28 Jul 2022 19:54:30 +0200
Subject: [PATCH 23/62] Add a more friendly icon to creation page

---
 frontend/pages/recipe/create.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/pages/recipe/create.vue b/frontend/pages/recipe/create.vue
index ba10b4715bf..330d65111c7 100644
--- a/frontend/pages/recipe/create.vue
+++ b/frontend/pages/recipe/create.vue
@@ -43,7 +43,7 @@ export default defineComponent({
         value: "url",
       },
       {
-        icon: $globals.icons.edit,
+        icon: $globals.icons.fileImage,
         text: "Create recipe from an image",
         value: "ocr",
       },

From 4b8bb70a2c5ad774beeb436363926b099cca5260 Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Thu, 28 Jul 2022 14:26:44 -0800
Subject: [PATCH 24/62] update poetry lock file

---
 poetry.lock | 26 +++++++++++---------------
 1 file changed, 11 insertions(+), 15 deletions(-)

diff --git a/poetry.lock b/poetry.lock
index 39fad0e7787..160ce22ff60 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1658,16 +1658,17 @@ attrs = [
     {file = "attrs-21.4.0.tar.gz", hash = "sha256:626ba8234211db98e869df76230a137c4c40a12d72445c45d5f5b716f076e2fd"},
 ]
 bcrypt = [
-    {file = "bcrypt-3.2.0-cp36-abi3-macosx_10_10_universal2.whl", hash = "sha256:b589229207630484aefe5899122fb938a5b017b0f4349f769b8c13e78d99a8fd"},
-    {file = "bcrypt-3.2.0-cp36-abi3-macosx_10_9_x86_64.whl", hash = "sha256:c95d4cbebffafcdd28bd28bb4e25b31c50f6da605c81ffd9ad8a3d1b2ab7b1b6"},
-    {file = "bcrypt-3.2.0-cp36-abi3-manylinux1_x86_64.whl", hash = "sha256:63d4e3ff96188e5898779b6057878fecf3f11cfe6ec3b313ea09955d587ec7a7"},
-    {file = "bcrypt-3.2.0-cp36-abi3-manylinux2010_x86_64.whl", hash = "sha256:cd1ea2ff3038509ea95f687256c46b79f5fc382ad0aa3664d200047546d511d1"},
-    {file = "bcrypt-3.2.0-cp36-abi3-manylinux2014_aarch64.whl", hash = "sha256:cdcdcb3972027f83fe24a48b1e90ea4b584d35f1cc279d76de6fc4b13376239d"},
-    {file = "bcrypt-3.2.0-cp36-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:a0584a92329210fcd75eb8a3250c5a941633f8bfaf2a18f81009b097732839b7"},
-    {file = "bcrypt-3.2.0-cp36-abi3-musllinux_1_1_x86_64.whl", hash = "sha256:56e5da069a76470679f312a7d3d23deb3ac4519991a0361abc11da837087b61d"},
-    {file = "bcrypt-3.2.0-cp36-abi3-win32.whl", hash = "sha256:a67fb841b35c28a59cebed05fbd3e80eea26e6d75851f0574a9273c80f3e9b55"},
-    {file = "bcrypt-3.2.0-cp36-abi3-win_amd64.whl", hash = "sha256:81fec756feff5b6818ea7ab031205e1d323d8943d237303baca2c5f9c7846f34"},
-    {file = "bcrypt-3.2.0.tar.gz", hash = "sha256:5b93c1726e50a93a033c36e5ca7fdcd29a5c7395af50a6892f5d9e7c6cfbfb29"},
+    {file = "bcrypt-3.2.2-cp36-abi3-macosx_10_10_universal2.whl", hash = "sha256:7180d98a96f00b1050e93f5b0f556e658605dd9f524d0b0e68ae7944673f525e"},
+    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_17_aarch64.manylinux2014_aarch64.manylinux_2_24_aarch64.whl", hash = "sha256:61bae49580dce88095d669226d5076d0b9d927754cedbdf76c6c9f5099ad6f26"},
+    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:88273d806ab3a50d06bc6a2fc7c87d737dd669b76ad955f449c43095389bc8fb"},
+    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.manylinux_2_24_x86_64.whl", hash = "sha256:6d2cb9d969bfca5bc08e45864137276e4c3d3d7de2b162171def3d188bf9d34a"},
+    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:2b02d6bfc6336d1094276f3f588aa1225a598e27f8e3388f4db9948cb707b521"},
+    {file = "bcrypt-3.2.2-cp36-abi3-manylinux_2_5_x86_64.manylinux1_x86_64.manylinux_2_12_x86_64.manylinux2010_x86_64.whl", hash = "sha256:a2c46100e315c3a5b90fdc53e429c006c5f962529bc27e1dfd656292c20ccc40"},
+    {file = "bcrypt-3.2.2-cp36-abi3-musllinux_1_1_aarch64.whl", hash = "sha256:7d9ba2e41e330d2af4af6b1b6ec9e6128e91343d0b4afb9282e54e5508f31baa"},
+    {file = "bcrypt-3.2.2-cp36-abi3-musllinux_1_1_x86_64.whl", hash = "sha256:cd43303d6b8a165c29ec6756afd169faba9396a9472cdff753fe9f19b96ce2fa"},
+    {file = "bcrypt-3.2.2-cp36-abi3-win32.whl", hash = "sha256:4e029cef560967fb0cf4a802bcf4d562d3d6b4b1bf81de5ec1abbe0f1adb027e"},
+    {file = "bcrypt-3.2.2-cp36-abi3-win_amd64.whl", hash = "sha256:7ff2069240c6bbe49109fe84ca80508773a904f5a8cb960e02a977f7f519b129"},
+    {file = "bcrypt-3.2.2.tar.gz", hash = "sha256:433c410c2177057705da2a9f2cd01dd157493b2a7ac14c8593a16b3dab6b6bfb"},
 ]
 beautifulsoup4 = [
     {file = "beautifulsoup4-4.11.1-py3-none-any.whl", hash = "sha256:58d5c3d29f5a36ffeb94f02f0d786cd53014cf9b3b3951d42e0080d8a9498d30"},
@@ -1810,7 +1811,6 @@ greenlet = [
     {file = "greenlet-1.1.2-cp310-cp310-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:97e5306482182170ade15c4b0d8386ded995a07d7cc2ca8f27958d34d6736497"},
     {file = "greenlet-1.1.2-cp310-cp310-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:e6a36bb9474218c7a5b27ae476035497a6990e21d04c279884eb10d9b290f1b1"},
     {file = "greenlet-1.1.2-cp310-cp310-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:abb7a75ed8b968f3061327c433a0fbd17b729947b400747c334a9c29a9af6c58"},
-    {file = "greenlet-1.1.2-cp310-cp310-musllinux_1_1_x86_64.whl", hash = "sha256:b336501a05e13b616ef81ce329c0e09ac5ed8c732d9ba7e3e983fcc1a9e86965"},
     {file = "greenlet-1.1.2-cp310-cp310-win_amd64.whl", hash = "sha256:14d4f3cd4e8b524ae9b8aa567858beed70c392fdec26dbdb0a8a418392e71708"},
     {file = "greenlet-1.1.2-cp35-cp35m-macosx_10_14_x86_64.whl", hash = "sha256:17ff94e7a83aa8671a25bf5b59326ec26da379ace2ebc4411d690d80a7fbcf23"},
     {file = "greenlet-1.1.2-cp35-cp35m-manylinux1_x86_64.whl", hash = "sha256:9f3cba480d3deb69f6ee2c1825060177a22c7826431458c697df88e6aeb3caee"},
@@ -1823,7 +1823,6 @@ greenlet = [
     {file = "greenlet-1.1.2-cp36-cp36m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:f9d29ca8a77117315101425ec7ec2a47a22ccf59f5593378fc4077ac5b754fce"},
     {file = "greenlet-1.1.2-cp36-cp36m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:21915eb821a6b3d9d8eefdaf57d6c345b970ad722f856cd71739493ce003ad08"},
     {file = "greenlet-1.1.2-cp36-cp36m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:eff9d20417ff9dcb0d25e2defc2574d10b491bf2e693b4e491914738b7908168"},
-    {file = "greenlet-1.1.2-cp36-cp36m-musllinux_1_1_x86_64.whl", hash = "sha256:b8c008de9d0daba7b6666aa5bbfdc23dcd78cafc33997c9b7741ff6353bafb7f"},
     {file = "greenlet-1.1.2-cp36-cp36m-win32.whl", hash = "sha256:32ca72bbc673adbcfecb935bb3fb1b74e663d10a4b241aaa2f5a75fe1d1f90aa"},
     {file = "greenlet-1.1.2-cp36-cp36m-win_amd64.whl", hash = "sha256:f0214eb2a23b85528310dad848ad2ac58e735612929c8072f6093f3585fd342d"},
     {file = "greenlet-1.1.2-cp37-cp37m-macosx_10_14_x86_64.whl", hash = "sha256:b92e29e58bef6d9cfd340c72b04d74c4b4e9f70c9fa7c78b674d1fec18896dc4"},
@@ -1832,7 +1831,6 @@ greenlet = [
     {file = "greenlet-1.1.2-cp37-cp37m-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:1e12bdc622676ce47ae9abbf455c189e442afdde8818d9da983085df6312e7a1"},
     {file = "greenlet-1.1.2-cp37-cp37m-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:8c790abda465726cfb8bb08bd4ca9a5d0a7bd77c7ac1ca1b839ad823b948ea28"},
     {file = "greenlet-1.1.2-cp37-cp37m-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:f276df9830dba7a333544bd41070e8175762a7ac20350786b322b714b0e654f5"},
-    {file = "greenlet-1.1.2-cp37-cp37m-musllinux_1_1_x86_64.whl", hash = "sha256:8c5d5b35f789a030ebb95bff352f1d27a93d81069f2adb3182d99882e095cefe"},
     {file = "greenlet-1.1.2-cp37-cp37m-win32.whl", hash = "sha256:64e6175c2e53195278d7388c454e0b30997573f3f4bd63697f88d855f7a6a1fc"},
     {file = "greenlet-1.1.2-cp37-cp37m-win_amd64.whl", hash = "sha256:b11548073a2213d950c3f671aa88e6f83cda6e2fb97a8b6317b1b5b33d850e06"},
     {file = "greenlet-1.1.2-cp38-cp38-macosx_10_14_x86_64.whl", hash = "sha256:9633b3034d3d901f0a46b7939f8c4d64427dfba6bbc5a36b1a67364cf148a1b0"},
@@ -1841,7 +1839,6 @@ greenlet = [
     {file = "greenlet-1.1.2-cp38-cp38-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:e859fcb4cbe93504ea18008d1df98dee4f7766db66c435e4882ab35cf70cac43"},
     {file = "greenlet-1.1.2-cp38-cp38-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:00e44c8afdbe5467e4f7b5851be223be68adb4272f44696ee71fe46b7036a711"},
     {file = "greenlet-1.1.2-cp38-cp38-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:ec8c433b3ab0419100bd45b47c9c8551248a5aee30ca5e9d399a0b57ac04651b"},
-    {file = "greenlet-1.1.2-cp38-cp38-musllinux_1_1_x86_64.whl", hash = "sha256:2bde6792f313f4e918caabc46532aa64aa27a0db05d75b20edfc5c6f46479de2"},
     {file = "greenlet-1.1.2-cp38-cp38-win32.whl", hash = "sha256:288c6a76705dc54fba69fbcb59904ae4ad768b4c768839b8ca5fdadec6dd8cfd"},
     {file = "greenlet-1.1.2-cp38-cp38-win_amd64.whl", hash = "sha256:8d2f1fb53a421b410751887eb4ff21386d119ef9cde3797bf5e7ed49fb51a3b3"},
     {file = "greenlet-1.1.2-cp39-cp39-macosx_10_14_x86_64.whl", hash = "sha256:166eac03e48784a6a6e0e5f041cfebb1ab400b394db188c48b3a84737f505b67"},
@@ -1850,7 +1847,6 @@ greenlet = [
     {file = "greenlet-1.1.2-cp39-cp39-manylinux_2_17_aarch64.manylinux2014_aarch64.whl", hash = "sha256:b1692f7d6bc45e3200844be0dba153612103db241691088626a33ff1f24a0d88"},
     {file = "greenlet-1.1.2-cp39-cp39-manylinux_2_17_ppc64le.manylinux2014_ppc64le.whl", hash = "sha256:7227b47e73dedaa513cdebb98469705ef0d66eb5a1250144468e9c3097d6b59b"},
     {file = "greenlet-1.1.2-cp39-cp39-manylinux_2_17_x86_64.manylinux2014_x86_64.whl", hash = "sha256:7ff61ff178250f9bb3cd89752df0f1dd0e27316a8bd1465351652b1b4a4cdfd3"},
-    {file = "greenlet-1.1.2-cp39-cp39-musllinux_1_1_x86_64.whl", hash = "sha256:0051c6f1f27cb756ffc0ffbac7d2cd48cb0362ac1736871399a739b2885134d3"},
     {file = "greenlet-1.1.2-cp39-cp39-win32.whl", hash = "sha256:f70a9e237bb792c7cc7e44c531fd48f5897961701cdaa06cf22fc14965c496cf"},
     {file = "greenlet-1.1.2-cp39-cp39-win_amd64.whl", hash = "sha256:013d61294b6cd8fe3242932c1c5e36e5d1db2c8afb58606c5a67efce62c1f5fd"},
     {file = "greenlet-1.1.2.tar.gz", hash = "sha256:e30f5ea4ae2346e62cedde8794a56858a67b878dd79f7df76a0767e356b1744a"},

From 15a4046588514ab59f25f721d2566068a61a71f4 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Fri, 29 Jul 2022 16:22:02 +0200
Subject: [PATCH 25/62] Correct sloppy ocr classes

---
 mealie/routes/ocr/pytesseract.py   | 20 +++++++++++++-------
 mealie/services/ocr/pytesseract.py | 12 +++++++-----
 2 files changed, 20 insertions(+), 12 deletions(-)

diff --git a/mealie/routes/ocr/pytesseract.py b/mealie/routes/ocr/pytesseract.py
index 7fc4d8f7c99..d2ffdec6212 100644
--- a/mealie/routes/ocr/pytesseract.py
+++ b/mealie/routes/ocr/pytesseract.py
@@ -2,7 +2,7 @@
 
 from mealie.routes._base import BaseUserController, controller
 from mealie.schema.ocr.ocr import OcrAssetReq, OcrTsvResponse
-from mealie.services.ocr.pytesseract import OCR
+from mealie.services.ocr.pytesseract import OcrService
 from mealie.services.recipe.recipe_data_service import RecipeDataService
 from mealie.services.recipe.recipe_service import RecipeService
 
@@ -11,21 +11,27 @@
 
 @controller(router)
 class OCRController(BaseUserController):
+    def __init__(self):
+        self.ocr_service = OcrService()
+
     @router.post("/", response_model=str)
     def image_to_string(self, file: bytes = File(...)):
-        return OCR.image_to_string(file)
+        return self.ocr_service.image_to_string(file)
 
     @router.post("/file-to-tsv", response_model=list[OcrTsvResponse])
     def file_to_tsv(self, file: bytes = File(...)):
-        tsv = OCR.image_to_tsv(file)
-        return OCR.format_tsv_output(tsv)
+        tsv = self.ocr_service.image_to_tsv(file)
+        return self.ocr_service.format_tsv_output(tsv)
 
     @router.post("/asset-to-tsv", response_model=list[OcrTsvResponse])
     def asset_to_tsv(self, req: OcrAssetReq):
-        recipe = RecipeService._get_recipe(self, req.recipe_slug)
+        recipe_service = RecipeService(self.repos, self.user, self.group)
+        recipe = recipe_service._get_recipe(req.recipe_slug)
+        if recipe.id is None:
+            return []
         data_service = RecipeDataService(recipe.id, recipe.group_id)
         asset_path = data_service.dir_assets.joinpath(req.asset_name)
         file = open(asset_path, "rb")
-        tsv = OCR.image_to_tsv(file.read())
+        tsv = self.ocr_service.image_to_tsv(file.read())
 
-        return OCR.format_tsv_output(tsv)
+        return self.ocr_service.format_tsv_output(tsv)
diff --git a/mealie/services/ocr/pytesseract.py b/mealie/services/ocr/pytesseract.py
index 3f37ad47eef..5252a99d06a 100644
--- a/mealie/services/ocr/pytesseract.py
+++ b/mealie/services/ocr/pytesseract.py
@@ -7,28 +7,30 @@
 from mealie.services._base_service import BaseService
 
 
-class OCR(BaseService):
+class OcrService(BaseService):
     """
     Class for ocr engines.
     """
 
-    def image_to_string(image_data):
+    def image_to_string(self, image_data):
         """
         Returns a plain text translation of an image
         """
         return pytesseract.image_to_string(Image.open(image_data))
 
-    def image_to_tsv(image_data):
+    def image_to_tsv(self, image_data, lang=None):
         """
         Returns tsv formatted output
         """
+        if lang is not None:
+            return pytesseract.image_to_data(Image.open(BytesIO(image_data)), lang=lang)
 
         return pytesseract.image_to_data(Image.open(BytesIO(image_data)))
 
-    def format_tsv_output(tsv: str) -> OcrTsvResponse:
+    def format_tsv_output(self, tsv: str) -> list[OcrTsvResponse]:
         lines = tsv.split("\n")
         titles = [t.strip() for t in lines[0].split("\t")]
-        response = []
+        response: list[OcrTsvResponse] = []
         #  len-1 because the last line is empty
         for i in range(1, len(lines) - 1):
             d = {}

From f46dc09da6f82f995b5316c0b07b0b09827e499c Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 30 Jul 2022 11:49:10 +0200
Subject: [PATCH 26/62] Make MyPy happy

---
 mealie/schema/ocr/ocr.py           | 24 ++++++++++++------------
 mealie/services/ocr/pytesseract.py | 25 +++++++++++++++++--------
 2 files changed, 29 insertions(+), 20 deletions(-)

diff --git a/mealie/schema/ocr/ocr.py b/mealie/schema/ocr/ocr.py
index 151e485ded1..fd535111066 100644
--- a/mealie/schema/ocr/ocr.py
+++ b/mealie/schema/ocr/ocr.py
@@ -2,18 +2,18 @@
 
 
 class OcrTsvResponse(MealieModel):
-    level: int
-    page_num: int
-    block_num: int
-    par_num: int
-    line_num: int
-    word_num: int
-    left: int
-    top: int
-    width: int
-    height: int
-    conf: float
-    text: str
+    level: int = 0
+    page_num: int = 0
+    block_num: int = 0
+    par_num: int = 0
+    line_num: int = 0
+    word_num: int = 0
+    left: int = 0
+    top: int = 0
+    width: int = 0
+    height: int = 0
+    conf: float = 0.0
+    text: str = ""
 
 
 class OcrAssetReq(MealieModel):
diff --git a/mealie/services/ocr/pytesseract.py b/mealie/services/ocr/pytesseract.py
index 5252a99d06a..8bd63a36ce0 100644
--- a/mealie/services/ocr/pytesseract.py
+++ b/mealie/services/ocr/pytesseract.py
@@ -20,7 +20,7 @@ def image_to_string(self, image_data):
 
     def image_to_tsv(self, image_data, lang=None):
         """
-        Returns tsv formatted output
+        Returns the pytesseract default tsv output
         """
         if lang is not None:
             return pytesseract.image_to_data(Image.open(BytesIO(image_data)), lang=lang)
@@ -28,20 +28,29 @@ def image_to_tsv(self, image_data, lang=None):
         return pytesseract.image_to_data(Image.open(BytesIO(image_data)))
 
     def format_tsv_output(self, tsv: str) -> list[OcrTsvResponse]:
+        """
+        Returns a OcrTsvResponse from a default pytesseract tsv output
+        """
         lines = tsv.split("\n")
         titles = [t.strip() for t in lines[0].split("\t")]
         response: list[OcrTsvResponse] = []
-        #  len-1 because the last line is empty
-        for i in range(1, len(lines) - 1):
-            d = {}
+
+        for i in range(1, len(lines)):
+            if lines[i] == "":
+                continue
+
+            line = OcrTsvResponse()
             for key, value in zip(titles, lines[i].split("\t")):
                 if key == "text":
-                    d[key] = value.strip()
+                    setattr(line, key, value.strip())
                 elif key == "conf":
-                    d[key] = float(value.strip())
+                    setattr(line, key, float(value.strip()))
+                elif key in OcrTsvResponse.__fields__:
+                    setattr(line, key, int(value.strip()))
                 else:
-                    d[key] = int(value.strip())
+                    continue
 
-            response.append(d)
+            if isinstance(line, OcrTsvResponse):
+                response.append(line)
 
         return response

From 9ca704761efc8b56baa70a55b590687d94012d2c Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 30 Jul 2022 11:49:47 +0200
Subject: [PATCH 27/62] Rewrite safer tests

---
 .../services_tests/test_ocr_service.py         | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/tests/unit_tests/services_tests/test_ocr_service.py b/tests/unit_tests/services_tests/test_ocr_service.py
index e5e88e1c11a..6666ed88588 100644
--- a/tests/unit_tests/services_tests/test_ocr_service.py
+++ b/tests/unit_tests/services_tests/test_ocr_service.py
@@ -1,15 +1,19 @@
 from pathlib import Path
 
-from mealie.services.ocr.pytesseract import OCR
+from mealie.services.ocr.pytesseract import OcrService
+
+ocr_service = OcrService()
 
 
 def test_image_to_string():
-    result = OCR.image_to_string(open(Path("tests/data/images/test-ocr.png"), "rb"))
-    expected_result = open(Path("tests/data/text/test-ocr.txt"))
-    assert result == expected_result.read()
+    with open(Path("tests/data/images/test-ocr.png"), "rb") as image:
+        result = ocr_service.image_to_string(image)
+        with open(Path("tests/data/text/test-ocr.txt"), "r", encoding="utf-8") as expected_result:
+            assert result == expected_result.read()
 
 
 def test_image_to_tsv():
-    result = OCR.image_to_tsv(open(Path("tests/data/images/test-ocr.png"), "rb").read())
-    expected_result = open(Path("tests/data/text/test-ocr.tsv"))
-    assert result == expected_result.read()
+    with open(Path("tests/data/images/test-ocr.png"), "rb") as image:
+        result = ocr_service.image_to_tsv(image.read())
+        with open(Path("tests/data/text/test-ocr.tsv"), "r", encoding="utf-8") as expected_result:
+            assert result == expected_result.read()

From 20b3f43b2e8e4ae24c4e2f72274c8e651b4cd265 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 30 Jul 2022 14:19:18 +0200
Subject: [PATCH 28/62] Add tesseract to backend test CI container dependencies

---
 .github/workflows/partial-backend.yml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.github/workflows/partial-backend.yml b/.github/workflows/partial-backend.yml
index 322af86dd43..685aa2878e8 100644
--- a/.github/workflows/partial-backend.yml
+++ b/.github/workflows/partial-backend.yml
@@ -62,7 +62,7 @@ jobs:
       - name: Install dependencies
         run: |
           sudo apt-get update
-          sudo apt-get install libsasl2-dev libldap2-dev libssl-dev
+          sudo apt-get install libsasl2-dev libldap2-dev libssl-dev tesseract-ocr-all
           poetry install
           poetry add "psycopg2-binary==2.8.6"
         if: steps.cached-poetry-dependencies.outputs.cache-hit != 'true'

From 6c50c3148383b67f1b5b9609e0585082a846696d Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 1 Aug 2022 19:56:44 +0200
Subject: [PATCH 29/62] Make canvas element a component global

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 115 ++++++++++-----------
 1 file changed, 57 insertions(+), 58 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index add9c0129e0..1d390c8100f 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -395,6 +395,9 @@ export default defineComponent({
 
     const state = reactive({
       loading: true,
+      canvas: null as HTMLCanvasElement | null,
+      ctx: null as CanvasRenderingContext2D | null,
+      canvasRect: null as DOMRect | null,
       tab: null,
       rect: {
         startX: 0,
@@ -514,25 +517,25 @@ export default defineComponent({
         }
 
         nextTick(() => {
-          const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
-          const ctx = <CanvasRenderingContext2D>c.getContext("2d");
-          ctx.imageSmoothingEnabled = false;
-          const clientCanvasDimensions = c.getBoundingClientRect();
+          state.canvas = <HTMLCanvasElement>document.getElementById("canvas");
+          state.ctx = <CanvasRenderingContext2D>state.canvas.getContext("2d");
+          state.ctx.imageSmoothingEnabled = false;
+          state.canvasRect = state.canvas.getBoundingClientRect();
 
-          c.width = clientCanvasDimensions.width;
-          if (image.width < c.width) {
+          state.canvas.width = state.canvasRect.width;
+          if (image.width < state.canvas.width) {
             state.isImageSmallerThanCanvas = true;
           }
-          state.imagePosition.dWidth = c.width;
+          state.imagePosition.dWidth = state.canvas.width;
 
           updateImageScale();
-          c.height = Math.min(image.height * state.imagePosition.scale, 700); // Max height of 700px
+          state.canvas.height = Math.min(image.height * state.imagePosition.scale, 700); // Max height of 700px
 
           state.imagePosition.sWidth = image.width;
           state.imagePosition.sHeight = image.height;
-          state.imagePosition.dWidth = c.width;
+          state.imagePosition.dWidth = state.canvas.width;
           state.imagePosition.dHeight = image.height * state.imagePosition.scale;
-          drawImage(ctx);
+          drawImage(state.ctx);
         });
       });
     });
@@ -552,36 +555,37 @@ export default defineComponent({
     }
 
     function switchCanvasMode(mode: CanvasModes) {
+      if (state.canvasRect === null) return;
       state.canvasMode = mode;
-      const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
       if (mode === "panAndZoom") {
-        c.style.cursor = "pointer";
+        state.canvas.style.cursor = "pointer";
       } else {
-        c.style.cursor = "default";
+        state.canvas.style.cursor = "default";
       }
     }
 
     function switchSplitTextMode(mode: SelectedTextSplitModes) {
+      if (state.canvasRect === null) return;
       state.selectedTextSplitMode = mode;
       state.selectedText = getWordsInSelection(tsv.value, state.rect);
     }
 
     function draw() {
+      if (state.canvasRect === null) return;
       if (state.mouse.down) {
-        const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
-        const ctx = <CanvasRenderingContext2D>c.getContext("2d");
-        ctx.imageSmoothingEnabled = false;
-        ctx.fillStyle = "rgb(255, 255, 255)";
-        ctx.fillRect(0, 0, c.width, c.height);
-        drawImage(ctx);
-        ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
-        ctx.setLineDash([6]);
-        ctx.fillRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
-        ctx.strokeRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
+        state.ctx.imageSmoothingEnabled = false;
+        state.ctx.fillStyle = "rgb(255, 255, 255)";
+        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        drawImage(state.ctx);
+        state.ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
+        state.ctx.setLineDash([6]);
+        state.ctx.fillRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
+        state.ctx.strokeRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
       }
     }
 
     function isMouseInRect(mouse: Mouse, rect: CanvasRect) {
+      if (state.canvasRect === null) return;
       const correctRect = correctRectCoordinates(rect);
 
       return (
@@ -593,18 +597,18 @@ export default defineComponent({
     }
 
     function resetSelection() {
+      if (state.canvasRect === null) return;
       state.rect.w = 0;
       state.rect.h = 0;
       state.selectedText = "";
     }
 
     function handleMouseDown(event: MouseEvent) {
+      if (state.canvasRect === null) return;
       state.mouse.down = true;
-      const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
-      const canvasRect = c.getBoundingClientRect();
       state.mouse.current = {
-        x: event.clientX - canvasRect.left,
-        y: event.clientY - canvasRect.top,
+        x: event.clientX - state.canvasRect.left,
+        y: event.clientY - state.canvasRect.top,
       };
       if (state.canvasMode === "selection") {
         if (isMouseInRect(state.mouse, state.rect)) {
@@ -615,11 +619,10 @@ export default defineComponent({
             setPropertyValueByPath<Recipe>(recipe.value, state.selectedRecipeField, state.selectedText);
           }
         } else {
-          const ctx = <CanvasRenderingContext2D>c.getContext("2d");
 
-          ctx.fillStyle = "rgb(255, 255, 255)";
-          ctx.fillRect(0, 0, c.width, c.height);
-          drawImage(ctx);
+          state.ctx.fillStyle = "rgb(255, 255, 255)";
+          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+          drawImage(state.ctx);
           state.rect.startX = state.mouse.current.x;
           state.rect.startY = state.mouse.current.y;
           resetSelection();
@@ -634,31 +637,32 @@ export default defineComponent({
     }
 
     function handleMouseUp(_event: MouseEvent) {
+      if (state.canvasRect === null) return;
       state.mouse.down = false;
       state.selectedText = getWordsInSelection(tsv.value, state.rect);
     }
 
     function keepImageInCanvas() {
-      const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
+      if (state.canvasRect === null) return;
 
       // Prevent image from being smaller than the canvas width
-      if (state.imagePosition.dWidth - c.width < 0) {
-        state.imagePosition.dWidth = c.width;
+      if (state.imagePosition.dWidth - state.canvas.width < 0) {
+        state.imagePosition.dWidth = state.canvas.width;
       }
 
       // Prevent image from being smaller than the canvas height
-      if (state.imagePosition.dHeight - c.height < 0) {
+      if (state.imagePosition.dHeight - state.canvas.height < 0) {
         state.imagePosition.dHeight = image.height * state.imagePosition.scale;
       }
 
       // Prevent to move the image too much to the left
-      if (c.width - state.imagePosition.dx - state.imagePosition.dWidth > 0) {
-        state.imagePosition.dx = c.width - state.imagePosition.dWidth;
+      if (state.canvas.width - state.imagePosition.dx - state.imagePosition.dWidth > 0) {
+        state.imagePosition.dx = state.canvas.width - state.imagePosition.dWidth;
       }
 
       // Prevent to move the image too much to the top
-      if (c.height - state.imagePosition.dy - state.imagePosition.dHeight > 0) {
-        state.imagePosition.dy = c.height - state.imagePosition.dHeight;
+      if (state.canvas.height - state.imagePosition.dy - state.imagePosition.dHeight > 0) {
+        state.imagePosition.dy = state.canvas.height - state.imagePosition.dHeight;
       }
 
       // Prevent to move the image too much to the right
@@ -673,11 +677,10 @@ export default defineComponent({
     }
 
     function handleMouseMove(event: MouseEvent) {
-      const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
-      const canvasRect = c.getBoundingClientRect();
+      if (state.canvasRect === null) return;
       state.mouse.current = {
-        x: event.clientX - canvasRect.left,
-        y: event.clientY - canvasRect.top,
+        x: event.clientX - state.canvasRect.left,
+        y: event.clientY - state.canvasRect.top,
       };
 
       if (state.mouse.down) {
@@ -689,22 +692,21 @@ export default defineComponent({
         }
 
         if (state.canvasMode === "panAndZoom") {
-          c.style.cursor = "move";
+          state.canvas.style.cursor = "move";
           state.imagePosition.dx = state.mouse.current.x - state.imagePosition.panStartPoint.x;
           state.imagePosition.dy = state.mouse.current.y - state.imagePosition.panStartPoint.y;
           keepImageInCanvas();
-          const ctx = <CanvasRenderingContext2D>c.getContext("2d");
-          ctx.fillStyle = "rgb(255, 255, 255)";
-          ctx.fillRect(0, 0, c.width, c.height);
-          drawImage(ctx);
+          state.ctx.fillStyle = "rgb(255, 255, 255)";
+          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+          drawImage(state.ctx);
           return;
         }
       }
 
       if (isMouseInRect(state.mouse, state.rect) && state.canvasMode === "selection") {
-        c.style.cursor = "pointer";
+        state.canvas.style.cursor = "pointer";
       } else {
-        c.style.cursor = "default";
+        state.canvas.style.cursor = "default";
       }
     }
 
@@ -715,11 +717,9 @@ export default defineComponent({
       if (state.canvasMode === "panAndZoom") {
         event.preventDefault();
 
-        const c: HTMLCanvasElement = <HTMLCanvasElement>document.getElementById("canvas");
-        const canvasRect = c.getBoundingClientRect();
         state.mouse.current = {
-          x: event.clientX - canvasRect.left,
-          y: event.clientY - canvasRect.top,
+          x: event.clientX - state.canvasRect.left,
+          y: event.clientY - state.canvasRect.top,
         };
         const m = Math.sign(event.deltaY);
 
@@ -738,10 +738,9 @@ export default defineComponent({
         keepImageInCanvas();
         updateImageScale();
 
-        const ctx = <CanvasRenderingContext2D>c.getContext("2d");
-        ctx.fillStyle = "rgb(255, 255, 255)";
-        ctx.fillRect(0, 0, c.width, c.height);
-        drawImage(ctx);
+        state.ctx.fillStyle = "rgb(255, 255, 255)";
+        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        drawImage(state.ctx);
       }
     }
 

From 5066375f81839d743a3ecc8744b59fcfdff0d5de Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 1 Aug 2022 20:06:53 +0200
Subject: [PATCH 30/62] Remove unwanted spaces in selected text

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 1d390c8100f..290a32c6871 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -772,17 +772,17 @@ export default defineComponent({
               (element.top + element.height) * state.imagePosition.scale + state.imagePosition.dy
         )
         .map((element, index, array) => {
-          let newLine = "";
+          let separator = " ";
           if (
             state.selectedTextSplitMode !== "flatten" &&
             index !== array.length - 1 &&
             element[state.selectedTextSplitMode] !== array[index + 1][state.selectedTextSplitMode]
           ) {
-            newLine = "\n";
+            separator = "\n";
           }
-          return element.text + newLine;
+          return element.text + separator;
         })
-        .join(" ");
+        .join("");
     }
 
     function addIngredient(ingredients: Array<string> | null = null) {

From c41f9febdbffce8fd4bd688d6a7d12e26119d715 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Fri, 5 Aug 2022 18:32:27 +0200
Subject: [PATCH 31/62] Add way to know if recipe was created with ocr

---
 ...0ed_add_is_ocr_recipe_column_to_recipes.py | 27 +++++++++++++++++++
 frontend/types/api-types/recipe.ts            |  1 +
 mealie/db/models/recipe/recipe.py             |  1 +
 mealie/routes/recipe/recipe_crud_routes.py    |  1 +
 mealie/schema/recipe/recipe.py                |  1 +
 5 files changed, 31 insertions(+)
 create mode 100644 alembic/versions/2022-08-05-17.07.07_089bfa50d0ed_add_is_ocr_recipe_column_to_recipes.py

diff --git a/alembic/versions/2022-08-05-17.07.07_089bfa50d0ed_add_is_ocr_recipe_column_to_recipes.py b/alembic/versions/2022-08-05-17.07.07_089bfa50d0ed_add_is_ocr_recipe_column_to_recipes.py
new file mode 100644
index 00000000000..286134357ee
--- /dev/null
+++ b/alembic/versions/2022-08-05-17.07.07_089bfa50d0ed_add_is_ocr_recipe_column_to_recipes.py
@@ -0,0 +1,27 @@
+"""Add is_ocr_recipe column to recipes
+
+Revision ID: 089bfa50d0ed
+Revises: f30cf048c228
+Create Date: 2022-08-05 17:07:07.389271
+
+"""
+import sqlalchemy as sa
+
+from alembic import op
+
+# revision identifiers, used by Alembic.
+revision = "089bfa50d0ed"
+down_revision = "f30cf048c228"
+branch_labels = None
+depends_on = None
+
+
+def upgrade():
+    op.add_column("recipes", sa.Column("is_ocr_recipe", sa.Boolean(), default=False, nullable=True))
+    op.execute("UPDATE recipes SET is_ocr_recipe = FALSE")
+    #  SQLITE does not support ALTER COLUMN, so the column will stay nullable to prevent making this migration a mess
+    #  The Recipe pydantic model and the SQL server use False as default value anyway for this column so Null should be a very rare sight
+
+
+def downgrade():
+    op.drop_column("recipes", "is_ocr_recipe")
diff --git a/frontend/types/api-types/recipe.ts b/frontend/types/api-types/recipe.ts
index aed12e7e044..d4b5755d1c2 100644
--- a/frontend/types/api-types/recipe.ts
+++ b/frontend/types/api-types/recipe.ts
@@ -214,6 +214,7 @@ export interface Recipe {
     [k: string]: unknown;
   };
   comments?: RecipeCommentOut[];
+  isOcrRecipe?: boolean;
 }
 export interface RecipeTool {
   id: string;
diff --git a/mealie/db/models/recipe/recipe.py b/mealie/db/models/recipe/recipe.py
index 76b442ef92a..8bff97107fd 100644
--- a/mealie/db/models/recipe/recipe.py
+++ b/mealie/db/models/recipe/recipe.py
@@ -104,6 +104,7 @@ class RecipeModel(SqlAlchemyBase, BaseMixins):
     rating = sa.Column(sa.Integer)
     org_url = sa.Column(sa.String)
     extras: list[ApiExtras] = orm.relationship("ApiExtras", cascade="all, delete-orphan")
+    is_ocr_recipe = sa.Column(sa.Boolean, default=False)
 
     # Time Stamp Properties
     date_added = sa.Column(sa.Date, default=datetime.date.today)
diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index 114236b4272..6deb2fe7a9d 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -450,6 +450,7 @@ def create_recipe_ocr(
                 name="New OCR Recipe",
                 recipe_ingredient=[RecipeIngredient(note="")],
                 recipe_instructions=[RecipeStep(text="")],
+                is_ocr_recipe=True,
             )
         ).slug
         RecipeController.upload_recipe_asset(self, slug, "Original recipe image", "", extension, file)
diff --git a/mealie/schema/recipe/recipe.py b/mealie/schema/recipe/recipe.py
index 7b0238cc284..48b8b7e1b55 100644
--- a/mealie/schema/recipe/recipe.py
+++ b/mealie/schema/recipe/recipe.py
@@ -145,6 +145,7 @@ class Recipe(RecipeSummary):
     assets: Optional[list[RecipeAsset]] = []
     notes: Optional[list[RecipeNote]] = []
     extras: Optional[dict] = {}
+    is_ocr_recipe: Optional[bool] = False
 
     comments: Optional[list[RecipeCommentOut]] = []
 

From 5758f241dc3e2d2379348e2f69a6c693a64f9e9a Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Fri, 5 Aug 2022 19:39:58 +0200
Subject: [PATCH 32/62] Access to ocr-editor for ocr recipes

---
 ..._add_login_attemps_and_locked_at_field_.py |  2 +-
 .../Domain/Recipe/RecipeActionMenu.vue        | 23 +++++++++++++------
 .../RecipePageParts/RecipePageHeader.vue      | 10 +++++++-
 3 files changed, 26 insertions(+), 9 deletions(-)

diff --git a/alembic/versions/2022-08-12-19.05.59_188374910655_add_login_attemps_and_locked_at_field_.py b/alembic/versions/2022-08-12-19.05.59_188374910655_add_login_attemps_and_locked_at_field_.py
index 9db5b91b1da..68bb29a6cff 100644
--- a/alembic/versions/2022-08-12-19.05.59_188374910655_add_login_attemps_and_locked_at_field_.py
+++ b/alembic/versions/2022-08-12-19.05.59_188374910655_add_login_attemps_and_locked_at_field_.py
@@ -11,7 +11,7 @@
 
 # revision identifiers, used by Alembic.
 revision = "188374910655"
-down_revision = "f30cf048c228"
+down_revision = "089bfa50d0ed"
 branch_labels = None
 depends_on = None
 
diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index 3679832f918..2985d8040aa 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -90,6 +90,7 @@ const SAVE_EVENT = "save";
 const DELETE_EVENT = "delete";
 const CLOSE_EVENT = "close";
 const JSON_EVENT = "json";
+const OCR_EVENT = "ocr";
 
 export default defineComponent({
   components: { RecipeContextMenu, RecipeFavoriteBadge },
@@ -122,8 +123,12 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+    showOcrButton: {
+      type: Boolean,
+      default: false,
+    },
   },
-  setup(_, context) {
+  setup(props, context) {
     const deleteDialog = ref(false);
 
     const { i18n, $globals } = useContext();
@@ -154,22 +159,26 @@ export default defineComponent({
       },
     ];
 
+    if (props.showOcrButton) {
+      editorButtons.splice(2, 0, {
+        text: "OCR editor",
+        icon: $globals.icons.eye,
+        event: OCR_EVENT,
+        color: "accent",
+      });
+    }
+
     function emitHandler(event: string) {
       switch (event) {
         case CLOSE_EVENT:
           context.emit(CLOSE_EVENT);
           context.emit("input", false);
           break;
-        case SAVE_EVENT:
-          context.emit(SAVE_EVENT);
-          break;
-        case JSON_EVENT:
-          context.emit(JSON_EVENT);
-          break;
         case DELETE_EVENT:
           deleteDialog.value = true;
           break;
         default:
+          context.emit(event);
           break;
       }
     }
diff --git a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
index 59ecdb1937b..be489ad193f 100644
--- a/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
+++ b/frontend/components/Domain/Recipe/RecipePage/RecipePageParts/RecipePageHeader.vue
@@ -42,6 +42,7 @@
       :logged-in="$auth.loggedIn"
       :open="isEditMode"
       :recipe-id="recipe.id"
+      :show-ocr-button="recipe.isOcrRecipe"
       class="ml-auto mt-n8 pb-4"
       @close="setMode(PageMode.VIEW)"
       @json="toggleEditMode()"
@@ -49,12 +50,13 @@
       @save="$emit('save')"
       @delete="$emit('delete')"
       @print="printRecipe"
+      @ocr="goToOcrEditor"
     />
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, useContext, computed, ref, watch } from "@nuxtjs/composition-api";
+import { defineComponent, useContext, computed, ref, watch, useRouter } from "@nuxtjs/composition-api";
 import RecipeRating from "~/components/Domain/Recipe/RecipeRating.vue";
 import RecipeActionMenu from "~/components/Domain/Recipe/RecipeActionMenu.vue";
 import RecipeTimeCard from "~/components/Domain/Recipe/RecipeTimeCard.vue";
@@ -82,6 +84,7 @@ export default defineComponent({
     const { recipeImage } = useStaticRoutes();
     const { imageKey, pageMode, editMode, setMode, toggleEditMode, isEditMode } = usePageState(props.recipe.slug);
     const { user } = usePageUser();
+    const router = useRouter();
 
     function printRecipe() {
       window.print();
@@ -98,6 +101,10 @@ export default defineComponent({
       return recipeImage(props.recipe.id, props.recipe.image, imageKey.value);
     });
 
+    function goToOcrEditor() {
+      router.push("/recipe/" + props.recipe.slug + "/ocr-editor");
+    }
+
     watch(
       () => recipeImageUrl.value,
       () => {
@@ -120,6 +127,7 @@ export default defineComponent({
       hideImage,
       isEditMode,
       recipeImageUrl,
+      goToOcrEditor,
     };
   },
 });

From 84deba7b028fd55190cee32bb1e47aa4d972782d Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Fri, 5 Aug 2022 19:42:02 +0200
Subject: [PATCH 33/62] Update Alembic revision

---
 ...17.07.07_089bfa50d0ed_add_is_ocr_recipe_column_to_recipes.py | 2 +-
 .../services_tests/backup_v2_tests/test_alchemy_exporter.py     | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/alembic/versions/2022-08-05-17.07.07_089bfa50d0ed_add_is_ocr_recipe_column_to_recipes.py b/alembic/versions/2022-08-05-17.07.07_089bfa50d0ed_add_is_ocr_recipe_column_to_recipes.py
index 286134357ee..0f5af03429c 100644
--- a/alembic/versions/2022-08-05-17.07.07_089bfa50d0ed_add_is_ocr_recipe_column_to_recipes.py
+++ b/alembic/versions/2022-08-05-17.07.07_089bfa50d0ed_add_is_ocr_recipe_column_to_recipes.py
@@ -11,7 +11,7 @@
 
 # revision identifiers, used by Alembic.
 revision = "089bfa50d0ed"
-down_revision = "f30cf048c228"
+down_revision = "188374910655"
 branch_labels = None
 depends_on = None
 
diff --git a/tests/unit_tests/services_tests/backup_v2_tests/test_alchemy_exporter.py b/tests/unit_tests/services_tests/backup_v2_tests/test_alchemy_exporter.py
index 5fbbb6e5c94..62804a91427 100644
--- a/tests/unit_tests/services_tests/backup_v2_tests/test_alchemy_exporter.py
+++ b/tests/unit_tests/services_tests/backup_v2_tests/test_alchemy_exporter.py
@@ -4,7 +4,7 @@
 from mealie.services.backups_v2.alchemy_exporter import AlchemyExporter
 
 ALEMBIC_VERSIONS = [
-    {"version_num": "188374910655"},
+    {"version_num": "089bfa50d0ed"},
 ]
 
 

From 9ecd20cc7bf2b61ab391b001b8512ed818d7c8bb Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 6 Aug 2022 18:34:45 +0200
Subject: [PATCH 34/62] Make the frontend build

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 13 +++++++------
 1 file changed, 7 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 290a32c6871..c7e09d87baa 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -555,7 +555,7 @@ export default defineComponent({
     }
 
     function switchCanvasMode(mode: CanvasModes) {
-      if (state.canvasRect === null) return;
+      if (state.canvasRect === null || state.canvas === null) return;
       state.canvasMode = mode;
       if (mode === "panAndZoom") {
         state.canvas.style.cursor = "pointer";
@@ -571,7 +571,7 @@ export default defineComponent({
     }
 
     function draw() {
-      if (state.canvasRect === null) return;
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
       if (state.mouse.down) {
         state.ctx.imageSmoothingEnabled = false;
         state.ctx.fillStyle = "rgb(255, 255, 255)";
@@ -604,7 +604,7 @@ export default defineComponent({
     }
 
     function handleMouseDown(event: MouseEvent) {
-      if (state.canvasRect === null) return;
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
       state.mouse.down = true;
       state.mouse.current = {
         x: event.clientX - state.canvasRect.left,
@@ -619,7 +619,6 @@ export default defineComponent({
             setPropertyValueByPath<Recipe>(recipe.value, state.selectedRecipeField, state.selectedText);
           }
         } else {
-
           state.ctx.fillStyle = "rgb(255, 255, 255)";
           state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
           drawImage(state.ctx);
@@ -643,7 +642,7 @@ export default defineComponent({
     }
 
     function keepImageInCanvas() {
-      if (state.canvasRect === null) return;
+      if (state.canvasRect === null || state.canvas === null) return;
 
       // Prevent image from being smaller than the canvas width
       if (state.imagePosition.dWidth - state.canvas.width < 0) {
@@ -677,7 +676,7 @@ export default defineComponent({
     }
 
     function handleMouseMove(event: MouseEvent) {
-      if (state.canvasRect === null) return;
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
       state.mouse.current = {
         x: event.clientX - state.canvasRect.left,
         y: event.clientY - state.canvasRect.top,
@@ -714,6 +713,8 @@ export default defineComponent({
 
     function handleMouseScroll(event: WheelEvent) {
       if (state.isImageSmallerThanCanvas) return;
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+
       if (state.canvasMode === "panAndZoom") {
         event.preventDefault();
 

From ca5807954b45c06990ecc05ec97fe6993dbd50b6 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sun, 7 Aug 2022 09:13:43 +0200
Subject: [PATCH 35/62] Fix scrolling offset bug

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 30 ++++++++++++----------
 1 file changed, 17 insertions(+), 13 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index c7e09d87baa..f3add1f2a92 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -603,13 +603,21 @@ export default defineComponent({
       state.selectedText = "";
     }
 
-    function handleMouseDown(event: MouseEvent) {
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-      state.mouse.down = true;
+    function updateMousePos<T extends MouseEvent>(event: T) {
+      if (state.canvas === null) return;
+      state.canvasRect = state.canvas.getBoundingClientRect();
       state.mouse.current = {
         x: event.clientX - state.canvasRect.left,
         y: event.clientY - state.canvasRect.top,
       };
+    }
+
+    function handleMouseDown(event: MouseEvent) {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+      state.mouse.down = true;
+
+      updateMousePos(event);
+
       if (state.canvasMode === "selection") {
         if (isMouseInRect(state.mouse, state.rect)) {
           // Update the right field in the recipe
@@ -677,10 +685,8 @@ export default defineComponent({
 
     function handleMouseMove(event: MouseEvent) {
       if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-      state.mouse.current = {
-        x: event.clientX - state.canvasRect.left,
-        y: event.clientY - state.canvasRect.top,
-      };
+
+      updateMousePos(event);
 
       if (state.mouse.down) {
         if (state.canvasMode === "selection") {
@@ -718,10 +724,8 @@ export default defineComponent({
       if (state.canvasMode === "panAndZoom") {
         event.preventDefault();
 
-        state.mouse.current = {
-          x: event.clientX - state.canvasRect.left,
-          y: event.clientY - state.canvasRect.top,
-        };
+        updateMousePos(event);
+
         const m = Math.sign(event.deltaY);
 
         const ndx = state.imagePosition.dx + m * state.imagePosition.dWidth * scrollSensitivity;
@@ -844,9 +848,9 @@ export default defineComponent({
     }
 
     // Leaves<RecipeStep[]> will return some function types making eslint very unhappy
-    type RecipeStepsLeaves = `${number}.${Leaves<RecipeStep>}`
+    type RecipeStepsLeaves = `${number}.${Leaves<RecipeStep>}`;
 
-    function setSingleStep(path: RecipeStepsLeaves ) {
+    function setSingleStep(path: RecipeStepsLeaves) {
       state.selectedRecipeField = `recipeInstructions.${path}` as SelectedRecipeLeaves;
     }
 

From 9e70552a607ba9cd47d4b3967cd55051e9dea9b7 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 8 Aug 2022 08:16:56 +0200
Subject: [PATCH 36/62] Allow creation of recipes with custom settings

---
 mealie/routes/recipe/recipe_crud_routes.py | 10 +++++-----
 mealie/schema/recipe/recipe.py             |  2 +-
 mealie/services/recipe/recipe_service.py   | 20 ++++++++++++--------
 3 files changed, 18 insertions(+), 14 deletions(-)

diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index 6deb2fe7a9d..79bee65ba20 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -35,6 +35,7 @@
 from mealie.schema.recipe.recipe_asset import RecipeAsset
 from mealie.schema.recipe.recipe_ingredient import RecipeIngredient
 from mealie.schema.recipe.recipe_scraper import ScrapeRecipeTest
+from mealie.schema.recipe.recipe_settings import RecipeSettings
 from mealie.schema.recipe.recipe_step import RecipeStep
 from mealie.schema.recipe.request_helpers import RecipeZipTokenResponse, UpdateImageResponse
 from mealie.schema.response.responses import ErrorResponse
@@ -448,17 +449,16 @@ def create_recipe_ocr(
         slug = self.service.create_one(
             Recipe(
                 name="New OCR Recipe",
-                recipe_ingredient=[RecipeIngredient(note="")],
+                recipe_ingredient=[RecipeIngredient(note="", title=None, unit=None, food=None, original_text=None)],
                 recipe_instructions=[RecipeStep(text="")],
                 is_ocr_recipe=True,
+                settings=RecipeSettings(show_assets=True),
             )
         ).slug
         RecipeController.upload_recipe_asset(self, slug, "Original recipe image", "", extension, file)
         if makefilerecipeimage:
-            file.file.seek(0)  # Get the pointer to the beginning of the file to read it once more
+            # Get the pointer to the beginning of the file to read it once more
+            file.file.seek(0)
             self.update_recipe_image(slug, file.file, extension)
-        recipe = self.mixins.get_one(slug)
-        recipe.settings.show_assets = True
-        self.mixins.update_one(recipe, slug)
 
         return slug
diff --git a/mealie/schema/recipe/recipe.py b/mealie/schema/recipe/recipe.py
index 48b8b7e1b55..7d1f79e75cf 100644
--- a/mealie/schema/recipe/recipe.py
+++ b/mealie/schema/recipe/recipe.py
@@ -141,7 +141,7 @@ class Recipe(RecipeSummary):
     nutrition: Optional[Nutrition]
 
     # Mealie Specific
-    settings: Optional[RecipeSettings] = RecipeSettings()
+    settings: Optional[RecipeSettings] = None
     assets: Optional[list[RecipeAsset]] = []
     notes: Optional[list[RecipeNote]] = []
     extras: Optional[dict] = {}
diff --git a/mealie/services/recipe/recipe_service.py b/mealie/services/recipe/recipe_service.py
index b40d848fd5a..7234f742d6d 100644
--- a/mealie/services/recipe/recipe_service.py
+++ b/mealie/services/recipe/recipe_service.py
@@ -111,14 +111,18 @@ def create_one(self, create_data: Union[Recipe, CreateRecipe]) -> Recipe:
             additional_attrs=create_data.dict(),
         )
 
-        data.settings = RecipeSettings(
-            public=self.group.preferences.recipe_public,
-            show_nutrition=self.group.preferences.recipe_show_nutrition,
-            show_assets=self.group.preferences.recipe_show_assets,
-            landscape_view=self.group.preferences.recipe_landscape_view,
-            disable_comments=self.group.preferences.recipe_disable_comments,
-            disable_amount=self.group.preferences.recipe_disable_amount,
-        )
+        if isinstance(create_data, CreateRecipe) or create_data.settings is None:
+            if self.group.preferences is not None:
+                data.settings = RecipeSettings(
+                    public=self.group.preferences.recipe_public,
+                    show_nutrition=self.group.preferences.recipe_show_nutrition,
+                    show_assets=self.group.preferences.recipe_show_assets,
+                    landscape_view=self.group.preferences.recipe_landscape_view,
+                    disable_comments=self.group.preferences.recipe_disable_comments,
+                    disable_amount=self.group.preferences.recipe_disable_amount,
+                )
+            else:
+                data.settings = RecipeSettings()
 
         return self.repos.recipes.create(data)
 

From 95e330f3dbaa61660d832f17a0fca235c18e939e Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 8 Aug 2022 08:41:33 +0200
Subject: [PATCH 37/62] Fix rebasing mistakes

---
 poetry.lock | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/poetry.lock b/poetry.lock
index 160ce22ff60..ac8198932ba 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -1083,6 +1083,7 @@ category = "dev"
 optional = false
 python-versions = ">=3.7"
 
+[[package]]
 name = "pytesseract"
 version = "0.3.9"
 description = "Python-tesseract is a python wrapper for Google's Tesseract-OCR"
@@ -2319,6 +2320,7 @@ pyrsistent = [
     {file = "pyrsistent-0.18.1-cp39-cp39-win32.whl", hash = "sha256:1b34eedd6812bf4d33814fca1b66005805d3640ce53140ab8bbb1e2651b0d9bc"},
     {file = "pyrsistent-0.18.1-cp39-cp39-win_amd64.whl", hash = "sha256:e24a828f57e0c337c8d8bb9f6b12f09dfdf0273da25fda9e314f0b684b415a07"},
     {file = "pyrsistent-0.18.1.tar.gz", hash = "sha256:d4d61f8b993a7255ba714df3aca52700f8125289f84f704cf80916517c46eb96"},
+]
 pytesseract = [
     {file = "pytesseract-0.3.9-py2.py3-none-any.whl", hash = "sha256:fecda37d1e4eaf744c657cd03a5daab4eb97c61506ac5550274322c8ae32eca2"},
     {file = "pytesseract-0.3.9.tar.gz", hash = "sha256:7e2bafc7f48d1bb71443ce4633a56f5e21925a98f220a36c336297edcd1956d0"},

From 133d663ba657c89f6519946c20f8b2472e87bf8f Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 8 Aug 2022 17:01:12 +0200
Subject: [PATCH 38/62] Add format_tsv_output test

---
 .../services_tests/test_ocr_service.py        | 39 +++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/tests/unit_tests/services_tests/test_ocr_service.py b/tests/unit_tests/services_tests/test_ocr_service.py
index 6666ed88588..c0d2cb320f1 100644
--- a/tests/unit_tests/services_tests/test_ocr_service.py
+++ b/tests/unit_tests/services_tests/test_ocr_service.py
@@ -1,10 +1,13 @@
 from pathlib import Path
 
+import pytest
+
 from mealie.services.ocr.pytesseract import OcrService
 
 ocr_service = OcrService()
 
 
+@pytest.mark.skip("Tesseract is not reliable between environments")
 def test_image_to_string():
     with open(Path("tests/data/images/test-ocr.png"), "rb") as image:
         result = ocr_service.image_to_string(image)
@@ -12,8 +15,44 @@ def test_image_to_string():
             assert result == expected_result.read()
 
 
+@pytest.mark.skip("Tesseract is not reliable between environments")
 def test_image_to_tsv():
     with open(Path("tests/data/images/test-ocr.png"), "rb") as image:
         result = ocr_service.image_to_tsv(image.read())
         with open(Path("tests/data/text/test-ocr.tsv"), "r", encoding="utf-8") as expected_result:
             assert result == expected_result.read()
+
+
+def test_format_tsv_output():
+    tsv = " level\tpage_num\tblock_num\tpar_num\tline_num\tword_num\tleft\ttop\twidth\theight\tconf\ttext \n1\t1\t0\t0\t0\t0\t0\t0\t640\t480\t-1\t\n5\t1\t1\t1\t1\t1\t36\t92\t60\t24\t87.137558\tThis"
+    expected_result = [
+        {
+            "level": 1,
+            "page_num": 1,
+            "block_num": 0,
+            "par_num": 0,
+            "line_num": 0,
+            "word_num": 0,
+            "left": 0,
+            "top": 0,
+            "width": 640,
+            "height": 480,
+            "conf": -1.0,
+            "text": "",
+        },
+        {
+            "level": 5,
+            "page_num": 1,
+            "block_num": 1,
+            "par_num": 1,
+            "line_num": 1,
+            "word_num": 1,
+            "left": 36,
+            "top": 92,
+            "width": 60,
+            "height": 24,
+            "conf": 87.137558,
+            "text": "This",
+        },
+    ]
+    assert ocr_service.format_tsv_output(tsv) == expected_result

From 63599627d30f7227cc7f94afaec2b2955d730af6 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Tue, 9 Aug 2022 08:17:02 +0200
Subject: [PATCH 39/62] Exclude the tests data directory only

---
 .pre-commit-config.yaml | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.pre-commit-config.yaml b/.pre-commit-config.yaml
index a3d5786a581..721b4c7e406 100644
--- a/.pre-commit-config.yaml
+++ b/.pre-commit-config.yaml
@@ -9,7 +9,7 @@ repos:
       - id: check-toml
       - id: end-of-file-fixer
       - id: trailing-whitespace
-        exclude: ^tests/
+        exclude: ^tests/data/
   - repo: https://github.com/sondrelg/pep585-upgrade
     rev: "v1.0.1" # Use the sha / tag you want to point at
     hooks:

From 78eb0802279f42773555fc0774912ac135ad0568 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Tue, 9 Aug 2022 08:27:09 +0200
Subject: [PATCH 40/62] Enforce camelCase for frontend functions

---
 frontend/api/class-interfaces/ocr.ts       | 6 +++---
 frontend/pages/recipe/_slug/ocr-editor.vue | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/frontend/api/class-interfaces/ocr.ts b/frontend/api/class-interfaces/ocr.ts
index cde31b7125e..1779fca4ff9 100644
--- a/frontend/api/class-interfaces/ocr.ts
+++ b/frontend/api/class-interfaces/ocr.ts
@@ -5,14 +5,14 @@ const prefix = "/api";
 export class OcrAPI extends BaseAPI {
 
   // Currently unused in favor for the endpoint using asset names
-  async file_to_tsv(file: File) {
+  async fileToTsv(file: File) {
     const formData = new FormData();
     formData.append("file", file);
     return await this.requests.post(`${prefix}/ocr/file-to-tsv`, formData);
   }
 
-  async asset_to_tsv(recipeSlug: string, assetName: string) {
-    return await this.requests.post(`${prefix}/ocr/asset-to-tsv`, {recipeSlug, assetName});
+  async assetToTsv(recipeSlug: string, assetName: string) {
+    return await this.requests.post(`${prefix}/ocr/asset-to-tsv`, { recipeSlug, assetName });
   }
 
 }
diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index f3add1f2a92..d0c9b5e32d1 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -508,7 +508,7 @@ export default defineComponent({
         const imagesrc = assetURL(assetName);
         image.src = imagesrc;
 
-        const res = await api.ocr.asset_to_tsv(recipe.value.slug, assetName);
+        const res = await api.ocr.assetToTsv(recipe.value.slug, assetName);
         tsv.value = res.data as OcrTsvResponse[];
         state.loading = false;
 

From 2dd298924ae0caaee817941d3b8045a7b36b0879 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Tue, 9 Aug 2022 08:43:03 +0200
Subject: [PATCH 41/62] Remove import of unused component

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 2 --
 1 file changed, 2 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index d0c9b5e32d1..7443cef7c9c 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -303,7 +303,6 @@ import BannerExperimental from "~/components/global/BannerExperimental.vue";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
 import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
-import RecipeActionMenu from "~/components/Domain/Recipe/RecipeContextMenu.vue";
 import { uuid4 } from "~/composables/use-utils";
 
 type CanvasRect = {
@@ -373,7 +372,6 @@ export default defineComponent({
     BannerExperimental,
     RecipeDialogBulkAdd,
     RecipeInstructions,
-    RecipeActionMenu,
   },
   setup() {
     const route = useRoute();

From c260dbf61dbe2b8c17ca81edfcadc290916722b6 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 13 Aug 2022 09:40:21 +0200
Subject: [PATCH 42/62] Fix type and class initialization

---
 mealie/routes/recipe/recipe_crud_routes.py | 12 +++++++++++-
 1 file changed, 11 insertions(+), 1 deletion(-)

diff --git a/mealie/routes/recipe/recipe_crud_routes.py b/mealie/routes/recipe/recipe_crud_routes.py
index 79bee65ba20..9e0f70ef5f1 100644
--- a/mealie/routes/recipe/recipe_crud_routes.py
+++ b/mealie/routes/recipe/recipe_crud_routes.py
@@ -453,12 +453,22 @@ def create_recipe_ocr(
                 recipe_instructions=[RecipeStep(text="")],
                 is_ocr_recipe=True,
                 settings=RecipeSettings(show_assets=True),
+                id=None,
+                image=None,
+                recipe_yield=None,
+                rating=None,
+                orgURL=None,
+                date_added=None,
+                date_updated=None,
+                created_at=None,
+                update_at=None,
+                nutrition=None,
             )
         ).slug
         RecipeController.upload_recipe_asset(self, slug, "Original recipe image", "", extension, file)
         if makefilerecipeimage:
             # Get the pointer to the beginning of the file to read it once more
             file.file.seek(0)
-            self.update_recipe_image(slug, file.file, extension)
+            self.update_recipe_image(slug, file.file.read(), extension)
 
         return slug

From b38ae669f6fe1234f8b601951055a365d0a2ed6a Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 13 Aug 2022 19:02:51 +0200
Subject: [PATCH 43/62] Add multi-language support

---
 .../Domain/Recipe/RecipeActionMenu.vue        |  2 +-
 frontend/lang/messages/en-US.json             | 30 +++++++++++++
 frontend/pages/recipe/_slug/ocr-editor.vue    | 45 +++++++++----------
 3 files changed, 52 insertions(+), 25 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeActionMenu.vue b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
index 2985d8040aa..9e275f1348e 100644
--- a/frontend/components/Domain/Recipe/RecipeActionMenu.vue
+++ b/frontend/components/Domain/Recipe/RecipeActionMenu.vue
@@ -161,7 +161,7 @@ export default defineComponent({
 
     if (props.showOcrButton) {
       editorButtons.splice(2, 0, {
-        text: "OCR editor",
+        text: i18n.t("ocr-editor.ocr-editor"),
         icon: $globals.icons.eye,
         event: OCR_EVENT,
         color: "accent",
diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 44fbabb080d..35f83915b64 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -661,5 +661,35 @@
     "info_message_with_version": "This is a Demo for version: {version}",
     "demo_username": "Username: {username}",
     "demo_password": "Password: {password}"
+  },
+  "ocr-editor": {
+    "ocr-editor": "Ocr editor",
+    "selection-mode": "Selection mode",
+    "pan-and-zoom-picture": "Pan and zoom picture",
+    "split-text": "Split text",
+    "preserve-line-breaks": "Preserve original line breaks",
+    "split-by-block": "Split by text block",
+    "flatten": "Flatten regardless of original formating",
+    "help": "Click here for help on how to use this feature!",
+    "help-dialog": {
+      "selection-mode": "Selection Mode (default)",
+      "selection-mode-desc": "The selection mode is the main mode that can be used to enter data:",
+      "selection-mode-steps": {
+        "draw": "Draw a rectangle on the text you want to select.",
+        "click": "Click on any field on the right and then click back on the rectangle above the image.",
+        "result": "The selected text will appear inside the previously selected field."
+      },
+      "pan-and-zoom-mode": "Pan and Zoom Mode",
+      "pan-and-zoom-desc": "Select pan and zoom by clicking the icon. This mode allows to zoom inside the image and move around to make using big images easier.",
+      "split-text-mode": "Split Text modes",
+      "split-modes": {
+        "line-mode": "Line mode (default)",
+        "line-mode-desc": "In line mode, the text will be propagated by keeping the original line breaks. This mode is useful when using bulk add on a list of ingredients where one ingredient is one line.",
+        "block-mode": "Block mode",
+        "block-mode-desc": "In block mode, the text will be split in blocks. This mode is useful when bulk adding instructions that are usually written in paragraphs.",
+        "flat-mode": "Flat mode",
+        "flat-mode-desc": "In flat mode, the text will be added to the selected recipe field with no line breaks."
+      }
+    }
   }
 }
diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 7443cef7c9c..98500b09cf7 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -25,7 +25,7 @@
                   </v-icon>
                 </v-btn>
               </template>
-              <span>Selection mode</span>
+              <span>{{ $t("ocr-editor.selection-mode") }}</span>
             </v-tooltip>
             <v-tooltip v-if="!isImageSmallerThanCanvas" bottom>
               <template #activator="{ on, attrs }">
@@ -40,10 +40,10 @@
                   </v-icon>
                 </v-btn>
               </template>
-              <span>Pan and zoom picture</span>
+              <span>{{ $t("ocr-editor.pan-and-zoom-picture") }}</span>
             </v-tooltip>
             <v-divider vertical class="mx-2" />
-            <v-toolbar-title>Split text </v-toolbar-title>
+            <v-toolbar-title>{{ $t("ocr-editor.split-text") }}</v-toolbar-title>
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
                 <v-btn icon>
@@ -57,7 +57,7 @@
                   </v-icon>
                 </v-btn>
               </template>
-              <span>Preserve original line breaks</span>
+              <span>{{ $t("ocr-editor.preserve-line-breaks") }}</span>
             </v-tooltip>
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
@@ -72,7 +72,7 @@
                   </v-icon>
                 </v-btn>
               </template>
-              <span>Split by text block</span>
+              <span>{{ $t("ocr-editor.split-by-block") }}</span>
             </v-tooltip>
             <v-tooltip bottom>
               <template #activator="{ on, attrs }">
@@ -87,7 +87,7 @@
                   </v-icon>
                 </v-btn>
               </template>
-              <span>Flatten regardless of original formating</span>
+              <span>{{ $t("ocr-editor.flatten") }}</span>
             </v-tooltip>
 
             <v-spacer></v-spacer>
@@ -103,7 +103,7 @@
                   <v-icon v-bind="attrs" v-on="on" @click="showHelp = !showHelp"> {{ $globals.icons.help }} </v-icon>
                 </v-btn>
               </template>
-              <span>Click here for help on how to use this feature!</span>
+              <span>{{ $t("ocr-editor.help") }}</span>
             </v-tooltip>
           </v-toolbar>
           <canvas
@@ -241,39 +241,36 @@
           <h1>Mouse modes</h1>
           <v-divider class="mb-2 mt-1" />
           <h2 class="my-2">
-            <v-icon> {{ $globals.icons.selectMode }} </v-icon>Selection Mode (default)
+            <v-icon> {{ $globals.icons.selectMode }} </v-icon>{{ $t("ocr-editor.help-dialog.selection-mode") }}
           </h2>
-          <p class="my-1">The selection mode is the main mode that can be used to enter data:</p>
+          <p class="my-1">{{ $t("ocr-editor.help-dialog.selection-mode") }}</p>
           <ol>
-            <li>Draw a rectangle on the text you want to select.</li>
-            <li>Click on any field on the right and then click back on the rectangle above the image.</li>
-            <li>The selected text will appear inside the previously selected field.</li>
+            <li>{{  $t("ocr-editor.help-dialog.selection-mode-steps.draw") }}</li>
+            <li>{{  $t("ocr-editor.help-dialog.selection-mode-steps.click") }}</li>
+            <li>{{  $t("ocr-editor.help-dialog.selection-mode-steps.result") }}</li>
           </ol>
           <h2 class="my-2">
-            <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>Pan and Zoom Mode
+            <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>{{ $t("ocr-editor.help-dialog.pan-and-zoom-mode") }}
           </h2>
-          Select pan and zoom by clicking the icon. This mode allows to zoom inside the image and move around to make
-          using big images easier.
-          <h1 class="mt-5">Split Text modes</h1>
+{{ $t("ocr-editor.help-dialog.pan-and-zoom-desc") }}
+          <h1 class="mt-5">{{ $t("ocr-editor.help-dialog.split-text-mode") }}</h1>
           <v-divider class="mb-2 mt-1" />
           <h2 class="my-2">
-            <v-icon> {{ $globals.icons.preserveLines }} </v-icon> Line mode (default)
+            <v-icon> {{ $globals.icons.preserveLines }} </v-icon>{{ $t("ocr-editor.help-dialog.split-modes.line-mode") }}
           </h2>
           <p>
-            In line mode, the text will be propagated by keeping the original line breaks. This mode is useful when
-            using bulk add on a list of ingredients where one ingredient is one line.
+{{ $t("ocr-editor.help-dialog.split-modes.line-mode-desc") }}
           </p>
           <h2 class="my-2">
-            <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon> Block mode
+            <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon> {{ $t("ocr-editor.help-dialog.split-modes.block-mode") }}
           </h2>
           <p>
-            In block mode, the text will be split in blocks. This mode is useful when bulk adding instructions that are
-            usually written in paragraphs.
+{{ $t("ocr-editor.help-dialog.split-modes.block-mode-desc") }}
           </p>
           <h2 class="my-2">
-            <v-icon> {{ $globals.icons.flatten }} </v-icon> Flat mode
+            <v-icon> {{ $globals.icons.flatten }} </v-icon> {{ $t("ocr-editor.help-dialog.split-modes.flat-mode") }}
           </h2>
-          <p>In flat mode, the text will be added to the selected recipe field with no line breaks.</p>
+          <p>{{ $t("ocr-editor.help-dialog.split-modes.flat-mode-desc") }}</p>
         </v-card-text>
       </v-card>
     </v-dialog>

From 17cad036fa230c20af49293ff72486bb40ae818d Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Fri, 19 Aug 2022 22:10:12 +0200
Subject: [PATCH 44/62] Highlight words in mount

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 49 ++++++++++++++++++----
 1 file changed, 41 insertions(+), 8 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 98500b09cf7..71e03fc85bb 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -245,27 +245,29 @@
           </h2>
           <p class="my-1">{{ $t("ocr-editor.help-dialog.selection-mode") }}</p>
           <ol>
-            <li>{{  $t("ocr-editor.help-dialog.selection-mode-steps.draw") }}</li>
-            <li>{{  $t("ocr-editor.help-dialog.selection-mode-steps.click") }}</li>
-            <li>{{  $t("ocr-editor.help-dialog.selection-mode-steps.result") }}</li>
+            <li>{{ $t("ocr-editor.help-dialog.selection-mode-steps.draw") }}</li>
+            <li>{{ $t("ocr-editor.help-dialog.selection-mode-steps.click") }}</li>
+            <li>{{ $t("ocr-editor.help-dialog.selection-mode-steps.result") }}</li>
           </ol>
           <h2 class="my-2">
             <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>{{ $t("ocr-editor.help-dialog.pan-and-zoom-mode") }}
           </h2>
-{{ $t("ocr-editor.help-dialog.pan-and-zoom-desc") }}
+          {{ $t("ocr-editor.help-dialog.pan-and-zoom-desc") }}
           <h1 class="mt-5">{{ $t("ocr-editor.help-dialog.split-text-mode") }}</h1>
           <v-divider class="mb-2 mt-1" />
           <h2 class="my-2">
-            <v-icon> {{ $globals.icons.preserveLines }} </v-icon>{{ $t("ocr-editor.help-dialog.split-modes.line-mode") }}
+            <v-icon> {{ $globals.icons.preserveLines }} </v-icon
+            >{{ $t("ocr-editor.help-dialog.split-modes.line-mode") }}
           </h2>
           <p>
-{{ $t("ocr-editor.help-dialog.split-modes.line-mode-desc") }}
+            {{ $t("ocr-editor.help-dialog.split-modes.line-mode-desc") }}
           </p>
           <h2 class="my-2">
-            <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon> {{ $t("ocr-editor.help-dialog.split-modes.block-mode") }}
+            <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon>
+            {{ $t("ocr-editor.help-dialog.split-modes.block-mode") }}
           </h2>
           <p>
-{{ $t("ocr-editor.help-dialog.split-modes.block-mode-desc") }}
+            {{ $t("ocr-editor.help-dialog.split-modes.block-mode-desc") }}
           </p>
           <h2 class="my-2">
             <v-icon> {{ $globals.icons.flatten }} </v-icon> {{ $t("ocr-editor.help-dialog.split-modes.flat-mode") }}
@@ -531,6 +533,7 @@ export default defineComponent({
           state.imagePosition.dWidth = state.canvas.width;
           state.imagePosition.dHeight = image.height * state.imagePosition.scale;
           drawImage(state.ctx);
+          drawWordBoxesOnCanvas(tsv.value);
         });
       });
     });
@@ -716,6 +719,19 @@ export default defineComponent({
       if (state.isImageSmallerThanCanvas) return;
       if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
 
+      if (state.canvasMode === "selection") {
+        event.preventDefault();
+        updateMousePos(event);
+        const m = Math.sign(event.deltaY);
+        state.imagePosition.dy = state.imagePosition.dy + m * state.imagePosition.dHeight * scrollSensitivity;
+        keepImageInCanvas();
+        updateImageScale();
+
+        state.ctx.fillStyle = "rgb(255, 255, 255)";
+        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        drawImage(state.ctx);
+      }
+
       if (state.canvasMode === "panAndZoom") {
         event.preventDefault();
 
@@ -757,6 +773,23 @@ export default defineComponent({
       return rect;
     }
 
+    function drawWordBoxesOnCanvas(tsv: OcrTsvResponse[]) {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+
+      state.ctx.fillStyle = "rgb(255, 255, 255, 0.3)";
+      tsv
+        .filter((element) => element.level === 5)
+        .forEach((element) => {
+          if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+          state.ctx.fillRect(
+            element.left * state.imagePosition.scale,
+            element.top * state.imagePosition.scale,
+            element.width * state.imagePosition.scale,
+            element.height * state.imagePosition.scale
+          );
+        });
+    }
+
     function getWordsInSelection(tsv: OcrTsvResponse[], rect: CanvasRect) {
       const correctedRect = correctRectCoordinates(rect);
 

From 3731746a0d5d93fd68aebd36556e172814803f85 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 20 Aug 2022 10:45:01 +0200
Subject: [PATCH 45/62] Fix image ratio bug

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 71e03fc85bb..f5323b8b8c3 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -451,6 +451,9 @@ export default defineComponent({
     function updateImageScale() {
       state.imagePosition.scale = state.imagePosition.dWidth / image.width;
 
+      // force the original ratio to be respected
+      state.imagePosition.dHeight = image.height * state.imagePosition.scale;
+
       // Don't let images bigger than the canvas be zoomed in more than 1:1 scale
       // Meaning only let images smaller than the canvas to have a scale > 1
       if (!state.isImageSmallerThanCanvas && state.imagePosition.scale > 1) {
@@ -531,7 +534,6 @@ export default defineComponent({
           state.imagePosition.sWidth = image.width;
           state.imagePosition.sHeight = image.height;
           state.imagePosition.dWidth = state.canvas.width;
-          state.imagePosition.dHeight = image.height * state.imagePosition.scale;
           drawImage(state.ctx);
           drawWordBoxesOnCanvas(tsv.value);
         });

From fc7221cbe9921872e91d4311d7acc1d2d4a30936 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 3 Sep 2022 09:45:46 +0200
Subject: [PATCH 46/62] Better ocr creation page

---
 frontend/pages/recipe/create/ocr.vue | 30 ++++++++++++++++++++++++----
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/frontend/pages/recipe/create/ocr.vue b/frontend/pages/recipe/create/ocr.vue
index d9b0991f465..d00bda2ce4c 100644
--- a/frontend/pages/recipe/create/ocr.vue
+++ b/frontend/pages/recipe/create/ocr.vue
@@ -5,11 +5,29 @@
       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">
-      <AppButtonUpload :post="false" file-name="file" :text-btn="false" accept="image/*" @uploaded="createByOcr" />
+      <div style="width: 250px">
+        <BaseButton :disabled="imageUpload === null" large rounded block :loading="loading" @click="createByOcr" />
+      </div>
     </v-card-actions>
   </div>
 </template>
@@ -30,6 +48,8 @@ export default defineComponent({
     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;
@@ -41,9 +61,10 @@ export default defineComponent({
 
     const domCreateByOcr = ref<VForm | null>(null);
 
-    async function createByOcr(file: File) {
-      console.log("file: ", file);
-      const { response } = await api.recipes.createFromOcr(file, state.makeFileRecipeImage);
+    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);
     }
@@ -53,6 +74,7 @@ export default defineComponent({
       createByOcr,
       ...toRefs(state),
       validators,
+      imageUpload,
     };
   },
 });

From 35f404905cb84a4a1a0e5dc0e1c41613c91bcd69 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 3 Sep 2022 09:49:00 +0200
Subject: [PATCH 47/62] Revert awkward feature to scroll in Selection mode

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index f5323b8b8c3..0a3aa28c1c9 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -721,19 +721,6 @@ export default defineComponent({
       if (state.isImageSmallerThanCanvas) return;
       if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
 
-      if (state.canvasMode === "selection") {
-        event.preventDefault();
-        updateMousePos(event);
-        const m = Math.sign(event.deltaY);
-        state.imagePosition.dy = state.imagePosition.dy + m * state.imagePosition.dHeight * scrollSensitivity;
-        keepImageInCanvas();
-        updateImageScale();
-
-        state.ctx.fillStyle = "rgb(255, 255, 255)";
-        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
-        drawImage(state.ctx);
-      }
-
       if (state.canvasMode === "panAndZoom") {
         event.preventDefault();
 

From 965c85c8109cd422a2b6911eaa697e4c6fc5c2c3 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 3 Sep 2022 18:30:02 +0200
Subject: [PATCH 48/62] Rebasing alembic migrations sux

---
 ...05.59_188374910655_add_login_attemps_and_locked_at_field_.py | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/alembic/versions/2022-08-12-19.05.59_188374910655_add_login_attemps_and_locked_at_field_.py b/alembic/versions/2022-08-12-19.05.59_188374910655_add_login_attemps_and_locked_at_field_.py
index 68bb29a6cff..9db5b91b1da 100644
--- a/alembic/versions/2022-08-12-19.05.59_188374910655_add_login_attemps_and_locked_at_field_.py
+++ b/alembic/versions/2022-08-12-19.05.59_188374910655_add_login_attemps_and_locked_at_field_.py
@@ -11,7 +11,7 @@
 
 # revision identifiers, used by Alembic.
 revision = "188374910655"
-down_revision = "089bfa50d0ed"
+down_revision = "f30cf048c228"
 branch_labels = None
 depends_on = None
 

From e7f15efdec41aa4a797a9d57ede78f585b686a36 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 3 Sep 2022 18:39:12 +0200
Subject: [PATCH 49/62] Remove obsolete getShared function

---
 frontend/api/class-interfaces/recipes/recipe.ts | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/frontend/api/class-interfaces/recipes/recipe.ts b/frontend/api/class-interfaces/recipes/recipe.ts
index a4e8a554bb3..9cbb97709d7 100644
--- a/frontend/api/class-interfaces/recipes/recipe.ts
+++ b/frontend/api/class-interfaces/recipes/recipe.ts
@@ -118,10 +118,6 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     return `${routes.recipesRecipeSlugExportZip(recipeSlug)}?token=${token}`;
   }
 
-  async getShared(item_id: string) {
-    return await this.requests.get<Recipe>(routes.recipeShareToken(item_id));
-  }
-
   async createFromOcr(file: File, makeFileRecipeImage: boolean) {
     const formData = new FormData();
     formData.append("file", file);

From 7941a76bb56d23043bd664936a60b7901861f6e3 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sun, 11 Sep 2022 21:29:14 +0200
Subject: [PATCH 50/62] Add function docstring

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 20 ++++++++++++++++++--
 1 file changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 0a3aa28c1c9..9936dc61885 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -461,9 +461,12 @@ export default defineComponent({
       }
     }
 
+    /**
+    * This function will find the title of a recipe with the assumption that the title
+    * has the biggest ratio of surface area / number of words on the image.
+    * @return Returns the text parts of the block with the highest score.
+    */
     function findRecipeTitle() {
-      // This function will find the title of a recipe with the assumption that the title has the biggest ratio of surface area on number of words on the image
-
       const filtered = tsv.value.filter((element) => element.level === 2 || element.level === 5);
       const blocks = [[]] as OcrTsvResponse[][];
       let blockNum = 1;
@@ -749,6 +752,11 @@ export default defineComponent({
       }
     }
 
+    /**
+    * Returns rectangle coordinates with positive dimensions
+    * @param  rect  A rectangle
+    * @returns  An equivalent rectangle with width and height > 0
+    */
     function correctRectCoordinates(rect: CanvasRect) {
       if (rect.w < 0) {
         rect.startX = rect.startX + rect.w;
@@ -779,6 +787,14 @@ export default defineComponent({
         });
     }
 
+    /**
+    * Using rectangle coordinates, filters the tsv to get text elements contained
+    * inside the rectangle
+    * Additionaly adds newlines depending on the current "text split" mode
+    * @param  tsv   An Object containing tesseracts tsv fields
+    * @param  rect  Coordinates of a rectangle
+    * @returns Text from tsv contained in the rectangle
+    */
     function getWordsInSelection(tsv: OcrTsvResponse[], rect: CanvasRect) {
       const correctedRect = correctRectCoordinates(rect);
 

From 0a8412ce22a46c8feee7e1a8210dc74206f25a06 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sun, 11 Sep 2022 21:49:12 +0200
Subject: [PATCH 51/62] Move down ocr creation option

---
 frontend/pages/recipe/create.vue | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/frontend/pages/recipe/create.vue b/frontend/pages/recipe/create.vue
index 330d65111c7..2afaa0ccb9b 100644
--- a/frontend/pages/recipe/create.vue
+++ b/frontend/pages/recipe/create.vue
@@ -42,11 +42,6 @@ export default defineComponent({
         text: "Import with URL",
         value: "url",
       },
-      {
-        icon: $globals.icons.fileImage,
-        text: "Create recipe from an image",
-        value: "ocr",
-      },
       {
         icon: $globals.icons.edit,
         text: "Create Recipe",
@@ -57,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",

From 0215ec56a4fd8a1581bcc178685fafe14d19f1ba Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Mon, 12 Sep 2022 13:46:24 +0200
Subject: [PATCH 52/62] Make toolbar icons more generic

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 177 ++++++++++-----------
 frontend/utils/icons/icon-type.ts          |   7 +
 2 files changed, 93 insertions(+), 91 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 9936dc61885..0b97f69f93d 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -10,87 +10,23 @@
     <v-row v-if="!loading">
       <v-col cols="12" sm="7" md="7" lg="7">
         <v-card flat tile>
-          <v-toolbar dense>
-            <v-toolbar-title>Toolbar</v-toolbar-title>
-            <v-tooltip bottom>
-              <template #activator="{ on, attrs }">
-                <v-btn icon>
-                  <v-icon
-                    :color="canvasMode === 'selection' ? 'primary' : 'default'"
-                    v-bind="attrs"
-                    @click="switchCanvasMode('selection')"
-                    v-on="on"
-                  >
-                    {{ $globals.icons.selectMode }}
-                  </v-icon>
-                </v-btn>
-              </template>
-              <span>{{ $t("ocr-editor.selection-mode") }}</span>
-            </v-tooltip>
-            <v-tooltip v-if="!isImageSmallerThanCanvas" bottom>
-              <template #activator="{ on, attrs }">
-                <v-btn icon>
-                  <v-icon
-                    :color="canvasMode === 'panAndZoom' ? 'primary' : 'default'"
-                    v-bind="attrs"
-                    @click="switchCanvasMode('panAndZoom')"
-                    v-on="on"
-                  >
-                    {{ $globals.icons.panAndZoom }}
-                  </v-icon>
-                </v-btn>
-              </template>
-              <span>{{ $t("ocr-editor.pan-and-zoom-picture") }}</span>
-            </v-tooltip>
-            <v-divider vertical class="mx-2" />
-            <v-toolbar-title>{{ $t("ocr-editor.split-text") }}</v-toolbar-title>
-            <v-tooltip bottom>
-              <template #activator="{ on, attrs }">
-                <v-btn icon>
-                  <v-icon
-                    :color="selectedTextSplitMode === 'lineNum' ? 'primary' : 'default'"
-                    v-bind="attrs"
-                    @click="switchSplitTextMode('lineNum')"
-                    v-on="on"
-                  >
-                    {{ $globals.icons.preserveLines }}
-                  </v-icon>
-                </v-btn>
-              </template>
-              <span>{{ $t("ocr-editor.preserve-line-breaks") }}</span>
-            </v-tooltip>
-            <v-tooltip bottom>
-              <template #activator="{ on, attrs }">
-                <v-btn icon>
-                  <v-icon
-                    :color="selectedTextSplitMode === 'blockNum' ? 'primary' : 'default'"
-                    v-bind="attrs"
-                    @click="switchSplitTextMode('blockNum')"
-                    v-on="on"
-                  >
-                    {{ $globals.icons.preserveBlocks }}
-                  </v-icon>
-                </v-btn>
-              </template>
-              <span>{{ $t("ocr-editor.split-by-block") }}</span>
-            </v-tooltip>
-            <v-tooltip bottom>
+          <v-toolbar v-for="(section, idx) in toolbarIcons" :key="section.sectionTitle" dense style="float: left">
+            <v-toolbar-title bottom>
+              {{ section.sectionTitle }}
+            </v-toolbar-title>
+            <v-tooltip v-for="icon in section.icons" :key="icon.name" bottom>
               <template #activator="{ on, attrs }">
-                <v-btn icon>
-                  <v-icon
-                    :color="selectedTextSplitMode === 'flatten' ? 'primary' : 'default'"
-                    v-bind="attrs"
-                    @click="switchSplitTextMode('flatten')"
-                    v-on="on"
-                  >
-                    {{ $globals.icons.flatten }}
+                <v-btn icon @click="section.eventHandler(icon.name)">
+                  <v-icon :color="section.highlight === icon.name ? 'primary' : 'default'" v-bind="attrs" v-on="on">
+                    {{ icon.icon }}
                   </v-icon>
                 </v-btn>
               </template>
-              <span>{{ $t("ocr-editor.flatten") }}</span>
+              <span>{{ icon.tooltip }}</span>
             </v-tooltip>
-
-            <v-spacer></v-spacer>
+            <v-divider v-if="idx != toolbarIcons.length - 1" vertical class="mx-2" />
+          </v-toolbar>
+          <v-toolbar dense style="float: right">
             <BaseButton class="ml-1 mr-1" save @click="updateRecipe(recipe.slug, recipe)">
               {{ $t("general.save") }}
             </BaseButton>
@@ -289,6 +225,7 @@ import {
   toRefs,
   useRouter,
   nextTick,
+  useContext,
 } from "@nuxtjs/composition-api";
 import { until } from "@vueuse/core";
 import { invoke } from "@vueuse/shared";
@@ -364,6 +301,17 @@ type CanvasModes = "selection" | "panAndZoom";
 
 type SelectedTextSplitModes = keyof OcrTsvResponse | "flatten";
 
+type ToolbarIcons<T extends string> = {
+  sectionTitle: string;
+  eventHandler(mode: T): void;
+  highlight: T;
+  icons: {
+    name: T;
+    icon: string;
+    tooltip: string;
+  }[];
+}[];
+
 export default defineComponent({
   components: {
     RecipeIngredientEditor,
@@ -378,6 +326,8 @@ export default defineComponent({
     const slug = route.value.params.slug;
     const api = useUserApi();
 
+    const { $globals, i18n } = useContext();
+
     const tsv = ref<OcrTsvResponse[]>([]);
 
     const { recipe, loading, fetchRecipe } = useRecipe(slug);
@@ -432,6 +382,48 @@ export default defineComponent({
       showHelp: false,
     });
 
+    const toolbarIcons = ref<ToolbarIcons<CanvasModes | SelectedTextSplitModes>>([
+      {
+        sectionTitle: "Toolbar",
+        eventHandler: switchCanvasMode,
+        highlight: state.canvasMode,
+        icons: [
+          {
+            name: "selection",
+            icon: $globals.icons.selectMode,
+            tooltip: i18n.t("ocr-editor.selection-mode") as string,
+          },
+          {
+            name: "panAndZoom",
+            icon: $globals.icons.panAndZoom,
+            tooltip: i18n.t("ocr-editor.pan-and-zoom-picture") as string,
+          },
+        ],
+      },
+      {
+        sectionTitle: i18n.t("ocr-editor.split-text") as string,
+        eventHandler: switchSplitTextMode,
+        highlight: state.selectedTextSplitMode,
+        icons: [
+          {
+            name: "lineNum",
+            icon: $globals.icons.preserveLines,
+            tooltip: i18n.t("ocr-editor.preserve-line-breaks") as string,
+          },
+          {
+            name: "blockNum",
+            icon: $globals.icons.preserveBlocks,
+            tooltip: i18n.t("ocr-editor.split-by-block") as string,
+          },
+          {
+            name: "flatten",
+            icon: $globals.icons.flatten,
+            tooltip: i18n.t("ocr-editor.flatten") as string,
+          },
+        ],
+      },
+    ]);
+
     const setPropertyValueByPath = function <T extends Recipe>(object: T, path: Paths<T>, value: any) {
       const a = path.split(".");
       let nextProperty: any = object;
@@ -462,10 +454,10 @@ export default defineComponent({
     }
 
     /**
-    * This function will find the title of a recipe with the assumption that the title
-    * has the biggest ratio of surface area / number of words on the image.
-    * @return Returns the text parts of the block with the highest score.
-    */
+     * This function will find the title of a recipe with the assumption that the title
+     * has the biggest ratio of surface area / number of words on the image.
+     * @return Returns the text parts of the block with the highest score.
+     */
     function findRecipeTitle() {
       const filtered = tsv.value.filter((element) => element.level === 2 || element.level === 5);
       const blocks = [[]] as OcrTsvResponse[][];
@@ -560,6 +552,7 @@ export default defineComponent({
     function switchCanvasMode(mode: CanvasModes) {
       if (state.canvasRect === null || state.canvas === null) return;
       state.canvasMode = mode;
+      toolbarIcons.value[0].highlight = mode;
       if (mode === "panAndZoom") {
         state.canvas.style.cursor = "pointer";
       } else {
@@ -570,6 +563,7 @@ export default defineComponent({
     function switchSplitTextMode(mode: SelectedTextSplitModes) {
       if (state.canvasRect === null) return;
       state.selectedTextSplitMode = mode;
+      toolbarIcons.value[1].highlight = mode;
       state.selectedText = getWordsInSelection(tsv.value, state.rect);
     }
 
@@ -753,10 +747,10 @@ export default defineComponent({
     }
 
     /**
-    * Returns rectangle coordinates with positive dimensions
-    * @param  rect  A rectangle
-    * @returns  An equivalent rectangle with width and height > 0
-    */
+     * Returns rectangle coordinates with positive dimensions
+     * @param  rect  A rectangle
+     * @returns  An equivalent rectangle with width and height > 0
+     */
     function correctRectCoordinates(rect: CanvasRect) {
       if (rect.w < 0) {
         rect.startX = rect.startX + rect.w;
@@ -788,13 +782,13 @@ export default defineComponent({
     }
 
     /**
-    * Using rectangle coordinates, filters the tsv to get text elements contained
-    * inside the rectangle
-    * Additionaly adds newlines depending on the current "text split" mode
-    * @param  tsv   An Object containing tesseracts tsv fields
-    * @param  rect  Coordinates of a rectangle
-    * @returns Text from tsv contained in the rectangle
-    */
+     * Using rectangle coordinates, filters the tsv to get text elements contained
+     * inside the rectangle
+     * Additionaly adds newlines depending on the current "text split" mode
+     * @param  tsv   An Object containing tesseracts tsv fields
+     * @param  rect  Coordinates of a rectangle
+     * @returns Text from tsv contained in the rectangle
+     */
     function getWordsInSelection(tsv: OcrTsvResponse[], rect: CanvasRect) {
       const correctedRect = correctRectCoordinates(rect);
 
@@ -908,6 +902,7 @@ export default defineComponent({
       setSingleIngredient,
       setSingleStep,
       switchSplitTextMode,
+      toolbarIcons,
     };
   },
 });
diff --git a/frontend/utils/icons/icon-type.ts b/frontend/utils/icons/icon-type.ts
index a3377620463..46f585267ab 100644
--- a/frontend/utils/icons/icon-type.ts
+++ b/frontend/utils/icons/icon-type.ts
@@ -125,4 +125,11 @@ export interface Icon {
   back: string;
   slotMachine: string;
   chevronDown: string;
+
+  // Ocr toolbar
+  selectMode: string;
+  panAndZoom: string;
+  preserveLines: string;
+  preserveBlocks: string;
+  flatten: string;
 }

From ec27d35ad66c06ad1962cf46298299192e869fe7 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Fri, 16 Sep 2022 19:16:55 +0200
Subject: [PATCH 53/62] Show help at the bottom of the page

---
 frontend/lang/messages/en-US.json          |   3 +-
 frontend/pages/recipe/_slug/ocr-editor.vue | 105 ++++++++++-----------
 2 files changed, 49 insertions(+), 59 deletions(-)

diff --git a/frontend/lang/messages/en-US.json b/frontend/lang/messages/en-US.json
index 35f83915b64..fbe38eda112 100644
--- a/frontend/lang/messages/en-US.json
+++ b/frontend/lang/messages/en-US.json
@@ -670,8 +670,7 @@
     "preserve-line-breaks": "Preserve original line breaks",
     "split-by-block": "Split by text block",
     "flatten": "Flatten regardless of original formating",
-    "help": "Click here for help on how to use this feature!",
-    "help-dialog": {
+    "help": {
       "selection-mode": "Selection Mode (default)",
       "selection-mode-desc": "The selection mode is the main mode that can be used to enter data:",
       "selection-mode-steps": {
diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 0b97f69f93d..2c7cb6e22e6 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -33,14 +33,6 @@
             <BaseButton cancel @click="$router.push('/recipe/' + recipe.slug)">
               {{ $t("general.close") }}
             </BaseButton>
-            <v-tooltip bottom>
-              <template #activator="{ on, attrs }">
-                <v-btn icon>
-                  <v-icon v-bind="attrs" v-on="on" @click="showHelp = !showHelp"> {{ $globals.icons.help }} </v-icon>
-                </v-btn>
-              </template>
-              <span>{{ $t("ocr-editor.help") }}</span>
-            </v-tooltip>
           </v-toolbar>
           <canvas
             id="canvas"
@@ -53,6 +45,54 @@
             {{ selectedText }}
           </span>
         </v-card>
+
+        <v-card>
+          <v-app-bar dense dark color="primary" class="mb-2">
+            <v-icon large left>
+              {{ $globals.icons.help }}
+            </v-icon>
+            <v-toolbar-title class="headline"> Help </v-toolbar-title>
+            <v-spacer></v-spacer>
+          </v-app-bar>
+          <v-card-text>
+            <h1>Mouse modes</h1>
+            <v-divider class="mb-2 mt-1" />
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.selectMode }} </v-icon>{{ $t("ocr-editor.help.selection-mode") }}
+            </h2>
+            <p class="my-1">{{ $t("ocr-editor.help.selection-mode") }}</p>
+            <ol>
+              <li>{{ $t("ocr-editor.help.selection-mode-steps.draw") }}</li>
+              <li>{{ $t("ocr-editor.help.selection-mode-steps.click") }}</li>
+              <li>{{ $t("ocr-editor.help.selection-mode-steps.result") }}</li>
+            </ol>
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>{{ $t("ocr-editor.help.pan-and-zoom-mode") }}
+            </h2>
+            {{ $t("ocr-editor.help.pan-and-zoom-desc") }}
+            <h1 class="mt-5">{{ $t("ocr-editor.help.split-text-mode") }}</h1>
+            <v-divider class="mb-2 mt-1" />
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.preserveLines }} </v-icon
+              >{{ $t("ocr-editor.help.split-modes.line-mode") }}
+            </h2>
+            <p>
+              {{ $t("ocr-editor.help.split-modes.line-mode-desc") }}
+            </p>
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon>
+              {{ $t("ocr-editor.help.split-modes.block-mode") }}
+            </h2>
+            <p>
+              {{ $t("ocr-editor.help.split-modes.block-mode-desc") }}
+            </p>
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.flatten }} </v-icon> {{ $t("ocr-editor.help.split-modes.flat-mode") }}
+            </h2>
+            <p>{{ $t("ocr-editor.help.split-modes.flat-mode-desc") }}</p>
+          </v-card-text>
+        </v-card>
+
       </v-col>
       <v-col cols="12" sm="5" md="5" lg="5">
         <v-tabs v-model="tab" fixed-tabs>
@@ -164,54 +204,6 @@
         </v-tabs-items>
       </v-col>
     </v-row>
-    <v-dialog v-model="showHelp" width="800px">
-      <v-card>
-        <v-app-bar dense dark color="primary" class="mb-2">
-          <v-icon large left>
-            {{ $globals.icons.help }}
-          </v-icon>
-          <v-toolbar-title class="headline"> Help </v-toolbar-title>
-          <v-spacer></v-spacer>
-        </v-app-bar>
-        <v-card-text>
-          <h1>Mouse modes</h1>
-          <v-divider class="mb-2 mt-1" />
-          <h2 class="my-2">
-            <v-icon> {{ $globals.icons.selectMode }} </v-icon>{{ $t("ocr-editor.help-dialog.selection-mode") }}
-          </h2>
-          <p class="my-1">{{ $t("ocr-editor.help-dialog.selection-mode") }}</p>
-          <ol>
-            <li>{{ $t("ocr-editor.help-dialog.selection-mode-steps.draw") }}</li>
-            <li>{{ $t("ocr-editor.help-dialog.selection-mode-steps.click") }}</li>
-            <li>{{ $t("ocr-editor.help-dialog.selection-mode-steps.result") }}</li>
-          </ol>
-          <h2 class="my-2">
-            <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>{{ $t("ocr-editor.help-dialog.pan-and-zoom-mode") }}
-          </h2>
-          {{ $t("ocr-editor.help-dialog.pan-and-zoom-desc") }}
-          <h1 class="mt-5">{{ $t("ocr-editor.help-dialog.split-text-mode") }}</h1>
-          <v-divider class="mb-2 mt-1" />
-          <h2 class="my-2">
-            <v-icon> {{ $globals.icons.preserveLines }} </v-icon
-            >{{ $t("ocr-editor.help-dialog.split-modes.line-mode") }}
-          </h2>
-          <p>
-            {{ $t("ocr-editor.help-dialog.split-modes.line-mode-desc") }}
-          </p>
-          <h2 class="my-2">
-            <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon>
-            {{ $t("ocr-editor.help-dialog.split-modes.block-mode") }}
-          </h2>
-          <p>
-            {{ $t("ocr-editor.help-dialog.split-modes.block-mode-desc") }}
-          </p>
-          <h2 class="my-2">
-            <v-icon> {{ $globals.icons.flatten }} </v-icon> {{ $t("ocr-editor.help-dialog.split-modes.flat-mode") }}
-          </h2>
-          <p>{{ $t("ocr-editor.help-dialog.split-modes.flat-mode-desc") }}</p>
-        </v-card-text>
-      </v-card>
-    </v-dialog>
   </v-container>
 </template>
 
@@ -379,7 +371,6 @@ export default defineComponent({
       } as ImagePosition,
       isImageSmallerThanCanvas: false,
       selectedTextSplitMode: "lineNum" as SelectedTextSplitModes,
-      showHelp: false,
     });
 
     const toolbarIcons = ref<ToolbarIcons<CanvasModes | SelectedTextSplitModes>>([

From 53f13ed113c2ecaa949d9a3a2612cccc1ad61858 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Thu, 22 Sep 2022 12:53:28 +0200
Subject: [PATCH 54/62] move ocr types to own file

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 99 +++++-----------------
 frontend/types/ocr-types.ts                | 73 ++++++++++++++++
 2 files changed, 93 insertions(+), 79 deletions(-)
 create mode 100644 frontend/types/ocr-types.ts

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 2c7cb6e22e6..e6d8c224c21 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -27,7 +27,7 @@
             <v-divider v-if="idx != toolbarIcons.length - 1" vertical class="mx-2" />
           </v-toolbar>
           <v-toolbar dense style="float: right">
-            <BaseButton class="ml-1 mr-1" save @click="updateRecipe(recipe.slug, recipe)">
+            <BaseButton class="ml-1 mr-1" save @click="updateRecipe(recipe)">
               {{ $t("general.save") }}
             </BaseButton>
             <BaseButton cancel @click="$router.push('/recipe/' + recipe.slug)">
@@ -73,8 +73,8 @@
             <h1 class="mt-5">{{ $t("ocr-editor.help.split-text-mode") }}</h1>
             <v-divider class="mb-2 mt-1" />
             <h2 class="my-2">
-              <v-icon> {{ $globals.icons.preserveLines }} </v-icon
-              >{{ $t("ocr-editor.help.split-modes.line-mode") }}
+              <v-icon> {{ $globals.icons.preserveLines }} </v-icon>
+              {{ $t("ocr-editor.help.split-modes.line-mode") }}
             </h2>
             <p>
               {{ $t("ocr-editor.help.split-modes.line-mode-desc") }}
@@ -92,7 +92,6 @@
             <p>{{ $t("ocr-editor.help.split-modes.flat-mode-desc") }}</p>
           </v-card-text>
         </v-card>
-
       </v-col>
       <v-col cols="12" sm="5" md="5" lg="5">
         <v-tabs v-model="tab" fixed-tabs>
@@ -227,82 +226,23 @@ import { useRecipe } from "~/composables/recipes";
 import { OcrTsvResponse } from "~/types/api-types/ocr";
 import { validators } from "~/composables/use-validators";
 import { Recipe, RecipeIngredient, RecipeStep } from "~/types/api-types/recipe";
+import {
+  CanvasRect,
+  ImagePosition,
+  Mouse,
+  Paths,
+  Leaves,
+  SelectedRecipeLeaves,
+  CanvasModes,
+  SelectedTextSplitModes,
+  ToolbarIcons,
+} from "~/types/ocr-types";
 import BannerExperimental from "~/components/global/BannerExperimental.vue";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
 import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
 import { uuid4 } from "~/composables/use-utils";
-
-type CanvasRect = {
-  startX: number;
-  startY: number;
-  w: number;
-  h: number;
-};
-
-type ImagePosition = {
-  sx: number;
-  sy: number;
-  sWidth: number;
-  sHeight: number;
-  dx: number;
-  dy: number;
-  dWidth: number;
-  dHeight: number;
-  scale: number;
-  panStartPoint: {
-    x: number;
-    y: number;
-  };
-};
-
-type Mouse = {
-  current: {
-    x: number;
-    y: number;
-  };
-  down: boolean;
-};
-
-// https://stackoverflow.com/questions/58434389/typescript-deep-keyof-of-a-nested-object/58436959#58436959
-type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]];
-
-type Join<K, P> = K extends string | number
-  ? P extends string | number
-    ? `${K}${"" extends P ? "" : "."}${P}`
-    : never
-  : never;
-
-type Paths<T, D extends number = 10> = [D] extends [never]
-  ? never
-  : T extends object
-  ? {
-      [K in keyof T]-?: K extends string | number ? `${K}` | Join<K, Paths<T[K], Prev[D]>> : never;
-    }[keyof T]
-  : "";
-
-type Leaves<T, D extends number = 10> = [D] extends [never]
-  ? never
-  : T extends object
-  ? { [K in keyof T]-?: Join<K, Leaves<T[K], Prev[D]>> }[keyof T]
-  : "";
-
-type SelectedRecipeLeaves = Leaves<Recipe>;
-
-type CanvasModes = "selection" | "panAndZoom";
-
-type SelectedTextSplitModes = keyof OcrTsvResponse | "flatten";
-
-type ToolbarIcons<T extends string> = {
-  sectionTitle: string;
-  eventHandler(mode: T): void;
-  highlight: T;
-  icons: {
-    name: T;
-    icon: string;
-    tooltip: string;
-  }[];
-}[];
+import { NoUndefinedField } from "~/types/api";
 
 export default defineComponent({
   components: {
@@ -503,8 +443,8 @@ export default defineComponent({
         }
 
         nextTick(() => {
-          state.canvas = <HTMLCanvasElement>document.getElementById("canvas");
-          state.ctx = <CanvasRenderingContext2D>state.canvas.getContext("2d");
+          state.canvas = document.getElementById("canvas") as HTMLCanvasElement;
+          state.ctx = state.canvas.getContext("2d") as CanvasRenderingContext2D;
           state.ctx.imageSmoothingEnabled = false;
           state.canvasRect = state.canvas.getBoundingClientRect();
 
@@ -854,8 +794,8 @@ export default defineComponent({
       }
     }
 
-    async function updateRecipe(slug: string, recipe: Recipe) {
-      const { data } = await api.recipes.updateOne(slug, recipe);
+    async function updateRecipe(recipe: NoUndefinedField<Recipe>) {
+      const { data } = await api.recipes.updateOne(recipe.slug, recipe);
       if (data?.slug) {
         router.push("/recipe/" + data.slug);
       }
@@ -914,6 +854,7 @@ canvas {
   width: 100%;
   image-rendering: optimizeQuality;
 }
+
 .box {
   position: absolute;
   border: 2px #90ee90 solid;
diff --git a/frontend/types/ocr-types.ts b/frontend/types/ocr-types.ts
new file mode 100644
index 00000000000..af2082e80df
--- /dev/null
+++ b/frontend/types/ocr-types.ts
@@ -0,0 +1,73 @@
+import { OcrTsvResponse } from "~/types/api-types/ocr";
+import { Recipe } from "~/types/api-types/recipe";
+
+export type CanvasRect = {
+  startX: number;
+  startY: number;
+  w: number;
+  h: number;
+};
+
+export type ImagePosition = {
+  sx: number;
+  sy: number;
+  sWidth: number;
+  sHeight: number;
+  dx: number;
+  dy: number;
+  dWidth: number;
+  dHeight: number;
+  scale: number;
+  panStartPoint: {
+    x: number;
+    y: number;
+  };
+};
+
+export type Mouse = {
+  current: {
+    x: number;
+    y: number;
+  };
+  down: boolean;
+};
+
+// https://stackoverflow.com/questions/58434389/export typescript-deep-keyof-of-a-nested-object/58436959#58436959
+type Prev = [never, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, ...0[]];
+
+type Join<K, P> = K extends string | number
+  ? P extends string | number
+    ? `${K}${"" extends P ? "" : "."}${P}`
+    : never
+  : never;
+
+export type Paths<T, D extends number = 10> = [D] extends [never]
+  ? never
+  : T extends object
+  ? {
+      [K in keyof T]-?: K extends string | number ? `${K}` | Join<K, Paths<T[K], Prev[D]>> : never;
+    }[keyof T]
+  : "";
+
+export type Leaves<T, D extends number = 10> = [D] extends [never]
+  ? never
+  : T extends object
+  ? { [K in keyof T]-?: Join<K, Leaves<T[K], Prev[D]>> }[keyof T]
+  : "";
+
+export type SelectedRecipeLeaves = Leaves<Recipe>;
+
+export type CanvasModes = "selection" | "panAndZoom";
+
+export type SelectedTextSplitModes = keyof OcrTsvResponse | "flatten";
+
+export type ToolbarIcons<T extends string> = {
+  sectionTitle: string;
+  eventHandler(mode: T): void;
+  highlight: T;
+  icons: {
+    name: T;
+    icon: string;
+    tooltip: string;
+  }[];
+}[];

From 790754826348d28bacee017fe5e77b44db7ca7af Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Thu, 22 Sep 2022 13:22:42 +0200
Subject: [PATCH 55/62] Use template ref for the canvas

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index e6d8c224c21..a7655c72d85 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -35,7 +35,7 @@
             </BaseButton>
           </v-toolbar>
           <canvas
-            id="canvas"
+            ref="canvas"
             @mousedown="handleMouseDown"
             @mouseup="handleMouseUp"
             @mousemove="handleMouseMove"
@@ -443,7 +443,7 @@ export default defineComponent({
         }
 
         nextTick(() => {
-          state.canvas = document.getElementById("canvas") as HTMLCanvasElement;
+          if (state.canvas === null) return; // never happens because the ref "canvas" is in the template
           state.ctx = state.canvas.getContext("2d") as CanvasRenderingContext2D;
           state.ctx.imageSmoothingEnabled = false;
           state.canvasRect = state.canvas.getBoundingClientRect();

From a5d08b271ef929a7864707f2e7fd499a9ca509b8 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Thu, 22 Sep 2022 13:27:33 +0200
Subject: [PATCH 56/62] Use i18n.tc to get strings directly

---
 frontend/pages/recipe/_slug/ocr-editor.vue | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index a7655c72d85..408358332af 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -322,34 +322,34 @@ export default defineComponent({
           {
             name: "selection",
             icon: $globals.icons.selectMode,
-            tooltip: i18n.t("ocr-editor.selection-mode") as string,
+            tooltip: i18n.tc("ocr-editor.selection-mode"),
           },
           {
             name: "panAndZoom",
             icon: $globals.icons.panAndZoom,
-            tooltip: i18n.t("ocr-editor.pan-and-zoom-picture") as string,
+            tooltip: i18n.tc("ocr-editor.pan-and-zoom-picture"),
           },
         ],
       },
       {
-        sectionTitle: i18n.t("ocr-editor.split-text") as string,
+        sectionTitle: i18n.tc("ocr-editor.split-text"),
         eventHandler: switchSplitTextMode,
         highlight: state.selectedTextSplitMode,
         icons: [
           {
             name: "lineNum",
             icon: $globals.icons.preserveLines,
-            tooltip: i18n.t("ocr-editor.preserve-line-breaks") as string,
+            tooltip: i18n.tc("ocr-editor.preserve-line-breaks"),
           },
           {
             name: "blockNum",
             icon: $globals.icons.preserveBlocks,
-            tooltip: i18n.t("ocr-editor.split-by-block") as string,
+            tooltip: i18n.tc("ocr-editor.split-by-block"),
           },
           {
             name: "flatten",
             icon: $globals.icons.flatten,
-            tooltip: i18n.t("ocr-editor.flatten") as string,
+            tooltip: i18n.tc("ocr-editor.flatten"),
           },
         ],
       },

From 734ade17eb6969d6ca88e30850abb948341e95c2 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Thu, 22 Sep 2022 13:28:02 +0200
Subject: [PATCH 57/62] Correct naming mistake

---
 mealie/services/ocr/{__init.py__ => __init__.py} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename mealie/services/ocr/{__init.py__ => __init__.py} (100%)

diff --git a/mealie/services/ocr/__init.py__ b/mealie/services/ocr/__init__.py
similarity index 100%
rename from mealie/services/ocr/__init.py__
rename to mealie/services/ocr/__init__.py

From 27d19cbd170bdc658640d3c4ef8791308eb14c2e Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 24 Sep 2022 12:53:10 +0200
Subject: [PATCH 58/62] Move Ocr editor to own directory

---
 .../RecipeOcrEditorPage.vue                   | 857 ++++++++++++++++++
 .../Recipe/RecipeOcrEditorPage/index.ts       |   3 +
 frontend/pages/recipe/_slug/ocr-editor.vue    | 828 +----------------
 3 files changed, 867 insertions(+), 821 deletions(-)
 create mode 100644 frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
 create mode 100644 frontend/components/Domain/Recipe/RecipeOcrEditorPage/index.ts

diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
new file mode 100644
index 00000000000..69b548bfdf8
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
@@ -0,0 +1,857 @@
+<template>
+  <v-container
+    v-if="recipe && recipe.slug && recipe.settings && recipe.recipeIngredient"
+    :class="{
+      'pa-0': $vuetify.breakpoint.smAndDown,
+    }"
+  >
+    <BannerExperimental />
+
+    <v-row v-if="!loading">
+      <v-col cols="12" sm="7" md="7" lg="7">
+        <v-card flat tile>
+          <v-toolbar v-for="(section, idx) in toolbarIcons" :key="section.sectionTitle" dense style="float: left">
+            <v-toolbar-title bottom>
+              {{ section.sectionTitle }}
+            </v-toolbar-title>
+            <v-tooltip v-for="icon in section.icons" :key="icon.name" bottom>
+              <template #activator="{ on, attrs }">
+                <v-btn icon @click="section.eventHandler(icon.name)">
+                  <v-icon :color="section.highlight === icon.name ? 'primary' : 'default'" v-bind="attrs" v-on="on">
+                    {{ icon.icon }}
+                  </v-icon>
+                </v-btn>
+              </template>
+              <span>{{ icon.tooltip }}</span>
+            </v-tooltip>
+            <v-divider v-if="idx != toolbarIcons.length - 1" vertical class="mx-2" />
+          </v-toolbar>
+          <v-toolbar dense style="float: right">
+            <BaseButton class="ml-1 mr-1" save @click="updateRecipe(recipe)">
+              {{ $t("general.save") }}
+            </BaseButton>
+            <BaseButton cancel @click="$router.push('/recipe/' + recipe.slug)">
+              {{ $t("general.close") }}
+            </BaseButton>
+          </v-toolbar>
+          <canvas
+            ref="canvas"
+            @mousedown="handleMouseDown"
+            @mouseup="handleMouseUp"
+            @mousemove="handleMouseMove"
+            @wheel="handleMouseScroll"
+          ></canvas>
+          <span style="white-space: pre-wrap">
+            {{ selectedText }}
+          </span>
+        </v-card>
+
+        <v-card>
+          <v-app-bar dense dark color="primary" class="mb-2">
+            <v-icon large left>
+              {{ $globals.icons.help }}
+            </v-icon>
+            <v-toolbar-title class="headline"> Help </v-toolbar-title>
+            <v-spacer></v-spacer>
+          </v-app-bar>
+          <v-card-text>
+            <h1>Mouse modes</h1>
+            <v-divider class="mb-2 mt-1" />
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.selectMode }} </v-icon>{{ $t("ocr-editor.help.selection-mode") }}
+            </h2>
+            <p class="my-1">{{ $t("ocr-editor.help.selection-mode") }}</p>
+            <ol>
+              <li>{{ $t("ocr-editor.help.selection-mode-steps.draw") }}</li>
+              <li>{{ $t("ocr-editor.help.selection-mode-steps.click") }}</li>
+              <li>{{ $t("ocr-editor.help.selection-mode-steps.result") }}</li>
+            </ol>
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>{{ $t("ocr-editor.help.pan-and-zoom-mode") }}
+            </h2>
+            {{ $t("ocr-editor.help.pan-and-zoom-desc") }}
+            <h1 class="mt-5">{{ $t("ocr-editor.help.split-text-mode") }}</h1>
+            <v-divider class="mb-2 mt-1" />
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.preserveLines }} </v-icon>
+              {{ $t("ocr-editor.help.split-modes.line-mode") }}
+            </h2>
+            <p>
+              {{ $t("ocr-editor.help.split-modes.line-mode-desc") }}
+            </p>
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon>
+              {{ $t("ocr-editor.help.split-modes.block-mode") }}
+            </h2>
+            <p>
+              {{ $t("ocr-editor.help.split-modes.block-mode-desc") }}
+            </p>
+            <h2 class="my-2">
+              <v-icon> {{ $globals.icons.flatten }} </v-icon> {{ $t("ocr-editor.help.split-modes.flat-mode") }}
+            </h2>
+            <p>{{ $t("ocr-editor.help.split-modes.flat-mode-desc") }}</p>
+          </v-card-text>
+        </v-card>
+      </v-col>
+      <v-col cols="12" sm="5" md="5" lg="5">
+        <v-tabs v-model="tab" fixed-tabs>
+          <v-tab key="header">
+            {{ $t("general.recipe") }}
+          </v-tab>
+          <v-tab key="ingredients">
+            {{ $t("recipe.ingredients") }}
+          </v-tab>
+          <v-tab key="instructions">
+            {{ $t("recipe.instructions") }}
+          </v-tab>
+        </v-tabs>
+        <v-tabs-items v-model="tab">
+          <v-tab-item key="header">
+            <v-text-field
+              v-model="recipe.name"
+              class="my-3"
+              :label="$t('recipe.recipe-name')"
+              :rules="[validators.required]"
+              @focus="selectedRecipeField = 'name'"
+            >
+            </v-text-field>
+
+            <div class="d-flex flex-wrap">
+              <v-text-field
+                v-model="recipe.totalTime"
+                class="mx-2"
+                :label="$t('recipe.total-time')"
+                @click="selectedRecipeField = 'totalTime'"
+              ></v-text-field>
+              <v-text-field
+                v-model="recipe.prepTime"
+                class="mx-2"
+                :label="$t('recipe.prep-time')"
+                @click="selectedRecipeField = 'prepTime'"
+              ></v-text-field>
+              <v-text-field
+                v-model="recipe.performTime"
+                class="mx-2"
+                :label="$t('recipe.perform-time')"
+                @click="selectedRecipeField = 'performTime'"
+              ></v-text-field>
+            </div>
+
+            <v-textarea
+              v-model="recipe.description"
+              auto-grow
+              min-height="100"
+              :label="$t('recipe.description')"
+              @click="selectedRecipeField = 'description'"
+            >
+            </v-textarea>
+            <v-text-field
+              v-model="recipe.recipeYield"
+              dense
+              :label="$t('recipe.servings')"
+              @click="selectedRecipeField = 'recipeYield'"
+            >
+            </v-text-field>
+          </v-tab-item>
+          <v-tab-item key="ingredients">
+            <div class="d-flex justify-end mt-2">
+              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="selectedText" @bulk-data="addIngredient" />
+              <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
+            </div>
+            <draggable
+              v-if="recipe.recipeIngredient.length > 0"
+              v-model="recipe.recipeIngredient"
+              handle=".handle"
+              v-bind="{
+                animation: 200,
+                group: 'description',
+                disabled: false,
+                ghostClass: 'ghost',
+              }"
+              @start="drag = true"
+              @end="drag = false"
+            >
+              <TransitionGroup type="transition" :name="!drag ? 'flip-list' : ''">
+                <RecipeIngredientEditor
+                  v-for="(ingredient, index) in recipe.recipeIngredient"
+                  :key="ingredient.referenceId"
+                  v-model="recipe.recipeIngredient[index]"
+                  class="list-group-item"
+                  :disable-amount="recipe.settings.disableAmount"
+                  @delete="recipe.recipeIngredient.splice(index, 1)"
+                  @clickIngredientField="setSingleIngredient($event, index)"
+                />
+              </TransitionGroup>
+            </draggable>
+          </v-tab-item>
+          <v-tab-item key="instructions">
+            <div class="d-flex justify-end mt-2">
+              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="selectedText" @bulk-data="addStep" />
+              <BaseButton @click="addStep()"> {{ $t("general.new") }}</BaseButton>
+            </div>
+            <RecipeInstructions
+              v-model="recipe.recipeInstructions"
+              :ingredients="recipe.recipeIngredient"
+              :disable-amount="recipe.settings.disableAmount"
+              :edit="true"
+              :recipe-id="recipe.id"
+              :recipe-slug="recipe.slug"
+              :assets.sync="recipe.assets"
+              @clickInstructionField="setSingleStep"
+            />
+          </v-tab-item>
+        </v-tabs-items>
+      </v-col>
+    </v-row>
+  </v-container>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  ref,
+  onMounted,
+  reactive,
+  toRefs,
+  useRouter,
+  nextTick,
+  useContext,
+} from "@nuxtjs/composition-api";
+import { until } from "@vueuse/core";
+import { invoke } from "@vueuse/shared";
+import draggable from "vuedraggable";
+import { useUserApi, useStaticRoutes } from "~/composables/api";
+import { OcrTsvResponse } from "~/types/api-types/ocr";
+import { validators } from "~/composables/use-validators";
+import { Recipe, RecipeIngredient, RecipeStep } from "~/types/api-types/recipe";
+import {
+  CanvasRect,
+  ImagePosition,
+  Mouse,
+  Paths,
+  Leaves,
+  SelectedRecipeLeaves,
+  CanvasModes,
+  SelectedTextSplitModes,
+  ToolbarIcons,
+} from "~/types/ocr-types";
+import BannerExperimental from "~/components/global/BannerExperimental.vue";
+import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
+import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
+import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
+import { uuid4 } from "~/composables/use-utils";
+import { NoUndefinedField } from "~/types/api";
+
+export default defineComponent({
+  components: {
+    RecipeIngredientEditor,
+    draggable,
+    BannerExperimental,
+    RecipeDialogBulkAdd,
+    RecipeInstructions,
+  },
+  props: {
+    recipe: {
+      type: Object as () => NoUndefinedField<Recipe>,
+      required: true,
+    },
+  },
+  setup(props) {
+    const router = useRouter();
+    const api = useUserApi();
+
+    const { $globals, i18n } = useContext();
+
+    const tsv = ref<OcrTsvResponse[]>([]);
+
+    const drag = ref(false);
+
+    const { recipeAssetPath } = useStaticRoutes();
+
+    function assetURL(assetName: string) {
+      return recipeAssetPath(props.recipe.id, assetName);
+    }
+
+    const state = reactive({
+      loading: true,
+      canvas: null as HTMLCanvasElement | null,
+      ctx: null as CanvasRenderingContext2D | null,
+      canvasRect: null as DOMRect | null,
+      tab: null,
+      rect: {
+        startX: 0,
+        startY: 0,
+        w: 0,
+        h: 0,
+      },
+      mouse: {
+        current: {
+          x: 0,
+          y: 0,
+        },
+        down: false,
+      },
+      selectedText: "",
+      selectedRecipeField: "" as SelectedRecipeLeaves | "",
+      canvasMode: "selection" as CanvasModes,
+      imagePosition: {
+        sx: 0,
+        sy: 0,
+        sWidth: 0,
+        sHeight: 0,
+        dx: 0,
+        dy: 0,
+        dWidth: 0,
+        dHeight: 0,
+        scale: 1,
+        panStartPoint: {
+          x: 0,
+          y: 0,
+        },
+      } as ImagePosition,
+      isImageSmallerThanCanvas: false,
+      selectedTextSplitMode: "lineNum" as SelectedTextSplitModes,
+    });
+
+    const toolbarIcons = ref<ToolbarIcons<CanvasModes | SelectedTextSplitModes>>([
+      {
+        sectionTitle: "Toolbar",
+        eventHandler: switchCanvasMode,
+        highlight: state.canvasMode,
+        icons: [
+          {
+            name: "selection",
+            icon: $globals.icons.selectMode,
+            tooltip: i18n.tc("ocr-editor.selection-mode"),
+          },
+          {
+            name: "panAndZoom",
+            icon: $globals.icons.panAndZoom,
+            tooltip: i18n.tc("ocr-editor.pan-and-zoom-picture"),
+          },
+        ],
+      },
+      {
+        sectionTitle: i18n.tc("ocr-editor.split-text"),
+        eventHandler: switchSplitTextMode,
+        highlight: state.selectedTextSplitMode,
+        icons: [
+          {
+            name: "lineNum",
+            icon: $globals.icons.preserveLines,
+            tooltip: i18n.tc("ocr-editor.preserve-line-breaks"),
+          },
+          {
+            name: "blockNum",
+            icon: $globals.icons.preserveBlocks,
+            tooltip: i18n.tc("ocr-editor.split-by-block"),
+          },
+          {
+            name: "flatten",
+            icon: $globals.icons.flatten,
+            tooltip: i18n.tc("ocr-editor.flatten"),
+          },
+        ],
+      },
+    ]);
+
+    const setPropertyValueByPath = function <T extends Recipe>(object: T, path: Paths<T>, value: any) {
+      const a = path.split(".");
+      let nextProperty: any = object;
+      for (let i = 0, n = a.length - 1; i < n; ++i) {
+        const k = a[i];
+        if (k in nextProperty) {
+          nextProperty = nextProperty[k];
+        } else {
+          return;
+        }
+      }
+      nextProperty[a[a.length - 1]] = value;
+    };
+
+    const image = new Image();
+
+    function updateImageScale() {
+      state.imagePosition.scale = state.imagePosition.dWidth / image.width;
+
+      // force the original ratio to be respected
+      state.imagePosition.dHeight = image.height * state.imagePosition.scale;
+
+      // Don't let images bigger than the canvas be zoomed in more than 1:1 scale
+      // Meaning only let images smaller than the canvas to have a scale > 1
+      if (!state.isImageSmallerThanCanvas && state.imagePosition.scale > 1) {
+        state.imagePosition.scale = 1;
+      }
+    }
+
+    /**
+     * This function will find the title of a recipe with the assumption that the title
+     * has the biggest ratio of surface area / number of words on the image.
+     * @return Returns the text parts of the block with the highest score.
+     */
+    function findRecipeTitle() {
+      const filtered = tsv.value.filter((element) => element.level === 2 || element.level === 5);
+      const blocks = [[]] as OcrTsvResponse[][];
+      let blockNum = 1;
+      filtered.forEach((element, index, array) => {
+        if (index !== 0 && array[index - 1].blockNum !== element.blockNum) {
+          blocks.push([]);
+          blockNum = element.blockNum;
+        }
+        blocks[blockNum - 1].push(element);
+      });
+
+      let bestScore = 0;
+      let bestBlock = blocks[0];
+      blocks.forEach((element) => {
+        // element[0] is the block declaration line containing the blocks total dimensions
+        // element.lenght is the number of words (+ 2) contained in that block
+        const elementScore = (element[0].height * element[0].width) / element.length; // Prettier is adding useless parenthesis for a mysterious reason
+        const elementText = element.map((element) => element.text).join(""); // Identify empty blocks and don't count them
+        if (elementScore > bestScore && elementText !== "") {
+          bestBlock = element;
+          bestScore = elementScore;
+        }
+      });
+
+      return bestBlock
+        .filter((element) => element.level === 5 && element.conf >= 40)
+        .map((element) => {
+          return element.text.trim();
+        })
+        .join(" ");
+    }
+
+    onMounted(() => {
+      invoke(async () => {
+        await until(props.recipe).not.toBeNull();
+
+        const assetName = props.recipe.assets[0].fileName;
+        const imagesrc = assetURL(assetName);
+        image.src = imagesrc;
+
+        const res = await api.ocr.assetToTsv(props.recipe.slug, assetName);
+        tsv.value = res.data as OcrTsvResponse[];
+        state.loading = false;
+
+        if (props.recipe.name.match(/New\sOCR\sRecipe(\s\([0-9]+\))?/g)) {
+          props.recipe.name = findRecipeTitle();
+        }
+
+        nextTick(() => {
+          if (state.canvas === null) return; // never happens because the ref "canvas" is in the template
+          state.ctx = state.canvas.getContext("2d") as CanvasRenderingContext2D;
+          state.ctx.imageSmoothingEnabled = false;
+          state.canvasRect = state.canvas.getBoundingClientRect();
+
+          state.canvas.width = state.canvasRect.width;
+          if (image.width < state.canvas.width) {
+            state.isImageSmallerThanCanvas = true;
+          }
+          state.imagePosition.dWidth = state.canvas.width;
+
+          updateImageScale();
+          state.canvas.height = Math.min(image.height * state.imagePosition.scale, 700); // Max height of 700px
+
+          state.imagePosition.sWidth = image.width;
+          state.imagePosition.sHeight = image.height;
+          state.imagePosition.dWidth = state.canvas.width;
+          drawImage(state.ctx);
+          drawWordBoxesOnCanvas(tsv.value);
+        });
+      });
+    });
+
+    function drawImage(ctx: CanvasRenderingContext2D) {
+      ctx.drawImage(
+        image,
+        state.imagePosition.sx,
+        state.imagePosition.sy,
+        state.imagePosition.sWidth,
+        state.imagePosition.sHeight,
+        state.imagePosition.dx,
+        state.imagePosition.dy,
+        state.imagePosition.dWidth,
+        state.imagePosition.dHeight
+      );
+    }
+
+    function switchCanvasMode(mode: CanvasModes) {
+      if (state.canvasRect === null || state.canvas === null) return;
+      state.canvasMode = mode;
+      toolbarIcons.value[0].highlight = mode;
+      if (mode === "panAndZoom") {
+        state.canvas.style.cursor = "pointer";
+      } else {
+        state.canvas.style.cursor = "default";
+      }
+    }
+
+    function switchSplitTextMode(mode: SelectedTextSplitModes) {
+      if (state.canvasRect === null) return;
+      state.selectedTextSplitMode = mode;
+      toolbarIcons.value[1].highlight = mode;
+      state.selectedText = getWordsInSelection(tsv.value, state.rect);
+    }
+
+    function draw() {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+      if (state.mouse.down) {
+        state.ctx.imageSmoothingEnabled = false;
+        state.ctx.fillStyle = "rgb(255, 255, 255)";
+        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        drawImage(state.ctx);
+        state.ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
+        state.ctx.setLineDash([6]);
+        state.ctx.fillRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
+        state.ctx.strokeRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
+      }
+    }
+
+    function isMouseInRect(mouse: Mouse, rect: CanvasRect) {
+      if (state.canvasRect === null) return;
+      const correctRect = correctRectCoordinates(rect);
+
+      return (
+        mouse.current.x > correctRect.startX &&
+        mouse.current.x < correctRect.startX + correctRect.w &&
+        mouse.current.y > correctRect.startY &&
+        mouse.current.y < correctRect.startY + correctRect.h
+      );
+    }
+
+    function resetSelection() {
+      if (state.canvasRect === null) return;
+      state.rect.w = 0;
+      state.rect.h = 0;
+      state.selectedText = "";
+    }
+
+    function updateMousePos<T extends MouseEvent>(event: T) {
+      if (state.canvas === null) return;
+      state.canvasRect = state.canvas.getBoundingClientRect();
+      state.mouse.current = {
+        x: event.clientX - state.canvasRect.left,
+        y: event.clientY - state.canvasRect.top,
+      };
+    }
+
+    function handleMouseDown(event: MouseEvent) {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+      state.mouse.down = true;
+
+      updateMousePos(event);
+
+      if (state.canvasMode === "selection") {
+        if (isMouseInRect(state.mouse, state.rect)) {
+          // Update the right field in the recipe
+
+          if (state.selectedRecipeField !== "") {
+            setPropertyValueByPath<Recipe>(props.recipe, state.selectedRecipeField, state.selectedText);
+          }
+        } else {
+          state.ctx.fillStyle = "rgb(255, 255, 255)";
+          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+          drawImage(state.ctx);
+          state.rect.startX = state.mouse.current.x;
+          state.rect.startY = state.mouse.current.y;
+          resetSelection();
+        }
+        return;
+      }
+      if (state.canvasMode === "panAndZoom") {
+        state.imagePosition.panStartPoint.x = state.mouse.current.x - state.imagePosition.dx;
+        state.imagePosition.panStartPoint.y = state.mouse.current.y - state.imagePosition.dy;
+        resetSelection();
+      }
+    }
+
+    function handleMouseUp(_event: MouseEvent) {
+      if (state.canvasRect === null) return;
+      state.mouse.down = false;
+      state.selectedText = getWordsInSelection(tsv.value, state.rect);
+    }
+
+    function keepImageInCanvas() {
+      if (state.canvasRect === null || state.canvas === null) return;
+
+      // Prevent image from being smaller than the canvas width
+      if (state.imagePosition.dWidth - state.canvas.width < 0) {
+        state.imagePosition.dWidth = state.canvas.width;
+      }
+
+      // Prevent image from being smaller than the canvas height
+      if (state.imagePosition.dHeight - state.canvas.height < 0) {
+        state.imagePosition.dHeight = image.height * state.imagePosition.scale;
+      }
+
+      // Prevent to move the image too much to the left
+      if (state.canvas.width - state.imagePosition.dx - state.imagePosition.dWidth > 0) {
+        state.imagePosition.dx = state.canvas.width - state.imagePosition.dWidth;
+      }
+
+      // Prevent to move the image too much to the top
+      if (state.canvas.height - state.imagePosition.dy - state.imagePosition.dHeight > 0) {
+        state.imagePosition.dy = state.canvas.height - state.imagePosition.dHeight;
+      }
+
+      // Prevent to move the image too much to the right
+      if (state.imagePosition.dx > 0) {
+        state.imagePosition.dx = 0;
+      }
+
+      // Prevent to move the image too much to the bottom
+      if (state.imagePosition.dy > 0) {
+        state.imagePosition.dy = 0;
+      }
+    }
+
+    function handleMouseMove(event: MouseEvent) {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+
+      updateMousePos(event);
+
+      if (state.mouse.down) {
+        if (state.canvasMode === "selection") {
+          state.rect.w = state.mouse.current.x - state.rect.startX;
+          state.rect.h = state.mouse.current.y - state.rect.startY;
+          draw();
+          return;
+        }
+
+        if (state.canvasMode === "panAndZoom") {
+          state.canvas.style.cursor = "move";
+          state.imagePosition.dx = state.mouse.current.x - state.imagePosition.panStartPoint.x;
+          state.imagePosition.dy = state.mouse.current.y - state.imagePosition.panStartPoint.y;
+          keepImageInCanvas();
+          state.ctx.fillStyle = "rgb(255, 255, 255)";
+          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+          drawImage(state.ctx);
+          return;
+        }
+      }
+
+      if (isMouseInRect(state.mouse, state.rect) && state.canvasMode === "selection") {
+        state.canvas.style.cursor = "pointer";
+      } else {
+        state.canvas.style.cursor = "default";
+      }
+    }
+
+    const scrollSensitivity = 0.05;
+
+    function handleMouseScroll(event: WheelEvent) {
+      if (state.isImageSmallerThanCanvas) return;
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+
+      if (state.canvasMode === "panAndZoom") {
+        event.preventDefault();
+
+        updateMousePos(event);
+
+        const m = Math.sign(event.deltaY);
+
+        const ndx = state.imagePosition.dx + m * state.imagePosition.dWidth * scrollSensitivity;
+        const ndy = state.imagePosition.dy + m * state.imagePosition.dHeight * scrollSensitivity;
+        const ndw = state.imagePosition.dWidth + -m * state.imagePosition.dWidth * scrollSensitivity * 2;
+        const ndh = state.imagePosition.dHeight + -m * state.imagePosition.dHeight * scrollSensitivity * 2;
+
+        if (ndw < image.width) {
+          state.imagePosition.dx = ndx;
+          state.imagePosition.dy = ndy;
+          state.imagePosition.dWidth = ndw;
+          state.imagePosition.dHeight = ndh;
+        }
+
+        keepImageInCanvas();
+        updateImageScale();
+
+        state.ctx.fillStyle = "rgb(255, 255, 255)";
+        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        drawImage(state.ctx);
+      }
+    }
+
+    /**
+     * Returns rectangle coordinates with positive dimensions
+     * @param  rect  A rectangle
+     * @returns  An equivalent rectangle with width and height > 0
+     */
+    function correctRectCoordinates(rect: CanvasRect) {
+      if (rect.w < 0) {
+        rect.startX = rect.startX + rect.w;
+        rect.w = -rect.w;
+      }
+
+      if (rect.h < 0) {
+        rect.startY = rect.startY + rect.h;
+        rect.h = -rect.h;
+      }
+      return rect;
+    }
+
+    function drawWordBoxesOnCanvas(tsv: OcrTsvResponse[]) {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+
+      state.ctx.fillStyle = "rgb(255, 255, 255, 0.3)";
+      tsv
+        .filter((element) => element.level === 5)
+        .forEach((element) => {
+          if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+          state.ctx.fillRect(
+            element.left * state.imagePosition.scale,
+            element.top * state.imagePosition.scale,
+            element.width * state.imagePosition.scale,
+            element.height * state.imagePosition.scale
+          );
+        });
+    }
+
+    /**
+     * Using rectangle coordinates, filters the tsv to get text elements contained
+     * inside the rectangle
+     * Additionaly adds newlines depending on the current "text split" mode
+     * @param  tsv   An Object containing tesseracts tsv fields
+     * @param  rect  Coordinates of a rectangle
+     * @returns Text from tsv contained in the rectangle
+     */
+    function getWordsInSelection(tsv: OcrTsvResponse[], rect: CanvasRect) {
+      const correctedRect = correctRectCoordinates(rect);
+
+      return tsv
+        .filter(
+          (element) =>
+            element.level === 5 &&
+            correctedRect.startY - state.imagePosition.dy < element.top * state.imagePosition.scale &&
+            correctedRect.startX - state.imagePosition.dx < element.left * state.imagePosition.scale &&
+            correctedRect.startX + correctedRect.w >
+              (element.left + element.width) * state.imagePosition.scale + state.imagePosition.dx &&
+            correctedRect.startY + correctedRect.h >
+              (element.top + element.height) * state.imagePosition.scale + state.imagePosition.dy
+        )
+        .map((element, index, array) => {
+          let separator = " ";
+          if (
+            state.selectedTextSplitMode !== "flatten" &&
+            index !== array.length - 1 &&
+            element[state.selectedTextSplitMode] !== array[index + 1][state.selectedTextSplitMode]
+          ) {
+            separator = "\n";
+          }
+          return element.text + separator;
+        })
+        .join("");
+    }
+
+    function addIngredient(ingredients: Array<string> | null = null) {
+      if (ingredients?.length) {
+        const newIngredients = ingredients.map((x) => {
+          return {
+            referenceId: uuid4(),
+            title: "",
+            note: x,
+            unit: undefined,
+            food: undefined,
+            disableAmount: true,
+            quantity: 1,
+          };
+        });
+
+        if (newIngredients) {
+          props.recipe.recipeIngredient?.push(...newIngredients);
+        }
+      } else {
+        props.recipe.recipeIngredient?.push({
+          referenceId: uuid4(),
+          title: "",
+          note: "",
+          unit: undefined,
+          food: undefined,
+          disableAmount: true,
+          quantity: 1,
+        });
+      }
+    }
+
+    function addStep(steps: Array<string> | null = null) {
+      if (!props.recipe.recipeInstructions) {
+        return;
+      }
+
+      if (steps) {
+        const cleanedSteps = steps.map((step) => {
+          return { id: uuid4(), text: step, title: "", ingredientReferences: [] };
+        });
+
+        props.recipe.recipeInstructions.push(...cleanedSteps);
+      } else {
+        props.recipe.recipeInstructions.push({ id: uuid4(), text: "", title: "", ingredientReferences: [] });
+      }
+    }
+
+    async function updateRecipe(recipe: NoUndefinedField<Recipe>) {
+      const { data } = await api.recipes.updateOne(recipe.slug, recipe);
+      if (data?.slug) {
+        router.push("/recipe/" + data.slug);
+      }
+    }
+
+    function setSingleIngredient(f: keyof RecipeIngredient, index: number) {
+      state.selectedRecipeField = `recipeIngredient.${index}.${f}` as SelectedRecipeLeaves;
+    }
+
+    // Leaves<RecipeStep[]> will return some function types making eslint very unhappy
+    type RecipeStepsLeaves = `${number}.${Leaves<RecipeStep>}`;
+
+    function setSingleStep(path: RecipeStepsLeaves) {
+      state.selectedRecipeField = `recipeInstructions.${path}` as SelectedRecipeLeaves;
+    }
+
+    return {
+      ...toRefs(state),
+      addIngredient,
+      addStep,
+      api,
+      drag,
+      assetURL,
+      handleMouseDown,
+      handleMouseUp,
+      handleMouseMove,
+      handleMouseScroll,
+      updateRecipe,
+      tsv,
+      validators,
+      switchCanvasMode,
+      setSingleIngredient,
+      setSingleStep,
+      switchSplitTextMode,
+      toolbarIcons,
+    };
+  },
+});
+</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>
diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/index.ts b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/index.ts
new file mode 100644
index 00000000000..ff8b655f3d1
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/index.ts
@@ -0,0 +1,3 @@
+import RecipeOcrEditorPage from "./RecipeOcrEditorPage.vue";
+
+export default RecipeOcrEditorPage;
diff --git a/frontend/pages/recipe/_slug/ocr-editor.vue b/frontend/pages/recipe/_slug/ocr-editor.vue
index 408358332af..97edfd8c6cb 100644
--- a/frontend/pages/recipe/_slug/ocr-editor.vue
+++ b/frontend/pages/recipe/_slug/ocr-editor.vue
@@ -1,839 +1,25 @@
 <template>
-  <v-container
-    v-if="recipe && recipe.slug && recipe.settings && recipe.recipeIngredient"
-    :class="{
-      'pa-0': $vuetify.breakpoint.smAndDown,
-    }"
-  >
-    <BannerExperimental />
-
-    <v-row v-if="!loading">
-      <v-col cols="12" sm="7" md="7" lg="7">
-        <v-card flat tile>
-          <v-toolbar v-for="(section, idx) in toolbarIcons" :key="section.sectionTitle" dense style="float: left">
-            <v-toolbar-title bottom>
-              {{ section.sectionTitle }}
-            </v-toolbar-title>
-            <v-tooltip v-for="icon in section.icons" :key="icon.name" bottom>
-              <template #activator="{ on, attrs }">
-                <v-btn icon @click="section.eventHandler(icon.name)">
-                  <v-icon :color="section.highlight === icon.name ? 'primary' : 'default'" v-bind="attrs" v-on="on">
-                    {{ icon.icon }}
-                  </v-icon>
-                </v-btn>
-              </template>
-              <span>{{ icon.tooltip }}</span>
-            </v-tooltip>
-            <v-divider v-if="idx != toolbarIcons.length - 1" vertical class="mx-2" />
-          </v-toolbar>
-          <v-toolbar dense style="float: right">
-            <BaseButton class="ml-1 mr-1" save @click="updateRecipe(recipe)">
-              {{ $t("general.save") }}
-            </BaseButton>
-            <BaseButton cancel @click="$router.push('/recipe/' + recipe.slug)">
-              {{ $t("general.close") }}
-            </BaseButton>
-          </v-toolbar>
-          <canvas
-            ref="canvas"
-            @mousedown="handleMouseDown"
-            @mouseup="handleMouseUp"
-            @mousemove="handleMouseMove"
-            @wheel="handleMouseScroll"
-          ></canvas>
-          <span style="white-space: pre-wrap">
-            {{ selectedText }}
-          </span>
-        </v-card>
-
-        <v-card>
-          <v-app-bar dense dark color="primary" class="mb-2">
-            <v-icon large left>
-              {{ $globals.icons.help }}
-            </v-icon>
-            <v-toolbar-title class="headline"> Help </v-toolbar-title>
-            <v-spacer></v-spacer>
-          </v-app-bar>
-          <v-card-text>
-            <h1>Mouse modes</h1>
-            <v-divider class="mb-2 mt-1" />
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.selectMode }} </v-icon>{{ $t("ocr-editor.help.selection-mode") }}
-            </h2>
-            <p class="my-1">{{ $t("ocr-editor.help.selection-mode") }}</p>
-            <ol>
-              <li>{{ $t("ocr-editor.help.selection-mode-steps.draw") }}</li>
-              <li>{{ $t("ocr-editor.help.selection-mode-steps.click") }}</li>
-              <li>{{ $t("ocr-editor.help.selection-mode-steps.result") }}</li>
-            </ol>
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>{{ $t("ocr-editor.help.pan-and-zoom-mode") }}
-            </h2>
-            {{ $t("ocr-editor.help.pan-and-zoom-desc") }}
-            <h1 class="mt-5">{{ $t("ocr-editor.help.split-text-mode") }}</h1>
-            <v-divider class="mb-2 mt-1" />
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.preserveLines }} </v-icon>
-              {{ $t("ocr-editor.help.split-modes.line-mode") }}
-            </h2>
-            <p>
-              {{ $t("ocr-editor.help.split-modes.line-mode-desc") }}
-            </p>
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon>
-              {{ $t("ocr-editor.help.split-modes.block-mode") }}
-            </h2>
-            <p>
-              {{ $t("ocr-editor.help.split-modes.block-mode-desc") }}
-            </p>
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.flatten }} </v-icon> {{ $t("ocr-editor.help.split-modes.flat-mode") }}
-            </h2>
-            <p>{{ $t("ocr-editor.help.split-modes.flat-mode-desc") }}</p>
-          </v-card-text>
-        </v-card>
-      </v-col>
-      <v-col cols="12" sm="5" md="5" lg="5">
-        <v-tabs v-model="tab" fixed-tabs>
-          <v-tab key="header">
-            {{ $t("general.recipe") }}
-          </v-tab>
-          <v-tab key="ingredients">
-            {{ $t("recipe.ingredients") }}
-          </v-tab>
-          <v-tab key="instructions">
-            {{ $t("recipe.instructions") }}
-          </v-tab>
-        </v-tabs>
-        <v-tabs-items v-model="tab">
-          <v-tab-item key="header">
-            <v-text-field
-              v-model="recipe.name"
-              class="my-3"
-              :label="$t('recipe.recipe-name')"
-              :rules="[validators.required]"
-              @focus="selectedRecipeField = 'name'"
-            >
-            </v-text-field>
-
-            <div class="d-flex flex-wrap">
-              <v-text-field
-                v-model="recipe.totalTime"
-                class="mx-2"
-                :label="$t('recipe.total-time')"
-                @click="selectedRecipeField = 'totalTime'"
-              ></v-text-field>
-              <v-text-field
-                v-model="recipe.prepTime"
-                class="mx-2"
-                :label="$t('recipe.prep-time')"
-                @click="selectedRecipeField = 'prepTime'"
-              ></v-text-field>
-              <v-text-field
-                v-model="recipe.performTime"
-                class="mx-2"
-                :label="$t('recipe.perform-time')"
-                @click="selectedRecipeField = 'performTime'"
-              ></v-text-field>
-            </div>
-
-            <v-textarea
-              v-model="recipe.description"
-              auto-grow
-              min-height="100"
-              :label="$t('recipe.description')"
-              @click="selectedRecipeField = 'description'"
-            >
-            </v-textarea>
-            <v-text-field
-              v-model="recipe.recipeYield"
-              dense
-              :label="$t('recipe.servings')"
-              @click="selectedRecipeField = 'recipeYield'"
-            >
-            </v-text-field>
-          </v-tab-item>
-          <v-tab-item key="ingredients">
-            <div class="d-flex justify-end mt-2">
-              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="selectedText" @bulk-data="addIngredient" />
-              <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
-            </div>
-            <draggable
-              v-if="recipe.recipeIngredient.length > 0"
-              v-model="recipe.recipeIngredient"
-              handle=".handle"
-              v-bind="{
-                animation: 200,
-                group: 'description',
-                disabled: false,
-                ghostClass: 'ghost',
-              }"
-              @start="drag = true"
-              @end="drag = false"
-            >
-              <TransitionGroup type="transition" :name="!drag ? 'flip-list' : ''">
-                <RecipeIngredientEditor
-                  v-for="(ingredient, index) in recipe.recipeIngredient"
-                  :key="ingredient.referenceId"
-                  v-model="recipe.recipeIngredient[index]"
-                  class="list-group-item"
-                  :disable-amount="recipe.settings.disableAmount"
-                  @delete="recipe.recipeIngredient.splice(index, 1)"
-                  @clickIngredientField="setSingleIngredient($event, index)"
-                />
-              </TransitionGroup>
-            </draggable>
-          </v-tab-item>
-          <v-tab-item key="instructions">
-            <div class="d-flex justify-end mt-2">
-              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="selectedText" @bulk-data="addStep" />
-              <BaseButton @click="addStep()"> {{ $t("general.new") }}</BaseButton>
-            </div>
-            <RecipeInstructions
-              v-model="recipe.recipeInstructions"
-              :ingredients="recipe.recipeIngredient"
-              :disable-amount="recipe.settings.disableAmount"
-              :edit="true"
-              :recipe-id="recipe.id"
-              :recipe-slug="recipe.slug"
-              :assets.sync="recipe.assets"
-              @clickInstructionField="setSingleStep"
-            />
-          </v-tab-item>
-        </v-tabs-items>
-      </v-col>
-    </v-row>
-  </v-container>
+  <div>
+    <RecipeOcrEditorPage v-if="recipe" :recipe="recipe" />
+  </div>
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  useRoute,
-  ref,
-  onMounted,
-  reactive,
-  toRefs,
-  useRouter,
-  nextTick,
-  useContext,
-} from "@nuxtjs/composition-api";
-import { until } from "@vueuse/core";
-import { invoke } from "@vueuse/shared";
-import draggable from "vuedraggable";
-import { useUserApi, useStaticRoutes } from "~/composables/api";
+import { defineComponent, useRoute } from "@nuxtjs/composition-api";
+import RecipeOcrEditorPage from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue";
 import { useRecipe } from "~/composables/recipes";
-import { OcrTsvResponse } from "~/types/api-types/ocr";
-import { validators } from "~/composables/use-validators";
-import { Recipe, RecipeIngredient, RecipeStep } from "~/types/api-types/recipe";
-import {
-  CanvasRect,
-  ImagePosition,
-  Mouse,
-  Paths,
-  Leaves,
-  SelectedRecipeLeaves,
-  CanvasModes,
-  SelectedTextSplitModes,
-  ToolbarIcons,
-} from "~/types/ocr-types";
-import BannerExperimental from "~/components/global/BannerExperimental.vue";
-import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
-import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
-import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
-import { uuid4 } from "~/composables/use-utils";
-import { NoUndefinedField } from "~/types/api";
 
 export default defineComponent({
-  components: {
-    RecipeIngredientEditor,
-    draggable,
-    BannerExperimental,
-    RecipeDialogBulkAdd,
-    RecipeInstructions,
-  },
+  components: { RecipeOcrEditorPage },
   setup() {
     const route = useRoute();
-    const router = useRouter();
     const slug = route.value.params.slug;
-    const api = useUserApi();
-
-    const { $globals, i18n } = useContext();
-
-    const tsv = ref<OcrTsvResponse[]>([]);
-
-    const { recipe, loading, fetchRecipe } = useRecipe(slug);
-
-    const drag = ref(false);
-
-    const { recipeAssetPath } = useStaticRoutes();
-
-    function assetURL(assetName: string) {
-      return recipeAssetPath(recipe.value?.id as string, assetName);
-    }
-
-    const state = reactive({
-      loading: true,
-      canvas: null as HTMLCanvasElement | null,
-      ctx: null as CanvasRenderingContext2D | null,
-      canvasRect: null as DOMRect | null,
-      tab: null,
-      rect: {
-        startX: 0,
-        startY: 0,
-        w: 0,
-        h: 0,
-      },
-      mouse: {
-        current: {
-          x: 0,
-          y: 0,
-        },
-        down: false,
-      },
-      selectedText: "",
-      selectedRecipeField: "" as SelectedRecipeLeaves | "",
-      canvasMode: "selection" as CanvasModes,
-      imagePosition: {
-        sx: 0,
-        sy: 0,
-        sWidth: 0,
-        sHeight: 0,
-        dx: 0,
-        dy: 0,
-        dWidth: 0,
-        dHeight: 0,
-        scale: 1,
-        panStartPoint: {
-          x: 0,
-          y: 0,
-        },
-      } as ImagePosition,
-      isImageSmallerThanCanvas: false,
-      selectedTextSplitMode: "lineNum" as SelectedTextSplitModes,
-    });
-
-    const toolbarIcons = ref<ToolbarIcons<CanvasModes | SelectedTextSplitModes>>([
-      {
-        sectionTitle: "Toolbar",
-        eventHandler: switchCanvasMode,
-        highlight: state.canvasMode,
-        icons: [
-          {
-            name: "selection",
-            icon: $globals.icons.selectMode,
-            tooltip: i18n.tc("ocr-editor.selection-mode"),
-          },
-          {
-            name: "panAndZoom",
-            icon: $globals.icons.panAndZoom,
-            tooltip: i18n.tc("ocr-editor.pan-and-zoom-picture"),
-          },
-        ],
-      },
-      {
-        sectionTitle: i18n.tc("ocr-editor.split-text"),
-        eventHandler: switchSplitTextMode,
-        highlight: state.selectedTextSplitMode,
-        icons: [
-          {
-            name: "lineNum",
-            icon: $globals.icons.preserveLines,
-            tooltip: i18n.tc("ocr-editor.preserve-line-breaks"),
-          },
-          {
-            name: "blockNum",
-            icon: $globals.icons.preserveBlocks,
-            tooltip: i18n.tc("ocr-editor.split-by-block"),
-          },
-          {
-            name: "flatten",
-            icon: $globals.icons.flatten,
-            tooltip: i18n.tc("ocr-editor.flatten"),
-          },
-        ],
-      },
-    ]);
-
-    const setPropertyValueByPath = function <T extends Recipe>(object: T, path: Paths<T>, value: any) {
-      const a = path.split(".");
-      let nextProperty: any = object;
-      for (let i = 0, n = a.length - 1; i < n; ++i) {
-        const k = a[i];
-        if (k in nextProperty) {
-          nextProperty = nextProperty[k];
-        } else {
-          return;
-        }
-      }
-      nextProperty[a[a.length - 1]] = value;
-    };
-
-    const image = new Image();
-
-    function updateImageScale() {
-      state.imagePosition.scale = state.imagePosition.dWidth / image.width;
-
-      // force the original ratio to be respected
-      state.imagePosition.dHeight = image.height * state.imagePosition.scale;
-
-      // Don't let images bigger than the canvas be zoomed in more than 1:1 scale
-      // Meaning only let images smaller than the canvas to have a scale > 1
-      if (!state.isImageSmallerThanCanvas && state.imagePosition.scale > 1) {
-        state.imagePosition.scale = 1;
-      }
-    }
-
-    /**
-     * This function will find the title of a recipe with the assumption that the title
-     * has the biggest ratio of surface area / number of words on the image.
-     * @return Returns the text parts of the block with the highest score.
-     */
-    function findRecipeTitle() {
-      const filtered = tsv.value.filter((element) => element.level === 2 || element.level === 5);
-      const blocks = [[]] as OcrTsvResponse[][];
-      let blockNum = 1;
-      filtered.forEach((element, index, array) => {
-        if (index !== 0 && array[index - 1].blockNum !== element.blockNum) {
-          blocks.push([]);
-          blockNum = element.blockNum;
-        }
-        blocks[blockNum - 1].push(element);
-      });
-
-      let bestScore = 0;
-      let bestBlock = blocks[0];
-      blocks.forEach((element) => {
-        // element[0] is the block declaration line containing the blocks total dimensions
-        // element.lenght is the number of words (+ 2) contained in that block
-        const elementScore = (element[0].height * element[0].width) / element.length; // Prettier is adding useless parenthesis for a mysterious reason
-        const elementText = element.map((element) => element.text).join(""); // Identify empty blocks and don't count them
-        if (elementScore > bestScore && elementText !== "") {
-          bestBlock = element;
-          bestScore = elementScore;
-        }
-      });
-
-      return bestBlock
-        .filter((element) => element.level === 5 && element.conf >= 40)
-        .map((element) => {
-          return element.text.trim();
-        })
-        .join(" ");
-    }
-
-    onMounted(() => {
-      invoke(async () => {
-        await until(recipe).not.toBeNull();
-
-        if (!recipe.value || !recipe.value.assets || !recipe.value.slug) {
-          return;
-        }
-
-        const assetName = recipe.value?.assets[0].fileName as string;
-        const imagesrc = assetURL(assetName);
-        image.src = imagesrc;
-
-        const res = await api.ocr.assetToTsv(recipe.value.slug, assetName);
-        tsv.value = res.data as OcrTsvResponse[];
-        state.loading = false;
-
-        if (recipe.value.name?.match(/New\sOCR\sRecipe(\s\([0-9]+\))?/g)) {
-          recipe.value.name = findRecipeTitle();
-        }
-
-        nextTick(() => {
-          if (state.canvas === null) return; // never happens because the ref "canvas" is in the template
-          state.ctx = state.canvas.getContext("2d") as CanvasRenderingContext2D;
-          state.ctx.imageSmoothingEnabled = false;
-          state.canvasRect = state.canvas.getBoundingClientRect();
-
-          state.canvas.width = state.canvasRect.width;
-          if (image.width < state.canvas.width) {
-            state.isImageSmallerThanCanvas = true;
-          }
-          state.imagePosition.dWidth = state.canvas.width;
-
-          updateImageScale();
-          state.canvas.height = Math.min(image.height * state.imagePosition.scale, 700); // Max height of 700px
-
-          state.imagePosition.sWidth = image.width;
-          state.imagePosition.sHeight = image.height;
-          state.imagePosition.dWidth = state.canvas.width;
-          drawImage(state.ctx);
-          drawWordBoxesOnCanvas(tsv.value);
-        });
-      });
-    });
-
-    function drawImage(ctx: CanvasRenderingContext2D) {
-      ctx.drawImage(
-        image,
-        state.imagePosition.sx,
-        state.imagePosition.sy,
-        state.imagePosition.sWidth,
-        state.imagePosition.sHeight,
-        state.imagePosition.dx,
-        state.imagePosition.dy,
-        state.imagePosition.dWidth,
-        state.imagePosition.dHeight
-      );
-    }
-
-    function switchCanvasMode(mode: CanvasModes) {
-      if (state.canvasRect === null || state.canvas === null) return;
-      state.canvasMode = mode;
-      toolbarIcons.value[0].highlight = mode;
-      if (mode === "panAndZoom") {
-        state.canvas.style.cursor = "pointer";
-      } else {
-        state.canvas.style.cursor = "default";
-      }
-    }
-
-    function switchSplitTextMode(mode: SelectedTextSplitModes) {
-      if (state.canvasRect === null) return;
-      state.selectedTextSplitMode = mode;
-      toolbarIcons.value[1].highlight = mode;
-      state.selectedText = getWordsInSelection(tsv.value, state.rect);
-    }
-
-    function draw() {
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-      if (state.mouse.down) {
-        state.ctx.imageSmoothingEnabled = false;
-        state.ctx.fillStyle = "rgb(255, 255, 255)";
-        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
-        drawImage(state.ctx);
-        state.ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
-        state.ctx.setLineDash([6]);
-        state.ctx.fillRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
-        state.ctx.strokeRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
-      }
-    }
-
-    function isMouseInRect(mouse: Mouse, rect: CanvasRect) {
-      if (state.canvasRect === null) return;
-      const correctRect = correctRectCoordinates(rect);
-
-      return (
-        mouse.current.x > correctRect.startX &&
-        mouse.current.x < correctRect.startX + correctRect.w &&
-        mouse.current.y > correctRect.startY &&
-        mouse.current.y < correctRect.startY + correctRect.h
-      );
-    }
-
-    function resetSelection() {
-      if (state.canvasRect === null) return;
-      state.rect.w = 0;
-      state.rect.h = 0;
-      state.selectedText = "";
-    }
-
-    function updateMousePos<T extends MouseEvent>(event: T) {
-      if (state.canvas === null) return;
-      state.canvasRect = state.canvas.getBoundingClientRect();
-      state.mouse.current = {
-        x: event.clientX - state.canvasRect.left,
-        y: event.clientY - state.canvasRect.top,
-      };
-    }
-
-    function handleMouseDown(event: MouseEvent) {
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-      state.mouse.down = true;
-
-      updateMousePos(event);
-
-      if (state.canvasMode === "selection") {
-        if (isMouseInRect(state.mouse, state.rect)) {
-          // Update the right field in the recipe
-
-          if (state.selectedRecipeField !== "") {
-            if (recipe.value === null) return;
-            setPropertyValueByPath<Recipe>(recipe.value, state.selectedRecipeField, state.selectedText);
-          }
-        } else {
-          state.ctx.fillStyle = "rgb(255, 255, 255)";
-          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
-          drawImage(state.ctx);
-          state.rect.startX = state.mouse.current.x;
-          state.rect.startY = state.mouse.current.y;
-          resetSelection();
-        }
-        return;
-      }
-      if (state.canvasMode === "panAndZoom") {
-        state.imagePosition.panStartPoint.x = state.mouse.current.x - state.imagePosition.dx;
-        state.imagePosition.panStartPoint.y = state.mouse.current.y - state.imagePosition.dy;
-        resetSelection();
-      }
-    }
-
-    function handleMouseUp(_event: MouseEvent) {
-      if (state.canvasRect === null) return;
-      state.mouse.down = false;
-      state.selectedText = getWordsInSelection(tsv.value, state.rect);
-    }
-
-    function keepImageInCanvas() {
-      if (state.canvasRect === null || state.canvas === null) return;
-
-      // Prevent image from being smaller than the canvas width
-      if (state.imagePosition.dWidth - state.canvas.width < 0) {
-        state.imagePosition.dWidth = state.canvas.width;
-      }
-
-      // Prevent image from being smaller than the canvas height
-      if (state.imagePosition.dHeight - state.canvas.height < 0) {
-        state.imagePosition.dHeight = image.height * state.imagePosition.scale;
-      }
-
-      // Prevent to move the image too much to the left
-      if (state.canvas.width - state.imagePosition.dx - state.imagePosition.dWidth > 0) {
-        state.imagePosition.dx = state.canvas.width - state.imagePosition.dWidth;
-      }
-
-      // Prevent to move the image too much to the top
-      if (state.canvas.height - state.imagePosition.dy - state.imagePosition.dHeight > 0) {
-        state.imagePosition.dy = state.canvas.height - state.imagePosition.dHeight;
-      }
-
-      // Prevent to move the image too much to the right
-      if (state.imagePosition.dx > 0) {
-        state.imagePosition.dx = 0;
-      }
-
-      // Prevent to move the image too much to the bottom
-      if (state.imagePosition.dy > 0) {
-        state.imagePosition.dy = 0;
-      }
-    }
-
-    function handleMouseMove(event: MouseEvent) {
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-
-      updateMousePos(event);
-
-      if (state.mouse.down) {
-        if (state.canvasMode === "selection") {
-          state.rect.w = state.mouse.current.x - state.rect.startX;
-          state.rect.h = state.mouse.current.y - state.rect.startY;
-          draw();
-          return;
-        }
-
-        if (state.canvasMode === "panAndZoom") {
-          state.canvas.style.cursor = "move";
-          state.imagePosition.dx = state.mouse.current.x - state.imagePosition.panStartPoint.x;
-          state.imagePosition.dy = state.mouse.current.y - state.imagePosition.panStartPoint.y;
-          keepImageInCanvas();
-          state.ctx.fillStyle = "rgb(255, 255, 255)";
-          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
-          drawImage(state.ctx);
-          return;
-        }
-      }
-
-      if (isMouseInRect(state.mouse, state.rect) && state.canvasMode === "selection") {
-        state.canvas.style.cursor = "pointer";
-      } else {
-        state.canvas.style.cursor = "default";
-      }
-    }
-
-    const scrollSensitivity = 0.05;
-
-    function handleMouseScroll(event: WheelEvent) {
-      if (state.isImageSmallerThanCanvas) return;
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-
-      if (state.canvasMode === "panAndZoom") {
-        event.preventDefault();
-
-        updateMousePos(event);
-
-        const m = Math.sign(event.deltaY);
-
-        const ndx = state.imagePosition.dx + m * state.imagePosition.dWidth * scrollSensitivity;
-        const ndy = state.imagePosition.dy + m * state.imagePosition.dHeight * scrollSensitivity;
-        const ndw = state.imagePosition.dWidth + -m * state.imagePosition.dWidth * scrollSensitivity * 2;
-        const ndh = state.imagePosition.dHeight + -m * state.imagePosition.dHeight * scrollSensitivity * 2;
-
-        if (ndw < image.width) {
-          state.imagePosition.dx = ndx;
-          state.imagePosition.dy = ndy;
-          state.imagePosition.dWidth = ndw;
-          state.imagePosition.dHeight = ndh;
-        }
-
-        keepImageInCanvas();
-        updateImageScale();
-
-        state.ctx.fillStyle = "rgb(255, 255, 255)";
-        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
-        drawImage(state.ctx);
-      }
-    }
-
-    /**
-     * Returns rectangle coordinates with positive dimensions
-     * @param  rect  A rectangle
-     * @returns  An equivalent rectangle with width and height > 0
-     */
-    function correctRectCoordinates(rect: CanvasRect) {
-      if (rect.w < 0) {
-        rect.startX = rect.startX + rect.w;
-        rect.w = -rect.w;
-      }
-
-      if (rect.h < 0) {
-        rect.startY = rect.startY + rect.h;
-        rect.h = -rect.h;
-      }
-      return rect;
-    }
-
-    function drawWordBoxesOnCanvas(tsv: OcrTsvResponse[]) {
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-
-      state.ctx.fillStyle = "rgb(255, 255, 255, 0.3)";
-      tsv
-        .filter((element) => element.level === 5)
-        .forEach((element) => {
-          if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-          state.ctx.fillRect(
-            element.left * state.imagePosition.scale,
-            element.top * state.imagePosition.scale,
-            element.width * state.imagePosition.scale,
-            element.height * state.imagePosition.scale
-          );
-        });
-    }
-
-    /**
-     * Using rectangle coordinates, filters the tsv to get text elements contained
-     * inside the rectangle
-     * Additionaly adds newlines depending on the current "text split" mode
-     * @param  tsv   An Object containing tesseracts tsv fields
-     * @param  rect  Coordinates of a rectangle
-     * @returns Text from tsv contained in the rectangle
-     */
-    function getWordsInSelection(tsv: OcrTsvResponse[], rect: CanvasRect) {
-      const correctedRect = correctRectCoordinates(rect);
-
-      return tsv
-        .filter(
-          (element) =>
-            element.level === 5 &&
-            correctedRect.startY - state.imagePosition.dy < element.top * state.imagePosition.scale &&
-            correctedRect.startX - state.imagePosition.dx < element.left * state.imagePosition.scale &&
-            correctedRect.startX + correctedRect.w >
-              (element.left + element.width) * state.imagePosition.scale + state.imagePosition.dx &&
-            correctedRect.startY + correctedRect.h >
-              (element.top + element.height) * state.imagePosition.scale + state.imagePosition.dy
-        )
-        .map((element, index, array) => {
-          let separator = " ";
-          if (
-            state.selectedTextSplitMode !== "flatten" &&
-            index !== array.length - 1 &&
-            element[state.selectedTextSplitMode] !== array[index + 1][state.selectedTextSplitMode]
-          ) {
-            separator = "\n";
-          }
-          return element.text + separator;
-        })
-        .join("");
-    }
-
-    function addIngredient(ingredients: Array<string> | null = null) {
-      if (ingredients?.length) {
-        const newIngredients = ingredients.map((x) => {
-          return {
-            referenceId: uuid4(),
-            title: "",
-            note: x,
-            unit: undefined,
-            food: undefined,
-            disableAmount: true,
-            quantity: 1,
-          };
-        });
-
-        if (newIngredients) {
-          recipe?.value?.recipeIngredient?.push(...newIngredients);
-        }
-      } else {
-        recipe?.value?.recipeIngredient?.push({
-          referenceId: uuid4(),
-          title: "",
-          note: "",
-          unit: undefined,
-          food: undefined,
-          disableAmount: true,
-          quantity: 1,
-        });
-      }
-    }
-
-    function addStep(steps: Array<string> | null = null) {
-      if (!recipe.value?.recipeInstructions) {
-        return;
-      }
-
-      if (steps) {
-        const cleanedSteps = steps.map((step) => {
-          return { id: uuid4(), text: step, title: "", ingredientReferences: [] };
-        });
-
-        recipe.value.recipeInstructions.push(...cleanedSteps);
-      } else {
-        recipe.value.recipeInstructions.push({ id: uuid4(), text: "", title: "", ingredientReferences: [] });
-      }
-    }
-
-    async function updateRecipe(recipe: NoUndefinedField<Recipe>) {
-      const { data } = await api.recipes.updateOne(recipe.slug, recipe);
-      if (data?.slug) {
-        router.push("/recipe/" + data.slug);
-      }
-    }
-
-    function setSingleIngredient(f: keyof RecipeIngredient, index: number) {
-      state.selectedRecipeField = `recipeIngredient.${index}.${f}` as SelectedRecipeLeaves;
-    }
-
-    // Leaves<RecipeStep[]> will return some function types making eslint very unhappy
-    type RecipeStepsLeaves = `${number}.${Leaves<RecipeStep>}`;
 
-    function setSingleStep(path: RecipeStepsLeaves) {
-      state.selectedRecipeField = `recipeInstructions.${path}` as SelectedRecipeLeaves;
-    }
+    const { recipe, loading } = useRecipe(slug);
 
     return {
-      ...toRefs(state),
-      addIngredient,
-      addStep,
-      api,
       recipe,
       loading,
-      fetchRecipe,
-      drag,
-      assetURL,
-      handleMouseDown,
-      handleMouseUp,
-      handleMouseMove,
-      handleMouseScroll,
-      updateRecipe,
-      tsv,
-      validators,
-      switchCanvasMode,
-      setSingleIngredient,
-      setSingleStep,
-      switchSplitTextMode,
-      toolbarIcons,
     };
   },
 });

From 3ff376de0de6c54c70005208c96868f5fc4f3daf Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 24 Sep 2022 16:25:08 +0200
Subject: [PATCH 59/62] Create Ocr Editor parts

---
 .../RecipeOcrEditorPage.vue                   | 584 ++----------------
 .../RecipeOcrEditorPageCanvas.vue             | 484 +++++++++++++++
 .../RecipeOcrEditorPageHelp.vue               |  53 ++
 3 files changed, 586 insertions(+), 535 deletions(-)
 create mode 100644 frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue
 create mode 100644 frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue

diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
index 69b548bfdf8..4bbbdc4f7c6 100644
--- a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
@@ -9,89 +9,17 @@
 
     <v-row v-if="!loading">
       <v-col cols="12" sm="7" md="7" lg="7">
-        <v-card flat tile>
-          <v-toolbar v-for="(section, idx) in toolbarIcons" :key="section.sectionTitle" dense style="float: left">
-            <v-toolbar-title bottom>
-              {{ section.sectionTitle }}
-            </v-toolbar-title>
-            <v-tooltip v-for="icon in section.icons" :key="icon.name" bottom>
-              <template #activator="{ on, attrs }">
-                <v-btn icon @click="section.eventHandler(icon.name)">
-                  <v-icon :color="section.highlight === icon.name ? 'primary' : 'default'" v-bind="attrs" v-on="on">
-                    {{ icon.icon }}
-                  </v-icon>
-                </v-btn>
-              </template>
-              <span>{{ icon.tooltip }}</span>
-            </v-tooltip>
-            <v-divider v-if="idx != toolbarIcons.length - 1" vertical class="mx-2" />
-          </v-toolbar>
-          <v-toolbar dense style="float: right">
-            <BaseButton class="ml-1 mr-1" save @click="updateRecipe(recipe)">
-              {{ $t("general.save") }}
-            </BaseButton>
-            <BaseButton cancel @click="$router.push('/recipe/' + recipe.slug)">
-              {{ $t("general.close") }}
-            </BaseButton>
-          </v-toolbar>
-          <canvas
-            ref="canvas"
-            @mousedown="handleMouseDown"
-            @mouseup="handleMouseUp"
-            @mousemove="handleMouseMove"
-            @wheel="handleMouseScroll"
-          ></canvas>
-          <span style="white-space: pre-wrap">
-            {{ selectedText }}
-          </span>
-        </v-card>
-
-        <v-card>
-          <v-app-bar dense dark color="primary" class="mb-2">
-            <v-icon large left>
-              {{ $globals.icons.help }}
-            </v-icon>
-            <v-toolbar-title class="headline"> Help </v-toolbar-title>
-            <v-spacer></v-spacer>
-          </v-app-bar>
-          <v-card-text>
-            <h1>Mouse modes</h1>
-            <v-divider class="mb-2 mt-1" />
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.selectMode }} </v-icon>{{ $t("ocr-editor.help.selection-mode") }}
-            </h2>
-            <p class="my-1">{{ $t("ocr-editor.help.selection-mode") }}</p>
-            <ol>
-              <li>{{ $t("ocr-editor.help.selection-mode-steps.draw") }}</li>
-              <li>{{ $t("ocr-editor.help.selection-mode-steps.click") }}</li>
-              <li>{{ $t("ocr-editor.help.selection-mode-steps.result") }}</li>
-            </ol>
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>{{ $t("ocr-editor.help.pan-and-zoom-mode") }}
-            </h2>
-            {{ $t("ocr-editor.help.pan-and-zoom-desc") }}
-            <h1 class="mt-5">{{ $t("ocr-editor.help.split-text-mode") }}</h1>
-            <v-divider class="mb-2 mt-1" />
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.preserveLines }} </v-icon>
-              {{ $t("ocr-editor.help.split-modes.line-mode") }}
-            </h2>
-            <p>
-              {{ $t("ocr-editor.help.split-modes.line-mode-desc") }}
-            </p>
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon>
-              {{ $t("ocr-editor.help.split-modes.block-mode") }}
-            </h2>
-            <p>
-              {{ $t("ocr-editor.help.split-modes.block-mode-desc") }}
-            </p>
-            <h2 class="my-2">
-              <v-icon> {{ $globals.icons.flatten }} </v-icon> {{ $t("ocr-editor.help.split-modes.flat-mode") }}
-            </h2>
-            <p>{{ $t("ocr-editor.help.split-modes.flat-mode-desc") }}</p>
-          </v-card-text>
-        </v-card>
+        <RecipeOcrEditorPageCanvas
+          :image="canvasImage"
+          :tsv="tsv"
+          @setText="canvasSetText"
+          @update-recipe="updateRecipe"
+          @close-editor="closeEditor"
+          @text-selected="updateSelectedText"
+        >
+        </RecipeOcrEditorPageCanvas>
+
+        <RecipeOcrEditorPageHelp />
       </v-col>
       <v-col cols="12" sm="5" md="5" lg="5">
         <v-tabs v-model="tab" fixed-tabs>
@@ -155,7 +83,7 @@
           </v-tab-item>
           <v-tab-item key="ingredients">
             <div class="d-flex justify-end mt-2">
-              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="selectedText" @bulk-data="addIngredient" />
+              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="canvasSelectedText" @bulk-data="addIngredient" />
               <BaseButton @click="addIngredient"> {{ $t("general.new") }} </BaseButton>
             </div>
             <draggable
@@ -186,7 +114,7 @@
           </v-tab-item>
           <v-tab-item key="instructions">
             <div class="d-flex justify-end mt-2">
-              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="selectedText" @bulk-data="addStep" />
+              <RecipeDialogBulkAdd class="ml-1 mr-1" :input-text-prop="canvasSelectedText" @bulk-data="addStep" />
               <BaseButton @click="addStep()"> {{ $t("general.new") }}</BaseButton>
             </div>
             <RecipeInstructions
@@ -207,16 +135,7 @@
 </template>
 
 <script lang="ts">
-import {
-  defineComponent,
-  ref,
-  onMounted,
-  reactive,
-  toRefs,
-  useRouter,
-  nextTick,
-  useContext,
-} from "@nuxtjs/composition-api";
+import { defineComponent, ref, onMounted, reactive, toRefs, useRouter, nextTick } from "@nuxtjs/composition-api";
 import { until } from "@vueuse/core";
 import { invoke } from "@vueuse/shared";
 import draggable from "vuedraggable";
@@ -224,21 +143,13 @@ import { useUserApi, useStaticRoutes } from "~/composables/api";
 import { OcrTsvResponse } from "~/types/api-types/ocr";
 import { validators } from "~/composables/use-validators";
 import { Recipe, RecipeIngredient, RecipeStep } from "~/types/api-types/recipe";
-import {
-  CanvasRect,
-  ImagePosition,
-  Mouse,
-  Paths,
-  Leaves,
-  SelectedRecipeLeaves,
-  CanvasModes,
-  SelectedTextSplitModes,
-  ToolbarIcons,
-} from "~/types/ocr-types";
+import { Paths, Leaves, SelectedRecipeLeaves } from "~/types/ocr-types";
 import BannerExperimental from "~/components/global/BannerExperimental.vue";
 import RecipeDialogBulkAdd from "~/components/Domain/Recipe/RecipeDialogBulkAdd.vue";
 import RecipeInstructions from "~/components/Domain/Recipe/RecipeInstructions.vue";
 import RecipeIngredientEditor from "~/components/Domain/Recipe/RecipeIngredientEditor.vue";
+import RecipeOcrEditorPageCanvas from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue";
+import RecipeOcrEditorPageHelp from "~/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue";
 import { uuid4 } from "~/composables/use-utils";
 import { NoUndefinedField } from "~/types/api";
 
@@ -249,6 +160,8 @@ export default defineComponent({
     BannerExperimental,
     RecipeDialogBulkAdd,
     RecipeInstructions,
+    RecipeOcrEditorPageCanvas,
+    RecipeOcrEditorPageHelp,
   },
   props: {
     recipe: {
@@ -260,8 +173,6 @@ export default defineComponent({
     const router = useRouter();
     const api = useUserApi();
 
-    const { $globals, i18n } = useContext();
-
     const tsv = ref<OcrTsvResponse[]>([]);
 
     const drag = ref(false);
@@ -274,87 +185,12 @@ export default defineComponent({
 
     const state = reactive({
       loading: true,
-      canvas: null as HTMLCanvasElement | null,
-      ctx: null as CanvasRenderingContext2D | null,
-      canvasRect: null as DOMRect | null,
       tab: null,
-      rect: {
-        startX: 0,
-        startY: 0,
-        w: 0,
-        h: 0,
-      },
-      mouse: {
-        current: {
-          x: 0,
-          y: 0,
-        },
-        down: false,
-      },
-      selectedText: "",
       selectedRecipeField: "" as SelectedRecipeLeaves | "",
-      canvasMode: "selection" as CanvasModes,
-      imagePosition: {
-        sx: 0,
-        sy: 0,
-        sWidth: 0,
-        sHeight: 0,
-        dx: 0,
-        dy: 0,
-        dWidth: 0,
-        dHeight: 0,
-        scale: 1,
-        panStartPoint: {
-          x: 0,
-          y: 0,
-        },
-      } as ImagePosition,
-      isImageSmallerThanCanvas: false,
-      selectedTextSplitMode: "lineNum" as SelectedTextSplitModes,
+      canvasSelectedText: "",
+      canvasImage: new Image(),
     });
 
-    const toolbarIcons = ref<ToolbarIcons<CanvasModes | SelectedTextSplitModes>>([
-      {
-        sectionTitle: "Toolbar",
-        eventHandler: switchCanvasMode,
-        highlight: state.canvasMode,
-        icons: [
-          {
-            name: "selection",
-            icon: $globals.icons.selectMode,
-            tooltip: i18n.tc("ocr-editor.selection-mode"),
-          },
-          {
-            name: "panAndZoom",
-            icon: $globals.icons.panAndZoom,
-            tooltip: i18n.tc("ocr-editor.pan-and-zoom-picture"),
-          },
-        ],
-      },
-      {
-        sectionTitle: i18n.tc("ocr-editor.split-text"),
-        eventHandler: switchSplitTextMode,
-        highlight: state.selectedTextSplitMode,
-        icons: [
-          {
-            name: "lineNum",
-            icon: $globals.icons.preserveLines,
-            tooltip: i18n.tc("ocr-editor.preserve-line-breaks"),
-          },
-          {
-            name: "blockNum",
-            icon: $globals.icons.preserveBlocks,
-            tooltip: i18n.tc("ocr-editor.split-by-block"),
-          },
-          {
-            name: "flatten",
-            icon: $globals.icons.flatten,
-            tooltip: i18n.tc("ocr-editor.flatten"),
-          },
-        ],
-      },
-    ]);
-
     const setPropertyValueByPath = function <T extends Recipe>(object: T, path: Paths<T>, value: any) {
       const a = path.split(".");
       let nextProperty: any = object;
@@ -369,21 +205,6 @@ export default defineComponent({
       nextProperty[a[a.length - 1]] = value;
     };
 
-    const image = new Image();
-
-    function updateImageScale() {
-      state.imagePosition.scale = state.imagePosition.dWidth / image.width;
-
-      // force the original ratio to be respected
-      state.imagePosition.dHeight = image.height * state.imagePosition.scale;
-
-      // Don't let images bigger than the canvas be zoomed in more than 1:1 scale
-      // Meaning only let images smaller than the canvas to have a scale > 1
-      if (!state.isImageSmallerThanCanvas && state.imagePosition.scale > 1) {
-        state.imagePosition.scale = 1;
-      }
-    }
-
     /**
      * This function will find the title of a recipe with the assumption that the title
      * has the biggest ratio of surface area / number of words on the image.
@@ -428,7 +249,7 @@ export default defineComponent({
 
         const assetName = props.recipe.assets[0].fileName;
         const imagesrc = assetURL(assetName);
-        image.src = imagesrc;
+        state.canvasImage.src = imagesrc;
 
         const res = await api.ocr.assetToTsv(props.recipe.slug, assetName);
         tsv.value = res.data as OcrTsvResponse[];
@@ -437,312 +258,9 @@ export default defineComponent({
         if (props.recipe.name.match(/New\sOCR\sRecipe(\s\([0-9]+\))?/g)) {
           props.recipe.name = findRecipeTitle();
         }
-
-        nextTick(() => {
-          if (state.canvas === null) return; // never happens because the ref "canvas" is in the template
-          state.ctx = state.canvas.getContext("2d") as CanvasRenderingContext2D;
-          state.ctx.imageSmoothingEnabled = false;
-          state.canvasRect = state.canvas.getBoundingClientRect();
-
-          state.canvas.width = state.canvasRect.width;
-          if (image.width < state.canvas.width) {
-            state.isImageSmallerThanCanvas = true;
-          }
-          state.imagePosition.dWidth = state.canvas.width;
-
-          updateImageScale();
-          state.canvas.height = Math.min(image.height * state.imagePosition.scale, 700); // Max height of 700px
-
-          state.imagePosition.sWidth = image.width;
-          state.imagePosition.sHeight = image.height;
-          state.imagePosition.dWidth = state.canvas.width;
-          drawImage(state.ctx);
-          drawWordBoxesOnCanvas(tsv.value);
-        });
       });
     });
 
-    function drawImage(ctx: CanvasRenderingContext2D) {
-      ctx.drawImage(
-        image,
-        state.imagePosition.sx,
-        state.imagePosition.sy,
-        state.imagePosition.sWidth,
-        state.imagePosition.sHeight,
-        state.imagePosition.dx,
-        state.imagePosition.dy,
-        state.imagePosition.dWidth,
-        state.imagePosition.dHeight
-      );
-    }
-
-    function switchCanvasMode(mode: CanvasModes) {
-      if (state.canvasRect === null || state.canvas === null) return;
-      state.canvasMode = mode;
-      toolbarIcons.value[0].highlight = mode;
-      if (mode === "panAndZoom") {
-        state.canvas.style.cursor = "pointer";
-      } else {
-        state.canvas.style.cursor = "default";
-      }
-    }
-
-    function switchSplitTextMode(mode: SelectedTextSplitModes) {
-      if (state.canvasRect === null) return;
-      state.selectedTextSplitMode = mode;
-      toolbarIcons.value[1].highlight = mode;
-      state.selectedText = getWordsInSelection(tsv.value, state.rect);
-    }
-
-    function draw() {
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-      if (state.mouse.down) {
-        state.ctx.imageSmoothingEnabled = false;
-        state.ctx.fillStyle = "rgb(255, 255, 255)";
-        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
-        drawImage(state.ctx);
-        state.ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
-        state.ctx.setLineDash([6]);
-        state.ctx.fillRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
-        state.ctx.strokeRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
-      }
-    }
-
-    function isMouseInRect(mouse: Mouse, rect: CanvasRect) {
-      if (state.canvasRect === null) return;
-      const correctRect = correctRectCoordinates(rect);
-
-      return (
-        mouse.current.x > correctRect.startX &&
-        mouse.current.x < correctRect.startX + correctRect.w &&
-        mouse.current.y > correctRect.startY &&
-        mouse.current.y < correctRect.startY + correctRect.h
-      );
-    }
-
-    function resetSelection() {
-      if (state.canvasRect === null) return;
-      state.rect.w = 0;
-      state.rect.h = 0;
-      state.selectedText = "";
-    }
-
-    function updateMousePos<T extends MouseEvent>(event: T) {
-      if (state.canvas === null) return;
-      state.canvasRect = state.canvas.getBoundingClientRect();
-      state.mouse.current = {
-        x: event.clientX - state.canvasRect.left,
-        y: event.clientY - state.canvasRect.top,
-      };
-    }
-
-    function handleMouseDown(event: MouseEvent) {
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-      state.mouse.down = true;
-
-      updateMousePos(event);
-
-      if (state.canvasMode === "selection") {
-        if (isMouseInRect(state.mouse, state.rect)) {
-          // Update the right field in the recipe
-
-          if (state.selectedRecipeField !== "") {
-            setPropertyValueByPath<Recipe>(props.recipe, state.selectedRecipeField, state.selectedText);
-          }
-        } else {
-          state.ctx.fillStyle = "rgb(255, 255, 255)";
-          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
-          drawImage(state.ctx);
-          state.rect.startX = state.mouse.current.x;
-          state.rect.startY = state.mouse.current.y;
-          resetSelection();
-        }
-        return;
-      }
-      if (state.canvasMode === "panAndZoom") {
-        state.imagePosition.panStartPoint.x = state.mouse.current.x - state.imagePosition.dx;
-        state.imagePosition.panStartPoint.y = state.mouse.current.y - state.imagePosition.dy;
-        resetSelection();
-      }
-    }
-
-    function handleMouseUp(_event: MouseEvent) {
-      if (state.canvasRect === null) return;
-      state.mouse.down = false;
-      state.selectedText = getWordsInSelection(tsv.value, state.rect);
-    }
-
-    function keepImageInCanvas() {
-      if (state.canvasRect === null || state.canvas === null) return;
-
-      // Prevent image from being smaller than the canvas width
-      if (state.imagePosition.dWidth - state.canvas.width < 0) {
-        state.imagePosition.dWidth = state.canvas.width;
-      }
-
-      // Prevent image from being smaller than the canvas height
-      if (state.imagePosition.dHeight - state.canvas.height < 0) {
-        state.imagePosition.dHeight = image.height * state.imagePosition.scale;
-      }
-
-      // Prevent to move the image too much to the left
-      if (state.canvas.width - state.imagePosition.dx - state.imagePosition.dWidth > 0) {
-        state.imagePosition.dx = state.canvas.width - state.imagePosition.dWidth;
-      }
-
-      // Prevent to move the image too much to the top
-      if (state.canvas.height - state.imagePosition.dy - state.imagePosition.dHeight > 0) {
-        state.imagePosition.dy = state.canvas.height - state.imagePosition.dHeight;
-      }
-
-      // Prevent to move the image too much to the right
-      if (state.imagePosition.dx > 0) {
-        state.imagePosition.dx = 0;
-      }
-
-      // Prevent to move the image too much to the bottom
-      if (state.imagePosition.dy > 0) {
-        state.imagePosition.dy = 0;
-      }
-    }
-
-    function handleMouseMove(event: MouseEvent) {
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-
-      updateMousePos(event);
-
-      if (state.mouse.down) {
-        if (state.canvasMode === "selection") {
-          state.rect.w = state.mouse.current.x - state.rect.startX;
-          state.rect.h = state.mouse.current.y - state.rect.startY;
-          draw();
-          return;
-        }
-
-        if (state.canvasMode === "panAndZoom") {
-          state.canvas.style.cursor = "move";
-          state.imagePosition.dx = state.mouse.current.x - state.imagePosition.panStartPoint.x;
-          state.imagePosition.dy = state.mouse.current.y - state.imagePosition.panStartPoint.y;
-          keepImageInCanvas();
-          state.ctx.fillStyle = "rgb(255, 255, 255)";
-          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
-          drawImage(state.ctx);
-          return;
-        }
-      }
-
-      if (isMouseInRect(state.mouse, state.rect) && state.canvasMode === "selection") {
-        state.canvas.style.cursor = "pointer";
-      } else {
-        state.canvas.style.cursor = "default";
-      }
-    }
-
-    const scrollSensitivity = 0.05;
-
-    function handleMouseScroll(event: WheelEvent) {
-      if (state.isImageSmallerThanCanvas) return;
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-
-      if (state.canvasMode === "panAndZoom") {
-        event.preventDefault();
-
-        updateMousePos(event);
-
-        const m = Math.sign(event.deltaY);
-
-        const ndx = state.imagePosition.dx + m * state.imagePosition.dWidth * scrollSensitivity;
-        const ndy = state.imagePosition.dy + m * state.imagePosition.dHeight * scrollSensitivity;
-        const ndw = state.imagePosition.dWidth + -m * state.imagePosition.dWidth * scrollSensitivity * 2;
-        const ndh = state.imagePosition.dHeight + -m * state.imagePosition.dHeight * scrollSensitivity * 2;
-
-        if (ndw < image.width) {
-          state.imagePosition.dx = ndx;
-          state.imagePosition.dy = ndy;
-          state.imagePosition.dWidth = ndw;
-          state.imagePosition.dHeight = ndh;
-        }
-
-        keepImageInCanvas();
-        updateImageScale();
-
-        state.ctx.fillStyle = "rgb(255, 255, 255)";
-        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
-        drawImage(state.ctx);
-      }
-    }
-
-    /**
-     * Returns rectangle coordinates with positive dimensions
-     * @param  rect  A rectangle
-     * @returns  An equivalent rectangle with width and height > 0
-     */
-    function correctRectCoordinates(rect: CanvasRect) {
-      if (rect.w < 0) {
-        rect.startX = rect.startX + rect.w;
-        rect.w = -rect.w;
-      }
-
-      if (rect.h < 0) {
-        rect.startY = rect.startY + rect.h;
-        rect.h = -rect.h;
-      }
-      return rect;
-    }
-
-    function drawWordBoxesOnCanvas(tsv: OcrTsvResponse[]) {
-      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-
-      state.ctx.fillStyle = "rgb(255, 255, 255, 0.3)";
-      tsv
-        .filter((element) => element.level === 5)
-        .forEach((element) => {
-          if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
-          state.ctx.fillRect(
-            element.left * state.imagePosition.scale,
-            element.top * state.imagePosition.scale,
-            element.width * state.imagePosition.scale,
-            element.height * state.imagePosition.scale
-          );
-        });
-    }
-
-    /**
-     * Using rectangle coordinates, filters the tsv to get text elements contained
-     * inside the rectangle
-     * Additionaly adds newlines depending on the current "text split" mode
-     * @param  tsv   An Object containing tesseracts tsv fields
-     * @param  rect  Coordinates of a rectangle
-     * @returns Text from tsv contained in the rectangle
-     */
-    function getWordsInSelection(tsv: OcrTsvResponse[], rect: CanvasRect) {
-      const correctedRect = correctRectCoordinates(rect);
-
-      return tsv
-        .filter(
-          (element) =>
-            element.level === 5 &&
-            correctedRect.startY - state.imagePosition.dy < element.top * state.imagePosition.scale &&
-            correctedRect.startX - state.imagePosition.dx < element.left * state.imagePosition.scale &&
-            correctedRect.startX + correctedRect.w >
-              (element.left + element.width) * state.imagePosition.scale + state.imagePosition.dx &&
-            correctedRect.startY + correctedRect.h >
-              (element.top + element.height) * state.imagePosition.scale + state.imagePosition.dy
-        )
-        .map((element, index, array) => {
-          let separator = " ";
-          if (
-            state.selectedTextSplitMode !== "flatten" &&
-            index !== array.length - 1 &&
-            element[state.selectedTextSplitMode] !== array[index + 1][state.selectedTextSplitMode]
-          ) {
-            separator = "\n";
-          }
-          return element.text + separator;
-        })
-        .join("");
-    }
-
     function addIngredient(ingredients: Array<string> | null = null) {
       if (ingredients?.length) {
         const newIngredients = ingredients.map((x) => {
@@ -754,18 +272,22 @@ export default defineComponent({
             food: undefined,
             disableAmount: true,
             quantity: 1,
+            originalText: "",
           };
         });
 
         if (newIngredients) {
-          props.recipe.recipeIngredient?.push(...newIngredients);
+          // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
+          props.recipe.recipeIngredient.push(...newIngredients);
         }
       } else {
-        props.recipe.recipeIngredient?.push({
+        props.recipe.recipeIngredient.push({
           referenceId: uuid4(),
           title: "",
           note: "",
+          // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
           unit: undefined,
+          // @ts-expect-error - prop can be null-type by NoUndefinedField type forces it to be set
           food: undefined,
           disableAmount: true,
           quantity: 1,
@@ -789,13 +311,29 @@ export default defineComponent({
       }
     }
 
-    async function updateRecipe(recipe: NoUndefinedField<Recipe>) {
-      const { data } = await api.recipes.updateOne(recipe.slug, recipe);
+    //  EVENT HANDLERS
+
+    // Canvas component event handlers
+    async function updateRecipe() {
+      const { data } = await api.recipes.updateOne(props.recipe.slug, props.recipe);
       if (data?.slug) {
         router.push("/recipe/" + data.slug);
       }
     }
 
+    function closeEditor() {
+      router.push("/recipe/" + props.recipe.slug);
+    }
+
+    const canvasSetText = function () {
+      setPropertyValueByPath<Recipe>(props.recipe, state.selectedRecipeField, state.canvasSelectedText);
+    };
+
+    function updateSelectedText(value: string) {
+      state.canvasSelectedText = value;
+    }
+
+    // Recipe field selection event handlers
     function setSingleIngredient(f: keyof RecipeIngredient, index: number) {
       state.selectedRecipeField = `recipeIngredient.${index}.${f}` as SelectedRecipeLeaves;
     }
@@ -811,21 +349,16 @@ export default defineComponent({
       ...toRefs(state),
       addIngredient,
       addStep,
-      api,
       drag,
       assetURL,
-      handleMouseDown,
-      handleMouseUp,
-      handleMouseMove,
-      handleMouseScroll,
       updateRecipe,
+      closeEditor,
+      updateSelectedText,
       tsv,
       validators,
-      switchCanvasMode,
       setSingleIngredient,
       setSingleStep,
-      switchSplitTextMode,
-      toolbarIcons,
+      canvasSetText,
     };
   },
 });
@@ -835,23 +368,4 @@ export default defineComponent({
 .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>
diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue
new file mode 100644
index 00000000000..0a685b68422
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageCanvas.vue
@@ -0,0 +1,484 @@
+<template>
+  <v-card flat tile>
+    <v-toolbar v-for="(section, idx) in toolbarIcons" :key="section.sectionTitle" dense style="float: left">
+      <v-toolbar-title bottom>
+        {{ section.sectionTitle }}
+      </v-toolbar-title>
+      <v-tooltip v-for="icon in section.icons" :key="icon.name" bottom>
+        <template #activator="{ on, attrs }">
+          <v-btn icon @click="section.eventHandler(icon.name)">
+            <v-icon :color="section.highlight === icon.name ? 'primary' : 'default'" v-bind="attrs" v-on="on">
+              {{ icon.icon }}
+            </v-icon>
+          </v-btn>
+        </template>
+        <span>{{ icon.tooltip }}</span>
+      </v-tooltip>
+      <v-divider v-if="idx != toolbarIcons.length - 1" vertical class="mx-2" />
+    </v-toolbar>
+    <v-toolbar dense style="float: right">
+      <BaseButton class="ml-1 mr-1" save @click="updateRecipe()">
+        {{ $t("general.save") }}
+      </BaseButton>
+      <BaseButton cancel @click="closeEditor()">
+        {{ $t("general.close") }}
+      </BaseButton>
+    </v-toolbar>
+    <canvas
+      ref="canvas"
+      @mousedown="handleMouseDown"
+      @mouseup="handleMouseUp"
+      @mousemove="handleMouseMove"
+      @wheel="handleMouseScroll"
+    >
+    </canvas>
+    <span style="white-space: pre-wrap">
+      {{ selectedText }}
+    </span>
+  </v-card>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, useContext, ref, toRefs, watch } from "@nuxtjs/composition-api";
+import { onMounted } from "vue-demi";
+import { OcrTsvResponse } from "~/types/api-types/ocr";
+import { CanvasModes, SelectedTextSplitModes, ImagePosition, Mouse, CanvasRect, ToolbarIcons } from "~/types/ocr-types";
+
+export default defineComponent({
+  props: {
+    image: {
+      type: HTMLImageElement,
+      required: true,
+    },
+    tsv: {
+      type: Array as () => OcrTsvResponse[],
+      required: true,
+    },
+  },
+  setup(props, context) {
+    const state = reactive({
+      canvas: null as HTMLCanvasElement | null,
+      ctx: null as CanvasRenderingContext2D | null,
+      canvasRect: null as DOMRect | null,
+      rect: {
+        startX: 0,
+        startY: 0,
+        w: 0,
+        h: 0,
+      },
+      mouse: {
+        current: {
+          x: 0,
+          y: 0,
+        },
+        down: false,
+      },
+      selectedText: "",
+      canvasMode: "selection" as CanvasModes,
+      imagePosition: {
+        sx: 0,
+        sy: 0,
+        sWidth: 0,
+        sHeight: 0,
+        dx: 0,
+        dy: 0,
+        dWidth: 0,
+        dHeight: 0,
+        scale: 1,
+        panStartPoint: {
+          x: 0,
+          y: 0,
+        },
+      } as ImagePosition,
+      isImageSmallerThanCanvas: false,
+      selectedTextSplitMode: "lineNum" as SelectedTextSplitModes,
+    });
+
+    watch(
+      () => state.selectedText,
+      (value) => {
+        context.emit("text-selected", value);
+      }
+    );
+
+    onMounted(() => {
+      if (state.canvas === null) return; // never happens because the ref "canvas" is in the template
+      state.ctx = state.canvas.getContext("2d") as CanvasRenderingContext2D;
+      state.ctx.imageSmoothingEnabled = false;
+      state.canvasRect = state.canvas.getBoundingClientRect();
+
+      state.canvas.width = state.canvasRect.width;
+      if (props.image.width < state.canvas.width) {
+        state.isImageSmallerThanCanvas = true;
+      }
+      state.imagePosition.dWidth = state.canvas.width;
+
+      updateImageScale();
+      state.canvas.height = Math.min(props.image.height * state.imagePosition.scale, 700); // Max height of 700px
+
+      state.imagePosition.sWidth = props.image.width;
+      state.imagePosition.sHeight = props.image.height;
+      state.imagePosition.dWidth = state.canvas.width;
+      drawImage(state.ctx);
+      drawWordBoxesOnCanvas(props.tsv);
+    });
+
+    function handleMouseDown(event: MouseEvent) {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+      state.mouse.down = true;
+
+      updateMousePos(event);
+
+      if (state.canvasMode === "selection") {
+        if (isMouseInRect(state.mouse, state.rect)) {
+          context.emit("setText", state.selectedText);
+        } else {
+          state.ctx.fillStyle = "rgb(255, 255, 255)";
+          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+          drawImage(state.ctx);
+          state.rect.startX = state.mouse.current.x;
+          state.rect.startY = state.mouse.current.y;
+          resetSelection();
+        }
+        return;
+      }
+
+      if (state.canvasMode === "panAndZoom") {
+        state.imagePosition.panStartPoint.x = state.mouse.current.x - state.imagePosition.dx;
+        state.imagePosition.panStartPoint.y = state.mouse.current.y - state.imagePosition.dy;
+        resetSelection();
+      }
+    }
+
+    function handleMouseUp(_event: MouseEvent) {
+      if (state.canvasRect === null) return;
+      state.mouse.down = false;
+      state.selectedText = getWordsInSelection(props.tsv, state.rect);
+    }
+
+    function handleMouseMove(event: MouseEvent) {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+
+      updateMousePos(event);
+
+      if (state.mouse.down) {
+        if (state.canvasMode === "selection") {
+          state.rect.w = state.mouse.current.x - state.rect.startX;
+          state.rect.h = state.mouse.current.y - state.rect.startY;
+          draw();
+          return;
+        }
+
+        if (state.canvasMode === "panAndZoom") {
+          state.canvas.style.cursor = "move";
+          state.imagePosition.dx = state.mouse.current.x - state.imagePosition.panStartPoint.x;
+          state.imagePosition.dy = state.mouse.current.y - state.imagePosition.panStartPoint.y;
+          keepImageInCanvas();
+          state.ctx.fillStyle = "rgb(255, 255, 255)";
+          state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+          drawImage(state.ctx);
+          return;
+        }
+      }
+
+      if (isMouseInRect(state.mouse, state.rect) && state.canvasMode === "selection") {
+        state.canvas.style.cursor = "pointer";
+      } else {
+        state.canvas.style.cursor = "default";
+      }
+    }
+
+    const scrollSensitivity = 0.05;
+
+    function handleMouseScroll(event: WheelEvent) {
+      if (state.isImageSmallerThanCanvas) return;
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+
+      if (state.canvasMode === "panAndZoom") {
+        event.preventDefault();
+
+        updateMousePos(event);
+
+        const m = Math.sign(event.deltaY);
+
+        const ndx = state.imagePosition.dx + m * state.imagePosition.dWidth * scrollSensitivity;
+        const ndy = state.imagePosition.dy + m * state.imagePosition.dHeight * scrollSensitivity;
+        const ndw = state.imagePosition.dWidth + -m * state.imagePosition.dWidth * scrollSensitivity * 2;
+        const ndh = state.imagePosition.dHeight + -m * state.imagePosition.dHeight * scrollSensitivity * 2;
+
+        if (ndw < props.image.width) {
+          state.imagePosition.dx = ndx;
+          state.imagePosition.dy = ndy;
+          state.imagePosition.dWidth = ndw;
+          state.imagePosition.dHeight = ndh;
+        }
+
+        keepImageInCanvas();
+        updateImageScale();
+
+        state.ctx.fillStyle = "rgb(255, 255, 255)";
+        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        drawImage(state.ctx);
+      }
+    }
+
+    function draw() {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+      if (state.mouse.down) {
+        state.ctx.imageSmoothingEnabled = false;
+        state.ctx.fillStyle = "rgb(255, 255, 255)";
+        state.ctx.fillRect(0, 0, state.canvas.width, state.canvas.height);
+        drawImage(state.ctx);
+        state.ctx.fillStyle = "rgba(255, 255, 255, 0.1)";
+        state.ctx.setLineDash([6]);
+        state.ctx.fillRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
+        state.ctx.strokeRect(state.rect.startX, state.rect.startY, state.rect.w, state.rect.h);
+      }
+    }
+
+    function drawImage(ctx: CanvasRenderingContext2D) {
+      ctx.drawImage(
+        props.image,
+        state.imagePosition.sx,
+        state.imagePosition.sy,
+        state.imagePosition.sWidth,
+        state.imagePosition.sHeight,
+        state.imagePosition.dx,
+        state.imagePosition.dy,
+        state.imagePosition.dWidth,
+        state.imagePosition.dHeight
+      );
+    }
+
+    function keepImageInCanvas() {
+      if (state.canvasRect === null || state.canvas === null) return;
+
+      // Prevent image from being smaller than the canvas width
+      if (state.imagePosition.dWidth - state.canvas.width < 0) {
+        state.imagePosition.dWidth = state.canvas.width;
+      }
+
+      // Prevent image from being smaller than the canvas height
+      if (state.imagePosition.dHeight - state.canvas.height < 0) {
+        state.imagePosition.dHeight = props.image.height * state.imagePosition.scale;
+      }
+
+      // Prevent to move the image too much to the left
+      if (state.canvas.width - state.imagePosition.dx - state.imagePosition.dWidth > 0) {
+        state.imagePosition.dx = state.canvas.width - state.imagePosition.dWidth;
+      }
+
+      // Prevent to move the image too much to the top
+      if (state.canvas.height - state.imagePosition.dy - state.imagePosition.dHeight > 0) {
+        state.imagePosition.dy = state.canvas.height - state.imagePosition.dHeight;
+      }
+
+      // Prevent to move the image too much to the right
+      if (state.imagePosition.dx > 0) {
+        state.imagePosition.dx = 0;
+      }
+
+      // Prevent to move the image too much to the bottom
+      if (state.imagePosition.dy > 0) {
+        state.imagePosition.dy = 0;
+      }
+    }
+
+    function updateImageScale() {
+      state.imagePosition.scale = state.imagePosition.dWidth / props.image.width;
+
+      // force the original ratio to be respected
+      state.imagePosition.dHeight = props.image.height * state.imagePosition.scale;
+
+      // Don't let images bigger than the canvas be zoomed in more than 1:1 scale
+      // Meaning only let images smaller than the canvas to have a scale > 1
+      if (!state.isImageSmallerThanCanvas && state.imagePosition.scale > 1) {
+        state.imagePosition.scale = 1;
+      }
+    }
+
+    function resetSelection() {
+      if (state.canvasRect === null) return;
+      state.rect.w = 0;
+      state.rect.h = 0;
+      state.selectedText = "";
+    }
+
+    function updateMousePos<T extends MouseEvent>(event: T) {
+      if (state.canvas === null) return;
+      state.canvasRect = state.canvas.getBoundingClientRect();
+      state.mouse.current = {
+        x: event.clientX - state.canvasRect.left,
+        y: event.clientY - state.canvasRect.top,
+      };
+    }
+
+    function isMouseInRect(mouse: Mouse, rect: CanvasRect) {
+      if (state.canvasRect === null) return;
+      const correctRect = correctRectCoordinates(rect);
+
+      return (
+        mouse.current.x > correctRect.startX &&
+        mouse.current.x < correctRect.startX + correctRect.w &&
+        mouse.current.y > correctRect.startY &&
+        mouse.current.y < correctRect.startY + correctRect.h
+      );
+    }
+
+    /**
+     * Returns rectangle coordinates with positive dimensions
+     * @param  rect  A rectangle
+     * @returns  An equivalent rectangle with width and height > 0
+     */
+    function correctRectCoordinates(rect: CanvasRect) {
+      if (rect.w < 0) {
+        rect.startX = rect.startX + rect.w;
+        rect.w = -rect.w;
+      }
+
+      if (rect.h < 0) {
+        rect.startY = rect.startY + rect.h;
+        rect.h = -rect.h;
+      }
+      return rect;
+    }
+
+    function drawWordBoxesOnCanvas(tsv: OcrTsvResponse[]) {
+      if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+
+      state.ctx.fillStyle = "rgb(255, 255, 255, 0.3)";
+      tsv
+        .filter((element) => element.level === 5)
+        .forEach((element) => {
+          if (state.canvasRect === null || state.canvas === null || state.ctx === null) return;
+          state.ctx.fillRect(
+            element.left * state.imagePosition.scale,
+            element.top * state.imagePosition.scale,
+            element.width * state.imagePosition.scale,
+            element.height * state.imagePosition.scale
+          );
+        });
+    }
+
+    // Event emitters
+    const updateRecipe = function () {
+      context.emit("update-recipe");
+    };
+
+    const closeEditor = function () {
+      context.emit("close-editor");
+    };
+
+    // TOOLBAR STUFF
+
+    const { $globals, i18n } = useContext();
+
+    const toolbarIcons = ref<ToolbarIcons<CanvasModes | SelectedTextSplitModes>>([
+      {
+        sectionTitle: "Toolbar",
+        eventHandler: switchCanvasMode,
+        highlight: state.canvasMode,
+        icons: [
+          {
+            name: "selection",
+            icon: $globals.icons.selectMode,
+            tooltip: i18n.tc("ocr-editor.selection-mode"),
+          },
+          {
+            name: "panAndZoom",
+            icon: $globals.icons.panAndZoom,
+            tooltip: i18n.tc("ocr-editor.pan-and-zoom-picture"),
+          },
+        ],
+      },
+      {
+        sectionTitle: i18n.tc("ocr-editor.split-text"),
+        eventHandler: switchSplitTextMode,
+        highlight: state.selectedTextSplitMode,
+        icons: [
+          {
+            name: "lineNum",
+            icon: $globals.icons.preserveLines,
+            tooltip: i18n.tc("ocr-editor.preserve-line-breaks"),
+          },
+          {
+            name: "blockNum",
+            icon: $globals.icons.preserveBlocks,
+            tooltip: i18n.tc("ocr-editor.split-by-block"),
+          },
+          {
+            name: "flatten",
+            icon: $globals.icons.flatten,
+            tooltip: i18n.tc("ocr-editor.flatten"),
+          },
+        ],
+      },
+    ]);
+
+    function switchCanvasMode(mode: CanvasModes) {
+      if (state.canvasRect === null || state.canvas === null) return;
+      state.canvasMode = mode;
+      toolbarIcons.value[0].highlight = mode;
+      if (mode === "panAndZoom") {
+        state.canvas.style.cursor = "pointer";
+      } else {
+        state.canvas.style.cursor = "default";
+      }
+    }
+
+    function switchSplitTextMode(mode: SelectedTextSplitModes) {
+      if (state.canvasRect === null) return;
+      state.selectedTextSplitMode = mode;
+      toolbarIcons.value[1].highlight = mode;
+      state.selectedText = getWordsInSelection(props.tsv, state.rect);
+    }
+
+    /**
+     * Using rectangle coordinates, filters the tsv to get text elements contained
+     * inside the rectangle
+     * Additionaly adds newlines depending on the current "text split" mode
+     * @param  tsv   An Object containing tesseracts tsv fields
+     * @param  rect  Coordinates of a rectangle
+     * @returns Text from tsv contained in the rectangle
+     */
+    function getWordsInSelection(tsv: OcrTsvResponse[], rect: CanvasRect) {
+      const correctedRect = correctRectCoordinates(rect);
+
+      return tsv
+        .filter(
+          (element) =>
+            element.level === 5 &&
+            correctedRect.startY - state.imagePosition.dy < element.top * state.imagePosition.scale &&
+            correctedRect.startX - state.imagePosition.dx < element.left * state.imagePosition.scale &&
+            correctedRect.startX + correctedRect.w >
+              (element.left + element.width) * state.imagePosition.scale + state.imagePosition.dx &&
+            correctedRect.startY + correctedRect.h >
+              (element.top + element.height) * state.imagePosition.scale + state.imagePosition.dy
+        )
+        .map((element, index, array) => {
+          let separator = " ";
+          if (
+            state.selectedTextSplitMode !== "flatten" &&
+            index !== array.length - 1 &&
+            element[state.selectedTextSplitMode] !== array[index + 1][state.selectedTextSplitMode]
+          ) {
+            separator = "\n";
+          }
+          return element.text + separator;
+        })
+        .join("");
+    }
+
+    return {
+      ...toRefs(state),
+      handleMouseDown,
+      handleMouseUp,
+      handleMouseMove,
+      handleMouseScroll,
+      toolbarIcons,
+      updateRecipe,
+      closeEditor,
+    };
+  },
+});
+</script>
diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue
new file mode 100644
index 00000000000..9205be67eec
--- /dev/null
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue
@@ -0,0 +1,53 @@
+<template>
+  <v-card>
+    <v-app-bar dense dark color="primary" class="mb-2">
+      <v-icon large left>
+        {{ $globals.icons.help }}
+      </v-icon>
+      <v-toolbar-title class="headline"> Help </v-toolbar-title>
+      <v-spacer></v-spacer>
+    </v-app-bar>
+    <v-card-text>
+      <h1>Mouse modes</h1>
+      <v-divider class="mb-2 mt-1" />
+      <h2 class="my-2">
+        <v-icon> {{ $globals.icons.selectMode }} </v-icon>{{ $t("ocr-editor.help.selection-mode") }}
+      </h2>
+      <p class="my-1">{{ $t("ocr-editor.help.selection-mode") }}</p>
+      <ol>
+        <li>{{ $t("ocr-editor.help.selection-mode-steps.draw") }}</li>
+        <li>{{ $t("ocr-editor.help.selection-mode-steps.click") }}</li>
+        <li>{{ $t("ocr-editor.help.selection-mode-steps.result") }}</li>
+      </ol>
+      <h2 class="my-2">
+        <v-icon> {{ $globals.icons.panAndZoom }} </v-icon>{{ $t("ocr-editor.help.pan-and-zoom-mode") }}
+      </h2>
+      {{ $t("ocr-editor.help.pan-and-zoom-desc") }}
+      <h1 class="mt-5">{{ $t("ocr-editor.help.split-text-mode") }}</h1>
+      <v-divider class="mb-2 mt-1" />
+      <h2 class="my-2">
+        <v-icon> {{ $globals.icons.preserveLines }} </v-icon>
+        {{ $t("ocr-editor.help.split-modes.line-mode") }}
+      </h2>
+      <p>
+        {{ $t("ocr-editor.help.split-modes.line-mode-desc") }}
+      </p>
+      <h2 class="my-2">
+        <v-icon> {{ $globals.icons.preserveBlocks }} </v-icon>
+        {{ $t("ocr-editor.help.split-modes.block-mode") }}
+      </h2>
+      <p>
+        {{ $t("ocr-editor.help.split-modes.block-mode-desc") }}
+      </p>
+      <h2 class="my-2">
+        <v-icon> {{ $globals.icons.flatten }} </v-icon> {{ $t("ocr-editor.help.split-modes.flat-mode") }}
+      </h2>
+      <p>{{ $t("ocr-editor.help.split-modes.flat-mode-desc") }}</p>
+    </v-card-text>
+  </v-card>
+</template>
+<script lang="ts">
+import { defineComponent } from "@nuxtjs/composition-api";
+
+export default defineComponent({});
+</script>

From ac9da82a663a930f8e252ae68bb414b1843b5da5 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 24 Sep 2022 17:11:13 +0200
Subject: [PATCH 60/62] Safeguard recipe properties access

---
 .../Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
index 4bbbdc4f7c6..4a324f31d8a 100644
--- a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
@@ -326,7 +326,9 @@ export default defineComponent({
     }
 
     const canvasSetText = function () {
-      setPropertyValueByPath<Recipe>(props.recipe, state.selectedRecipeField, state.canvasSelectedText);
+      if (state.selectedRecipeField !== "") {
+        setPropertyValueByPath<Recipe>(props.recipe, state.selectedRecipeField, state.canvasSelectedText);
+      }
     };
 
     function updateSelectedText(value: string) {

From ad59df2a645bf00dfdf2900cd4d3d5fd24b0e0a5 Mon Sep 17 00:00:00 2001
From: Miroito <alban.vachette@gmail.com>
Date: Sat, 24 Sep 2022 17:41:16 +0200
Subject: [PATCH 61/62] Add loading frontend animation due to longer request
 time

---
 .../Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
index 4a324f31d8a..762bb79f679 100644
--- a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
@@ -7,6 +7,12 @@
   >
     <BannerExperimental />
 
+    <div v-if="loading">
+      <v-spacer />
+      <v-progress-circular indeterminate class="" color="primary"> </v-progress-circular>
+      {{ loadingText }}
+      <v-spacer />
+    </div>
     <v-row v-if="!loading">
       <v-col cols="12" sm="7" md="7" lg="7">
         <RecipeOcrEditorPageCanvas
@@ -135,7 +141,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, onMounted, reactive, toRefs, useRouter, nextTick } from "@nuxtjs/composition-api";
+import { defineComponent, ref, onMounted, reactive, toRefs, useRouter } from "@nuxtjs/composition-api";
 import { until } from "@vueuse/core";
 import { invoke } from "@vueuse/shared";
 import draggable from "vuedraggable";
@@ -185,6 +191,7 @@ export default defineComponent({
 
     const state = reactive({
       loading: true,
+      loadingText: "Loading recipe...",
       tab: null,
       selectedRecipeField: "" as SelectedRecipeLeaves | "",
       canvasSelectedText: "",
@@ -246,6 +253,7 @@ export default defineComponent({
     onMounted(() => {
       invoke(async () => {
         await until(props.recipe).not.toBeNull();
+        state.loadingText = "Loading OCR data...";
 
         const assetName = props.recipe.assets[0].fileName;
         const imagesrc = assetURL(assetName);

From 6727b6864b5e4139c4cf8f949810f6da62ed7e4d Mon Sep 17 00:00:00 2001
From: Hayden <64056131+hay-kot@users.noreply.github.com>
Date: Sun, 25 Sep 2022 14:51:17 -0800
Subject: [PATCH 62/62] minor cleanup chores

---
 .../Domain/Recipe/RecipeIngredientEditor.vue       |  6 +++---
 .../RecipeOcrEditorPage/RecipeOcrEditorPage.vue    |  2 +-
 .../RecipeOcrEditorPageHelp.vue                    |  1 +
 frontend/pages/recipe/_slug/ingredient-parser.vue  | 14 +++++++++++---
 frontend/types/ocr-types.ts                        | 12 ++++++------
 5 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
index faea6c1002b..f131f55bf8e 100644
--- a/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
+++ b/frontend/components/Domain/Recipe/RecipeIngredientEditor.vue
@@ -88,7 +88,7 @@
             dense
             solo
             class="mx-1"
-            placeholder="$t('recipe.notes')"
+            :placeholder="$t('recipe.notes')"
             @click="$emit('clickIngredientField', 'note')"
           >
             <v-icon v-if="disableAmount && $listeners && $listeners.delete" slot="prepend" class="mr-n1 handle">
@@ -102,12 +102,12 @@
             :buttons="[
               {
                 icon: $globals.icons.delete,
-                text: $t('general.delete'),
+                text: $tc('general.delete'),
                 event: 'delete',
               },
               {
                 icon: $globals.icons.dotsVertical,
-                text: $t('general.menu'),
+                text: $tc('general.menu'),
                 event: 'open',
                 children: contextMenuOptions,
               },
diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
index 762bb79f679..58355ad6db3 100644
--- a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPage.vue
@@ -233,7 +233,7 @@ export default defineComponent({
       let bestBlock = blocks[0];
       blocks.forEach((element) => {
         // element[0] is the block declaration line containing the blocks total dimensions
-        // element.lenght is the number of words (+ 2) contained in that block
+        // element.length is the number of words (+ 2) contained in that block
         const elementScore = (element[0].height * element[0].width) / element.length; // Prettier is adding useless parenthesis for a mysterious reason
         const elementText = element.map((element) => element.text).join(""); // Identify empty blocks and don't count them
         if (elementScore > bestScore && elementText !== "") {
diff --git a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue
index 9205be67eec..a14ba02e3e2 100644
--- a/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue
+++ b/frontend/components/Domain/Recipe/RecipeOcrEditorPage/RecipeOcrEditorPageParts/RecipeOcrEditorPageHelp.vue
@@ -46,6 +46,7 @@
     </v-card-text>
   </v-card>
 </template>
+
 <script lang="ts">
 import { defineComponent } from "@nuxtjs/composition-api";
 
diff --git a/frontend/pages/recipe/_slug/ingredient-parser.vue b/frontend/pages/recipe/_slug/ingredient-parser.vue
index e49ad8cb629..15a40b57b44 100644
--- a/frontend/pages/recipe/_slug/ingredient-parser.vue
+++ b/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;
diff --git a/frontend/types/ocr-types.ts b/frontend/types/ocr-types.ts
index af2082e80df..85e9514931e 100644
--- a/frontend/types/ocr-types.ts
+++ b/frontend/types/ocr-types.ts
@@ -41,18 +41,18 @@ type Join<K, P> = K extends string | number
     : never
   : never;
 
-export type Paths<T, D extends number = 10> = [D] extends [never]
+export type Leaves<T, D extends number = 10> = [D] extends [never]
   ? never
   : T extends object
-  ? {
-      [K in keyof T]-?: K extends string | number ? `${K}` | Join<K, Paths<T[K], Prev[D]>> : never;
-    }[keyof T]
+  ? { [K in keyof T]-?: Join<K, Leaves<T[K], Prev[D]>> }[keyof T]
   : "";
 
-export type Leaves<T, D extends number = 10> = [D] extends [never]
+export type Paths<T, D extends number = 10> = [D] extends [never]
   ? never
   : T extends object
-  ? { [K in keyof T]-?: Join<K, Leaves<T[K], Prev[D]>> }[keyof T]
+  ? {
+      [K in keyof T]-?: K extends string | number ? `${K}` | Join<K, Paths<T[K], Prev[D]>> : never;
+    }[keyof T]
   : "";
 
 export type SelectedRecipeLeaves = Leaves<Recipe>;