Implement AI playground panel to allow customizing most commonly supp…

…orted AI model config parameters.

src/playground-page/components/PlaygroundApp/index.js

@@ -27,6 +27,7 @@ import PlaygroundMain from '../PlaygroundMain';
 import RawDataModal from '../RawDataModal';
 import PlaygroundCapabilitiesPanel from '../PlaygroundCapabilitiesPanel';
 import PlaygroundServiceModelPanel from '../PlaygroundServiceModelPanel';
+import PlaygroundModelConfigPanel from '../PlaygroundModelConfigPanel';
 import SystemInstructionToggle from './system-instruction-toggle';
 import ResetMessagesButton from './reset-messages-button';
 import './style.scss';
@@ -84,6 +85,7 @@ export default function PlaygroundApp() {
 			>
 				<PlaygroundCapabilitiesPanel />
 				<PlaygroundServiceModelPanel />
+				<PlaygroundModelConfigPanel />
 			</Sidebar>
 			<Footer>
 				<PlaygroundStatus />

src/playground-page/components/PlaygroundModelConfigPanel/index.js

@@ -0,0 +1,93 @@
+/**
+ * WordPress dependencies
+ */
+import { PanelBody, TextControl } from '@wordpress/components';
+import { useSelect, useDispatch } from '@wordpress/data';
+import { useState } from '@wordpress/element';
+import { __, sprintf } from '@wordpress/i18n';
+
+/**
+ * Internal dependencies
+ */
+import { store as playgroundStore } from '../../store';
+import './style.scss';
+
+/**
+ * Renders the playground sidebar panel for AI model configuration.
+ *
+ * @since n.e.x.t
+ *
+ * @return {Component} The component to be rendered.
+ */
+export default function PlaygroundModelConfigPanel() {
+	const [ panelOpened, setPanelOpened ] = useState( false );
+
+	const { maxOutputTokens, temperature, topP } = useSelect( ( select ) => {
+		const { getModelParam } = select( playgroundStore );
+
+		return {
+			maxOutputTokens: getModelParam( 'maxOutputTokens' ),
+			temperature: getModelParam( 'temperature' ),
+			topP: getModelParam( 'topP' ),
+		};
+	} );
+
+	const { setModelParam } = useDispatch( playgroundStore );
+
+	return (
+		<PanelBody
+			title={ __( 'Model configuration', 'ai-services' ) }
+			opened={ panelOpened }
+			onToggle={ () => setPanelOpened( ! panelOpened ) }
+			className="ai-services-playground-model-config-panel"
+		>
+			<TextControl
+				type="number"
+				min="0"
+				step="1"
+				label={ __( 'Max output tokens', 'ai-services' ) }
+				help={ __(
+					'The maximum number of tokens to include in a response candidate.',
+					'ai-services'
+				) }
+				value={ maxOutputTokens }
+				onChange={ ( value ) =>
+					setModelParam( 'maxOutputTokens', value )
+				}
+				__nextHasNoMarginBottom
+			/>
+			<TextControl
+				type="number"
+				min="0"
+				max="1"
+				step="0.01"
+				label={ __( 'Temperature', 'ai-services' ) }
+				help={ sprintf(
+					/* translators: 1: Minimum value, 2: Maximum value */
+					__(
+						'Floating point value to control the randomness of the output, between %1$s and %2$s.',
+						'ai-services'
+					),
+					'0.0',
+					'1.0'
+				) }
+				value={ temperature }
+				onChange={ ( value ) => setModelParam( 'temperature', value ) }
+				__nextHasNoMarginBottom
+			/>
+			<TextControl
+				type="number"
+				min="0"
+				step="0.01"
+				label={ __( 'Top P', 'ai-services' ) }
+				help={ __(
+					'The maximum cumulative probability of tokens to consider when sampling.',
+					'ai-services'
+				) }
+				value={ topP }
+				onChange={ ( value ) => setModelParam( 'topP', value ) }
+				__nextHasNoMarginBottom
+			/>
+		</PanelBody>
+	);
+}

src/playground-page/components/PlaygroundModelConfigPanel/style.scss

@@ -0,0 +1,10 @@
+.ai-services-playground-model-config-panel {
+
+	> .components-base-control {
+		margin-bottom: 16px;
+
+		&:last-child {
+			margin-bottom: 0;
+		}
+	}
+}

src/playground-page/store/messages.js

@@ -99,6 +99,19 @@ const actions = {
 				feature: 'ai-playground',
 				model: modelSlug,
 			};
+
+			const generationConfig = {};
+			const paramKeys = [ 'maxOutputTokens', 'temperature', 'topP' ];
+			paramKeys.forEach( ( key ) => {
+				const value = select.getModelParam( key );
+				if ( value ) {
+					generationConfig[ key ] = Number( value );
+				}
+			} );
+			if ( Object.keys( generationConfig ).length ) {
+				modelParams.generationConfig = generationConfig;
+			}
+
 			const systemInstruction = select.getSystemInstruction();
 			if ( systemInstruction ) {
 				modelParams.systemInstruction = systemInstruction;

src/playground-page/store/service-model.js

@@ -94,6 +94,23 @@ const actions = {
 		};
 	},
 
+	/**
+	 * Sets a model configuration parameter.
+	 *
+	 * @since n.e.x.t
+	 *
+	 * @param {string} key   Parameter key.
+	 * @param {*}      value Parameter value.
+	 * @return {Function} Action creator.
+	 */
+	setModelParam( key, value ) {
+		return ( { registry } ) => {
+			registry
+				.dispatch( preferencesStore )
+				.set( 'ai-services-playground', `model_param_${ key }`, value );
+		};
+	},
+
 	/**
 	 * Sets the system instruction.
 	 *
@@ -192,6 +209,13 @@ const selectors = {
 		return model;
 	} ),
 
+	getModelParam: createRegistrySelector( ( select ) => ( state, key ) => {
+		return select( preferencesStore ).get(
+			'ai-services-playground',
+			`model_param_${ key }`
+		);
+	} ),
+
 	getAvailableServices: createRegistrySelector( ( select ) => () => {
 		const registeredServices = select( aiStore ).getServices();
 		if ( ! registeredServices ) {