@automattic/jetpack-ai-client 0.14.0 → 0.14.1

package/CHANGELOG.md

@@ -5,6 +5,11 @@ 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.14.1] - 2024-05-27
+### Changed
+- AI Client: Add paragraph tweaks to Markdown conversion libs. [#37461]
+- AI Featured Image: add type info. [#37474]
+
 ## [0.14.0] - 2024-05-20
 ### Added
 - AI Client: Expose HTML render rules type. [#37386]
@@ -323,6 +328,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Updated package dependencies. [#31659]
 - Updated package dependencies. [#31785]
 
+[0.14.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.14.0...v0.14.1
 [0.14.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.13.1...v0.14.0
 [0.13.1]: https://github.com/Automattic/jetpack-ai-client/compare/v0.13.0...v0.13.1
 [0.13.0]: https://github.com/Automattic/jetpack-ai-client/compare/v0.12.4...v0.13.0

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

@@ -1,22 +1,22 @@
+/**
+ * The type of the response from the image generation API.
+ */
+type ImageGenerationResponse = {
+    data: Array<{
+        [key: string]: string;
+    }>;
+};
 declare const useImageGenerator: () => {
     generateImage: ({ feature, postContent, responseFormat, userPrompt, }: {
         feature: string;
         postContent: string;
         responseFormat?: 'url' | 'b64_json';
         userPrompt?: string;
-    }) => Promise<{
-        data: {
-            [key: string]: string;
-        }[];
-    }>;
+    }) => Promise<ImageGenerationResponse>;
     generateImageWithStableDiffusion: ({ feature, postContent, userPrompt, }: {
         feature: string;
         postContent: string;
         userPrompt?: string;
-    }) => Promise<{
-        data: {
-            [key: string]: string;
-        }[];
-    }>;
+    }) => Promise<ImageGenerationResponse>;
 };
 export default useImageGenerator;

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
@@ -130,101 +129,66 @@ const getStableDiffusionImageGenerationPrompt = async (postContent, userPrompt,
     return data.choices?.[0]?.message?.content;
 };
 const useImageGenerator = () => {
-    const generateImageWithStableDiffusion = async function ({ feature, postContent, userPrompt, }) {
-        let token = null;
+    const executeImageGeneration = async function (parameters) {
+        let token = '';
         try {
-            token = await requestJwt();
+            token = (await requestJwt()).token;
         }
         catch (error) {
             debug('Error getting token: %o', error);
             return Promise.reject(error);
         }
         try {
-            debug('Generating image with Stable Diffusion');
-            const prompt = await getStableDiffusionImageGenerationPrompt(postContent, userPrompt, feature);
-            const data = {
-                prompt,
-                style: 'photographic',
-                token: token.token,
-                width: 1024,
-                height: 768,
+            const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
+            const headers = {
+                Authorization: `Bearer ${token}`,
+                'Content-Type': 'application/json',
             };
-            const response = await fetch(`https://public-api.wordpress.com/wpcom/v2/sites/${token.blogId}/ai-image`, {
+            const data = await fetch(URL, {
                 method: 'POST',
-                headers: {
-                    'Content-Type': 'application/json',
-                },
-                body: JSON.stringify(data),
-            });
-            if (!response?.ok) {
-                debug('Error generating image: %o', response);
-                return Promise.reject({
-                    data: {
-                        status: response.status,
-                    },
-                    message: __('Error generating image. Please try again later.', 'jetpack-ai-client'),
-                });
+                headers,
+                body: JSON.stringify(parameters),
+            }).then(response => response.json());
+            if (data?.data?.status && data?.data?.status > 200) {
+                debug('Error generating image: %o', data);
+                return Promise.reject(data);
             }
-            const blob = await response.blob();
-            /**
-             * Convert the blob to base64 to keep the same format as the Dalle API.
-             */
-            const base64 = await new Promise((resolve, reject) => {
-                const reader = new FileReader();
-                reader.onloadend = () => {
-                    const base64data = reader.result;
-                    return resolve(base64data.replace(/^data:image\/(png|jpg);base64,/, ''));
-                };
-                reader.onerror = reject;
-                reader.readAsDataURL(blob);
-            });
-            // Return the Dalle API format
-            return {
-                data: [
-                    {
-                        b64_json: base64,
-                        revised_prompt: prompt,
-                    },
-                ],
-            };
+            return data;
         }
         catch (error) {
             debug('Error generating image: %o', error);
             return Promise.reject(error);
         }
     };
-    const generateImage = async function ({ feature, postContent, responseFormat = 'url', userPrompt, }) {
-        let token = '';
+    const generateImageWithStableDiffusion = async function ({ feature, postContent, userPrompt, }) {
         try {
-            token = (await requestJwt()).token;
+            debug('Generating image with Stable Diffusion');
+            const prompt = await getStableDiffusionImageGenerationPrompt(postContent, userPrompt, feature);
+            const parameters = {
+                prompt,
+                feature,
+                model: 'stable-diffusion',
+                style: 'photographic',
+            };
+            const data = await executeImageGeneration(parameters);
+            return data;
         }
         catch (error) {
-            debug('Error getting token: %o', error);
+            debug('Error generating image: %o', error);
             return Promise.reject(error);
         }
+    };
+    const generateImage = async function ({ feature, postContent, responseFormat = 'url', userPrompt, }) {
         try {
             debug('Generating image');
             const imageGenerationPrompt = getDalleImageGenerationPrompt(postContent, userPrompt);
-            const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
-            const body = {
+            const parameters = {
                 prompt: imageGenerationPrompt,
                 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);
-            }
+            const data = await executeImageGeneration(parameters);
             return data;
         }
         catch (error) {

package/build/libs/markdown/html-to-markdown.d.ts

@@ -5,11 +5,19 @@ import TurndownService from 'turndown';
 /**
  * Types
  */
-import type { Options, Rule } from 'turndown';
+import type { Options, Rule, Filter } from 'turndown';
+export type Fix = 'paragraph';
 export default class HTMLToMarkdown {
     turndownService: TurndownService;
-    constructor(options?: Options, rules?: {
-        [key: string]: Rule;
+    fixes: Fix[];
+    constructor({ options, rules, keep, remove, fixes, }?: {
+        options?: Options;
+        rules?: {
+            [key: string]: Rule;
+        };
+        keep?: Filter;
+        remove?: Filter;
+        fixes?: Fix[];
     });
     /**
      * Renders HTML from Markdown content with specified processing rules.

package/build/libs/markdown/html-to-markdown.js

@@ -2,6 +2,12 @@
  * External dependencies
  */
 import TurndownService from 'turndown';
+const fixesList = {
+    paragraph: (content) => {
+        // Keep <br> tags to prevent paragraphs from being split
+        return content.replaceAll('\n', '<br />');
+    },
+};
 const defaultTurndownOptions = { emDelimiter: '_', headingStyle: 'atx' };
 const defaultTurndownRules = {
     strikethrough: {
@@ -13,10 +19,15 @@ const defaultTurndownRules = {
 };
 export default class HTMLToMarkdown {
     turndownService;
-    constructor(options = defaultTurndownOptions, rules = defaultTurndownRules) {
-        this.turndownService = new TurndownService(options);
-        for (const rule in rules) {
-            this.turndownService.addRule(rule, rules[rule]);
+    fixes;
+    constructor({ options = {}, rules = {}, keep = [], remove = [], fixes = [], } = {}) {
+        this.fixes = fixes;
+        this.turndownService = new TurndownService({ ...defaultTurndownOptions, ...options });
+        this.turndownService.keep(keep);
+        this.turndownService.remove(remove);
+        const allRules = { ...defaultTurndownRules, ...rules };
+        for (const rule in allRules) {
+            this.turndownService.addRule(rule, allRules[rule]);
         }
     }
     /**
@@ -26,6 +37,9 @@ export default class HTMLToMarkdown {
      * @returns {string}                 The rendered Markdown content
      */
     render({ content }) {
-        return this.turndownService.turndown(content);
+        const rendered = this.turndownService.turndown(content);
+        return this.fixes.reduce((renderedContent, fix) => {
+            return fixesList[fix](renderedContent);
+        }, rendered);
     }
 }

package/build/libs/markdown/markdown-to-html.d.ts

@@ -6,7 +6,7 @@ import MarkdownIt from 'markdown-it';
  * Types
  */
 import type { Options } from 'markdown-it';
-export type Fix = 'list';
+export type Fix = 'list' | 'paragraph';
 export default class MarkdownToHTML {
     markdownConverter: MarkdownIt;
     constructor(options?: Options);

package/build/libs/markdown/markdown-to-html.js

@@ -7,6 +7,10 @@ const fixes = {
         // Fix list indentation
         return content.replace(/<li>\s+<p>/g, '<li>').replace(/<\/p>\s+<\/li>/g, '</li>');
     },
+    paragraph: (content) => {
+        // Fix encoding of <br /> tags
+        return content.replaceAll(/\s*&lt;br \/&gt;\s*/g, '<br />');
+    },
 };
 const defaultMarkdownItOptions = {
     breaks: true,

package/package.json

@@ -1,7 +1,7 @@
 {
 	"private": false,
 	"name": "@automattic/jetpack-ai-client",
-	"version": "0.14.0",
+	"version": "0.14.1",
 	"description": "A JS client for consuming Jetpack AI services",
 	"homepage": "https://github.com/Automattic/jetpack/tree/HEAD/projects/js-packages/ai-client/#readme",
 	"bugs": {

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

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { __ } from '@wordpress/i18n';
 import debugFactory from 'debug';
 /**
  * Internal dependencies
@@ -11,6 +10,13 @@ import requestJwt from '../../jwt/index.js';
 
 const debug = debugFactory( 'ai-client:use-image-generator' );
 
+/**
+ * The type of the response from the image generation API.
+ */
+type ImageGenerationResponse = {
+	data: Array< { [ key: string ]: string } >;
+};
+
 /**
  * Cut the post content on a given lenght so the total length of the prompt is not longer than 4000 characters.
  * @param {string} content - the content to be truncated
@@ -148,6 +154,44 @@ const getStableDiffusionImageGenerationPrompt = async (
 };
 
 const useImageGenerator = () => {
+	const executeImageGeneration = async function ( parameters: {
+		[ key: string ]: string;
+	} ): Promise< ImageGenerationResponse > {
+		let token = '';
+
+		try {
+			token = ( await requestJwt() ).token;
+		} catch ( error ) {
+			debug( 'Error getting token: %o', error );
+			return Promise.reject( error );
+		}
+
+		try {
+			const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
+
+			const headers = {
+				Authorization: `Bearer ${ token }`,
+				'Content-Type': 'application/json',
+			};
+
+			const data = await fetch( URL, {
+				method: 'POST',
+				headers,
+				body: JSON.stringify( parameters ),
+			} ).then( response => response.json() );
+
+			if ( data?.data?.status && data?.data?.status > 200 ) {
+				debug( 'Error generating image: %o', data );
+				return Promise.reject( data );
+			}
+
+			return data as ImageGenerationResponse;
+		} catch ( error ) {
+			debug( 'Error generating image: %o', error );
+			return Promise.reject( error );
+		}
+	};
+
 	const generateImageWithStableDiffusion = async function ( {
 		feature,
 		postContent,
@@ -156,16 +200,7 @@ const useImageGenerator = () => {
 		feature: string;
 		postContent: string;
 		userPrompt?: string;
-	} ): Promise< { data: Array< { [ key: string ]: string } > } > {
-		let token = null;
-
-		try {
-			token = await requestJwt();
-		} catch ( error ) {
-			debug( 'Error getting token: %o', error );
-			return Promise.reject( error );
-		}
-
+	} ): Promise< ImageGenerationResponse > {
 		try {
 			debug( 'Generating image with Stable Diffusion' );
 
@@ -175,59 +210,15 @@ const useImageGenerator = () => {
 				feature
 			);
 
-			const data = {
+			const parameters = {
 				prompt,
+				feature,
+				model: 'stable-diffusion',
 				style: 'photographic',
-				token: token.token,
-				width: 1024,
-				height: 768,
 			};
 
-			const response = await fetch(
-				`https://public-api.wordpress.com/wpcom/v2/sites/${ token.blogId }/ai-image`,
-				{
-					method: 'POST',
-					headers: {
-						'Content-Type': 'application/json',
-					},
-					body: JSON.stringify( data ),
-				}
-			);
-
-			if ( ! response?.ok ) {
-				debug( 'Error generating image: %o', response );
-				return Promise.reject( {
-					data: {
-						status: response.status,
-					},
-					message: __( 'Error generating image. Please try again later.', 'jetpack-ai-client' ),
-				} );
-			}
-
-			const blob = await response.blob();
-
-			/**
-			 * Convert the blob to base64 to keep the same format as the Dalle API.
-			 */
-			const base64 = await new Promise( ( resolve, reject ) => {
-				const reader = new FileReader();
-				reader.onloadend = () => {
-					const base64data = reader.result as string;
-					return resolve( base64data.replace( /^data:image\/(png|jpg);base64,/, '' ) );
-				};
-				reader.onerror = reject;
-				reader.readAsDataURL( blob );
-			} );
-
-			// Return the Dalle API format
-			return {
-				data: [
-					{
-						b64_json: base64 as string,
-						revised_prompt: prompt,
-					},
-				],
-			};
+			const data: ImageGenerationResponse = await executeImageGeneration( parameters );
+			return data;
 		} catch ( error ) {
 			debug( 'Error generating image: %o', error );
 			return Promise.reject( error );
@@ -244,47 +235,21 @@ const useImageGenerator = () => {
 		postContent: string;
 		responseFormat?: 'url' | 'b64_json';
 		userPrompt?: string;
-	} ): Promise< { data: Array< { [ key: string ]: string } > } > {
-		let token = '';
-
-		try {
-			token = ( await requestJwt() ).token;
-		} catch ( error ) {
-			debug( 'Error getting token: %o', error );
-			return Promise.reject( error );
-		}
-
+	} ): Promise< ImageGenerationResponse > {
 		try {
 			debug( 'Generating image' );
 
 			const imageGenerationPrompt = getDalleImageGenerationPrompt( postContent, userPrompt );
 
-			const URL = 'https://public-api.wordpress.com/wpcom/v2/jetpack-ai-image';
-
-			const body = {
+			const parameters = {
 				prompt: imageGenerationPrompt,
 				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 as { data: { [ key: string ]: string }[] };
+			const data: ImageGenerationResponse = await executeImageGeneration( parameters );
+			return data;
 		} catch ( error ) {
 			debug( 'Error generating image: %o', error );
 			return Promise.reject( error );

package/src/libs/markdown/README.md

@@ -35,7 +35,7 @@ const rules = {
 		}
  	}
 };
-const renderer = new HTMLToMarkdown( options, rules );
+const renderer = new HTMLToMarkdown( { options, rules } );
 const markdownContent = renderer.render( { content: htmlContent } );
 // ***Hello world***
 ```

package/src/libs/markdown/html-to-markdown.ts

@@ -5,7 +5,19 @@ import TurndownService from 'turndown';
 /**
  * Types
  */
-import type { Options, Rule } from 'turndown';
+import type { Options, Rule, Filter } from 'turndown';
+
+export type Fix = 'paragraph';
+type Fixes = {
+	[ key in Fix ]: ( content: string ) => string;
+};
+
+const fixesList: Fixes = {
+	paragraph: ( content: string ) => {
+		// Keep <br> tags to prevent paragraphs from being split
+		return content.replaceAll( '\n', '<br />' );
+	},
+};
 
 const defaultTurndownOptions: Options = { emDelimiter: '_', headingStyle: 'atx' };
 const defaultTurndownRules: { [ key: string ]: Rule } = {
@@ -19,14 +31,29 @@ const defaultTurndownRules: { [ key: string ]: Rule } = {
 
 export default class HTMLToMarkdown {
 	turndownService: TurndownService;
+	fixes: Fix[];
+
+	constructor( {
+		options = {},
+		rules = {},
+		keep = [],
+		remove = [],
+		fixes = [],
+	}: {
+		options?: Options;
+		rules?: { [ key: string ]: Rule };
+		keep?: Filter;
+		remove?: Filter;
+		fixes?: Fix[];
+	} = {} ) {
+		this.fixes = fixes;
+		this.turndownService = new TurndownService( { ...defaultTurndownOptions, ...options } );
+		this.turndownService.keep( keep );
+		this.turndownService.remove( remove );
 
-	constructor(
-		options: Options = defaultTurndownOptions,
-		rules: { [ key: string ]: Rule } = defaultTurndownRules
-	) {
-		this.turndownService = new TurndownService( options );
-		for ( const rule in rules ) {
-			this.turndownService.addRule( rule, rules[ rule ] );
+		const allRules = { ...defaultTurndownRules, ...rules };
+		for ( const rule in allRules ) {
+			this.turndownService.addRule( rule, allRules[ rule ] );
 		}
 	}
 
@@ -37,6 +64,10 @@ export default class HTMLToMarkdown {
 	 * @returns {string}                 The rendered Markdown content
 	 */
 	render( { content }: { content: string } ): string {
-		return this.turndownService.turndown( content );
+		const rendered = this.turndownService.turndown( content );
+
+		return this.fixes.reduce( ( renderedContent, fix ) => {
+			return fixesList[ fix ]( renderedContent );
+		}, rendered );
 	}
 }

package/src/libs/markdown/markdown-to-html.ts

@@ -7,7 +7,7 @@ import MarkdownIt from 'markdown-it';
  */
 import type { Options } from 'markdown-it';
 
-export type Fix = 'list';
+export type Fix = 'list' | 'paragraph';
 type Fixes = {
 	[ key in Fix ]: ( content: string ) => string;
 };
@@ -17,6 +17,10 @@ const fixes: Fixes = {
 		// Fix list indentation
 		return content.replace( /<li>\s+<p>/g, '<li>' ).replace( /<\/p>\s+<\/li>/g, '</li>' );
 	},
+	paragraph: ( content: string ) => {
+		// Fix encoding of <br /> tags
+		return content.replaceAll( /\s*&lt;br \/&gt;\s*/g, '<br />' );
+	},
 };
 
 const defaultMarkdownItOptions: Options = {