Move our Chrome AI JS code into a JS file instead of rendering that i…

…n PHP
10up · Oct 16, 2024 · 9b97859 · 9b97859
1 parent 6e579c9
commit 9b97859
Show file tree

Hide file tree

Showing 5 changed files with 80 additions and 73 deletions.
diff --git a/includes/Classifai/Providers/Browser/ChromeAI.php b/includes/Classifai/Providers/Browser/ChromeAI.php
@@ -13,7 +13,6 @@
 use WP_Error;
 
 use function Classifai\get_default_prompt;
-use function Classifai\sanitize_number_of_responses_field;
 
 class ChromeAI extends Provider {
 
@@ -33,14 +32,6 @@ public function __construct( $feature_instance = null ) {
 		$this->feature_instance = $feature_instance;
 	}
 
-	/**
-	 * Register what we need for the plugin.
-	 */
-	public function register() {
-		// TODO: find a better hook for this.
-		add_action( 'wp_print_scripts', [ $this, 'output_excerpt_script' ] );
-	}
-
 	/**
 	 * Render the provider fields.
 	 */
@@ -71,46 +62,6 @@ public function sanitize_settings( array $new_settings ): array {
 		return $new_settings;
 	}
 
-	/**
-	 * Output the excerpt script.
-	 *
-	 * This will make a request to the Chrome AI API to generate an excerpt.
-	 */
-	public function output_excerpt_script() {
-		// TODO: ensure this only loads on single admin content.
-		// TODO: support classic editor.
-		?>
-		<script type="text/javascript">
-			async function classifaiChromeAITextGeneration( prompt = '', content = '' ) {
-				let result = '';
-
-				if ( ! window.ai ) {
-					return result;
-				}
-
-				const supportsTextGeneration = await window.ai.languageModel.capabilities();
-
-				if (
-					supportsTextGeneration &&
-					supportsTextGeneration.available === 'readily'
-				) {
-					const session = await window.ai.languageModel.create( {
-						initialPrompts: [
-							{
-								role: 'system',
-								content: prompt,
-							},
-						]
-					} );
-					result = await session.prompt( `"""${content}"""` );
-				}
-
-				return result;
-			}
-		</script>
-		<?php
-	}
-
 	/**
 	 * Common entry point for all REST endpoints for this provider.
 	 *
@@ -209,7 +160,7 @@ public function generate_excerpt( int $post_id = 0, array $args = [] ) {
 			[
 				'prompt'  => 'You will be provided with content delimited by triple quotes. ' . $prompt,
 				'content' => $this->get_content( $post_id, $excerpt_length, false, $args['content'] ),
-				'func'    => 'classifaiChromeAITextGeneration',
+				'func'    => static::ID,
 			],
 			$post_id
 		);
@@ -276,7 +227,7 @@ public function generate_title( int $post_id = 0, array $args = [] ) {
 			[
 				'prompt'  => 'You will be provided with content delimited by triple quotes. ' . $prompt,
 				'content' => $this->get_content( $post_id, 0, false, $args['content'] ),
-				'func'    => 'classifaiChromeAITextGeneration',
+				'func'    => static::ID,
 			],
 			$post_id
 		);
@@ -335,7 +286,7 @@ public function resize_content( int $post_id, array $args = array() ) {
 			[
 				'prompt'  => 'You will be provided with content delimited by triple quotes. ' . $prompt,
 				'content' => esc_html( $args['content'] ),
-				'func'    => 'classifaiChromeAITextGeneration',
+				'func'    => static::ID,
 			],
 			$post_id
 		);

diff --git a/src/js/features/content-resizing/index.js b/src/js/features/content-resizing/index.js
@@ -1,5 +1,8 @@
 /* eslint-disable @wordpress/no-unsafe-wp-apis */
 /* eslint-disable no-shadow */
+/**
+ * External Dependencies.
+ */
 import { registerPlugin } from '@wordpress/plugins';
 import {
 	store as blockEditorStore,
@@ -23,7 +26,11 @@ import {
 } from '@wordpress/wordcount';
 import { __, _nx } from '@wordpress/i18n';
 
+/**
+ * Internal Dependencies.
+ */
 import { DisableFeatureButton } from '../../components';
+import { browserAITextGeneration } from '../../helpers';
 import './index.scss';
 
 const aiIconSvg = (
@@ -256,13 +263,11 @@ const ContentResizingPlugin = () => {
 				typeof __textArray === 'object' &&
 				__textArray.hasOwnProperty( 'func' )
 			) {
-				const res =
-					'undefined' !== typeof window[ __textArray.func ]
-						? await window[ __textArray.func ](
-								__textArray?.prompt,
-								__textArray?.content
-						  )
-						: '';
+				const res = await browserAITextGeneration(
+					__textArray.func,
+					__textArray?.prompt,
+					__textArray?.content
+				);
 				__textArray = [ res.trim() ];
 			}
 		} else {

diff --git a/src/js/features/excerpt-generation/panel.js b/src/js/features/excerpt-generation/panel.js
@@ -12,6 +12,7 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal Dependencies.
  */
 import { DisableFeatureButton } from '../../components';
+import { browserAITextGeneration } from '../../helpers';
 
 /**
  * PostExcerpt component.
@@ -51,13 +52,11 @@ function PostExcerpt( { excerpt, onUpdateExcerpt } ) {
 				// Support calling a function from the response for browser AI.
 				if ( typeof res === 'object' ) {
 					if ( res.hasOwnProperty( 'func' ) ) {
-						res =
-							'undefined' !== typeof window[ res.func ]
-								? await window[ res.func ](
-										res?.prompt,
-										res?.content
-								  )
-								: '';
+						res = await browserAITextGeneration(
+							res.func,
+							res?.prompt,
+							res?.content
+						);
 					} else {
 						res = '';
 					}

diff --git a/src/js/features/title-generation/index.js b/src/js/features/title-generation/index.js
@@ -20,6 +20,7 @@ import apiFetch from '@wordpress/api-fetch';
  * Internal Dependencies.
  */
 import { DisableFeatureButton } from '../../components';
+import { browserAITextGeneration } from '../../helpers';
 
 const { classifaiChatGPTData } = window;
 
@@ -69,13 +70,11 @@ const TitleGenerationPlugin = () => {
 				// Support calling a function from the response for browser AI.
 				if ( typeof res === 'object' ) {
 					if ( res.hasOwnProperty( 'func' ) ) {
-						res =
-							'undefined' !== typeof window[ res.func ]
-								? await window[ res.func ](
-										res?.prompt,
-										res?.content
-								  )
-								: '';
+						res = await browserAITextGeneration(
+							res.func,
+							res?.prompt,
+							res?.content
+						);
 						res = [ res.trim() ];
 					} else {
 						res = [];

diff --git a/src/js/helpers.js b/src/js/helpers.js
@@ -63,3 +63,56 @@ export const handleClick = ( {
 		}
 	);
 };
+
+/**
+ * Make a request to a browser AI to generate text.
+ *
+ * @param {string} provider Provider to use.
+ * @param {string} prompt   Prompt to send to the API.
+ * @param {string} content  Content to add in addition to the prompt.
+ */
+export const browserAITextGeneration = async (
+	provider = '',
+	prompt = '',
+	content = ''
+) => {
+	switch ( provider ) {
+		case 'chrome_ai':
+			return chromeAITextGeneration( prompt, content );
+		default:
+			return '';
+	}
+};
+
+/**
+ * Make a request to the Chrome AI API to generate text.
+ *
+ * @param {string} prompt  Prompt to send to the API.
+ * @param {string} content Content to add in addition to the prompt.
+ */
+export const chromeAITextGeneration = async ( prompt = '', content = '' ) => {
+	let result = '';
+
+	if ( ! window.ai ) {
+		return result;
+	}
+
+	const supportsTextGeneration = await window.ai.languageModel.capabilities();
+
+	if (
+		supportsTextGeneration &&
+		supportsTextGeneration.available === 'readily'
+	) {
+		const session = await window.ai.languageModel.create( {
+			initialPrompts: [
+				{
+					role: 'system',
+					content: prompt,
+				},
+			],
+		} );
+		result = await session.prompt( `"""${ content }"""` );
+	}
+
+	return result;
+};