本文介绍如何利用Qoder、云原生数据仓库 AnalyticDB PostgreSQL 版Supabase和通义千问图像编辑模型（Qwen Image Edit），快速搭建一个无需传统后端的AI手办生图Flutter应用。内容涵盖从前端代码自动生成、后端即服务（BaaS）配置，到AI模型集成，适合希望快速验证AI原生应用原型并实现敏捷开发的开发者。
一、概述
在AI原生应用开发的时代，传统的后端架构正在被重新定义。本方案采用轻量、敏捷的架构，通过组合以下核心技术，实现全程无需自建传统后端，即可快速构建AI手办生图Flutter应用。
- 前端：由Qoder根据需求自动生成Flutter代码，负责界面与交互。Qoder作为AI驱动的IDE Agent，能够根据需求自动生成高质量的Flutter代码。使用Flutter插件创建Empty Project后，您只需描述核心功能，配合几轮调试，就能得到可运行的移动端应用。
- 后端即服务（BaaS）：AnalyticDB Supabase提供数据存储、对象存储和边缘函数能力，简化了传统后端开发的复杂性。
- AI能力集成：AnalyticDB Supabase Edge Function接入通义千问图像编辑模型，实现图片编辑。
二、前提条件
- 已创建Supabase项目。
- 已为云原生数据仓库AnalyticDB PostgreSQL版Supabase项目开通公网访问。
- 已获取阿里云百炼API Key，用于调用通义千问图像编辑模型。
三、操作步骤
步骤一：生成Flutter应用代码
1.环境准备。
- 安装Qoder与Flutter插件。
- 安装Flutter环境。
2.创建Flutter项目。
在VS Code中使用快捷键Command + Shift + P（Mac）或Ctrl + Shift + P（Windows/Linux），搜索“flutter”，选择Flutter: New Project。
3.使用Qoder生成代码。
向Qoder描述功能需求，并调试生成代码。本文源代码示例请参见adb-supabase-flutter-demo。
功能需求描述示例如下：
build a flutter image edit app, powered by supabase, using edge function invoke image model to edit image by uploaded by users
步骤二：配置AnalyticDB Supabase
1.配置API访问。
在项目根目录下新增.env文件，复制以下信息并将相关配置替换为实际值。配置信息获取请参见获取API Keys。
SUPABASE_URL=https://sbp-xxxxx.supabase.opentrust.net SUPABASE_SERVICE_KEY=xxxxxxxx
2.设计数据库表结构。
登录Supabase Dashboard，创建数据库表。此表用于存储用户编辑图片的记录，包括原始图片URL、编辑后图片URL、用户输入的提示词等关键信息
CREATE TABLE public.edited_images ( id TEXT PRIMARY KEY, prompt TEXT NOT NULL, original_image_url TEXT NOT NULL, edited_image_url TEXT NOT NULL, created_at TIMESTAMPTZ NOT NULL DEFAULT NOW() );
- 创建对象存储桶。
- 在Supabase Dashboard侧边栏，单击Storage。
- 创建一个名为images的存储桶，用于存储用户上传的图片数据。
步骤三：集成AI服务
1.配置安全密钥。
说明：在AnalyticDB Supabase中，阿里云提供原生的Edge Function Secrets配置与集中管理能力，可将AI API Token（如DashScope和百炼）安全地存放在函数运行环境的密钥库中，通过
Deno.env.get读取，避免硬编码或客户端暴露。
- 在Supabase Dashboard侧边栏，单击Edge Function>Secrets。
- 配置
BAILIAN_API_KEY，其值为前提条件中获取的阿里云百炼API Key。
2.部署Edge Function。
- 在Supabase Dashboard侧边栏，单击Edge Function>Functions。
- 单击页面右上角的Deploy a new function，在下拉选项中选择Via Editor。
- 创建并部署名为
wan的function。
代码示例如下，请根据网络访问方式替换BASE_URL。私网访问，请参见通过终端节点私网访问阿里云百炼平台；公网访问，请参见图像编辑-通义千问。
const DASHSCOPE_API_KEY = Deno.env.get('BAILIAN_API_KEY'); const BASE_URL = 'https://vpc-cn-beijing.dashscope.aliyuncs.com/api/v1'; async function callImageEditAPI(image_url, prompt) { const messages = [ { role: "user", content: [ { image: image_url }, { text: prompt } ] } ]; const payload = { model: "qwen-image-edit", input: { messages }, parameters: { negative_prompt: "", watermark: false } }; try { const response = await fetch(`${BASE_URL}/services/aigc/multimodal-generation/generation`, { method: 'POST', headers: { 'Authorization': `Bearer ${DASHSCOPE_API_KEY}`, 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); if (!response.ok) { console.error(`Request failed: ${response.status} ${response.statusText}`); return null; } const data = await response.json(); return data.output?.choices?.[0]?.message?.content ?? null; } catch (error) { console.error("Request error:", error.message); return null; } } Deno.serve(async (req)=>{ try { const { image_url, prompt } = await req.json(); if (!image_url || !prompt) { return new Response(JSON.stringify({ error: "Missing image_url or prompt" }), { status: 400, headers: { 'Content-Type': 'application/json' } }); } const result = await callImageEditAPI(image_url, prompt); return new Response(JSON.stringify({ message: result }), { headers: { 'Content-Type': 'application/json', 'Connection': 'keep-alive' } }); } catch (error) { console.error("Server error:", error); return new Response(JSON.stringify({ error: "Internal server error" }), { status: 500, headers: { 'Content-Type': 'application/json' } }); } });
四、工作流程
- 上传原图：用户选择图片后，前端将其上传至Supabase Storage的images存储桶，并生成签名URL。
- 调用编辑：前端将签名URL与编辑指令（prompt）发送给Edge Function。Edge Function利用
BAILIAN_API_KEY调用通义千问图像编辑模型，处理图片并获取生成图的URL。 - 写入历史记录：前端将原始图片URL、编辑后图片URL及prompt等信息写入
edited_images数据库表，作为历史记录。
五、测试与验证
依次执行以下命令，安装依赖并启动应用。
flutter pub get flutter run
启动应用后，您可在设备或模拟器上体验AI手办生图功能。
提示词示例
绘制图中角色的1/7比例的商业化手办，写实风格，真实环境，手办放在电脑桌上,电脑屏幕里的内容为该手办的C4D建模过程，电脑屏幕旁放着印有原画的塑料玩具包装盒，电脑桌上还有制作手办的工具，如画笔，颜料，小刀等。
测试示例 |
效果示例 |
|
|
了解更多
欢迎扫描下方群码或搜索钉钉群号（101930027031）入群领取免费试用！
