AnalyticDB:Quickly build an AI-native mobile app using Qoder and AnalyticDB Supabase

Request flow

1. The user selects an image. The Flutter app uploads it to the images bucket in Supabase Storage and generates a signed URL.

2. The app sends the signed URL and the user's prompt to the image-edit edge function.

3. The edge function retrieves the BAILIAN_API_KEY secret and calls the Qwen Image Edit model. The model returns the edited image URL.

4. The app writes the original image URL, edited image URL, and prompt to the edited_images table as a history record.

Set up API access

In the project root directory, create a .env file with the following content. Replace the placeholder values with your actual configuration. To find these values, see Get API keys.

SUPABASE_URL=https://sbp-xxxxx.supabase.opentrust.net
SUPABASE_SERVICE_KEY=xxxxxxxx

Create the database table

Log in to the Supabase Dashboard and run the following SQL to create the edited_images table. This table stores each image-editing session, including the original image URL, edited image URL, and user prompt.

CREATE TABLE public.edited_images (
    id TEXT PRIMARY KEY,
    user_id UUID NOT NULL REFERENCES auth.users(id) ON DELETE CASCADE,
    prompt TEXT NOT NULL,
    original_image_url TEXT NOT NULL,
    edited_image_url TEXT NOT NULL,
    created_at TIMESTAMPTZ NOT NULL DEFAULT NOW()
);

-- Enable row-level security (RLS)
ALTER TABLE edited_images ENABLE ROW LEVEL SECURITY;

-- Users can view only their own images
CREATE POLICY "Users can view their own edited images"
ON edited_images
FOR SELECT
TO authenticated
USING (auth.uid() = user_id);

-- Users can insert only their own images
CREATE POLICY "Users can insert their own edited images"
ON edited_images
FOR INSERT
TO authenticated
WITH CHECK (auth.uid() = user_id);

-- Users can delete only their own images
CREATE POLICY "Users can delete their own edited images"
ON edited_images
FOR DELETE
TO authenticated
USING (auth.uid() = user_id);

Create the storage bucket

1. In the Supabase Dashboard, click Storage in the left navigation pane.

2. Create a bucket named images and enable Public bucket to store user-uploaded images.

3. Run the following SQL to set access policies for the bucket:

   -- Authenticated users can upload to their own folder
   CREATE POLICY "Allow authenticated users to upload images"
   ON storage.objects
   FOR INSERT
   TO authenticated
   WITH CHECK (
     bucket_id = 'images' AND
     auth.uid()::text = (storage.foldername(name))[1]
   );
   
   -- Authenticated users can read their own files
   CREATE POLICY "Allow authenticated users to read their own images"
   ON storage.objects
   FOR SELECT
   TO authenticated
   USING (
     bucket_id = 'images' AND
     auth.uid()::text = (storage.foldername(name))[1]
   );
   
   -- Public read access for generating public URLs
   CREATE POLICY "Allow public read access to images"
   ON storage.objects
   FOR SELECT
   TO public
   USING (bucket_id = 'images');

Store the API key as a secret

1. In the Supabase Dashboard, go to Edge Function > Secrets.

2. Add a secret named BAILIAN_API_KEY and set its value to your Model Studio API key.

Deploy the edge function

1. In the Supabase Dashboard, go to Edge Function > Functions.

2. Click Deploy a new function in the upper-right corner and select Via Editor.

3. Create a function named image-edit with the following code. Set BASE_URL based on your network access method:

   • Internal network: see Access Alibaba Cloud Model Studio over an internal network

   • Public network: see Qwen Image Edit guide

   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' } }
       );
     }
   });