woocommerce/plugins/woocommerce-admin/client/customize-store/design-with-ai/prompts/fontPairings.ts

/**
 * External dependencies
 */
import { z } from 'zod';

/** This block below was generated by ChatGPT using GPT-4 on 2023-09-18 */
/** Original source: plugins/woocommerce-admin/client/customize-store/assembler-hub/sidebar/global-styles/font-pairing-variations/constants.ts */
const fontChoices = [
	{
		pair_name: 'Inter + Inter',
		fonts: {
			Inter: 'A highly legible sans-serif, optimized for UI design.',
		},
		settings: 'Inter is used for buttons and general typography.',
	},
	{
		pair_name: 'Bodoni Moda + Overpass',
		fonts: {
			'Bodoni Moda':
				'A modern serif font with high contrast between thick and thin lines, commonly used for headings.',
			Overpass:
				'A clean, modern sans-serif, originally inspired by Highway Gothic. Good for text and UI elements.',
		},
		settings:
			'Overpass is used for buttons and general typography, while Bodoni Moda is specified for headings and some core blocks like site title and post navigation link.',
	},
	{
		pair_name: 'Commissioner + Crimson Pro',
		fonts: {
			Commissioner:
				'A low-contrast, geometric sans-serif, designed for legibility and readability in long texts.',
			'Crimson Pro':
				'A serif typeface designed for readability and long-form text.',
		},
		settings:
			'Commissioner dominates elements like buttons, headings, and core blocks, while Crimson Pro is set for general typography.',
	},
	{
		pair_name: 'Libre Baskerville + DM Sans',
		fonts: {
			'Libre Baskerville':
				'A serif typeface with a classic feel, good for long reading and often used for body text in books.',
			'DM Sans':
				'A clean, geometric sans-serif, often used for UI and short text.',
		},
		settings:
			'Libre Baskerville is used for headings and core blocks, whereas DM Sans is used for buttons and general typography.',
	},
	{
		pair_name: 'Libre Franklin + EB Garamond',
		fonts: {
			'Libre Franklin':
				'A sans-serif that offers readability, suitable for both text and display.',
			'EB Garamond':
				"A revival of the classical 'Garamond' typefaces, suitable for long-form text.",
		},
		settings:
			'Libre Franklin is predominantly used for elements like buttons, headings, and core blocks. EB Garamond is set for general typography.',
	},
	{
		pair_name: 'Montserrat + Arvo',
		fonts: {
			Montserrat:
				'A geometric sans-serif, popular for its modern clean lines.',
			Arvo: 'A slab-serif font with a more traditional feel, suitable for print and screen.',
		},
		settings:
			'Montserrat is used for buttons, headings, and core blocks. Arvo is used for general typography.',
	},
	{
		pair_name: 'Playfair Display + Fira Sans',
		fonts: {
			'Playfair Display':
				'A high-contrast serif designed for headings and offers a modern take on older serif fonts.',
			'Fira Sans':
				'A sans-serif designed for readability at small sizes, making it suitable for both UI and text.',
		},
		settings:
			'Playfair Display is used in italics for headings and core blocks, while Fira Sans is used for buttons and general typography.',
	},
	{
		pair_name: 'Rubik + Inter',
		fonts: {
			Rubik: 'A sans-serif with slightly rounded corners, designed for a softer, more modern look.',
			Inter: 'A highly legible sans-serif, optimized for UI design.',
		},
		settings:
			'Rubik is applied for headings and core blocks. Inter is used for buttons and general typography.',
	},
	{
		pair_name: 'Space Mono + Roboto',
		fonts: {
			'Space Mono': 'A monospace typeface with a futuristic vibe.',
			Roboto: 'A neo-grotesque sans-serif, known for its flexibility and modern design.',
		},
		settings:
			'Space Mono is used for headings, while Roboto takes care of buttons and general typography.',
	},
];

const allowedFontChoices = fontChoices.map( ( config ) => config.pair_name );

export const fontChoiceValidator = z.object( {
	pair_name: z
		.string()
		.refine( ( name ) => allowedFontChoices.includes( name ), {
			message: 'Font choice not part of allowed list',
		} ),
} );

export const fontPairings = {
	queryId: 'font_pairings',
	version: '2023-09-18',
	prompt: ( businessDescription: string, look: string, tone: string ) => {
		return `
        You are a WordPress theme expert. Analyse the following store description, merchant's chosen look and tone, and determine the most appropriate font pairing.
        Respond only with one font pairing and and in the format: '{"pair_name":"font 1 + font 2"}'.

        Chosen look and tone: ${ look } look, ${ tone } tone.
        Business description: ${ businessDescription }

        Font pairings to choose from: 
        ${ JSON.stringify( fontChoices ) }
        `;
	},
	responseValidation: fontChoiceValidator.parse,
};