Improve blur data form handling

This commit is contained in:
Sam Becker 2024-05-07 09:36:46 -05:00
parent bbc0a4e239
commit 97830c50ae
7 changed files with 28 additions and 22 deletions

View File

@ -6,6 +6,7 @@ import UploadPageClient from '@/photo/UploadPageClient';
import {
AI_TEXT_AUTO_GENERATED_FIELDS,
AI_TEXT_GENERATION_ENABLED,
BLUR_ENABLED,
} from '@/site/config';
interface Params {
@ -19,11 +20,16 @@ export default async function UploadPage({ params: { uploadPath } }: Params) {
imageResizedBase64: imageThumbnailBase64,
} = await extractImageDataFromBlobPath(uploadPath, {
includeInitialPhotoFields: true,
generateBlurData: true,
generateResizedImage: true,
generateBlurData: BLUR_ENABLED,
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();

View File

@ -23,7 +23,7 @@ export default function UploadPageClient({
uniqueTags: TagsWithMeta
hasAiTextGeneration?: boolean
textFieldsToAutoGenerate?: AiAutoGeneratedField[],
imageThumbnailBase64: string
imageThumbnailBase64?: string
}) {
const {
pending,

View File

@ -39,6 +39,7 @@ import { convertPhotoToPhotoDbInsert } from '.';
import { safelyRunAdminServerAction } from '@/auth';
import { AI_IMAGE_QUERIES, AiImageQuery } from './ai';
import { streamOpenAiImageQuery } from '@/services/openai';
import { BLUR_ENABLED } from '@/site/config';
// Private actions
@ -168,7 +169,7 @@ export const syncPhotoExifDataAction = async (formData: FormData) =>
if (photo) {
const { photoFormExif } = await extractImageDataFromBlobPath(
photo.url, {
generateBlurData: true,
generateBlurData: BLUR_ENABLED,
});
if (photoFormExif) {
const photoFormDbInsert = convertFormDataToPhotoDbInsert({

View File

@ -7,7 +7,7 @@ export type AiContent = ReturnType<typeof useAiImageQueries>;
export default function useAiImageQueries(
textFieldsToAutoGenerate: AiAutoGeneratedField[] = [],
imageData: string,
imageData?: string,
) {
const [
requestTitleCaption,

View File

@ -28,6 +28,8 @@ import usePreventNavigation from '@/utility/usePreventNavigation';
import { useAppState } from '@/state/AppState';
import UpdateBlurDataButton from '../UpdateBlurDataButton';
import { getNextImageUrlForManipulation } from '@/services/next-image';
import { BLUR_ENABLED } from '@/site/config';
import { PhotoDbInsert } from '..';
const THUMBNAIL_SIZE = 300;
@ -118,6 +120,8 @@ export default function PhotoForm({
setFormData(data => updatedBlurData
? { ...data, blurData: updatedBlurData }
: data);
} else if (!BLUR_ENABLED) {
setFormData(data => ({ ...data, blurData: '' }));
}
}, [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 (
<div className="space-y-8 max-w-[38rem] relative">
<div className="flex gap-2">
@ -278,10 +290,7 @@ export default function PhotoForm({
loadingMessage,
type,
}]) =>
(
(!hideIfEmpty || formData[key]) &&
!shouldHide?.(formData)
) &&
!shouldHideField(key, hideIfEmpty, shouldHide) &&
<FieldSetWithStatus
key={key}
id={key}

View File

@ -15,10 +15,7 @@ import {
MAKE_FUJIFILM,
} from '@/vendors/fujifilm';
import { FilmSimulation } from '@/simulation';
import {
BLUR_ENABLED,
GEO_PRIVACY_ENABLED,
} from '@/site/config';
import { GEO_PRIVACY_ENABLED } from '@/site/config';
import { TAG_FAVS, doesTagsStringIncludeFavs } from '@/tag';
type VirtualFields = 'favorite';
@ -55,7 +52,6 @@ type FormMeta = {
selectOptions?: { value: string, label: string }[]
selectOptionsDefaultLabel?: string
tagOptions?: AnnotatedTag[]
nullOverride?: boolean
};
const STRING_MAX_LENGTH_SHORT = 255;
@ -95,10 +91,6 @@ const FORM_METADATA = (
blurData: {
label: 'blur data',
readOnly: true,
required: BLUR_ENABLED,
hideIfEmpty: !BLUR_ENABLED,
loadingMessage: 'Generating blur data ...',
nullOverride: !BLUR_ENABLED,
},
url: { label: 'url', readOnly: true },
extension: { label: 'extension', readOnly: true },
@ -251,8 +243,6 @@ export const convertFormDataToPhotoDbInsert = (
meta?.excludeFromInsert
) {
delete (photoForm as any)[key];
} else if (meta?.nullOverride) {
(photoForm as any)[key] = null;
}
});

View File

@ -10,7 +10,7 @@ export default function usePhotoFormParent({
}: {
photoForm?: Partial<PhotoFormData>
textFieldsToAutoGenerate?: AiAutoGeneratedField[]
imageThumbnailBase64: string,
imageThumbnailBase64?: string,
}) {
const [pending, setIsPending] = useState(false);
const [updatedTitle, setUpdatedTitle] = useState('');