wireframe

This commit is contained in:
string 2025-05-15 11:16:51 +05:30
parent b46e6b87e0
commit 4013e475cc
2 changed files with 72 additions and 32 deletions

View File

@ -125,7 +125,7 @@
💾 Save All HTML Files
</button>
<button (click)="buildWireframe(37667)" class="action-btn save-btn">
<button (click)="buildWireframe(37688)" class="action-btn save-btn">
💾 build wireframe
</button>

View File

@ -332,36 +332,52 @@ HTML Only. No CSS.
const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock;
const baseJsonString = JSON.stringify(baseJson, null, 2);
// const enhancedPrompt = `
// 🎯 Enhance the content of this section using the following context.
// 🧠 Instructions:
// - You are given an existing JSON structure for a UI section.
// - Your job is to update ONLY the content-related fields like "text", "title", "label", "description", and "placeholder".
// - You must NOT change the structure, hierarchy, tags, keys, class names, or styling values.
// - You must NOT add or remove any keys or elements.
// - You must return ONLY the updated JSON structure in valid format.
// 📄 Page Prompt:
// "${this.initialPrompt}"
// 📦 Section Name:
// "${sectionName}"
// 📘 Section Description:
// "${sectionDescription}"
// 📌 Existing JSON (modify this only):
// ${baseJsonString}
// 🚫 Do NOT include:
// - Any explanation, commentary, or markdown
// - Any prefix like "Here is the updated JSON"
// - Any new elements that were not already present
// ✅ Output Requirement:
// Only return the updated JSON structure — nothing else.`;
const enhancedPrompt = `
🎯 Enhance the content of this section using the following context.
🧠 Instructions:
- You are given an existing JSON structure for a UI section.
- Your job is to update ONLY the content-related fields like "text", "title", "label", "description", and "placeholder".
- You must NOT change the structure, hierarchy, tags, keys, class names, or styling values.
- You must NOT add or remove any keys or elements.
- You must return ONLY the updated JSON structure in valid format.
📄 Page Prompt:
"${this.initialPrompt}"
📦 Section Name:
"${sectionName}"
📘 Section Description:
"${sectionDescription}"
📌 Existing JSON (modify this only):
${baseJsonString}
🚫 Do NOT include:
i am working on a website, below is the context for the same :
${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:
- Any explanation, commentary, or markdown
- Any prefix like "Here is the updated JSON"
- Any new elements that were not already present
Output Requirement:
Only return the updated JSON structure nothing else.
`;
Only return the updated JSON structure nothing else.`;
const hash = sha256(enhancedPrompt).toString();
@ -393,6 +409,10 @@ HTML Only. No CSS.
for (const pageName of this.pageRenderOrder) {
console.log(' process page is : ', pageName);
const sectionMap = this.allPagePrompts[pageName];
if (!sectionMap) {
console.warn(`⚠️ No section map found for page: ${pageName}`);
continue;
}
htmlGenerationTasks.push(this.processPageSections(pageName, sectionMap));
}
@ -401,8 +421,16 @@ HTML Only. No CSS.
// ✅ Now save the newly generated pages only
const fileMap: Record<string, string> = {};
for (const pageName of this.missingHtmlPages) {
const html = this.pageSections[pageName].FullPage?.toString() || '';
fileMap[pageName] = html;
const pageData = this.pageSections[pageName];
const html = pageData?.FullPage?.toString() || '';
if (html) {
fileMap[pageName] = html;
} else {
console.warn(`⚠️ No FullPage HTML found for: ${pageName}`);
}
// const html = this.pageSections[pageName].FullPage?.toString() || '';
// fileMap[pageName] = html;
}
if (Object.keys(fileMap).length > 0) {
@ -416,10 +444,15 @@ HTML Only. No CSS.
}
});
}
}
}
// Process page sections
async processPageSections(pageName: string, sectionMap: Record<string, string>) {
if (!sectionMap || typeof sectionMap !== 'object') {
console.warn(`⚠️ Skipping ${pageName} because sectionMap is invalid:`, sectionMap);
return;
}
const sectionHtmls: string[] = [];
this.sectionHtmls[pageName] = {};
@ -521,7 +554,7 @@ HTML Only. No CSS.
window.URL.revokeObjectURL(url);
}
// Upload HTML files
uploadHtmlFiles(projId: number) {
buildWireframe(projId: number) {
const pageHtmlMap: Record<string, string> = {};
for (const [pageName, section] of Object.entries(this.pageSections)) {
@ -529,11 +562,11 @@ HTML Only. No CSS.
pageHtmlMap[pageName] = html;
}
this.siteTreeService.createHtmlPages(pageHtmlMap, projId).subscribe(
this.siteTreeService.deployProj(pageHtmlMap, projId).subscribe(
(data) => {
console.log(data);
if (data || data.status >= 200 && data.status <= 299) {
this.toastr.success("Files Created Successfully");
this.toastr.success("Deploying Start..");
}
// setTimeout(() => {
// this.ngOnInit();
@ -1051,7 +1084,9 @@ return new Promise((resolve) => {
selectNavbar(pageName: string) {
const html = this.pageSections[pageName]['FullPage']?.toString() || '';
if (html.includes('class="nav-1"') || html.includes('navbar')) {
if (html.includes('class="nav-1') || html.includes('navbar')) {
console.log('navbar here ..')
this.selectedNavbarPage = pageName;
this.extractNavbarLinks(pageName, html);
} else {
@ -1061,10 +1096,15 @@ return new Promise((resolve) => {
// Extract links from navbar HTML
extractNavbarLinks(pageName: string, html: string) {
console.log('extracting navbar ..')
const tempDiv = document.createElement('div');
tempDiv.innerHTML = html;
const navLinks = Array.from(tempDiv.querySelectorAll('.nav-1 li a'));
const navLinks = Array.from(tempDiv.querySelectorAll('nav a, ul[class*="nav"] a, ul[class*="menu"] a') );
// const navLinks = Array.from(tempDiv.querySelectorAll('.nav-1-nav-links a'));
this.navbarLinks[pageName] = navLinks.map(link => ({
label: link.textContent?.trim() || '',
href: link.getAttribute('href') || '#'