omair/justvitamin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: show only AI-generated images in PDP gallery, not originals

Browse Source 
- Gallery now shows only the 5 AI-generated product photos
- Each thumb shows model name (Nano Banana / Pro) + caption
- Caption overlay on main image describes the shot type
- Removed original scraped images from gallery display
This commit is contained in:
Omair Saleh
2026-03-02 20:56:26 +08:00
parent 7e58ab1970
commit 88fb443f63
2 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

34
static/js/app.js
View File

@@ -252,42 +252,39 @@ function renderPDP(product, pack, imgs) {
function buildGallery(product, imgs) {
const items = [];
// Original product images first
(product.images || []).forEach((src, i) => {
items.push({src: src, label: i === 0 ? 'Original — Main' : `Original — ${i+1}`, isOriginal: true});
});
// AI-generated images
// AI-generated images only
if (imgs) {
const aiSlots = [
{key:'hero', label:'AI — Clean Studio'},
{key:'lifestyle', label:'AI — Lifestyle'},
{key:'scale', label:'AI — Scale'},
{key:'ingredients', label:'AI — Detail'},
{key:'banner', label:'AI — Banner', wide: true},
{key:'hero', label:'Clean Studio Shot', caption:'Studio lighting, white background'},
{key:'lifestyle', label:'Lifestyle Shot', caption:'Morning kitchen scene'},
{key:'scale', label:'Scale Reference', caption:'Real-world size context'},
{key:'ingredients', label:'Detail Close-up', caption:'Ingredients & quality'},
{key:'banner', label:'Hero Banner', caption:'Wide format for landing pages', wide: true},
];
aiSlots.forEach(slot => {
const d = imgs[slot.key];
if (d && d.filename) {
items.push({src: `/generated/${d.filename}`, label: slot.label,
caption: d.caption || '', model: d.model || '', wide: slot.wide});
caption: d.caption || slot.caption, model: d.model || '', wide: slot.wide});
}
});
}
if (!items.length) return '<div class="pdp-gallery-empty">No images available</div>';
if (!items.length) return '<div class="pdp-gallery-empty">Generating product images...</div>';
const mainImg = items[0];
const thumbs = items.map((item, i) =>
`<div class="pdp-thumb ${i===0?'active':''} ${item.wide?'wide':''}" onclick="switchGallery(${i}, this)" data-src="${esc(item.src)}">
`<div class="pdp-thumb ${i===0?'active':''} ${item.wide?'wide':''}" onclick="switchGallery(${i}, this)" data-src="${esc(item.src)}" data-caption="${esc(item.caption)}" data-model="${esc(item.model)}">
<img src="${esc(item.src)}" alt="${esc(item.label)}" loading="lazy">
<span class="pdp-thumb-label ${item.isOriginal?'orig':'ai'}">${esc(item.label)}</span>
<span class="pdp-thumb-label ai">${esc(item.label)}</span>
</div>`
).join('');
return `
<div class="pdp-gallery-main" id="pdpGalleryMain">
<img src="${esc(mainImg.src)}" alt="${esc(mainImg.label)}" id="pdpMainImg">
<span class="pdp-gallery-badge">${mainImg.isOriginal ? '📷 Original' : '🤖 AI Generated'}</span>
<span class="pdp-gallery-badge">🤖 AI Generated — ${esc(mainImg.model)}</span>
<span class="pdp-gallery-caption" id="pdpCaption">${esc(mainImg.caption)}</span>
</div>
<div class="pdp-thumbs">${thumbs}</div>
`;
@@ -300,10 +297,9 @@ window.switchGallery = function(idx, el) {
document.querySelectorAll('.pdp-thumb').forEach(t => t.classList.remove('active'));
el.classList.add('active');
const badge = $('.pdp-gallery-badge');
if (badge) {
const label = el.querySelector('.pdp-thumb-label');
badge.textContent = label?.classList.contains('orig') ? '📷 Original' : '🤖 AI Generated';
}
if (badge) badge.textContent = `🤖 AI Generated — ${el.dataset.model || ''}`;
const caption = $('#pdpCaption');
if (caption) caption.textContent = el.dataset.caption || '';
};