用 Qoder 和 AnalyticDB Supabase 轻松打造你的 AI 原生移动端 APP！

今天我想和大家聊聊，怎么用Qoder、云原生数据仓库AnalyticDB PostgreSQL版Supabase，以及Qwen Image Edit，轻松打造一个不需要传统后端的AI手办生图Flutter应用。这个过程包括从前端代码的自动生成到后端即服务（BaaS）的配置，再到AI模型的集成，特别适合那些想要快速验证AI应用原型和实现灵活开发的朋友们。

一、概述

在如今这个AI应用开发的时代，传统的后端结构正在经历变革。这一方案采用了一种轻量且敏捷的架构，通过组合一些核心技术，你就可以在不需要自建传统后端的情况下，迅速搭建AI手办生图的Flutter应用。

• 前端：使用Qoder根据你的需求自动生成Flutter代码，负责应用的界面和互动。作为一个AI驱动的IDE助手，Qoder能够高效地生成高质量的Flutter代码。你只需创建一个空项目，描述你的核心需求，并经过几轮调试，便能得到一个可以运行的移动应用。
• 后端即服务（BaaS）：AnalyticDB Supabase提供了数据存储、对象存储和边缘函数的能力，极大地简化了传统后端开发的复杂性。
• AI能力集成：通过AnalyticDB Supabase Edge Function，接入通义千问图像编辑模型，轻松实现图片编辑功能。

二、前提条件

• 你需要先创建一个Supabase项目。
• 确保你的AnalyticDB PostgreSQL版Supabase项目已经开通了公网访问。
• 获取阿里云的百炼API Key，方便调用通义千问图像编辑模型，请参考这里。

三、操作步骤

步骤一：生成Flutter应用代码

1. 准备环境。

• 安装Qoder和Flutter插件。

2. 创建Flutter项目。

在VS Code中，你可以使用快捷键Command + Shift + P（Mac）或Ctrl + Shift + P（Windows/Linux），输入“flutter”，选择Flutter: New Project。

3. 使用Qoder生成代码。

向Qoder描述你的功能需求，并调试生成的代码。相关的示例源代码可以在这里找到。

功能需求描述的示例如下：

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. 设计数据库表结构。

创建一个数据库表，用于记录用户编辑的图片信息，包括原始图片的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() 
);

3. 创建对象存储桶。

• 在Supabase的仪表板侧边栏，点击Storage。
• 创建一个名为images的存储桶，用于存放用户上传的图片数据。

步骤三：集成AI服务

1. 配置安全密钥。

说明：在AnalyticDB Supabase中，阿里云提供了原生的Edge Function Secrets配置和集中管理能力，能够安全存放AI API Token（如DashScope和百炼）在函数的密钥库中，通过Deno.env.get读取，避免硬编码或客户端暴露。

• 在Supabase仪表板的侧边栏，点击Edge Function>Secrets。
• 配置BAILIAN_API_KEY，其值为前提条件中获取的阿里云百炼API Key。

2. 部署Edge Function。

• 在Supabase仪表板的侧边栏，点击Edge Function>Functions。
• 在页面右上角点击Deploy a new function，从下拉菜单中选择Via Editor。
• 创建并部署一个名为wan的函数。

代码示例请见下方，请根据网络访问方式替换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'
      }
    });
  }
});

四、工作流程

1. 上传原图：用户选择图片后，前端将其上传至Supabase Storage的images存储桶，并生成签名URL。
2. 调用编辑：前端把签名URL和编辑指令（prompt）发送给Edge Function，Edge Function利用BAILIAN_API_KEY调用通义千问图像编辑模型，处理图片并获取生成图的URL。
3. 写入历史记录：前端将原始图片URL、编辑后的图片URL以及prompt等信息写入edited_images数据库表，以便保存历史记录。

五、测试与验证

依次执行以下命令，安装依赖并启动应用。

flutter pub get 
flutter run

一旦应用启动，你就可以在设备或模拟器上体验AI手办生图的功能了。

提示词示例

绘制图中角色的1/7比例的商业化手办，写实风格，真实环境，手办放在电脑桌上,电脑屏幕里的内容为该手办的C4D建模过程，电脑屏幕旁放着印有原画的塑料玩具包装盒，电脑桌上还有制作手办的工具，如画笔，颜料，小刀等。

测试示例

效果示例

了解更多

欢迎搜索钉钉群号（101930027031）加入群聊，领取免费试用机会哦！