一人挑战一支研发团队,3步搞定全栈开发

本文涉及的产品
多模态交互后付费免费试用,全链路、全Agent
简介: 本文是 Qwen3-Coder 挑战赛教程第四期,我将带你完整走通一个真实项目案例:从零搭建一个“AI 舞蹈生成器”网站——上传一张人物照片,点击“立即生成”,即可获得一段该人物跳舞的动态视频。整个过程仅需三步,无需前端、后端或模型部署经验,真正实现“说话即开发”。

开发过程:

  • 构思设计,先想清楚要做一个什么项目,用什么模型;
  • 生成调试,把需求交给 Qwen3-Coder,生成前后端,再跑通流程;
  • 优化页面布局,让网站看起来更完整。


本次开发我们用到了:

  • 核心模型:通义千问3-Coder-Plus、通义万相2.1-图生视频-Plus;
  • 开发工具:通义灵码 VS Code 插件、阿里云百炼平台;
  • 部署方案:MCP 插件系统 + edgeone-pages,实现一键发布至全球可访问的静态站点。


0.jpg


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


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


  • 功能需求用户上传照片 → 点击“立即生成” → 调用图生视频模型 → 返回并播放生成的舞蹈视频。
  • 交互体验界面简洁、按钮醒目、支持移动端访问,上传后有加载提示,生成失败时有友好反馈。
  • 技术实现前端使用 HTML + CSS + JavaScript 实现单页应用;后端通过 Python Flask 提供 API 接口;模型层调用通义万相2.1-图生视频-Plus 完成图像到视频的转换。
  • 部署目标最终网站可公网访问,支持分享链接。


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


0 (1).jpg


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


640.png


  • 打开 VS Code,点击左侧【扩展】图标
  • 搜索 Lingma,安装“Lingma - Alibaba Cloud AI Coding Assistant”官方插件
  • 登录阿里云账号,完成身份验证

0.png


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


0 (1).png


点击【文件】【打开文件夹】,新建一个本地文件夹(如 ai-dance-generator),作为项目根目录。

0 (2).png


0 (3).png


进入通义灵码的聊天界面,选择 “智能体”模式(Agent Mode)。


0 (2).jpg


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


0 (4).png

重点关注:请求 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 将自动输出包含前端页面、后端接口、依赖配置在内的完整项目代码。


0 (5).png


接下来,我们需要根据 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


640 (1).png


2)启动后端服务

  • 在 VS Code 顶部菜单栏,点击【终端】→【新建终端】;
  • 在终端执行命令:cd backend


当前路径会切换到后端文件夹所在位置,如果默认打开的位置和终端文件夹不在一个系统盘,backend 就需要改成完整的文件地址,比如:cd D:\backend

  • 执行以下命令:npm run dev


640 (2).png

✅ 如出现类似 [nodemon] starting 'node server.js' 的提示,代表后端服务已成功启动,服务器正在监听端口(如图中显示为 3000)。


3)启动前端页面

新建一个终端窗口,执行命令:

cd frontendnpm 
run dev


把路径切换到前端文件夹,并启动终端。


看到终端返回了前端的地址,说明前端已成功启动,此时我们按住ctrl并单击链接,就可以访问网站。



640 (3).png

4)测试功能流程

此时你应该看到一个简洁的网页界面,主要包含两个按钮:

  • 上传图片选择一张人物正面照
  • 立即生成触发图生视频任务


640 (4).png

在首次测试中,也遇到了报错,只需要将错误信息截图发给 Qwen3-coder ,让它根据报错信息修改即可。这里需要特别注意的是,我们需要按照阿里云百炼的请求示例说明,让 Qwen3-coder 将oss://...替换为真实的临时 URL。


640 (5).png


0 (3).jpg


虽然我们的网站已经可以正常运行,但前端界面略显简单。为了让它更具吸引力,我们可以对页面进行美化升级


比如让 Qwen3-Coder 生成 一套前端UI代码;主色调为奶白+雾紫,果冻质感,Linear 风格。

0 (6).png


根据这个网站,我们还可以慢慢优化调整页面布局,比如:

  • 网站名称修改为:AI 舞蹈视频生成器
  • 编辑介绍语:上传照片,AI 帮你生成一段舞蹈视频上传图片
  • 下方小字提醒: 支持单人照片;建议使用半身至全身的正面照片
  • 图片和视频的尺寸均为3:4,调整合适的布局
  • ...


当预览效果合适之后,就可以点击右上角,下载代码。并将这段代码文件放进项目文件夹,作为上下文添加。

提示词:用我给你的组件代码应用到前端布局,不改变逻辑。


640 (6).png


在完成全部设计后,我们可以使用 MCP 插件系统,通过 edgeone-pages 实现一键发布,将这个静态网站部署到全球可访问的 CDN 节点。


Qwen3-Coder 挑战赛正在火热进行中!无论你是编程新手,还是 AI 爱好者,只要敢想敢创,就有机会赢取丰厚奖金。赶快加入挑战,用自然语言开启你的AI开发之旅吧!

相关文章
|
1月前
|
人工智能 前端开发 JavaScript
最佳实践3:用通义灵码开发一款 App
本示例演示使用通义灵码,基于React Native与Node.js开发跨平台类通义App,重点展示iOS端实现。涵盖前端页面生成、后端代码库自动生成、RTK Query通信集成及Qwen API调用全过程,体现灵码在全栈开发中的高效能力。(238字)
216 11
|
1月前
|
测试技术
哪里不对改哪里!全能图像编辑模型Qwen-Image-Edit来啦
Qwen-Image-Edit基于20B Qwen-Image模型,融合视觉语义与外观控制,支持中英文文字精准编辑、风格迁移、IP创作等多重功能,具备SOTA性能,助力低门槛、高精度图像编辑。
713 23
|
2月前
|
人工智能 测试技术 开发工具
如何将 AI 代码采纳率从30%提升到80%?
AI编码采纳率低的根本原因在于人类期望其独立完成模糊需求,本文提出了解决之道,讲解如何通过结构化文档和任务拆解提高AI的基础可靠性。
875 24
|
1月前
|
人工智能 运维 Serverless
函数计算 × MSE Nacos : 轻松托管你的 MCP Server
本文将通过一个具体案例,演示如何基于 MCP Python SDK 开发一个标准的 MCP Server,并将其部署至函数计算。在不修改任何业务代码的前提下,通过控制台简单配置,即可实现该服务自动注册至 MSE Nacos 企业版,并支持后续的动态更新与统一管理。
516 42
|
1月前
|
人工智能 Kubernetes 调度
ModelDistribution:高效的大模型管理、分发和预热方案
阿里云ACK One舰队推出ModelDistribution方案,创新性采用OCI标准封装模型,实现跨地域高效分发与预热,解决大模型部署中的管理复杂、拉取慢、多集群同步难等痛点,助力企业平滑演进至多地域AI推理架构。
186 1
ModelDistribution:高效的大模型管理、分发和预热方案
|
1月前
|
人工智能 自然语言处理 前端开发
最佳实践2:用通义灵码以自然语言交互实现 AI 高考志愿填报系统
本项目旨在通过自然语言交互,结合通义千问AI模型,构建一个智能高考志愿填报系统。利用Vue3与Python,实现信息采集、AI推荐、专业详情展示及数据存储功能,支持响应式设计与Supabase数据库集成,助力考生精准择校选专业。(239字)
171 12
|
1月前
|
监控 安全 数据可视化
开发更可控,部署更便捷:AgentScope 迈入1.0时代
AgentScope 1.0 是通义实验室推出的开源多智能体开发框架,旨在打造稳定、安全、开箱即用的智能体生产级解决方案。通过“核心框架+运行时+可视化工具”三层架构,支持智能体的构建、部署、监控全生命周期管理,具备实时干预、高效工具调用与智能上下文管理能力,助力开发者实现从“能跑”到“可控、可落地”的跨越。
669 0
|
1月前
|
文字识别 自然语言处理 API
同时斩获两个开源第一,超火的通义Qwen3-VL CookBook来了
Qwen3-VL开源发布后广受认可,登顶Chatbot Arena视觉榜与OpenRouter图像处理市场份额第一。支持文档解析、OCR、视频理解、3D定位等多模态任务,现推出详细Cookbook助力开发者高效应用。
559 3
|
27天前
|
人工智能 数据安全/隐私保护 开发者
一条AI指令,解决"发朋友圈不知道写啥"的千古难题
技术人发朋友圈总犯难?项目上线怕炫耀,生活瞬间不知如何表达。其实,用AI辅助写作是个妙招。关键在于给出清晰指令:明确场景、风格与需求,让AI生成真实自然、有温度的文案。本文提供一套即拿即用的AI指令模板,覆盖生活、工作、旅行等六大场景,帮你快速生成不“AI味”的朋友圈内容。省下纠结时间,真诚分享生活,才是正解。
182 10