diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts index 654ab41..f8fe3be 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/SiteBuilderGrid/SiteTree.service.ts @@ -48,6 +48,12 @@ export class SiteTreeservice { return this.apiRequest.get(_http); } + + getDesignLibraryByTag(operationType: string, tagType: string): Observable { + const _http = "Design_lbrary/Design_lbrary/tag?" + "operationType=" + operationType + "&fieldType=" + tagType; + return this.apiRequest.get(_http); + } + getDesignLibraryByheader(headerId: number, operationType: string, fieldtype: string): Observable { const _http = "Design_lbrary/Design_lbrary/line/unique?headerId=" + headerId + "&operationType=" + operationType + "&fieldType=" + fieldtype; return this.apiRequest.get(_http); @@ -128,5 +134,12 @@ export class SiteTreeservice { uploadLogouploaddelete(id: number): Observable { return this.apiRequest.delete(`FileUpload/Uploadeddocs/${id}`); } + + // photo search option + + searchPhoto(keywords: string, pageNumber: number): Observable { + const _http = "api/photos/search?keyword=" + keywords + "&pageNumber=" + pageNumber; + return this.apiRequest.get(_http); + } // updateactionฦ’ } \ No newline at end of file diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi 4.zip b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi 4.zip new file mode 100644 index 0000000..0402d58 Binary files /dev/null and b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi 4.zip differ diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html index 0332af5..f084181 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.html @@ -486,6 +486,24 @@
+ + +
+

Suggested Images for "{{ imageSearchQuery }}"

+ + +
+ +
+ +
+ + Page {{ imageSearchPage }} + +
+
+

Edit CSS for Section: {{ selectedSection?.section }}

@@ -498,6 +516,9 @@
+ + +
@@ -505,6 +526,8 @@ + +
@@ -660,6 +683,8 @@
+ +
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss index 5551daf..4feb255 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.scss @@ -1988,5 +1988,89 @@ $shadow-heavy: 0 8px 25px rgba(0, 0, 0, 0.15); - // chow code css end + // show code css end + + + // show image slider + + .image-modal-overlay { + position: fixed; + top: 0; + left: 0; + height: 100vh; + width: 100vw; + background: rgba(0,0,0,0.5); + z-index: 2000; + display: flex; + justify-content: center; + align-items: center; +} + +.image-modal { + background: white; + padding: 20px; + width: 80%; + max-height: 90vh; + overflow: auto; + border-radius: 10px; + position: relative; +} + +.image-slider { + display: flex; + gap: 10px; + overflow-x: auto; + margin: 16px 0; +} + +.slider-image { + height: 120px; + cursor: pointer; + border-radius: 4px; + transition: transform 0.2s; +} + +.slider-image:hover { + transform: scale(1.05); +} + +.pagination-buttons { + display: flex; + justify-content: space-between; + align-items: center; + margin-bottom: 12px; +} +.image-slider { + display: flex; + flex-direction: row; + overflow-x: auto; + gap: 12px; + padding: 10px 0; +} + +.slider-image { + height: 100px; + flex: 0 0 auto; + border-radius: 4px; + cursor: pointer; + transition: transform 0.2s, border 0.2s; + border: 2px solid transparent; +} + +.slider-image:hover { + transform: scale(1.05); + border-color: #007bff; +} + +.pagination-buttons { + display: flex; + justify-content: space-between; + align-items: center; + margin-top: 10px; +} + + + + + } \ No newline at end of file diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts index 872bcfc..9089867 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/WireframesUi/wireframe-renderer.component.ts @@ -178,7 +178,7 @@ export class WireframeRendererComponent implements OnInit { @Input() node: any; @Input() title: string = ''; - commonCss: string = COMMON_CSS; + // commonCss: string = COMMON_CSS; jsonInput = ''; initialPrompt = ''; id: number; @@ -290,9 +290,9 @@ async ngOnInit(): Promise { // First fetch the tree to get expected pages await this.fetchTreeById(this.id); - const style = document.createElement('style'); - style.textContent = COMMON_CSS; - document.head.appendChild(style); + // const style = document.createElement('style'); + // style.textContent = COMMON_CSS; + // document.head.appendChild(style); } catch (err) { console.error('Initial load error:', err); } @@ -396,39 +396,39 @@ allConnectedLists: CdkDropList[] = []; this.cdr.detectChanges(); } - verifyCssInSections(): void { - // First ensure common CSS is in the head - this.ensureCommonCssForAllSections(); + // verifyCssInSections(): void { + // // First ensure common CSS is in the head + // this.ensureCommonCssForAllSections(); - // Check all section previews have proper styling - const sectionPreviews = document.querySelectorAll('.section-preview'); - let fixedCount = 0; + // // Check all section previews have proper styling + // const sectionPreviews = document.querySelectorAll('.section-preview'); + // let fixedCount = 0; - sectionPreviews.forEach((preview: HTMLElement) => { - // If the preview doesn't have styling class, add it - if (!preview.classList.contains('section-preview-styled')) { - preview.classList.add('section-preview-styled'); - fixedCount++; - } + // sectionPreviews.forEach((preview: HTMLElement) => { + // // If the preview doesn't have styling class, add it + // if (!preview.classList.contains('section-preview-styled')) { + // preview.classList.add('section-preview-styled'); + // fixedCount++; + // } - // Check if section has already embedded CSS - if (!preview.querySelector('style[data-section-css]')) { - // Create a new style element specifically for this section - const sectionStyle = document.createElement('style'); - sectionStyle.setAttribute('data-section-css', 'true'); - sectionStyle.textContent = COMMON_CSS; - preview.insertBefore(sectionStyle, preview.firstChild); - fixedCount++; - } - }); + // // Check if section has already embedded CSS + // if (!preview.querySelector('style[data-section-css]')) { + // // Create a new style element specifically for this section + // const sectionStyle = document.createElement('style'); + // sectionStyle.setAttribute('data-section-css', 'true'); + // sectionStyle.textContent = COMMON_CSS; + // preview.insertBefore(sectionStyle, preview.firstChild); + // fixedCount++; + // } + // }); - // Update full page rendering for each page to ensure correct CSS - for (const pageName of this.objectKeys(this.pageSections)) { - this.updateFullPageHtml(pageName); - } + // // Update full page rendering for each page to ensure correct CSS + // for (const pageName of this.objectKeys(this.pageSections)) { + // this.updateFullPageHtml(pageName); + // } - this.toastr.success(`CSS verification complete. Fixed ${fixedCount} sections.`); - } + // this.toastr.success(`CSS verification complete. Fixed ${fixedCount} sections.`); + // } enhanceSectionWithClasses(html: string): string { // Add basic container classes if missing @@ -907,194 +907,194 @@ this.router.navigate(['/cns-portal/WireFrameEdit']); /* Step 2: Process all pages with existing file checking */ -async processAllPagesWithExistingCheck(treeJsonString: string) { - try { - const parsedTree = JSON.parse(treeJsonString); - const allExpectedPages = Object.keys(parsedTree); +// async processAllPagesWithExistingCheck(treeJsonString: string) { +// try { +// const parsedTree = JSON.parse(treeJsonString); +// const allExpectedPages = Object.keys(parsedTree); - this.updateLoadingProgress(10, `Checking ${allExpectedPages.length} existing pages...`); +// this.updateLoadingProgress(10, `Checking ${allExpectedPages.length} existing pages...`); - // Check for existing files - const existingPagesData = await this.checkAllExistingPages(allExpectedPages); +// // Check for existing files +// const existingPagesData = await this.checkAllExistingPages(allExpectedPages); - this.updateLoadingProgress(40, 'Processing page structure...'); +// this.updateLoadingProgress(40, 'Processing page structure...'); - // Process the tree structure and generate prompts - await this.generatePromptsForAllPages(parsedTree, existingPagesData); +// // Process the tree structure and generate prompts +// await this.generatePromptsForAllPages(parsedTree, existingPagesData); - this.updateLoadingProgress(70, 'Generating missing pages...'); +// this.updateLoadingProgress(70, 'Generating missing pages...'); - // Generate HTML for missing pages - await this.generateHtmlForMissingPages(); +// // Generate HTML for missing pages +// await this.generateHtmlForMissingPages(); - this.updateLoadingProgress(90, 'Saving new pages...'); +// this.updateLoadingProgress(90, 'Saving new pages...'); - // Save newly generated pages - await this.saveNewlyGeneratedPages(); +// // Save newly generated pages +// await this.saveNewlyGeneratedPages(); - this.updateLoadingProgress(100, 'Complete!'); - setTimeout(() => this.hideLoading(), 500); +// this.updateLoadingProgress(100, 'Complete!'); +// setTimeout(() => this.hideLoading(), 500); - } catch (e) { - console.error('โŒ Invalid JSON format', e); - this.toastr.error('Invalid JSON format'); - this.hideLoading(); - } -} +// } catch (e) { +// console.error('โŒ Invalid JSON format', e); +// this.toastr.error('Invalid JSON format'); +// this.hideLoading(); +// } +// } /** * Step 3: Check all existing pages */ -private async checkAllExistingPages(expectedPages: string[]): Promise> { - const existingPagesData = new Map(); +// private async checkAllExistingPages(expectedPages: string[]): Promise> { +// const existingPagesData = new Map(); - const checkPromises = expectedPages.map(async (pageName) => { - try { - const response = await this.checkSinglePage(pageName); - if (response) { - const parsedData = this.parseHtmlResponse(response); - if (parsedData) { - existingPagesData.set(pageName, parsedData); - console.log(`โœ… Found existing page: ${pageName}`); - } - } - } catch (error) { - console.log(`โŒ Page not found: ${pageName}`); - } - }); +// const checkPromises = expectedPages.map(async (pageName) => { +// try { +// const response = await this.checkSinglePage(pageName); +// if (response) { +// const parsedData = this.parseHtmlResponse(response); +// if (parsedData) { +// existingPagesData.set(pageName, parsedData); +// console.log(`โœ… Found existing page: ${pageName}`); +// } +// } +// } catch (error) { +// console.log(`โŒ Page not found: ${pageName}`); +// } +// }); - await Promise.all(checkPromises); +// await Promise.all(checkPromises); - console.log(`๐Ÿ“Š Found ${existingPagesData.size} existing pages out of ${expectedPages.length}`); - return existingPagesData; -} +// console.log(`๐Ÿ“Š Found ${existingPagesData.size} existing pages out of ${expectedPages.length}`); +// return existingPagesData; +// } /* Check single page existence */ -private async checkSinglePage(pageName: string): Promise { - const sanitizedPageName = this.sanitizeFilename(pageName); +// private async checkSinglePage(pageName: string): Promise { +// const sanitizedPageName = this.sanitizeFilename(pageName); - console.log(sanitizedPageName) - return new Promise((resolve) => { - this.siteTreeService.readPages(this.sitename, sanitizedPageName).subscribe({ - next: (response) => { - if (response && response.trim() !== '' && !response.includes('โŒ File not found')) { - resolve(response); - } else { - resolve(null); - } - }, - error: (err) => { - console.log(`Page ${pageName} not found:`, err); - resolve(null); - } - }); - }); -} +// console.log(sanitizedPageName) +// return new Promise((resolve) => { +// this.siteTreeService.readPages(this.sitename, sanitizedPageName).subscribe({ +// next: (response) => { +// if (response && response.trim() !== '' && !response.includes('โŒ File not found')) { +// resolve(response); +// } else { +// resolve(null); +// } +// }, +// error: (err) => { +// console.log(`Page ${pageName} not found:`, err); +// resolve(null); +// } +// }); +// }); +// } /** * Step 4: Generate prompts for all pages and load existing ones */ -private async generatePromptsForAllPages(treeJson: any, existingPagesData: Map) { - this.newlyGeneratedPages = []; // Reset the tracking array +// private async generatePromptsForAllPages(treeJson: any, existingPagesData: Map) { +// this.newlyGeneratedPages = []; // Reset the tracking array - for (const [pageName, sections] of Object.entries(treeJson)) { - if (!this.pageRenderOrder.includes(pageName)) { - this.pageRenderOrder.push(pageName); - } +// for (const [pageName, sections] of Object.entries(treeJson)) { +// if (!this.pageRenderOrder.includes(pageName)) { +// this.pageRenderOrder.push(pageName); +// } - this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || []; +// this.sectionOrderMap[pageName] = this.sectionOrderMap[pageName] || []; - // Check if page exists - if (existingPagesData.has(pageName)) { - // Load existing page - const pageData = existingPagesData.get(pageName); - const completeHtml = this.createCompleteHtml(pageName, pageData.css, pageData.bodyHtml); +// // Check if page exists +// if (existingPagesData.has(pageName)) { +// // Load existing page +// const pageData = existingPagesData.get(pageName); +// const completeHtml = this.createCompleteHtml(pageName, pageData.css, pageData.bodyHtml); - this.pageSections[pageName] = { - FullPage: completeHtml - }; +// this.pageSections[pageName] = { +// FullPage: completeHtml +// }; - // Initialize section HTML storage for existing pages - this.sectionHtmls[pageName] = {}; - this.allPagePrompts[pageName] = {}; +// // Initialize section HTML storage for existing pages +// this.sectionHtmls[pageName] = {}; +// this.allPagePrompts[pageName] = {}; - console.log(`โœ… Loaded existing page: ${pageName}`); - } else { - // Generate prompts for missing page - await this.generatePromptsForMissingPage(pageName, sections); - this.newlyGeneratedPages.push(pageName); - console.log(`๐Ÿ“ Will generate new page: ${pageName}`); - } - } -} +// console.log(`โœ… Loaded existing page: ${pageName}`); +// } else { +// // Generate prompts for missing page +// await this.generatePromptsForMissingPage(pageName, sections); +// this.newlyGeneratedPages.push(pageName); +// console.log(`๐Ÿ“ Will generate new page: ${pageName}`); +// } +// } +// } /** * Generate prompts for a single missing page */ -private async generatePromptsForMissingPage(pageName: string, sections: any) { - const sectionPrompts: Record = {}; +// private async generatePromptsForMissingPage(pageName: string, sections: any) { +// const sectionPrompts: Record = {}; - // Process nested children first - if (sections['Children']) { - // Handle nested structure if needed - await this.processPages(sections['Children'], false); - } +// // Process nested children first +// if (sections['Children']) { +// // Handle nested structure if needed +// await this.processPages(sections['Children'], false); +// } - // Generate prompts for each section - for (const [sectionName, sectionDescription] of Object.entries(sections)) { - if (sectionName === 'Children') continue; +// // Generate prompts for each section +// for (const [sectionName, sectionDescription] of Object.entries(sections)) { +// if (sectionName === 'Children') continue; - this.sectionOrderMap[pageName].push(sectionName); - const prompt = await this.generatePromptFromSection(sectionName, sectionDescription as string); - sectionPrompts[sectionName] = prompt.json; +// this.sectionOrderMap[pageName].push(sectionName); +// const prompt = await this.generatePromptFromSection(sectionName, sectionDescription as string); +// sectionPrompts[sectionName] = prompt.json; - // โœ… Store section-wise CSS externally - if (!this.allPageCss[pageName]) { - this.allPageCss[pageName] = {}; - } - this.allPageCss[pageName][sectionName] = prompt.css; +// // โœ… Store section-wise CSS externally +// if (!this.allPageCss[pageName]) { +// this.allPageCss[pageName] = {}; +// } +// this.allPageCss[pageName][sectionName] = prompt.css; - // store for unique css +// // store for unique css - const templateKey = sectionName.toLowerCase().replace(/section$/, '').trim(); +// const templateKey = sectionName.toLowerCase().replace(/section$/, '').trim(); - if (!this.processedCssSections.includes(templateKey)) { - this.processedCssSections.push(templateKey); - this.finalCssBundle += prompt.css + '\n'; - } - } +// if (!this.processedCssSections.includes(templateKey)) { +// this.processedCssSections.push(templateKey); +// this.finalCssBundle += prompt.css + '\n'; +// } +// } - this.allPagePrompts[pageName] = sectionPrompts; - this.initialGeneratedPrompts[pageName] = { ...sectionPrompts }; -} +// this.allPagePrompts[pageName] = sectionPrompts; +// this.initialGeneratedPrompts[pageName] = { ...sectionPrompts }; +// } /* Step 5: Generate HTML for missing pages only */ -private async generateHtmlForMissingPages() { - if (this.newlyGeneratedPages.length === 0) { - console.log('โœ… No new pages to generate'); - return; - } +// private async generateHtmlForMissingPages() { +// if (this.newlyGeneratedPages.length === 0) { +// console.log('โœ… No new pages to generate'); +// return; +// } - const htmlGenerationTasks: Promise[] = []; +// const htmlGenerationTasks: Promise[] = []; - for (const pageName of this.newlyGeneratedPages) { - const sectionMap = this.allPagePrompts[pageName]; - if (sectionMap) { - htmlGenerationTasks.push(this.processPageSections(pageName, sectionMap)); - } - } +// for (const pageName of this.newlyGeneratedPages) { +// const sectionMap = this.allPagePrompts[pageName]; +// if (sectionMap) { +// htmlGenerationTasks.push(this.processPageSections(pageName, sectionMap)); +// } +// } - await Promise.all(htmlGenerationTasks); - console.log(`โœ… Generated HTML for ${this.newlyGeneratedPages.length} new pages`); -} +// await Promise.all(htmlGenerationTasks); +// console.log(`โœ… Generated HTML for ${this.newlyGeneratedPages.length} new pages`); +// } /** @@ -1688,86 +1688,7 @@ HTML Only. No CSS. โœ… Use placeholders for image/icon blocks where appropriate (e.g.,
)`; - // Generate prompt from section - async generatePromptFromSection( - sectionName: string, - sectionDescription: string, - headerId: number = 35, - operationType: string = 'template 1' - ): Promise { - return new Promise((resolve) => { - const fieldType = sectionName.toLowerCase().replace(/section$/i, '').trim(); - - // this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({ - this.siteTreeService.getDesignLibrary( operationType, fieldType).subscribe({ - - next: async (res) => { - try { - // const jsonBlock = res?.javacode; - const jsonBlock = res?.htmljson; - const sectionCss = res?.css || ''; - - // if (!jsonBlock) return resolve('{}'); - if (!jsonBlock) return resolve({ json: '{}', css: '' }); - - - console.log(' base json is ...',jsonBlock); - const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock; - const baseJsonString = JSON.stringify(baseJson, null, 2); - - - const enhancedPrompt = ` - ${baseJsonString} - - You are building a website with the following context: - ${this.initialPrompt} - - 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","keywords"\` 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 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: - Return raw JSON only โ€” nothing else. - `; - - const hash = sha256(enhancedPrompt).toString(); - - if (this.promptHashCache[hash]) { - // return resolve(this.promptHashCache[hash]); - return resolve({ json: this.promptHashCache[hash], css: sectionCss }); - - } - - const enhanced = await this.callAi(enhancedPrompt); - - console.log('enhanced prmpt ',enhanced); - this.promptHashCache[hash] = enhanced; - - // resolve(baseJsonString); - // resolve(this.promptHashCache[hash]); - resolve({ json: this.promptHashCache[hash], css: sectionCss }); - } catch (err) { - console.error('โŒ JSON parse error:', err); - // resolve('{}'); - resolve({ json: '{}', css: '' }); - - } - }, - error: () => resolve({ json: '{}', css: '' }) - - // error: () => resolve('{}') - }); - }); - } + private getCombinedSectionCss(pageName: string): string { const sectionCssMap = this.allPageCss[pageName] || {}; @@ -1775,55 +1696,58 @@ HTML Only. No CSS. } // Process all pages live update - async processAllPagesLiveUpdate() { - const htmlGenerationTasks: Promise[] = []; + // async processAllPagesLiveUpdate() { + // const htmlGenerationTasks: Promise[] = []; - // for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) { - // htmlGenerationTasks.push(this.processPageSections(pageName, sectionMap)); - // } - 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)); - } + // // for (const [pageName, sectionMap] of Object.entries(this.allPagePrompts)) { + // // htmlGenerationTasks.push(this.processPageSections(pageName, sectionMap)); + // // } + // 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)); + // } - await Promise.all(htmlGenerationTasks); + // await Promise.all(htmlGenerationTasks); - // โœ… Now save the newly generated pages only - const fileMap: Record = {}; - const formattedSiteName = this.formatSiteName(this.sitename); + // // โœ… Now save the newly generated pages only + // const fileMap: Record = {}; + // const formattedSiteName = this.formatSiteName(this.sitename); - for (const pageName of this.missingHtmlPages) { - const html = this.pageSections[pageName]?.FullPage?.toString() || ''; - if (html) { - const sanitizedPageName = this.sanitizeFilename(pageName); - fileMap[sanitizedPageName] = html; - } - } + // for (const pageName of this.missingHtmlPages) { + // const html = this.pageSections[pageName]?.FullPage?.toString() || ''; + // if (html) { + // const sanitizedPageName = this.sanitizeFilename(pageName); + // fileMap[sanitizedPageName] = html; + // } + // } - if (Object.keys(fileMap).length > 0) { - this.siteTreeService.createHtmlfile(this.siteId, formattedSiteName, fileMap).subscribe({ - next: (res) => { - this.toastr.success(`Saved ${Object.keys(fileMap).length} new HTML files`); + // if (Object.keys(fileMap).length > 0) { + // this.siteTreeService.createHtmlfile(this.siteId, formattedSiteName, fileMap).subscribe({ + // next: (res) => { + // this.toastr.success(`Saved ${Object.keys(fileMap).length} new HTML files`); - this.hideLoading(); - }, - error: (err) => { - this.toastr.error('Failed to save HTML files'); - console.error('โŒ Error saving html:', err); + // this.hideLoading(); + // }, + // error: (err) => { + // this.toastr.error('Failed to save HTML files'); + // console.error('โŒ Error saving html:', err); - this.hideLoading(); - } + // this.hideLoading(); + // } - }); - } + // }); + // } - } + // } + + + nextPage(): void { if (this.currentPageIndex < this.pageRenderOrder.length - 1) { this.currentPageIndex++; @@ -1840,58 +1764,58 @@ previousPage(): void { // Process page sections - async processPageSections(pageName: string, sectionMap: Record) { + // async processPageSections(pageName: string, sectionMap: Record) { - if (!sectionMap || typeof sectionMap !== 'object') { - console.warn(`โš ๏ธ Skipping ${pageName} because sectionMap is invalid:`, sectionMap); - return; - } - const sectionHtmls: string[] = []; - this.sectionHtmls[pageName] = {}; + // if (!sectionMap || typeof sectionMap !== 'object') { + // console.warn(`โš ๏ธ Skipping ${pageName} because sectionMap is invalid:`, sectionMap); + // return; + // } + // const sectionHtmls: string[] = []; + // this.sectionHtmls[pageName] = {}; - const htmlTasks = Object.entries(sectionMap).map(async ([sectionName, jsonPrompt]) => { - const html = await this.generateJson({ sectionType: sectionName, jsonStructure: jsonPrompt }); - sectionHtmls.push(html); + // const htmlTasks = Object.entries(sectionMap).map(async ([sectionName, jsonPrompt]) => { + // const html = await this.generateJson({ sectionType: sectionName, jsonStructure: jsonPrompt }); + // sectionHtmls.push(html); - // Store individual section HTML - // this.sectionHtmls[pageName][sectionName] = this.sanitizer.bypassSecurityTrustHtml(html); - this.sectionHtmls[pageName][sectionName] = html - console.log("Processing Html in process page "+sectionHtmls) - }); + // // Store individual section HTML + // // this.sectionHtmls[pageName][sectionName] = this.sanitizer.bypassSecurityTrustHtml(html); + // this.sectionHtmls[pageName][sectionName] = html + // console.log("Processing Html in process page "+sectionHtmls) + // }); - await Promise.all(htmlTasks); + // await Promise.all(htmlTasks); - // Make sure the CSS is injected properly with !important flags - const finalHtml = ` - - - - - - ${pageName} - - - + // + // + // - ${sectionHtmls.join('\n')} + // ${sectionHtmls.join('\n')} - - `; + // + // `; - const safeHtml = finalHtml; - this.pageSections[pageName] = { FullPage: safeHtml }; - } + // const safeHtml = finalHtml; + // this.pageSections[pageName] = { FullPage: safeHtml }; + // } // Add these methods to your WireframeRendererComponent class @@ -2085,19 +2009,7 @@ async generateJson(data: { jsonStructure: any, sectionType: string }): Promise = {}; - // for (const sectionKey of orderedSectionKeys) { - // if (this.sectionHtmls[pageName][sectionKey]) { - // reorderedSectionHtmls[sectionKey] = this.sectionHtmls[pageName][sectionKey]; - // } - // } - // this.sectionHtmls[pageName] = reorderedSectionHtmls; - - // // Now update the full page HTML with correct order - // this.updateFullPageHtml(pageName); + const fullHtml = this.pageSections[pageName].FullPage.toString(); const blob = new Blob([fullHtml], { type: 'text/html' }); @@ -2315,9 +2227,9 @@ async recreateWireframe() { this.pageSections[pageName] = { FullPage: safeHtml }; // Ensure CSS is applied to DOM elements - setTimeout(() => { - this.verifyCssInSections(); - }, 100); + // setTimeout(() => { + // this.verifyCssInSections(); + // }, 100); this.toastr.success(`Regenerated ${updatedSections.length} sections for ${pageName}`); } @@ -2847,35 +2759,35 @@ getAllSectionLists(): HTMLElement[] { } // Import project from JSON file - importProject(): void { - const input = document.createElement('input'); - input.type = 'file'; - input.accept = '.json,application/json'; - input.onchange = async (event: any) => { - const file = event.target.files[0]; - if (!file) return; - const reader = new FileReader(); - reader.onload = async (e: any) => { - try { - const data = JSON.parse(e.target.result); - this.sitename = data.sitename || ''; - this.jsonInput = data.jsonInput || ''; - this.allPagePrompts = data.allPagePrompts || {}; - this.sectionHtmls = data.sectionHtmls || {}; - this.pageSections = data.pageSections || {}; - this.sectionOrderMap = data.sectionOrderMap || {}; - this.pageRenderOrder = data.pageRenderOrder || []; - this.toastr.success('Project imported successfully'); - // Optionally, re-render or trigger change detection - await this.processAllPagesLiveUpdate(); - } catch (err) { - this.toastr.error('Failed to import project: Invalid JSON'); - } - }; - reader.readAsText(file); - }; - input.click(); - } + // importProject(): void { + // const input = document.createElement('input'); + // input.type = 'file'; + // input.accept = '.json,application/json'; + // input.onchange = async (event: any) => { + // const file = event.target.files[0]; + // if (!file) return; + // const reader = new FileReader(); + // reader.onload = async (e: any) => { + // try { + // const data = JSON.parse(e.target.result); + // this.sitename = data.sitename || ''; + // this.jsonInput = data.jsonInput || ''; + // this.allPagePrompts = data.allPagePrompts || {}; + // this.sectionHtmls = data.sectionHtmls || {}; + // this.pageSections = data.pageSections || {}; + // this.sectionOrderMap = data.sectionOrderMap || {}; + // this.pageRenderOrder = data.pageRenderOrder || []; + // this.toastr.success('Project imported successfully'); + // // Optionally, re-render or trigger change detection + // await this.processAllPagesLiveUpdate(); + // } catch (err) { + // this.toastr.error('Failed to import project: Invalid JSON'); + // } + // }; + // reader.readAsText(file); + // }; + // input.click(); + // } // Toggle preview mode (simple implementation) previewMode(): void { @@ -3572,6 +3484,7 @@ calculateSectionHtmlsForExistingPage(pageName: string, htmlContent: string): voi } +// Original Step 2 async generateMissingPagesWithAI(missingPages: string[], jsonInput: string): Promise { if (!missingPages.length) { this.toastr.info('No missing pages to generate'); @@ -3623,9 +3536,9 @@ async generateMissingPagesWithAI(missingPages: string[], jsonInput: string): Pro - for (const [sectionName, sectionDescription] of sectionEntries) { + for (const [sectionName, sectionData] of sectionEntries) { // Generate prompt for section, passing the full jsonInput as context - const prompt = await this.generatePromptFromSection(sectionName, sectionDescription as string); + const prompt = await this.generatePromptFromSection(sectionName, sectionData); this.allPagePrompts[pageName][sectionName] = prompt.json; // โœ… Store section-wise CSS externally @@ -3712,7 +3625,178 @@ async generateMissingPagesWithAI(missingPages: string[], jsonInput: string): Pro // this.toastr.success('Generated all missing pages with AI.'); this.cdr.detectChanges(); } - + +// Original step 2.1 + // Generate prompt from section + + + + async generatePromptFromSection( + sectionName: string, + sectionData: any, + headerId: number = 35, + operationType: string = 'template 1' + ): Promise { + return new Promise((resolve) => { + const fieldType = sectionName.toLowerCase().replace(/section$/i, '').trim(); + + if (Array.isArray(sectionData)) { + try { + sectionData = JSON.parse(sectionData.join('')); + } catch (err) { + console.warn('โŒ Failed to parse sectionData from array:', sectionData); + sectionData = {}; + } + } + console.log(' section data ', sectionData) + console.log(' tag is ', sectionData?.tag) + // this.siteTreeService.getDlf(headerId, operationType, fieldType).subscribe({ + this.siteTreeService.getDesignLibrary( operationType, fieldType).subscribe({ + + next: async (res) => { + try { + // const jsonBlock = res?.javacode; + const jsonBlock = res?.htmljson; + const sectionCss = res?.css || ''; + + + if (!jsonBlock) { + console.warn(`โš ๏ธ No JSON found for ${sectionName}. Falling back to tag...`); + const fallback = await this.getDesignFromTag(sectionData?.tag || fieldType, operationType); + return resolve(fallback); + } + + // if (!jsonBlock) return resolve('{}'); + if (!jsonBlock) + + return resolve({ json: '{}', css: '' }); + + + + console.log(' base json is ...',jsonBlock); + const baseJson = typeof jsonBlock === 'string' ? JSON.parse(jsonBlock) : jsonBlock; + const baseJsonString = JSON.stringify(baseJson, null, 2); + + + const enhancedPrompt = ` + ${baseJsonString} + + You are building a website with the following context: + ${this.initialPrompt} + + 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","keywords"\` 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 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: + Return raw JSON only โ€” nothing else. + `; + + const hash = sha256(enhancedPrompt).toString(); + + if (this.promptHashCache[hash]) { + // return resolve(this.promptHashCache[hash]); + return resolve({ json: this.promptHashCache[hash], css: sectionCss }); + + } + + const enhanced = await this.callAi(enhancedPrompt); + + console.log('enhanced prmpt ',enhanced); + this.promptHashCache[hash] = enhanced; + + // resolve(baseJsonString); + // resolve(this.promptHashCache[hash]); + resolve({ json: this.promptHashCache[hash], css: sectionCss }); + } catch (err) { + console.error(`โŒ JSON parse or enhancement failed for "${sectionName}":`, err); + // Fallback to tag if AI or parse fails + const fallbackTag = sectionData?.tag || fieldType; + const fallback = await this.getDesignFromTag(fallbackTag, operationType); + return resolve(fallback); + + } + }, + error: async () => { + console.warn(`โŒ Initial section fetch failed for "${sectionName}", trying fallback tag...`); + const fallbackTag = sectionData?.tag || fieldType; + const fallback = await this.getDesignFromTag(fallbackTag, operationType); + return resolve(fallback); + } + + // error: () => resolve('{}') + }); + }); + } + + + async getDesignFromTag(tag: string, operationType: string = 'template 1'): Promise<{ json: string, css: string }> { + return new Promise((resolve) => { + this.siteTreeService.getDesignLibraryByTag(operationType, tag).subscribe({ + next: async (res) => { + try { + const rawJson = res?.htmljson; + const css = res?.css || ''; + + if (!rawJson) return resolve({ json: '{}', css }); + + const baseJson = typeof rawJson === 'string' ? JSON.parse(rawJson) : rawJson; + const baseJsonString = JSON.stringify(baseJson, null, 2); + + const enhancedPrompt = ` + ${baseJsonString} + + You are building a website with the following context: + ${this.initialPrompt} + + Your task is to write rich, engaging content for the "${tag}" section, which is represented by the above JSON structure. + + ๐Ÿ› ๏ธ Instructions: + - Replace only the \`"text","keywords"\` 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 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: + Return raw JSON only โ€” nothing else. + `; + + const hash = sha256(enhancedPrompt).toString(); + if (this.promptHashCache[hash]) { + return resolve({ json: this.promptHashCache[hash], css }); + } + + const enhanced = await this.callAi(enhancedPrompt); + this.promptHashCache[hash] = enhanced; + + return resolve({ json: enhanced, css }); + } catch (err) { + console.error('โŒ Error during enhancement:', err); + return resolve({ json: '{}', css: '' }); + } + }, + error: (err) => { + console.error(`โŒ Error fetching design by tag "${tag}"`, err); + resolve({ json: '{}', css: '' }); + } + }); + }); +} + toggleViewMode(): void { // Toggle between grid and single-page view @@ -3785,6 +3869,49 @@ openCssEditor(page: string, section: string): void { this.selectedSection = { page, section }; this.classCssMap = cssMap; this.showCssEditorModal = true; + + +// ๐Ÿ” Try to auto-extract keyword from section JSON + try { + const sectionJsonStr = this.allPagePrompts?.[page]?.[section]; + if (sectionJsonStr) { + const parsedJson = JSON.parse(sectionJsonStr); + + // ๐Ÿ” Traverse JSON to find first image with keywords + const keyword = this.findImageKeyword(parsedJson); + if (keyword) { + this.imageSearchQuery = keyword; + this.imageSearchPage = 1; + this.fetchImageResults(keyword, 1); + } +} + + } catch (error) { + console.warn('Could not parse section JSON for image keyword:', error); + this.imageSearchResults = []; + } +} +findImageKeyword(obj: any): string | null { + if (!obj || typeof obj !== 'object') return null; + + if (obj.element === 'img' && obj.keywords) { + return obj.keywords; + } + + if (Array.isArray(obj.children)) { + for (const child of obj.children) { + const result = this.findImageKeyword(child); + if (result) return result; + } + } + + const keys = Object.keys(obj); + for (const key of keys) { + const result = this.findImageKeyword(obj[key]); + if (result) return result; + } + + return null; } @@ -3839,6 +3966,89 @@ addCssProp(className: string): void { removeCssProp(className: string, prop: string): void { delete this.classCssMap[className][prop]; } + + +// Search photos + +imageSearchModal: boolean = false; +imageSearchResults: string[] = []; +imageSearchQuery: string = ''; +imageSearchPage = 1; +imageTargetElement: HTMLImageElement | null = null; + +onImageClick(event: Event, sectionKey: string) { + const target = event.target as HTMLImageElement; + if (!target || target.tagName !== 'IMG') return; + + this.imageTargetElement = target; + + // Extract keyword + const keyword = target.alt || target.className || sectionKey || 'design'; + + this.imageSearchQuery = keyword; + this.imageSearchPage = 1; + this.fetchImageResults(keyword, 1); +} +fetchImageResults(query: string, page: number) { + this.siteTreeService.searchPhoto(query,page).subscribe( + urls => { + this.imageSearchResults = urls; + this.imageSearchModal = true; + console.log('Fetched images:', this.imageSearchResults); + + }, + + + err => { + this.toastr.error("Image search failed"); + } + ); +} + + + + +replaceImageInSection(newUrl: string): void { + const { page, section } = this.selectedSection || {}; + if (!page || !section) return; + +const safeHtml = this.sectionHtmls[page]?.[section]; + let html = safeHtml?.toString() || ''; // โœ… Convert SafeHtml to string + + + // โœ… Replace the first src in the HTML with the new URL + html = html.replace(/]*?)src="[^"]*"([^>]*?)>/, (match, p1, p2) => { + return ``; + }); + + // โœ… Update section HTML + this.sectionHtmls[page][section] = html; + + console.log(' page css ',html ) + + // โœ… Regenerate full page HTML + this.updateFullPageHtml(page); + + // โœ… Optional: close image suggestion slider (if shown separately) + this.imageSearchResults = []; + + // โœ… Notify user + this.toastr.success("โœ… Image replaced successfully! "); +} + +nextImagePage() { + this.imageSearchPage++; + this.fetchImageResults(this.imageSearchQuery, this.imageSearchPage); +} + +prevImagePage() { + if (this.imageSearchPage > 1) { + this.imageSearchPage--; + this.fetchImageResults(this.imageSearchQuery, this.imageSearchPage); + } +} + + } @@ -3847,6 +4057,7 @@ removeCssProp(className: string, prop: string): void { + // const enhancedPrompt = ` // ๐ŸŽฏ Enhance the content of this section using the following context. diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html index 2e31e84..58c747f 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.html @@ -71,7 +71,9 @@
-
diff --git a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts index c5003be..9278396 100644 --- a/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts +++ b/visaproject-front-f/authsec_angular/frontend/angular-clarity-master/src/app/modules/main/fnd/SiteTreeBuilder/tree-visualizer.component.ts @@ -5,6 +5,7 @@ import { ActivatedRoute } from '@angular/router'; import { ViewChild } from '@angular/core'; import { trigger, transition, style, animate, state } from '@angular/animations'; +import { Tagservice } from './Tag/Tag.service'; // Make sure path is correct @Component({ @@ -130,6 +131,7 @@ export class TreeVisualizerComponent { constructor(private treeService: treeVisualizerService, private siteTreeService: SiteTreeservice, + private tagService: Tagservice, private route: ActivatedRoute, @@ -141,9 +143,50 @@ export class TreeVisualizerComponent { console.log(' id is : ', this.id) + this.getTagData(); this.fetchTreeById(this.id); + } + onTabChange(tab: 'sitemap' | 'wireframe') { + this.activeTab = tab; + + if (tab === 'sitemap') { + console.log('๐Ÿ” Reloading sitemap tree...'); + this.fetchTreeById(this.id); // or convertJson(), based on your rendering logic + } + } + + + tagData; + tagNames: string[] = []; + getTagData() { + this.tagService.getAll().subscribe((data) => { + console.log('tag data', data); + + if (Array.isArray(data)) { + this.tagData = data; + + // Null checks for data and name + this.tagNames = data + .filter(tag => tag && tag.name) // tag object aur name dono honi chahiye + .map(tag => tag.name); + + console.log('Extracted tag names:', this.tagNames); + + } else { + this.tagData = []; + this.tagNames = []; + console.warn('Tag data is not an array.'); + } + }, (error) => { + console.log('Error fetching tag data', error); + this.tagData = []; + this.tagNames = []; + }); + } + + // Add these properties to your component class isLoading = false; @@ -169,7 +212,18 @@ export class TreeVisualizerComponent { - Each page MUST contain at least 6 meaningful UI sections (including "Navbar" and "Footer"). These sections should be clearly named and described (e.g., "Header Section", "Hero Section", "Testimonial Section", etc.). You are NOT allowed to include fewer than 6 sections on any page. - A "Navbar" and a "Footer" section (always included on every page) - A short, clear description for each section (to support frontend development) - + - Each section MUST also include a \`"tag"\` key. This tag should be selected from the following allowed tag list: ++ ++ [${this.tagNames.join(", ")}] ++ ++ Example: ++ "Hero Section": { ++ "description": "A bold landing area with a headline, subtext, and call-to-action button.", ++ "tag": "header" ++ } ++ ++ You MUST select the most relevant tag from the above list for every section. ++ If a suitable tag is not found, choose the closest logical match. ๐Ÿ“˜ Website Context: ${this.rawInputText} @@ -289,6 +343,9 @@ export class TreeVisualizerComponent { this.handleGenerationError('Failed to generate site structure'); } }); + + this.fetchTreeById(this.id); + } // Helper method to check if all calls are complete