@automattic/jetpack-ai-client 0.10.1 → 0.12.0

package/CHANGELOG.md

@@ -5,6 +5,25 @@ 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.12.0] - 2024-04-08
+### Added
+- Add error rejection in image generation. [#36709]
+
+### Changed
+- Updated package dependencies. [#36756] [#36760] [#36761]
+
+### Fixed
+- AI Featured Image: handle posts longer than the limit of Dall-e generation prompt. [#36703]
+
+## [0.11.0] - 2024-04-01
+### Added
+- AI Client: include prompt to generate featured image based on post content. [#36591]
+- Support different responses in image hook [#36626]
+
+### Fixed
+- AI Client: fix a bug where quick prompts would not work after getting suggested content [#36651]
+- AI Client: set request content type as JSON on image generation hook and use rectangular images instead of square images. [#36620]
+
 ## [0.10.1] - 2024-03-27
 ### Changed
 - Updated package dependencies. [#36539, #36585]
@@ -263,6 +282,8 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.12.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.11.0...v0.12.0
+[0.11.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.10.1...v0.11.0
 [0.10.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.10.0...v0.10.1
 [0.10.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.9.0...v0.10.0
 [0.9.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.8.2...v0.9.0

package/build/components/ai-control/index.js

@@ -9,8 +9,8 @@ import { useImperativeHandle, useRef, useEffect, useCallback } from '@wordpress/
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall, check, arrowUp, trash, reusableBlock } from '@wordpress/icons';
 import classNames from 'classnames';
-import { forwardRef } from 'react';
-import React from 'react';
+import debugFactory from 'debug';
+import React, { forwardRef } from 'react';
 /**
  * Internal dependencies
  */
@@ -19,6 +19,7 @@ import AiStatusIndicator from '../ai-status-indicator/index.js';
 import { GuidelineMessage } from './message.js';
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => { };
+const debug = debugFactory('jetpack-ai-client:ai-control');
 /**
  * AI Control component.
  *
@@ -35,10 +36,7 @@ export function AIControl({ disabled = false, value = '', placeholder = '', show
         if (editRequest) {
             promptUserInputRef?.current?.focus();
         }
-        if (!editRequest && lastValue !== null && value !== lastValue) {
-            onChange?.(lastValue);
-        }
-    }, [editRequest, lastValue, value]);
+    }, [editRequest]);
     const sendRequest = useCallback(() => {
         setLastValue(value);
         setEditRequest(false);
@@ -62,6 +60,7 @@ export function AIControl({ disabled = false, value = '', placeholder = '', show
         onDiscard?.();
     }, []);
     const cancelEdit = useCallback(() => {
+        debug('cancelEdit, revert to last value', lastValue);
         onChange(lastValue || '');
         setEditRequest(false);
     }, [lastValue]);

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

@@ -1,10 +1,12 @@
 declare const useImageGenerator: () => {
-    generateImage: ({ feature, }: {
+    generateImage: ({ feature, postContent, responseFormat, }: {
         feature: string;
+        postContent: string;
+        responseFormat?: 'url' | 'b64_json';
     }) => Promise<{
-        data: Array<{
-            url: string;
-        }>;
+        data: {
+            [key: string]: string;
+        }[];
     }>;
 };
 export default useImageGenerator;

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

@@ -8,7 +8,7 @@ import debugFactory from 'debug';
 import requestJwt from '../../jwt/index.js';
 const debug = debugFactory('ai-client:use-image-generator');
 const useImageGenerator = () => {
-    const generateImage = async function ({ feature, }) {
+    const generateImage = async function ({ feature, postContent, responseFormat = 'url', }) {
         let token = '';
         try {
             token = (await requestJwt()).token;
@@ -19,26 +19,45 @@ const useImageGenerator = () => {
         }
         try {
             debug('Generating image');
-            // TODO: Find a proper prompt for the image generation
-            const imageGenerationPrompt = ``;
+            // TODO: fine tune the prompt as we move forward
+            const imageGenerationPrompt = `I need a cover image for a blog post.
+Before creating the image, identify the main topic of the content and only represent it.
+Do not represent the whole content in one image, keep it simple and just represent one single idea.
+Do not add details, detailed explanations or highlights from the content, just represent the main idea as if it was a photograph.
+Do not use collages or compositions with multiple elements or scenes. Stick to one single scene. Do not compose unrealistic scenes.
+If the content describes facts, objects or concepts from the real world, represent them on a realistic style and do not make unreal compositions.
+If the content is more abstract, use a more abstract style to represent the main idea.
+Make sure the light and the style are visually appealing.
+Do not add text to the image.
+
+This is the post content:
+
+` + (postContent.length > 3000 ? postContent.substring(0, 3000) + ` [...]` : postContent); // truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
             const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
             const body = {
                 prompt: imageGenerationPrompt,
-                response_format: 'url',
+                response_format: responseFormat,
                 feature,
+                size: '1792x1024',
             };
             const headers = {
                 Authorization: `Bearer ${token}`,
+                'Content-Type': 'application/json',
             };
             const data = await fetch(URL, {
                 method: 'POST',
                 headers,
                 body: JSON.stringify(body),
             }).then(response => response.json());
+            if (data?.data?.status && data?.data?.status > 200) {
+                debug('Error generating image: %o', data);
+                return Promise.reject(data);
+            }
             return data;
         }
         catch (error) {
-            return;
+            debug('Error generating image: %o', error);
+            return Promise.reject(error);
         }
     };
     return {

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.10.1",
+	"version": "0.12.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": {
@@ -18,13 +18,14 @@
 		"build": "pnpm run clean && pnpm run compile-ts",
 		"clean": "rm -rf build/",
 		"compile-ts": "tsc --pretty",
-		"test": "NODE_OPTIONS=--experimental-vm-modules jest"
+		"test": "NODE_OPTIONS=--experimental-vm-modules jest",
+		"watch": "tsc --watch --pretty"
 	},
 	"type": "module",
 	"devDependencies": {
-		"@storybook/addon-actions": "8.0.4",
-		"@storybook/blocks": "8.0.4",
-		"@storybook/react": "8.0.4",
+		"@storybook/addon-actions": "8.0.6",
+		"@storybook/blocks": "8.0.6",
+		"@storybook/react": "8.0.6",
 		"jest": "^29.6.2",
 		"jest-environment-jsdom": "29.7.0",
 		"typescript": "5.0.4"
@@ -38,19 +39,19 @@
 	"main": "./build/index.js",
 	"types": "./build/index.d.ts",
 	"dependencies": {
-		"@automattic/jetpack-base-styles": "^0.6.20",
-		"@automattic/jetpack-connection": "^0.33.5",
-		"@automattic/jetpack-shared-extension-utils": "^0.14.8",
+		"@automattic/jetpack-base-styles": "^0.6.21",
+		"@automattic/jetpack-connection": "^0.33.7",
+		"@automattic/jetpack-shared-extension-utils": "^0.14.9",
 		"@microsoft/fetch-event-source": "2.0.1",
-		"@types/react": "18.2.61",
-		"@wordpress/api-fetch": "6.51.0",
-		"@wordpress/block-editor": "12.22.0",
-		"@wordpress/components": "27.2.0",
-		"@wordpress/compose": "6.31.0",
-		"@wordpress/data": "9.24.0",
-		"@wordpress/element": "5.31.0",
-		"@wordpress/i18n": "4.54.0",
-		"@wordpress/icons": "9.45.0",
+		"@types/react": "18.2.74",
+		"@wordpress/api-fetch": "6.52.0",
+		"@wordpress/block-editor": "12.23.0",
+		"@wordpress/components": "27.3.0",
+		"@wordpress/compose": "6.32.0",
+		"@wordpress/data": "9.25.0",
+		"@wordpress/element": "5.32.0",
+		"@wordpress/i18n": "4.55.0",
+		"@wordpress/icons": "9.46.0",
 		"classnames": "2.3.2",
 		"debug": "4.3.4",
 		"react": "18.2.0",

package/src/components/ai-control/index.tsx

@@ -8,8 +8,8 @@ import { useImperativeHandle, useRef, useEffect, useCallback } from '@wordpress/
 import { __ } from '@wordpress/i18n';
 import { Icon, closeSmall, check, arrowUp, trash, reusableBlock } from '@wordpress/icons';
 import classNames from 'classnames';
-import { forwardRef } from 'react';
-import React from 'react';
+import debugFactory from 'debug';
+import React, { forwardRef } from 'react';
 /**
  * Internal dependencies
  */
@@ -45,6 +45,8 @@ type AiControlProps = {
 // eslint-disable-next-line @typescript-eslint/no-empty-function
 const noop = () => {};
 
+const debug = debugFactory( 'jetpack-ai-client:ai-control' );
+
 /**
  * AI Control component.
  *
@@ -84,11 +86,7 @@ export function AIControl(
 		if ( editRequest ) {
 			promptUserInputRef?.current?.focus();
 		}
-
-		if ( ! editRequest && lastValue !== null && value !== lastValue ) {
-			onChange?.( lastValue );
-		}
-	}, [ editRequest, lastValue, value ] );
+	}, [ editRequest ] );
 
 	const sendRequest = useCallback( () => {
 		setLastValue( value );
@@ -119,6 +117,7 @@ export function AIControl(
 	}, [] );
 
 	const cancelEdit = useCallback( () => {
+		debug( 'cancelEdit, revert to last value', lastValue );
 		onChange( lastValue || '' );
 		setEditRequest( false );
 	}, [ lastValue ] );

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

@@ -12,9 +12,13 @@ const debug = debugFactory( 'ai-client:use-image-generator' );
 const useImageGenerator = () => {
 	const generateImage = async function ( {
 		feature,
+		postContent,
+		responseFormat = 'url',
 	}: {
 		feature: string;
-	} ): Promise< { data: Array< { url: string } > } > {
+		postContent: string;
+		responseFormat?: 'url' | 'b64_json';
+	} ): Promise< { data: Array< { [ key: string ]: string } > } > {
 		let token = '';
 
 		try {
@@ -27,19 +31,34 @@ const useImageGenerator = () => {
 		try {
 			debug( 'Generating image' );
 
-			// TODO: Find a proper prompt for the image generation
-			const imageGenerationPrompt = ``;
+			// TODO: fine tune the prompt as we move forward
+			const imageGenerationPrompt =
+				`I need a cover image for a blog post.
+Before creating the image, identify the main topic of the content and only represent it.
+Do not represent the whole content in one image, keep it simple and just represent one single idea.
+Do not add details, detailed explanations or highlights from the content, just represent the main idea as if it was a photograph.
+Do not use collages or compositions with multiple elements or scenes. Stick to one single scene. Do not compose unrealistic scenes.
+If the content describes facts, objects or concepts from the real world, represent them on a realistic style and do not make unreal compositions.
+If the content is more abstract, use a more abstract style to represent the main idea.
+Make sure the light and the style are visually appealing.
+Do not add text to the image.
+
+This is the post content:
+
+` + ( postContent.length > 3000 ? postContent.substring( 0, 3000 ) + ` [...]` : postContent ); // truncating the content so the whole prompt is not longer than 4000 characters, the model limit.
 
 			const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
 
 			const body = {
 				prompt: imageGenerationPrompt,
-				response_format: 'url',
+				response_format: responseFormat,
 				feature,
+				size: '1792x1024',
 			};
 
 			const headers = {
 				Authorization: `Bearer ${ token }`,
+				'Content-Type': 'application/json',
 			};
 
 			const data = await fetch( URL, {
@@ -48,9 +67,15 @@ const useImageGenerator = () => {
 				body: JSON.stringify( body ),
 			} ).then( response => response.json() );
 
-			return data as { data: { url: string }[] };
+			if ( data?.data?.status && data?.data?.status > 200 ) {
+				debug( 'Error generating image: %o', data );
+				return Promise.reject( data );
+			}
+
+			return data as { data: { [ key: string ]: string }[] };
 		} catch ( error ) {
-			return;
+			debug( 'Error generating image: %o', error );
+			return Promise.reject( error );
 		}
 	};