python+vue+ai大模型api实现ai文字图片视频声音生成超级画布代码-python代码-BFW代码库

代码语言：python

所属分类：其他

代码描述：python+vue+ai大模型api实现ai文字、图片、视频、声音生成超级画布代码，示例中接入了阿里百炼大模型的api，实现了ai文本处理生成、图片生成处理、视频生成、声音生成等阿里百炼api，可修改成其他的大模型api，实现了画布链式生成、可多选复制节点，改变了大模型的使用方式。

代码标签： python vue ai 大模型 api ai 文字图片视频声音生成超级画布代码

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

import time
import uuid
import os
import json
import requests
import asyncio
from fastapi import FastAPI, Request
from fastapi.responses import HTMLResponse, JSONResponse
from fastapi.staticfiles import StaticFiles
from pydantic import BaseModel
from typing import Optional, List, Dict, Any
from pathlib import Path
import logging

# --------------------------------------------------------------------------
# 1. Configuration & Initialization
# --------------------------------------------------------------------------

# --- Basic Logging Setup ---
# This will print timestamped debug messages to your console.
logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(levelname)s - %(message)s')

# IMPORTANT: Use environment variables in a real application
API_KEY = os.getenv("DASHSCOPE_API_KEY", "sk-") # Replace with your key

# Setup static directory for media files
STATIC_DIR = "static_media"
Path(STATIC_DIR).mkdir(parents=True, exist_ok=True)

app = FastAPI()
app.mount("/media", StaticFiles(directory=STATIC_DIR), name="media")

# --- Pydantic Models for robust API validation ---
class NodeData(BaseModel):
    id: Any
    type: str
    content: Any
    hiddenData: Optional[str] = None
    x: float
    y: float

class AIRequest(BaseModel):
    action: str
    prompt: Optional[str] = ""
    sourceNodes: Optional[List[NodeData]] = None
    parameters: Optional[Dict[str, Any]] = {}

# --------------------------------------------------------------------------
# 2. Frontend HTML, CSS, and Vue.js (Unchanged from v12.0)
# --------------------------------------------------------------------------
html_content = """
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI 智能画布 - v12.0 (Live Lines & Edit)</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/leader-line-new@1.1.9/leader-line.min.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        :root{--primary-color:#0d6efd;--primary-color-light:#e7f1ff;--background-color:#f8f9fa;--node-background-color:#fff;--text-color:#212529;--text-color-light:#6c757d;--border-color:#dee2e6;--border-color-soft:#e9ecef;--shadow-color:rgba(0,0,0,.05);--shadow-color-strong:rgba(0,0,0,.1);--connector-color:#adb5bd}@keyframes fadeIn{from{opacity:0}to{opacity:1}}@keyframes fadeOut{from{opacity:1}to{opacity:0}}body,html{margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif;background-color:var(--background-color);color:var(--text-color);overflow:hidden;height:100vh;width:100vw}#app{display:flex;flex-direction:column;height:100%;animation:fadeIn .5s ease-in-out}.header{display:flex;align-items:center;padding:10px 20px;background-color:var(--node-background-color);border-bottom:1px solid var(--border-color);box-shadow:0 2px 4px var(--shadow-color);z-index:100;flex-shrink:0}.header h1{font-size:1.4em;margin:0;color:var(--text-color);font-weight:600}.header h1 .fa-brain{margin-right:12px;color:var(--primary-color)}.header .header-buttons{margin-left:auto;display:flex;gap:10px}.header .header-buttons button{background-color:var(--primary-color-light);color:var(--primary-color);border:1px solid transparent;padding:8px 12px;border-radius:6px;cursor:pointer;font-weight:500;transition:all .2s}.header .header-buttons button:hover{background-color:var(--primary-color);color:#fff}.header .header-buttons .fa{margin-right:8px}.canvas-tabs{margin-left:30px;display:flex;align-items:center}.canvas-tab{display:flex;align-items:center;padding:8px 16px;margin-right:5px;border-radius:6px;border:1px solid transparent;background-color:transparent;cursor:pointer;transition:all .2s ease-in-out;color:var(--text-color-light);font-weight:500}.canvas-tab.active{color:var(--primary-color);background-color:var(--primary-color-light)}.canvas-tab:hover:not(.active){color:var(--text-color);background-color:var(--background-color)}.tab-close-btn{margin-left:10px;font-size:.8em;padding:2px 4px;border-radius:50%;transition:all .2s}.tab-close-btn:hover{background-color:rgba(0,0,0,.1)}.new-canvas-btn{padding:8px 12px;border-radius:6px;border:none;background:0 0;cursor:pointer;font-size:1.1em;color:var(--text-color-light)}.new-canvas-btn:hover{color:var(--primary-color);background-color:var(--primary-color-light)}.toolbar{position:absolute;top:75px;left:15px;display:flex;flex-direction:column;background-color:var(--node-background-color);padding:8px;border-radius:8px;box-shadow:0 4px 12px var(--shadow-color-strong);z-index:50;border:1px solid var(--border-color-soft)}.toolbar button{background:0 0;border:none;font-size:1.4em;padding:10px;width:44px;height:44px;margin:4px 0;cursor:pointer;border-radius:6px;color:var(--text-color-light);transition:all .2s ease-in-out}.toolbar button:hover{background-color:var(--primary-color-light);color:var(--primary-color)}.canvas-container{flex-grow:1;position:relative;overflow:hidden;background-image:radial-gradient(var(--border-color) 1px,transparent 1px);background-size:20px 20px;cursor:default;transition:box-shadow .3s}.canvas-container.is-pannable{box-shadow:0 0 0 3px var(--primary-color) inset;cursor:grab}.canvas-container.panning{cursor:grabbing}#canvas{position:absolute;width:1px;height:1px;transform-origin:0 0}.node{position:absolute;background-color:var(--node-background-color);border:1px solid var(--border-color);border-radius:10px;box-shadow:0 2px 5px var(--shadow-color),0 5px 15px var(--shadow-color);min-width:230px;display:flex;flex-direction:column;z-index:10;transition:all .2s ease-out}.node:hover{box-shadow:0 4px 8px var(--shadow-color-strong),0 10px 25px var(--shadow-color);transform:translateY(-2px)}.node.selected{border-color:var(--primary-color);box-shadow:0 0 0 2px var(--primary-color),0 10px 25px var(--shadow-color-strong)}.node.type-error{border-color:#d9534f;background-color:#fdf2f2}.node-header{padding:8px 12px;font-weight:600;border-bottom:1px solid var(--border-color-soft);cursor:move;display:flex;justify-content:space-between;align-items:center;background-color:#fafbfd;border-top-left-radius:10px;border-top-right-radius:10px;color:var(--text-color);font-size:.9em}.node-header .fa{margin-right:8px;color:var(--text-color-light)}.node-header .delete-btn{cursor:pointer;color:#aaa;transition:color .2s}.node-header .delete-btn:hover{color:#d9534f}.node-content{padding:15px;flex-grow:1;transition:border .2s ease}.node-content .hidden-data-textarea{width:100%;margin-top:10px;font-size:0.8em;padding:5px;border:1px solid var(--border-color-soft);border-radius:4px;resize:vertical;min-height:40px;color:var(--text-color-light)}.node.drag-over .node-content{border:2px dashed var(--primary-color)}.node-content textarea{width:100%;border:none;outline:0;resize:vertical;min-height:60px;background:0 0;font-size:1em}.node-content img,.node-content video,.node-content audio{max-width:100%;border-radius:6px}.node-content audio{width:100%}.node-content a{color:var(--primary-color);text-decoration:none;word-break:break-all;font-weight:500;cursor:pointer}.node-content a:hover{text-decoration:underline}.empty-placeholder{display:flex;flex-direction:column;align-items:center;text-align:center;padding:20px 10px;cursor:pointer;border-radius:6px;transition:background-color .2s}.empty-placeholder:hover{background-color:var(--primary-color-light)}.empty-placeholder .placeholder-icon{font-size:2.5em;color:var(--text-color-light);margin-bottom:15px}.empty-placeholder span{font-weight:500;color:var(--text-color-light)}.ai-handle{width:22px;height:22px;background-color:var(--node-background-color);border:1px solid #ccc;color:#888;border-radius:50%;position:absolute;cursor:pointer;z-index:15;transition:all .2s ease-out;display:flex;justify-content:center;align-items:center;font-size:12px;opacity:0;box-shadow:0 1px 3px rgba(0,0,0,.1)}.node:hover .ai-handle,.node.selected .ai-handle{opacity:1}.ai-handle:hover{transform:scale(1.2)!important;background-color:var(--primary-color);color:#fff;border-color:var(--primary-color)}.ai-handle.top{top:-12px;left:50%;transform:translateX(-50%)}.ai-handle.bottom{bottom:-12px;left:50%;transform:translateX(-50%)}.ai-handle.left{left:-12px;top:50%;transform:translateY(-50%)}.ai-handle.right{right:-12px;top:50%;transform:translateY(-50%)}.ai-handle.disabled{pointer-events:none;opacity:.3!important}.leader-line{pointer-events:none}.selection-box{position:fixed;border:1px dashed var(--primary-color);background-color:rgba(13,110,253,.1);z-index:999;pointer-events:none}.modal{position:fixed;top:0;left:0;width:100%;height:100%;background-color:rgba(0,0,0,.4);display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background-color:#fff;padding:20px 30px 30px;border-radius:12px;width:500px;box-shadow:0 10px 30px rgba(0,0,0,.2)}.modal-content.modal-lg{width:80%;max-width:1200px;height:85%}.modal-content.modal-lg .modal-body{height:calc(100% - 70px);overflow-y:auto}.modal-content h3{margin-top:0;display:flex;align-items:center;color:var(--text-color)}.modal-content h3 .fa{margin-right:15px;font-size:1.2em;color:var(--primary-color)}.modal-content .form-group{margin-bottom:15px}.modal-content label{display:block;margin-bottom:5px;font-weight:700;color:#555}.modal-content textarea,.modal-content input,.modal-content select{width:100%;padding:10px;border-radius:6px;border:1px solid var(--border-color);box-sizing:border-box}.modal-content .ai-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}.modal-content .ai-actions button{flex:1 1 calc(50% - 10px);padding:12px 10px;border-radius:6px;border:1px solid var(--border-color);cursor:pointer;background:var(--background-color);transition:all .2s;font-size:.95em;text-align:left;display:flex;align-items:center}.modal-content .ai-actions button:hover{background:var(--primary-color-light);border-color:var(--primary-color);color:var(--primary-color)}.modal-content .ai-actions button .fa{margin-right:10px;width:20px;text-align:center}.modal-buttons{display:flex;justify-content:flex-end;margin-top:25px;padding-top:20px;border-top:1px solid var(--border-color-soft)}.modal-buttons button{padding:10px 20px;border-radius:6px;border:none;cursor:pointer;margin-left:10px}.modal-buttons .primary{background-color:var(--primary-color);color:#fff}.modal-buttons .secondary{background-color:#eee}.iframe-preview{width:100%;height:100%;border:none;border-radius:8px}.loading-overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.85);display:flex;flex-direction:column;justify-content:center;align-items:center;z-index:100;border-radius:10px;backdrop-filter:blur(2px)}.loading-spinner{font-size:2em;color:var(--primary-color)}.cancel-btn{position:absolute;top:8px;right:8px;background:#eee;border:none;border-radius:50%;width:24px;height:24px;cursor:.........完整代码请登录后点击上方下载按钮下载查看