Qoder + ADB Supabase: Build a Viral AI Figurine Image App in 5 Minutes
# **AI Figurine Generation Mobile App with Flutter, Qoder, and Supabase**
---
## 01. Introduction
In the era of **AI-native application development**, traditional backend architectures are evolving rapidly.
This guide walks you through **building a complete AI-powered figurine image generation Flutter mobile app** using:
- **Qoder**
- **Alibaba Cloud ADB Supabase**
- **Qwen Image Edit model**
**No traditional backend is required.**
You'll experience **ultra-fast "Vibe Coding"**—turning ideas into working apps in minimal time.
---
## 02. Overall Approach
**Architecture overview:**
- **Frontend**: Auto-generated Flutter UI and interactions via Qoder based on functional requirements.
- **Data & Object Storage**: Managed by ADB Supabase (Backend-as-a-Service).
- **AI Capability**: Provided by Qwen Image Edit model integration through Supabase Edge Functions.
- **Workflow**: Lightweight and suitable for rapid prototyping to production scaling.
---
## 03. Environment & Preparation
Follow these setup steps:
1. **Activate Alibaba Cloud ADB Supabase instance** (free 1C2G tier).
- To call the Bailian API, configure your Supabase VPC to access Bailian via **private endpoint** (free) or via **public NAT gateway** (paid).
2. **Get your Bailian DashScope API Key** — needed for Qwen Image Edit model calls.
3. **Install Qoder & Flutter plugin** and set up Flutter environment (Android/iOS SDK).
- Refer to [VS Code Flutter installation guide](https://docs.flutter.dev/install/with-vs-code).
---
## 04. AI-Driven Development with Qoder
**Qoder**, an AI-powered IDE agent, can auto-generate Flutter code from textual feature descriptions.
**Process:**
1. Create an **empty Flutter project** with the Flutter plugin.
2. **Describe your core features** in plain English.
3. Let Qoder generate code automatically.
4. Iterate via small tweaks and debugging.
You can start with the [source code](#) provided in this article, then build your enhanced version.
---
## 05. Backend-as-a-Service with ADB Supabase
### 5.1 Obtain API Configuration
In the **ADB Supabase dashboard**:
- Copy `API_URL` and `API_KEY`.
- Store them securely in `.env` at the project root:
SUPABASE_URL=https://sbp-xxxxx.supabase.opentrust.net
SUPABASE_SERVICE_KEY=xxxxxxxx
---
### 5.2 Database Table Structure
In **Supabase dashboard > Table editor**, create:
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()
);
This stores:
- Prompt text
- Original image URL
- Edited image URL
- Timestamp
---
### 5.3 Object Storage Bucket
In **Supabase dashboard > Storage**:
- Create a bucket named **images** for user-uploaded original and edited images.
---
## 06. AI Service Integration via Supabase Edge Functions
### 6.1 Deploy Core Logic
In **Supabase dashboard > Edge Functions**:
- Click **"Via Editor Deploy a new function"**
- Paste the following code
- Name the function **wan**
- Deploy
**Base URL options:**
- **Private endpoint** (free):
`https://vpc-cn-beijing.dashscope.aliyuncs.com/api/v1`
- **Public NAT gateway** (paid):
`https://dashscope.aliyuncs.com/api/v1`
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' }
});
}
});
**Core flow:**
1. Reads API key from secrets.
2. Sends prompt + image URL to Qwen Image Edit model.
3. Returns the edited image URL to the client.
4. Handles all errors gracefully.
---
### 6.2 Secure Key Management
In **Supabase dashboard > Edge Function Secrets**:
- Store `BAILIAN_API_KEY`
- Access in code via:Deno.env.get('BAILIAN_API_KEY')
**Keys are never exposed** to the client, committed to code, or included in builds.
---
## 07. Overall Workflow
1. **Original image upload** → stored in `images` bucket → signed URL generated.
2. **Image edit request** → signed URL + prompt sent to Edge Function → Qwen Image Edit model processes → edited image URL returned.
3. **History record** → store prompt, original and edited URLs in `edited_images` table.
---
## 08. Testing Example
Prompt example: *"Create a 1/7 scale commercial figurine based on the character in the image... realistic style... placed on a computer desk with modeling workflow displayed on screen and production tools nearby."*
---
## 09. Conclusion
Using:
- **Qoder** for AI-assisted Flutter code
- **ADB Supabase** for backend services
- **Qwen Image Edit** for AI image generation
You can **build a fully functional AI figurine app quickly without a traditional backend**.
For broader AI content publishing and monetization, check out **[AiToEarn](https://aitoearn.ai/)** — open-source, cross-platform publishing to Douyin, Kwai, WeChat, Bilibili, Rednote, Facebook, Instagram, LinkedIn, Threads, YouTube, Pinterest, and X (Twitter).
---
## References
1. [Activate Alibaba Cloud ADB Supabase](https://gpdbnext.console.aliyun.com/gpdb/cn-beijing/supabase?utm_content=g_1000407324)
2. [Bailian PrivateLink Access](https://help.aliyun.com/zh/model-studio/access-model-studio-through-privatelink)#df2c7d06b6752?utm_content=g_1000407325
3. [NAT Gateway](https://vpc.console.aliyun.com/nat/cn-beijing/nats?utm_content=g_1000407326)
4. [Bailian API Key](https://bailian.console.aliyun.com/?tab=model#/api-key&utm_content=g_1000407327)
5. [Qoder](https://qoder.com/)
6. [Flutter Plugin](https://marketplace.visualstudio.com/items?itemName=Dart-Code.flutter)
7. [Flutter Install Guide](https://docs.flutter.dev/install/with-vs-code)
8. [Demo Source Code](https://github.com/fffzlfk/adb-supabase-flutter-demo)
---
[Read the full text](2247508855)
[Open in WeChat](https://wechat2rss.bestblogs.dev/link-proxy/?k=84522a1e&r=1&u=https%3A%2F%2Fmp.weixin.qq.com%2Fs%3F__biz%3DMzg4NTczNzg2OA%3D%3D%26mid%3D2247508855%26idx%3D1%26sn%3D41170c2eb4d47db741341aaa23362cfb)
