feat: Import + Translate recipe images with OpenAI (#3974)

Co-authored-by: Johan Lindell <johan@lindell.me>
Co-authored-by: boc-the-git <3479092+boc-the-git@users.noreply.github.com>

frontend/components/Layout/DefaultLayout.vue

@@ -1,25 +1,26 @@
 <template>
-    <v-app dark>
-      <TheSnackbar />
+  <v-app dark>
+    <TheSnackbar />
 
-      <AppSidebar
-        v-model="sidebar"
-        absolute
-        :top-link="topLinks"
-        :secondary-links="cookbookLinks || []"
-        :bottom-links="isAdmin ? bottomLinks : []"
-      >
-        <v-menu offset-y nudge-bottom="5" close-delay="50" nudge-right="15">
-          <template #activator="{ on, attrs }">
-            <v-btn v-if="isOwnGroup" rounded large class="ml-2 mt-3" v-bind="attrs" v-on="on">
-              <v-icon left large color="primary">
-                {{ $globals.icons.createAlt }}
-              </v-icon>
-              {{ $t("general.create") }}
-            </v-btn>
-          </template>
-          <v-list dense class="my-0 py-0">
-            <template v-for="(item, index) in createLinks">
+    <AppSidebar
+      v-model="sidebar"
+      absolute
+      :top-link="topLinks"
+      :secondary-links="cookbookLinks || []"
+      :bottom-links="isAdmin ? bottomLinks : []"
+    >
+      <v-menu offset-y nudge-bottom="5" close-delay="50" nudge-right="15">
+        <template #activator="{ on, attrs }">
+          <v-btn v-if="isOwnGroup" rounded large class="ml-2 mt-3" v-bind="attrs" v-on="on">
+            <v-icon left large color="primary">
+              {{ $globals.icons.createAlt }}
+            </v-icon>
+            {{ $t("general.create") }}
+          </v-btn>
+        </template>
+        <v-list dense class="my-0 py-0">
+          <template v-for="(item, index) in createLinks">
+            <div v-if="!item.hide" :key="item.title">
               <v-divider v-if="item.insertDivider" :key="index" class="mx-2"></v-divider>
               <v-list-item v-if="!item.restricted || isOwnGroup" :key="item.title" :to="item.to" exact>
                 <v-list-item-avatar>
@@ -36,195 +37,212 @@
                   </v-list-item-subtitle>
                 </v-list-item-content>
               </v-list-item>
-            </template>
-          </v-list>
-        </v-menu>
-        <template #bottom>
-          <v-list-item @click.stop="languageDialog = true">
-            <v-list-item-icon>
-              <v-icon>{{ $globals.icons.translate }}</v-icon>
-            </v-list-item-icon>
-            <v-list-item-content>
-              <v-list-item-title>{{ $t("sidebar.language") }}</v-list-item-title>
-              <LanguageDialog v-model="languageDialog" />
-            </v-list-item-content>
-          </v-list-item>
-          <v-list-item @click="toggleDark">
-            <v-list-item-icon>
-              <v-icon>
-                {{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
-              </v-icon>
-            </v-list-item-icon>
-            <v-list-item-title>
-              {{ $vuetify.theme.dark ? $t("settings.theme.light-mode") : $t("settings.theme.dark-mode") }}
-            </v-list-item-title>
-          </v-list-item>
-        </template>
-      </AppSidebar>
+            </div>
+          </template>
+        </v-list>
+      </v-menu>
+      <template #bottom>
+        <v-list-item @click.stop="languageDialog = true">
+          <v-list-item-icon>
+            <v-icon>{{ $globals.icons.translate }}</v-icon>
+          </v-list-item-icon>
+          <v-list-item-content>
+            <v-list-item-title>{{ $t("sidebar.language") }}</v-list-item-title>
+            <LanguageDialog v-model="languageDialog" />
+          </v-list-item-content>
+        </v-list-item>
+        <v-list-item @click="toggleDark">
+          <v-list-item-icon>
+            <v-icon>
+              {{ $vuetify.theme.dark ? $globals.icons.weatherSunny : $globals.icons.weatherNight }}
+            </v-icon>
+          </v-list-item-icon>
+          <v-list-item-title>
+            {{ $vuetify.theme.dark ? $t("settings.theme.light-mode") : $t("settings.theme.dark-mode") }}
+          </v-list-item-title>
+        </v-list-item>
+      </template>
+    </AppSidebar>
 
-      <AppHeader>
-        <v-btn icon @click.stop="sidebar = !sidebar">
-          <v-icon> {{ $globals.icons.menu }}</v-icon>
-        </v-btn>
-      </AppHeader>
-      <v-main>
-        <v-scroll-x-transition>
-          <Nuxt />
-        </v-scroll-x-transition>
-      </v-main>
-    </v-app>
-  </template>
+    <AppHeader>
+      <v-btn icon @click.stop="sidebar = !sidebar">
+        <v-icon> {{ $globals.icons.menu }}</v-icon>
+      </v-btn>
+    </AppHeader>
+    <v-main>
+      <v-scroll-x-transition>
+        <Nuxt />
+      </v-scroll-x-transition>
+    </v-main>
+  </v-app>
+</template>
 
-  <script lang="ts">
-  import { computed, defineComponent, onMounted, ref, useContext, useRoute } from "@nuxtjs/composition-api";
-  import { useLoggedInState } from "~/composables/use-logged-in-state";
-  import AppHeader from "@/components/Layout/LayoutParts/AppHeader.vue";
-  import AppSidebar from "@/components/Layout/LayoutParts/AppSidebar.vue";
-  import { SidebarLinks } from "~/types/application-types";
-  import LanguageDialog from "~/components/global/LanguageDialog.vue";
-  import TheSnackbar from "@/components/Layout/LayoutParts/TheSnackbar.vue";
-  import { useCookbooks, usePublicCookbooks } from "~/composables/use-group-cookbooks";
-  import { useToggleDarkMode } from "~/composables/use-utils";
+<script lang="ts">
+import { computed, defineComponent, onMounted, ref, useContext, useRoute } from "@nuxtjs/composition-api";
+import { useLoggedInState } from "~/composables/use-logged-in-state";
+import AppHeader from "@/components/Layout/LayoutParts/AppHeader.vue";
+import AppSidebar from "@/components/Layout/LayoutParts/AppSidebar.vue";
+import { SidebarLinks } from "~/types/application-types";
+import LanguageDialog from "~/components/global/LanguageDialog.vue";
+import TheSnackbar from "@/components/Layout/LayoutParts/TheSnackbar.vue";
+import { useAppInfo } from "~/composables/api";
+import { useCookbooks, usePublicCookbooks } from "~/composables/use-group-cookbooks";
+import { useToggleDarkMode } from "~/composables/use-utils";
 
-  export default defineComponent({
-    components: { AppHeader, AppSidebar, LanguageDialog, TheSnackbar },
-    setup() {
-      const { $globals, $auth, $vuetify, i18n } = useContext();
-      const { isOwnGroup } = useLoggedInState();
+export default defineComponent({
+  components: { AppHeader, AppSidebar, LanguageDialog, TheSnackbar },
+  setup() {
+    const { $globals, $auth, $vuetify, i18n } = useContext();
+    const { isOwnGroup } = useLoggedInState();
 
-      const isAdmin = computed(() => $auth.user?.admin);
-      const route = useRoute();
-      const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
-      const { cookbooks } = isOwnGroup.value ? useCookbooks() : usePublicCookbooks(groupSlug.value || "");
+    const isAdmin = computed(() => $auth.user?.admin);
+    const route = useRoute();
+    const groupSlug = computed(() => route.value.params.groupSlug || $auth.user?.groupSlug || "");
+    const { cookbooks } = isOwnGroup.value ? useCookbooks() : usePublicCookbooks(groupSlug.value || "");
 
-      const toggleDark = useToggleDarkMode();
+    const appInfo = useAppInfo();
+    const showImageImport = computed(() => appInfo.value?.enableOpenaiImageServices);
 
-      const languageDialog = ref<boolean>(false);
+    const toggleDark = useToggleDarkMode();
 
-      const sidebar = ref<boolean | null>(null);
+    const languageDialog = ref<boolean>(false);
 
-      onMounted(() => {
-        sidebar.value = !$vuetify.breakpoint.md;
+    const sidebar = ref<boolean | null>(null);
+
+    onMounted(() => {
+      sidebar.value = !$vuetify.breakpoint.md;
+    });
+
+    const cookbookLinks = computed(() => {
+      if (!cookbooks.value) return [];
+      return cookbooks.value.map((cookbook) => {
+        return {
+          icon: $globals.icons.pages,
+          title: cookbook.name,
+          to: `/g/${groupSlug.value}/cookbooks/${cookbook.slug as string}`,
+        };
       });
+    });
 
-      const cookbookLinks = computed(() => {
-        if (!cookbooks.value) return [];
-        return cookbooks.value.map((cookbook) => {
-          return {
-            icon: $globals.icons.pages,
-            title: cookbook.name,
-            to: `/g/${groupSlug.value}/cookbooks/${cookbook.slug as string}`,
-          };
-        });
-      });
+    interface Link {
+      insertDivider: boolean;
+      icon: string;
+      title: string;
+      subtitle: string | null;
+      to: string;
+      restricted: boolean;
+      hide: boolean;
+    }
 
-      interface Link {
-        insertDivider: boolean;
-        icon: string;
-        title: string;
-        subtitle: string | null;
-        to: string;
-        restricted: boolean;
-      }
+    const createLinks = computed<Link[]>(() => [
+      {
+        insertDivider: false,
+        icon: $globals.icons.link,
+        title: i18n.tc("general.import"),
+        subtitle: i18n.tc("new-recipe.import-by-url"),
+        to: `/g/${groupSlug.value}/r/create/url`,
+        restricted: true,
+        hide: false,
+      },
+      {
+        insertDivider: false,
+        icon: $globals.icons.fileImage,
+        title: i18n.tc("recipe.create-from-image"),
+        subtitle: i18n.tc("recipe.create-recipe-from-an-image"),
+        to: `/g/${groupSlug.value}/r/create/image`,
+        restricted: true,
+        hide: !showImageImport.value,
+      },
+      {
+        insertDivider: true,
+        icon: $globals.icons.edit,
+        title: i18n.tc("general.create"),
+        subtitle: i18n.tc("new-recipe.create-manually"),
+        to: `/g/${groupSlug.value}/r/create/new`,
+        restricted: true,
+        hide: false,
+      },
+    ]);
 
-      const createLinks = computed<Link[]>(() => [
-        {
-          insertDivider: false,
-          icon: $globals.icons.link,
-          title: i18n.tc("general.import"),
-          subtitle: i18n.tc("new-recipe.import-by-url"),
-          to: `/g/${groupSlug.value}/r/create/url`,
-          restricted: true,
-        },
-        {
-          insertDivider: true,
-          icon: $globals.icons.edit,
-          title: i18n.tc("general.create"),
-          subtitle: i18n.tc("new-recipe.create-manually"),
-          to: `/g/${groupSlug.value}/r/create/new`,
-          restricted: true,
-        },
-      ]);
+    const bottomLinks = computed<SidebarLinks>(() => [
+      {
+        icon: $globals.icons.cog,
+        title: i18n.tc("general.settings"),
+        to: "/admin/site-settings",
+        restricted: true,
+      },
+    ]);
 
-      const bottomLinks = computed<SidebarLinks>(() => [
-        {
-          icon: $globals.icons.cog,
-          title: i18n.tc("general.settings"),
-          to: "/admin/site-settings",
-          restricted: true,
-        },
-      ]);
+    const topLinks = computed<SidebarLinks>(() => [
+      {
+        icon: $globals.icons.silverwareForkKnife,
+        to: `/g/${groupSlug.value}`,
+        title: i18n.tc("general.recipes"),
+        restricted: true,
+      },
+      {
+        icon: $globals.icons.calendarMultiselect,
+        title: i18n.tc("meal-plan.meal-planner"),
+        to: "/group/mealplan/planner/view",
+        restricted: true,
+      },
+      {
+        icon: $globals.icons.formatListCheck,
+        title: i18n.tc("shopping-list.shopping-lists"),
+        to: "/shopping-lists",
+        restricted: true,
+      },
+      {
+        icon: $globals.icons.timelineText,
+        title: i18n.tc("recipe.timeline"),
+        to: `/g/${groupSlug.value}/recipes/timeline`,
+        restricted: true,
+      },
+      {
+        icon: $globals.icons.book,
+        to: `/g/${groupSlug.value}/cookbooks`,
+        title: i18n.tc("cookbook.cookbooks"),
+        restricted: true,
+      },
+      {
+        icon: $globals.icons.organizers,
+        title: i18n.tc("general.organizers"),
+        restricted: true,
+        children: [
+          {
+            icon: $globals.icons.categories,
+            to: `/g/${groupSlug.value}/recipes/categories`,
+            title: i18n.tc("sidebar.categories"),
+            restricted: true,
+          },
+          {
+            icon: $globals.icons.tags,
+            to: `/g/${groupSlug.value}/recipes/tags`,
+            title: i18n.tc("sidebar.tags"),
+            restricted: true,
+          },
+          {
+            icon: $globals.icons.potSteam,
+            to: `/g/${groupSlug.value}/recipes/tools`,
+            title: i18n.tc("tool.tools"),
+            restricted: true,
+          },
+        ],
+      },
+    ]);
 
-      const topLinks = computed<SidebarLinks>(() => [
-        {
-          icon: $globals.icons.silverwareForkKnife,
-          to: `/g/${groupSlug.value}`,
-          title: i18n.tc("general.recipes"),
-          restricted: true,
-        },
-        {
-          icon: $globals.icons.calendarMultiselect,
-          title: i18n.tc("meal-plan.meal-planner"),
-          to: "/group/mealplan/planner/view",
-          restricted: true,
-        },
-        {
-          icon: $globals.icons.formatListCheck,
-          title: i18n.tc("shopping-list.shopping-lists"),
-          to: "/shopping-lists",
-          restricted: true,
-        },
-        {
-          icon: $globals.icons.timelineText,
-          title: i18n.tc("recipe.timeline"),
-          to: `/g/${groupSlug.value}/recipes/timeline`,
-          restricted: true,
-        },
-        {
-          icon: $globals.icons.book,
-          to: `/g/${groupSlug.value}/cookbooks`,
-          title: i18n.tc("cookbook.cookbooks"),
-          restricted: true,
-        },
-        {
-          icon: $globals.icons.organizers,
-          title: i18n.tc("general.organizers"),
-          restricted: true,
-          children: [
-            {
-              icon: $globals.icons.categories,
-              to: `/g/${groupSlug.value}/recipes/categories`,
-              title: i18n.tc("sidebar.categories"),
-              restricted: true,
-            },
-            {
-              icon: $globals.icons.tags,
-              to: `/g/${groupSlug.value}/recipes/tags`,
-              title: i18n.tc("sidebar.tags"),
-              restricted: true,
-            },
-            {
-              icon: $globals.icons.potSteam,
-              to: `/g/${groupSlug.value}/recipes/tools`,
-              title: i18n.tc("tool.tools"),
-              restricted: true,
-            },
-          ],
-        },
-      ]);
-
-      return {
-        groupSlug,
-        cookbookLinks,
-        createLinks,
-        bottomLinks,
-        topLinks,
-        isAdmin,
-        isOwnGroup,
-        languageDialog,
-        toggleDark,
-        sidebar,
-      };
-    },
-  });
-  </script>
+    return {
+      groupSlug,
+      cookbookLinks,
+      createLinks,
+      bottomLinks,
+      topLinks,
+      isAdmin,
+      isOwnGroup,
+      languageDialog,
+      toggleDark,
+      sidebar,
+    };
+  },
+});
+</script>

frontend/components/global/ImageCropper.vue

@@ -1,6 +1,16 @@
 <template>
     <v-container class="pa-0">
         <v-row no-gutters>
+            <v-col cols="8" align-self="center">
+                <Cropper
+                    ref="cropper"
+                    class="cropper"
+                    :src="img"
+                    :default-size="defaultSize"
+                    :style="`height: ${cropperHeight}; width: ${cropperWidth};`"
+                />
+            </v-col>
+            <v-spacer />
             <v-col cols="2" align-self="center">
                 <v-container class="pa-0 mx-0">
                     <v-row v-for="(row, keyRow) in controls" :key="keyRow">
@@ -17,16 +27,6 @@
                     </v-row>
                 </v-container>
             </v-col>
-            <v-spacer />
-            <v-col cols="8" align-self="center">
-                <Cropper
-                    ref="cropper"
-                    class="cropper"
-                    :src="img"
-                    :default-size="defaultSize"
-                    :style="`height: ${cropperHeight}; width: ${cropperWidth};`"
-                />
-            </v-col>
         </v-row>
     </v-container>
 </template>

frontend/lang/messages/en-US.json

@@ -561,7 +561,12 @@
     "create-recipe-description": "Create a new recipe from scratch.",
     "create-recipes": "Create Recipes",
     "import-with-zip": "Import with .zip",
-    "create-recipe-from-an-image": "Create recipe from an image",
+    "create-recipe-from-an-image": "Create Recipe from an Image",
+    "create-recipe-from-an-image-description": "Create a recipe by uploading an image of it. Mealie will attempt to extract the text from the image using AI and create a recipe from it.",
+    "crop-and-rotate-the-image": "Crop and rotate the image so that only the text is visible, and it's in the correct orientation.",
+    "create-from-image": "Create from Image",
+    "should-translate-description": "Translate the recipe into my language",
+    "please-wait-image-procesing": "Please wait, the image is processing. This may take some time.",
     "bulk-url-import": "Bulk URL Import",
     "debug-scraper": "Debug Scraper",
     "create-a-recipe-by-providing-the-name-all-recipes-must-have-unique-names": "Create a recipe by providing the name. All recipes must have unique names.",

frontend/lib/api/types/admin.ts

@@ -42,6 +42,7 @@ export interface AppInfo {
   oidcRedirect: boolean;
   oidcProviderName: string;
   enableOpenai: boolean;
+  enableOpenaiImageServices: boolean;
 }
 export interface AppStartupInfo {
   isFirstLogin: boolean;

frontend/lib/api/user/recipes/recipe.ts

@@ -35,6 +35,7 @@ const routes = {
   recipesCreateUrl: `${prefix}/recipes/create-url`,
   recipesCreateUrlBulk: `${prefix}/recipes/create-url/bulk`,
   recipesCreateFromZip: `${prefix}/recipes/create-from-zip`,
+  recipesCreateFromImage: `${prefix}/recipes/create-from-image`,
   recipesCategory: `${prefix}/recipes/category`,
   recipesParseIngredient: `${prefix}/parser/ingredient`,
   recipesParseIngredients: `${prefix}/parser/ingredients`,
@@ -140,6 +141,19 @@ export class RecipeAPI extends BaseCRUDAPI<CreateRecipe, Recipe, Recipe> {
     return await this.requests.post<string>(routes.recipesCreateUrlBulk, payload);
   }
 
+  async createOneFromImage(fileObject: Blob | File, fileName: string, translateLanguage: string | null = null) {
+    const formData = new FormData();
+    formData.append("images", fileObject);
+    formData.append("extension", fileName.split(".").pop() ?? "");
+
+    let apiRoute = routes.recipesCreateFromImage
+    if (translateLanguage) {
+      apiRoute = `${apiRoute}?translateLanguage=${translateLanguage}`
+    }
+
+    return await this.requests.post<string>(apiRoute, formData);
+  }
+
   async parseIngredients(parser: Parser, ingredients: Array<string>) {
     parser = parser || "nlp";
     return await this.requests.post<ParsedIngredient[]>(routes.recipesParseIngredients, { parser, ingredients });

frontend/pages/g/_groupSlug/r/create.vue

@@ -28,6 +28,7 @@
 
 <script lang="ts">
 import { defineComponent, useRouter, useContext, computed, useRoute } from "@nuxtjs/composition-api";
+import { useAppInfo } from "~/composables/api";
 import { MenuItem } from "~/components/global/BaseOverflowButton.vue";
 import AdvancedOnly from "~/components/global/AdvancedOnly.vue";
 
@@ -37,7 +38,10 @@ export default defineComponent({
   setup() {
     const { $auth, $globals, i18n } = useContext();
 
-    const subpages: MenuItem[] = [
+    const appInfo = useAppInfo();
+    const enableOpenAIImages = computed(() => appInfo.value?.enableOpenaiImageServices);
+
+    const subpages = computed<MenuItem[]>(() => [
       {
         icon: $globals.icons.link,
         text: i18n.tc("recipe.import-with-url"),
@@ -48,6 +52,12 @@ export default defineComponent({
         text: i18n.tc("recipe.bulk-url-import"),
         value: "bulk",
       },
+      {
+        icon: $globals.icons.fileImage,
+        text: i18n.tc("recipe.create-from-image"),
+        value: "image",
+        hide: !enableOpenAIImages.value,
+      },
       {
         icon: $globals.icons.edit,
         text: i18n.tc("recipe.create-recipe"),
@@ -63,7 +73,7 @@ export default defineComponent({
         text: i18n.tc("recipe.debug-scraper"),
         value: "debug",
       },
-    ];
+    ]);
 
     const route = useRoute();
     const router = useRouter();

frontend/pages/g/_groupSlug/r/create/image.vue

@@ -0,0 +1,161 @@
+<template>
+  <div>
+    <v-form ref="domUrlForm" @submit.prevent="createRecipe">
+      <div>
+        <v-card-title class="headline"> {{ $t('recipe.create-recipe-from-an-image') }} </v-card-title>
+        <v-card-text>
+          <p>{{ $t('recipe.create-recipe-from-an-image-description') }}</p>
+          <v-container class="pa-0">
+            <v-row>
+              <v-col cols="auto" align-self="center">
+                <AppButtonUpload
+                  v-if="!uploadedImage"
+                  class="ml-auto"
+                  url="none"
+                  file-name="image"
+                  accept="image/*"
+                  :text="$i18n.tc('recipe.upload-image')"
+                  :text-btn="false"
+                  :post="false"
+                  @uploaded="uploadImage"
+                />
+                <v-btn
+                  v-if="!!uploadedImage"
+                  color="error"
+                  @click="clearImage"
+                >
+                  <v-icon left>{{ $globals.icons.close }}</v-icon>
+                  {{ $i18n.tc('recipe.remove-image') }}
+                </v-btn>
+              </v-col>
+              <v-spacer />
+            </v-row>
+
+            <div v-if="uploadedImage && uploadedImagePreviewUrl" class="mt-3">
+              <v-row>
+                <v-col cols="12" class="pb-0">
+                  <v-card-text class="pa-0">
+                    <p class="mb-0">
+                      {{ $t('recipe.crop-and-rotate-the-image') }}
+                    </p>
+                  </v-card-text>
+                </v-col>
+              </v-row>
+              <v-row style="max-width: 600px;">
+                <v-spacer />
+                <v-col cols="12">
+                  <ImageCropper
+                    :img="uploadedImagePreviewUrl"
+                    cropper-height="50vh"
+                    cropper-width="100%"
+                    @save="updateUploadedImage"
+                  />
+                </v-col>
+                <v-spacer />
+              </v-row>
+            </div>
+          </v-container>
+        </v-card-text>
+        <v-card-actions v-if="uploadedImage">
+          <div>
+            <p style="width: 250px">
+              <BaseButton rounded block type="submit" :loading="loading" />
+            </p>
+            <p>
+              <v-checkbox
+                v-model="shouldTranslate"
+                hide-details
+                :label="$t('recipe.should-translate-description')"
+                :disabled="loading"
+              />
+            </p>
+            <p v-if="loading" class="mb-0">
+              {{ $t('recipe.please-wait-image-procesing') }}
+            </p>
+          </div>
+        </v-card-actions>
+      </div>
+    </v-form>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  computed,
+  defineComponent,
+  reactive,
+  ref,
+  toRefs,
+  useContext,
+  useRoute,
+  useRouter,
+} from "@nuxtjs/composition-api";
+import { useUserApi } from "~/composables/api";
+import { alert } from "~/composables/use-toast";
+import { VForm } from "~/types/vuetify";
+
+export default defineComponent({
+  setup() {
+    const state = reactive({
+      loading: false,
+    });
+
+    const { i18n } = useContext();
+    const api = useUserApi();
+    const route = useRoute();
+    const router = useRouter();
+    const groupSlug = computed(() => route.value.params.groupSlug || "");
+
+    const domUrlForm = ref<VForm | null>(null);
+    const uploadedImage = ref<Blob | File>();
+    const uploadedImageName = ref<string>("");
+    const uploadedImagePreviewUrl = ref<string>();
+    const shouldTranslate = ref(true);
+
+    function uploadImage(fileObject: File) {
+      uploadedImage.value = fileObject;
+      uploadedImageName.value = fileObject.name;
+      uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
+    }
+
+    function updateUploadedImage(fileObject: Blob) {
+      uploadedImage.value = fileObject;
+      uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
+    }
+
+    function clearImage() {
+      uploadedImage.value = undefined;
+      uploadedImageName.value = "";
+      uploadedImagePreviewUrl.value = undefined;
+    }
+
+    async function createRecipe() {
+      if (!uploadedImage.value) {
+        return;
+      }
+
+      state.loading = true;
+      const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
+      const { data, error } = await api.recipes.createOneFromImage(uploadedImage.value, uploadedImageName.value, translateLanguage);
+      if (error || !data) {
+        alert.error(i18n.tc("events.something-went-wrong"));
+        state.loading = false;
+      } else {
+        router.push(`/g/${groupSlug.value}/r/${data}`);
+      };
+    }
+
+    return {
+      ...toRefs(state),
+      domUrlForm,
+      uploadedImage,
+      uploadedImagePreviewUrl,
+      shouldTranslate,
+      uploadImage,
+      updateUploadedImage,
+      clearImage,
+      createRecipe,
+    };
+  },
+});
+</script>