开发过程:
- 构思设计,先想清楚要做一个什么项目,用什么模型;
- 生成调试,把需求交给 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 将自动输出包含前端页面、后端接口、依赖配置在内的完整项目代码。
接下来,我们需要根据 AI 提供的使用说明,依次完成环境配置、服务启动和功能测试,将这个项目真正“跑起来”。
1)配置后端环境变量
- 在 VS Code 中打开 backend/.env 文件(或项目根目录下的 .env);
- 找到类似 DASHSCOPE_API_KEY=your_api_key_here 的占位符;
- 登录阿里云百炼平台 ,进入【API-KEY 管理】页面,创建并复制你的 API Key;
- 将其粘贴替换占位符(这是调用 通义万相2.1-图生视频-plus 模型的身份凭证,须准确填写)
DASHSCOPE_API_KEY=sk-xxxxxxxxxxxxxxxxxxxxxx
2)启动后端服务
- 在 VS Code 顶部菜单栏,点击【终端】→【新建终端】;
- 在终端执行命令:cd backend
当前路径会切换到后端文件夹所在位置,如果默认打开的位置和终端文件夹不在一个系统盘,backend 就需要改成完整的文件地址,比如:cd D:\backend
- 执行以下命令:npm run dev
✅ 如出现类似 [nodemon] starting 'node server.js' 的提示,代表后端服务已成功启动,服务器正在监听端口(如图中显示为 3000)。
3)启动前端页面
新建一个终端窗口,执行命令:
cd frontendnpm run dev
把路径切换到前端文件夹,并启动终端。
看到终端返回了前端的地址,说明前端已成功启动,此时我们按住ctrl并单击链接,就可以访问网站。
4)测试功能流程
此时你应该看到一个简洁的网页界面,主要包含两个按钮:
- 上传图片:选择一张人物正面照
- 立即生成:触发图生视频任务
在首次测试中,也遇到了报错,只需要将错误信息截图发给 Qwen3-coder ,让它根据报错信息修改即可。这里需要特别注意的是,我们需要按照阿里云百炼的请求示例说明,让 Qwen3-coder 将oss://...替换为真实的临时 URL。
虽然我们的网站已经可以正常运行,但前端界面略显简单。为了让它更具吸引力,我们可以对页面进行美化升级。
比如让 Qwen3-Coder 生成 一套前端UI代码;主色调为奶白+雾紫,果冻质感,Linear 风格。
根据这个网站,我们还可以慢慢优化调整页面布局,比如:
- 网站名称修改为:AI 舞蹈视频生成器
- 编辑介绍语:上传照片,AI 帮你生成一段舞蹈视频上传图片
- 下方小字提醒: 支持单人照片;建议使用半身至全身的正面照片
- 图片和视频的尺寸均为3:4,调整合适的布局
- ...
当预览效果合适之后,就可以点击右上角,下载代码。并将这段代码文件放进项目文件夹,作为上下文添加。
提示词:用我给你的组件代码应用到前端布局,不改变逻辑。
在完成全部设计后,我们可以使用 MCP 插件系统,通过 edgeone-pages 实现一键发布,将这个静态网站部署到全球可访问的 CDN 节点。
Qwen3-Coder 挑战赛正在火热进行中!无论你是编程新手,还是 AI 爱好者,只要敢想敢创,就有机会赢取丰厚奖金。赶快加入挑战,用自然语言开启你的AI开发之旅吧!