llm

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",

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;
+}
 `;
 
 

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
+                        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);
+                        console.log('enhanced prmpt ',enhanced);
-                        // this.promptHashCache[hash] = enhanced;
+                        this.promptHashCache[hash] = enhanced;
 
-                        resolve(baseJsonString);
+                        // resolve(baseJsonString);
-                        // resolve(this.promptHashCache[hash]);
+                        resolve(this.promptHashCache[hash]);
                     } catch (err) {
                         console.error('❌ JSON parse error:', err);
                         resolve('{}');
@@ -626,6 +635,7 @@ previousPage(): void {
 // }
 
     // Generate JSON to HTML
+
 async generateJson(data: { jsonStructure: any, sectionType: string }): Promise<string> {
     return new Promise((resolve) => {
         try {
@@ -634,6 +644,32 @@ previousPage(): void {
                     ? 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,6 +693,7 @@ previousPage(): void {
                         resolve('⚠️ HTML API call failed.');
                     }
                 });
+            }
         } catch (err) {
             console.error('❌ JSON parsing error before sending to API:', err);
             resolve('⚠️ Invalid JSON structure.');
@@ -664,6 +701,45 @@ previousPage(): void {
     });
 }
 
+
+    // async generateJson(data: { jsonStructure: any, sectionType: string }): Promise<string> {
+    //     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) {
         const fullHtml = this.pageSections[pageName].FullPage.toString();
@@ -963,28 +1039,43 @@ return new Promise((resolve) => {
     }
 
     // Call LLM
-    async callAi(data): Promise<string> {
+   async callAi(data, attempt = 1): Promise<string> {
-        return new Promise((resolve, reject) => {
+    return new Promise((resolve) => {
-            console.log('call Llm Start');
+        console.log(`📡 Call LLM - Attempt ${attempt}`);
+
         const payload = {
             query: data,
             conversationId: '677'
         };
-            console.log('query:', payload.query);
+
         this.siteTreeService.callGemini(payload).subscribe({
             next: (res) => {
-                    console.log('response', res);
+                console.log('✅ LLM Response:', res);
                 if (res && res.responseContent) {
                     resolve(res.responseContent);
                 } else {
                     resolve('⚠️ No response received.');
                 }
             },
-                error: () => resolve('⚠️ LLaMA API failed.')
+            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;
     // liveStyles = {

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.
 
+    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 page must contain:
-    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:
+- 4 to 5 meaningful UI sections (e.g., "Header Section", "Form Section", "Feature Section", etc.)
-    - Pages that are accessed after some action (e.g., "after login", "inside a project", "upon click") must be nested as children.
+- A "Navbar" and a "Footer" section (always included on every page)
-    - Reuse common sections like "Navbar" or "Footer" wherever needed.
+- A short, clear description for each section (to support frontend development)
-    - Pages like "Privacy Policy" or "Terms and Conditions" can remain at root or in Footer reference if needed.
 
-  ✅ 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.
+📘 Website Context:
-  - **About**: Brief company history, mission/vision, and team member highlights.
+${this.rawInputText}
-  - **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.
-
-  ❌ 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:
 
+--- Reference Format (DO NOT COPY; for structure only) ---
 {
   "Home": {
-      "Navbar": "Top navigation with logo, links to all main pages, and call-to-action button",
+    "Navbar": "...",
-      "Header Section": "Headline with subheading and call-to-action button",
+    "Header Section": "...",
-      "Feature Section": "Three features highlighted with icons and descriptions",
+    "Feature Section": "...",
-      "Testimonial Section": "Customer reviews in carousel layout",
+    "Footer": "...",
-      "Footer": "Footer with navigation links, social icons, and legal page links",
     "Children": {
       "About": {
-          "Header Section": "Intro about company mission and values",
+        "Navbar": "...",
-          "Team Section": "Photos and bios of core team members"
+        "Header Section": "...",
+        "Footer": "..."
+      }
+    }
   },
   "Services": {
-          "Header Section": "List of core services offered",
+    "Navbar": "...",
-          "Pricing Section": "Cards with service pricing and features"
+    "Content Section": "...",
-        },
+    "Footer": "..."
-        "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"
 }
-  }`;
+---
+
+🚫 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,42 +430,29 @@ 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 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 and clear description of its purpose or content — to assist in frontend UI development.
+Each section must include a short, clear description of its purpose or content — this helps frontend 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.
 
 
-  ✅ 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.
+Constraints:
-  - **About**: Brief company history, mission/vision, and team member highlights.
+- Total number of pages must be between ${this.selectedPageRange}, including nested subpages.
-  - **Services**: List of services offered, with description, icons, or pricing cards.
+- Each page must include 4 to 5 meaningful UI sections like "Navbar", "Header Section", "Feature Section", "Form Section", "Footer", etc.
-  - **Contact**: Contact form (name, email, message), business info, phone, map.
+- 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.
-  - **FAQ**: Accordion or expandable list of common questions and answers.
+- Do not invent extra pages not needed by the flow.
-  - **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.
 
-  ❌ Do not include:
+📘 Website Context:
-  - 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:
+${this.rawInputText}
+---
+
+💡 Reference Format Only — DO NOT COPY below content. It's here to show the format and structure style.
 
 {
   "Home": {
@@ -497,8 +473,7 @@ export class TreeVisualizerComponent {
       "Contact": {
         "Header Section": "Contact form with name, email, and message fields",
         "Map Section": "Google Maps iframe showing location"
-        },
+      }
-        ...
     }
   },
   "Privacy Policy": {
@@ -507,11 +482,28 @@ export class TreeVisualizerComponent {
   "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'
     };