Upload 6 files

.env

@@ -0,0 +1,12 @@
+SECURE_C_SES=
+HOST_C_OSES=
+CSESIDX=
+CONFIG_ID=
+PROXY=http://127.0.0.1:10808                       
+MODEL_NAME=gemini-business
+
+SECURE_C_SES=CSE.AdwtfTAueKUjNCa1Cxh_iVlpE3Qvg4OwpHdemB_OY_bz04XrFfufjur2GrP3r6d0jppVoDpMssiZhvRFo1CB1e-lQYFMNw2XbTG4Cp_MQZHlTnF-Hhm9zmqmEJ-X31XBsQTEo4ydS3ccnihSzWRlj88DJ8RLzxY2oKGPB7q3ARX2DBVI0aIwGvBT4OW0OKi2SMRvSGDrRECEshSpimar1KSkINVoh5IlewuxSDw6NtU0xbd_wRmznc2IoledpXsADKh-HCD0xiNtAXAm5uCPPxGqB2nOBG2zscDTlI9jXsAQpTsnTnWWXpIFLNqap22FTgK7532iA47N7SBU47c6OQlzIqZ_XWfcAajegOcON40ASkrJMrjZsWKSbyEKDJu8GAIVL2Gl8tsQ1Gg-3tUZ4KteciMKIveR6GeS4fTPI_GZ-6cG95a_ouVkahTeuqYb-5vfm0i7LIjGvaj5
+CSESIDX=542911192
+CONFIG_ID=f92fd445-439e-481c-9b66-1172bb417558
+HOST_C_OSES=COS.AfQtEyAogaRCQUoa48af3YyE7otiOKuzK-73w6hATwbso1VV_ymbTKCD0oN8IzcC-11i8mFjBWQNYXMHs0RjW5VOchG0_SeHT0gQsvaibZ4cvk1hhAPGeO8uUnPFAfGNrOYZWbB6SODvENkm
+PROXY=

Dockerfile

@@ -0,0 +1,16 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+COPY requirements.txt .
+
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    gcc \
+    && pip install -r requirements.txt \
+    && apt-get purge -y gcc \
+    && apt-get autoremove -y \
+    && rm -rf /var/lib/apt/lists/*
+
+COPY main.py .
+COPY templates/ templates/
+RUN mkdir -p generated_images
+CMD ["python", "-u", "main.py"]

docker-compose.yml

@@ -0,0 +1,41 @@
+services:
+  geminibusiness:
+    build: .
+    container_name: geminibusiness
+    restart: unless-stopped
+    ports:
+      - "3003:8000"
+    env_file: .env
+    environment:
+      - DATABASE_URL=postgresql+asyncpg://postgres:postgres@postgres:5432/geminibusiness
+      - PROXY=http://host.docker.internal:10808
+      - HTTP_PROXY=http://host.docker.internal:10808
+      - HTTPS_PROXY=http://host.docker.internal:10808
+      - NO_PROXY=localhost,127.0.0.1,postgres
+    volumes:
+      - generated_images:/app/generated_images
+    depends_on:
+      postgres:
+        condition: service_healthy
+
+  postgres:
+    image: docker.1ms.run/postgres:16-alpine
+    container_name: geminibusiness-db
+    restart: unless-stopped
+    environment:
+      POSTGRES_USER: postgres
+      POSTGRES_PASSWORD: postgres
+      POSTGRES_DB: geminibusiness
+    volumes:
+      - postgres_data:/var/lib/postgresql/data
+    ports:
+      - "5433:5432"
+    healthcheck:
+      test: ["CMD-SHELL", "pg_isready -U postgres -d geminibusiness"]
+      interval: 5s
+      timeout: 5s
+      retries: 5
+
+volumes:
+  postgres_data:
+  generated_images:

main.py

@@ -0,0 +1,1226 @@
+import json, time, hmac, hashlib, base64, os, asyncio, uuid, re, threading
+from dataclasses import dataclass, field
+from datetime import datetime
+from typing import List, Optional, Union, Dict, Any, AsyncGenerator, Generator
+from contextlib import asynccontextmanager
+import logging
+
+# import psycopg2  # 不再需要直接导入psycopg2，SQLAlchemy会自动处理
+from dotenv import load_dotenv
+import httpx
+from fastapi import FastAPI, HTTPException, Request, Depends
+from fastapi.responses import StreamingResponse, HTMLResponse
+from pydantic import BaseModel
+from pathlib import Path
+
+# ---------- 数据库相关 ----------
+from sqlalchemy import create_engine, String, Text, DateTime, ForeignKey, select, text
+from sqlalchemy.orm import DeclarativeBase, Mapped, mapped_column, sessionmaker, Session
+
+# ---------- 日志配置 ----------
+logging.basicConfig(
+    level=logging.INFO,
+    format="%(asctime)s | %(levelname)s | %(message)s",
+    datefmt="%H:%M:%S",
+)
+logger = logging.getLogger("gemini")
+
+# ---------- Logging helpers ----------
+def log_text(label: str, content: Optional[str]):
+    """Log full text content with length for debugging rendering issues."""
+    if content is None:
+        logger.info(f"{label}: <none>")
+        return
+    logger.info(f"{label} (len={len(content)}): {content}")
+
+# ---------- 配置 ----------
+BASE_DIR = Path(__file__).resolve().parent
+ENV_PATH = BASE_DIR / ".env"
+load_dotenv(ENV_PATH, override=True)
+logger.info(f"加载环境变量: {ENV_PATH}")
+
+SECURE_C_SES = os.getenv("SECURE_C_SES")
+HOST_C_OSES  = os.getenv("HOST_C_OSES")
+CSESIDX      = os.getenv("CSESIDX")
+CONFIG_ID    = os.getenv("CONFIG_ID")
+PROXY        = os.getenv("PROXY") or None
+JWT_TTL      = 270
+
+# ---------- 图片生成相关常量 ----------
+IMAGE_SAVE_DIR = BASE_DIR / "generated_images"
+LIST_FILE_METADATA_URL = "https://biz-discoveryengine.googleapis.com/v1alpha/locations/global/widgetListSessionFileMetadata"
+
+# ---------- 图片数据类 ----------
+@dataclass
+class ChatImage:
+    """表示生成的图片"""
+    file_id: Optional[str] = None
+    file_name: Optional[str] = None
+    base64_data: Optional[str] = None
+    url: Optional[str] = None
+    local_path: Optional[str] = None
+    mime_type: str = "image/png"
+
+    def save_to_file(self, directory: Optional[Path] = None) -> str:
+        """保存图片到本地文件，返回文件路径"""
+        if self.local_path and os.path.exists(self.local_path):
+            return self.local_path
+
+        save_dir = directory or IMAGE_SAVE_DIR
+        os.makedirs(save_dir, exist_ok=True)
+
+        ext = ".png"
+        if self.mime_type:
+            ext_map = {
+                "image/png": ".png",
+                "image/jpeg": ".jpg",
+                "image/gif": ".gif",
+                "image/webp": ".webp",
+            }
+            ext = ext_map.get(self.mime_type, ".png")
+
+        if self.file_name:
+            filename = self.file_name
+        else:
+            timestamp = datetime.now().strftime("%Y%m%d_%H%M%S")
+            filename = f"gemini_{timestamp}_{uuid.uuid4().hex[:8]}{ext}"
+
+        filepath = os.path.join(save_dir, filename)
+
+        if self.base64_data:
+            image_data = base64.b64decode(self.base64_data)
+            with open(filepath, "wb") as f:
+                f.write(image_data)
+            self.local_path = filepath
+
+        return filepath
+
+
+@dataclass
+class ChatResponseWithImages:
+    """聊天响应，包含文本和可能的图片"""
+    text: str = ""
+    images: List[ChatImage] = field(default_factory=list)
+    thoughts: List[str] = field(default_factory=list)
+
+# PostgreSQL 连接
+
+DATABASE_URL = os.getenv("DATABASE_URL", "postgresql://postgres.cwlqevigvcjnuksbxqnq:zxc2630388@aws-1-eu-west-2.pooler.supabase.com:5432/postgres")
+# 用于创建数据库的连接（连接到默认的 postgres 库）
+DATABASE_URL_BASE = DATABASE_URL.rsplit("/", 1)[0] + "/postgres" if DATABASE_URL else ""
+DATABASE_NAME = DATABASE_URL.rsplit("/", 1)[-1].split("?")[0] if DATABASE_URL else "geminibusiness"
+
+# ---------- 硬编码模型列表 ----------
+MODEL_MAPPING = {
+    "gemini-auto": None,  # None 表示不指定模型，使用默认
+    "gemini-2.5-flash": "gemini-2.5-flash",
+    "gemini-2.5-pro": "gemini-2.5-pro",
+    "gemini-3-pro": "gemini-3-pro",
+    "gemini-3-pro-preview": "gemini-3-pro-preview"
+}
+
+# ---------- 数据库模型 ----------
+class Base(DeclarativeBase):
+    pass
+
+class ChatSession(Base):
+    """聊天会话表"""
+    __tablename__ = "chat_sessions"
+
+    id: Mapped[str] = mapped_column(String(64), primary_key=True)  # chatId
+    title: Mapped[str] = mapped_column(String(255), default="新对话")
+    gemini_session: Mapped[Optional[str]] = mapped_column(String(512), nullable=True)  # Google session name
+    model: Mapped[str] = mapped_column(String(64), default="gemini-2.5-flash")
+    created_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.utcnow)
+    updated_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.utcnow, onupdate=datetime.utcnow)
+
+class ChatMessage(Base):
+    """聊天消息表"""
+    __tablename__ = "chat_messages"
+
+    id: Mapped[int] = mapped_column(primary_key=True, autoincrement=True)
+    chat_id: Mapped[str] = mapped_column(String(64), ForeignKey("chat_sessions.id", ondelete="CASCADE"))
+    role: Mapped[str] = mapped_column(String(16))  # user / assistant
+    content: Mapped[str] = mapped_column(Text)
+    thinking: Mapped[Optional[str]] = mapped_column(Text, nullable=True)  # 思考过程
+    images: Mapped[Optional[str]] = mapped_column(Text, nullable=True)  # 生成的图片JSON: [{"file_name": str, "local_path": str, "mime_type": str}]
+    created_at: Mapped[datetime] = mapped_column(DateTime, default=datetime.utcnow)
+
+# ---------- 数据库引擎 ----------
+engine = create_engine(DATABASE_URL, echo=False, pool_size=10, max_overflow=20)
+session_maker = sessionmaker(engine, class_=Session, expire_on_commit=False)
+
+def get_db() -> Generator[Session, None, None]:
+    with session_maker() as session:
+        yield session
+
+# ---------- Session 缓存 (chatId -> gemini_session) ----------
+session_cache: Dict[str, str] = {}
+
+# ---------- 核心：请求头伪装 ----------
+def get_common_headers(jwt: str) -> dict:
+    return {
+        "accept": "*/*",
+        "accept-encoding": "gzip, deflate, br, zstd",
+        "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
+        "authorization": f"Bearer {jwt}",
+        "content-type": "application/json",
+        "origin": "https://business.gemini.google",
+        "referer": "https://business.gemini.google/",
+        "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36",
+        "x-server-timeout": "1800",
+        "sec-ch-ua": '"Chromium";v="124", "Google Chrome";v="124", "Not-A.Brand";v="99"',
+        "sec-ch-ua-mobile": "?0",
+        "sec-ch-ua-platform": '"Windows"',
+        "sec-fetch-dest": "empty",
+        "sec-fetch-mode": "cors",
+        "sec-fetch-site": "cross-site",
+    }
+
+# ---------- 加密工具 ----------
+def urlsafe_b64encode(data: bytes) -> str:
+    return base64.urlsafe_b64encode(data).decode().rstrip("=")
+
+def kq_encode(s: str) -> str:
+    b = bytearray()
+    for ch in s:
+        v = ord(ch)
+        if v > 255:
+            b.append(v & 255)
+            b.append(v >> 8)
+        else:
+            b.append(v)
+    return urlsafe_b64encode(bytes(b))
+
+def create_jwt(key_bytes: bytes, key_id: str, csesidx: str) -> str:
+    now = int(time.time())
+    header = {"alg": "HS256", "typ": "JWT", "kid": key_id}
+    payload = {
+        "iss": "https://business.gemini.google",
+        "aud": "https://biz-discoveryengine.googleapis.com",
+        "sub": f"csesidx/{csesidx}",
+        "iat": now,
+        "exp": now + 300,
+        "nbf": now,
+    }
+    header_b64  = kq_encode(json.dumps(header, separators=(",", ":")))
+    payload_b64 = kq_encode(json.dumps(payload, separators=(",", ":")))
+    message     = f"{header_b64}.{payload_b64}"
+    sig         = hmac.new(key_bytes, message.encode(), hashlib.sha256).digest()
+    return f"{message}.{urlsafe_b64encode(sig)}"
+
+# ---------- JWT 管理 ----------
+class JWTManager:
+    def __init__(self) -> None:
+        self.jwt: str = ""
+        self.expires: float = 0
+        self._lock = threading.Lock()
+
+    def get(self) -> str:
+        with self._lock:
+            if time.time() > self.expires:
+                self._refresh()
+            return self.jwt
+
+    def _refresh(self) -> None:
+        cookie = f"__Secure-C_SES={SECURE_C_SES}"
+        if HOST_C_OSES:
+            cookie += f"; __Host-C_OSES={HOST_C_OSES}"
+
+        logger.debug("正在刷新 JWT...")
+        with httpx.Client(proxy=PROXY, verify=False, timeout=30) as cli:
+            r = cli.get(
+                "https://business.gemini.google/auth/getoxsrf",
+                params={"csesidx": CSESIDX},
+                headers={
+                    "cookie": cookie,
+                    "user-agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36",
+                    "referer": "https://business.gemini.google/"
+                },
+            )
+            if r.status_code != 200:
+                logger.error(f"getoxsrf 失败: {r.status_code} {r.text}")
+                raise HTTPException(r.status_code, "getoxsrf failed")
+
+            txt = r.text[4:] if r.text.startswith(")]}'") else r.text
+            data = json.loads(txt)
+
+        key_bytes = base64.urlsafe_b64decode(data["xsrfToken"] + "==")
+        self.jwt = create_jwt(key_bytes, data["keyId"], CSESIDX)
+        self.expires = time.time() + JWT_TTL
+        logger.info("JWT 刷新成功")
+
+jwt_mgr = JWTManager()
+
+# ---------- Session 管理 ----------
+def create_gemini_session() -> str:
+    """创建新的 Google Gemini Session"""
+    jwt = jwt_mgr.get()
+    headers = get_common_headers(jwt)
+    body = {
+        "configId": CONFIG_ID,
+        "additionalParams": {"token": "-"},
+        "createSessionRequest": {
+            "session": {"name": "", "displayName": ""}
+        }
+    }
+
+    logger.debug("正在创建 Gemini Session...")
+    with httpx.Client(proxy=PROXY, verify=False, timeout=30) as cli:
+        r = cli.post(
+            "https://biz-discoveryengine.googleapis.com/v1alpha/locations/global/widgetCreateSession",
+            headers=headers,
+            json=body,
+        )
+        if r.status_code != 200:
+            logger.error(f"createSession 失败: {r.status_code} {r.text}")
+            raise HTTPException(r.status_code, "createSession failed")
+        sess_name = r.json()["session"]["name"]
+        logger.info(f"新建 Gemini Session: ...{sess_name[-15:]}")
+        return sess_name
+
+async def upload_context_file(session_name: str, mime_type: str, base64_content: str) -> str:
+    """上传文件到指定 Session，返回 fileId"""
+    jwt = await jwt_mgr.get()
+    headers = get_common_headers(jwt)
+
+    # 生成随机文件名
+    ext = mime_type.split('/')[-1] if '/' in mime_type else "bin"
+    file_name = f"upload_{int(time.time())}_{uuid.uuid4().hex[:6]}.{ext}"
+
+    body = {
+        "configId": CONFIG_ID,
+        "additionalParams": {"token": "-"},
+        "addContextFileRequest": {
+            "name": session_name,
+            "fileName": file_name,
+            "mimeType": mime_type,
+            "fileContents": base64_content
+        }
+    }
+
+    logger.info(f"📤 上传图片 [{mime_type}] 到 Session...")
+    async with httpx.AsyncClient(proxy=PROXY, verify=False, timeout=60) as cli:
+        r = await cli.post(
+            "https://biz-discoveryengine.googleapis.com/v1alpha/locations/global/widgetAddContextFile",
+            headers=headers,
+            json=body,
+        )
+
+        if r.status_code != 200:
+            logger.error(f"上传文件失败: {r.status_code} {r.text}")
+            raise HTTPException(r.status_code, f"Upload failed: {r.text}")
+
+        data = r.json()
+        file_id = data.get("addContextFileResponse", {}).get("fileId")
+        logger.info(f"✅ 图片上传成功, ID: {file_id}")
+        return file_id
+
+def parse_last_message(messages: List['Message']):
+    """解析最后一条消息，分离文本和图片"""
+    if not messages:
+        return "", []
+
+    last_msg = messages[-1]
+    content = last_msg.content
+
+    text_content = ""
+    images = []  # List of {"mime": str, "data": str_base64}
+
+    if isinstance(content, str):
+        text_content = content
+    elif isinstance(content, list):
+        for part in content:
+            if part.get("type") == "text":
+                text_content += part.get("text", "")
+            elif part.get("type") == "image_url":
+                url = part.get("image_url", {}).get("url", "")
+                # 解析 Data URI: data:image/png;base64,xxxxxx
+                match = re.match(r"data:(image/[^;]+);base64,(.+)", url)
+                if match:
+                    images.append({"mime": match.group(1), "data": match.group(2)})
+                else:
+                    logger.warning(f"⚠️ 暂不支持非 Base64 图片链接: {url[:30]}...")
+
+    return text_content, images
+
+def get_message_text_content(msg: 'Message') -> str:
+    """从消息中提取文本内容"""
+    content = msg.content
+    if isinstance(content, str):
+        return content
+    elif isinstance(content, list):
+        text_parts = []
+        for part in content:
+            if part.get("type") == "text":
+                text_parts.append(part.get("text", ""))
+            elif part.get("type") == "image_url":
+                text_parts.append("[图片]")
+        return "".join(text_parts)
+    return ""
+
+def get_or_create_gemini_session(chat_id: str, is_new_chat: bool) -> tuple[str, bool]:
+    """
+    获取或创建 Gemini Session
+    返回: (gemini_session, is_new_session)
+    """
+    # 如果是新对话，强制创建新 Session
+    if is_new_chat:
+        logger.info("新对话开始，创建新 Session")
+        gemini_session = create_gemini_session()
+        session_cache[chat_id] = gemini_session
+        return gemini_session, True
+
+    # 尝试从缓存获取
+    if chat_id in session_cache:
+        logger.info(f"复用会话: ...{session_cache[chat_id][-15:]}")
+        return session_cache[chat_id], False
+
+    # 从数据库获取
+    with session_maker() as db:
+        result = db.execute(select(ChatSession).where(ChatSession.id == chat_id))
+        chat_session = result.scalar_one_or_none()
+
+        if chat_session and chat_session.gemini_session:
+            session_cache[chat_id] = chat_session.gemini_session
+            logger.info(f"从数据库恢复会话: ...{chat_session.gemini_session[-15:]}")
+            return chat_session.gemini_session, False
+
+    # 没有找到，创建新的
+    logger.info("未找到缓存会话，新建")
+    gemini_session = create_gemini_session()
+    session_cache[chat_id] = gemini_session
+    return gemini_session, True
+
+def update_gemini_session_in_db(chat_id: str, gemini_session: str):
+    """更新数据库中的 Gemini Session"""
+    with session_maker() as db:
+        result = db.execute(select(ChatSession).where(ChatSession.id == chat_id))
+        chat_session = result.scalar_one_or_none()
+        if chat_session:
+            chat_session.gemini_session = gemini_session
+            db.commit()
+
+# ---------- 图片生成处理方法 ----------
+async def get_session_file_metadata(session_name: str) -> dict:
+    """获取 session 中的文件元数据，包括下载链接"""
+    jwt = await jwt_mgr.get()
+    headers = get_common_headers(jwt)
+    body = {
+        "configId": CONFIG_ID,
+        "additionalParams": {"token": "-"},
+        "listSessionFileMetadataRequest": {
+            "name": session_name,
+            "filter": "file_origin_type = AI_GENERATED"
+        }
+    }
+
+    async with httpx.AsyncClient(proxy=PROXY, verify=False, timeout=30) as cli:
+        resp = await cli.post(LIST_FILE_METADATA_URL, headers=headers, json=body)
+
+        if resp.status_code == 401:
+            # JWT 过期，刷新后重试
+            jwt = await jwt_mgr.get()
+            headers = get_common_headers(jwt)
+            resp = await cli.post(LIST_FILE_METADATA_URL, headers=headers, json=body)
+
+        if resp.status_code != 200:
+            logger.warning(f"获取文件元数据失败: {resp.status_code}")
+            return {}
+
+        data = resp.json()
+        result = {}
+        file_metadata_list = data.get("listSessionFileMetadataResponse", {}).get("fileMetadata", [])
+        for fm in file_metadata_list:
+            fid = fm.get("fileId")
+            if fid:
+                result[fid] = fm
+
+        return result
+
+
+def build_image_download_url(session_name: str, file_id: str) -> str:
+    """构造正确的图片下载 URL"""
+    return f"https://biz-discoveryengine.googleapis.com/v1alpha/{session_name}:downloadFile?fileId={file_id}&alt=media"
+
+
+async def download_image_with_jwt(session_name: str, file_id: str) -> bytes:
+    """使用 JWT 认证下载图片"""
+    url = build_image_download_url(session_name, file_id)
+    jwt = await jwt_mgr.get()
+    headers = get_common_headers(jwt)
+
+    async with httpx.AsyncClient(proxy=PROXY, verify=False, timeout=120) as cli:
+        resp = await cli.get(url, headers=headers, follow_redirects=True)
+
+        if resp.status_code == 401:
+            # JWT 过期，刷新后重试
+            jwt = await jwt_mgr.get()
+            headers = get_common_headers(jwt)
+            resp = await cli.get(url, headers=headers, follow_redirects=True)
+
+        resp.raise_for_status()
+        content = resp.content
+
+        # 检测是否为 base64 编码的内容
+        try:
+            text_content = content.decode("utf-8", errors="ignore").strip()
+            if text_content.startswith("iVBORw0KGgo") or text_content.startswith("/9j/"):
+                # 是 base64 编码，需要解码
+                return base64.b64decode(text_content)
+        except Exception:
+            pass
+
+        return content
+
+
+async def save_generated_image(session_name: str, file_id: str, file_name: Optional[str], mime_type: str, chat_id: str, image_index: int = 1) -> ChatImage:
+    """下载并保存生成的图片，按 chat_id 命名"""
+    img = ChatImage(
+        file_id=file_id,
+        file_name=file_name,
+        mime_type=mime_type,
+    )
+
+    try:
+        image_data = await download_image_with_jwt(session_name, file_id)
+        os.makedirs(IMAGE_SAVE_DIR, exist_ok=True)
+
+        ext = ".png"
+        ext_map = {"image/png": ".png", "image/jpeg": ".jpg", "image/gif": ".gif", "image/webp": ".webp"}
+        ext = ext_map.get(mime_type, ".png")
+
+        # 按 {chat_id}_{序号}.png 命名
+        filename = f"{chat_id}_{image_index}{ext}"
+        filepath = IMAGE_SAVE_DIR / filename
+
+        # 如果文件已存在，添加时间戳避免覆盖
+        if filepath.exists():
+            timestamp = datetime.now().strftime("%H%M%S")
+            filename = f"{chat_id}_{image_index}_{timestamp}{ext}"
+            filepath = IMAGE_SAVE_DIR / filename
+
+        with open(filepath, "wb") as f:
+            f.write(image_data)
+
+        img.local_path = str(filepath)
+        img.file_name = filename
+        img.base64_data = base64.b64encode(image_data).decode("utf-8")
+        logger.info(f"图片已保存: {filepath}")
+    except Exception as e:
+        logger.error(f"下载图片失败: {e}")
+
+    return img
+
+
+def parse_images_from_response(data_list: list) -> tuple[list, str]:
+    """
+    从 API 响应中解析图片文件引用
+    返回: (file_ids_list, current_session)
+    file_ids_list: [{"fileId": str, "mimeType": str}, ...]
+    """
+    file_ids = []
+    current_session = None
+
+    for data in data_list:
+        sar = data.get("streamAssistResponse")
+        if not sar:
+            continue
+
+        # 获取 session 信息
+        session_info = sar.get("sessionInfo", {})
+        if session_info.get("session"):
+            current_session = session_info["session"]
+
+        answer = sar.get("answer") or {}
+        replies = answer.get("replies") or []
+
+        for reply in replies:
+            gc = reply.get("groundedContent", {})
+            content = gc.get("content", {})
+
+            # 检查 file 字段（图片生成的关键）
+            file_info = content.get("file")
+            if file_info and file_info.get("fileId"):
+                file_ids.append({
+                    "fileId": file_info["fileId"],
+                    "mimeType": file_info.get("mimeType", "image/png")
+                })
+
+    return file_ids, current_session
+
+
+async def get_chat_image_count(chat_id: str) -> int:
+    """获取指定会话中已保存的图片数量"""
+    async with async_session_maker() as db:
+        result = await db.execute(
+            select(ChatMessage).where(
+                ChatMessage.chat_id == chat_id,
+                ChatMessage.images.isnot(None)
+            )
+        )
+        messages = result.scalars().all()
+        count = 0
+        for msg in messages:
+            if msg.images:
+                try:
+                    images = json.loads(msg.images)
+                    count += len(images)
+                except:
+                    pass
+        return count
+
+
+def delete_chat_images(chat_id: str):
+    """删除与指定 chat_id 相关的所有图片文件"""
+    if not IMAGE_SAVE_DIR.exists():
+        return
+
+    deleted_count = 0
+    for filepath in IMAGE_SAVE_DIR.glob(f"{chat_id}_*"):
+        try:
+            filepath.unlink()
+            deleted_count += 1
+            logger.info(f"已删除图片: {filepath}")
+        except Exception as e:
+            logger.error(f"删除图片失败 {filepath}: {e}")
+
+    if deleted_count > 0:
+        logger.info(f"共删除 {deleted_count} 张图片 (chat_id: {chat_id})")
+
+# ---------- 应用生命周期 ----------
+def ensure_database_exists():
+    """确保数据库存在，不存在则创建"""
+    temp_engine = create_engine(DATABASE_URL_BASE, isolation_level="AUTOCOMMIT")
+    try:
+        with temp_engine.connect() as conn:
+            # 检查数据库是否存在
+            result = conn.execute(
+                text(f"SELECT 1 FROM pg_database WHERE datname = '{DATABASE_NAME}'")
+            )
+            exists = result.scalar() is not None
+
+            if not exists:
+                logger.info(f"数据库 {DATABASE_NAME} 不存在，正在创建...")
+                conn.execute(text(f'CREATE DATABASE "{DATABASE_NAME}"'))
+                logger.info(f"数据库 {DATABASE_NAME} 创建成功")
+            else:
+                logger.info(f"数据库 {DATABASE_NAME} 已存在")
+    except Exception as e:
+        logger.warning(f"检查/创建数据库时出错: {e}")
+    finally:
+        temp_engine.dispose()
+
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # 启动时确保数据库存在
+    ensure_database_exists()
+    # 创建表
+    with engine.begin() as conn:
+        Base.metadata.create_all(bind=conn)
+    logger.info("数据库表已创建")
+    yield
+    # 关闭时清理
+    engine.dispose()
+
+# ---------- OpenAI 兼容接口 ----------
+app = FastAPI(title="Gemini-Business OpenAI Gateway", lifespan=lifespan)
+
+class Message(BaseModel):
+    role: str
+    content: Union[str, List[Dict[str, Any]]]
+
+class ChatRequest(BaseModel):
+    model: str = "gemini-auto"
+    messages: List[Message]
+    stream: bool = False
+    temperature: Optional[float] = 0.7
+    top_p: Optional[float] = 1.0
+    chat_id: Optional[str] = None  # 聊天会话ID，为空则创建新会话
+
+def create_chunk(id: str, created: int, model: str, delta: dict, finish_reason: Union[str, None], chat_id: str = None, title: str = None, is_new: bool = False) -> str:
+    chunk = {
+        "id": id,
+        "object": "chat.completion.chunk",
+        "created": created,
+        "model": model,
+        "choices": [{
+            "index": 0,
+            "delta": delta,
+            "finish_reason": finish_reason
+        }]
+    }
+    # 首个chunk附带聊天信息
+    if chat_id:
+        chunk["chat_id"] = chat_id
+        chunk["title"] = title
+        chunk["is_new"] = is_new
+    return json.dumps(chunk, ensure_ascii=False)
+@app.get("/")
+async def root():
+    """根路径返回详细的 API 信息"""
+    html_content = """
+    <html>
+        <head>
+            <title>Gemini Business API</title>
+        </head>
+        <body>
+            <h1>Gemini Business API 运行中</h1>
+            <p>可用的 API 端点：</p>
+            <ul>
+                <li><a href="/health">/health</a> - 健康检查</li>
+                <li><a href="/v1/models">/v1/models</a> - 模型列表</li>
+                <li><a href="/docs">/docs</a> - API 文档</li>
+            </ul>
+            <p>聊天接口: POST /v1/chat/completions</p>
+        </body>
+    </html>
+    """
+    return HTMLResponse(content=html_content)
+    
+@app.get("/v1/models")
+async def list_models():
+    data = []
+    now = int(time.time())
+    for m in MODEL_MAPPING.keys():
+        data.append({
+            "id": m,
+            "object": "model",
+            "created": now,
+            "owned_by": "google",
+            "permission": []
+        })
+    return {"object": "list", "data": data}
+
+@app.get("/health")
+async def health():
+    return {"status": "ok", "time": datetime.utcnow().isoformat()}
+
+@app.get("/home", response_class=HTMLResponse)
+async def home():
+    html_path = BASE_DIR / "templates" / "index.html"
+    return HTMLResponse(content=html_path.read_text(encoding="utf-8"))
+
+# ---------- 聊天记录 API ----------
+@app.get("/v1/chats")
+async def list_chats(db: Session = Depends(get_db)):
+    """获取所有聊天记录列表"""
+    result = db.execute(
+        select(ChatSession)
+        .order_by(ChatSession.updated_at.desc())
+    )
+    sessions = result.scalars().all()
+    return {
+        "chats": [
+            {
+                "id": s.id,
+                "title": s.title,
+                "model": s.model,
+                "created_at": s.created_at.isoformat(),
+                "updated_at": s.updated_at.isoformat()
+            }
+            for s in sessions
+        ]
+    }
+
+@app.get("/v1/chats/{chat_id}")
+async def get_chat(chat_id: str, db: Session = Depends(get_db)):
+    """获取指定聊天的详情和消息历史"""
+    result = db.execute(select(ChatSession).where(ChatSession.id == chat_id))
+    session = result.scalar_one_or_none()
+    if not session:
+        raise HTTPException(404, "Chat not found")
+
+    # 获取消息历史
+    msg_result = db.execute(
+        select(ChatMessage)
+        .where(ChatMessage.chat_id == chat_id)
+        .order_by(ChatMessage.created_at)
+    )
+    messages = msg_result.scalars().all()
+
+    # 构建消息列表，包含图片信息
+    messages_data = []
+    for m in messages:
+        msg_data = {
+            "role": m.role,
+            "content": m.content,
+            "thinking": m.thinking,
+            "created_at": m.created_at.isoformat()
+        }
+        # 如果有保存的图片，读取文件并转为 base64
+        if m.images:
+            try:
+                images_info = json.loads(m.images)
+                images_with_base64 = []
+                for img_info in images_info:
+                    local_path = img_info.get("local_path")
+                    if local_path and os.path.exists(local_path):
+                        with open(local_path, "rb") as f:
+                            img_data = f.read()
+                        images_with_base64.append({
+                            "file_name": img_info.get("file_name"),
+                            "mime_type": img_info.get("mime_type", "image/png"),
+                            "base64_data": base64.b64encode(img_data).decode("utf-8")
+                        })
+                if images_with_base64:
+                    msg_data["images"] = images_with_base64
+            except Exception as e:
+                logger.error(f"加载图片失败: {e}")
+        messages_data.append(msg_data)
+
+    return {
+        "id": session.id,
+        "title": session.title,
+        "model": session.model,
+        "created_at": session.created_at.isoformat(),
+        "updated_at": session.updated_at.isoformat(),
+        "messages": messages_data
+    }
+
+@app.delete("/v1/chats/{chat_id}")
+async def delete_chat(chat_id: str, db: Session = Depends(get_db)):
+    """删除聊天记录"""
+    result = db.execute(select(ChatSession).where(ChatSession.id == chat_id))
+    session = result.scalar_one_or_none()
+    if not session:
+        raise HTTPException(404, "Chat not found")
+
+    db.delete(session)
+    db.commit()
+
+    # 删除关联的图片文件（按 chat_id 匹配）
+    delete_chat_images(chat_id)
+
+    # 清理缓存
+    if chat_id in session_cache:
+        del session_cache[chat_id]
+
+    return {"status": "ok"}
+
+@app.patch("/v1/chats/{chat_id}")
+async def update_chat(chat_id: str, title: str, db: Session = Depends(get_db)):
+    """更新聊天标题"""
+    result = db.execute(select(ChatSession).where(ChatSession.id == chat_id))
+    session = result.scalar_one_or_none()
+    if not session:
+        raise HTTPException(404, "Chat not found")
+
+    session.title = title
+    db.commit()
+    return {"status": "ok", "title": title}
+
+# ---------- 聊天完成接口 ----------
+@app.post("/v1/chat/completions")
+async def chat(req: ChatRequest, db: Session = Depends(get_db)):
+    # 模型校验
+    if req.model not in MODEL_MAPPING:
+        raise HTTPException(status_code=404, detail=f"Model '{req.model}' not found.")
+
+    chat_id = req.chat_id
+    is_new = False
+    title = "新对话"
+
+    # 如果没有 chat_id，创建新会话
+    if not chat_id:
+        chat_id = f"chat-{uuid.uuid4()}"
+        is_new = True
+        # 使用第一条用户消息作为初始标题（截取前30字符，使用文本内容）
+        first_user_msg_content = next(
+            (get_message_text_content(m) for m in req.messages if m.role == "user"),
+            "新对话"
+        )
+        title = first_user_msg_content[:30] + ("..." if len(first_user_msg_content) > 30 else "")
+
+        # 创建数据库记录
+        new_session = ChatSession(id=chat_id, title=title, model=req.model)
+        db.add(new_session)
+        db.commit()
+    else:
+        # 获取现有会话
+        result = db.execute(select(ChatSession).where(ChatSession.id == chat_id))
+        session = result.scalar_one_or_none()
+        if not session:
+            raise HTTPException(404, "Chat not found")
+        title = session.title
+
+    # 获取或创建 Gemini Session
+    gemini_session, is_new_session = await get_or_create_gemini_session(chat_id, is_new)
+
+    # 更新数据库中的 gemini_session
+    if is_new_session:
+        await update_gemini_session_in_db(chat_id, gemini_session)
+
+    created_time = int(time.time())
+    completion_id = f"chatcmpl-{uuid.uuid4()}"
+
+    # 解析最后一条消息，分离文本和图片
+    last_text_content, current_images = parse_last_message(req.messages)
+
+    # 保存用户消息到数据库（存储文本内容）
+    user_msg = req.messages[-1]
+    if user_msg.role == "user":
+        db.add(ChatMessage(chat_id=chat_id, role="user", content=get_message_text_content(user_msg)))
+        db.commit()
+
+    # 封装生成器，处理图片上传和重试逻辑
+    async def response_wrapper():
+        nonlocal gemini_session, is_new_session
+        current_file_ids = []
+
+        try:
+            # 如果有图片，先上传到当前 Session
+            if current_images:
+                for img in current_images:
+                    fid = await upload_context_file(gemini_session, img["mime"], img["data"])
+                    current_file_ids.append(fid)
+
+            async for chunk in stream_chat_generator(
+                gemini_session, req, completion_id, created_time,
+                chat_id, title, is_new, req.stream,
+                text_content=last_text_content,
+                file_ids=current_file_ids
+            ):
+                yield chunk
+        except HTTPException as e:
+            # 如果不是新会话且报错了（可能是 Session 过期），尝试新建会话重试一次
+            if not is_new_session and e.status_code in [404, 400, 500]:
+                logger.warning(f"会话可能过期 ({e.status_code})，正在重建并重试...")
+                new_gemini_session = await create_gemini_session()
+                session_cache[chat_id] = new_gemini_session
+                await update_gemini_session_in_db(chat_id, new_gemini_session)
+
+                # 重新上传图片到新 Session
+                new_file_ids = []
+                if current_images:
+                    for img in current_images:
+                        fid = await upload_context_file(new_gemini_session, img["mime"], img["data"])
+                        new_file_ids.append(fid)
+
+                # 重试
+                async for chunk in stream_chat_generator(
+                    new_gemini_session, req, completion_id, created_time,
+                    chat_id, title, is_new, req.stream,
+                    text_content=last_text_content,
+                    file_ids=new_file_ids
+                ):
+                    yield chunk
+            else:
+                raise e
+
+    # 流式处理
+    if req.stream:
+        return StreamingResponse(response_wrapper(), media_type="text/event-stream")
+
+    # 非流式处理
+    full_content = ""
+    extracted_title = None
+    collected_images = []  # 收集图片数据
+
+    async for chunk_str in response_wrapper():
+        if chunk_str.startswith("data: [DONE]"):
+            break
+        if chunk_str.startswith("data: "):
+            try:
+                data = json.loads(chunk_str[6:])
+                delta = data["choices"][0]["delta"]
+                if "content" in delta:
+                    full_content += delta["content"]
+                if "images" in delta:
+                    collected_images.extend(delta["images"])
+                if "extracted_title" in data:
+                    extracted_title = data["extracted_title"]
+            except:
+                pass
+
+    log_text("chat.nonstream.content", full_content)
+    log_text("chat.nonstream.extracted_title", extracted_title)
+
+    response_data = {
+        "id": completion_id,
+        "object": "chat.completion",
+        "created": created_time,
+        "model": req.model,
+        "chat_id": chat_id,
+        "title": extracted_title or title,
+        "is_new": is_new,
+        "choices": [{
+            "index": 0,
+            "message": {
+                "role": "assistant",
+                "content": full_content
+            },
+            "finish_reason": "stop"
+        }],
+        "usage": {
+            "prompt_tokens": 0,
+            "completion_tokens": 0,
+            "total_tokens": 0
+        }
+    }
+
+    # 如果有生成的图片，添加到响应中
+    if collected_images:
+        response_data["images"] = collected_images
+        logger.info(f"非流式响应包含 {len(collected_images)} 张图片")
+
+    return response_data
+
+async def stream_chat_generator(
+    gemini_session: str,
+    req: ChatRequest,
+    completion_id: str,
+    created_time: int,
+    chat_id: str,
+    title: str,
+    is_new: bool,
+    is_stream: bool = True,
+    text_content: str = "",
+    file_ids: List[str] = None
+):
+    jwt = await jwt_mgr.get()
+    headers = get_common_headers(jwt)
+
+    # 使用传入的文本内容（已通过 parse_last_message 解析）
+    if file_ids is None:
+        file_ids = []
+
+    body = {
+        "configId": CONFIG_ID,
+        "additionalParams": {"token": "-"},
+        "streamAssistRequest": {
+            "session": gemini_session,
+            "query": {"parts": [{"text": text_content}]},
+            "filter": "",
+            "fileIds": file_ids,
+            "answerGenerationMode": "NORMAL",
+            "toolsSpec": {
+                "webGroundingSpec": {},
+                "toolRegistry": "default_tool_registry",
+                "imageGenerationSpec": {},
+                "videoGenerationSpec": {}
+            },
+            "languageCode": "zh-CN",
+            "userMetadata": {"timeZone": "Etc/GMT-8"},
+            "assistSkippingMode": "REQUEST_ASSIST"
+        }
+    }
+
+    # 如果指定了具体模型，添加 assistGenerationConfig
+    target_model_id = MODEL_MAPPING.get(req.model)
+    if target_model_id:
+        body["streamAssistRequest"]["assistGenerationConfig"] = {
+            "modelId": target_model_id
+        }
+        logger.info(f"使用模型: {target_model_id}")
+    else:
+        logger.info(f"使用默认模型 (gemini-auto)")
+
+    # 1. 发送 Role 和聊天信息
+    if is_stream:
+        chunk = create_chunk(completion_id, created_time, req.model, {"role": "assistant"}, None, chat_id, title, is_new)
+        yield f"data: {chunk}\n\n"
+
+    full_content = ""
+    extracted_title = None
+
+    # 2. 发起请求 (等待完整响应后解析，确保稳定性)
+    async with httpx.AsyncClient(proxy=PROXY, verify=False, timeout=120) as cli:
+        r = await cli.post(
+            "https://biz-discoveryengine.googleapis.com/v1alpha/locations/global/widgetStreamAssist",
+            headers=headers,
+            json=body,
+        )
+
+        if r.status_code != 200:
+            # 抛出异常以便外层捕获重试
+            logger.error(f"Google 报错: {r.status_code} {r.text[:200]}")
+            raise HTTPException(status_code=r.status_code, detail=f"Upstream Error {r.text}")
+
+        try:
+            data_list = r.json()
+        except Exception as e:
+            logger.error(f"JSON 解析失败: {e}")
+            if is_stream:
+                yield f"data: {json.dumps({'error': {'message': 'JSON Parse Error'}})}\n\n"
+            return
+
+        # 3. 遍历数组，收集思考过程和正文
+        thinking_parts = []  # 收集所有思考过程
+        raw_content = ""  # 先收集原始内容
+
+        for data in data_list:
+            for reply in data.get("streamAssistResponse", {}).get("answer", {}).get("replies", []):
+                # 提取思考过程（thought 字段）- 如果API有这个字段
+                thought = reply.get("thought", "")
+                if thought:
+                    thinking_parts.append(thought)
+                    if not extracted_title and is_new:
+                        extracted_title = thought[:50]
+
+                # 提取正文内容
+                text = reply.get("groundedContent", {}).get("content", {}).get("text", "")
+                if text:
+                    if thought:
+                        continue
+                    else:
+                        raw_content += text
+
+        # 4. 从正文中提取 **思考标题** 格式的内容
+        import re
+        # 匹配 **标题** 格式（单独成行或在开头）
+        thinking_pattern = r'\*\*([^*]+)\*\*\s*\n?'
+
+        # 查找所有思考标题
+        matches = re.findall(thinking_pattern, raw_content)
+
+        # 如果找到了思考标题，提取它们
+        if matches:
+            for match in matches:
+                # 过滤掉可能是正文中的加粗文本（通常思考标题是短的英文描述）
+                # 思考标题通常是英文，且不包含中文
+                if re.match(r'^[A-Za-z\s\'\-]+$', match.strip()) and len(match) < 50:
+                    thinking_parts.append(match.strip())
+
+            # 只移除位于开头的思考标题，避免正文中的加粗被吞
+            lines = raw_content.splitlines()
+            idx = 0
+            leading_thinking = []
+            while idx < len(lines):
+                m = re.match(r'^\s*\*\*([^*]+)\*\*\s*$', lines[idx])
+                if not m:
+                    break
+                leading_thinking.append(m.group(1).strip())
+                idx += 1
+            if leading_thinking:
+                thinking_parts.extend(leading_thinking)
+                full_content = "\n".join(lines[idx:]).strip()
+            else:
+                full_content = raw_content
+
+            # 设置第一个思考为标题
+            if thinking_parts and not extracted_title and is_new:
+                extracted_title = thinking_parts[0][:50]
+        else:
+            full_content = raw_content
+
+        logger.info(f"思考过程数量: {len(thinking_parts)}, 正文长度: {len(full_content)}")
+        if thinking_parts:
+            logger.info(f"思考内容: {thinking_parts}")
+
+        # 合并思考内容用于存储
+        thinking_content = "\n\n".join(thinking_parts) if thinking_parts else None
+        log_text("chat.stream.thinking", thinking_content)
+
+        # 4.5 解析并下载生成的图片
+        generated_images: List[ChatImage] = []
+        image_file_ids, response_session = parse_images_from_response(data_list)
+
+        # 4.6 如果 API 返回了新的 session，更新缓存和数据库（确保后续请求能复用）
+        if response_session and response_session != gemini_session:
+            logger.info(f"检测到新 Session: ...{response_session[-15:]}, 更新缓存")
+            session_cache[chat_id] = response_session
+            await update_gemini_session_in_db(chat_id, response_session)
+
+        if image_file_ids:
+            logger.info(f"检测到 {len(image_file_ids)} 个生成图片")
+            session_for_download = response_session or gemini_session
+
+            try:
+                # 获取文件元数据
+                file_metadata = await get_session_file_metadata(session_for_download)
+
+                # 获取当前会话中已有的图片数量，用于计算新图片序号
+                existing_image_count = await get_chat_image_count(chat_id)
+
+                for idx, finfo in enumerate(image_file_ids):
+                    fid = finfo["fileId"]
+                    mime = finfo["mimeType"]
+                    meta = file_metadata.get(fid, {})
+                    file_name = meta.get("name")
+                    session_path = meta.get("session") or session_for_download
+
+                    # 下载并保存图片，传入 chat_id 和序号
+                    image_index = existing_image_count + idx + 1
+                    img = await save_generated_image(session_path, fid, file_name, mime, chat_id, image_index)
+                    generated_images.append(img)
+
+            except Exception as e:
+                logger.error(f"处理生成图片失败: {e}")
+
+        # 5. 先发送思考过程
+        if thinking_content and is_stream:
+            thinking_chunk = create_chunk(completion_id, created_time, req.model, {"thinking": thinking_content}, None)
+            yield f"data: {thinking_chunk}\n\n"
+
+        # 6. 发送正文内容
+        if full_content:
+            chunk = create_chunk(completion_id, created_time, req.model, {"content": full_content}, None)
+            if is_stream:
+                yield f"data: {chunk}\n\n"
+        log_text("chat.stream.content", full_content)
+
+        # 6.5 发送生成的图片
+        if generated_images and is_stream:
+            images_data = []
+            for img in generated_images:
+                img_info = {
+                    "file_id": img.file_id,
+                    "file_name": img.file_name,
+                    "mime_type": img.mime_type,
+                    "local_path": img.local_path,
+                }
+                # 包含 base64 数据供前端显示
+                if img.base64_data:
+                    img_info["base64_data"] = img.base64_data
+                images_data.append(img_info)
+
+            image_chunk = create_chunk(completion_id, created_time, req.model, {"images": images_data}, None)
+            yield f"data: {image_chunk}\n\n"
+            logger.info(f"已发送 {len(images_data)} 张图片��客户端")
+
+    # 7. 保存助手消息到数据库（包含思考过程和图片）
+    if full_content or thinking_content or generated_images:
+        # 准备图片信息用于存储（不含 base64，只存文件路径）
+        images_for_db = None
+        if generated_images:
+            images_for_db = json.dumps([{
+                "file_name": img.file_name,
+                "local_path": img.local_path,
+                "mime_type": img.mime_type
+            } for img in generated_images if img.local_path], ensure_ascii=False)
+
+        with session_maker() as save_db:
+            save_db.add(ChatMessage(
+                chat_id=chat_id,
+                role="assistant",
+                content=full_content or "",
+                thinking=thinking_content,
+                images=images_for_db
+            ))
+
+            # 如果提取到了标题，更新会话标题
+            if extracted_title and is_new:
+                result = save_db.execute(select(ChatSession).where(ChatSession.id == chat_id))
+                session = result.scalar_one_or_none()
+                if session:
+                    session.title = extracted_title
+
+            save_db.commit()
+
+    # 5. 发送 Finish Reason 和标题更新
+    if is_stream:
+        final_data = {}
+        if extracted_title and is_new:
+            final_data["extracted_title"] = extracted_title
+        final_chunk = create_chunk(completion_id, created_time, req.model, final_data, "stop")
+        yield f"data: {final_chunk}\n\n"
+        yield "data: [DONE]\n\n"
+
+if __name__ == "__main__":
+    if not all([SECURE_C_SES, CSESIDX, CONFIG_ID]):
+        print("Error: Missing required environment variables.")
+        exit(1)
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)
+

requirements.txt

@@ -0,0 +1,7 @@
+fastapi==0.110.0
+uvicorn[standard]==0.29.0
+httpx==0.27.0
+pydantic==2.7.0
+python-dotenv==1.0.1
+sqlalchemy==2.0.25
+psycopg2-binary==2.9.11

templates/index.html

@@ -0,0 +1,2440 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemini Chat</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github.min.css">
+    <style>
+        * {
+            margin: 0;
+            padding: 0;
+            box-sizing: border-box;
+        }
+
+        :root {
+            --bg-primary: #ffffff;
+            --bg-secondary: #f9f9f9;
+            --bg-tertiary: #f0f0f0;
+            --text-primary: #000000;
+            --text-secondary: #666666;
+            --accent: #000000;
+            --border: #e5e5e5;
+            --shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
+            --sidebar-width: 260px;
+        }
+
+        body {
+            font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
+            background-color: var(--bg-primary);
+            color: var(--text-primary);
+            height: 100vh;
+            display: flex;
+            transition: all 0.3s ease;
+        }
+
+        /* Sidebar */
+        .sidebar {
+            width: var(--sidebar-width);
+            background: var(--bg-secondary);
+            border-right: 1px solid var(--border);
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            flex-shrink: 0;
+            transition: transform 0.3s ease;
+        }
+
+        .sidebar-header {
+            padding: 16px;
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .sidebar-title {
+            font-size: 16px;
+            font-weight: 600;
+        }
+
+        .new-chat-btn {
+            background: var(--text-primary);
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 8px;
+            cursor: pointer;
+            font-size: 14px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+            transition: opacity 0.2s;
+        }
+
+        .new-chat-btn:hover {
+            opacity: 0.8;
+        }
+
+        .chat-list {
+            flex: 1;
+            overflow-y: auto;
+            padding: 8px;
+        }
+
+        .chat-item {
+            padding: 12px;
+            border-radius: 8px;
+            cursor: pointer;
+            margin-bottom: 4px;
+            transition: background 0.2s;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+        }
+
+        .chat-item:hover {
+            background: var(--bg-tertiary);
+        }
+
+        .chat-item.active {
+            background: var(--bg-tertiary);
+        }
+
+        .chat-item-info {
+            flex: 1;
+            overflow: hidden;
+        }
+
+        .chat-item-title {
+            font-size: 14px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+
+        .chat-item-date {
+            font-size: 12px;
+            color: var(--text-secondary);
+            margin-top: 2px;
+        }
+
+        .chat-item-actions {
+            display: none;
+            gap: 4px;
+        }
+
+        .chat-item:hover .chat-item-actions {
+            display: flex;
+        }
+
+        .chat-item-btn {
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 4px;
+            color: var(--text-secondary);
+            border-radius: 4px;
+        }
+
+        .chat-item-btn:hover {
+            background: var(--bg-primary);
+            color: var(--text-primary);
+        }
+
+        /* Main Area */
+        .main-area {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            height: 100vh;
+            overflow: hidden;
+        }
+
+        /* Header */
+        .header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 12px 20px;
+            background: transparent;
+            border-bottom: 1px solid var(--border);
+        }
+
+        .logo {
+            font-size: 18px;
+            font-weight: 600;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .model-selector {
+            position: relative;
+        }
+
+        .model-btn {
+            background: transparent;
+            border: none;
+            color: var(--text-secondary);
+            padding: 8px 12px;
+            border-radius: 8px;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            gap: 4px;
+            font-size: 16px;
+            font-weight: 500;
+            transition: color 0.2s;
+        }
+
+        .model-btn:hover {
+            color: var(--text-primary);
+            background: var(--bg-secondary);
+        }
+
+        .model-dropdown {
+            position: absolute;
+            top: 100%;
+            right: 0;
+            margin-top: 8px;
+            background: var(--bg-primary);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            overflow: hidden;
+            display: none;
+            min-width: 200px;
+            z-index: 100;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
+        }
+
+        .model-dropdown.show {
+            display: block;
+        }
+
+        .model-option {
+            padding: 12px 16px;
+            cursor: pointer;
+            transition: background 0.2s;
+        }
+
+        .model-option:hover {
+            background: var(--bg-secondary);
+        }
+
+        .model-option.selected {
+            background: var(--bg-secondary);
+            font-weight: 600;
+        }
+
+        .model-name {
+            font-size: 14px;
+            margin-bottom: 2px;
+        }
+
+        .model-desc {
+            font-size: 12px;
+            color: var(--text-secondary);
+        }
+
+        /* Main Content Area */
+        .main-content {
+            flex: 1;
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+            overflow-y: auto;
+        }
+
+        body.has-chat .main-content {
+            justify-content: flex-start;
+            padding-bottom: 20px;
+        }
+
+        /* Welcome / Initial State */
+        .welcome-container {
+            text-align: center;
+            margin-bottom: 40px;
+        }
+
+        body.has-chat .welcome-container {
+            display: none;
+        }
+
+        .welcome-title {
+            font-size: 32px;
+            font-weight: 500;
+            margin-bottom: 30px;
+            color: var(--text-primary);
+        }
+
+        /* Chat Messages */
+        .chat-messages {
+            display: none;
+            width: 100%;
+        }
+
+        body.has-chat .chat-messages {
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+        }
+
+        .message {
+            width: 100%;
+            animation: fadeIn 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+            from {
+                opacity: 0;
+                transform: translateY(10px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .message-user {
+            display: flex;
+            justify-content: flex-end;
+        }
+
+        .message-user .message-content {
+            background: var(--bg-secondary);
+            padding: 10px 20px;
+            border-radius: 20px;
+            max-width: 80%;
+        }
+
+        .message-assistant {
+            display: flex;
+            gap: 16px;
+            padding: 0 10px;
+        }
+
+        .avatar-assistant {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: linear-gradient(135deg, #4285f4, #ea4335);
+            flex-shrink: 0;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            color: white;
+            font-size: 14px;
+            font-weight: bold;
+        }
+
+        .message-content {
+            line-height: 1.6;
+            font-size: 16px;
+        }
+
+        /* Input Area */
+        .input-container {
+            width: 100%;
+            max-width: 800px;
+            padding: 20px;
+            background: var(--bg-primary);
+            margin: 0 auto;
+        }
+
+        .input-box {
+            background: #ffffff;
+            border: 1px solid transparent;
+            box-shadow: 0 0 15px rgba(0, 0, 0, 0.1);
+            border-radius: 30px;
+            padding: 12px 20px;
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            transition: all 0.3s;
+        }
+
+        .input-box:focus-within {
+            box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
+            border-color: rgba(0, 0, 0, 0.1);
+        }
+
+        .plus-btn {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            border: none;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s;
+        }
+
+        .plus-btn:hover {
+            background: #e0e0e0;
+        }
+
+        #user-input {
+            flex: 1;
+            border: none;
+            background: transparent;
+            font-size: 16px;
+            padding: 4px 0;
+            outline: none;
+            resize: none;
+            max-height: 150px;
+            font-family: inherit;
+        }
+
+        #user-input::placeholder {
+            color: #999;
+        }
+
+        .send-btn {
+            background: #e0e0e0;
+            border: none;
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            cursor: pointer;
+            color: var(--text-primary);
+            transition: all 0.2s;
+        }
+
+        .send-btn.active {
+            background: var(--text-primary);
+            color: white;
+        }
+
+        /* Markdown Styles */
+
+        /* 代码块容器 - 浅灰卡片风格 */
+        .code-block-wrapper {
+            margin: 16px 0;
+            border-radius: 8px;
+            overflow: hidden;
+            background: #f8f8f8;
+            border: 1px solid #e0e0e0;
+        }
+
+        /* 代码块头部 */
+        .code-block-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            padding: 8px 12px;
+            background: #f0f0f0;
+            border-bottom: 1px solid #e0e0e0;
+        }
+
+        .code-block-lang {
+            font-size: 13px;
+            color: #666;
+            font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+        }
+
+        .code-copy-btn {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            gap: 4px;
+            background: transparent;
+            border: none;
+            color: #666;
+            font-size: 13px;
+            cursor: pointer;
+            padding: 4px 8px;
+            border-radius: 4px;
+            transition: all 0.2s;
+            flex-shrink: 0;
+            min-width: 28px;
+            min-height: 28px;
+        }
+
+        .code-copy-btn:hover {
+            background: #e0e0e0;
+            color: #333;
+        }
+
+        .code-copy-btn.copied {
+            color: #22c55e;
+        }
+
+        /* 代码内容区域 */
+        .code-block-wrapper pre {
+            margin: 0;
+            padding: 16px;
+            overflow-x: auto;
+            background: #f8f8f8;
+        }
+
+        .code-block-wrapper pre code {
+            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+            font-size: 14px;
+            line-height: 1.6;
+            color: #333;
+            background: transparent;
+            padding: 0;
+            display: block;
+            white-space: pre;
+        }
+
+        /* 行内代码 */
+        .message-content code {
+            background: #f6f8fa;
+            padding: 2px 6px;
+            border-radius: 4px;
+            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+            font-size: 0.9em;
+            color: #24292e;
+            border: 1px solid #e1e4e8;
+        }
+
+        /* 代码块里的 code 不需要额外背景 */
+        .code-block-wrapper pre code {
+            background: transparent;
+            padding: 0;
+            border: none;
+            color: #333;
+            border-radius: 0;
+        }
+
+        /* 列表样式 */
+        .message-content ul,
+        .message-content ol {
+            margin: 12px 0;
+            padding-left: 20px;
+        }
+
+        .message-content ul {
+            list-style-type: disc;
+        }
+
+        .message-content ol {
+            list-style-type: decimal;
+        }
+
+        .message-content ul li,
+        .message-content ol li {
+            margin: 6px 0;
+            line-height: 1.7;
+            color: #333;
+        }
+
+        /* 字段间隔 */
+        .message-content > p,
+        .message-content > div:not(.code-block-wrapper) {
+            margin: 12px 0;
+            line-height: 1.7;
+        }
+
+        .message-content > *:first-child {
+            margin-top: 0;
+        }
+
+        .message-content > *:last-child {
+            margin-bottom: 0;
+        }
+
+        /* 标题样式 */
+        .message-content h3 {
+            font-size: 16px;
+            font-weight: 600;
+            margin: 20px 0 12px 0;
+            color: #333;
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .message-content h3:first-child {
+            margin-top: 0;
+        }
+
+        /* 表格样式 */
+        .message-content table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 16px 0;
+            font-size: 14px;
+        }
+
+        .message-content table th,
+        .message-content table td {
+            padding: 12px 16px;
+            text-align: left;
+            border-bottom: 1px solid #e5e5e5;
+        }
+
+        .message-content table th {
+            font-weight: 600;
+            color: #333;
+            background: #f9f9f9;
+            border-bottom: 2px solid #e0e0e0;
+        }
+
+        .message-content table td {
+            color: #555;
+        }
+
+        .message-content table tr:hover td {
+            background: #fafafa;
+        }
+
+        .message-content table td:first-child {
+            color: #24292e;
+            font-family: 'SFMono-Regular', Consolas, monospace;
+            white-space: nowrap;
+        }
+
+        /* Pair rows for two-column tables */
+        .code-pairs {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+            margin: 12px 0;
+        }
+
+        .pair-row {
+            display: flex;
+            gap: 10px;
+            align-items: flex-start;
+            padding: 10px 12px;
+            background: var(--bg-tertiary);
+            border: 1px solid var(--border);
+            border-radius: 8px;
+        }
+
+        .pair-code {
+            white-space: pre-wrap;
+            font-family: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, monospace;
+            color: #24292e;
+            background: #f6f8fa;
+            padding: 2px 6px;
+            border-radius: 4px;
+            min-width: 120px;
+        }
+
+        .pair-desc {
+            color: var(--text-primary);
+            line-height: 1.6;
+            flex: 1;
+        }
+
+        /* Scrollbar */
+        ::-webkit-scrollbar {
+            width: 6px;
+        }
+
+        ::-webkit-scrollbar-track {
+            background: transparent;
+        }
+
+        ::-webkit-scrollbar-thumb {
+            background: #ddd;
+            border-radius: 3px;
+        }
+
+        ::-webkit-scrollbar-thumb:hover {
+            background: #ccc;
+        }
+
+        /* Loading Animation */
+        .loading-dots {
+            display: inline-flex;
+            gap: 4px;
+        }
+
+        .loading-dots span {
+            width: 6px;
+            height: 6px;
+            background: var(--text-secondary);
+            border-radius: 50%;
+            animation: bounce 1.4s infinite;
+        }
+
+        .loading-dots span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+
+        .loading-dots span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+
+        @keyframes bounce {
+            0%, 80%, 100% {
+                transform: translateY(0);
+            }
+            40% {
+                transform: translateY(-6px);
+            }
+        }
+
+        /* Empty state */
+        .empty-state {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            justify-content: center;
+            height: 200px;
+            color: var(--text-secondary);
+        }
+
+        .empty-state svg {
+            margin-bottom: 12px;
+            opacity: 0.5;
+        }
+
+        /* Thinking Block - 推理过程样式 */
+        .thinking-block {
+            margin-bottom: 16px;
+            font-size: 14px;
+        }
+
+        .thinking-header {
+            padding: 4px 0;
+            cursor: pointer;
+            display: inline-flex;
+            align-items: center;
+            gap: 6px;
+            user-select: none;
+        }
+
+        .thinking-header:hover {
+            opacity: 0.8;
+        }
+
+        .thinking-icon {
+            transition: transform 0.2s;
+            flex-shrink: 0;
+            color: #c67b37;
+        }
+
+        .thinking-block:not(.collapsed) .thinking-icon {
+            transform: rotate(180deg);
+        }
+
+        .thinking-title {
+            font-weight: 400;
+            color: #c67b37;
+            font-size: 14px;
+        }
+
+        .thinking-content {
+            padding: 8px 0 8px 0;
+            color: #333;
+            line-height: 1.8;
+        }
+
+        .thinking-block.collapsed .thinking-content {
+            display: none;
+        }
+
+        .thinking-item {
+            font-weight: 400;
+            color: #333;
+            padding: 1px 0;
+        }
+
+        .thinking-note {
+            font-size: 12px;
+            color: #999;
+            margin-top: 6px;
+            font-style: italic;
+        }
+
+        /* Modal 弹窗样式 */
+        .modal-overlay {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.5);
+            z-index: 2000;
+            align-items: center;
+            justify-content: center;
+        }
+
+        .modal-overlay.show {
+            display: flex;
+        }
+
+        .modal {
+            background: white;
+            border-radius: 12px;
+            padding: 24px;
+            max-width: 400px;
+            width: 90%;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+        }
+
+        .modal-title {
+            font-size: 18px;
+            font-weight: 600;
+            margin-bottom: 12px;
+        }
+
+        .modal-message {
+            color: #666;
+            margin-bottom: 20px;
+            line-height: 1.5;
+        }
+
+        .modal-buttons {
+            display: flex;
+            gap: 12px;
+            justify-content: flex-end;
+        }
+
+        .modal-btn {
+            padding: 10px 20px;
+            border-radius: 8px;
+            border: none;
+            cursor: pointer;
+            font-size: 14px;
+            font-weight: 500;
+            transition: opacity 0.2s;
+        }
+
+        .modal-btn:hover {
+            opacity: 0.8;
+        }
+
+        .modal-btn-cancel {
+            background: #f0f0f0;
+            color: #333;
+        }
+
+        .modal-btn-danger {
+            background: #ef4444;
+            color: white;
+        }
+
+        /* Mobile responsive */
+        @media (max-width: 768px) {
+            .sidebar {
+                position: fixed;
+                left: 0;
+                top: 0;
+                z-index: 1000;
+                transform: translateX(-100%);
+            }
+
+            .sidebar.open {
+                transform: translateX(0);
+            }
+
+            .sidebar-overlay {
+                display: none;
+                position: fixed;
+                top: 0;
+                left: 0;
+                right: 0;
+                bottom: 0;
+                background: rgba(0, 0, 0, 0.5);
+                z-index: 999;
+            }
+
+            .sidebar-overlay.show {
+                display: block;
+            }
+
+            .menu-toggle {
+                display: flex !important;
+            }
+        }
+
+        .menu-toggle {
+            display: none;
+            background: none;
+            border: none;
+            cursor: pointer;
+            padding: 8px;
+        }
+
+        /* 图片预览样式 */
+        .image-preview-container {
+            display: none;
+            padding: 8px 12px;
+            background: var(--bg-secondary);
+            border-radius: 16px 16px 0 0;
+            margin-bottom: -8px;
+        }
+
+        .image-preview-container.has-images {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+        }
+
+        .image-preview-item {
+            position: relative;
+            width: 80px;
+            height: 80px;
+            border-radius: 8px;
+            overflow: hidden;
+            border: 1px solid var(--border);
+        }
+
+        .image-preview-item img {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+
+        .image-preview-remove {
+            position: absolute;
+            top: 4px;
+            right: 4px;
+            width: 20px;
+            height: 20px;
+            border-radius: 50%;
+            background: rgba(0, 0, 0, 0.6);
+            color: white;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 14px;
+            line-height: 1;
+            transition: background 0.2s;
+        }
+
+        .image-preview-remove:hover {
+            background: rgba(0, 0, 0, 0.8);
+        }
+
+        /* 消息中的图片样式 */
+        .message-images {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-bottom: 8px;
+        }
+
+        .message-image {
+            max-width: 200px;
+            max-height: 200px;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+
+        .message-image:hover {
+            transform: scale(1.02);
+        }
+
+        /* 图片放大查看 */
+        .image-lightbox {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background: rgba(0, 0, 0, 0.9);
+            z-index: 3000;
+            align-items: center;
+            justify-content: center;
+            cursor: zoom-out;
+        }
+
+        .image-lightbox.show {
+            display: flex;
+        }
+
+        .image-lightbox img {
+            max-width: 90%;
+            max-height: 90%;
+            object-fit: contain;
+        }
+
+        /* AI 生成的图片样式 */
+        .generated-images {
+            display: inline-flex;
+            flex-wrap: wrap;
+            gap: 8px;
+            margin-top: 12px;
+            padding: 8px;
+            background: var(--bg-secondary);
+            border-radius: 12px;
+        }
+
+        .generated-image-item {
+            position: relative;
+            border-radius: 8px;
+            overflow: hidden;
+            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+            line-height: 0;
+        }
+
+        .generated-image-item img {
+            max-width: 400px;
+            max-height: 400px;
+            display: block;
+            cursor: pointer;
+            transition: transform 0.2s;
+        }
+
+        .generated-image-item img:hover {
+            transform: scale(1.02);
+        }
+
+        .generated-image-actions {
+            position: absolute;
+            bottom: 8px;
+            right: 8px;
+            display: flex;
+            gap: 6px;
+        }
+
+        .generated-image-btn {
+            width: 32px;
+            height: 32px;
+            border-radius: 50%;
+            background: rgba(0, 0, 0, 0.6);
+            color: white;
+            border: none;
+            cursor: pointer;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            transition: background 0.2s;
+        }
+
+        .generated-image-btn:hover {
+            background: rgba(0, 0, 0, 0.8);
+        }
+
+        /* +号弹出菜单样式 */
+        .plus-menu-container {
+            position: relative;
+        }
+
+        .plus-menu {
+            position: absolute;
+            bottom: 100%;
+            left: 0;
+            margin-bottom: 8px;
+            background: var(--bg-primary);
+            border: 1px solid var(--border);
+            border-radius: 12px;
+            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+            display: none;
+            min-width: 160px;
+            z-index: 100;
+            overflow: hidden;
+        }
+
+        .plus-menu.show {
+            display: block;
+        }
+
+        .plus-menu-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            padding: 12px 16px;
+            cursor: pointer;
+            transition: background 0.2s;
+            font-size: 14px;
+            color: var(--text-primary);
+        }
+
+        .plus-menu-item:hover {
+            background: var(--bg-secondary);
+        }
+
+        .plus-menu-item svg {
+            flex-shrink: 0;
+        }
+
+        /* 图片生成标签样式 */
+        .image-gen-tag {
+            display: none;
+            align-items: center;
+            gap: 4px;
+            padding: 4px 8px;
+            background: transparent;
+            border-radius: 6px;
+            font-size: 14px;
+            color: #1a73e8;
+            cursor: default;
+            transition: background 0.2s;
+        }
+
+        .image-gen-tag.active {
+            display: flex;
+        }
+
+        .image-gen-tag svg {
+            flex-shrink: 0;
+            color: #1a73e8;
+        }
+
+        .image-gen-tag-close {
+            display: none;
+            width: 18px;
+            height: 18px;
+            border-radius: 50%;
+            border: none;
+            background: #e8f0fe;
+            color: #1a73e8;
+            cursor: pointer;
+            align-items: center;
+            justify-content: center;
+            margin-left: 2px;
+            padding: 0;
+            transition: background 0.2s;
+        }
+
+        .image-gen-tag:hover .image-gen-tag-close {
+            display: flex;
+        }
+
+        .image-gen-tag-close:hover {
+            background: #d2e3fc;
+        }
+    </style>
+</head>
+
+<body>
+    <!-- Image Lightbox -->
+    <div class="image-lightbox" id="image-lightbox" onclick="closeLightbox()">
+        <img src="" alt="放大图片" id="lightbox-img">
+    </div>
+
+    <!-- Delete Confirm Modal -->
+    <div class="modal-overlay" id="delete-modal">
+        <div class="modal">
+            <div class="modal-title">删除对话</div>
+            <div class="modal-message">确定要删除这个对话吗？此操作无法撤销。</div>
+            <div class="modal-buttons">
+                <button class="modal-btn modal-btn-cancel" onclick="closeDeleteModal()">取消</button>
+                <button class="modal-btn modal-btn-danger" onclick="confirmDelete()">删除</button>
+            </div>
+        </div>
+    </div>
+
+    <!-- Sidebar Overlay for mobile -->
+    <div class="sidebar-overlay" id="sidebar-overlay" onclick="toggleSidebar()"></div>
+
+    <!-- Sidebar -->
+    <div class="sidebar" id="sidebar">
+        <div class="sidebar-header">
+            <span class="sidebar-title">Gemini Chat</span>
+            <button class="new-chat-btn" onclick="newChat()">
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M12 5v14M5 12h14" />
+                </svg>
+                新对话
+            </button>
+        </div>
+        <div class="chat-list" id="chat-list">
+            <!-- Chat items will be loaded here -->
+        </div>
+    </div>
+
+    <!-- Main Area -->
+    <div class="main-area">
+        <div class="header">
+            <div style="display: flex; align-items: center; gap: 12px;">
+                <button class="menu-toggle" onclick="toggleSidebar()">
+                    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M3 12h18M3 6h18M3 18h18" />
+                    </svg>
+                </button>
+                <div class="logo">
+                    <span id="current-chat-title">Gemini Chat</span>
+                </div>
+            </div>
+            <div style="display: flex; gap: 12px; align-items: center;">
+                <div class="model-selector">
+                    <button class="model-btn" onclick="toggleDropdown()">
+                        <span id="current-model">gemini-3-pro-preview</span>
+                        <svg width="10" height="10" viewBox="0 0 12 12" fill="currentColor">
+                            <path d="M6 8L2 4h8L6 8z" />
+                        </svg>
+                    </button>
+                    <div class="model-dropdown" id="model-dropdown">
+                        <div class="model-option" onclick="selectModel('gemini-auto')">
+                            <div class="model-name">gemini-auto</div>
+                            <div class="model-desc">自动选择</div>
+                        </div>
+                        <div class="model-option" onclick="selectModel('gemini-2.5-flash')">
+                            <div class="model-name">gemini-2.5-flash</div>
+                            <div class="model-desc">快速响应</div>
+                        </div>
+                        <div class="model-option" onclick="selectModel('gemini-2.5-pro')">
+                            <div class="model-name">gemini-2.5-pro</div>
+                            <div class="model-desc">平衡推理</div>
+                        </div>
+                        <div class="model-option" onclick="selectModel('gemini-3-pro')">
+                            <div class="model-name">gemini-3-pro</div>
+                            <div class="model-desc">旗舰模型</div>
+                        </div>
+                        <div class="model-option selected" onclick="selectModel('gemini-3-pro-preview')">
+                            <div class="model-name">gemini-3-pro-preview</div>
+                            <div class="model-desc">预览版旗舰</div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="main-content" id="main-content">
+            <div class="welcome-container">
+                <h1 class="welcome-title">你今天在想什么？</h1>
+            </div>
+
+            <div class="chat-messages" id="chat-container">
+                <!-- Messages will appear here -->
+            </div>
+        </div>
+
+        <div class="input-container">
+            <div class="image-preview-container" id="image-preview-container">
+                <!-- 图片预览会动态添加到这里 -->
+            </div>
+            <div class="input-box">
+                <div class="plus-menu-container">
+                    <button class="plus-btn" onclick="togglePlusMenu(event)">
+                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M12 5v14M5 12h14" />
+                        </svg>
+                    </button>
+                    <div class="plus-menu" id="plus-menu">
+                        <div class="plus-menu-item" onclick="toggleImageGenMode()">
+                            <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                                <circle cx="8.5" cy="8.5" r="1.5"/>
+                                <polyline points="21 15 16 10 5 21"/>
+                            </svg>
+                            <span>生成图片</span>
+                        </div>
+                    </div>
+                </div>
+                <div class="image-gen-tag" id="image-gen-tag">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/>
+                        <circle cx="8.5" cy="8.5" r="1.5"/>
+                        <polyline points="21 15 16 10 5 21"/>
+                    </svg>
+                    <span>图片</span>
+                    <button class="image-gen-tag-close" onclick="toggleImageGenMode()" title="取消生成图片">
+                        <svg width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                            <path d="M18 6L6 18M6 6l12 12"/>
+                        </svg>
+                    </button>
+                </div>
+                <textarea id="user-input" rows="1" placeholder="询问任何问题" onkeydown="handleKeyDown(event)"></textarea>
+                <button class="send-btn" id="send-btn" onclick="sendMessage()">
+                    <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                        <path d="M22 2L11 13M22 2l-7 20-4-9-9-4 20-7z" />
+                    </svg>
+                </button>
+            </div>
+        </div>
+    </div>
+
+    <script src="https://cdn.jsdelivr.net/npm/marked@12.0.2/marked.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/highlight.min.js"></script>
+    <script>
+        let currentModel = 'gemini-3-pro-preview';
+        let isGenerating = false;
+        let messages = [];
+        let currentChatId = null;
+        let chatList = [];
+        let pendingImages = []; // 待发送的图片列表 [{dataUrl: string, file: File}]
+        let isImageGenMode = false; // 图片生成模式
+
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            loadChatList();
+            setupTextarea();
+            setupPasteHandler();
+            restoreLastChat();
+            updateModelUI();
+        });
+
+        // 恢复上次的对话记录
+        function restoreLastChat() {
+            const savedChatId = localStorage.getItem('currentChatId');
+            if (savedChatId) {
+                // 延迟加载，等待 chatList 准备完成
+                setTimeout(() => {
+                    if (chatList.some(c => c.id === savedChatId)) {
+                        loadChat(savedChatId);
+                    } else {
+                        localStorage.removeItem('currentChatId');
+                    }
+                }, 300);
+            }
+        }
+
+        // 保存当前对话 ID 到 localStorage
+        function saveCurrentChat() {
+            if (currentChatId) {
+                localStorage.setItem('currentChatId', currentChatId);
+            } else {
+                localStorage.removeItem('currentChatId');
+            }
+        }
+
+        // 更新模型选择器 UI
+        function updateModelUI() {
+            document.getElementById('current-model').textContent = currentModel;
+            document.querySelectorAll('.model-option').forEach(opt => {
+                opt.classList.remove('selected');
+                if (opt.querySelector('.model-name').textContent === currentModel) {
+                    opt.classList.add('selected');
+                }
+            });
+        }
+
+        function setupTextarea() {
+            const textarea = document.getElementById('user-input');
+            textarea.addEventListener('input', function () {
+                this.style.height = 'auto';
+                this.style.height = Math.min(this.scrollHeight, 150) + 'px';
+                updateSendButton();
+            });
+        }
+
+        // 设置粘贴处理器
+        function setupPasteHandler() {
+            const textarea = document.getElementById('user-input');
+
+            // 监听粘贴事件
+            textarea.addEventListener('paste', async (e) => {
+                const items = e.clipboardData?.items;
+                if (!items) return;
+
+                for (const item of items) {
+                    if (item.type.startsWith('image/')) {
+                        e.preventDefault();
+                        const file = item.getAsFile();
+                        if (file) {
+                            await addImageFromFile(file);
+                        }
+                        break;
+                    }
+                }
+            });
+
+            // 监听拖放事件
+            const inputContainer = document.querySelector('.input-container');
+
+            inputContainer.addEventListener('dragover', (e) => {
+                e.preventDefault();
+                inputContainer.style.borderColor = 'var(--accent)';
+            });
+
+            inputContainer.addEventListener('dragleave', (e) => {
+                e.preventDefault();
+                inputContainer.style.borderColor = '';
+            });
+
+            inputContainer.addEventListener('drop', async (e) => {
+                e.preventDefault();
+                inputContainer.style.borderColor = '';
+
+                const files = e.dataTransfer?.files;
+                if (files) {
+                    for (const file of files) {
+                        if (file.type.startsWith('image/')) {
+                            await addImageFromFile(file);
+                        }
+                    }
+                }
+            });
+        }
+
+        // 从文件添加图片
+        async function addImageFromFile(file) {
+            return new Promise((resolve) => {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    const dataUrl = e.target.result;
+                    pendingImages.push({ dataUrl, file });
+                    renderImagePreviews();
+                    updateSendButton();
+                    resolve();
+                };
+                reader.readAsDataURL(file);
+            });
+        }
+
+        // 渲染图片预览
+        function renderImagePreviews() {
+            const container = document.getElementById('image-preview-container');
+
+            if (pendingImages.length === 0) {
+                container.classList.remove('has-images');
+                container.innerHTML = '';
+                return;
+            }
+
+            container.classList.add('has-images');
+            container.innerHTML = pendingImages.map((img, index) => `
+                <div class="image-preview-item">
+                    <img src="${img.dataUrl}" alt="预览图片">
+                    <button class="image-preview-remove" onclick="removeImage(${index})" title="移除图片">×</button>
+                </div>
+            `).join('');
+        }
+
+        // 移除图片
+        function removeImage(index) {
+            pendingImages.splice(index, 1);
+            renderImagePreviews();
+            updateSendButton();
+        }
+
+        // 清空待发送的图片
+        function clearPendingImages() {
+            pendingImages = [];
+            renderImagePreviews();
+        }
+
+        // 图片放大查看
+        function openLightbox(src) {
+            const lightbox = document.getElementById('image-lightbox');
+            const img = document.getElementById('lightbox-img');
+            img.src = src;
+            lightbox.classList.add('show');
+        }
+
+        function closeLightbox() {
+            document.getElementById('image-lightbox').classList.remove('show');
+        }
+
+        // 下载生成的图片
+        function downloadGeneratedImage(base64Data, fileName, mimeType) {
+            const link = document.createElement('a');
+            link.href = `data:${mimeType};base64,${base64Data}`;
+            link.download = fileName;
+            document.body.appendChild(link);
+            link.click();
+            document.body.removeChild(link);
+        }
+
+        // ESC 关闭 lightbox
+        document.addEventListener('keydown', (e) => {
+            if (e.key === 'Escape') {
+                closeLightbox();
+                closePlusMenu();
+            }
+        });
+
+        // +号菜单功能
+        function togglePlusMenu(event) {
+            event.stopPropagation();
+            const menu = document.getElementById('plus-menu');
+            menu.classList.toggle('show');
+        }
+
+        function closePlusMenu() {
+            const menu = document.getElementById('plus-menu');
+            menu.classList.remove('show');
+        }
+
+        // 点击其他地方关闭菜单
+        document.addEventListener('click', (e) => {
+            if (!e.target.closest('.plus-menu-container')) {
+                closePlusMenu();
+            }
+        });
+
+        // 切换图片生成模式
+        function toggleImageGenMode() {
+            isImageGenMode = !isImageGenMode;
+            const tag = document.getElementById('image-gen-tag');
+            const textarea = document.getElementById('user-input');
+
+            if (isImageGenMode) {
+                tag.classList.add('active');
+                textarea.placeholder = '描述你想生成的图片...';
+            } else {
+                tag.classList.remove('active');
+                textarea.placeholder = '询问任何问题';
+            }
+
+            textarea.focus();
+            closePlusMenu();
+        }
+
+        // 重置图片生成模式
+        function resetImageGenMode() {
+            isImageGenMode = false;
+            const tag = document.getElementById('image-gen-tag');
+            const textarea = document.getElementById('user-input');
+            tag.classList.remove('active');
+            textarea.placeholder = '询问任何问题';
+        }
+
+        function updateSendButton() {
+            const input = document.getElementById('user-input');
+            const btn = document.getElementById('send-btn');
+            // 有文字或有图片时激活发送按钮
+            if (input.value.trim() || pendingImages.length > 0) {
+                btn.classList.add('active');
+            } else {
+                btn.classList.remove('active');
+            }
+        }
+
+        // Sidebar functions
+        function toggleSidebar() {
+            document.getElementById('sidebar').classList.toggle('open');
+            document.getElementById('sidebar-overlay').classList.toggle('show');
+        }
+
+        async function loadChatList() {
+            try {
+                const response = await fetch('/v1/chats');
+                const data = await response.json();
+                chatList = data.chats || [];
+                renderChatList();
+            } catch (error) {
+                console.error('Failed to load chats:', error);
+            }
+        }
+
+        function renderChatList() {
+            const container = document.getElementById('chat-list');
+            if (chatList.length === 0) {
+                container.innerHTML = `
+                    <div class="empty-state">
+                        <svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1">
+                            <path d="M21 15a2 2 0 0 1-2 2H7l-4 4V5a2 2 0 0 1 2-2h14a2 2 0 0 1 2 2z"/>
+                        </svg>
+                        <span>暂无对话记录</span>
+                    </div>
+                `;
+                return;
+            }
+
+            container.innerHTML = chatList.map(chat => `
+                <div class="chat-item ${chat.id === currentChatId ? 'active' : ''}"
+                     onclick="loadChat('${chat.id}')"
+                     data-chat-id="${chat.id}">
+                    <div class="chat-item-info">
+                        <div class="chat-item-title">${escapeHtml(chat.title)}</div>
+                        <div class="chat-item-date">${formatDate(chat.updated_at)}</div>
+                    </div>
+                    <div class="chat-item-actions">
+                        <button class="chat-item-btn" onclick="event.stopPropagation(); deleteChat('${chat.id}')" title="删除">
+                            <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                <path d="M3 6h18M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/>
+                            </svg>
+                        </button>
+                    </div>
+                </div>
+            `).join('');
+        }
+
+        function formatDate(dateStr) {
+            const date = new Date(dateStr);
+            const now = new Date();
+            const diffMs = now - date;
+            const diffMins = Math.floor(diffMs / 60000);
+            const diffHours = Math.floor(diffMs / 3600000);
+            const diffDays = Math.floor(diffMs / 86400000);
+
+            if (diffMins < 1) return '刚刚';
+            if (diffMins < 60) return `${diffMins} 分钟前`;
+            if (diffHours < 24) return `${diffHours} 小时前`;
+            if (diffDays < 7) return `${diffDays} 天前`;
+            return date.toLocaleDateString('zh-CN');
+        }
+
+        async function loadChat(chatId) {
+            try {
+                const response = await fetch(`/v1/chats/${chatId}`);
+                if (!response.ok) throw new Error('Chat not found');
+
+                const data = await response.json();
+
+                currentChatId = chatId;
+                messages = data.messages.map(m => ({ role: m.role, content: m.content }));
+
+                // Update UI
+                document.body.classList.add('has-chat');
+                document.getElementById('current-chat-title').textContent = data.title;
+
+                // Render messages with thinking and images
+                const container = document.getElementById('chat-container');
+                container.innerHTML = '';
+                data.messages.forEach(msg => {
+                    // 传入历史图片（如果有）
+                    const historyImages = msg.images || [];
+                    const msgDiv = addMessageToDOM(msg.role, msg.content, [], historyImages);
+
+                    // 如果是助手消息且有推理过程，渲染推理折叠块
+                    if (msg.role === 'assistant' && msg.thinking) {
+                        const thinkingContainer = msgDiv.querySelector('.thinking-container');
+                        if (thinkingContainer) {
+                            // 历史消息默认折叠 (isCollapsed = true)
+                            thinkingContainer.innerHTML = createThinkingBlock(msg.thinking, true);
+                        }
+                    }
+                });
+
+                // Update active state in sidebar
+                document.querySelectorAll('.chat-item').forEach(item => {
+                    item.classList.toggle('active', item.dataset.chatId === chatId);
+                });
+
+                // Scroll to bottom
+                const mainContent = document.getElementById('main-content');
+                mainContent.scrollTop = mainContent.scrollHeight;
+
+                // 保存当前对话 ID
+                saveCurrentChat();
+
+                // Close sidebar on mobile
+                if (window.innerWidth <= 768) {
+                    toggleSidebar();
+                }
+            } catch (error) {
+                console.error('Failed to load chat:', error);
+            }
+        }
+
+        // 删除对话相关
+        let pendingDeleteChatId = null;
+
+        function deleteChat(chatId) {
+            pendingDeleteChatId = chatId;
+            document.getElementById('delete-modal').classList.add('show');
+        }
+
+        function closeDeleteModal() {
+            document.getElementById('delete-modal').classList.remove('show');
+            pendingDeleteChatId = null;
+        }
+
+        async function confirmDelete() {
+            if (!pendingDeleteChatId) return;
+
+            try {
+                const response = await fetch(`/v1/chats/${pendingDeleteChatId}`, { method: 'DELETE' });
+                if (response.ok) {
+                    chatList = chatList.filter(c => c.id !== pendingDeleteChatId);
+                    renderChatList();
+
+                    if (currentChatId === pendingDeleteChatId) {
+                        newChat();
+                    }
+                }
+            } catch (error) {
+                console.error('Failed to delete chat:', error);
+            }
+
+            closeDeleteModal();
+        }
+
+        function newChat() {
+            currentChatId = null;
+            messages = [];
+            document.body.classList.remove('has-chat');
+            document.getElementById('chat-container').innerHTML = '';
+            document.getElementById('current-chat-title').textContent = 'Gemini Chat';
+            document.getElementById('user-input').focus();
+            resetImageGenMode(); // 重置图片生成模式
+
+            // 清除已保存的对话 ID
+            saveCurrentChat();
+
+            // Update active state
+            document.querySelectorAll('.chat-item').forEach(item => {
+                item.classList.remove('active');
+            });
+
+            // Close sidebar on mobile
+            if (window.innerWidth <= 768) {
+                toggleSidebar();
+            }
+        }
+
+        // Model selector
+        function toggleDropdown() {
+            document.getElementById('model-dropdown').classList.toggle('show');
+        }
+
+        function selectModel(model) {
+            currentModel = model;
+            document.getElementById('current-model').textContent = model;
+            document.querySelectorAll('.model-option').forEach(opt => {
+                opt.classList.remove('selected');
+                if (opt.querySelector('.model-name').textContent === model) {
+                    opt.classList.add('selected');
+                }
+            });
+            toggleDropdown();
+        }
+
+        document.addEventListener('click', function (e) {
+            if (!e.target.closest('.model-selector')) {
+                document.getElementById('model-dropdown').classList.remove('show');
+            }
+        });
+
+        // Input handling
+        function handleKeyDown(e) {
+            if (e.key === 'Enter' && !e.shiftKey) {
+                e.preventDefault();
+                sendMessage();
+            }
+        }
+
+        // 复制代码功能
+        async function copyCode(button, codeId) {
+            const codeElement = document.getElementById(codeId);
+            if (!codeElement) return;
+
+            const code = codeElement.textContent;
+
+            // 复制成功后的 UI 更新
+            function showCopySuccess() {
+                button.classList.add('copied');
+                const svg = button.querySelector('svg');
+                const originalSvg = svg.innerHTML;
+                svg.innerHTML = '<polyline points="20 6 9 17 4 12"></polyline>';
+                setTimeout(() => {
+                    button.classList.remove('copied');
+                    svg.innerHTML = originalSvg;
+                }, 2000);
+            }
+
+            // Fallback 复制方法
+            function fallbackCopy() {
+                const textArea = document.createElement('textarea');
+                textArea.value = code;
+                textArea.style.position = 'fixed';
+                textArea.style.left = '-9999px';
+                document.body.appendChild(textArea);
+                textArea.select();
+                try {
+                    document.execCommand('copy');
+                    showCopySuccess();
+                } catch (e) {
+                    console.error('复制失败:', e);
+                }
+                document.body.removeChild(textArea);
+            }
+
+            // 尝试使用 Clipboard API
+            if (navigator.clipboard && navigator.clipboard.writeText) {
+                try {
+                    await navigator.clipboard.writeText(code);
+                    showCopySuccess();
+                } catch (err) {
+                    console.warn('Clipboard API 失败，使用 fallback:', err);
+                    fallbackCopy();
+                }
+            } else {
+                // Clipboard API 不可用，直接使用 fallback
+                fallbackCopy();
+            }
+        }
+
+        document.addEventListener('click', (event) => {
+            const button = event.target.closest('.code-copy-btn');
+            if (!button) return;
+            const codeId = button.dataset.codeId;
+            if (codeId) {
+                copyCode(button, codeId);
+            }
+        });
+
+        function escapeHtml(text) {
+            const div = document.createElement('div');
+            div.textContent = text;
+            return div.innerHTML;
+        }
+
+        function stripTags(html) {
+            return html.replace(/<\/?[^>]+(>|$)/g, '');
+        }
+
+        // Escape literal angle-bracket text (outside code) so DOMPurify/marked don't treat it as HTML and drop content.
+        function escapePseudoTags(markdown) {
+            // Split by code fences / inline code to avoid double-escaping code content
+            return markdown
+                .split(/(```[\s\S]*?```|`[^`]*`)/g)
+                .map(part => {
+                    if (part.startsWith('```') || part.startsWith('`')) return part; // keep code as-is
+                    return part.replace(/</g, '&lt;').replace(/>/g, '&gt;');
+                })
+                .join('');
+        }
+
+        // Debug logging for render pipeline (toggle as needed)
+        const RENDER_LOG = true;
+        function renderLog(stage, text) {
+            if (!RENDER_LOG) return;
+            const t = typeof text === 'string' ? text : (text === undefined || text === null ? '' : String(text));
+            const preview = t.slice(0, 400);
+            console.debug(`[render-log] ${stage} len=${t.length}`, preview);
+        }
+
+        // Preprocess tables: replace first-column content with placeholders so it won't be broken by Markdown parsing.
+        function preprocessTableCode(markdown) {
+            const lines = markdown.split('\n');
+            const placeholders = {};
+            let tableId = 0;
+            const out = [];
+
+            // 去除 Markdown 格式标记（反引号、加粗）
+            function stripMarkdownFormat(text) {
+                let result = text.trim();
+                // 去除多个反引号包裹: ``code`` -> code
+                while (result.startsWith('``') && result.endsWith('``') && result.length >= 4) {
+                    result = result.slice(2, -2);
+                }
+                // 去除单个反引号包裹: `code` -> code
+                if (result.startsWith('`') && result.endsWith('`') && result.length >= 2) {
+                    result = result.slice(1, -1);
+                }
+                // 去除加粗包裹: **text** -> text
+                if (result.startsWith('**') && result.endsWith('**') && result.length >= 4) {
+                    result = result.slice(2, -2);
+                }
+                // 去除斜体包裹: *text* -> text (单个星号)
+                if (result.startsWith('*') && result.endsWith('*') && !result.startsWith('**') && result.length >= 2) {
+                    result = result.slice(1, -1);
+                }
+                return result.trim();
+            }
+
+            for (let i = 0; i < lines.length; i++) {
+                const line = lines[i];
+                const next = lines[i + 1] || '';
+                const isHeader = /\|/.test(line);
+                const isSeparator = /^\s*\|?\s*[:\-]+\s*(\|\s*[:\-]+\s*)+\|?\s*$/.test(next);
+
+                // Detect table start: header line + separator line
+                if (isHeader && isSeparator) {
+                    out.push(line);
+                    out.push(next);
+                    i++; // skip separator, already pushed
+                    let rowIndex = 0;
+
+                    // Process table body rows
+                    while (i + 1 < lines.length) {
+                        const row = lines[i + 1];
+                        const trimmed = row.trim();
+                        if (!trimmed || !/\|/.test(row)) break;
+
+                        const hasLeading = row.startsWith('|');
+                        const hasTrailing = row.endsWith('|');
+                        const body = row.slice(hasLeading ? 1 : 0, row.length - (hasTrailing ? 1 : 0));
+
+                        // Split only on the first unescaped pipe to get first/second cell
+                        let splitIdx = -1;
+                        let escaped = false;
+                        for (let k = 0; k < body.length; k++) {
+                            const ch = body[k];
+                            if (escaped) {
+                                escaped = false;
+                                continue;
+                            }
+                            if (ch === '\\') {
+                                escaped = true;
+                                continue;
+                            }
+                            if (ch === '|') {
+                                splitIdx = k;
+                                break;
+                            }
+                        }
+
+                        if (splitIdx === -1) {
+                            out.push(row);
+                            i++;
+                            continue;
+                        }
+
+                        const firstCell = body.slice(0, splitIdx).trim();
+                        const restCells = body.slice(splitIdx + 1);
+                        const placeholder = `@@TABLECODE-${tableId}-${rowIndex}@@`;
+                        placeholders[placeholder] = escapeHtml(stripMarkdownFormat(firstCell));
+
+                        const rebuilt =
+                            (hasLeading ? '|' : '') +
+                            placeholder +
+                            '|' +
+                            restCells +
+                            (hasTrailing ? '|' : '');
+                        out.push(rebuilt);
+                        i++;
+                        rowIndex++;
+                    }
+                    tableId++;
+                    continue;
+                }
+
+                out.push(line);
+            }
+            return { markdown: out.join('\n'), placeholders };
+        }
+
+        function formatContent(content) {
+            if (!content) return '';
+
+            if (typeof marked === 'undefined' || typeof DOMPurify === 'undefined') {
+                console.warn('Markdown libs missing, rendering as plain text');
+                return escapeHtml(content).replace(/\n/g, '<br>');
+            }
+
+            renderLog('input', content);
+            const preEscaped = escapePseudoTags(content);
+            renderLog('preEscaped', preEscaped);
+            const { markdown: safeContent, placeholders } = preprocessTableCode(preEscaped);
+
+            const uniqueBase = 'code-' + Date.now() + '-' + Math.random().toString(36).slice(2, 8);
+            let codeIndex = 0;
+
+            const renderer = new marked.Renderer();
+
+            renderer.code = (code, infostring) => {
+                const language = (infostring || '').trim().toLowerCase();
+                const displayLang = language ? language.charAt(0).toUpperCase() + language.slice(1) : 'Code';
+                const codeId = `${uniqueBase}-${codeIndex++}`;
+                const codeText = code.replace(/\n$/, '');
+
+                // 语言名称映射（处理常见别名）
+                const langMap = {
+                    'js': 'javascript',
+                    'ts': 'typescript',
+                    'py': 'python',
+                    'rb': 'ruby',
+                    'sh': 'bash',
+                    'shell': 'bash',
+                    'yml': 'yaml',
+                    'md': 'markdown',
+                    'objective-c': 'objectivec',
+                    'objc': 'objectivec'
+                };
+                const mappedLang = langMap[language] || language;
+
+                // 使用 highlight.js 进行语法高亮
+                let highlightedCode;
+                try {
+                    if (typeof hljs !== 'undefined') {
+                        if (mappedLang && hljs.getLanguage(mappedLang)) {
+                            // 已知语言，直接高亮
+                            highlightedCode = hljs.highlight(codeText, { language: mappedLang, ignoreIllegals: true }).value;
+                        } else {
+                            // 未知语言或未指定，使用自动检测
+                            highlightedCode = hljs.highlightAuto(codeText).value;
+                        }
+                    } else {
+                        highlightedCode = escapeHtml(codeText);
+                    }
+                } catch (e) {
+                    console.warn('代码高亮失败:', e);
+                    highlightedCode = escapeHtml(codeText);
+                }
+
+                return `
+<div class="code-block-wrapper">
+  <div class="code-block-header">
+    <span class="code-block-lang">${escapeHtml(displayLang)}</span>
+    <button class="code-copy-btn" data-code-id="${codeId}" title="复制代码">
+      <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+        <rect x="9" y="9" width="13" height="13" rx="2" ry="2"></rect>
+        <path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"></path>
+      </svg>
+    </button>
+  </div>
+  <pre><code id="${codeId}" class="hljs language-${mappedLang || 'plaintext'}">${highlightedCode}</code></pre>
+</div>`;
+            };
+
+            renderer.heading = (text, level) => {
+                if (level === 2 || level === 3) {
+                    return `<h3>${text}</h3>`;
+                }
+                return `<h${level}>${text}</h${level}>`;
+            };
+
+            renderer.table = (header, body) => {
+                // Parse table HTML safely using DOM to avoid regex edge cases
+                const temp = document.createElement('div');
+                temp.innerHTML = `<table><thead>${header}</thead><tbody>${body}</tbody></table>`;
+                const rows = Array.from(temp.querySelectorAll('tr'));
+                const isTwoCol = rows.length > 0 && rows.every(r => r.querySelectorAll('td').length === 2);
+                const headerText = (() => {
+                    const firstTh = temp.querySelector('th');
+                    return firstTh ? stripTags(firstTh.innerHTML).trim() : '';
+                })();
+
+                if (isTwoCol) {
+                    const pairRows = rows.map(row => {
+                        const cells = row.querySelectorAll('td');
+                        const leftRaw = (cells[0]?.innerHTML || '').trim();
+                        const rightRaw = (cells[1]?.innerHTML || '').trim();
+
+                        // Prefer the original code text stored in placeholders (when we swapped it out before parsing)
+                        let leftContent = escapeHtml(stripTags(leftRaw));
+                        const placeholderKey = Object.keys(placeholders).find(k => leftRaw.includes(k));
+                        if (placeholderKey) {
+                            leftContent = placeholders[placeholderKey];
+                        } else {
+                            // Fallback: match stripped placeholder text like TABLE_CODE_0_0 even if markdown removed underscores
+                            const match = leftRaw.match(/TABLE_CODE_(\\d+)_(\\d+)/);
+                            if (match) {
+                                const fallbackKey = `__TABLE_CODE_${match[1]}_${match[2]}__`;
+                                if (placeholders[fallbackKey]) {
+                                    leftContent = placeholders[fallbackKey];
+                                }
+                            }
+                        }
+
+                        return `
+<div class="pair-row">
+  <code class="pair-code">${leftContent}</code>
+  <span class="pair-desc">${rightRaw}</span>
+</div>`;
+                    }).join('');
+
+                    const titleHtml = headerText ? `<div class="pair-title">${escapeHtml(headerText)}</div>` : '';
+                    return `<div class="code-pairs">${titleHtml}${pairRows}</div>`;
+                }
+
+                return `<table><thead>${header}</thead><tbody>${body}</tbody></table>`;
+            };
+
+            marked.setOptions({
+                gfm: true,
+                breaks: true,
+                renderer,
+                mangle: false,
+                headerIds: false
+            });
+
+            const rawHtml = marked.parse(safeContent);
+            const withCode = Object.keys(placeholders).reduce((acc, key) => {
+                const html = `<pre><code>${placeholders[key]}</code></pre>`;
+                return acc.replace(new RegExp(key.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'), 'g'), html);
+            }, rawHtml);
+            const cleanHtml = DOMPurify.sanitize(withCode, {
+                ALLOWED_TAGS: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'br', 'strong', 'em', 'ul', 'ol', 'li', 'code', 'pre', 'table', 'thead', 'tbody', 'tr', 'th', 'td', 'div', 'span', 'button', 'svg', 'path', 'rect', 'circle', 'line', 'polyline', 'polygon', 'a', 'blockquote'],
+                ALLOWED_ATTR: ['class', 'id', 'width', 'height', 'viewBox', 'fill', 'stroke', 'stroke-width', 'stroke-linecap', 'stroke-linejoin', 'stroke-miterlimit', 'fill-rule', 'clip-rule', 'd', 'aria-hidden', 'focusable', 'data-code-id', 'x', 'y', 'rx', 'ry', 'cx', 'cy', 'r', 'x1', 'y1', 'x2', 'y2', 'points', 'title']
+            });
+
+            renderLog('output', cleanHtml);
+            return cleanHtml;
+        }
+
+        // 流式输出打字效果
+        async function typeWriter(element, text, speed = 20) {
+            let index = 0;
+            let displayedText = '';
+
+            return new Promise((resolve) => {
+                function type() {
+                    if (index < text.length) {
+                        // 每次追加 1-3 个字符，模拟更自然的打字节奏
+                        const charsToAdd = Math.min(Math.floor(Math.random() * 3) + 1, text.length - index);
+                        displayedText += text.slice(index, index + charsToAdd);
+                        index += charsToAdd;
+                        element.innerHTML = formatContent(displayedText);
+
+                        // 滚动到底部
+                        const mainContent = document.getElementById('main-content');
+                        mainContent.scrollTop = mainContent.scrollHeight;
+
+                        // 随机延��，模拟真实输入
+                        const delay = speed + Math.random() * 20;
+                        setTimeout(type, delay);
+                    } else {
+                        resolve();
+                    }
+                }
+                type();
+            });
+        }
+
+        // 创建推理过程块
+        function createThinkingBlock(thinkingContent, isCollapsed = false) {
+            const parts = thinkingContent.split('\n\n').filter(p => p.trim());
+            const itemsHtml = parts.map(part => `<div class="thinking-item">${escapeHtml(part.trim())}</div>`).join('');
+            const collapsedClass = isCollapsed ? ' collapsed' : '';
+            const headerText = isCollapsed ? '显示推理过程' : '隐藏推理过程';
+
+            return `
+                <div class="thinking-block${collapsedClass}">
+                    <div class="thinking-header" onclick="toggleThinking(this)">
+                        <span class="thinking-title">${headerText}</span>
+                        <svg class="thinking-icon" width="12" height="12" viewBox="0 0 12 12" fill="currentColor">
+                            <path d="M2 4l4 4 4-4"/>
+                        </svg>
+                    </div>
+                    <div class="thinking-content">
+                        ${itemsHtml}
+                        <div class="thinking-note">推理细节目前仅支持英文</div>
+                    </div>
+                </div>
+            `;
+        }
+
+        // 切换推理折叠状态
+        function toggleThinking(header) {
+            const block = header.parentElement;
+            block.classList.toggle('collapsed');
+            // 更新标题文字
+            const titleSpan = header.querySelector('.thinking-title');
+            if (block.classList.contains('collapsed')) {
+                titleSpan.textContent = '显示推理过程';
+            } else {
+                titleSpan.textContent = '隐藏推理过程';
+            }
+        }
+
+        function addMessageToDOM(role, content, images = [], generatedImages = []) {
+            const container = document.getElementById('chat-container');
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `message message-${role}`;
+
+            if (role === 'user') {
+                // 构建图片 HTML
+                const imagesHtml = images.length > 0 ? `
+                    <div class="message-images">
+                        ${images.map(img => `<img src="${img}" class="message-image" onclick="openLightbox('${img}')">`).join('')}
+                    </div>
+                ` : '';
+
+                messageDiv.innerHTML = `
+                    <div class="message-content">
+                        ${imagesHtml}
+                        ${escapeHtml(content)}
+                    </div>
+                `;
+            } else {
+                // 构建生成图片 HTML
+                const generatedImagesHtml = generatedImages.length > 0 ? `
+                    <div class="generated-images">
+                        ${generatedImages.map((img, idx) => `
+                            <div class="generated-image-item">
+                                <img src="data:${img.mime_type || 'image/png'};base64,${img.base64_data}"
+                                     alt="AI生成图片"
+                                     onclick="openLightbox(this.src)">
+                                <div class="generated-image-actions">
+                                    <button class="generated-image-btn" onclick="downloadGeneratedImage('${img.base64_data}', '${img.file_name || 'generated_' + idx + '.png'}', '${img.mime_type || 'image/png'}')" title="下载">
+                                        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                            <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                                            <polyline points="7 10 12 15 17 10"/>
+                                            <line x1="12" y1="15" x2="12" y2="3"/>
+                                        </svg>
+                                    </button>
+                                </div>
+                            </div>
+                        `).join('')}
+                    </div>
+                ` : '';
+
+                messageDiv.innerHTML = `
+                    <div class="avatar-assistant">G</div>
+                    <div class="assistant-content" style="flex:1; overflow:hidden;">
+                        <div class="thinking-container"></div>
+                        <div class="message-content">${formatContent(content)}</div>
+                        <div class="generated-images-container">${generatedImagesHtml}</div>
+                    </div>
+                `;
+            }
+
+            container.appendChild(messageDiv);
+            return messageDiv;
+        }
+
+        async function sendMessage() {
+            const input = document.getElementById('user-input');
+            let content = input.value.trim();
+
+            // 需要有文字或图片才能发送
+            if ((!content && pendingImages.length === 0) || isGenerating) return;
+
+            const startTime = Date.now(); // 记录开始时间
+
+            // 保存当前待发送的图片
+            const imagesToSend = [...pendingImages];
+            const imageDataUrls = imagesToSend.map(img => img.dataUrl);
+
+            // 如果是图片生成模式，添加提示词前缀
+            const wasImageGenMode = isImageGenMode;
+            let displayContent = content; // 用于显示的内容
+            if (isImageGenMode && content) {
+                content = '你生成一张图片给我，下面是关于需要生成图片的描述:\n' + content;
+            }
+
+            document.body.classList.add('has-chat');
+            isGenerating = true;
+            document.getElementById('send-btn').disabled = true;
+            input.value = '';
+            input.style.height = 'auto';
+            clearPendingImages();
+            resetImageGenMode(); // 重置图片生成模式
+            updateSendButton();
+
+            // 构建消息内容（OpenAI 多模态格式）
+            let messageContent;
+            if (imagesToSend.length > 0) {
+                // 多模态消息
+                messageContent = [];
+                // 添加图片
+                for (const img of imagesToSend) {
+                    messageContent.push({
+                        type: 'image_url',
+                        image_url: { url: img.dataUrl }
+                    });
+                }
+                // 添加文本（如果有）
+                if (content) {
+                    messageContent.push({
+                        type: 'text',
+                        text: content
+                    });
+                }
+            } else {
+                // 纯文本消息
+                messageContent = content;
+            }
+
+            // Add user message to local state (仅保存文本用于显示)
+            messages.push({ role: 'user', content: messageContent });
+            // 显示时使用原始内容（不带前缀），发送时使用带前缀的内容
+            addMessageToDOM('user', wasImageGenMode ? displayContent : content, imageDataUrls);
+
+            // Add assistant placeholder
+            const assistantDiv = addMessageToDOM('assistant', '');
+            const thinkingContainer = assistantDiv.querySelector('.thinking-container');
+            const contentDiv = assistantDiv.querySelector('.message-content');
+            contentDiv.innerHTML = '<div class="loading-dots"><span></span><span></span><span></span></div>';
+
+            // Scroll to bottom
+            const mainContent = document.getElementById('main-content');
+            mainContent.scrollTop = mainContent.scrollHeight;
+
+            try {
+                const response = await fetch('/v1/chat/completions', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        model: currentModel,
+                        messages: messages,
+                        stream: true,
+                        chat_id: currentChatId
+                    })
+                });
+
+                if (!response.ok) {
+                    throw new Error(`HTTP ${response.status}`);
+                }
+
+                const reader = response.body.getReader();
+                const decoder = new TextDecoder();
+                let fullContent = '';
+                let isFirstChunk = true;
+                let collectedContent = ''; // 累积正文内容
+                let collectedThinking = ''; // 累积推理内容
+                let collectedImages = []; // 累积生成的图片
+                let extractedTitle = null;
+                let buffer = ''; // 用于处理跨 chunk 的数据
+
+                contentDiv.innerHTML = '';
+
+                while (true) {
+                    const { done, value } = await reader.read();
+                    console.log('SSE read:', done ? 'done' : `${value?.length} bytes`);
+                    if (done) break;
+
+                    buffer += decoder.decode(value, { stream: true });
+                    const lines = buffer.split('\n');
+
+                    // 保留最后一个可能不完整的行
+                    buffer = lines.pop() || '';
+
+                    for (const line of lines) {
+                        if (line.startsWith('data: ') && line !== 'data: [DONE]') {
+                            try {
+                                const data = JSON.parse(line.slice(6));
+                                console.log('Parsed SSE data keys:', Object.keys(data));
+
+                                // Handle first chunk with chat info
+                                if (isFirstChunk && data.chat_id) {
+                                    currentChatId = data.chat_id;
+
+                                    if (data.is_new) {
+                                        // Add to chat list
+                                        chatList.unshift({
+                                            id: data.chat_id,
+                                            title: data.title,
+                                            model: currentModel,
+                                            updated_at: new Date().toISOString()
+                                        });
+                                        renderChatList();
+                                    }
+
+                                    // 保存当前对话 ID
+                                    saveCurrentChat();
+
+                                    document.getElementById('current-chat-title').textContent = data.title;
+                                    isFirstChunk = false;
+                                }
+
+                                // Handle delta
+                                const delta = data.choices?.[0]?.delta;
+                                if (delta) {
+                                    console.log('Delta keys:', Object.keys(delta));
+                                }
+
+                                // 累积推理内容
+                                if (delta?.thinking) {
+                                    collectedThinking = delta.thinking;
+                                }
+
+                                // 累积正文内容
+                                if (delta?.content) {
+                                    collectedContent += delta.content;
+                                }
+
+                                // 累积生成的图片
+                                if (delta?.images && Array.isArray(delta.images)) {
+                                    collectedImages.push(...delta.images);
+                                    console.log('收到图片数据:', delta.images.length, '张, 总计:', collectedImages.length);
+                                }
+
+                                // Handle title update from extracted_title
+                                if (delta?.extracted_title) {
+                                    extractedTitle = delta.extracted_title;
+                                }
+                            } catch (e) {
+                                // Ignore parse errors
+                                console.debug('SSE parse error:', e, line);
+                            }
+                        }
+                    }
+                }
+
+                // 处理 buffer 中可能残留的最后一行数据
+                if (buffer.startsWith('data: ') && buffer !== 'data: [DONE]') {
+                    try {
+                        const data = JSON.parse(buffer.slice(6));
+                        const delta = data.choices?.[0]?.delta;
+                        if (delta?.images && Array.isArray(delta.images)) {
+                            collectedImages.push(...delta.images);
+                            console.log('从 buffer 残留数据中解析到图片:', delta.images.length);
+                        }
+                    } catch (e) {
+                        console.debug('Final buffer parse error:', e);
+                    }
+                }
+
+                // 计算推理时长
+                const thinkingTime = Math.round((Date.now() - startTime) / 1000);
+
+                // 显示推理过程（如果有）
+                if (collectedThinking) {
+                    // 新消息默认展开 (isCollapsed = false)
+                    thinkingContainer.innerHTML = createThinkingBlock(collectedThinking, false);
+                    // 滚动到底部
+                    mainContent.scrollTop = mainContent.scrollHeight;
+
+                    // 短暂延迟后折叠推理
+                    setTimeout(() => {
+                        const block = thinkingContainer.querySelector('.thinking-block');
+                        if (block) {
+                            block.classList.add('collapsed');
+                            // 更新标题文字
+                            const titleSpan = block.querySelector('.thinking-title');
+                            if (titleSpan) {
+                                titleSpan.textContent = '显示推理过程';
+                            }
+                        }
+                    }, 1500);
+                }
+
+                // 更新标题
+                if (extractedTitle) {
+                    document.getElementById('current-chat-title').textContent = extractedTitle;
+                    const chatItem = chatList.find(c => c.id === currentChatId);
+                    if (chatItem) {
+                        chatItem.title = extractedTitle;
+                        renderChatList();
+                    }
+                }
+
+                // 流式输出收集到的内容
+                if (collectedContent) {
+                    await typeWriter(contentDiv, collectedContent, 15);
+                    fullContent = collectedContent;
+                }
+
+                // 显示生成的图片
+                console.log('收集到的图片数量:', collectedImages.length);
+                if (collectedImages.length > 0) {
+                    console.log('准备显示图片:', collectedImages);
+                    const imagesContainer = assistantDiv.querySelector('.generated-images-container');
+                    console.log('图片容器:', imagesContainer);
+                    if (imagesContainer) {
+                        const imagesHtml = `
+                            <div class="generated-images">
+                                ${collectedImages.map((img, idx) => `
+                                    <div class="generated-image-item">
+                                        <img src="data:${img.mime_type || 'image/png'};base64,${img.base64_data}"
+                                             alt="AI生成图片"
+                                             onclick="openLightbox(this.src)">
+                                        <div class="generated-image-actions">
+                                            <button class="generated-image-btn" onclick="downloadGeneratedImage('${img.base64_data}', '${img.file_name || 'generated_' + idx + '.png'}', '${img.mime_type || 'image/png'}')" title="下载">
+                                                <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                                                    <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
+                                                    <polyline points="7 10 12 15 17 10"/>
+                                                    <line x1="12" y1="15" x2="12" y2="3"/>
+                                                </svg>
+                                            </button>
+                                        </div>
+                                    </div>
+                                `).join('')}
+                            </div>
+                        `;
+                        imagesContainer.innerHTML = imagesHtml;
+                        console.log('图片 HTML 已设置');
+                        // 滚动到底部显示图片
+                        mainContent.scrollTop = mainContent.scrollHeight;
+                    }
+                }
+
+                messages.push({ role: 'assistant', content: fullContent });
+
+            } catch (error) {
+                contentDiv.innerHTML = `<span style="color: #ef4444;">Error: ${error.message}</span>`;
+            }
+
+            isGenerating = false;
+            document.getElementById('send-btn').disabled = false;
+            input.focus();
+        }
+    </script>
+</body>
+
+</html>