@automattic/jetpack-ai-client 0.19.0 → 0.20.0

package/CHANGELOG.md

@@ -5,6 +5,10 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [0.20.0] - 2024-09-30
+### Added
+- AI Client: add support for showStyleSelector on logo generator and use-image-generator [#39530]
+
 ## [0.19.0] - 2024-09-23
 ### Changed
 - AI Client: Don't send a default style to jetpack-ai-image endpoint, default is handled in backend and we need to not send it until we're ready for it to be a user option. [#39494]
@@ -415,6 +419,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.20.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.19.0...v0.20.0
 [0.19.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.18.1...v0.19.0
 [0.18.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.18.0...v0.18.1
 [0.18.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.17.0...v0.18.0

package/build/hooks/use-image-generator/constants.d.ts

@@ -0,0 +1,39 @@
+export declare const IMAGE_STYLE_ENHANCE = "enhance";
+export declare const IMAGE_STYLE_ANIME = "anime";
+export declare const IMAGE_STYLE_PHOTOGRAPHIC = "photographic";
+export declare const IMAGE_STYLE_DIGITAL_ART = "digital-art";
+export declare const IMAGE_STYLE_COMICBOOK = "comicbook";
+export declare const IMAGE_STYLE_FANTASY_ART = "fantasy-art";
+export declare const IMAGE_STYLE_ANALOG_FILM = "analog-film";
+export declare const IMAGE_STYLE_NEONPUNK = "neonpunk";
+export declare const IMAGE_STYLE_ISOMETRIC = "isometric";
+export declare const IMAGE_STYLE_LOWPOLY = "lowpoly";
+export declare const IMAGE_STYLE_ORIGAMI = "origami";
+export declare const IMAGE_STYLE_LINE_ART = "line-art";
+export declare const IMAGE_STYLE_CRAFT_CLAY = "craft-clay";
+export declare const IMAGE_STYLE_CINEMATIC = "cinematic";
+export declare const IMAGE_STYLE_3D_MODEL = "3d-model";
+export declare const IMAGE_STYLE_PIXEL_ART = "pixel-art";
+export declare const IMAGE_STYLE_TEXTURE = "texture";
+export declare const IMAGE_STYLE_MONTY_PYTHON = "monty-python";
+export declare const IMAGE_STYLE_LABELS: {
+    enhance: string;
+    anime: string;
+    photographic: string;
+    "digital-art": string;
+    comicbook: string;
+    "fantasy-art": string;
+    "analog-film": string;
+    neonpunk: string;
+    isometric: string;
+    lowpoly: string;
+    origami: string;
+    "line-art": string;
+    "craft-clay": string;
+    cinematic: string;
+    "3d-model": string;
+    "pixel-art": string;
+    texture: string;
+    "monty-python": string;
+};
+export type ImageStyle = keyof typeof IMAGE_STYLE_LABELS;

package/build/hooks/use-image-generator/constants.js

@@ -0,0 +1,40 @@
+import { __ } from '@wordpress/i18n';
+// Styles
+export const IMAGE_STYLE_ENHANCE = 'enhance';
+export const IMAGE_STYLE_ANIME = 'anime';
+export const IMAGE_STYLE_PHOTOGRAPHIC = 'photographic';
+export const IMAGE_STYLE_DIGITAL_ART = 'digital-art';
+export const IMAGE_STYLE_COMICBOOK = 'comicbook';
+export const IMAGE_STYLE_FANTASY_ART = 'fantasy-art';
+export const IMAGE_STYLE_ANALOG_FILM = 'analog-film';
+export const IMAGE_STYLE_NEONPUNK = 'neonpunk';
+export const IMAGE_STYLE_ISOMETRIC = 'isometric';
+export const IMAGE_STYLE_LOWPOLY = 'lowpoly';
+export const IMAGE_STYLE_ORIGAMI = 'origami';
+export const IMAGE_STYLE_LINE_ART = 'line-art';
+export const IMAGE_STYLE_CRAFT_CLAY = 'craft-clay';
+export const IMAGE_STYLE_CINEMATIC = 'cinematic';
+export const IMAGE_STYLE_3D_MODEL = '3d-model';
+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'),
+};

package/build/hooks/use-image-generator/index.d.ts

@@ -19,5 +19,7 @@ declare const useImageGenerator: () => {
         userPrompt?: string;
     }) => Promise<ImageGenerationResponse>;
     generateImageWithParameters: (parameters: object) => Promise<ImageGenerationResponse>;
+    getImageStyles: () => object;
 };
 export default useImageGenerator;
+export * from './constants.js';

package/build/hooks/use-image-generator/index.js

@@ -7,6 +7,7 @@ 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');
 /**
  * Cut the post content on a given lenght so the total length of the prompt is not longer than 4000 characters.
@@ -195,10 +196,20 @@ const useImageGenerator = () => {
             return Promise.reject(error);
         }
     };
+    /**
+     * Get available styles.
+     *
+     * @return {object} with the styles {key:label} for the image generation.
+     */
+    const getImageStyles = function () {
+        return IMAGE_STYLE_LABELS;
+    };
     return {
         generateImage,
         generateImageWithStableDiffusion,
         generateImageWithParameters: executeImageGeneration,
+        getImageStyles,
     };
 };
 export default useImageGenerator;
+export * from './constants.js';

package/build/logo-generator/components/generator-modal.js

@@ -29,7 +29,7 @@ import { UpgradeScreen } from './upgrade-screen.js';
 import { VisitSiteBanner } from './visit-site-banner.js';
 import './generator-modal.scss';
 const debug = debugFactory('jetpack-ai-calypso:generator-modal');
-export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDetails, context, placement, }) => {
+export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDetails, context, placement, showStyleSelector, }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
     const { setSiteDetails, fetchAiAssistantFeature, loadLogoHistory, setIsLoadingHistory } = useDispatch(STORE_NAME);
@@ -181,7 +181,7 @@ export const GeneratorModal = ({ isOpen, onClose, onApplyLogo, onReload, siteDet
         body = (_jsx(UpgradeScreen, { onCancel: closeModal, upgradeURL: upgradeURL, reason: needsFeature ? 'feature' : 'requests' }));
     }
     else {
-        body = (_jsxs(_Fragment, { children: [!logoAccepted && _jsx(Prompt, { initialPrompt: initialPrompt }), _jsx(LogoPresenter, { logo: selectedLogo, onApplyLogo: handleApplyLogo, logoAccepted: logoAccepted, siteId: String(siteId) }), logoAccepted ? (_jsxs("div", { className: "jetpack-ai-logo-generator__accept", children: [_jsx(VisitSiteBanner, {}), _jsx("div", { className: "jetpack-ai-logo-generator__accept-actions", children: _jsx(Button, { variant: "primary", onClick: closeModal, children: __('Close', 'jetpack-ai-client') }) })] })) : (_jsxs(_Fragment, { children: [_jsx(HistoryCarousel, {}), _jsx("div", { className: "jetpack-ai-logo-generator__footer", children: _jsxs(Button, { variant: "link", className: "jetpack-ai-logo-generator__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: [_jsx("span", { children: __('Provide feedback', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, className: "icon" })] }) })] }))] }));
+        body = (_jsxs(_Fragment, { children: [!logoAccepted && (_jsx(Prompt, { initialPrompt: initialPrompt, showStyleSelector: showStyleSelector })), _jsx(LogoPresenter, { logo: selectedLogo, onApplyLogo: handleApplyLogo, logoAccepted: logoAccepted, siteId: String(siteId) }), logoAccepted ? (_jsxs("div", { className: "jetpack-ai-logo-generator__accept", children: [_jsx(VisitSiteBanner, {}), _jsx("div", { className: "jetpack-ai-logo-generator__accept-actions", children: _jsx(Button, { variant: "primary", onClick: closeModal, children: __('Close', 'jetpack-ai-client') }) })] })) : (_jsxs(_Fragment, { children: [_jsx(HistoryCarousel, {}), _jsx("div", { className: "jetpack-ai-logo-generator__footer", children: _jsxs(Button, { variant: "link", className: "jetpack-ai-logo-generator__feedback-button", href: "https://jetpack.com/redirect/?source=jetpack-ai-feedback", target: "_blank", onClick: handleFeedbackClick, children: [_jsx("span", { children: __('Provide feedback', 'jetpack-ai-client') }), _jsx(Icon, { icon: external, className: "icon" })] }) })] }))] }));
     }
     return (_jsx(_Fragment, { children: isOpen && (_jsx(Modal, { className: "jetpack-ai-logo-generator-modal", onRequestClose: closeModal, shouldCloseOnClickOutside: false, shouldCloseOnEsc: false, title: __('Jetpack AI Logo Generator', 'jetpack-ai-client'), children: _jsx("div", { className: clsx('jetpack-ai-logo-generator-modal__body', {
                     'notice-modal': needsFeature || needsMoreRequests || featureFetchError || firstLogoPromptFetchError,

package/build/logo-generator/components/prompt.d.ts

@@ -1,5 +1,7 @@
-/// <reference types="react" resolution-mode="require"/>
 import './prompt.scss';
-export declare const Prompt: React.FC<{
+type PromptProps = {
     initialPrompt?: string;
-}>;
+    showStyleSelector?: boolean;
+};
+export declare const Prompt: ({ initialPrompt, showStyleSelector }: PromptProps) => import("react/jsx-runtime").JSX.Element;
+export {};

package/build/logo-generator/components/prompt.js

@@ -3,7 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-run
  * External dependencies
  */
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
-import { Button, Tooltip } from '@wordpress/components';
+import { Button, Tooltip, SelectControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, info } from '@wordpress/icons';
 import debugFactory from 'debug';
@@ -11,8 +11,9 @@ 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 AiIcon from '../assets/icons/ai.js';
-import { EVENT_GENERATE, MINIMUM_PROMPT_LENGTH, EVENT_UPGRADE, EVENT_PLACEMENT_INPUT_FOOTER, } from '../constants.js';
+import { EVENT_GENERATE, MINIMUM_PROMPT_LENGTH, EVENT_UPGRADE, EVENT_PLACEMENT_INPUT_FOOTER, EVENT_SWITCH_STYLE, } from '../constants.js';
 import { useCheckout } from '../hooks/use-checkout.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
 import useRequestErrors from '../hooks/use-request-errors.js';
@@ -20,7 +21,7 @@ import { FairUsageNotice } from './fair-usage-notice.js';
 import { UpgradeNudge } from './upgrade-nudge.js';
 import './prompt.scss';
 const debug = debugFactory('jetpack-ai-calypso:prompt-box');
-export const Prompt = ({ initialPrompt = '' }) => {
+export const Prompt = ({ initialPrompt = '', showStyleSelector = false }) => {
     const { tracks } = useAnalytics();
     const { recordEvent: recordTracksEvent } = tracks;
     const [prompt, setPrompt] = useState(initialPrompt);
@@ -28,7 +29,8 @@ export const Prompt = ({ initialPrompt = '' }) => {
     const { enhancePromptFetchError, logoFetchError } = useRequestErrors();
     const { nextTierCheckoutURL: checkoutUrl, hasNextTier } = useCheckout();
     const hasPrompt = prompt?.length >= MINIMUM_PROMPT_LENGTH;
-    const { generateLogo, enhancePrompt, setIsEnhancingPrompt, isBusy, isEnhancingPrompt, site, getAiAssistantFeature, requireUpgrade, context, tierPlansEnabled, } = useLogoGenerator();
+    const [style, setStyle] = useState(showStyleSelector ? IMAGE_STYLE_LINE_ART : null);
+    const { generateLogo, enhancePrompt, setIsEnhancingPrompt, isBusy, isEnhancingPrompt, site, getAiAssistantFeature, requireUpgrade, context, tierPlansEnabled, getImageStyles, } = useLogoGenerator();
     const enhancingLabel = __('Enhancing…', 'jetpack-ai-client');
     const enhanceLabel = __('Enhance prompt', 'jetpack-ai-client');
     const enhanceButtonLabel = isEnhancingPrompt ? enhancingLabel : enhanceLabel;
@@ -66,9 +68,10 @@ export const Prompt = ({ initialPrompt = '' }) => {
         }
     }, [prompt]);
     const onGenerate = useCallback(async () => {
-        recordTracksEvent(EVENT_GENERATE, { context, tool: 'image' });
-        generateLogo({ prompt });
-    }, [context, generateLogo, prompt]);
+        // shouldn't tool be "logo-generator" to be more specific?
+        recordTracksEvent(EVENT_GENERATE, { context, tool: 'image', style });
+        generateLogo({ prompt, style });
+    }, [context, generateLogo, prompt, style]);
     const onPromptInput = (event) => {
         setPrompt(event.target.textContent || '');
     };
@@ -89,7 +92,21 @@ export const Prompt = ({ initialPrompt = '' }) => {
     const onUpgradeClick = () => {
         recordTracksEvent(EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_INPUT_FOOTER });
     };
-    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), _jsx("span", { children: enhanceButtonLabel })] }) })] }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-query", children: [_jsx("div", { ref: inputRef, contentEditable: !isBusy && !requireUpgrade, 
+    const updateStyle = useCallback((imageStyle) => {
+        debug('change style', imageStyle);
+        setStyle(imageStyle);
+        recordTracksEvent(EVENT_SWITCH_STYLE, { context, style: imageStyle });
+    }, [context, setStyle, recordTracksEvent]);
+    const imageStyles = getImageStyles();
+    const availableStyles = Object.keys(imageStyles).filter((styleKey) => styleKey !== IMAGE_STYLE_MONTY_PYTHON);
+    return (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt", children: [_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-header", children: [_jsx("div", { className: "jetpack-ai-logo-generator__prompt-label", children: __('Describe your site:', 'jetpack-ai-client') }), _jsx("div", { className: "jetpack-ai-logo-generator__prompt-actions", children: _jsxs(Button, { variant: "link", disabled: isBusy || requireUpgrade || !hasPrompt, onClick: onEnhance, children: [_jsx(AiIcon, {}), enhanceButtonLabel] }) }), showStyleSelector && availableStyles && (_jsx(SelectControl
+                    // label={ __( 'Style', 'jetpack-ai-client' ) }
+                    , { 
+                        // label={ __( 'Style', 'jetpack-ai-client' ) }
+                        __nextHasNoMarginBottom: true, value: style, options: availableStyles.map(imageStyle => ({
+                            label: imageStyles[imageStyle],
+                            value: imageStyle,
+                        })), onChange: updateStyle }))] }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-query", children: [_jsx("div", { ref: inputRef, contentEditable: !isBusy && !requireUpgrade, 
                         // The content editable div is expected to be updated by the enhance prompt, so warnings are suppressed
                         suppressContentEditableWarning: true, className: "prompt-query__input", onInput: onPromptInput, onPaste: onPromptPaste, "data-placeholder": __('Describe your site or simply ask for a logo specifying some details about it', 'jetpack-ai-client') }), _jsx(Button, { variant: "primary", className: "jetpack-ai-logo-generator__prompt-submit", onClick: onGenerate, disabled: isBusy || requireUpgrade || !hasPrompt, children: __('Generate', 'jetpack-ai-client') })] }), _jsxs("div", { className: "jetpack-ai-logo-generator__prompt-footer", children: [!isUnlimited && !requireUpgrade && (_jsxs("div", { className: "jetpack-ai-logo-generator__prompt-requests", children: [_jsx("div", { children: sprintf(
                                 // translators: %u is the number of requests

package/build/logo-generator/constants.d.ts

@@ -8,6 +8,7 @@ export declare const EVENT_USE = "jetpack_ai_logo_generator_use";
 export declare const EVENT_NAVIGATE = "jetpack_ai_logo_generator_navigate";
 export declare const EVENT_FEEDBACK = "jetpack_ai_logo_generator_feedback";
 export declare const EVENT_UPGRADE = "jetpack_ai_upgrade_button";
+export declare const EVENT_SWITCH_STYLE = "jetpack_ai_logo_generator_switch_style";
 export declare const EVENT_PLACEMENT_QUICK_LINKS = "quick_links";
 export declare const EVENT_PLACEMENT_INPUT_FOOTER = "input_footer";
 export declare const EVENT_PLACEMENT_FREE_USER_SCREEN = "free_user_screen";

package/build/logo-generator/constants.js

@@ -9,6 +9,7 @@ export const EVENT_USE = 'jetpack_ai_logo_generator_use';
 export const EVENT_NAVIGATE = 'jetpack_ai_logo_generator_navigate';
 export const EVENT_FEEDBACK = 'jetpack_ai_logo_generator_feedback';
 export const EVENT_UPGRADE = 'jetpack_ai_upgrade_button';
+export const EVENT_SWITCH_STYLE = 'jetpack_ai_logo_generator_switch_style';
 // Event placement constants
 export const EVENT_PLACEMENT_QUICK_LINKS = 'quick_links';
 export const EVENT_PLACEMENT_INPUT_FOOTER = 'input_footer';

package/build/logo-generator/hooks/use-logo-generator.d.ts

@@ -1,6 +1,7 @@
 /**
  * Types
  */
+import type { ImageStyle } from '../../hooks/use-image-generator/constants.js';
 import type { Logo, SaveLogo } from '../store/types.js';
 declare const useLogoGenerator: () => {
     logos: Logo[];
@@ -15,8 +16,9 @@ declare const useLogoGenerator: () => {
     generateFirstPrompt: () => Promise<string>;
     saveLogo: SaveLogo;
     applyLogo: () => Promise<void>;
-    generateImage: ({ prompt, }: {
+    generateImage: ({ prompt, style, }: {
         prompt: string;
+        style?: ImageStyle | null;
     }) => Promise<{
         data: Array<{
             url: string;
@@ -26,8 +28,9 @@ declare const useLogoGenerator: () => {
         prompt: string;
     }) => Promise<string>;
     storeLogo: (logo: Logo) => void;
-    generateLogo: ({ prompt }: {
+    generateLogo: ({ prompt, style, }: {
         prompt: string;
+        style?: ImageStyle | null;
     }) => Promise<void>;
     setIsEnhancingPrompt: any;
     setIsRequestingImage: any;
@@ -45,5 +48,6 @@ declare const useLogoGenerator: () => {
     tierPlansEnabled: boolean;
     isLoadingHistory: boolean;
     setIsLoadingHistory: any;
+    getImageStyles: () => object;
 };
 export default useLogoGenerator;

package/build/logo-generator/hooks/use-logo-generator.js

@@ -37,7 +37,7 @@ const useLogoGenerator = () => {
         };
     }, []);
     const { setFirstLogoPromptFetchError, setEnhancePromptFetchError, setLogoFetchError, setSaveToLibraryError, setLogoUpdateError, } = useRequestErrors();
-    const { generateImageWithParameters } = useImageGenerator();
+    const { generateImageWithParameters, getImageStyles } = useImageGenerator();
     const { saveToMediaLibrary } = useSaveToMediaLibrary();
     const { ID = null, name = null, description = null } = siteDetails || {};
     const siteId = ID ? String(ID) : null;
@@ -127,7 +127,7 @@ For example: user's prompt: A logo for an ice cream shop. Returned prompt: A log
             throw error;
         }
     };
-    const generateImage = useCallback(async function ({ prompt, }) {
+    const generateImage = useCallback(async function ({ prompt, style = null, }) {
         setLogoFetchError(null);
         try {
             const tokenData = await requestJwt();
@@ -148,6 +148,7 @@ User request:${prompt}`;
                 prompt: imageGenerationPrompt,
                 feature: 'jetpack-ai-logo-generator',
                 response_format: 'b64_json',
+                style: style || '', // backend expects an empty string if no style is provided
             };
             const data = await generateImageWithParameters(body);
             return data;
@@ -212,7 +213,7 @@ User request:${prompt}`;
         addLogoToHistory(logo);
         stashLogo({ ...logo, siteId: String(siteId) });
     }, [siteId, addLogoToHistory, stashLogo]);
-    const generateLogo = useCallback(async function ({ prompt }) {
+    const generateLogo = useCallback(async function ({ prompt, style, }) {
         debug('Generating logo for site');
         setIsRequestingImage(true);
         try {
@@ -222,7 +223,7 @@ User request:${prompt}`;
             increaseAiAssistantRequestsCount(logoGenerationCost);
             let image;
             try {
-                image = await generateImage({ prompt });
+                image = await generateImage({ prompt, style });
                 if (!image || !image.data.length) {
                     throw new Error('No image returned');
                 }
@@ -286,6 +287,7 @@ User request:${prompt}`;
         tierPlansEnabled,
         isLoadingHistory,
         setIsLoadingHistory,
+        getImageStyles,
     };
 };
 export default useLogoGenerator;

package/build/logo-generator/types.d.ts

@@ -17,6 +17,7 @@ export interface GeneratorModalProps {
     onReload: () => void;
     context: string;
     placement: string;
+    showStyleSelector?: boolean;
 }
 export interface LogoPresenterProps {
     logo?: Logo;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.19.0",
+	"version": "0.20.0",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {
@@ -44,8 +44,8 @@
 	"types": "./build/index.d.ts",
 	"dependencies": {
 		"@automattic/jetpack-base-styles": "^0.6.32",
-		"@automattic/jetpack-connection": "^0.35.8",
-		"@automattic/jetpack-shared-extension-utils": "^0.15.10",
+		"@automattic/jetpack-connection": "^0.35.10",
+		"@automattic/jetpack-shared-extension-utils": "^0.15.11",
 		"@microsoft/fetch-event-source": "2.0.1",
 		"@types/react": "18.3.3",
 		"@types/wordpress__block-editor": "11.5.15",

package/src/hooks/use-image-generator/constants.ts

@@ -0,0 +1,44 @@
+import { __ } from '@wordpress/i18n';
+
+// Styles
+export const IMAGE_STYLE_ENHANCE = 'enhance';
+export const IMAGE_STYLE_ANIME = 'anime';
+export const IMAGE_STYLE_PHOTOGRAPHIC = 'photographic';
+export const IMAGE_STYLE_DIGITAL_ART = 'digital-art';
+export const IMAGE_STYLE_COMICBOOK = 'comicbook';
+export const IMAGE_STYLE_FANTASY_ART = 'fantasy-art';
+export const IMAGE_STYLE_ANALOG_FILM = 'analog-film';
+export const IMAGE_STYLE_NEONPUNK = 'neonpunk';
+export const IMAGE_STYLE_ISOMETRIC = 'isometric';
+export const IMAGE_STYLE_LOWPOLY = 'lowpoly';
+export const IMAGE_STYLE_ORIGAMI = 'origami';
+export const IMAGE_STYLE_LINE_ART = 'line-art';
+export const IMAGE_STYLE_CRAFT_CLAY = 'craft-clay';
+export const IMAGE_STYLE_CINEMATIC = 'cinematic';
+export const IMAGE_STYLE_3D_MODEL = '3d-model';
+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 = keyof typeof IMAGE_STYLE_LABELS;

package/src/hooks/use-image-generator/index.ts

@@ -7,6 +7,7 @@ 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' );
 
@@ -255,11 +256,22 @@ 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,
 	};
 };
 
 export default useImageGenerator;
+export * from './constants.js';

package/src/logo-generator/components/generator-modal.scss

@@ -26,7 +26,9 @@
 
 		&.is-link {
 			text-decoration: none;
-			color: var(--color-link, #3858e9);
+			&:not(:disabled) {
+				color: var(--color-link, #3858e9);
+			}
 		}
 	}
 }

package/src/logo-generator/components/generator-modal.tsx

@@ -49,6 +49,7 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	siteDetails,
 	context,
 	placement,
+	showStyleSelector,
 } ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
@@ -242,7 +243,9 @@ export const GeneratorModal: React.FC< GeneratorModalProps > = ( {
 	} else {
 		body = (
 			<>
-				{ ! logoAccepted && <Prompt initialPrompt={ initialPrompt } /> }
+				{ ! logoAccepted && (
+					<Prompt initialPrompt={ initialPrompt } showStyleSelector={ showStyleSelector } />
+				) }
 
 				<LogoPresenter
 					logo={ selectedLogo }

package/src/logo-generator/components/prompt.scss

@@ -9,12 +9,12 @@
 
 .jetpack-ai-logo-generator__prompt-header {
 	display: flex;
-	justify-content: space-between;
-	align-items: flex-start;
-	align-self: stretch;
+	gap: 16px;
+	align-items: center;
 
 	.jetpack-ai-logo-generator__prompt-label {
 		font-weight: 500;
+		flex-grow: 1;
 	}
 
 	.jetpack-ai-logo-generator__prompt-actions {
@@ -24,6 +24,8 @@
 
 		.jetpack-ai-logo-generator-icon {
 			margin-right: 4px;
+			// the svg icon with this class has no fill, only paths
+			stroke: currentColor;
 		}
 	}
 }

package/src/logo-generator/components/prompt.tsx

@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { useAnalytics } from '@automattic/jetpack-shared-extension-utils';
-import { Button, Tooltip } from '@wordpress/components';
+import { Button, Tooltip, SelectControl } from '@wordpress/components';
 import { __, sprintf } from '@wordpress/i18n';
 import { Icon, info } from '@wordpress/icons';
 import debugFactory from 'debug';
@@ -10,12 +10,17 @@ 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 AiIcon from '../assets/icons/ai.js';
 import {
 	EVENT_GENERATE,
 	MINIMUM_PROMPT_LENGTH,
 	EVENT_UPGRADE,
 	EVENT_PLACEMENT_INPUT_FOOTER,
+	EVENT_SWITCH_STYLE,
 } from '../constants.js';
 import { useCheckout } from '../hooks/use-checkout.js';
 import useLogoGenerator from '../hooks/use-logo-generator.js';
@@ -23,10 +28,19 @@ import useRequestErrors from '../hooks/use-request-errors.js';
 import { FairUsageNotice } from './fair-usage-notice.js';
 import { UpgradeNudge } from './upgrade-nudge.js';
 import './prompt.scss';
+/**
+ * Types
+ */
+import type { ImageStyle } from '../../hooks/use-image-generator/constants.js';
 
 const debug = debugFactory( 'jetpack-ai-calypso:prompt-box' );
 
-export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt = '' } ) => {
+type PromptProps = {
+	initialPrompt?: string;
+	showStyleSelector?: boolean;
+};
+
+export const Prompt = ( { initialPrompt = '', showStyleSelector = false }: PromptProps ) => {
 	const { tracks } = useAnalytics();
 	const { recordEvent: recordTracksEvent } = tracks;
 	const [ prompt, setPrompt ] = useState< string >( initialPrompt );
@@ -34,6 +48,9 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt
 	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 {
 		generateLogo,
@@ -46,6 +63,7 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt
 		requireUpgrade,
 		context,
 		tierPlansEnabled,
+		getImageStyles,
 	} = useLogoGenerator();
 
 	const enhancingLabel = __( 'Enhancing…', 'jetpack-ai-client' );
@@ -91,9 +109,10 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt
 	}, [ prompt ] );
 
 	const onGenerate = useCallback( async () => {
-		recordTracksEvent( EVENT_GENERATE, { context, tool: 'image' } );
-		generateLogo( { prompt } );
-	}, [ context, generateLogo, prompt ] );
+		// shouldn't tool be "logo-generator" to be more specific?
+		recordTracksEvent( EVENT_GENERATE, { context, tool: 'image', style } );
+		generateLogo( { prompt, style } );
+	}, [ context, generateLogo, prompt, style ] );
 
 	const onPromptInput = ( event: React.ChangeEvent< HTMLInputElement > ) => {
 		setPrompt( event.target.textContent || '' );
@@ -122,6 +141,20 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt
 		recordTracksEvent( EVENT_UPGRADE, { context, placement: EVENT_PLACEMENT_INPUT_FOOTER } );
 	};
 
+	const updateStyle = useCallback(
+		( imageStyle: ImageStyle ) => {
+			debug( 'change style', imageStyle );
+			setStyle( imageStyle );
+			recordTracksEvent( EVENT_SWITCH_STYLE, { context, style: imageStyle } );
+		},
+		[ 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">
@@ -135,9 +168,21 @@ export const Prompt: React.FC< { initialPrompt?: string } > = ( { initialPrompt
 						onClick={ onEnhance }
 					>
 						<AiIcon />
-						<span>{ enhanceButtonLabel }</span>
+						{ enhanceButtonLabel }
 					</Button>
 				</div>
+				{ showStyleSelector && availableStyles && (
+					<SelectControl
+						// label={ __( 'Style', 'jetpack-ai-client' ) }
+						__nextHasNoMarginBottom
+						value={ style }
+						options={ availableStyles.map( imageStyle => ( {
+							label: imageStyles[ imageStyle ],
+							value: imageStyle,
+						} ) ) }
+						onChange={ updateStyle }
+					/>
+				) }
 			</div>
 			<div className="jetpack-ai-logo-generator__prompt-query">
 				<div

package/src/logo-generator/constants.ts

@@ -10,6 +10,7 @@ export const EVENT_USE = 'jetpack_ai_logo_generator_use';
 export const EVENT_NAVIGATE = 'jetpack_ai_logo_generator_navigate';
 export const EVENT_FEEDBACK = 'jetpack_ai_logo_generator_feedback';
 export const EVENT_UPGRADE = 'jetpack_ai_upgrade_button';
+export const EVENT_SWITCH_STYLE = 'jetpack_ai_logo_generator_switch_style';
 
 // Event placement constants
 export const EVENT_PLACEMENT_QUICK_LINKS = 'quick_links';

package/src/logo-generator/hooks/use-logo-generator.ts

@@ -17,6 +17,7 @@ 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';
 
 const debug = debugFactory( 'jetpack-ai-calypso:use-logo-generator' );
@@ -78,7 +79,7 @@ const useLogoGenerator = () => {
 		setLogoUpdateError,
 	} = useRequestErrors();
 
-	const { generateImageWithParameters } = useImageGenerator();
+	const { generateImageWithParameters, getImageStyles } = useImageGenerator();
 	const { saveToMediaLibrary } = useSaveToMediaLibrary();
 
 	const { ID = null, name = null, description = null } = siteDetails || {};
@@ -193,8 +194,10 @@ For example: user's prompt: A logo for an ice cream shop. Returned prompt: A log
 
 	const generateImage = useCallback( async function ( {
 		prompt,
+		style = null,
 	}: {
 		prompt: string;
+		style?: ImageStyle | null;
 	} ): Promise< { data: Array< { url: string } > } > {
 		setLogoFetchError( null );
 
@@ -221,6 +224,7 @@ User request:${ prompt }`;
 				prompt: imageGenerationPrompt,
 				feature: 'jetpack-ai-logo-generator',
 				response_format: 'b64_json',
+				style: style || '', // backend expects an empty string if no style is provided
 			};
 
 			const data = await generateImageWithParameters( body );
@@ -309,7 +313,13 @@ User request:${ prompt }`;
 	);
 
 	const generateLogo = useCallback(
-		async function ( { prompt }: { prompt: string } ): Promise< void > {
+		async function ( {
+			prompt,
+			style,
+		}: {
+			prompt: string;
+			style?: ImageStyle | null;
+		} ): Promise< void > {
 			debug( 'Generating logo for site' );
 
 			setIsRequestingImage( true );
@@ -324,7 +334,7 @@ User request:${ prompt }`;
 				let image;
 
 				try {
-					image = await generateImage( { prompt } );
+					image = await generateImage( { prompt, style } );
 
 					if ( ! image || ! image.data.length ) {
 						throw new Error( 'No image returned' );
@@ -391,6 +401,7 @@ User request:${ prompt }`;
 		tierPlansEnabled,
 		isLoadingHistory,
 		setIsLoadingHistory,
+		getImageStyles,
 	};
 };
 

package/src/logo-generator/types.ts

@@ -19,6 +19,7 @@ export interface GeneratorModalProps {
 	onReload: () => void;
 	context: string;
 	placement: string;
+	showStyleSelector?: boolean;
 }
 
 export interface LogoPresenterProps {