本文介紹如何利用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()
);
  1. 創建對象存儲桶。
  1. 在Supabase Dashboard側邊欄，單擊Storage。
  2. 創建一個名為images的存儲桶，用於存儲用户上傳的圖片數據。

步驟三：集成AI服務

1.配置安全密鑰。

説明：在AnalyticDB Supabase中，阿里雲提供原生的Edge Function Secrets配置與集中管理能力，可將AI API Token（如DashScope和百鍊）安全地存放在函數運行環境的密鑰庫中，通過Deno.env.get讀取，避免硬編碼或客户端暴露。

  1. 在Supabase Dashboard側邊欄，單擊Edge Function>Secrets。
  2. 配置BAILIAN_API_KEY，其值為前提條件中獲取的阿里雲百鍊API Key。

2.部署Edge Function。

  1. 在Supabase Dashboard側邊欄，單擊Edge Function>Functions。
  2. 單擊頁面右上角的Deploy a new function，在下拉選項中選擇Via Editor。
  3. 創建並部署名為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'
      }
    });
  }
});

四、工作流程

  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建模過程，電腦屏幕旁放着印有原畫的塑料玩具包裝盒，電腦桌上還有製作手辦的工具，如畫筆，顏料，小刀等。

測試示例

基於 Qoder 和 AnalyticDB Supabase 快速構建AI原生移動端 APP_ADB

效果示例

基於 Qoder 和 AnalyticDB Supabase 快速構建AI原生移動端 APP_Supabase_02

瞭解更多

歡迎搜索釘釘羣號（101930027031）入羣領取免費試用！