diff --git a/src/photo/ai/useImageQuery.ts b/src/photo/ai/useImageQuery.ts index 2893f930..51e8ec93 100644 --- a/src/photo/ai/useImageQuery.ts +++ b/src/photo/ai/useImageQuery.ts @@ -8,19 +8,25 @@ export default function useImageQuery( query: ImageQuery, ) { const [text, setText] = useState(''); + const [error, setError] = useState(); const [isLoading, setIsLoading] = useState(false); const request = useCallback(async () => { if (imageBase64) { setIsLoading(true); - const textStream = await streamImageQueryAction( - imageBase64 ?? '', - query, - ); - for await (const text of readStreamableValue(textStream)) { - setText(text ?? ''); + try { + const textStream = await streamImageQueryAction( + imageBase64 ?? '', + query, + ); + for await (const text of readStreamableValue(textStream)) { + setText(text ?? ''); + } + setIsLoading(false); + } catch (e) { + setError(e); + setIsLoading(false); } - setIsLoading(false); } }, [imageBase64, query]); @@ -28,5 +34,6 @@ export default function useImageQuery( request, text, isLoading, + error, ] as const; }; diff --git a/src/photo/form/PhotoForm.tsx b/src/photo/form/PhotoForm.tsx index 6228d714..6b5b9ba5 100644 --- a/src/photo/form/PhotoForm.tsx +++ b/src/photo/form/PhotoForm.tsx @@ -181,21 +181,21 @@ export default function PhotoForm({ />}

- AI RESPONSE 01: {title} {isLoadingTitle && <> + ✨ TITLE: {title} {isLoadingTitle && <> }

- AI RESPONSE 02: {tags} {isLoadingTags && <> + ✨ TAGS: {tags} {isLoadingTags && <> }

- AI RESPONSE 01: {description} {isLoadingDescription && <> + ✨ DESCRIPTION: {description} {isLoadingDescription && <>