python使用openai+vue实现支持局部选择多版本的ai聊天对话生成网页应用代码-python代码-BFW代码库

代码语言：python

所属分类：其他

代码描述：python使用openai+vue实现支持局部选择多版本的ai聊天对话生成网页应用代码，它会区分你的意图，如果是闲聊，就陪你闲聊，如果你提出做网页应用，他就给你一个初始的需求让你确认或修改，然后生成，每次修改都会保存旧版本，多版本可切换，左侧是聊天历史绘画，中间是ai聊天窗，右侧是生成的网页预览与可视化局部修改某一个区域。

代码标签： python openai vue 支持局部选择多版本 ai 聊天对话生成网页应用代

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

import os
import json
import re
import uuid
from typing import List, Optional, Dict, Any
from datetime import datetime
from contextlib import asynccontextmanager
import uvicorn
from fastapi import FastAPI, HTTPException
from fastapi.responses import HTMLResponse, JSONResponse
from pydantic import BaseModel
from openai import OpenAI

# ================= CONFIGURATION =================
# 建议通过环境变量设置: export OPENAI_API_KEY="sk-..."
# 或者直接在这里填入
API_KEY = os.environ.get("OPENAI_API_KEY", "YOUR_OPENAI_API_KEY_HERE")
MODEL_NAME = "gpt-4o"  # 推荐使用 gpt-4o 或 gpt-4-turbo
DB_FILE = "history_db.json"  # 数据持久化文件名

# 初始化 OpenAI 客户端
client = OpenAI(api_key=API_KEY)

# ================= DATA MODELS & PERSISTENCE =================

class PageVersion(BaseModel):
    version_id: str
    timestamp: str
    summary: str
    html: str

class SessionData:
    def __init__(self, session_id: str):
        self.session_id = session_id
        self.title = "新会话"
        self.messages: List[Dict[str, Any]] = []
        self.versions: List[PageVersion] = []
        self.current_requirements: str = ""

    def to_dict(self):
        """序列化为字典用于保存"""
        return {
            "session_id": self.session_id,
            "title": self.title,
            "messages": self.messages,
            "versions": [v.dict() for v in self.versions],
            "current_requirements": self.current_requirements
        }

    @classmethod
    def from_dict(cls, data):
        """从字典恢复对象"""
        obj = cls(data["session_id"])
        obj.title = data.get("title", "新会话")
        obj.messages = data.get("messages", [])
        obj.current_requirements = data.get("current_requirements", "")
        obj.versions = [PageVersion(**v) for v in data.get("versions", [])]
        return obj

# 内存数据库
sessions: Dict[str, SessionData] = {}

def load_db():
    """启动时加载数据"""
    if not os.path.exists(DB_FILE):
        return
    try:
        with open(DB_FILE, 'r', encoding='utf-8') as f:
            data = json.load(f)
            for sid, s_data in data.items():
                sessions[sid] = SessionData.from_dict(s_data)
        print(f"成功加载 {len(sessions)} 个历史会话。")
    except Exception as e:
        print(f"加载历史数据失败: {e}")

def save_db():
    """保存数据到硬盘"""
    try:
        data = {sid: sess.to_dict() for sid, sess in sessions.items()}
        with open(DB_FILE, 'w', encoding='utf-8') as f:
            json.dump(data, f, ensure_ascii=False, indent=2)
    except Exception as e:
        print(f"保存数据失败: {e}")

@asynccontextmanager
async def lifespan(app: FastAPI):
    load_db()
    yield
    save_db()

app = FastAPI(lifespan=lifespan)

class ChatRequest(BaseModel):
    session_id: str
    user_input: str
    selected_html: Optional[str] = None
    current_version_id: Optional[str] = None

# ================= SYSTEM PROMPT =================
SYSTEM_PROMPT = """
你是一个专业的 Web 开发智能体。目标是编写高质量、响应式的 HTML5 网页。

【重要】你必须且只能输出严格的 JSON 格式，MIME type 为 application/json。
不要输出 Markdown 代码块标记（如 ```json），直接输出 JSON 对象。

JSON 结构如下：
{
    "reply_text": "(string) 给用户的自然语言简短回复。",
    "intent": "(string) 'CHAT' | 'GATHER_REQUIREMENTS' | 'GENERATE_CODE' | 'MODIFY_CODE'",
    "requirements_summary": "(string) 仅在 intent 为 GATHER_REQUIREMENTS 时必填。请根据用户模糊的描述，主动构思并整理出一份详细的功能点列表（Markdown 格式），作为草稿供用户修改。",
    "html_code": "(string) 仅在 GENERATE_CODE 或 MODIFY_CODE 时必填。完整的 HTML 代码。",
    "version_summary": "(string) 代码变更摘要 (如 '添加了顶部导航栏')。"
}

【行为逻辑】
1. **需求采集 (GATHER_REQUIREMENTS)**：
   - 当用户初次提出写网页请求（如“写个花店网站”）时，将 intent 设为 "GATHER_REQUIREMENTS"。
   - 在 "requirements_summary" 中，主动列出建议包含的功能模块。
   - "reply_text" 引导用户确认或修改草稿。

2. **生成代码 (GENERATE_CODE)**：
   - 当输入以 "确认需求:" 开头，或用户明确要求写代码时，生成完整 HTML。

3. **局部修改 (MODIFY_CODE)**：
   - 如果输入包含 [User Selected HTML]，说明用户只想修改这部分。请基于此上下文修改逻辑，但**必须返回整个页面的完整 HTML**。

【代码规范】
- 必须使用 HTML5 + Tailwind CSS (CDN)。
- 界面设计要达到商业级标准，美观大气。
"""

# ================= HELPER FUNCTIONS =================

def safe_parse_json(text: str) -> Dict[str, Any]:
    """清洗并解析 JSON"""
    # 移除可能存在的 markdown 标记
    text = re.sub(r'^```json\s*', '', text, flags=re.MULTILINE)
    text = re.sub(r'^```\s*', '', text, flags=re.MULTILINE)
    text = re.sub(r'```$', '', text, flags=re.MULTILINE)
    text = text.strip()
    try:
        return json.loads(text)
    except json.JSONDecodeError:
        print(f"JSON Parse Error. Raw .........完整代码请登录后点击上方下载按钮下载查看