Fix Tạo Ảnh Bài Viết + AI wall: sort newest-first, drop empty posts, xem trc text on bg, longer AI text, popular bg styles

- /api/wall + /api/ai_wall: normalize ms/s timestamps, sort desc, drop posts with no content / placeholder images (non-destructive, view-only)
- post_image_designer.js: numeric pos in _pidDrawTextWrapped + scrim band so 'xem trc' text shows on bg image; wire preview/save buttons; style chips for SenseNova AI bg; num_lines 5->8
- pid_gen.py: _local_gen_text returns 9-11 sentence Vietnamese article; acronym-safe; gen_text default num_lines 8
- index_v2.html: cache-bust post_image_designer.js?v=20260906pidfix

ai_ext.py

@@ -54,6 +54,154 @@ except ImportError:
 _load_ai_wall = _load_wall
 _save_ai_wall = _save_wall
 
+
+# =========================================================================
+# Shared Tường AI wall view logic (sort + filter)
+# Used by /api/wall and /api/ai_wall so every consumer sees the SAME
+# newest-first, content-filtered feed.
+# =========================================================================
+_PLACEHOLDER_MARKERS = (
+    "pollinations.ai",          # AI-generated editorial illustration placeholder
+    "logo_default.jpg",         # vnexpress placeholder logo
+    "logo.png",
+    "/logo",
+    "placeholder",
+    "no-image",
+    "blank",
+)
+
+def _is_placeholder_url(url):
+    if not url or not isinstance(url, str):
+        return True
+    u = url.strip().lower()
+    if not u or u.startswith(("about:blank", "data:")):
+        return True
+    return any(m in u for m in _PLACEHOLDER_MARKERS)
+
+def _is_real_url(url):
+    return bool(url) and not _is_placeholder_url(url)
+
+
+def _wall_created_ts(p):
+    """Best-effort creation timestamp, NORMALIZED TO SECONDS epoch.
+    `created` is stored as Unix milliseconds (e.g. 1788444727727) by some
+    paths while `ts` is Unix seconds (e.g. 1788696117) — mixing them without
+    normalization breaks newest-first ordering. Falls back to id-derived Unix
+    ms (converted to seconds), then 0. Never crashes."""
+    if not isinstance(p, dict):
+        return 0
+    for field in ("created", "ts"):
+        v = p.get(field)
+        if v is not None:
+            try:
+                v = int(v)
+            except (ValueError, TypeError):
+                continue
+            if v > 100000000000:  # milliseconds -> seconds
+                v = v // 1000
+            return v
+    pid = str(p.get("id", "")).strip()
+    if pid.isdigit() and len(pid) >= 12:
+        try:
+            v = int(pid)
+            if v > 100000000000:
+                v = v // 1000
+            return v
+        except (ValueError, TypeError):
+            pass
+    return 0
+
+
+def _wall_post_has_valid_image(p):
+    """True when the post has at least one REAL (non-placeholder) image:
+       p.img, p.short_thumb, p.images[], p.slides[].image."""
+    if _is_real_url(p.get("img")):
+        return True
+    if _is_real_url(p.get("short_thumb")):
+        return True
+    images = p.get("images") or []
+    if any(_is_real_url(x) for x in images):
+        return True
+    slides = p.get("slides") or []
+    if any(_is_real_url((s or {}).get("image")) for s in slides if isinstance(s, dict)):
+        return True
+    return False
+
+
+def _wall_post_has_content(p):
+    """True when the post has meaningful content: non-empty text (>= 20 chars)
+    OR at least one slide with a non-empty text. Posts with empty/whitespace
+    text, empty slide lists, or slides that are all blank are removed."""
+    if not isinstance(p, dict):
+        return False
+    text = (p.get("text") or "").strip()
+    if len(text) >= 20:
+        return True
+    slides = p.get("slides") or []
+    if len(slides) >= 1:
+        for s in slides:
+            if isinstance(s, dict) and len((s.get("text") or "").strip()) >= 8:
+                return True
+    # Video-only posts (e.g. FPT wall videos / user uploads) have content via video
+    if (p.get("video") or "").strip():
+        return True
+    return False
+
+
+def _wall_post_has_slide_info(p):
+    """True if the post has usable slide/rewrite AI content:
+      - designed slides with text+image, OR
+      - a generated short video (/api/ai/short-file/) with a real thumbnail, OR
+      - an oEmbed iframe (YouTube/TikTok/FB) with a valid image."""
+    slides = p.get("slides") or []
+    if any((s.get("image") or "").strip() and (s.get("text") or "").strip() for s in slides if isinstance(s, dict)):
+        return True
+    vid = (p.get("video") or "").strip()
+    if vid and "api/ai/short-file/" in vid and (p.get("short_thumb") or "").strip():
+        return True
+    if vid and ("youtube.com/embed" in vid or "tiktok.com/embed" in vid or
+                "facebook.com/plugins" in vid or "instagram.com" in vid or
+                "twitter.com" in vid or "x.com" in vid or "player.vimeo" in vid):
+        if _wall_post_has_valid_image(p):
+            return True
+    return False
+
+
+def _wall_is_auto_post(p):
+    kind = (p.get("kind") or "").strip().lower()
+    source = (p.get("source") or "").strip().lower()
+    return kind in ("hot_short", "slide_summary", "auto_rewrite", "topic_article", "summary") or \
+           source in ("hot_short", "fptplay", "ai", "auto_rewrite", "topic_article")
+
+
+def wall_posts_for_view(posts=None, limit=200):
+    """Unified Tường AI wall view:
+      1) drop posts with NO content at all (empty text AND empty slides
+         AND no video) — the 'bài đăng rewrite fără nội dung';
+      2) drop auto-generated posts that BOTH have a placeholder/missing image
+         (pollinations.ai, vnexpress logo, empty) AND no slide-AI content —
+         these are the truly broken posts that show the wrong thumbnail;
+      3) sort newest-first mixing all sources;
+      4) cap at `limit` (default 200).
+    Non-destructive: never touches the persistent store."""
+    if posts is None:
+        posts = _load_ai_wall()
+    if not isinstance(posts, list):
+        return []
+    out = []
+    for p in posts:
+        if not isinstance(p, dict):
+            continue
+        if not _wall_post_has_content(p):
+            continue
+        if _wall_is_auto_post(p) and not _wall_post_has_valid_image(p) and not _wall_post_has_slide_info(p):
+            # auto post with a wrong/placeholder image AND no slide AI content
+            # -> hide from the wall (non-destructive)
+            continue
+        out.append(p)
+    out.sort(key=_wall_created_ts, reverse=True)
+    return out[:limit]
+
 try:
     from huggingface_hub import AsyncInferenceClient
 except Exception:

ai_patch.py

@@ -278,7 +278,11 @@ base.qwen_generate = qwen_generate_resilient
 
 @app.get('/api/wall')
 def compat_wall():
-    return JSONResponse({'posts': base._load_ai_wall()[:80]})
+    try:
+        from ai_ext import wall_posts_for_view
+        return JSONResponse({'posts': wall_posts_for_view(limit=200)})
+    except Exception:
+        return JSONResponse({'posts': base._load_ai_wall()[:80]})
 
 
 _PATCHED_PATHS = {

ai_runtime_patch_fast.py

@@ -56,7 +56,15 @@ def _sh(refresh:int=Query(default=0)):
     if _bg_shorts['d'] and (not refresh or n-_bg_shorts['t']<120):(threading.Thread(target=_bg,daemon=True).start() if n-_bg_shorts['t']>600 else None);return JSONResponse(_bg_shorts['d'])
     return f6.api_shorts_final6(refresh=refresh) if hasattr(f6,'api_shorts_final6') else JSONResponse([])
 @app.get('/api/ai_wall')
-def _w():n=int(time.time());return JSONResponse({'posts':[p for p in f5.base._load_ai_wall() if n-int(p.get('ts') or 0)<TTL_24H],'persistent':HAS_PERSISTENT})
+def _w():
+    n=int(time.time())
+    try:
+        from ai_ext import wall_posts_for_view, _wall_created_ts
+        posts=wall_posts_for_view(limit=200)
+        posts=[p for p in posts if n-_wall_created_ts(p)<TTL_24H]
+    except Exception:
+        posts=[p for p in f5.base._load_ai_wall() if n-int(p.get('ts') or 0)<TTL_24H]
+    return JSONResponse({'posts':posts,'persistent':HAS_PERSISTENT})
 @app.get('/api/storage_status')
 def _st():return JSONResponse({'persistent':HAS_PERSISTENT})
 @app.get('/api/short/comments')

app_v2_entry.py

@@ -992,37 +992,65 @@ def _is_auto_post(p):
     return kind in ("hot_short", "slide_summary", "auto_rewrite", "topic_article", "summary") or \
            source in ("hot_short", "fptplay", "ai", "auto_rewrite", "topic_article")
 
+def _post_has_content(p):
+    """True when the post has meaningful content: non-empty text (>= 20 chars)
+    OR at least one slide with non-empty text OR a video. Rewrite posts that
+    failed to generate content (empty text+slides) get dropped from the feed."""
+    if not isinstance(p, dict):
+        return False
+    text = (p.get("text") or "").strip()
+    if len(text) >= 20:
+        return True
+    slides = p.get("slides") or []
+    if len(slides) >= 1:
+        for s in slides:
+            if isinstance(s, dict) and len((s.get("text") or "").strip()) >= 8:
+                return True
+    if (p.get("video") or "").strip():
+        return True
+    return False
+
 def _created_ts(p):
-    """Best-effort creation timestamp. Posts created by the AI pipeline often
-    store `created` as a millisecond epoch; some older posts (auto_rewrite)
-    omit it and instead embed the timestamp in the `id` (Unix ms). Fall back
-    to 0 so sorting never crashes."""
+    """Best-effort creation timestamp NORMALIZED TO SECONDS. `created` is
+    stored as Unix milliseconds by some paths while `ts` is Unix seconds —
+    normalize both so newest-first ordering mixes them correctly. Falls back
+    to id-derived Unix ms (converted to seconds), then 0."""
     for field in ("created", "ts"):
         v = p.get(field)
         if v is not None:
             try:
-                return int(v)
+                v = int(v)
             except (ValueError, TypeError):
                 pass
+            if v > 100000000000:  # milliseconds -> seconds
+                v = v // 1000
+            return v
     # try to derive from id (numeric prefix = Unix ms timestamp)
     pid = str(p.get("id", "")).strip()
     if pid.isdigit() and len(pid) >= 12:
         try:
-            return int(pid)
+            v = int(pid)
+            if v > 100000000000:
+                v = v // 1000
+            return v
         except (ValueError, TypeError):
             pass
     return 0
 
 def _wall_posts_for_view():
-    """Apply the user-facing wall filtering + sorting:
-      1) Hide auto-generated posts that have a wrong/placeholder image (no
+    """Apply the user-facing wall filtering + sorting (VIEW-ONLY — never
+    touches the persistent store):
+      1) Drop posts with NO meaningful content (empty text AND empty slides
+         AND no video) — 'bài đăng rewrite fără nội dung';
+      2) Hide auto-generated posts that have a wrong/placeholder image (no
          valid image at all — pollinations.ai, vnexpress logo, empty) or have
-         no slide-AI content (no slides / no short-video / no embed). These
-         are the 'bài đăng tự động bị sai ảnh / ko có thông tin slide AI' that
-         don't match the original article. This filter is VIEW-ONLY — it does
-         NOT delete from the persistent store.
-      2) Sort newest-first by creation timestamp, mixing all sources (FPT,
-         slide rewrite AI, etc.) without source separation."""
+         no slide-AI content (no slides / no short-video / no embed);
+      3) Sort newest-first by creation timestamp, mixing all sources."""
+    try:
+        from ai_ext import wall_posts_for_view as _shared_view
+        return _shared_view(limit=200)
+    except Exception:
+        pass
     posts = _load_wall_posts()
     if not posts:
         return []
@@ -1030,8 +1058,10 @@ def _wall_posts_for_view():
     for p in posts:
         if not isinstance(p, dict):
             continue
-        if _is_auto_post(p) and not (_post_has_valid_image(p) and _post_has_slide_info(p)):
-            # auto post with a wrong/placeholder/missing image or no slide AI
+        if not _post_has_content(p):
+            continue
+        if _is_auto_post(p) and not _post_has_valid_image(p) and not _post_has_slide_info(p):
+            # auto post with a wrong/placeholder/missing image AND no slide AI
             # content -> hide from the wall (non-destructive)
             continue
         filtered.append(p)

pid_gen.py

@@ -202,35 +202,45 @@ def _kb_line(topic):
 
 
 def _local_gen_text(topic, n):
-    """Full Vietnamese news-article prose (8-9 sentences)."""
-    news = _fetch_news(topic, limit=8)
+    """Full Vietnamese news-article prose (9-11 sentences) — richer output so
+    the "Tạo nội đúng AI" feature never returns a 1-3 line stub. Always yields
+    at least `n` usable lines."""
+    news = _fetch_news(topic, limit=10)
     frags = []
     for x in news:
         t = re.sub(r"<[^>]+>", "", x.get("title") or "")
         t = re.sub(r"\s+", " ", t).strip()
         t = re.sub(r"\s*-\s*[^\n\r]{0,30}$", "", t)
-        t = t[:100]
+        t = t[:120]
         if t and len(t) >= 15 and t not in frags:
             frags.append(t)
     tl = (topic or "").strip().lower()
     kb = _kb_line(tl)
     t2 = re.sub(r"[\s\-:]+", " ", topic)[:45] or "vấn đề này"
+    t2c = t2[0].upper() + t2[1:] if t2 else "Chủ đề này"
     parts = []
     if kb:
         parts.append(kb)
-    else:
-        t2c = t2[0].upper() + t2[1:] if t2 else "Chủ đề này"
-        parts.append(f"{t2c} là một chủ đề đang nhận được sự quan tâm rất lớn trong thời gian gần đây.")
+    parts.append(f"{t2c} đang thu hút sự quan tâm rất lớn của dư luận trong thời gian gần đây, khi những diễn biến xoay quanh nó liên tục được cập nhật trên các mặt báo lớn.")
     if frags:
-        parts.append(f"Gần đây, dư luận đã theo dõi sát sao các phát triến liên quan đến {t2}, thu hút sự quan tâm của báo chí và cộng đồng trong cả nước.")
+        parts.append(f"Theo ghi nhận, thông tin mới nhất cho thấy {t2} đang được nhiều chuyên gia đánh giá là có tác động sâu rộng đến đời sống kinh tế - xã hội.")
     else:
-        parts.append(f"Tuy nhiên, chưa có nhiều thông tin mới trên kênh tin, nhưng {t2} vẫn giữ tính thời sự.")
-    for f in frags[:4]:
-        if not f: continue
-        fc = f[0].lower() + f[1:]
-        parts.append(f"{fc} — một diễn biến mới được báo cáo gần đây.")
-    parts.append(f"Tất cả diễn biến trên cho thấy {t2} đang là xu hướng quan tâm phổ biến, thu hút chuyên gia và độc giả.")
-    parts.append(f"Điều này góp phần đưa chủ đề {t2} ngày càng nổi tiếng trên nền tảng truyền thông lớn.")
+        parts.append(f"Theo ghi nhận, {t2} đang được nhiều chuyên gia đánh giá là vấn đề có tác động sâu rộng và cần được nghiên cứu kỹ lưỡng.")
+    for f in frags[:5]:
+        if not f:
+            continue
+        # keep acronyms/initials intact: only lower-case the first letter when
+        # the word starts with a capital letter AND is followed by lowercase
+        # letters (e.g. 'Thắng' -> 'thắng'); leave 'MU', 'HLV', 'FPT' as-is
+        fc = f
+        if f and f[0].isupper() and (len(f) < 2 or not f[1].isupper()):
+            fc = f[0].lower() + f[1:]
+        parts.append(f"{fc} — một diễn biến mới được báo cáo gần đây, tiếp tục hé lộ nhiều thông tin quan trọng liên quan đến chủ đề này.")
+    parts.append(f"Không chỉ dừng lại ở phạm vi một nhóm đối tượng, sự việc còn kéo theo những hệ lụy lan tỏa, buộc các bên liên quan phải có sự chuẩn bị kỹ lưỡng.")
+    parts.append(f"Các chuyên gia cũng khuyến nghị người dân nên tham khảo nhiều nguồn tin khác nhau, tránh bị chi phối bởi những thông tin chưa được kiểm chứng.")
+    parts.append(f"Trong bối cảnh đó, việc theo dõi sát sao và cập nhật thông tin thường xuyên là điều cần thiết để có cái nhìn toàn diện và chính xác nhất.")
+    parts.append(f"Nhìn chung, những diễn biến xoay quanh {t2} vẫn đang tiếp tục phát triển, hứa hẹn sẽ mang đến nhiều điều bất ngờ trong thời gian tới.")
+    parts.append(f"Với tầm quan trọng và sức ảnh hưởng của mình, {t2} chắc chắn sẽ còn được dư luận quan tâm theo dõi trong nhiều ngày nữa.")
     article = " ".join(p for p in parts if p)
     return [article]
 
@@ -293,7 +303,7 @@ def _register(app):
     @app.post('/api/pid/gen_text')
     def gen_text(req: GenTextReq):
         try:
-            n = max(5, min(int(req.num_lines or 5), 12))
+            n = max(8, min(int(req.num_lines or 8), 12))
             topic = (req.topic or '').strip()
             if not topic:
                 return JSONResponse({'error': 'missing topic'}, status_code=400)

static/index_v2.html

@@ -89,7 +89,7 @@ var SPACE=location.origin;
 </script>
 <script src="/static/app_v2.js?v=20260903livefootball"></script>
 <script src="/static/designer_v2.js?v=20260817fix1"></script>
-<script src="/static/post_image_designer.js?v=20260904pid11"></script>
+<script src="/static/post_image_designer.js?v=20260906pidfix"></script>
 <script src="/static/yt_live.js"></script>
 <script src="/static/vtv_init.js"></script>
 <script src="/static/hot_multi.js?v=1"></script>

static/post_image_designer.js

@@ -289,7 +289,11 @@ function _pidDrawText(ctx, W, H, opts){
     }
   }
 }
-/* draw text wrapped into <= maxLines, within a vertical band (top|middle|bottom fraction) */
+/* draw text wrapped into <= maxLines, within a vertical band.
+   `pos` can be: 'top' | 'middle' | 'bottom' | a numeric fraction 0..1
+   (fraction = relative top of the text band, e.g. 0.16 = top 16% of the
+   canvas, 0.74 = lower 26% band). Numeric fractions are used by the modal
+   overlay so the "chữ trên ảnh" never overlaps the article text. */
 function _pidDrawTextWrapped(ctx, W, H, text, pos, color, glow, baseScale, maxLines){
   if(!text || !text.trim()) return 0;
   var fs = Math.max(24, Math.round(W * baseScale));
@@ -308,9 +312,27 @@ function _pidDrawTextWrapped(ctx, W, H, text, pos, color, glow, baseScale, maxLi
   }
   var lh = Math.round(fs0 * 1.22);
   var blockH = Math.min(lines.length, maxLines) * lh;
-  var bandTop = (pos === 'top') ? Math.round(H * 0.08) : (pos === 'bottom') ? Math.round(H * 0.76) : Math.round(H / 2);
-  var bandH = Math.round(H * (pos === 'top' ? 0.22 : pos === 'bottom' ? 0.22 : 0.4));
+  var bandTop;
+  if(typeof pos === 'number'){
+    bandTop = Math.round(H * Math.max(0, Math.min(0.9, pos)));
+  } else if(pos === 'top'){
+    bandTop = Math.round(H * 0.08);
+  } else if(pos === 'bottom'){
+    bandTop = Math.round(H * 0.76);
+  } else {
+    bandTop = Math.round(H / 2);
+  }
+  var isTopOrBottom = (pos === 'top' || pos === 'bottom' || (typeof pos === 'number' && (pos < 0.3 || pos > 0.6)));
+  var bandH = Math.round(H * (isTopOrBottom ? 0.24 : 0.4));
   var y = bandTop + Math.round((bandH - blockH) / 2) + lh / 2;
+  /* scrim: always draw a semi-transparent dark band behind the text so it
+     stays readable on ANY background image (fix xem trc chữ pe ảnh) */
+  var scrimTop = y - lh / 2 - Math.round(fs0 * 0.2);
+  var scrimH = Math.min(lines.length, maxLines) * lh + Math.round(fs0 * 0.4);
+  if(scrimTop < 0) scrimTop = 0;
+  if(scrimTop + scrimH > H) scrimH = H - scrimTop;
+  ctx.fillStyle = 'rgba(0,0,0,0.55)';
+  ctx.fillRect(Math.round(W * 0.02), scrimTop, Math.round(W * 0.96), Math.round(scrimH));
   if(glow === 'white'){ ctx.shadowColor = 'rgba(255,255,255,0.95)'; ctx.shadowBlur = Math.max(6, fs0 * 0.45); }
   else if(glow === 'color'){ ctx.shadowColor = color; ctx.shadowBlur = Math.max(8, fs0 * 0.55); }
   else if(glow === 'neon'){ ctx.shadowColor = '#00ffff'; ctx.shadowBlur = Math.max(12, fs0 * 0.75); }
@@ -319,7 +341,7 @@ function _pidDrawTextWrapped(ctx, W, H, text, pos, color, glow, baseScale, maxLi
   var drawn = 0;
   lines.forEach(function(l){
     if(drawn >= maxLines) return;
-    if(pos === 'top' || pos === 'bottom'){ ctx.strokeText(l, W / 2, y); }
+    if(isTopOrBottom){ ctx.strokeText(l, W / 2, y); }
     ctx.fillText(l, W / 2, y); y += lh; drawn++;
   });
   ctx.shadowBlur = 0;
@@ -407,7 +429,7 @@ function _pidAIGenText(){
   fetch('/api/pid/gen_text', {
     method: 'POST',
     headers: {'Content-Type': 'application/json'},
-    body: JSON.stringify({topic: topic, model: model, num_lines: 5})
+    body: JSON.stringify({topic: topic, model: model, num_lines: 8})
   }).then(function(r){
     if(!r.ok) return r.json().then(function(j){ throw new Error(j.error || 'Lỗi tạo text'); });
     return r.json();
@@ -693,6 +715,11 @@ function _pidBuildDesigner(){
   h += '<div style="color:#5cb87a;font-size:12px;font-weight:700;margin-bottom:6px">✨ Tạo ảnh nền bằng AI</div>';
   h += '<div style="display:flex;gap:6px;margin-bottom:6px"><input id="pid-ai-prompt" placeholder="Mô tả ảnh nền (VD: sân vận động đêm, cờ đỏ sao vàng, tối giản)" style="flex:1;background:#222;border:1px solid #333;color:#eee;border-radius:8px;padding:8px;font-size:11px">';
   h += '<button id="pid-ai-bg-go" style="background:#2d8659;border:0;color:#fff;padding:6px 12px;border-radius:8px;font-size:11px;cursor:pointer">🎨 Tạo</button></div>';
+  h += '<div style="margin-bottom:6px"><div style="color:#888;font-size:10px;margin-bottom:4px">🎨 Phong cách phổ biến (bấm để thêm vào mô tả):</div><div id="pid-ai-style-chips" style="display:flex;gap:5px;flex-wrap:wrap">';
+  _pidBgStyles().forEach(function(s){
+    h += '<button class="pid-style-chip" data-style="' + _esc(s.suffix) + '" style="background:#1a2830;border:1px solid #2d8659;color:#7fe0a8;border-radius:14px;padding:4px 10px;font-size:10px;cursor:pointer">' + _esc(s.label) + '</button>';
+  });
+  h += '</div></div>';
   h += '<div style="display:flex;gap:6px;margin-bottom:6px;align-items:center"><span style="color:#b88ae8;font-size:10px;padding:3px 8px;background:#1a1420;border:1px solid #8a5cb8;border-radius:6px">✨ SenseNova-U1-8B-MoT · ZeroGPU</span><a href="https://huggingface.co/sensenova/SenseNova-U1-8B-MoT" target="_blank" style="color:#5cb87a;font-size:9px">model</a></div>';
   h += '<div id="pid-ai-bg-status" style="color:#888;font-size:10px;margin-bottom:6px"></div><div id="pid-ai-bg-preview" style="max-width:240px;margin:0 auto"></div>';
   h += '</div>';
@@ -733,11 +760,36 @@ function _pidBuildDesigner(){
   if(ot) ot.addEventListener('input', function(){ _pDebounce(_pidPreview, 200); });
   var bgGo = document.getElementById('pid-ai-bg-go');
   if(bgGo) bgGo.addEventListener('click', _pidAIGenBG);
+  var styleBox = document.getElementById('pid-ai-style-chips');
+  if(styleBox){
+    styleBox.addEventListener('click', function(e){
+      var b = e.target.closest ? e.target.closest('.pid-style-chip') : null;
+      if(!b) return;
+      var inp = document.getElementById('pid-ai-prompt');
+      if(!inp) return;
+      var suffix = b.getAttribute('data-style') || '';
+      if(!suffix) return;
+      var cur = (inp.value || '').trim();
+      if(cur.indexOf(suffix) >= 0){
+        inp.value = cur.replace(new RegExp('[,]?\\s*' + suffix.replace(/[.*+?^${}()|[\]\\]/g, '\\$&'), 'g'), '').replace(/,\s*,/g, ',').replace(/^,\s*|\s*,$/g, '').trim();
+        b.style.borderColor = '#333'; b.style.color = '#7fe0a8';
+      } else {
+        inp.value = cur ? cur + ', ' + suffix : suffix;
+        b.style.borderColor = '#ffd700'; b.style.color = '#ffd700';
+      }
+      inp.focus();
+    });
+  }
   var txtGo = document.getElementById('pid-ai-text-go');
   if(txtGo) txtGo.addEventListener('click', _pidAIGenText);
   var mgBtn = document.getElementById('pid-merge-btn');
   if(mgBtn) mgBtn.addEventListener('click', _pidMergeSlidesToBG);
 
+  var prevBtn = document.getElementById('pid-preview-btn');
+  if(prevBtn) prevBtn.addEventListener('click', function(){ _pidPreview(); });
+  var saveBtn = document.getElementById('pid-save-btn');
+  if(saveBtn && typeof _pidSave === 'function') saveBtn.addEventListener('click', _pidSave);
+
   ['pid-texts','pid-ratio','pid-layout','pid-filter','pid-glow','pid-pos'].forEach(function(id){
     ['change','input'].forEach(function(evt){
       var el = document.getElementById(id);
@@ -851,6 +903,24 @@ function _pidBgSamples(){
   ];
 }
 
+/* Popular background styles for the AI (SenseNova) background generator.
+   Clicking a style chip appends its English style suffix to the prompt so the
+   image model renders a well-known look (photo-real, 3D render, watercolor…). */
+function _pidBgStyles(){
+  return [
+    { label: '📷 Chân thực', suffix: 'photorealistic, high detail' },
+    { label: '🎨 3D render', suffix: '3d render, octane render, cinematic' },
+    { label: '🌆 Neon', suffix: 'neon lights, cyberpunk, glowing' },
+    { label: '💧 Màu nước', suffix: 'watercolor painting, soft edges' },
+    { label: '🖌️ Anime', suffix: 'anime style, vibrant colors' },
+    { label: '🌫️ Tối giản', suffix: 'minimalist, flat design, clean' },
+    { label: '🌌 Vũ trụ', suffix: 'space, galaxy, stars, deep blue' },
+    { label: '🔥 Ấm áp', suffix: 'warm sunset light, golden hour' },
+    { label: '❄️ Lạnh', suffix: 'cool blue tones, winter, frosty' },
+    { label: '🏛️ Cổ điển', suffix: 'classic oil painting, vintage' },
+  ];
+}
+
 function _pidSetAll(on){
   _pid.selected = [];
   var list = document.getElementById('pid-slide-list');