From 668862162ad5fc9340fc3db296495f24e46874af Mon Sep 17 00:00:00 2001 From: Christian Gastrell Date: Mon, 7 Oct 2024 16:02:12 -0300 Subject: [PATCH] Jetpack AI: change logo generator styles source (#39589) * remove style definitions from frontend, add type for style object * update types and hook props * remove showStyleSelector prop, take it from hook now. Use styles as sent from backend, filtered and shaped there already * add siteFragment to global interface for initial JP state, avoid linter warnings * add changelogs * remove the need for beta feature and gutenberg extension, if backend sends it, we use it --- ...ge-jetpack-ai-logo-generator-styles-source | 4 ++ .../hooks/use-image-generator/constants.ts | 46 +++++++++---------- .../src/hooks/use-image-generator/index.ts | 11 ----- .../components/generator-modal.tsx | 5 +- .../src/logo-generator/components/prompt.tsx | 38 +++++++-------- .../hooks/use-logo-generator.ts | 13 ++++-- .../src/logo-generator/store/types.ts | 7 ++- .../ai-client/src/logo-generator/types.ts | 1 - ...ge-jetpack-ai-logo-generator-styles-source | 4 ++ .../blocks/ai-assistant/ai-assistant.php | 12 ----- .../extensions/blocks/ai-assistant/index.d.ts | 1 + .../extended-blocks/core-site-logo/index.tsx | 3 -- .../plugins/jetpack/extensions/index.json | 3 +- 13 files changed, 66 insertions(+), 82 deletions(-) create mode 100644 projects/js-packages/ai-client/changelog/change-jetpack-ai-logo-generator-styles-source create mode 100644 projects/plugins/jetpack/changelog/change-jetpack-ai-logo-generator-styles-source diff --git a/projects/js-packages/ai-client/changelog/change-jetpack-ai-logo-generator-styles-source b/projects/js-packages/ai-client/changelog/change-jetpack-ai-logo-generator-styles-source new file mode 100644 index 0000000000000..7f35b97fbe921 --- /dev/null +++ b/projects/js-packages/ai-client/changelog/change-jetpack-ai-logo-generator-styles-source @@ -0,0 +1,4 @@ +Significance: minor +Type: changed + +AI Client: remove provision of image styles via flag prop and internal definition, take it from ai-assistant-feature payload now diff --git a/projects/js-packages/ai-client/src/hooks/use-image-generator/constants.ts b/projects/js-packages/ai-client/src/hooks/use-image-generator/constants.ts index a0825efdfc374..efecc0aa5e2b8 100644 --- a/projects/js-packages/ai-client/src/hooks/use-image-generator/constants.ts +++ b/projects/js-packages/ai-client/src/hooks/use-image-generator/constants.ts @@ -1,5 +1,3 @@ -import { __ } from '@wordpress/i18n'; - // Styles export const IMAGE_STYLE_ENHANCE = 'enhance'; export const IMAGE_STYLE_ANIME = 'anime'; @@ -20,25 +18,27 @@ export const IMAGE_STYLE_PIXEL_ART = 'pixel-art'; export const IMAGE_STYLE_TEXTURE = 'texture'; export const IMAGE_STYLE_MONTY_PYTHON = 'monty-python'; -export const IMAGE_STYLE_LABELS = { - [ IMAGE_STYLE_ENHANCE ]: __( 'Enhance', 'jetpack-ai-client' ), - [ IMAGE_STYLE_ANIME ]: __( 'Anime', 'jetpack-ai-client' ), - [ IMAGE_STYLE_PHOTOGRAPHIC ]: __( 'Photographic', 'jetpack-ai-client' ), - [ IMAGE_STYLE_DIGITAL_ART ]: __( 'Digital Art', 'jetpack-ai-client' ), - [ IMAGE_STYLE_COMICBOOK ]: __( 'Comicbook', 'jetpack-ai-client' ), - [ IMAGE_STYLE_FANTASY_ART ]: __( 'Fantasy Art', 'jetpack-ai-client' ), - [ IMAGE_STYLE_ANALOG_FILM ]: __( 'Analog Film', 'jetpack-ai-client' ), - [ IMAGE_STYLE_NEONPUNK ]: __( 'Neon Punk', 'jetpack-ai-client' ), - [ IMAGE_STYLE_ISOMETRIC ]: __( 'Isometric', 'jetpack-ai-client' ), - [ IMAGE_STYLE_LOWPOLY ]: __( 'Low Poly', 'jetpack-ai-client' ), - [ IMAGE_STYLE_ORIGAMI ]: __( 'Origami', 'jetpack-ai-client' ), - [ IMAGE_STYLE_LINE_ART ]: __( 'Line Art', 'jetpack-ai-client' ), - [ IMAGE_STYLE_CRAFT_CLAY ]: __( 'Craft Clay', 'jetpack-ai-client' ), - [ IMAGE_STYLE_CINEMATIC ]: __( 'Cinematic', 'jetpack-ai-client' ), - [ IMAGE_STYLE_3D_MODEL ]: __( '3D Model', 'jetpack-ai-client' ), - [ IMAGE_STYLE_PIXEL_ART ]: __( 'Pixel Art', 'jetpack-ai-client' ), - [ IMAGE_STYLE_TEXTURE ]: __( 'Texture', 'jetpack-ai-client' ), - [ IMAGE_STYLE_MONTY_PYTHON ]: __( 'Monty Python', 'jetpack-ai-client' ), -}; +export type ImageStyle = + | typeof IMAGE_STYLE_ENHANCE + | typeof IMAGE_STYLE_ANIME + | typeof IMAGE_STYLE_PHOTOGRAPHIC + | typeof IMAGE_STYLE_DIGITAL_ART + | typeof IMAGE_STYLE_COMICBOOK + | typeof IMAGE_STYLE_FANTASY_ART + | typeof IMAGE_STYLE_ANALOG_FILM + | typeof IMAGE_STYLE_NEONPUNK + | typeof IMAGE_STYLE_ISOMETRIC + | typeof IMAGE_STYLE_LOWPOLY + | typeof IMAGE_STYLE_ORIGAMI + | typeof IMAGE_STYLE_LINE_ART + | typeof IMAGE_STYLE_CRAFT_CLAY + | typeof IMAGE_STYLE_CINEMATIC + | typeof IMAGE_STYLE_3D_MODEL + | typeof IMAGE_STYLE_PIXEL_ART + | typeof IMAGE_STYLE_TEXTURE + | typeof IMAGE_STYLE_MONTY_PYTHON; -export type ImageStyle = keyof typeof IMAGE_STYLE_LABELS; +export type ImageStyleObject = { + label: string; + value: ImageStyle; +}; diff --git a/projects/js-packages/ai-client/src/hooks/use-image-generator/index.ts b/projects/js-packages/ai-client/src/hooks/use-image-generator/index.ts index 7664322ffc645..43022f1ced9d2 100644 --- a/projects/js-packages/ai-client/src/hooks/use-image-generator/index.ts +++ b/projects/js-packages/ai-client/src/hooks/use-image-generator/index.ts @@ -7,7 +7,6 @@ import debugFactory from 'debug'; */ import askQuestionSync from '../../ask-question/sync.js'; import requestJwt from '../../jwt/index.js'; -import { IMAGE_STYLE_LABELS } from './constants.js'; const debug = debugFactory( 'ai-client:use-image-generator' ); @@ -256,20 +255,10 @@ const useImageGenerator = () => { } }; - /** - * Get available styles. - * - * @return {object} with the styles {key:label} for the image generation. - */ - const getImageStyles = function (): object { - return IMAGE_STYLE_LABELS; - }; - return { generateImage, generateImageWithStableDiffusion, generateImageWithParameters: executeImageGeneration, - getImageStyles, }; }; diff --git a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx index 526bd5011066c..485d8c7b318b6 100644 --- a/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx +++ b/projects/js-packages/ai-client/src/logo-generator/components/generator-modal.tsx @@ -49,7 +49,6 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { siteDetails, context, placement, - showStyleSelector, } ) => { const { tracks } = useAnalytics(); const { recordEvent: recordTracksEvent } = tracks; @@ -243,9 +242,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( { } else { body = ( <> - { ! logoAccepted && ( - - ) } + { ! logoAccepted && } { +export const Prompt = ( { initialPrompt = '' }: PromptProps ) => { const { tracks } = useAnalytics(); const { recordEvent: recordTracksEvent } = tracks; const [ prompt, setPrompt ] = useState< string >( initialPrompt ); @@ -48,9 +44,8 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp const { enhancePromptFetchError, logoFetchError } = useRequestErrors(); const { nextTierCheckoutURL: checkoutUrl, hasNextTier } = useCheckout(); const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH; - const [ style, setStyle ] = useState< ImageStyle >( - showStyleSelector ? IMAGE_STYLE_LINE_ART : null - ); + const [ showStyleSelector, setShowStyleSelector ] = useState( false ); + const [ style, setStyle ] = useState< ImageStyle >( null ); const { generateLogo, @@ -63,7 +58,7 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp requireUpgrade, context, tierPlansEnabled, - getImageStyles, + imageStyles, } = useLogoGenerator(); const enhancingLabel = __( 'Enhancing…', 'jetpack-ai-client' ); @@ -108,6 +103,16 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp } }, [ prompt ] ); + useEffect( () => { + if ( imageStyles.length > 0 ) { + setShowStyleSelector( true ); + setStyle( IMAGE_STYLE_LINE_ART ); + } else { + setShowStyleSelector( false ); + setStyle( null ); + } + }, [ imageStyles ] ); + const onGenerate = useCallback( async () => { // shouldn't tool be "logo-generator" to be more specific? recordTracksEvent( EVENT_GENERATE, { context, tool: 'image', style } ); @@ -150,11 +155,6 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp [ context, setStyle, recordTracksEvent ] ); - const imageStyles = getImageStyles(); - const availableStyles = Object.keys( imageStyles ).filter( - ( styleKey: ImageStyle ) => styleKey !== IMAGE_STYLE_MONTY_PYTHON - ); - return (
@@ -171,15 +171,11 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp { enhanceButtonLabel }
- { showStyleSelector && availableStyles && ( + { showStyleSelector && ( ( { - label: imageStyles[ imageStyle ], - value: imageStyle, - } ) ) } + options={ imageStyles } onChange={ updateStyle } /> ) } diff --git a/projects/js-packages/ai-client/src/logo-generator/hooks/use-logo-generator.ts b/projects/js-packages/ai-client/src/logo-generator/hooks/use-logo-generator.ts index 038150d19630a..d2b286062d107 100644 --- a/projects/js-packages/ai-client/src/logo-generator/hooks/use-logo-generator.ts +++ b/projects/js-packages/ai-client/src/logo-generator/hooks/use-logo-generator.ts @@ -17,8 +17,8 @@ import useRequestErrors from './use-request-errors.js'; /** * Types */ -import type { ImageStyle } from '../../hooks/use-image-generator/constants.js'; -import type { Logo, Selectors, SaveLogo } from '../store/types.js'; +import type { ImageStyle, ImageStyleObject } from '../../hooks/use-image-generator/constants.js'; +import type { Logo, Selectors, SaveLogo, LogoGeneratorFeatureControl } from '../store/types.js'; const debug = debugFactory( 'jetpack-ai-calypso:use-logo-generator' ); @@ -79,7 +79,7 @@ const useLogoGenerator = () => { setLogoUpdateError, } = useRequestErrors(); - const { generateImageWithParameters, getImageStyles } = useImageGenerator(); + const { generateImageWithParameters } = useImageGenerator(); const { saveToMediaLibrary } = useSaveToMediaLibrary(); const { ID = null, name = null, description = null } = siteDetails || {}; @@ -368,6 +368,11 @@ User request:${ prompt }`; [ logoGenerationCost, increaseAiAssistantRequestsCount, saveLogo, storeLogo, generateImage ] ); + const logoGeneratorControl = aiAssistantFeatureData?.featuresControl?.[ + 'logo-generator' + ] as LogoGeneratorFeatureControl; + const imageStyles: Array< ImageStyleObject > = logoGeneratorControl?.styles; + return { logos, selectedLogoIndex, @@ -401,7 +406,7 @@ User request:${ prompt }`; tierPlansEnabled, isLoadingHistory, setIsLoadingHistory, - getImageStyles, + imageStyles, }; }; diff --git a/projects/js-packages/ai-client/src/logo-generator/store/types.ts b/projects/js-packages/ai-client/src/logo-generator/store/types.ts index b40b2be92b85a..0c985a148cfd7 100644 --- a/projects/js-packages/ai-client/src/logo-generator/store/types.ts +++ b/projects/js-packages/ai-client/src/logo-generator/store/types.ts @@ -1,3 +1,4 @@ +import type { ImageStyleObject } from '../../hooks/use-image-generator/constants.js'; import type { SiteDetails } from '../types.js'; /** @@ -88,10 +89,14 @@ export type TierValueProp = | Tier750Props[ 'value' ] | Tier1000Props[ 'value' ]; +export type LogoGeneratorFeatureControl = FeatureControl & { + styles: Array< ImageStyleObject > | []; +}; + export type FeatureControl = { enabled: boolean; 'min-jetpack-version': string; - [ key: string ]: FeatureControl | boolean | string; + [ key: string ]: FeatureControl | LogoGeneratorFeatureControl | boolean | string; }; export type FeaturesControl = { [ key: string ]: FeatureControl }; diff --git a/projects/js-packages/ai-client/src/logo-generator/types.ts b/projects/js-packages/ai-client/src/logo-generator/types.ts index 60801f353bc3c..f25e238a9737c 100644 --- a/projects/js-packages/ai-client/src/logo-generator/types.ts +++ b/projects/js-packages/ai-client/src/logo-generator/types.ts @@ -19,7 +19,6 @@ export interface GeneratorModalProps { onReload: () => void; context: string; placement: string; - showStyleSelector?: boolean; } export interface LogoPresenterProps { diff --git a/projects/plugins/jetpack/changelog/change-jetpack-ai-logo-generator-styles-source b/projects/plugins/jetpack/changelog/change-jetpack-ai-logo-generator-styles-source new file mode 100644 index 0000000000000..35017e49b64e8 --- /dev/null +++ b/projects/plugins/jetpack/changelog/change-jetpack-ai-logo-generator-styles-source @@ -0,0 +1,4 @@ +Significance: patch +Type: other + +Janitorial: add siteFragment to JP initial state definition, avoid linter warnings diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/ai-assistant.php b/projects/plugins/jetpack/extensions/blocks/ai-assistant/ai-assistant.php index d61b90b4ee7df..9cae364a75c57 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/ai-assistant.php +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/ai-assistant.php @@ -197,15 +197,3 @@ function () { } } ); - -/** - * Register the `ai-logo-style-selector-support` extension. - */ -add_action( - 'jetpack_register_gutenberg_extensions', - function () { - if ( apply_filters( 'jetpack_ai_enabled', true ) && apply_filters( 'jetpack_ai_logo_style_selector_enabled', false ) ) { - \Jetpack_Gutenberg::set_extension_available( 'ai-logo-style-selector-support' ); - } - } -); diff --git a/projects/plugins/jetpack/extensions/blocks/ai-assistant/index.d.ts b/projects/plugins/jetpack/extensions/blocks/ai-assistant/index.d.ts index 68643719c7a9e..b1dcdaa6506dc 100644 --- a/projects/plugins/jetpack/extensions/blocks/ai-assistant/index.d.ts +++ b/projects/plugins/jetpack/extensions/blocks/ai-assistant/index.d.ts @@ -1,5 +1,6 @@ interface Window { Jetpack_Editor_Initial_State: { + siteFragment: string; siteLocale: string; adminUrl: string; available_blocks: { diff --git a/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx b/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx index 6fb31d290f74c..233e96aad4a65 100644 --- a/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx +++ b/projects/plugins/jetpack/extensions/extended-blocks/core-site-logo/index.tsx @@ -125,8 +125,6 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => { const siteDetails = useSiteDetails(); - const styleLogoFeatureEnabled = getFeatureAvailability( 'ai-logo-style-selector-support' ); - return ( <> @@ -141,7 +139,6 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => { context={ PLACEMENT_CONTEXT } placement={ TOOL_PLACEMENT } siteDetails={ siteDetails } - showStyleSelector={ styleLogoFeatureEnabled } /> ); diff --git a/projects/plugins/jetpack/extensions/index.json b/projects/plugins/jetpack/extensions/index.json index e20420c0cf2f4..82c0f558c948f 100644 --- a/projects/plugins/jetpack/extensions/index.json +++ b/projects/plugins/jetpack/extensions/index.json @@ -78,8 +78,7 @@ "recipe", "v6-video-frame-poster", "videopress/video-chapters", - "ai-assistant-backend-prompts", - "ai-logo-style-selector-support" + "ai-assistant-backend-prompts" ], "experimental": [], "no-post-editor": [