This commit is contained in:
string 2025-05-24 20:07:57 +05:30
parent c9ad5cf628
commit dce9fb86d9
4 changed files with 291 additions and 167 deletions

View File

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

View File

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

View File

@ -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<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> {
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<string> {
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;

View File

@ -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'
};