Add descriptions of different lengths

src/photo/ai/index.ts

@@ -1,12 +1,20 @@
 import { streamOpenAiImageQuery } from '@/services/openai';
 
-export type ImageQuery = 'title' | 'caption' | 'tags' | 'description';
+export type ImageQuery =
+  'title' |
+  'caption' |
+  'tags' |
+  'descriptionSmall' |
+  'descriptionMedium' |
+  'descriptionLarge';
 
 export const IMAGE_QUERIES: Record<ImageQuery, string> = {
   title: 'Provide a short title for this image',
   caption: 'What is the caption of this image?',
   tags: 'Describe this image three or less comma-separated keywords',
-  description: 'Describe this image in detail',
+  descriptionSmall: 'Describe this image succinctly',
+  descriptionMedium: 'Describe this image',
+  descriptionLarge: 'Describe this image in detail',
 };
 
 export const streamImageQuery = (imageBase64: string, query: ImageQuery) =>

src/photo/form/PhotoForm.tsx

@@ -131,10 +131,16 @@ export default function PhotoForm({
   ] = useImageQuery(imageData, 'tags');
 
   const [
-    requestDescription,
+    requestDescriptionSmall,
-    description,
+    descriptionSmall,
-    isLoadingDescription,
+    isLoadingDescriptionSmall,
-  ] = useImageQuery(imageData, 'description');
+  ] = useImageQuery(imageData, 'descriptionSmall');
+
+  const [
+    requestDescriptionLarge,
+    descriptionLarge,
+    isLoadingDescriptionLarge,
+  ] = useImageQuery(imageData, 'descriptionLarge');
 
   return (
     <div className="space-y-8 max-w-[38rem]">
@@ -145,8 +151,17 @@ export default function PhotoForm({
         <button onClick={requestTags} disabled={isLoadingTags}>
           Tags ✨
         </button>
-        <button onClick={requestDescription} disabled={isLoadingDescription}>
+        <button
-          Description ✨
+          onClick={requestDescriptionSmall}
+          disabled={isLoadingDescriptionSmall}
+        >
+          Description (S) ✨
+        </button>
+        <button
+          onClick={requestDescriptionLarge}
+          disabled={isLoadingDescriptionLarge}
+        >
+          Description (L) ✨
         </button>
       </div>
       <div className="flex gap-2">
@@ -195,7 +210,14 @@ export default function PhotoForm({
         </>}
       </p>
       <p>
-        ✨ DESCRIPTION: {description} {isLoadingDescription && <>
+        ✨ DESCRIPTION (S): {descriptionSmall} {isLoadingDescriptionSmall && <>
+          <span className="inline-flex translate-y-[1.5px]">
+            <Spinner />
+          </span>
+        </>}
+      </p>
+      <p>
+        ✨ DESCRIPTION (L): {descriptionLarge} {isLoadingDescriptionLarge && <>
           <span className="inline-flex translate-y-[1.5px]">
             <Spinner />
           </span>