Update how "Chrome AI" provider handled in settings.

Author: iamdharmesh

hookdocs/chrome-built-in-ai.md

@@ -0,0 +1,12 @@
+Chrome is experimenting with adding [built-in AI](https://developer.chrome.com/docs/ai/built-in) directly to the browser, allowing websites and web applications to perform AI-powered tasks without needing to deploy or manage their own AI models. Please follow the steps below to use Chrome’s built-in AI:
+
+1. **Install Chrome Canary:** Ensure you have version v128.0.6545.0 or newer.
+2. **Enable Optimization Guide:** Open `chrome://flags/#optimization-guide-on-device-model`, set it to "Enabled BypassPerfRequirement".
+3. **Enable Prompt API:** Open `chrome://flags/#prompt-api-for-gemini-nano`, set it to "Enabled".
+4. **Relaunch Chrome**.
+5. **Open DevTools** and send `await ai.languageModel.capabilities().available;` in the console. If this returns “readily,” then you are all set.
+6. **If it fails**, force Chrome to recognize that you want to use this API. To do so, open DevTools and send `await ai.languageModel.create();` in the console. This will likely fail, but it’s intended.
+7. **Relaunch Chrome**.
+8. **Open a new tab in Chrome**, go to `chrome://components`.
+9. **Confirm** that Gemini Nano is either available or is being downloaded. You'll want to see the Optimization Guide On Device Model present with a version greater or equal to 2024.5.21.1031. If there is no version listed, click on "Check for update" to force the download.
+10. **Once the model has downloaded and has reached a version greater than shown above**, open DevTools and send `await ai.languageModel.capabilities().available;` in the console. If this returns “readily,” then you are all set.

hookdocs/meta.json

@@ -10,5 +10,8 @@
     },
     "prompt-examples": {
         "title": "Prompt examples"
+    },
+    "chrome-built-in-ai": {
+        "title": "Chrome built-in AI"
     }
 }

src/js/settings/components/provider-settings/chrome-ai.js

@@ -0,0 +1,90 @@
+/**
+ * WordPress dependencies
+ */
+import { useState, useEffect } from '@wordpress/element';
+import { Icon } from '@wordpress/components';
+import { __ } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { SettingsRow } from '../settings-row';
+
+/**
+ * Component for Chrome AI Provider settings.
+ *
+ * This component is used within the ProviderSettings component to allow users to configure the Chrome AI Provider settings.
+ *
+ * @return {React.ReactElement} AzureAIVisionSettings component.
+ */
+export const ChromeAISettings = () => {
+	const [ supported, setSupported ] = useState( false );
+
+	useEffect( () => {
+		const checkBrowserSupport = async () => {
+			if ( ! window.ai ) {
+				return setSupported( false );
+			}
+
+			try {
+				const capabilities =
+					await window.ai.languageModel.capabilities();
+				if (
+					capabilities &&
+					capabilities.available &&
+					'readily' === capabilities.available
+				) {
+					setSupported( true );
+				}
+			} catch ( error ) {
+				// eslint-disable-next-line no-console
+				console.error( 'Error getting capabilities: ', error );
+				setSupported( false );
+			}
+		};
+
+		checkBrowserSupport();
+	}, [] );
+
+	if ( ! window.ai ) {
+		return null;
+	}
+
+	const Description = ( { hasSupport = true } ) => {
+		if ( hasSupport ) {
+			return null;
+		}
+
+		return (
+			<>
+				{ __(
+					'Chrome built-in AI is not available on your browser. Please follow the steps ',
+					'classifai'
+				) }
+				<a
+					href="https://10up.github.io/classifai/tutorial-chrome-built-in-ai.html"
+					target="_blank"
+					rel="noopener noreferrer"
+				>
+					{ __( 'here', 'classifai' ) }
+				</a>
+				{ __( ' to enable it.', 'classifai' ) }
+			</>
+		);
+	};
+
+	return (
+		<>
+			<SettingsRow
+				label={ __( 'Built-in AI Support', 'classifai' ) }
+				description={ <Description hasSupport={ supported } /> }
+			>
+				{ supported && <Icon icon="yes-alt" /> }
+				{ ! supported && <Icon icon="dismiss" /> }
+				{ supported
+					? __( ' Supported', 'classifai' )
+					: __( ' Not Supported', 'classifai' ) }
+			</SettingsRow>
+		</>
+	);
+};

src/js/settings/components/provider-settings/index.js

@@ -27,6 +27,7 @@ import { OpenAIDallESettings } from './openai-dalle';
 import { AmazonPollySettings } from './amazon-polly';
 import { AzureTextToSpeechSettings } from './azure-text-to-speech';
 import { OpenAITextToSpeachSettings } from './openai-text-to-speech';
+import { ChromeAISettings } from './chrome-ai';
 
 /**
  * Component for rendering provider setting fields based on the selected provider.
@@ -84,6 +85,9 @@ const ProviderFields = ( { provider, isConfigured } ) => {
 		case 'openai_text_to_speech':
 			return <OpenAITextToSpeachSettings isConfigured={ isConfigured } />;
 
+		case 'chrome_ai':
+			return <ChromeAISettings />;
+
 		default:
 			return null;
 	}
@@ -110,6 +114,11 @@ export const ProviderSettings = () => {
 		select( STORE_NAME ).getFeatureSettings()
 	);
 
+	// Remove the Chrome AI provider from the list of providers if the browser AI is not available.
+	if ( feature?.providers?.chrome_ai && ! window.ai ) {
+		delete feature.providers.chrome_ai;
+	}
+
 	const providerLabel = feature.providers[ provider ] || '';
 	const providers = Object.keys( feature?.providers || {} ).map(
 		( value ) => {

src/scss/settings.scss

@@ -272,6 +272,10 @@
 			color: #46b450;
 		}
 
+		span.dashicons.dashicons-dismiss {
+			color: #cc0000;
+		}
+
 		.classifai-settings-edit-provider {
 			cursor: pointer;