diff --git a/backend/src/build-system/node/frontend-file-structure/index.ts b/backend/src/build-system/node/frontend-file-structure/index.ts index fd293962..380e9112 100644 --- a/backend/src/build-system/node/frontend-file-structure/index.ts +++ b/backend/src/build-system/node/frontend-file-structure/index.ts @@ -4,7 +4,6 @@ import { ModelProvider } from 'src/common/model-provider'; import { prompts } from './prompt'; export class FileStructureHandler implements BuildHandler { - readonly id = 'op:FSTRUCT::STATE:GENERATE'; async run(context: BuilderContext, args: unknown): Promise { diff --git a/backend/src/build-system/node/ux-sitemap-structure/index.ts b/backend/src/build-system/node/ux-sitemap-structure/index.ts index c724fb76..60ffdcb4 100644 --- a/backend/src/build-system/node/ux-sitemap-structure/index.ts +++ b/backend/src/build-system/node/ux-sitemap-structure/index.ts @@ -2,19 +2,21 @@ import { BuildHandler, BuildResult } from 'src/build-system/types'; import { BuilderContext } from 'src/build-system/context'; import { ModelProvider } from 'src/common/model-provider'; import { prompts } from './prompt'; +import { Logger } from '@nestjs/common'; // UXSMS: UX Sitemap Structure export class UXSitemapStructureHandler implements BuildHandler { readonly id = 'op:UXSMS::STATE:GENERATE'; + readonly logger = new Logger('UXSitemapStructureHandler'); async run(context: BuilderContext, args: unknown): Promise { - console.log('Generating UX Structure Document...'); + this.logger.log('Generating UX Structure Document...'); // extract relevant data from the context const projectName = context.getData('projectName') || 'Default Project Name'; - const prompt = prompts.generateUXDataMapPrompt( + const prompt = prompts.generateUXSiteMapStructrePrompt( projectName, args as string, // TODO: change later @@ -33,3 +35,95 @@ export class UXSitemapStructureHandler implements BuildHandler { }; } } + +export class Level2UXSitemapStructureHandler implements BuildHandler { + readonly id = 'op:LEVEL2_UXSMS::STATE:GENERATE'; + readonly logger = new Logger('Level2UXSitemapStructureHandler'); + + async run(context: BuilderContext, args: unknown): Promise { + this.logger.log('Generating Level 2 UX Sitemap Structure Document...'); + + // Extract necessary data from the context + const { projectName, sitemapDoc, uxStructureDoc } = args as { + projectName: string; + sitemapDoc: string; + uxStructureDoc: string; + }; + + // Ensure the UX Structure Document exists + if (!projectName || !sitemapDoc || !uxStructureDoc) { + throw new Error( + 'Missing required arguments: projectName, sitemapDoc, or uxStructureDoc.', + ); + } + + // Extract sections from the UX Structure Document + const sections = this.extractAllSections(uxStructureDoc); + if (sections.length === 0) { + this.logger.error( + 'No valid sections found in the UX Structure Document.', + ); + return { + success: false, + data: 'No valid sections found in the UX Structure Document.', + }; + } + + // Process each section with the refined Level 2 prompt + const modelProvider = ModelProvider.getInstance(); + const refinedSections = []; + + for (const section of sections) { + const prompt = prompts.generateLevel2UXSiteMapStructrePrompt( + projectName, + section.content, + sitemapDoc, + 'web', // TODO: Replace with dynamic platform if necessary + ); + + // Generate refined UX Structure content + const refinedContent = await modelProvider.chatSync( + { content: prompt }, + 'gpt-4o-mini', + ); + + refinedSections.push({ + title: section.title, + content: refinedContent, + }); + } + + // Combine the refined sections into the final document + const refinedDocument = refinedSections + .map((section) => `## **${section.title}**\n${section.content}`) + .join('\n\n'); + + this.logger.log(refinedDocument); + + return { + success: true, + data: refinedDocument, + }; + } + + /** + * Extracts all sections from a given text. + * @param text The UX Structure Document content. + * @returns Array of extracted sections with title and content. + */ + private extractAllSections( + text: string, + ): Array<{ title: string; content: string }> { + const regex = /## \*\*(\d+\.\s.*)\*\*([\s\S]*?)(?=\n## \*\*|$)/g; + const sections = []; + let match; + + while ((match = regex.exec(text)) !== null) { + const title = match[1].trim(); + const content = match[2].trim(); + sections.push({ title, content }); + } + + return sections; + } +} diff --git a/backend/src/build-system/node/ux-sitemap-structure/prompt.ts b/backend/src/build-system/node/ux-sitemap-structure/prompt.ts index f57017fa..0e6f9322 100644 --- a/backend/src/build-system/node/ux-sitemap-structure/prompt.ts +++ b/backend/src/build-system/node/ux-sitemap-structure/prompt.ts @@ -1,5 +1,5 @@ export const prompts = { - generateUXDataMapPrompt: ( + generateUXSiteMapStructrePrompt: ( projectName: string, sitemapDoc: string, platform: string, @@ -55,6 +55,75 @@ export const prompts = { 2. What information needs to be displayed and why 3. How the element supports user goals + Make sure is 100% completed. It will be directly be use in development. + `; + }, + generateLevel2UXSiteMapStructrePrompt: ( + projectName: string, + UXStructure: string, + sitemapDoc: string, + platform: string, + ): string => { + return `You are an expert UX Designer. + Your task is to analyze and improve a specific part of a page in the provided UX Structure Document. + The goal is to refine the design, layout, and interaction to ensure a seamless user experience and facilitate frontend implementation. + The output should address all aspects of user interaction, content layout, based on the following inputs: + + - Project name: ${projectName} + - Sitemap Documentation: ${sitemapDoc} + - UX Structure document: ${UXStructure} + - Platform: ${platform} + + Follow these guidelines to analyze requirements from a UX perspective: + + ### Instructions and Rules: + + 1, Analyze the Target Section: + Focus on the specific part of the page provided in the UX Structure document. + Identify ways to enhance its layout, interactions, and functionality. + 2, Improve UX Details: + Add clarity to component placement and hierarchy. + Specify interactions, behaviors, and dynamic content updates. + Ensure the section aligns with user goals and their journey. + 3, You need to identify and define every page/screen required for the application. + 4, Detailed Breakdown for Each Page/Screen: + Page Purpose: Clearly state the user goal for the page. + Core Elements: + List all components (e.g., headers, buttons, sidebars) and explain their role on the page. + Include specific interactions and behaviors for each element. + Content Display: + Identify the information that needs to be visible on the page and why it’s essential for the user. + Navigation and Routes: + Specify all frontend routes required to navigate to this page. + Include links or actions that lead to other pages or states. + Restrictions: + Note any restrictions or conditions for accessing the page (e.g., login required, specific user roles). + + 5, Focus on Detail: + Provide a component-level breakdown for each page, including layouts. + Explain how the design supports user goals and aligns with their journey. + + 6. For each page/screen in the sitemap: + - How the block should be place on the view? + - What information does the user need to see? + - What elements should be on the page? + - What are all the routes require for the frontend? + - What dynamic content needs to be displayed? + - What are the restriction for the page? + + 7. Consider: + - User goals on each page + - User journy + - Element purposes + - Content that needs to be displayed + + Your reply must start with: "\`\`\`UXStructureMap" and end with "\`\`\`". + + Focus on describing the UX Structure from a user experience perspective. For each page: + 1. What element appear on each page and why + 2. What information needs to be displayed and why + 3. How the element supports user goals + Make sure is 100% completed. It will be directly be use in development. `; },