← All changes
|
src/Draft/components/image-generation/GenerateForm.jsx
+16
-2
3.1.2
→
3.2.1
View file →
| @@ -1,8 +1,9 @@ | ||
| 1 | 1 | import { CreditCounter } from '@draft/components/image-generation/CreditCounter'; |
| 2 | 2 | import { useImageGenerationStore } from '@shared/state/generate-images'; |
| 3 | 3 | import { |
| 4 | 4 | Button, |
| 5 | + CheckboxControl, | |
| 5 | 6 | TextareaControl, |
| 6 | 7 | __experimentalToggleGroupControl as ToggleGroupControl, |
| 7 | 8 | __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon, |
| 8 | 9 | } from '@wordpress/components'; |
| @@ -8,9 +9,14 @@ | ||
| 8 | 9 | } from '@wordpress/components'; |
| 9 | 10 | import { useEffect, useState } from '@wordpress/element'; |
| 10 | 11 | import { __ } from '@wordpress/i18n'; |
| 11 | 12 | |
| 12 | -export const GenerateForm = ({ isGenerating, errorMessage }) => { | |
| 13 | +export const GenerateForm = ({ | |
| 14 | + isGenerating, | |
| 15 | + errorMessage, | |
| 16 | + disclose, | |
| 17 | + setDisclose, | |
| 18 | +}) => { | |
| 13 | 19 | const { imageCredits, resetImageCredits, aiImageOptions, setAiImageOption } = |
| 14 | 20 | useImageGenerationStore(); |
| 15 | 21 | const usedCredits = imageCredits.total - imageCredits.remaining; |
| 16 | 22 | const [refreshCheck, setRefreshCheck] = useState(0); |
| @@ -30,9 +36,9 @@ | ||
| 30 | 36 | |
| 31 | 37 | return ( |
| 32 | 38 | <> |
| 33 | 39 | {isGenerating ? null : ( |
| 34 | - <div> | |
| 40 | + <div className="flex flex-col gap-4"> | |
| 35 | 41 | <TextareaControl |
| 36 | 42 | id="draft-ai-image-textarea" |
| 37 | 43 | autoFocus |
| 38 | 44 | placeholder={__( |
| @@ -73,8 +79,16 @@ | ||
| 73 | 79 | label={__('Portrait: 3:4', 'extendify-local')} |
| 74 | 80 | value="1024x1536" |
| 75 | 81 | /> |
| 76 | 82 | </ToggleGroupControl> |
| 83 | + | |
| 84 | + <CheckboxControl | |
| 85 | + __nextHasNoMarginBottom | |
| 86 | + // translators: Checkbox that adds a visible "AI Generated" mark onto the image. | |
| 87 | + label={__('Label image as AI-generated', 'extendify-local')} | |
| 88 | + checked={disclose} | |
| 89 | + onChange={setDisclose} | |
| 90 | + /> | |
| 77 | 91 | </div> |
| 78 | 92 | )} |
| 79 | 93 | {errorMessage.length > 0 && ( |
| 80 | 94 | <p className="mb-0 text-red-500">{errorMessage}</p> |