AnalyticDB:Build AI-Native mobile Apps quickly with Qoder and AnalyticDB Supabase

Prepare the environment.

1. Install Qoder.

2. Install and set up Flutter.

Create a Flutter project.

In VS Code, use the keyboard shortcut Command + Shift + P (macOS) or Ctrl + Shift + P (Windows/Linux). Then, search for "flutter" and select Flutter: New Project.

Generate code using Qoder.

1. Describe the feature requirements in Qoder AI Chat to auto-generate Flutter code. The following is an example of a feature requirement description:

   build a flutter image edit app, powered by supabase, using edge function invoke image model to edit image by uploaded by users

2. Debug the generated scaffold code. You can proceed with the debugged reference package adb-supabase-flutter-demo.

Configure API access.

In the project's root directory, create a .env file. Copy the following template into the file and replace the placeholder values with your actual configuration. You can obtain the configuration information by following the instructions in Get API Keys.

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

Design the database table schema.

Log on to the Supabase Dashboard and create a database table. This table stores records of user-edited images, including key information such as the original image URL, the edited image URL, and the user's prompt.

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()
);

Create an object storage bucket.

1. In the sidebar of the Supabase Dashboard, click Storage.

2. Create a bucket named images to store user-uploaded image data.

Configure secrets.

1. In the sidebar of the Supabase Dashboard, click Edge Function > Secrets.

2. Configure BAILIAN_API_KEY using the Model Studio API key that you obtained.

Deploy the edge function.

1. In the sidebar of the Supabase Dashboard, click Edge Function > Functions.

2. In the upper-right corner of the page, click Deploy a new function and select Via Editor from the drop-down list.

3. Create and deploy a function named wan.

   The following code provides an example. Replace BASE_URL based on your network access method:

   • Private network: See Access Alibaba Cloud Model Studio over a private network through an endpoint.

   • Public network: See Image editing - Qwen.

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