| @@ -3,8 +3,9 @@ | ||
| 3 | 3 | import { useRouter } from '@draft/hooks/useRouter'; |
| 4 | 4 | import { pageState } from '@draft/state/factory'; |
| 5 | 5 | import { backArrow } from '@draft/svg/BackArrow'; |
| 6 | 6 | import { generateImage } from '@shared/api/DataApi'; |
| 7 | +import { useImageCreditsSync } from '@shared/hooks/useImageCreditsSync'; | |
| 7 | 8 | import { useImageGenerationStore } from '@shared/state/generate-images'; |
| 8 | 9 | import { |
| 9 | 10 | BaseControl, |
| 10 | 11 | __experimentalHeading as Heading, |
| @@ -28,8 +29,9 @@ | ||
| 28 | 29 | subtractOneCredit, |
| 29 | 30 | aiImageOptions, |
| 30 | 31 | } = useImageGenerationStore(); |
| 31 | 32 | const [isGenerating, setIsGenerating] = useState(false); |
| 33 | + const [disclose, setDisclose] = useState(false); | |
| 32 | 34 | const [errorMessage, setErrorMessage] = useState(''); |
| 33 | 35 | const abortController = useRef(null); |
| 34 | 36 | const noCredits = curCredits.remaining === 0; |
| 35 | 37 | const { imageDetails, setImageDetails } = usePageState(); |
| @@ -34,8 +36,10 @@ | ||
| 34 | 36 | const noCredits = curCredits.remaining === 0; |
| 35 | 37 | const { imageDetails, setImageDetails } = usePageState(); |
| 36 | 38 | const { goBack } = useRouter(); |
| 37 | 39 | |
| 40 | + useImageCreditsSync(); | |
| 41 | + | |
| 38 | 42 | const clearImageResponse = () => setImageDetails({ src: '', id: undefined }); |
| 39 | 43 | const handleSubmit = async (event) => { |
| 40 | 44 | event.preventDefault(); |
| 41 | 45 | setErrorMessage(''); |
| @@ -48,19 +52,23 @@ | ||
| 48 | 52 | setIsGenerating(true); |
| 49 | 53 | subtractOneCredit(); |
| 50 | 54 | abortController.current = new AbortController(); |
| 51 | 55 | const { imageCredits, images, id } = await generateImage( |
| 52 | - aiImageOptions, | |
| 56 | + { ...aiImageOptions, source: 'draft' }, | |
| 53 | 57 | abortController.current.signal, |
| 54 | 58 | ); |
| 55 | 59 | updateImageCredits(imageCredits); |
| 56 | - setImageDetails({ src: images[0].url, id }); | |
| 60 | + setImageDetails({ | |
| 61 | + src: images[0].url, | |
| 62 | + id, | |
| 63 | + alt: images[0].alt ?? aiImageOptions.prompt, | |
| 64 | + }); | |
| 57 | 65 | } catch (error) { |
| 58 | 66 | // If the request was aborted (canceled), don't show an error |
| 59 | 67 | if (error?.code === 20) return; |
| 60 | 68 | // If we didn't get back any credit info, it was a server error |
| 61 | 69 | if (!error?.imageCredits) { |
| 62 | - // Pause to prefent flickering | |
| 70 | + // Pause to prevent flickering | |
| 63 | 71 | await new Promise((resolve) => setTimeout(resolve, 1000)); |
| 64 | 72 | setErrorMessage(error.message); |
| 65 | 73 | // Add back the credit we subtracted |
| 66 | 74 | updateImageCredits({ remaining: curCredits.remaining }); |
| @@ -98,12 +106,14 @@ | ||
| 98 | 106 | <PanelBody className="-mt-4 border-t-0"> |
| 99 | 107 | <BaseControl label={__('Image Description', 'extendify-local')}> |
| 100 | 108 | <ImagePreview |
| 101 | 109 | prompt={aiImageOptions.prompt} |
| 110 | + alt={imageDetails?.alt} | |
| 102 | 111 | size={aiImageOptions.size} |
| 103 | 112 | isGenerating={isGenerating} |
| 104 | 113 | id={imageDetails?.id} |
| 105 | 114 | src={imageDetails?.src} |
| 115 | + disclose={disclose} | |
| 106 | 116 | clearImageResponse={clearImageResponse} |
| 107 | 117 | /> |
| 108 | 118 | {imageDetails.src ? null : ( |
| 109 | 119 | <form onSubmit={handleSubmit} className="flex flex-col gap-5"> |
| @@ -109,8 +119,10 @@ | ||
| 109 | 119 | <form onSubmit={handleSubmit} className="flex flex-col gap-5"> |
| 110 | 120 | <GenerateForm |
| 111 | 121 | isGenerating={isGenerating} |
| 112 | 122 | errorMessage={errorMessage} |
| 123 | + disclose={disclose} | |
| 124 | + setDisclose={setDisclose} | |
| 113 | 125 | /> |
| 114 | 126 | </form> |
| 115 | 127 | )} |
| 116 | 128 | </BaseControl> |
