mirror of
https://github.com/mealie-recipes/mealie.git
synced 2025-08-02 20:15:24 +02:00
feat: create recipe from multiple images (#5590)
Co-authored-by: Kuchenpirat <24235032+Kuchenpirat@users.noreply.github.com> Co-authored-by: Kuchenpirat <jojow@gmx.net> Co-authored-by: Michael Genson <71845777+michael-genson@users.noreply.github.com>
This commit is contained in:
Ross
GitHub
parent
084f99b0de
commit
95fa0af28a
8 changed files with 149 additions and 131 deletions
|
|
@ -80,7 +80,7 @@ export default defineNuxtComponent({
|
|||
},
|
||||
{
|
||||
icon: $globals.icons.fileImage,
|
||||
text: i18n.t("recipe.create-from-image"),
|
||||
text: i18n.t("recipe.create-from-images"),
|
||||
value: "image",
|
||||
hide: !enableOpenAIImages.value,
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,86 +1,70 @@
|
|||
<template>
|
||||
<div>
|
||||
<v-form
|
||||
ref="domUrlForm"
|
||||
@submit.prevent="createRecipe"
|
||||
>
|
||||
<v-form ref="domUrlForm" @submit.prevent="createRecipe">
|
||||
<div>
|
||||
<v-card-title class="headline">
|
||||
{{ $t('recipe.create-recipe-from-an-image') }}
|
||||
{{ $t("recipe.create-recipe-from-an-image") }}
|
||||
</v-card-title>
|
||||
<v-card-text>
|
||||
<p>{{ $t('recipe.create-recipe-from-an-image-description') }}</p>
|
||||
<p>{{ $t("recipe.create-recipe-from-an-image-description") }}</p>
|
||||
<v-container class="pa-0">
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="auto"
|
||||
align-self="center"
|
||||
>
|
||||
<v-col cols="auto" align-self="center">
|
||||
<AppButtonUpload
|
||||
v-if="!uploadedImage"
|
||||
class="ml-auto"
|
||||
url="none"
|
||||
file-name="image"
|
||||
file-name="images"
|
||||
accept="image/*"
|
||||
:text="$t('recipe.upload-image')"
|
||||
:text="uploadedImages.length ? $t('recipe.upload-more-images') : $t('recipe.upload-images')"
|
||||
:text-btn="false"
|
||||
:post="false"
|
||||
@uploaded="uploadImage"
|
||||
:multiple="true"
|
||||
@uploaded="uploadImages"
|
||||
/>
|
||||
<v-btn
|
||||
v-if="!!uploadedImage"
|
||||
color="error"
|
||||
@click="clearImage"
|
||||
>
|
||||
<v-icon start>
|
||||
{{ $globals.icons.close }}
|
||||
</v-icon>
|
||||
{{ $t('recipe.remove-image') }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
|
||||
<div
|
||||
v-if="uploadedImage && uploadedImagePreviewUrl"
|
||||
class="mt-3"
|
||||
>
|
||||
<div v-if="uploadedImages.length" class="mt-3">
|
||||
<v-row>
|
||||
<v-col
|
||||
cols="12"
|
||||
class="pb-0"
|
||||
>
|
||||
<v-col cols="12" class="pb-0">
|
||||
<v-card-text class="pa-0">
|
||||
<p class="mb-0">
|
||||
{{ $t('recipe.crop-and-rotate-the-image') }}
|
||||
{{ $t("recipe.crop-and-rotate-the-image") }}
|
||||
</p>
|
||||
</v-card-text>
|
||||
</v-col>
|
||||
</v-row>
|
||||
<v-row style="max-width: 600px;">
|
||||
<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-for="(imageUrl, index) in uploadedImagesPreviewUrls" :key="index" cols="12">
|
||||
<v-row>
|
||||
<v-col cols="auto" align-self="center">
|
||||
<ImageCropper
|
||||
:img="imageUrl"
|
||||
cropper-height="100%"
|
||||
cropper-width="100%"
|
||||
@save="(croppedImage) => updateUploadedImage(index, croppedImage)"
|
||||
/>
|
||||
|
||||
<v-btn color="error" @click="() => clearImage(index)">
|
||||
<v-icon start>
|
||||
{{ $globals.icons.close }}
|
||||
</v-icon>
|
||||
{{ $t("recipe.remove-image") }}
|
||||
</v-btn>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-col>
|
||||
<v-spacer />
|
||||
</v-row>
|
||||
</div>
|
||||
</v-container>
|
||||
</v-card-text>
|
||||
<v-card-actions v-if="uploadedImage">
|
||||
<v-card-actions v-if="uploadedImages.length">
|
||||
<div>
|
||||
<p style="width: 250px">
|
||||
<BaseButton
|
||||
rounded
|
||||
block
|
||||
type="submit"
|
||||
:loading="loading"
|
||||
/>
|
||||
<BaseButton rounded block type="submit" :loading="loading" />
|
||||
</p>
|
||||
<p>
|
||||
<v-checkbox
|
||||
|
|
@ -90,11 +74,12 @@
|
|||
:disabled="loading"
|
||||
/>
|
||||
</p>
|
||||
<p
|
||||
v-if="loading"
|
||||
class="mb-0"
|
||||
>
|
||||
{{ $t('recipe.please-wait-image-procesing') }}
|
||||
<p v-if="loading" class="mb-0">
|
||||
{{
|
||||
uploadedImages.length > 1
|
||||
? $t("recipe.please-wait-images-processing")
|
||||
: $t("recipe.please-wait-image-procesing")
|
||||
}}
|
||||
</p>
|
||||
</div>
|
||||
</v-card-actions>
|
||||
|
|
@ -121,55 +106,59 @@ export default defineNuxtComponent({
|
|||
const groupSlug = computed(() => route.params.groupSlug || "");
|
||||
|
||||
const domUrlForm = ref<VForm | null>(null);
|
||||
const uploadedImage = ref<Blob | File>();
|
||||
const uploadedImageName = ref<string>("");
|
||||
const uploadedImagePreviewUrl = ref<string>();
|
||||
const uploadedImages = ref<(Blob | File)[]>([]);
|
||||
const uploadedImageNames = ref<string[]>([]);
|
||||
const uploadedImagesPreviewUrls = ref<string[]>([]);
|
||||
const shouldTranslate = ref(true);
|
||||
|
||||
function uploadImage(fileObject: File) {
|
||||
uploadedImage.value = fileObject;
|
||||
uploadedImageName.value = fileObject.name;
|
||||
uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
|
||||
function uploadImages(files: File[]) {
|
||||
uploadedImages.value = [...uploadedImages.value, ...files];
|
||||
uploadedImageNames.value = [...uploadedImageNames.value, ...files.map(file => file.name)];
|
||||
uploadedImagesPreviewUrls.value = [
|
||||
...uploadedImagesPreviewUrls.value,
|
||||
...files.map(file => URL.createObjectURL(file)),
|
||||
];
|
||||
}
|
||||
|
||||
function updateUploadedImage(fileObject: Blob) {
|
||||
uploadedImage.value = fileObject;
|
||||
uploadedImagePreviewUrl.value = URL.createObjectURL(fileObject);
|
||||
}
|
||||
function clearImage(index: number) {
|
||||
URL.revokeObjectURL(uploadedImagesPreviewUrls.value[index]);
|
||||
|
||||
function clearImage() {
|
||||
uploadedImage.value = undefined;
|
||||
uploadedImageName.value = "";
|
||||
uploadedImagePreviewUrl.value = undefined;
|
||||
uploadedImages.value = uploadedImages.value.filter((_, i) => i !== index);
|
||||
uploadedImageNames.value = uploadedImageNames.value.filter((_, i) => i !== index);
|
||||
uploadedImagesPreviewUrls.value = uploadedImagesPreviewUrls.value.filter((_, i) => i !== index);
|
||||
}
|
||||
|
||||
async function createRecipe() {
|
||||
if (!uploadedImage.value) {
|
||||
if (uploadedImages.value.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
state.loading = true;
|
||||
const translateLanguage = shouldTranslate.value ? i18n.locale : undefined;
|
||||
const { data, error } = await api.recipes.createOneFromImage(uploadedImage.value, uploadedImageName.value, translateLanguage?.value);
|
||||
const { data, error } = await api.recipes.createOneFromImages(uploadedImages.value, translateLanguage?.value);
|
||||
if (error || !data) {
|
||||
alert.error(i18n.t("events.something-went-wrong"));
|
||||
state.loading = false;
|
||||
}
|
||||
else {
|
||||
router.push(`/g/${groupSlug.value}/r/${data}`);
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
function updateUploadedImage(index: number, croppedImage: Blob) {
|
||||
uploadedImages.value[index] = croppedImage;
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
domUrlForm,
|
||||
uploadedImage,
|
||||
uploadedImagePreviewUrl,
|
||||
uploadedImages,
|
||||
uploadedImagesPreviewUrls,
|
||||
shouldTranslate,
|
||||
uploadImage,
|
||||
updateUploadedImage,
|
||||
uploadImages,
|
||||
clearImage,
|
||||
createRecipe,
|
||||
updateUploadedImage,
|
||||
};
|
||||
},
|
||||
});
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue