wireframe
This commit is contained in:
parent
b46e6b87e0
commit
4013e475cc
@ -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>
|
||||
|
||||
@ -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') || '#'
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user