fix(image): normalize local image rendering for url/base64/b64_json

Author: TQZHR

app/services/grok/imagine_experimental.py

@@ -239,12 +239,15 @@ async def convert_urls(self, token: str, urls: Iterable[str], response_format: s
                     continue
                 if mode == "url":
                     path = _normalize_asset_path(raw)
+                    if path in {"", "/"}:
+                        continue
+                    await dl.download(path, token, "image")
                     app_url = str(get_config("app.app_url", "") or "").strip()
+                    local_path = f"/v1/files/image{path}"
                     if app_url:
-                        await dl.download(path, token, "image")
-                        out.append(f"{app_url.rstrip('/')}/v1/files/image{path}")
+                        out.append(f"{app_url.rstrip('/')}{local_path}")
                     else:
-                        out.append(f"{ASSET_API}{path}")
+                        out.append(local_path)
                     continue
 
                 data_uri = await dl.to_base64(raw, token, "image")
@@ -383,4 +386,3 @@ async def _stream_response():
     "IMAGE_METHODS",
     "resolve_image_generation_method",
 ]
-

app/services/grok/processor.py

@@ -68,13 +68,19 @@ async def process_url(self, path: str, media_type: str = "image") -> str:
 
         if not path.startswith("/"):
             path = f"/{path}"
-            
+
+        # Invalid root path is not a displayable image URL.
+        if path in {"", "/"}:
+            return ""
+
+        # Always materialize to local cache endpoint so callers don't rely on
+        # direct assets.grok.com access (often blocked without upstream cookies).
+        dl_service = self._get_dl()
+        await dl_service.download(path, self.token, media_type)
+        local_path = f"/v1/files/{media_type}{path}"
         if self.app_url:
-            dl_service = self._get_dl()
-            await dl_service.download(path, self.token, media_type)
-            return f"{self.app_url.rstrip('/')}/v1/files/{media_type}{path}"
-        else:
-            return f"{ASSET_URL.rstrip('/')}{path}"
+            return f"{self.app_url.rstrip('/')}{local_path}"
+        return local_path
 
     def _sse(self, content: str = "", role: str = None, finish: str = None) -> str:
         """构建 SSE 响应 (StreamProcessor 通用)"""

app/static/chat/chat.js

@@ -43,6 +43,37 @@ function toAbsoluteUrl(url) {
   }
 }
 
+function detectBase64ImageMime(base64Text) {
+  const s = String(base64Text || '').trim().replace(/\s+/g, '');
+  if (!s) return 'image/png';
+  if (s.startsWith('/9j/')) return 'image/jpeg';
+  if (s.startsWith('iVBORw0KGgo')) return 'image/png';
+  if (s.startsWith('UklGR')) return 'image/webp';
+  if (s.startsWith('R0lGOD')) return 'image/gif';
+  if (s.startsWith('Qk')) return 'image/bmp';
+  return 'image/png';
+}
+
+function toImageDataUrl(raw) {
+  const value = String(raw || '').trim();
+  if (!value) return '';
+  if (value.startsWith('data:image/')) return value;
+  const mime = detectBase64ImageMime(value);
+  return `data:${mime};base64,${value}`;
+}
+
+function pickImageSrc(item) {
+  const rawUrl = String(item?.url || '').trim();
+  if (rawUrl && rawUrl !== 'https://assets.grok.com/' && rawUrl !== 'https://assets.grok.com') {
+    return toAbsoluteUrl(rawUrl);
+  }
+  const b64json = String(item?.b64_json || '').trim();
+  if (b64json) return toImageDataUrl(b64json);
+  const base64 = String(item?.base64 || '').trim();
+  if (base64) return toImageDataUrl(base64);
+  return '';
+}
+
 function showUserMsg(role, content) {
   const wrap = document.createElement('div');
   wrap.className = 'msg';
@@ -418,22 +449,25 @@ async function generateImage() {
     const res = await fetch('/v1/images/generations', {
       method: 'POST',
       headers,
-      body: JSON.stringify({ prompt, model, n, response_format: 'url' }),
+      body: JSON.stringify({ prompt, model, n }),
     });
     const data = await res.json().catch(() => ({}));
     if (!res.ok) throw new Error(data?.error?.message || data?.detail || `HTTP ${res.status}`);
 
     const items = Array.isArray(data?.data) ? data.data : [];
     if (!items.length) throw new Error('没有生成结果');
 
+    let rendered = 0;
     items.forEach((it) => {
-      const url = it.url ? String(it.url) : it.b64_json ? `data:image/png;base64,${String(it.b64_json)}` : '';
+      const url = pickImageSrc(it);
       if (!url) return;
+      rendered += 1;
       const card = document.createElement('div');
       card.className = 'result-card';
       card.innerHTML = `<img src="${escapeHtml(url)}" alt="image" />`;
       q('image-results').appendChild(card);
     });
+    if (!rendered) throw new Error('图片返回为空或格式不支持');
   } catch (e) {
     showToast('生图失败: ' + (e?.message || e), 'error');
   }