From dce9fb86d9678fc233569f214c1b268b1d7583da Mon Sep 17 00:00:00 2001 From: Gaurav Kumar Date: Sat, 24 May 2025 20:07:57 +0530 Subject: [PATCH] llm --- .../login/login-page/login_environment.ts | 2 +- .../WireframesUi/common-css.ts | 55 ++++- .../wireframe-renderer.component.ts | 183 +++++++++++---- .../tree-visualizer.component.ts | 218 +++++++++--------- 4 files changed, 291 insertions(+), 167 deletions(-) diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/login/login-page/login_environment.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/login/login-page/login_environment.ts index fe35f39..c86ed99 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/login/login-page/login_environment.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/login/login-page/login_environment.ts @@ -4,7 +4,7 @@ export const LoginEnvironment = { "templateNo": "Template 1", "loginHeading": "Welcome to", - "loginHeading2": "Visa App", + "loginHeading2": "Prince Visa", "isSignup": "true", "loginSignup": "Use your ID to sign in OR ", "loginSignup2": "create one now", diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts index f5e874f..4867b0c 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/common-css.ts @@ -1867,7 +1867,6 @@ a:hover { } /* Button System */ -.btn, button, .hero-1-btn, .hero-2-btn, .grid-11-btn, .grid-12-btn, .split-8-btn, .split-10-btn, .text-1-btn, .text-2-btn, .cta-3-btn, .faq-4-footer-btn, .faq-5-contact-btn, @@ -1907,12 +1906,6 @@ a:hover { color: #fff !important; } -/* Image Styling */ -img { - max-width: 100% !important; - height: auto !important; - display: block !important; -} /* Form Elements */ input, textarea, select { @@ -2012,7 +2005,55 @@ input:focus, textarea:focus, select:focus { box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1) !important; } +/* Testimonial Styling */ +testimonial { + display: block !important; + max-width: 800px !important; + margin: 40px auto !important; + padding: 35px !important; + background-color: #fff !important; + border-radius: 10px !important; + box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08) !important; + font-style: italic !important; + color: #444 !important; + position: relative !important; + line-height: 1.8 !important; + font-size: 1.1rem !important; + border-left: 5px solid #0066cc !important; +} +testimonial::before { + content: '"' !important; + font-size: 5rem !important; + color: #0066cc !important; + position: absolute !important; + left: 15px !important; + top: -10px !important; + opacity: 0.2 !important; + font-family: Georgia, serif !important; +} + + +/* Animations and Transitions */ +.fade-in { + animation: fadeIn 1s ease-in-out !important; +} + +@keyframes fadeIn { + from { + opacity: 0 !important; + transform: translateY(20px) !important; + } + to { + opacity: 1 !important; + transform: translateY(0) !important; + } +} + +/* Ensure smooth scrolling */ +html { + scroll-behavior: smooth !important; +} `; diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts index cbef9e0..e9ae076 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts @@ -416,6 +416,7 @@ HTML Only. No CSS. if (!jsonBlock) return resolve('{}'); + console.log(' base json is ...',jsonBlock); const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock; const baseJsonString = JSON.stringify(baseJson, null, 2); @@ -452,19 +453,27 @@ HTML Only. No CSS. // Only return the updated JSON structure β€” nothing else.`; const enhancedPrompt = ` - ${baseJsonString} - i am working on a website, below is the context for the same : + + You are building a website with the following context: ${this.initialPrompt} - i want you to write content for a ${sectionName} which is represented by above json. - do some research on internet and written me json in the same format however with rich content for a new website - 🚫 Do NOT include: + + Your task is to write rich, engaging content for the "${sectionName}" section, which is represented by the above JSON structure. + + πŸ› οΈ Instructions: + - Replace only the \`"text"\` fields in the JSON with relevant, marketing-oriented content based on the website's purpose. + - Maintain the exact same structure and element types. + - Content should be clear, modern, and compelling β€” suitable for a real-world product. + + 🚫 Do NOT include: - Any explanation, commentary, or markdown - Any prefix like "Here is the updated JSON" - - Any new elements that were not already present - + - Any additional fields or elements not present in the original JSON + - Do NOT wrap the output in code blocks (like \`\`\`json or \`\`\`) or use any markdown formatting. + βœ… Output Requirement: - Only return the updated JSON structure β€” nothing else.`; + Return raw JSON only β€” nothing else. + `; const hash = sha256(enhancedPrompt).toString(); @@ -472,13 +481,13 @@ HTML Only. No CSS. return resolve(this.promptHashCache[hash]); } - // const enhanced = await this.callAi(enhancedPrompt); + const enhanced = await this.callAi(enhancedPrompt); - // console.log('enhanced prmpt ',enhanced); - // this.promptHashCache[hash] = enhanced; + console.log('enhanced prmpt ',enhanced); + this.promptHashCache[hash] = enhanced; - resolve(baseJsonString); - // resolve(this.promptHashCache[hash]); + // resolve(baseJsonString); + resolve(this.promptHashCache[hash]); } catch (err) { console.error('❌ JSON parse error:', err); resolve('{}'); @@ -626,14 +635,41 @@ previousPage(): void { // } // Generate JSON to HTML - async generateJson(data: { jsonStructure: any, sectionType: string }): Promise { - return new Promise((resolve) => { - try { - const parsedJson = - typeof data.jsonStructure === 'string' - ? JSON.parse(data.jsonStructure) - : data.jsonStructure; +async generateJson(data: { jsonStructure: any, sectionType: string }): Promise { + return new Promise((resolve) => { + try { + const parsedJson = + typeof data.jsonStructure === 'string' + ? JSON.parse(data.jsonStructure) + : data.jsonStructure; + + // Check for empty or invalid parsed JSON + const isEmpty = !parsedJson || Object.keys(parsedJson).length === 0; + + if (isEmpty) { + // 🧠 Use AI to generate HTML based on sectionType + // ⬇️ Use sectionType + this.initialPrompt to create a better prompt + const aiPrompt = ` + Generate a clean, responsive HTML layout for the "${data.sectionType}" section of a modern website. + Use the following context as guidance for structure and styling: + "${this.initialPrompt}" + Ensure the section includes relevant semantic HTML, good visual hierarchy, and wireframe-friendly placeholder content. + Please return ONLY the HTML code, without wrapping it in triple backticks (\`\`\`) or specifying "html" or any language tag. Just pure HTML content β€” no explanation or comments.. + `.trim(); + + console.log('βœ… json is empty now call ai to generate html :', aiPrompt); + + + this.callAi(aiPrompt).then((aiHtml) => { + console.log('βœ… AI HTML generated via prompt:', aiHtml); + resolve(aiHtml); + }).catch((err) => { + console.error('❌ AI generation failed:', err); + resolve('⚠️ AI generation failed.'); + }); + } else { + // Normal flow β€” parsed JSON exists, call HTML API const payload = { sectionType: data.sectionType, jsonStructure: parsedJson @@ -645,7 +681,7 @@ previousPage(): void { next: (res) => { console.log('βœ… Response from HTML API:', res); if (res && res.msg) { - console.log("CHECKING DEPLOYED URL ",res.deployedUrl) + console.log("CHECKING DEPLOYED URL ", res.deployedUrl); this.deployedUrl = res.deployedUrl; resolve(res.msg); } else { @@ -657,12 +693,52 @@ previousPage(): void { resolve('⚠️ HTML API call failed.'); } }); - } catch (err) { - console.error('❌ JSON parsing error before sending to API:', err); - resolve('⚠️ Invalid JSON structure.'); } - }); - } + } catch (err) { + console.error('❌ JSON parsing error before sending to API:', err); + resolve('⚠️ Invalid JSON structure.'); + } + }); +} + + + // async generateJson(data: { jsonStructure: any, sectionType: string }): Promise { + // return new Promise((resolve) => { + // try { + // const parsedJson = + // typeof data.jsonStructure === 'string' + // ? JSON.parse(data.jsonStructure) + // : data.jsonStructure; + + // const payload = { + // sectionType: data.sectionType, + // jsonStructure: parsedJson + // }; + + // console.log('πŸ“€ Sending to HTML API:', parsedJson); + + // this.siteTreeService.generateHtml(parsedJson).subscribe({ + // next: (res) => { + // console.log('βœ… Response from HTML API:', res); + // if (res && res.msg) { + // console.log("CHECKING DEPLOYED URL ",res.deployedUrl) + // this.deployedUrl = res.deployedUrl; + // resolve(res.msg); + // } else { + // resolve('⚠️ No response received from HTML API.'); + // } + // }, + // error: (err) => { + // console.error('❌ HTML API Error:', err); + // resolve('⚠️ HTML API call failed.'); + // } + // }); + // } catch (err) { + // console.error('❌ JSON parsing error before sending to API:', err); + // resolve('⚠️ Invalid JSON structure.'); + // } + // }); + // } // Copy HTML to clipboard copyToClipboard(pageName: string) { @@ -963,27 +1039,42 @@ return new Promise((resolve) => { } // Call LLM - async callAi(data): Promise { - return new Promise((resolve, reject) => { - console.log('call Llm Start'); - const payload = { - query: data, - conversationId: '677' - }; - console.log('query:', payload.query); - this.siteTreeService.callGemini(payload).subscribe({ - next: (res) => { - console.log('response', res); - if (res && res.responseContent) { - resolve(res.responseContent); - } else { - resolve('⚠️ No response received.'); - } - }, - error: () => resolve('⚠️ LLaMA API failed.') - }); + async callAi(data, attempt = 1): Promise { + return new Promise((resolve) => { + console.log(`πŸ“‘ Call LLM - Attempt ${attempt}`); + + const payload = { + query: data, + conversationId: '677' + }; + + this.siteTreeService.callGemini(payload).subscribe({ + next: (res) => { + console.log('βœ… LLM Response:', res); + if (res && res.responseContent) { + resolve(res.responseContent); + } else { + resolve('⚠️ No response received.'); + } + }, + error: async (err) => { + console.error(`❌ LLaMA API Error (Attempt ${attempt}):`, err); + + // Check if it's a 429 (Too Many Requests) + if ( attempt < 3) { + console.log(`⏳ Waiting 10s before retrying...`); + await new Promise(r => setTimeout(r, 10000)); + const retryResult = await this.callAi(data, attempt + 1); + resolve(retryResult); + } else { + resolve('❌ LLM API failed after retries.'); + } + } }); - } + }); +} + + // Style properties activeEditTarget: string | null = null; diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts index 77ba05b..f125a1e 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts @@ -158,75 +158,64 @@ export class TreeVisualizerComponent { console.log('πŸ”„ Starting generateJsonWithLoading...'); // Call the actual generateJson method - const suffix = `You are a JSON structure generator for website page hierarchies. - You are a JSON structure generator for website UI and sitemap hierarchy. + const prompt = ` +You are a JSON structure generator for website UI and sitemap hierarchy. - Generate a strictly hierarchical JSON tree that represents the entire page flow of a website. The root of the tree must always be the "Home" page. All other pages (like Login, Sign Up, Projects, Dashboard, etc.) must be nested as subpages using a "Children" key under their logical parent based on the described user flow β€” not all pages should be flat or at root level. +Your task is to generate a strictly hierarchical JSON tree that represents the full page flow of a website. The root of the tree must always be the "Home" page. Other pages (like Login, Sign Up, Dashboard, etc.) must be nested logically using a "Children" key β€” never flatten the structure. - Each page must include meaningful UI sections as keys β€” like "Navbar", "Header Section", "Feature Section", "Form Section", "Footer", etc. - Each section must include a short and clear description of its purpose or content β€” to assist in frontend UI development. +Each page must contain: - Analyze the flow implied in the prompt: - - Pages that are accessed after some action (e.g., "after login", "inside a project", "upon click") must be nested as children. - - Reuse common sections like "Navbar" or "Footer" wherever needed. - - Pages like "Privacy Policy" or "Terms and Conditions" can remain at root or in Footer reference if needed. +- 4 to 5 meaningful UI sections (e.g., "Header Section", "Form Section", "Feature Section", etc.) +- A "Navbar" and a "Footer" section (always included on every page) +- A short, clear description for each section (to support frontend development) - βœ… The following standard pages must always be included with detailed section-level breakdown: +Constraints: +- Total number of pages (including nested children) must be between ${this.selectedPageRange} +- Do NOT create unnecessary or generic pages (e.g., no "Blog", "FAQ", etc.) unless explicitly present in the user flow +- Pages that appear after user actions (e.g., clicking a card or after login) must be nested under the relevant parent using a "Children" key +- DO NOT include any standalone section like "FAQ" or "Blog" as top-level pages unless mentioned - - **Home**: General overview of the website, with call-to-action, features, testimonials, and a footer. - - **About**: Brief company history, mission/vision, and team member highlights. - - **Services**: List of services offered, with description, icons, or pricing cards. - - **Contact**: Contact form (name, email, message), business info, phone, map. - - **FAQ**: Accordion or expandable list of common questions and answers. - - **Blog**: List of articles or posts, with title, thumbnail, and excerpt. - - **Login**: Form section with input fields for email/username and password, login button, forgot password link. - - **Sign Up**: Form section with full name, email, password, confirm password, sign-up button. - - **Privacy Policy**: Legal text describing how user data is handled. - - **Terms and Conditions**: Legal text outlining site usage policies. +πŸ“˜ Website Context: +${this.rawInputText} - ❌ Do not include: - - Any explanation before or after the JSON - - Any markdown formatting like \`\`\` or json - - Any natural language response - - Return only pure JSON β€” no explanation, no headings, no markdown formatting. - - βœ… Output JSON example structure should look like this: - { - "Home": { - "Navbar": "Top navigation with logo, links to all main pages, and call-to-action button", - "Header Section": "Headline with subheading and call-to-action button", - "Feature Section": "Three features highlighted with icons and descriptions", - "Testimonial Section": "Customer reviews in carousel layout", - "Footer": "Footer with navigation links, social icons, and legal page links", - "Children": { - "About": { - "Header Section": "Intro about company mission and values", - "Team Section": "Photos and bios of core team members" - }, - "Services": { - "Header Section": "List of core services offered", - "Pricing Section": "Cards with service pricing and features" - }, - "Contact": { - "Header Section": "Contact form with name, email, and message fields", - "Map Section": "Google Maps iframe showing location" - }, - ... +--- Reference Format (DO NOT COPY; for structure only) --- +{ + "Home": { + "Navbar": "...", + "Header Section": "...", + "Feature Section": "...", + "Footer": "...", + "Children": { + "About": { + "Navbar": "...", + "Header Section": "...", + "Footer": "..." } - }, - "Privacy Policy": { - "Content Section": "Full legal description of data usage and user rights" - }, - "Terms and Conditions": { - "Content Section": "Rules and legal terms for using the site or service" } - }`; + }, + "Services": { + "Navbar": "...", + "Content Section": "...", + "Footer": "..." + } +} +--- + +🚫 DO NOT: +- Include any explanation, notes, comments, or formatting (like \`\`\` or \`json\`) +- Do NOT return escaped or markdown-formatted JSON +- Do NOT wrap the output inside code blocks +- Do NOT return anything except plain raw JSON + +πŸ“€ Output ONLY the final JSON structure β€” nothing more. +`; const payload = { - query: this.rawInputText + ' ' + suffix, + // query: this.rawInputText + ' \n ' + suffix, + query: prompt, conversationId: '677' }; @@ -441,77 +430,80 @@ export class TreeVisualizerComponent { generateJson() { console.log('genearte json start ') - const suffix = `You are a JSON structure generator for website page hierarchies. - + const prompt = ` You are a JSON structure generator for website UI and sitemap hierarchy. - Generate a strictly hierarchical JSON tree that represents the entire page flow of a website. The root of the tree must always be the "Home" page. All other pages (like Login, Sign Up, Projects, Dashboard, etc.) must be nested as subpages using a "Children" key under their logical parent based on the described user flow β€” not all pages should be flat or at root level. +Your task is to generate a strictly hierarchical JSON tree that represents the entire page flow of a website. The root of the tree must always be the "Home" page. All other pages (like Login, Sign Up, Dashboard, etc.) must be nested as subpages using a "Children" key under their logical parent based on the described user flow β€” do not flatten the structure. - Each page must include meaningful UI sections as keys β€” like "Navbar", "Header Section", "Feature Section", "Form Section", "Footer", etc. - Each section must include a short and clear description of its purpose or content β€” to assist in frontend UI development. - - Analyze the flow implied in the prompt: - - Pages that are accessed after some action (e.g., "after login", "inside a project", "upon click") must be nested as children. - - Reuse common sections like "Navbar" or "Footer" wherever needed. - - Pages like β€œPrivacy Policy” or β€œTerms and Conditions” can remain at root or in Footer reference if needed. +Each page must include meaningful UI sections as keys β€” such as "Navbar", "Header Section", "Feature Section", "Form Section", "Footer", etc. +Each section must include a short, clear description of its purpose or content β€” this helps frontend development. - βœ… The following standard pages must always be included with detailed section-level breakdown: - - **Home**: General overview of the website, with call-to-action, features, testimonials, and a footer. - - **About**: Brief company history, mission/vision, and team member highlights. - - **Services**: List of services offered, with description, icons, or pricing cards. - - **Contact**: Contact form (name, email, message), business info, phone, map. - - **FAQ**: Accordion or expandable list of common questions and answers. - - **Blog**: List of articles or posts, with title, thumbnail, and excerpt. - - **Login**: Form section with input fields for email/username and password, login button, forgot password link. - - **Sign Up**: Form section with full name, email, password, confirm password, sign-up button. - - **Privacy Policy**: Legal text describing how user data is handled. - - **Terms and Conditions**: Legal text outlining site usage policies. +Constraints: +- Total number of pages must be between ${this.selectedPageRange}, including nested subpages. +- Each page must include 4 to 5 meaningful UI sections like "Navbar", "Header Section", "Feature Section", "Form Section", "Footer", etc. +- Do not flatten the structure β€” pages that come after actions (e.g., after login or click) must be nested under "Children" of their logical parent. +- Do not invent extra pages not needed by the flow. - ❌ Do not include: - - Any explanation before or after the JSON - - Any markdown formatting like \`\`\` or json - - Any natural language response - - Return only pure JSON β€” no explanation, no headings, no markdown formatting. - +πŸ“˜ Website Context: - βœ… Output JSON example structure should look like this: - { - "Home": { - "Navbar": "Top navigation with logo, links to all main pages, and call-to-action button", - "Header Section": "Headline with subheading and call-to-action button", - "Feature Section": "Three features highlighted with icons and descriptions", - "Testimonial Section": "Customer reviews in carousel layout", - "Footer": "Footer with navigation links, social icons, and legal page links", - "Children": { - "About": { - "Header Section": "Intro about company mission and values", - "Team Section": "Photos and bios of core team members" - }, - "Services": { - "Header Section": "List of core services offered", - "Pricing Section": "Cards with service pricing and features" - }, - "Contact": { - "Header Section": "Contact form with name, email, and message fields", - "Map Section": "Google Maps iframe showing location" - }, - ... +${this.rawInputText} +--- + +πŸ’‘ Reference Format Only β€” DO NOT COPY below content. It's here to show the format and structure style. + +{ + "Home": { + "Navbar": "Top navigation with logo, links to all main pages, and call-to-action button", + "Header Section": "Headline with subheading and call-to-action button", + "Feature Section": "Three features highlighted with icons and descriptions", + "Testimonial Section": "Customer reviews in carousel layout", + "Footer": "Footer with navigation links, social icons, and legal page links", + "Children": { + "About": { + "Header Section": "Intro about company mission and values", + "Team Section": "Photos and bios of core team members" + }, + "Services": { + "Header Section": "List of core services offered", + "Pricing Section": "Cards with service pricing and features" + }, + "Contact": { + "Header Section": "Contact form with name, email, and message fields", + "Map Section": "Google Maps iframe showing location" } - }, - "Privacy Policy": { - "Content Section": "Full legal description of data usage and user rights" - }, - "Terms and Conditions": { - "Content Section": "Rules and legal terms for using the site or service" } - }`; + }, + "Privacy Policy": { + "Content Section": "Full legal description of data usage and user rights" + }, + "Terms and Conditions": { + "Content Section": "Rules and legal terms for using the site or service" + } +} + +--- + +πŸ“€ Now generate the actual website structure JSON for the iCard website described above. + +🚫 Do NOT: +- Include any explanation, comments, or headings +- Wrap the output in code blocks (no \`\`\` or \`json\`) +- Copy any part of the example above +- Include markdown formatting + +βœ… Only return raw JSON output β€” reflecting the new website's structure and UI flow. + + + `; const payload = { - query: this.rawInputText + ' ' + suffix, + // query: this.rawInputText + ' \n ' + suffix, + query: prompt, + conversationId: '677' };