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.
-                         🚫 Do NOT include:
+
+                        🛠️ 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,14 +635,41 @@ previousPage(): void {
 // }
 
     // Generate JSON to HTML
-    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;
 
+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;
+
+            // 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<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) {
@@ -963,27 +1039,42 @@ 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,
+        const payload = {
-                conversationId: '677'
+            query: data,
-            };
+            conversationId: '677'
-            console.log('query:', payload.query);
+        };
-            this.siteTreeService.callGemini(payload).subscribe({
+
-                next: (res) => {
+        this.siteTreeService.callGemini(payload).subscribe({
-                    console.log('response', res);
+            next: (res) => {
-                    if (res && res.responseContent) {
+                console.log('✅ LLM Response:', res);
-                        resolve(res.responseContent);
+                if (res && res.responseContent) {
-                    } else {
+                    resolve(res.responseContent);
-                        resolve('⚠️ No response received.');
+                } 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;

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 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",
+  "Home": {
-      "Header Section": "Headline with subheading and call-to-action button",
+    "Navbar": "...",
-      "Feature Section": "Three features highlighted with icons and descriptions",
+    "Header Section": "...",
-      "Testimonial Section": "Customer reviews in carousel layout",
+    "Feature Section": "...",
-      "Footer": "Footer with navigation links, social icons, and legal page links",
+    "Footer": "...",
-      "Children": {
+    "Children": {
-        "About": {
+      "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",
-          "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"
     }
-  }`;
+  },
+  "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 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}
-    "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",
+💡 Reference Format Only — DO NOT COPY below content. It's here to show the format and structure style.
-      "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",
+  "Home": {
-      "Children": {
+    "Navbar": "Top navigation with logo, links to all main pages, and call-to-action button",
-        "About": {
+    "Header Section": "Headline with subheading and call-to-action button",
-          "Header Section": "Intro about company mission and values",
+    "Feature Section": "Three features highlighted with icons and descriptions",
-          "Team Section": "Photos and bios of core team members"
+    "Testimonial Section": "Customer reviews in carousel layout",
-        },
+    "Footer": "Footer with navigation links, social icons, and legal page links",
-        "Services": {
+    "Children": {
-          "Header Section": "List of core services offered",
+      "About": {
-          "Pricing Section": "Cards with service pricing and features"
+        "Header Section": "Intro about company mission and values",
-        },
+        "Team Section": "Photos and bios of core team members"
-        "Contact": {
+      },
-          "Header Section": "Contact form with name, email, and message fields",
+      "Services": {
-          "Map Section": "Google Maps iframe showing location"
+        "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'
     };