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

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

Browse source 
* Add pytesseract

* Add simple ocr endpoint

replace extension argument

* feat/ocr-editor gui

* fix frontend linting issues

* Add service unit tests

* Add split text modes & single ingredient/instruction editing

* make split mode really reactive

* Remove default step and ingredient

* make the linter haappy

* Accept only image uploads

* Add automatic recipe title suggestion

* Correct regex

* fix incorrect array.map method usage

* make the linter happy again

* Swap route to use asset name

* Rearange buttons

* fix test data

* feat: Allow making image the recipe image

* Add translation

* Make the linter happy

* Restrict function setPropertyValueByPath generic

* Restrict template literal type

* Add a more friendly icon to creation page

* update poetry lock file

* Correct sloppy ocr classes

* Make MyPy happy

* Rewrite safer tests

* Add tesseract to backend test CI container dependencies

* Make canvas element a component global

* Remove unwanted spaces in selected text

* Add way to know if recipe was created with ocr

* Access to ocr-editor for ocr recipes

* Update Alembic revision

* Make the frontend build

* Fix scrolling offset bug

* Allow creation of recipes with custom settings

* Fix rebasing mistakes

* Add format_tsv_output test

* Exclude the tests data directory only

* Enforce camelCase for frontend functions

* Remove import of unused component

* Fix type and class initialization

* Add multi-language support

* Highlight words in mount

* Fix image ratio bug

* Better ocr creation page

* Revert awkward feature to scroll in Selection mode

* Rebasing alembic migrations sux

* Remove obsolete getShared function

* Add function docstring

* Move down ocr creation option

* Make toolbar icons more generic

* Show help at the bottom of the page

* move ocr types to own file

* Use template ref for the canvas

* Use i18n.tc to get strings directly

* Correct naming mistake

* Move Ocr editor to own directory

* Create Ocr Editor parts

* Safeguard recipe properties access

* Add loading frontend animation due to longer request time

* minor cleanup chores

Co-authored-by: Miroito <alban.vachette@gmail.com>
This commit is contained in:
Hayden 2022-09-25 15:00:45 -08:00 • committed by GitHub
parent a8f3922907
commit 39adea4ee3
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
44 changed files with 1659 additions and 34 deletions
Download patch file Download diff file Expand all files Collapse all files

81
frontend/pages/recipe/create/ocr.vue Normal file
View file

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