Add/openai placeholder prompts

projects/plugins/jetpack/changelog/add-openai-placeholder-prompts

@@ -0,0 +1,4 @@
+Significance: patch
+Type: enhancement
+
+Add a randomized prompt amongst the best prompts to serve as a placeholder for the AI Image block

projects/plugins/jetpack/extensions/blocks/ai-image/dalle-example-prompts.js

@@ -0,0 +1,41 @@
+export const dalleExamplePrompts = [
+	'A digital Illustration of the a purely mechanical television, 4k, detailed, fantasy vivid colors',
+	'3D render of a floating futuristic castle in a clear sky, digital art',
+	'Hedgehog smelling a flower | clear blue sky | intricate artwork by Beatrix Potter | cottagecore aesthetic | 8K | highly detailed | wide angle |',
+	'Hyper realistic photo of a high end futuristic single-level house where walls are made of windows, light coming through the window, mid century modern style, cinematic lighting',
+	'Pink ape Astronaut in space holding a claymate in a photorealistic style, digital art',
+	'Studio photography set of high detail irregular marble stones with gold lines stacked in impossible balance, perfect composition, cinematic light photo studio, beige color scheme, indirect lighting, 8k, elegant and luxury style',
+	'Ultrawide, highway,  with golden ratio style, 4K , sides  are prairies, light is Golden hour, sky with red Clouds, ultrarealistic, CinémaScope, ultra wide format, ratio 16/9, 1/1000 sec, maximum resolution, Sharp details',
+	'A photo of cat flying out to space as an astronaut, digital art',
+	'A hyper realistic rilakkuma enjoying an icecream in the snow',
+	'A lush tropical forest with a waterfall.',
+	'A majestic snowy mountain peak.',
+	'A beautiful sunset over a beach.',
+	'A serene lake surrounded by trees.',
+	'A picturesque countryside with rolling hills.',
+	'A colorful hot air balloon in the sky.',
+	'A peaceful Zen garden.',
+	'A grand castle on a hill.',
+	'A lively street market in a bustling city.',
+	'A delightful flower garden in full bloom.',
+	'A cozy cabin in the woods.',
+	'A vibrant coral reef teeming with sea life.',
+	'A classic European city with cobblestone streets.',
+	'A stunning waterfall cascading into a crystal clear pool.',
+	'A secluded cabin on the edge of a lake.',
+	'A beautiful desert landscape with sand dunes.',
+	'A majestic elephant in its natural habitat.',
+	'A charming countryside village with thatched roof cottages.',
+	'A dreamy castle floating on a cloud.',
+	'A whimsical tree house in a forest.',
+	'A vibrant city skyline at night.',
+	'A picturesque vineyard with rows of grapevines.',
+	'A peaceful Japanese garden with a koi pond.',
+	'A charming lighthouse on a rocky coastline.',
+	'A beautiful waterfall surrounded by greenery.',
+	'A dreamy castle with a moat and drawbridge.',
+	'A colorful hot air balloon festival.',
+	'A beautiful garden with a fountain and sculptures.',
+	'A picturesque countryside with a windmill.',
+	'A stunning mountain landscape with a rainbow.',
+];

projects/plugins/jetpack/extensions/blocks/ai-image/edit.js

@@ -13,6 +13,13 @@ import {
 import { useSelect, useDispatch } from '@wordpress/data';
 import { useState } from '@wordpress/element';
 import { __ } from '@wordpress/i18n';
+import { dalleExamplePrompts } from './dalle-example-prompts';
+
+function getRandomItem( arr ) {
+	// get random index value
+	const randomIndex = Math.floor( Math.random() * arr.length );
+	return arr[ randomIndex ];
+}
 
 function getImagesFromOpenAI(
 	prompt,
@@ -60,6 +67,7 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 	const [ prompt, setPrompt ] = useState( '' );
 	const { replaceBlock } = useDispatch( blockEditorStore );
 	const [ errorMessage, setErrorMessage ] = useState( '' );
+	const [ placeholder ] = useState( getRandomItem( dalleExamplePrompts ) );
 
 	const { mediaUpload } = useSelect( select => {
 		const { getSettings } = select( blockEditorStore );
@@ -69,14 +77,16 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 		};
 	}, [] );
 
-	const submit = () =>
+	const submit = () => {
+		setErrorMessage( '' );
 		getImagesFromOpenAI(
-			prompt,
+			prompt.trim() === '' ? placeholder : prompt,
 			setAttributes,
 			setLoadingImages,
 			setResultImages,
 			setErrorMessage
 		);
+	};
 
 	return (
 		<div { ...useBlockProps() }>
@@ -88,17 +98,12 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 					<TextareaControl
 						label={ __( 'What would you like to see?', 'jetpack' ) }
 						value={ prompt }
+						placeholder={ placeholder }
 						onChange={ setPrompt }
 					/>
 					<Flex direction="row">
 						<FlexItem>
-							<Button
-								variant="primary"
-								onClick={ () => {
-									setErrorMessage( '' );
-									submit();
-								} }
-							>
+							<Button variant="primary" onClick={ submit }>
 								{ __( 'Retry', 'jetpack' ) }
 							</Button>
 						</FlexItem>
@@ -110,6 +115,7 @@ export default function Edit( { attributes, setAttributes, clientId } ) {
 					<div>
 						<TextareaControl
 							label={ __( 'What would you like to see?', 'jetpack' ) }
+							placeholder={ placeholder }
 							onChange={ setPrompt }
 						/>
 						<Button variant="primary" onClick={ submit }>