代码语言：python

所属分类：其他

代码描述：python+vue调用qwen3-coder的api实现对话式可视化网页设计与编辑工具代码，只要是兼容openai协议的ai大模型的api都可以调用，全程不用懂代码，直接聊天就行，支持自动生成预览，多网页管理与新增。

代码标签： python vue 调用 qwen coder api 对话式 可视化 网页 设计 编辑 工具

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

#!/usr/local/python3/bin/python3
# -*- coding: utf-8 -*
import os
import json
import uvicorn
import base64
import re
from fastapi import FastAPI, HTTPException
from fastapi.responses import HTMLResponse, JSONResponse
from fastapi.staticfiles import StaticFiles
from pydantic import BaseModel
from openai import OpenAI
from typing import List, Dict
import openai
# ##################################################################
# 配置部分
# ##################################################################

# --- OpenAI API 密钥 ---
# 在这里替换为您自己的 OpenAI API 密钥
OPENAI_API_KEY = "sk-xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx"

# --- 目录设置 ---
PAGES_DIR = "created_pages"
PREVIEWS_DIR = "preview_images"
os.makedirs(PAGES_DIR, exist_ok=True)
os.makedirs(PREVIEWS_DIR, exist_ok=True)

# --- 初始化 FastAPI 应用 ---
app = FastAPI()

# --- 挂载静态文件目录，用于提供预览图 ---
app.mount("/previews", StaticFiles(directory=PREVIEWS_DIR), name="previews")

# --- 初始化新版 OpenAI 客户端 ---
try:
    client = openai.OpenAI(api_key=OPENAI_API_KEY, base_url="https://dashscope.aliyuncs.com/compatible-mode/v1")
except Exception as e:
    print(f"初始化 OpenAI 客户端时出错: {e}")
    client = None

# ##################################################################
# Pydantic 模型定义
# ##################################################################

class ChatRequest(BaseModel):
    """定义聊天请求的请求体结构"""
    message: str

class PreviewRequest(BaseModel):
    """定义预览图上传的请求体结构"""
    image_data: str # Base64 编码的图片数据

# ##################################################################
# 后端逻辑部分 (已重构)
# ##################################################################

@app.get("/api/pages", response_model=List[Dict[str, str]])
async def get_pages():
    """获取所有已创建页面的列表，包含预览图信息。"""
    pages_data = []
    page_files = sorted([f for f in os.listdir(PAGES_DIR) if f.endswith(".json")])
    for filename in page_files:
        page_name = filename.replace(".json", "")
        preview_image_path = f"/previews/{page_name}.png"
        if not os.path.exists(os.path.join(PREVIEWS_DIR, f"{page_name}.png")):
            preview_image_path = "/previews/default.png" # 如果没有预览图，使用默认图
        pages_data.append({"name": page_name, "preview_image": preview_image_path})
    return pages_data

@app.post("/api/pages/{page_name}")
async def create_page(page_name: str):
    """创建一个新页面，并为其生成一个空的聊天记录 JSON 文件。"""
    if not page_name or not page_name.strip():
        raise HTTPException(status_code=400, detail="页面名称不能为空。")
    
    file_path = os.path.join(PAGES_DIR, f"{page_name}.json")
    if os.path.exists(file_path):
        raise HTTPException(status_code=400, detail="页面名称已存在，请换一个。")
    
    # 初始化聊天历史，包含一个初始的AI问候
    initial_history = [{
        "role": "assistant",
        "content": "您好！我是您的AI开发助手。请问您想创建一个什么样的网页？可以先告诉我大概的想法。"
    }]
    with open(file_path, 'w', encoding='utf-8') as f:
        json.dump(initial_history, f, indent=2, ensure_ascii=False)
        
    return {"message": f"页面 '{page_name}' 创建成功。"}

@app.post("/api/pages/{page_name}/preview")
async def save_preview(page_name: str, request: PreviewRequest):
    """接收Base64编码的预览图并保存。"""
    try:
        image_data_str = re.sub('^data:image/.+;base64,', '', request.image_data)
        image_data = base64.b64decode(image_data_str)
        
        file_path = os.path.join(PREVIEWS_DIR, f"{page_name}.png")
        with open(file_path, "wb") as f:
            f.write(image_data)
        return {"message": "预览图已保存。"}
    except Exception as e:
        raise HTTPException(status_code=500, detail=f"保存预览图失败: {e}")


@app.get("/api/chat/{page_name}", response_model=List[Dict])
async def get_chat_history(page_name: str):
    """获取指定页面的聊天历史记录。"""
    file_path = os.path.join(PAGES_DIR, f"{page_name}.json")
    if not os.path.exists(file_path):
        raise HTTPException(status_code=404, detail="页面未找到。")
    with open(file_path, 'r', encoding='utf-8') as f:
        return json.load(f)

@app.post("/api/chat/{page_name}/generate")
async def generate_code_from_chat(page_name: str, request: ChatRequest):
    """
    智能聊天和代码生成端点。
    - 如果用户确认需求，则生成代码。
    - 否则，进行需求澄清对话。
    """
    file_path = os.path.joi.........完整代码请登录后点击上方下载按钮下载查看

网友评论0

取消

评论提交中...

提交评论