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
Automattic · Oct 7, 2024 · 6688621 · 6688621
1 parent 28d3405
commit 6688621
Show file tree

Hide file tree

Showing 13 changed files with 66 additions and 82 deletions.
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
@@ -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
@@ -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
@@ -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
@@ -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 && (
-					<Prompt initialPrompt={ initialPrompt } showStyleSelector={ showStyleSelector } />
-				) }
+				{ ! logoAccepted && <Prompt initialPrompt={ initialPrompt } /> }
 
 				<LogoPresenter
 					logo={ selectedLogo }

diff --git a/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx b/projects/js-packages/ai-client/src/logo-generator/components/prompt.tsx
@@ -10,10 +10,7 @@ import { useCallback, useEffect, useState, useRef } from 'react';
 /**
  * Internal dependencies
  */
-import {
-	IMAGE_STYLE_MONTY_PYTHON,
-	IMAGE_STYLE_LINE_ART,
-} from '../../hooks/use-image-generator/constants.js';
+import { IMAGE_STYLE_LINE_ART } from '../../hooks/use-image-generator/constants.js';
 import AiIcon from '../assets/icons/ai.js';
 import {
 	EVENT_GENERATE,
@@ -37,20 +34,18 @@ const debug = debugFactory( 'jetpack-ai-calypso:prompt-box' );
 
 type PromptProps = {
 	initialPrompt?: string;
-	showStyleSelector?: boolean;
 };
 
-export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: PromptProps ) => {
+export const Prompt = ( { initialPrompt = '' }: PromptProps ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
 	const [ prompt, setPrompt ] = useState< string >( initialPrompt );
 	const [ requestsRemaining, setRequestsRemaining ] = useState( 0 );
 	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 (
 		<div className="jetpack-ai-logo-generator__prompt">
 			<div className="jetpack-ai-logo-generator__prompt-header">
@@ -171,15 +171,11 @@ export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: Promp
 						{ enhanceButtonLabel }
 					</Button>
 				</div>
-				{ showStyleSelector && availableStyles && (
+				{ showStyleSelector && (
 					<SelectControl
-						// label={ __( 'Style', 'jetpack-ai-client' ) }
 						__nextHasNoMarginBottom
 						value={ style }
-						options={ availableStyles.map( imageStyle => ( {
-							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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -125,8 +125,6 @@ const siteLogoEditWithAiComponents = createHigherOrderComponent( BlockEdit => {
 
 		const siteDetails = useSiteDetails();
 
-		const styleLogoFeatureEnabled = getFeatureAvailability( 'ai-logo-style-selector-support' );
-
 		return (
 			<>
 				<BlockEdit { ...props } />
@@ -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
@@ -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": [