本文是 Qwen3-Coder 挑战赛教程第四期，我将带你完整走通一个真实项目案例：从零搭建一个“AI 舞蹈生成器”网站——上传一张人物照片，点击“立即生成”，即可获得一段该人物跳舞的动态视频。

整个过程仅需三步，无需前端、后端或模型部署经验，真正实现“说话即开发”。

构思设计，先想清楚要做一个什么项目，用什么模型；

生成调试，把需求交给 Qwen3-Coder，生成前后端，再跑通流程；

优化页面布局，让网站看起来更完整。

本次开发我们用到了：

核心模型：通义千问3-Coder-Plus、通义万相2.1-图生视频-Plus；

开发工具：通义灵码 VS Code 插件、阿里云百炼平台；

部署方案：MCP 插件系统 + edgeone-pages，实现一键发布至全球可访问的静态站点。

在动手开发前，我们先要像产品经理一样，把项目想清楚：做什么？为谁做？有什么功能？用什么技术？

本次我们要打造的“AI 舞蹈生成器”，核心功能是将一张静态人物照片转化为一段自然流畅的舞蹈视频。为了让 AI 更好地理解并执行任务，整个网站无需复杂后台，前端简洁易用，后端通过 API 调用通义万相的图生视频模型完成核心生成任务。

功能需求：用户上传照片 → 点击“立即生成” → 调用图生视频模型 → 返回并播放生成的舞蹈视频。

交互体验：界面简洁、按钮醒目、支持移动端访问，上传后有加载提示，生成失败时有友好反馈。

技术实现：前端使用 HTML + CSS + JavaScript 实现单页应用；后端通过 Python Flask 提供 API 接口；模型层调用通义万相2.1-图生视频-Plus 完成图像到视频的转换。

部署目标：最终网站可公网访问，支持分享链接。

这一阶段的关键是用清晰、结构化的语言表达需求，为后续 AI 生成代码打下基础。

这一步是整个开发的核心，我们将通过通义灵码 VS Code 插件，结合 Qwen3-Coder 的能力，生成包含前端页面、后端接口和模型调用逻辑的完整项目代码。

打开 VS Code，点击左侧【扩展】图标

搜索 Lingma，安装“Lingma - Alibaba Cloud AI Coding Assistant”官方插件

登录阿里云账号，完成身份验证

✅ 插件安装成功后，左侧活动栏会出现“通义灵码”图标，点击即可进入交互界面。

点击【文件】→【打开文件夹】，新建一个本地文件夹（如 ai-dance-generator），作为项目根目录。

进入通义灵码的聊天界面，选择 “智能体”模式（Agent Mode）。

为了确保生成的后端代码能真正调用 通义万相2.1-图生视频-Plus 模型，并稳定运行，建议在编写提示词前，先查阅阿里云百炼平台的官方 API 文档，并将其中的关键调用规范直接融入提示词中。

✅ 重点关注：请求 URL、Header 中的 Authorization、Body 中的 input.template 参数（为 dance2）、image_url 必须是公网可访问链接。

有了这些信息后，我们在通义灵码中输入以下结构化提示词：

创建一个全栈网站，前端用 Vite+React，后端用 Node.js+Express。后端监听 3000 端口，前端开发服务器运行在5173端口。前后端分离，支持跨域。
要求:
1.用户上传一张图片，会通过阿里云 OSS获取临时URL。
2.通过API Key调用大模型通义万相2.1-图生视频-Plus生成舞蹈视频。

获取临时URL: 在调用前，需要获取API Key，再配置API Key到环境变量。

请安装必要的依赖包。
pip install -U requests

输入参数
api_key：阿里云百炼API KEY。
model_name：指定文件将要用于哪个模型，如qwen-vl-plus。
file_path：待上传的本地文件路径（图片、视频等）。

示例代码
import os
import requests
from pathlib import Path
from datetime import datetime, timedelta

def get_upload_policy(api_key, model_name):
    """获取文件上传凭证"""
    url = "https://dashscope.aliyuncs.com/api/v1/uploads"
    headers = {
        "Authorization": f"Bearer {api_key}",
        "Content-Type": "application/json"
    }
    params = {
        "action": "getPolicy",
        "model": model_name
    }
    
    response = requests.get(url, headers=headers, params=params)
    if response.status_code != 200:
        raise Exception(f"Failed to get upload policy: {response.text}")
    
    return response.json()['data']
def upload_file_to_oss(policy_data, file_path):
    """将文件上传到临时存储OSS"""
    file_name = Path(file_path).name
    key = f"{policy_data['upload_dir']}/{file_name}"
    
    with open(file_path, 'rb') as file:
        files = {
            'OSSAccessKeyId': (None, policy_data['oss_access_key_id']),
            'Signature': (None, policy_data['signature']),
            'policy': (None, policy_data['policy']),
            'x-oss-object-acl': (None, policy_data['x_oss_object_acl']),
            'x-oss-forbid-overwrite': (None, policy_data['x_oss_forbid_overwrite']),
            'key': (None, key),
            'success_action_status': (None, '200'),
            'file': (file_name, file)
        }
        
        response = requests.post(policy_data['upload_host'], files=files)
        if response.status_code != 200:
            raise Exception(f"Failed to upload file: {response.text}")
    
    return f"oss://{key}"
def upload_file_and_get_url(api_key, model_name, file_path):
    """上传文件并获取URL"""
    # 1. 获取上传凭证，上传凭证接口有限流，超出限流将导致请求失败
    policy_data = get_upload_policy(api_key, model_name) 
    # 2. 上传文件到OSS
    oss_url = upload_file_to_oss(policy_data, file_path)
    
    return oss_url
# 使用示例if __name__ == "__main__":
    # 从环境变量中获取API Key 或者 在代码中设置 api_key = "your_api_key"
    api_key = os.getenv("DASHSCOPE_API_KEY")
    ifnot api_key:
        raise Exception("请设置DASHSCOPE_API_KEY环境变量")
        
    # 设置model名称
    model_name="qwen-vl-plus"

    # 待上传的文件路径
    file_path = "/tmp/cat.png"  # 替换为实际文件路径
    
    try:
        public_url = upload_file_and_get_url(api_key, model_name, file_path)
        expire_time = datetime.now() + timedelta(hours=48)
        print(f"文件上传成功，有效期为48小时，过期时间: {expire_time.strftime('%Y-%m-%d %H:%M:%S')}")
        print(f"临时URL: {public_url}")

    except Exception as e:
        print(f"Error: {str(e)}")
输出示例
 文件上传成功，有效期为48小时，过期时间: 2024-07-1817:36:15
临时URL: oss://dashscope-instant/xxx/2024-07-18/xxx/cat.png


调用大模型图生视频（使用视频特效）：
使用视频特效时，prompt字段无效，无需填写。
template值为：dance2
示例代码：
curl --location 'https://dashscope.aliyuncs.com/api/v1/services/aigc/video-generation/video-synthesis' \
    -H 'X-DashScope-Async: enable' \
    -H "Authorization: Bearer $DASHSCOPE_API_KEY" \
    -H 'Content-Type: application/json' \
    -d '{
    "model": "通义万相2.1-图生视频-turbo",
    "input": {
        "prompt": "",
        "img_url": "https://cdn.translate.alibaba.com/r/wan-demo-1.png",
        "template": "flying"
    },
    "parameters": {
        "resolution": "720P"
    }
}'

Qwen3-Coder入门教程｜10分钟搞定安装配置

从零到上线：用 Qwen3-Coder 和 MCP 打造儿童学习助手

真的假的？填个表格，就能调动1000个AI程序员给我打工？