Add error handling to AI text generation

src/photo/ai/useImageQuery.ts

@@ -8,19 +8,25 @@ export default function useImageQuery(
   query: ImageQuery,
 ) {
   const [text, setText] = useState('');
+  const [error, setError] = useState<any>();
   const [isLoading, setIsLoading] = useState(false);
 
   const request = useCallback(async () => {
     if (imageBase64) {
       setIsLoading(true);
-      const textStream = await streamImageQueryAction(
+      try {
-        imageBase64 ?? '',
+        const textStream = await streamImageQueryAction(
-        query,
+          imageBase64 ?? '',
-      );
+          query,
-      for await (const text of readStreamableValue(textStream)) {
+        );
-        setText(text ?? '');
+        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;
 };

src/photo/form/PhotoForm.tsx

@@ -181,21 +181,21 @@ export default function PhotoForm({
           />}
       </div>
       <p>
-        AI RESPONSE 01: {title} {isLoadingTitle && <>
+        ✨ TITLE: {title} {isLoadingTitle && <>
           <span className="inline-flex translate-y-[1.5px]">
             <Spinner />
           </span>
         </>}
       </p>
       <p>
-        AI RESPONSE 02: {tags} {isLoadingTags && <>
+        ✨ TAGS: {tags} {isLoadingTags && <>
           <span className="inline-flex translate-y-[1.5px]">
             <Spinner />
           </span>
         </>}
       </p>
       <p>
-        AI RESPONSE 01: {description} {isLoadingDescription && <>
+        ✨ DESCRIPTION: {description} {isLoadingDescription && <>
           <span className="inline-flex translate-y-[1.5px]">
             <Spinner />
           </span>