Improve blur data form handling
This commit is contained in:
parent
bbc0a4e239
commit
97830c50ae
@ -6,6 +6,7 @@ import UploadPageClient from '@/photo/UploadPageClient';
|
|||||||
import {
|
import {
|
||||||
AI_TEXT_AUTO_GENERATED_FIELDS,
|
AI_TEXT_AUTO_GENERATED_FIELDS,
|
||||||
AI_TEXT_GENERATION_ENABLED,
|
AI_TEXT_GENERATION_ENABLED,
|
||||||
|
BLUR_ENABLED,
|
||||||
} from '@/site/config';
|
} from '@/site/config';
|
||||||
|
|
||||||
interface Params {
|
interface Params {
|
||||||
@ -19,11 +20,16 @@ export default async function UploadPage({ params: { uploadPath } }: Params) {
|
|||||||
imageResizedBase64: imageThumbnailBase64,
|
imageResizedBase64: imageThumbnailBase64,
|
||||||
} = await extractImageDataFromBlobPath(uploadPath, {
|
} = await extractImageDataFromBlobPath(uploadPath, {
|
||||||
includeInitialPhotoFields: true,
|
includeInitialPhotoFields: true,
|
||||||
generateBlurData: true,
|
generateBlurData: BLUR_ENABLED,
|
||||||
generateResizedImage: true,
|
generateResizedImage: AI_TEXT_GENERATION_ENABLED,
|
||||||
});
|
});
|
||||||
|
|
||||||
if (!photoFormExif || !imageThumbnailBase64) { redirect(PATH_ADMIN); }
|
if (
|
||||||
|
!photoFormExif ||
|
||||||
|
(AI_TEXT_GENERATION_ENABLED && !imageThumbnailBase64)
|
||||||
|
) {
|
||||||
|
redirect(PATH_ADMIN);
|
||||||
|
}
|
||||||
|
|
||||||
const uniqueTags = await getUniqueTagsCached();
|
const uniqueTags = await getUniqueTagsCached();
|
||||||
|
|
||||||
|
|||||||
@ -23,7 +23,7 @@ export default function UploadPageClient({
|
|||||||
uniqueTags: TagsWithMeta
|
uniqueTags: TagsWithMeta
|
||||||
hasAiTextGeneration?: boolean
|
hasAiTextGeneration?: boolean
|
||||||
textFieldsToAutoGenerate?: AiAutoGeneratedField[],
|
textFieldsToAutoGenerate?: AiAutoGeneratedField[],
|
||||||
imageThumbnailBase64: string
|
imageThumbnailBase64?: string
|
||||||
}) {
|
}) {
|
||||||
const {
|
const {
|
||||||
pending,
|
pending,
|
||||||
|
|||||||
@ -39,6 +39,7 @@ import { convertPhotoToPhotoDbInsert } from '.';
|
|||||||
import { safelyRunAdminServerAction } from '@/auth';
|
import { safelyRunAdminServerAction } from '@/auth';
|
||||||
import { AI_IMAGE_QUERIES, AiImageQuery } from './ai';
|
import { AI_IMAGE_QUERIES, AiImageQuery } from './ai';
|
||||||
import { streamOpenAiImageQuery } from '@/services/openai';
|
import { streamOpenAiImageQuery } from '@/services/openai';
|
||||||
|
import { BLUR_ENABLED } from '@/site/config';
|
||||||
|
|
||||||
// Private actions
|
// Private actions
|
||||||
|
|
||||||
@ -168,7 +169,7 @@ export const syncPhotoExifDataAction = async (formData: FormData) =>
|
|||||||
if (photo) {
|
if (photo) {
|
||||||
const { photoFormExif } = await extractImageDataFromBlobPath(
|
const { photoFormExif } = await extractImageDataFromBlobPath(
|
||||||
photo.url, {
|
photo.url, {
|
||||||
generateBlurData: true,
|
generateBlurData: BLUR_ENABLED,
|
||||||
});
|
});
|
||||||
if (photoFormExif) {
|
if (photoFormExif) {
|
||||||
const photoFormDbInsert = convertFormDataToPhotoDbInsert({
|
const photoFormDbInsert = convertFormDataToPhotoDbInsert({
|
||||||
|
|||||||
@ -7,7 +7,7 @@ export type AiContent = ReturnType<typeof useAiImageQueries>;
|
|||||||
|
|
||||||
export default function useAiImageQueries(
|
export default function useAiImageQueries(
|
||||||
textFieldsToAutoGenerate: AiAutoGeneratedField[] = [],
|
textFieldsToAutoGenerate: AiAutoGeneratedField[] = [],
|
||||||
imageData: string,
|
imageData?: string,
|
||||||
) {
|
) {
|
||||||
const [
|
const [
|
||||||
requestTitleCaption,
|
requestTitleCaption,
|
||||||
|
|||||||
@ -28,6 +28,8 @@ import usePreventNavigation from '@/utility/usePreventNavigation';
|
|||||||
import { useAppState } from '@/state/AppState';
|
import { useAppState } from '@/state/AppState';
|
||||||
import UpdateBlurDataButton from '../UpdateBlurDataButton';
|
import UpdateBlurDataButton from '../UpdateBlurDataButton';
|
||||||
import { getNextImageUrlForManipulation } from '@/services/next-image';
|
import { getNextImageUrlForManipulation } from '@/services/next-image';
|
||||||
|
import { BLUR_ENABLED } from '@/site/config';
|
||||||
|
import { PhotoDbInsert } from '..';
|
||||||
|
|
||||||
const THUMBNAIL_SIZE = 300;
|
const THUMBNAIL_SIZE = 300;
|
||||||
|
|
||||||
@ -118,6 +120,8 @@ export default function PhotoForm({
|
|||||||
setFormData(data => updatedBlurData
|
setFormData(data => updatedBlurData
|
||||||
? { ...data, blurData: updatedBlurData }
|
? { ...data, blurData: updatedBlurData }
|
||||||
: data);
|
: data);
|
||||||
|
} else if (!BLUR_ENABLED) {
|
||||||
|
setFormData(data => ({ ...data, blurData: '' }));
|
||||||
}
|
}
|
||||||
}, [updatedBlurData]);
|
}, [updatedBlurData]);
|
||||||
|
|
||||||
@ -206,6 +210,14 @@ export default function PhotoForm({
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const shouldHideField = (
|
||||||
|
key: keyof PhotoDbInsert | 'favorite',
|
||||||
|
hideIfEmpty?: boolean,
|
||||||
|
shouldHide?: (formData: Partial<PhotoFormData>) => boolean,
|
||||||
|
) =>
|
||||||
|
(hideIfEmpty && !formData[key]) ||
|
||||||
|
shouldHide?.(formData);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="space-y-8 max-w-[38rem] relative">
|
<div className="space-y-8 max-w-[38rem] relative">
|
||||||
<div className="flex gap-2">
|
<div className="flex gap-2">
|
||||||
@ -278,10 +290,7 @@ export default function PhotoForm({
|
|||||||
loadingMessage,
|
loadingMessage,
|
||||||
type,
|
type,
|
||||||
}]) =>
|
}]) =>
|
||||||
(
|
!shouldHideField(key, hideIfEmpty, shouldHide) &&
|
||||||
(!hideIfEmpty || formData[key]) &&
|
|
||||||
!shouldHide?.(formData)
|
|
||||||
) &&
|
|
||||||
<FieldSetWithStatus
|
<FieldSetWithStatus
|
||||||
key={key}
|
key={key}
|
||||||
id={key}
|
id={key}
|
||||||
|
|||||||
@ -15,10 +15,7 @@ import {
|
|||||||
MAKE_FUJIFILM,
|
MAKE_FUJIFILM,
|
||||||
} from '@/vendors/fujifilm';
|
} from '@/vendors/fujifilm';
|
||||||
import { FilmSimulation } from '@/simulation';
|
import { FilmSimulation } from '@/simulation';
|
||||||
import {
|
import { GEO_PRIVACY_ENABLED } from '@/site/config';
|
||||||
BLUR_ENABLED,
|
|
||||||
GEO_PRIVACY_ENABLED,
|
|
||||||
} from '@/site/config';
|
|
||||||
import { TAG_FAVS, doesTagsStringIncludeFavs } from '@/tag';
|
import { TAG_FAVS, doesTagsStringIncludeFavs } from '@/tag';
|
||||||
|
|
||||||
type VirtualFields = 'favorite';
|
type VirtualFields = 'favorite';
|
||||||
@ -55,7 +52,6 @@ type FormMeta = {
|
|||||||
selectOptions?: { value: string, label: string }[]
|
selectOptions?: { value: string, label: string }[]
|
||||||
selectOptionsDefaultLabel?: string
|
selectOptionsDefaultLabel?: string
|
||||||
tagOptions?: AnnotatedTag[]
|
tagOptions?: AnnotatedTag[]
|
||||||
nullOverride?: boolean
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const STRING_MAX_LENGTH_SHORT = 255;
|
const STRING_MAX_LENGTH_SHORT = 255;
|
||||||
@ -95,10 +91,6 @@ const FORM_METADATA = (
|
|||||||
blurData: {
|
blurData: {
|
||||||
label: 'blur data',
|
label: 'blur data',
|
||||||
readOnly: true,
|
readOnly: true,
|
||||||
required: BLUR_ENABLED,
|
|
||||||
hideIfEmpty: !BLUR_ENABLED,
|
|
||||||
loadingMessage: 'Generating blur data ...',
|
|
||||||
nullOverride: !BLUR_ENABLED,
|
|
||||||
},
|
},
|
||||||
url: { label: 'url', readOnly: true },
|
url: { label: 'url', readOnly: true },
|
||||||
extension: { label: 'extension', readOnly: true },
|
extension: { label: 'extension', readOnly: true },
|
||||||
@ -251,8 +243,6 @@ export const convertFormDataToPhotoDbInsert = (
|
|||||||
meta?.excludeFromInsert
|
meta?.excludeFromInsert
|
||||||
) {
|
) {
|
||||||
delete (photoForm as any)[key];
|
delete (photoForm as any)[key];
|
||||||
} else if (meta?.nullOverride) {
|
|
||||||
(photoForm as any)[key] = null;
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@ -10,7 +10,7 @@ export default function usePhotoFormParent({
|
|||||||
}: {
|
}: {
|
||||||
photoForm?: Partial<PhotoFormData>
|
photoForm?: Partial<PhotoFormData>
|
||||||
textFieldsToAutoGenerate?: AiAutoGeneratedField[]
|
textFieldsToAutoGenerate?: AiAutoGeneratedField[]
|
||||||
imageThumbnailBase64: string,
|
imageThumbnailBase64?: string,
|
||||||
}) {
|
}) {
|
||||||
const [pending, setIsPending] = useState(false);
|
const [pending, setIsPending] = useState(false);
|
||||||
const [updatedTitle, setUpdatedTitle] = useState('');
|
const [updatedTitle, setUpdatedTitle] = useState('');
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user