@slicemachine/manager 0.24.4-alpha.xru-slice-generation-ai-poc.1 → 0.24.4-alpha.xru-slice-generation-ai-poc.2

package/src/managers/slices/SlicesManager.ts

@@ -43,6 +43,7 @@ import { BaseManager } from "../BaseManager";
 import {
 	BedrockRuntimeClient,
 	ConverseCommand,
+	Message,
 } from "@aws-sdk/client-bedrock-runtime";
 
 type SlicesManagerReadSliceLibraryReturnType = {
@@ -226,7 +227,7 @@ type SliceMachineManagerGenerateSliceReturnType = {
 };
 
 type SliceMachineManagerGenerateSlicesFromUrlArgs = {
-	websiteUrl: string;
+	sliceImages: Uint8Array[];
 };
 
 type SliceMachineManagerGenerateSlicesFromUrlReturnType = {
@@ -1856,61 +1857,181 @@ type GroupField = {
 	): Promise<SliceMachineManagerGenerateSlicesFromUrlReturnType> {
 		assertPluginsInitialized(this.sliceMachinePluginRunner);
 
-		const { OPENAI_API_KEY } = process.env;
+		const { OPENAI_API_KEY, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY } =
+			process.env;
+
+		if (!AWS_ACCESS_KEY_ID || !AWS_SECRET_ACCESS_KEY) {
+			throw new Error("AWS credentials are not set.");
+		}
+		const AWS_REGION = "us-east-1";
+		const bedrockClient = new BedrockRuntimeClient({
+			region: AWS_REGION,
+			credentials: {
+				accessKeyId: AWS_ACCESS_KEY_ID,
+				secretAccessKey: AWS_SECRET_ACCESS_KEY,
+			},
+		});
+
 		if (!OPENAI_API_KEY) {
 			throw new Error("OPENAI_API_KEY is not set.");
 		}
-		const openai = new OpenAI({ apiKey: process.env.OPENAI_API_KEY });
+		const openai = new OpenAI({ apiKey: OPENAI_API_KEY });
 
 		const sliceMachineConfig = await this.project.getSliceMachineConfig();
 		const libraryIDs = sliceMachineConfig.libraries || [];
 		const DEFAULT_LIBRARY_ID = libraryIDs[0];
 
-		const KNOWNED_WEBSITE_URLS: { [url: string]: string } = {
-			"https://www.criteo.com/": "./resources/criteo/homepage",
-			"https://www.brevo.com/landing/email-marketing-service/":
-				"./resources/brevo/mail",
-		};
+		let retry: {
+			[key in "MODEL" | "MOCKS" | "CODE" | "APPEARANCE"]: number;
+		}[] = args.sliceImages.map((_) => ({
+			MODEL: 0,
+			MOCKS: 0,
+			CODE: 0,
+			APPEARANCE: 0,
+		}));
+
+		async function callAI<ReturnType extends Record<string, unknown>>({
+			ai,
+			sliceIndex,
+			stepName,
+			systemPrompt,
+			imageFile,
+			textContent,
+		}: {
+			ai: "OPENAI" | "AWS";
+			sliceIndex: number;
+			stepName: "MODEL" | "MOCKS" | "CODE" | "APPEARANCE";
+			systemPrompt: string;
+			imageFile?: Uint8Array;
+			textContent?: string;
+		}): Promise<ReturnType> {
+			let resultText: string | undefined;
+
+			if (ai === "OPENAI") {
+				const messages: Array<ChatCompletionMessageParam> = [
+					{ role: "system", content: systemPrompt },
+				];
+
+				const userContent: Array<
+					| {
+							type: "text";
+							text: string;
+					  }
+					| {
+							type: "image_url";
+							image_url: { url: string };
+					  }
+				> = [];
+
+				if (imageFile) {
+					userContent.push({
+						type: "image_url",
+						image_url: {
+							url:
+								"data:image/png;base64," +
+								Buffer.from(imageFile).toString("base64"),
+						},
+					});
+				}
 
-		async function readImagesFromFolder(
-			folderPath: string,
-		): Promise<Uint8Array[]> {
-			console.log(process.cwd());
+				if (textContent) {
+					userContent.push({ type: "text", text: textContent });
+				}
 
-			const files = await fs.promises.readdir(folderPath);
-			const images = await Promise.all(
-				files.map(async (file) => {
-					const buffer = await fs.promises.readFile(
-						path.join(folderPath, file),
-					);
-					return new Uint8Array(buffer);
-				}),
-			);
+				if (userContent.length > 0) {
+					messages.push({
+						role: "user",
+						content: userContent,
+					});
+				}
 
-			return images;
-		}
+				const response = await openai.chat.completions.create({
+					model: "gpt-4o",
+					messages,
+					response_format: { type: "json_object" },
+				});
+
+				console.log(
+					`Generated response for ${stepName} - ${sliceIndex}:`,
+					JSON.stringify(response),
+				);
+
+				resultText = response.choices[0]?.message?.content?.trim();
+			} else if (ai === "AWS") {
+				const messages: Array<Message> = [];
+
+				if (imageFile) {
+					messages.push({
+						role: "user",
+						content: [
+							{
+								image: { format: "png", source: { bytes: imageFile } },
+							},
+						],
+					});
+				}
+
+				if (textContent) {
+					messages.push({
+						role: "user",
+						content: [
+							{
+								text: textContent,
+							},
+						],
+					});
+				}
 
-		async function readCodeFromFolder(folderPath: string): Promise<string[]> {
-			const files = await fs.promises.readdir(folderPath);
-			const codes = await Promise.all(
-				files.map(async (file) => {
-					const buffer = await fs.promises.readFile(
-						path.join(folderPath, file),
-						"utf-8",
+				const command = new ConverseCommand({
+					modelId: "us.anthropic.claude-3-7-sonnet-20250219-v1:0",
+					system: [{ text: systemPrompt }],
+					messages: messages,
+				});
+
+				const response = await bedrockClient.send(command);
+
+				console.log(
+					`Generated response for ${stepName} - ${sliceIndex}:`,
+					JSON.stringify(response),
+				);
+
+				resultText = response.output?.message?.content?.[0]?.text?.trim();
+			}
+
+			async function retryCall(error: string): Promise<ReturnType> {
+				if (retry[sliceIndex][stepName] < 3) {
+					retry[sliceIndex][stepName]++;
+					console.log(
+						`Retrying ${retry[sliceIndex][stepName]} ${stepName} for slice ${sliceIndex}.`,
+						error,
 					);
-					return buffer.toString();
-				}),
-			);
 
-			return codes;
-		}
+					return await callAI({
+						ai,
+						sliceIndex,
+						stepName,
+						systemPrompt,
+						imageFile,
+						textContent,
+					});
+				}
+
+				throw new Error(error);
+			}
 
-		async function getGlobalStyle(filePath: string): Promise<string> {
-			const buffer = await fs.promises
-				.readFile(filePath)
-				.catch(() => Buffer.from(""));
+			if (!resultText) {
+				return await retryCall(
+					`No valid response was generated for ${stepName}.`,
+				);
+			}
 
-			return buffer.toString();
+			try {
+				return JSON.parse(resultText);
+			} catch (error) {
+				return await retryCall(
+					`Failed to parse AI response for ${stepName}: ` + error,
+				);
+			}
 		}
 
 		/**
@@ -2241,436 +2362,328 @@ type GroupField = {
 		 * Calls the AI to generate the slice model.
 		 */
 		async function generateSliceModel(
+			sliceIndex: number,
 			imageFile: Uint8Array,
-			codeFile: string,
 		): Promise<SharedSlice> {
 			const systemPrompt = `
-				You are an expert in Prismic content modeling. Using the image and the code provided, generate a valid Prismic JSON model for the slice described below. Follow these rules precisely:
-				- Use the TypeScript schema provided as your reference.
-				- Place all main content fields under the "primary" object.
-				- Do not create any collections or groups for single-image content (background images should be a single image field).
-				- Ensure that each field has appropriate placeholders, labels, and configurations.
-				- Never generate a Link / Button text field, only the Link / Button field itself is enough. Just enable "allowText" when doing that.
-				- Do not forget any field visible from the image provide in the user prompt.
-				- Ensure to differentiate Prismic fields from just an image with visual inside the image. When that's the case, just add a Prismic image field.
-				- Use the code to know exactly what is a real field and not an image. If in the code it's an image, then the field should also be an image, do a 1-1 mapping thanks to the code.
-				- Do not include any decorative fields. When an element is purely visual, decorative, don't include it att all in the slice model.
-				- Do not include any extra commentary or formatting.
-				- When you see a repetition of an image, a text, a link, etc, NEVER create one field per repeated item, you HAVE to use a group for that.
-				- When you see multiple fields repeated, you MUST use a group for that.
-				- NEVER put a group inside another group field, this is not allowed. In the final JSON a group CANNOT be within another group field. YOU CANNOT NEST GROUP FIELDS! Not for any reason you are allowed to do that! Even for navigation, in header or footer you cannot nest group fields.
-				- The "items" field must not be used under any circumstances. All repeatable fields should be defined using a Group field inside the primary object. If a field represents a collection of items, it must be part of a Group field, and items must never appear in the JSON output.
-				- Don't forget to replace the temporary text in the "Existing Slice to update", like <ID_TO_CHANGE>, <NAME_TO_CHANGE>, <DESCRIPTION_TO_CHANGE>, <VARIATION_ID_TO_CHANGE>, etc.
-				- Field placeholder should be super short, do not put the content from the image inside the placeholder.
-				- Field label and id should define the field's purpose, not its content.
-				- Slice name and id should define the slice's purpose, not its content.
-				- Slice description should be a brief explanation of the slice's purpose not its content.
-			
-				!IMPORTANT!: 
-					- Only return a valid JSON object representing the full slice model, nothing else before. JSON.parse on your response should not throw an error.
-					- All your response should fit in a single return response.
-					- Never stop the response until you totally finish the full JSON response you wanted.
-
-				Reference Schema:
+				You are an **expert in Prismic content modeling**. Using the **image and code provided**, generate a **valid Prismic JSON model** for the slice described below.
+
+				**STRICT MODELING RULES (NO EXCEPTIONS):**
+					- **Use the TypeScript schema provided as your reference**.
+					- **Absolutely all fields must be placed under the "primary" object**.
+					- **Do not create groups or collections for single-image content** (background images must be a single image field).
+					- **Ensure each field has appropriate placeholders, labels, and configurations**.
+					- **Never generate a Link/Button text field—only the Link/Button field itself** with \`"allowText": true\`.
+					- **Include all fields visible in the provided image**, do not forget any field and everything should be covered.
+					- **Repeated fields must always be grouped**:
+						- **Identify when field are part of a group**, when there is a repetition of a field or multiple fields together use a Group field.
+						- **DO NOT** create individually numbered fields like \`feature1\`, \`feature2\`, \`feature3\`. Instead, define a single **Group field** (e.g., \`features\`) and move all repeated items inside it.
+					- **Differentiate Prismic fields from decorative elements:**
+						- If an element in the image is purely visual/decorative, **do not include it in the model**.
+						- Use the **code as the source of truth** to determine what should be a field.
+						- If an element is an image in the code, it **must also be an image field in Prismic** (strict 1:1 mapping).
+					- **Handle repeated content correctly:**
+						- **If an image, text, or link is repeated, always use a Group field**—do not create individual fields.
+						- **If multiple fields are repeated together, they must be inside a single Group field**.
+					- **Strictly forbid nesting of groups:**
+						- **NEVER put a Group inside another Group field**.
+						- **Group fields CANNOT be nested for any reason**—this is **strictly prohibited** even for navigation structures like headers or footers.
+					- **Do not use the "items" field**:
+						- **All repeatable fields must be defined as Group fields under "primary"**.
+						- **"items" must never appear in the final JSON output**.
+					- **Do not create more than one SliceVariation**, only one variation is enough to create the model.
+
+				**STRICT FIELD NAMING & CONTENT RULES:**
+					- **Replace placeholders in the existing slice template** (\`<ID_TO_CHANGE>\`, \`<NAME_TO_CHANGE>\`, etc.).
+					- **Field placeholders must be very short**—do **not** put actual image content inside placeholders.
+					- **Field labels and IDs must define the field's purpose, not its content**.
+					- **Slice name, ID, and description must describe the slice's function, not its content**.
+					- The slice name and ID must be **generic and reusable**, defining what the slice **does**, not what it is used for.
+					- **DO NOT name the slice after a specific topic, content type, or industry. Instead, name it based on its structure and function.
+
+				**STRICT JSON OUTPUT FORMAT (NO MARKDOWN OR EXTRA TEXT):**
+					- **Return ONLY a valid JSON object**—no extra text, comments, or formatting.
+					- **The response must be directly parseable** using \`JSON.parse(output)\`.
+					- **Do not wrap the output in markdown (\`\`\`\`json\`) or any other formatting.**
+
+				**VALIDATION REQUIREMENT:**
+					- Before returning, **validate that \`JSON.parse(output)\` runs without errors**.
+					- If there is **any extra text, markdown, or incorrect structure**, **rewrite the response before returning**.
+
+				**REFERENCE SCHEMA (Follow this exactly):**
 				${SHARED_SLICE_SCHEMA}
 				
-				Existing Slice to update:
+				**EXISTING SLICE TO UPDATE (Modify strictly according to the rules above):**
 				${JSON.stringify(DEFAULT_SLICE_MODEL)}
 			`.trim();
 
-			const messages: Array<ChatCompletionMessageParam> = [
-				{ role: "system", content: systemPrompt },
-				{
-					role: "user",
-					content: [
-						{
-							type: "image_url",
-							image_url: {
-								url:
-									"data:image/png;base64," +
-									Buffer.from(imageFile).toString("base64"),
-							},
-						},
-						{ type: "text", text: codeFile },
-					],
-				},
-			];
-			const response: OpenAI.Chat.Completions.ChatCompletion & {
-				_request_id?: string | null;
-			} = await openai.chat.completions.create({
-				model: "gpt-4o",
-				messages,
-				response_format: {
-					type: "json_object",
-				},
+			const generatedModel = await callAI<SharedSlice>({
+				ai: "OPENAI",
+				sliceIndex,
+				stepName: "MODEL",
+				systemPrompt,
+				imageFile,
 			});
 
-			console.log("Generated model response:", JSON.stringify(response));
-
-			const resultText = response.choices[0]?.message?.content?.trim();
-			if (!resultText) {
-				throw new Error("No valid slice model was generated.");
-			}
-
-			try {
-				const generatedModel = JSON.parse(resultText);
-
-				return generatedModel;
-			} catch (error) {
-				throw new Error("Failed to parse AI response for model: " + error);
-			}
+			return generatedModel;
 		}
 
 		/**
 		 * Calls the AI endpoint to generate mocks.
 		 */
 		async function generateSliceMocks(
+			sliceIndex: number,
 			imageFile: Uint8Array,
 			existingMocks: SharedSliceContent[],
 		): Promise<SharedSliceContent[]> {
-			// Build a prompt focused solely on updating the mocks.
 			const systemPrompt = `
-				You are a seasoned frontend engineer with deep expertise in Prismic slices.
-				Your task is to update the provided mocks template based solely on the visible content in the image.
-				Follow these guidelines strictly:
-					- Do not modify the overall structure of the mocks template.
-					- Strictly only update text content.
-					- Do not touch images.
-					- If you see a repetition with a group, you must create the same number of group items that are visible on the image.
-					- Absolutely do not touch what is not necessary to be changed, like link "key" property, or the StructureText "direction", spans", etc or the structure, this is really important that you just do a replace of the text.
-					- For structure text content you must alway keep the same structure and properties, even if empty, ONLY replace text content.
-					- Only and strictly update the text content of the fields, nothing else. You should only and strictly update the text that is visible in the image.
-					- Never touch the image fields, nothing should be changed for image fields.
-
-				!IMPORTANT!:
-					- Only return a valid JSON object for mocks, nothing else before. JSON.parse on your response should not throw an error.
-					- All your response should fit in a single return response.
-					- Never stop the response until you totally finish the full JSON response you wanted.
-
-				Existing Mocks Template:
+				You are a **seasoned frontend engineer** with **deep expertise in Prismic slices**.
+				Your task is to **update the provided mocks template** based **only** on the visible text content in the provided image.
+
+				**STRICT UPDATE GUIDELINES:**
+					- **Do no create content, only take visible text from the image.**
+					- **Do not modify the overall structure of the mocks template.**
+					- **Strictly update text content only.**
+					- **Do not touch images or image-related fields.**
+					- **If a repeated item appears in a group, match the exact number of group items seen in the image.**
+					- **Do not modify metadata, field properties, or structure.** This includes:
+						- Do **not** change the \`"key"\` property of links.
+						- Do **not** modify \`StructuredText\` properties such as \`"direction"\`, \`"spans"\`, or \`"type"\`.
+						- Do **not** alter field nesting or object structure.
+					- **For StructuredText fields, maintain all existing structure and properties**—**only replace text content**.
+					- **Ensure that only visible text in the image is updated**—do not generate or assume content.
+					- **Never modify image fields**—image references and properties must remain unchanged.
+
+				**STRICT JSON OUTPUT FORMAT:**
+					- **Return ONLY a valid JSON object**—no extra text, explanations, or formatting.
+					- **The response must be directly parseable** using \`JSON.parse(output)\`.
+					- **Do not wrap the output in markdown (\`\`\`\`json\`) or any other formatting.**
+
+				**VALIDATION REQUIREMENT:**
+					- Before returning, **validate that \`JSON.parse(output)\` runs without errors**.
+					- If there is **any extra text, markdown, or incorrect structure**, **rewrite the response before returning**.
+
+				**EXISTING MOCKS TEMPLATE (To be updated with the visible text from the image only):**
 				${JSON.stringify(existingMocks)}
 			`.trim();
 
-			const messages: Array<ChatCompletionMessageParam> = [
-				{ role: "system", content: systemPrompt },
-				{
-					role: "user",
-					content: [
-						{
-							type: "image_url",
-							image_url: {
-								url:
-									"data:image/png;base64," +
-									Buffer.from(imageFile).toString("base64"),
-							},
-						},
-					],
-				},
-			];
-			const response: OpenAI.Chat.Completions.ChatCompletion & {
-				_request_id?: string | null;
-			} = await openai.chat.completions.create({
-				model: "gpt-4o",
-				messages,
-				response_format: {
-					type: "json_object",
-				},
+			const updatedMock = await callAI<SharedSliceContent>({
+				ai: "OPENAI",
+				sliceIndex,
+				stepName: "MOCKS",
+				systemPrompt,
+				imageFile,
 			});
 
-			console.log("Generated mocks response:", JSON.stringify(response));
+			return [updatedMock];
+		}
 
-			const resultText = response.choices[0]?.message?.content?.trim();
-			if (!resultText) {
-				throw new Error("No valid mocks were generated.");
-			}
+		const SLICE_CODE_EXAMPLE = `
+-----------------------------------------------------------
+import { FC } from "react";
+import { Content } from "@prismicio/client";
+import { SliceComponentProps, PrismicRichText } from "@prismicio/react";
+import { PrismicNextImage, PrismicNextLink } from "@prismicio/next";
+
+export type PascalNameToReplaceProps =
+	SliceComponentProps<Content.PascalNameToReplaceSlice>;
+
+const PascalNameToReplace: FC<PascalNameToReplaceProps> = ({ slice }) => {
+	return (
+		<section
+			data-slice-type={slice.slice_type}
+			data-slice-variation={slice.variation}
+			className="es-bounded es-alternate-grid"
+		>
+			<PrismicNextLink
+				className="es-alternate-grid__button"
+				field={slice.primary.buttonLink}
+			/>
+			<div className="es-alternate-grid__content">
+				<PrismicNextImage
+					field={slice.primary.image}
+					className="es-alternate-grid__image"
+				/>
+				<div className="es-alternate-grid__primary-content">
+					<div className="es-alternate-grid__primary-content__intro">
+						<p className="es-alternate-grid__primary-content__intro__eyebrow">
+							{slice.primary.eyebrowHeadline}
+						</p>
+						<div className="es-alternate-grid__primary-content__intro__headline">
+							<PrismicRichText field={slice.primary.title} />
+						</div>
+						<div className="es-alternate-grid__primary-content__intro__description">
+							<PrismicRichText field={slice.primary.description} />
+						</div>
+					</div>
 
-			try {
-				const updatedMock: SharedSliceContent = JSON.parse(resultText);
+					<div className="es-alternate-grid__primary-content__stats">
+						{slice.primary.stats.map((stat, i) => (
+							<div key={\`stat-$\{i + 1\}\`} className="es-alternate-grid__stat">
+								<div className="es-alternate-grid__stat__heading">
+									<PrismicRichText field={stat.title} />
+								</div>
+								<div className="es-alternate-grid__stat__description">
+									<PrismicRichText field={stat.description} />
+								</div>
+							</div>
+						))}
+					</div>
+				</div>
+			</div>
+		</section>
+	);
+};
 
-				return [updatedMock];
-			} catch (error) {
-				throw new Error("Failed to parse AI response for mocks: " + error);
-			}
-		}
+export default PascalNameToReplace;
+-----------------------------------------------------------
+`.trim();
 
 		/**
 		 * Calls the AI endpoint to generate the slice React component.
 		 */
 		async function generateSliceComponentCode(
+			sliceIndex: number,
 			imageFile: Uint8Array,
-			codeFile: string,
 			updatedSlice: SharedSlice,
 		): Promise<string> {
 			const systemPrompt = `
-				You are a seasoned frontend engineer with deep expertise in Prismic slices.
-				Your task is to generate a fully isolated React component code for a slice based on the provided image and code input.
-				The goal is to create the React (HTML) structure of the slice, NO STYLING! Concentrate 100% on the perfect structure of each component.
-
-				Follow these guidelines strictly:
-					- Be self-contained.
-					- For links, you must use PrismicNextLink and you must just pass the field, PrismicNextLink will handle the display of the link text, don't do it manually.
-					- PrismicNextLink should never be open, just passing the field is enough like in the code example below. You can use className or inline style directly on the PrismicNextLink component.
-					- Ensure to strictly respect what is defined on the model for each fields ID, do not invent or use something not in the model.
-					- Ensure to use all fields provided in the model.
-					- Follow the structure provided in the code example below.
-					- Use the provided code to help yourself to create the structure.
-					- As you can see in the example of the code you MUST never access the data with "<field>.value".
-					- You need to really inspire yourself from the code example bellow in order to understand how to access field, write field etc. Do not try to invent something that you didn't see.
-					- You cannot add a style prop to "PrismicRichText" component, it's not allowed.
-					- It's important to respect the same imports as done in the code example bellow, import exactly from the same package.
-					- Never do wrong W3C HTML structure, always respect a correct HTML structure, for example you cannot put a PrismicRichText component inside a <h1>, or a <p>, etc.
-					- Ensure to map the field type to the correct Prismic component, for example, a StructuredText field should be mapped to PrismicRichText, an image field should be mapped to PrismicNextImage, a Text field should just be map to a classic <p> component
-				
-				!IMPORTANT!:
-					- Return a valid JSON object containing only one key: "componentCode". No additional keys, text, or formatting are allowed before, after, or within the JSON object.
-					- Return a valid JSON, meaning you should NEVER start with a sentence, directly the JSON so that I can JSON.parse your response.
-					- All strings must be enclosed in double quotes ("). Do not use single quotes or template literals.
-					- Within the string value for "componentCode", every embedded double quote must be escaped as \". Similarly, every backslash must be escaped as \\.
-					- Ensure that the string value does not contain any raw control characters (such as literal newline, tab, or carriage return characters). Instead, use their escape sequences.
-					- Before finalizing the output, validate that JSON.parse(output) works without throwing an error. No unescaped characters should cause the parser to crash.
-					- The output must not include any markdown formatting, code block fences, or extra text. It should be a single, clean JSON object.
-
-				## Example of a Fully Isolated Slice Component:
-				-----------------------------------------------------------
-				import { FC } from "react";
-				import { Content } from "@prismicio/client";
-				import { SliceComponentProps, PrismicRichText } from "@prismicio/react";
-				import { PrismicNextImage, PrismicNextLink } from "@prismicio/next";
-
-				export type PascalNameToReplaceProps =
-					SliceComponentProps<Content.PascalNameToReplaceSlice>;
-
-				const PascalNameToReplace: FC<PascalNameToReplaceProps> = ({ slice }) => {
-					return (
-						<section
-							data-slice-type={slice.slice_type}
-							data-slice-variation={slice.variation}
-							className="es-bounded es-alternate-grid"
-						>
-							<PrismicNextLink
-								className="es-alternate-grid__button"
-								field={slice.primary.buttonLink}
-							/>
-							<div className="es-alternate-grid__content">
-								<PrismicNextImage
-									field={slice.primary.image}
-									className="es-alternate-grid__image"
-								/>
-								<div className="es-alternate-grid__primary-content">
-									<div className="es-alternate-grid__primary-content__intro">
-										<p className="es-alternate-grid__primary-content__intro__eyebrow">
-											{slice.primary.eyebrowHeadline}
-										</p>
-										<div className="es-alternate-grid__primary-content__intro__headline">
-											<PrismicRichText field={slice.primary.title} />
-										</div>
-										<div className="es-alternate-grid__primary-content__intro__description">
-											<PrismicRichText field={slice.primary.description} />
-										</div>
-									</div>
-
-									<div className="es-alternate-grid__primary-content__stats">
-										{slice.primary.stats.map((stat, i) => (
-											<div key={\`stat-$\{i + 1\}\`} className="es-alternate-grid__stat">
-												<div className="es-alternate-grid__stat__heading">
-													<PrismicRichText field={stat.title} />
-												</div>
-												<div className="es-alternate-grid__stat__description">
-													<PrismicRichText field={stat.description} />
-												</div>
-											</div>
-										))}
-									</div>
-								</div>
-							</div>
-						</section>
-					);
-				};
-
-				export default PascalNameToReplace;
-				-----------------------------------------------------------
-
-				Model of the slice:
+				You are a **seasoned frontend engineer** with **deep expertise in Prismic slices**.
+				Your task is to generate a **fully isolated React component** for a Prismic slice, **focusing ONLY on structure (HTML) without styling**.
+
+				**STRICT STRUCTURAL GUIDELINES:**
+					- **Do not include styling.** Focus **100% on correct structure**.
+					- **Be self-contained.** The component must work in isolation.
+					- **Follow the structure provided in the example.** Do not introduce **any variations**.
+					- **Use all fields provided in the model**—do not omit or invent fields.
+					- **Never access a field using** \`<field>.value\`. Always follow the example pattern with just \`<field>\`.
+					- **Ensure correct mapping of field types:**
+						- **StructuredText** → \`PrismicRichText\`
+						- **Image field** → \`PrismicNextImage\`
+						- **Text field** → Standard \`<p>\` element
+						- **Link field** → \`PrismicNextLink\`
+						- **Group field** → Map to the correct structure based on the example.
+					- **Maintain W3C-compliant HTML.** Do not place \`PrismicRichText\` inside \`<h1>\`, \`<p>\`, or other invalid elements.
+
+				**PRISMIC COMPONENT USAGE RULES:**
+					- **Links must use \`PrismicNextLink\`**, passing only the \`field\` (no manual text extraction).
+					- **\`PrismicNextLink\` must never be opened manually**—pass the field directly as in the example.
+					- **\`PrismicRichText\` cannot have a \`style\` prop**.
+					- **Imports must be identical to the provided example**.
+
+				**STRICT JSON OUTPUT FORMAT**
+					- **Return ONLY a valid JSON object** with **one key**: \`"componentCode"\`.
+					- **No markdown (\`\`\`\`json\`), no comments, no text before or after—ONLY pure JSON**.
+					- **The response MUST start with \`{\` and end with \`}\` exactly, do not start with a sentence explaining what you will do.**
+					- **Ensure the output is directly parseable** with \`JSON.parse(output)\`.
+					- **All strings must use double quotes (\`"\`).** Do not use single quotes or template literals.
+					- **Escape all embedded double quotes (\`\"\`) and backslashes (\`\\\`).**
+					- **The output must not contain raw control characters** (newline, tab, etc.); use escape sequences instead.
+
+				**Before returning, VALIDATE that \`JSON.parse(output)\` runs without errors.**
+
+				**EXAMPLE OF A FULLY ISOLATED SLICE COMPONENT (Follow this strictly):**
+				${SLICE_CODE_EXAMPLE}
+
+				**SLICE MODEL (Use this as the exact reference):**
 				${JSON.stringify(updatedSlice)}
 			`.trim();
 
-			const messages: Array<ChatCompletionMessageParam> = [
-				{ role: "system", content: systemPrompt },
-				{
-					role: "user",
-					content: [
-						{
-							type: "image_url",
-							image_url: {
-								url:
-									"data:image/png;base64," +
-									Buffer.from(imageFile).toString("base64"),
-							},
-						},
-						{ type: "text", text: codeFile },
-					],
-				},
-			];
-			const response: OpenAI.Chat.Completions.ChatCompletion & {
-				_request_id?: string | null;
-			} = await openai.chat.completions.create({
-				model: "gpt-4o",
-				messages,
-				response_format: {
-					type: "json_object",
-				},
+			const parsed = await callAI<{ componentCode: string }>({
+				ai: "AWS",
+				sliceIndex,
+				stepName: "CODE",
+				systemPrompt,
+				imageFile,
 			});
 
-			console.log(
-				"Generated component code response:",
-				JSON.stringify(response),
-			);
-
-			const resultText = response.choices[0]?.message?.content?.trim();
-			if (!resultText) {
-				throw new Error("No valid slice component code was generated.");
+			if (!parsed.componentCode) {
+				throw new Error("Missing key 'componentCode' in AI response.");
 			}
 
-			try {
-				const parsed = JSON.parse(resultText);
-				if (!parsed.componentCode) {
-					throw new Error("Missing key 'componentCode' in AI response.");
-				}
-				return parsed.componentCode;
-			} catch (error) {
-				throw new Error(
-					"Failed to parse AI response for component code: " + error,
-				);
-			}
+			return parsed.componentCode;
 		}
 
 		async function generateSliceComponentCodeAppearance(
+			sliceIndex: number,
 			imageFile: Uint8Array,
-			codeFile: string,
-			globalStyle: string,
 			componentCode: string,
 		): Promise<string> {
 			const systemPrompt = `
-				You are a seasoned frontend engineer with deep expertise in Prismic slices.
-				Your task is to apply the branding (appearance) based on the provided image and code input.
-				The branding is SUPER important, and the slice you create should PERFECTLY match the branding (appearance) of the provided slice image and code.
-
-				Follow these guidelines strictly:
-					- Don't change anything related to the structure of the code, ONLY apply styling, PURELY styling is your ONLY task.
-					- Be self-contained, no dependency should be use to do the styling, do inline style.
-					- Your goal is to make the code visually looks as close as possible to the image from the user input.
-					- Ensure that the color used for the background is the same as the image provide in the user prompt! It's better no background color than a wrong one.
-					- Strictly respect the padding and margin visible in the image provide in the user prompt.
-					- Strictly respect the fonts size, color, type visible in the image provide in the user prompt.
-					- Strictly respect the colors visible in the image provide in the user prompt.
-					- Strictly respect the position of elements visible in the image provide in the user prompt.
-					- Strictly respect the size of each elements visible in the image provide in the user prompt.
-					- Strictly respect the overall proportions of the slice from the image provide in the user prompt.
-					- Ensure image are always displayed with the same aspect ratio as the image provide in the user prompt, put constraints on the image with / height to make sure it's the same.
-					- Handle animations, but never make them too long, it should be fast enough to be nice to read.
-					- Use inline <style> (do not use <style jsx>).
-					- Items repetitions should be styled in the same way as the image provided, the direction of the flex should be the same so that the items are vertical or horizontal as in the image.
-
-				!IMPORTANT!:
-					- DO NOT CHANGE anything else than the style BUT return everything as before for the rest, like from the import to the last export line, everything should stay the same BUT you add the styling on top.
-					- Return a valid JSON object containing only one key: "componentCode". No additional keys, text, or formatting are allowed before, after, or within the JSON object.
-					- Return a valid JSON, meaning you should NEVER start with a sentence, directly the JSON so that I can JSON.parse your response.
-					- All strings must be enclosed in double quotes ("). Do not use single quotes or template literals.
-					- Within the string value for "componentCode", every embedded double quote must be escaped as \". Similarly, every backslash must be escaped as \\.
-					- Ensure that the string value does not contain any raw control characters (such as literal newline, tab, or carriage return characters). Instead, use their escape sequences.
-					- Before finalizing the output, validate that JSON.parse(output) works without throwing an error. No unescaped characters should cause the parser to crash.
-					- The output must not include any markdown formatting, code block fences, or extra text. It should be a single, clean JSON object.
-
-				Existing code to apply branding on it:
+				You are a **seasoned frontend engineer** with **deep expertise in Prismic slices**.
+				Your task is to **apply branding (appearance) strictly based on the provided image and code input**.
+				The **branding is CRITICAL**—the slice you create **must perfectly match the visual appearance** of the provided slice image.
+			
+				**STRICT GUIDELINES TO FOLLOW (NO EXCEPTIONS):**
+					- **DO NOT** modify the structure of the code—**ONLY apply styling**. Your role is **purely styling-related**.
+					- **NO external dependencies**—use **only inline** styling.
+					- **VISUAL ACCURACY IS MANDATORY**—your goal is to make the output **visually identical** to the provided image.
+					
+				**MUST strictly respect the following:**
+					- **Background color** → Must **exactly match** the image. If unsure, **do not apply** any background color.
+					- **Padding & margin** → Must be **pixel-perfect** per the provided image.
+					- **Font size, color, and type** → Must match exactly. If the exact font is unavailable, choose the **closest possible match**.
+					- **Typography precision** → If the font-family does not match, **the output is incorrect**.
+					- **Color accuracy** → Use **ONLY the colors visible** in the provided image.
+					- **Element positioning** → Elements **must be placed exactly** as seen in the provided image.
+					- **Element sizes** → Every element **must match** the provided image in width, height, and proportions.
+					- **Overall proportions** → The slice must maintain **identical proportions** to the provided image.
+					- **Image constraints** → Images **must** maintain their **original aspect ratio**. Use explicit \`width\` and \`height\` constraints with an explicit pixels value. Avoid \`width: auto\`, \`height: auto\`, \`width: 100%\` or \`height: 100%\`.
+					- **Repetitions & layout** → Ensure **consistent styling** across repeated items. The **layout direction (horizontal/vertical)** must match the image.
+					- **Animations** → Handle animations as seen in the image, but **keep them fast and subtle** (avoid long animations).
+				
+				**IMPORTANT RULES:**
+					1. **DO NOT modify any non-styling code**.
+						- **Everything from the first import to the last export must remain unchanged**.
+						- **Only add styling** on top of the existing structure.
+				
+					2. **STRICT JSON OUTPUT FORMAT**
+						- Return a **valid JSON object** with **one key only**: \`"componentCode"\`.
+						- **NO markdown, NO code blocks, NO text before or after**—only **pure JSON**.
+						- The response **must start and end directly with \`{ "componentCode": ... }\`**.
+						- Ensure the output is **directly parseable** using \`JSON.parse(output)\`.
+				
+					3. **INLINE \`<style>\` RULES**
+						- Use **only inline** \`<style>\` tags (not \`<style jsx>\`).
+						- Ensure **all CSS is valid** and matches the image precisely.
+						- **Use backtick inside the \`<style>\` tag like this: <style>{\`...\`}</style>**.
+						- **Do NOT escape the backtick (\`\`\`) inside the \`<style>\` tag**.
+				
+				**Before returning, VALIDATE that \`JSON.parse(output)\` runs without errors.**
+				
+				**EXISTING CODE (to apply branding on):**
 				${componentCode}
-			`.trim();
-
-			// INFO: globalStyle is way too big as of today to be included in the prompt.
-			// As the user is providing a slice image and code you miss the global style to help you build the best slice that match the branding, so here is the global style:
-			// ${globalStyle}
-
-			const messages: Array<ChatCompletionMessageParam> = [
-				{ role: "system", content: systemPrompt },
-				{
-					role: "user",
-					content: [
-						{
-							type: "image_url",
-							image_url: {
-								url:
-									"data:image/png;base64," +
-									Buffer.from(imageFile).toString("base64"),
-							},
-						},
-						{ type: "text", text: codeFile },
-					],
-				},
-			];
-			const response: OpenAI.Chat.Completions.ChatCompletion & {
-				_request_id?: string | null;
-			} = await openai.chat.completions.create({
-				model: "gpt-4o",
-				messages,
-				response_format: {
-					type: "json_object",
-				},
+		  	`.trim();
+
+			const parsed = await callAI<{ componentCode: string }>({
+				ai: "AWS",
+				sliceIndex,
+				stepName: "APPEARANCE",
+				systemPrompt,
+				imageFile,
 			});
 
-			console.log(
-				"Generated component code appearance response:",
-				JSON.stringify(response),
-			);
-
-			const resultText = response.choices[0]?.message?.content?.trim();
-			if (!resultText) {
-				throw new Error("No valid slice component code was generated.");
+			if (!parsed.componentCode) {
+				throw new Error("Missing key 'componentCode' in AI response.");
 			}
 
-			try {
-				const parsed = JSON.parse(resultText);
-				if (!parsed.componentCode) {
-					throw new Error("Missing key 'componentCode' in AI response.");
-				}
-				return parsed.componentCode;
-			} catch (error) {
-				throw new Error(
-					"Failed to parse AI response for component code appearance: " + error,
-				);
-			}
+			return parsed.componentCode;
 		}
 
 		try {
-			let slices: {
-				sliceImage: Uint8Array;
-				codeFile: string;
-			}[] = [];
-
-			const folderPath = KNOWNED_WEBSITE_URLS[args.websiteUrl];
-
-			console.log("STEP 1: Get the slices images from the folder.");
-			const sliceImages = await readImagesFromFolder(`${folderPath}/images`);
-
-			console.log("STEP 2: Get the slices codes from the folder.");
-			const sliceCodes = await readCodeFromFolder(`${folderPath}/code`);
-
-			slices = sliceImages.map((sliceImage, index) => ({
-				sliceImage,
-				codeFile: sliceCodes[index],
-			}));
-
 			// Loop in parallel over each slice image and html code and generate the slice model, mocks and code.
 			const updatedSlices = await Promise.all(
-				slices.map(async ({ sliceImage, codeFile }, index) => {
+				args.sliceImages.map(async (sliceImage, index) => {
 					// ----- Q1 scope -----
 
 					console.log(
-						"STEP 3: Generate the slice model using the image for slice:",
+						"STEP 1: Generate the slice model using the image for slice:",
 						index,
 					);
-					const updatedSlice = await generateSliceModel(sliceImage, codeFile);
+					const updatedSlice = await generateSliceModel(index, sliceImage);
 
 					console.log(
-						"STEP 4: Persist the updated slice model for:",
+						"STEP 2: Persist the updated slice model for:",
 						`${index} - ${updatedSlice.name}`,
 					);
 					await this.updateSlice({
@@ -2679,7 +2692,7 @@ type GroupField = {
 					});
 
 					console.log(
-						"STEP 5: Update the slice screenshot for:",
+						"STEP 3: Update the slice screenshot for:",
 						`${index} - ${updatedSlice.name}`,
 					);
 					await this.updateSliceScreenshot({
@@ -2694,11 +2707,15 @@ type GroupField = {
 					let updatedMock: SharedSliceContent[];
 					try {
 						console.log(
-							"STEP 6: Generate updated mocks for:",
+							"STEP 4: Generate updated mocks for:",
 							`${index} - ${updatedSlice.name}`,
 						);
 						const existingMocks = mockSlice({ model: updatedSlice });
-						updatedMock = await generateSliceMocks(sliceImage, existingMocks);
+						updatedMock = await generateSliceMocks(
+							index,
+							sliceImage,
+							existingMocks,
+						);
 					} catch (error) {
 						console.error(
 							`Failed to generate mocks for ${index} - ${updatedSlice.name}:`,
@@ -2710,26 +2727,22 @@ type GroupField = {
 					let componentCode: string | undefined;
 					try {
 						console.log(
-							"STEP 7: Generate the isolated slice component code for:",
+							"STEP 5: Generate the isolated slice component code for:",
 							`${index} - ${updatedSlice.name}`,
 						);
-						const globalStyle = await getGlobalStyle(
-							`${folderPath}/globalStyle.css`,
-						);
 						const initialCode = await generateSliceComponentCode(
+							index,
 							sliceImage,
-							codeFile,
 							updatedSlice,
 						);
 
 						console.log(
-							"STEP 8: Generate the branding on the code:",
+							"STEP 6: Generate the branding on the code:",
 							`${index} - ${updatedSlice.name}`,
 						);
 						componentCode = await generateSliceComponentCodeAppearance(
+							index,
 							sliceImage,
-							codeFile,
-							globalStyle,
 							initialCode,
 						);
 					} catch (error) {
@@ -2744,40 +2757,49 @@ type GroupField = {
 			);
 
 			// Ensure to wait to have all slices code and mocks before writing on the disk
-			await Promise.all(
-				updatedSlices.map(
-					async ({ updatedSlice, componentCode, updatedMock }, index) => {
-						console.log(
-							"STEP 9: Update the slice code for:",
-							`${index} - ${updatedSlice.name}`,
-						);
-						if (componentCode) {
-							await this.createSlice({
-								libraryID: DEFAULT_LIBRARY_ID,
-								model: updatedSlice,
-								componentContents: componentCode,
-							});
-						} else {
+			await updatedSlices.forEach(
+				async ({ updatedSlice, componentCode, updatedMock }, index) => {
+					console.log(
+						"STEP 7: Update the slice code for:",
+						`${index} - ${updatedSlice.name}`,
+					);
+					if (componentCode) {
+						const { errors } = await this.createSlice({
+							libraryID: DEFAULT_LIBRARY_ID,
+							model: updatedSlice,
+							componentContents: componentCode,
+						});
+
+						if (errors.length > 0) {
+							console.log(
+								`Errors while updating the slice code for ${index} - ${updatedSlice.name}:`,
+								errors,
+							);
 							await this.createSlice({
 								libraryID: DEFAULT_LIBRARY_ID,
 								model: updatedSlice,
 							});
 						}
-
-						console.log(
-							"STEP 10: Persist the generated mocks for:",
-							`${index} - ${updatedSlice.name}`,
-						);
-						await this.updateSliceMocks({
+					} else {
+						await this.createSlice({
 							libraryID: DEFAULT_LIBRARY_ID,
-							sliceID: updatedSlice.id,
-							mocks: updatedMock,
+							model: updatedSlice,
 						});
-					},
-				),
+					}
+
+					console.log(
+						"STEP 8: Persist the generated mocks for:",
+						`${index} - ${updatedSlice.name}`,
+					);
+					await this.updateSliceMocks({
+						libraryID: DEFAULT_LIBRARY_ID,
+						sliceID: updatedSlice.id,
+						mocks: updatedMock,
+					});
+				},
 			);
 
-			console.log("STEP 11: THE END");
+			console.log("STEP 9: THE END");
 
 			return {
 				slices: updatedSlices.map(({ updatedSlice }) => updatedSlice),