Large Models for Images Integration
The EdgeOne Makers document primarily describes integrating AI image generation capabilities into applications. It covers the process from obtaining API keys to deployment, which is implemented through two methods: native API and AI SDK, to meet diverse development needs. The native API offers fine-grained control and high flexibility, while the AI SDK simplifies the development workflow and supports switching between multiple providers.
Getting Started
EdgeOne Makers provides multiple templates for AI image generation, supporting two access methods: native API calls and AI SDK encapsulated calls. Examples are as follows:
This document will use these two Templates as samples to perform a detailed integration analysis of the two technology paths: native API call and AI SDK encapsulated invocation.
Pre-Deployment Instructions
To implement the AI image generation feature, you must first apply for an API Key. The following is the API Key obtain address for mainstream AI image generation providers:
HuggingFace: https://huggingface.co/settings/tokens
Replicate: https://replicate.com/account/api-tokens
Fireworks: https://fireworks.ai/settings/api-keys
DeepInfra: https://deepinfra.com/dash/api_keys
Luma: https://lumalabs.ai/api/keys
Together AI: https://api.together.xyz/settings/api-keys
One-Click Deployment
Start by deploying the previous template, synchronize the project code to the GitHub repository, then introduce in detail the seamless integration implementation process.
Taking the ai-sdk-image-generator-starter template as an example, click the "Deploy" button on the template detail page to go to the EdgeOne Makers console. After the deployment page is entered, environment variable configuration options are displayed. These configuration items correspond to the API Keys of different AI image generation services. Different templates present different configuration item lists, but you must ensure that at least one API Key is correctly configured and available. The example configuration page is displayed as follows:
Once configured, click the "Start Deployment" button to start project deployment.
Integration Details
Downloading Code
After successful deployment, a project same as the template has been generated under your Github account. Here, first use the clone command to download the code to local from your Github account. Similarly, take the ai-sdk-image-generator-starter template as an example, run the following command in the terminal:
git clone https://github.com/${your-github-account}/ai-sdk-image-generator-starter.gitcd ai-sdk-image-generator
Native API Calls
If selected as a native API call template, the logic process of the image generation template project mainly includes: image parameter selection → edge function calling AI → frontend display. The following provides a detailed description of key links such as image parameter selection and edge function calling AI.
1. Image Parameter Selection
Edgeone's AI image generation template has a built-in rendering process for frontend pages. User only needs to configure the available model list in frontend parameter, no need to develop. The request logic for image generation is included in src/pages/index.tsx file. Core code example:
const res = await fetch("/v1/generate", {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({image: `${prompt} (${modelInfo.name} style)`,platform: platform.id,model: modelInfo.value || selectedModel,}),});
2. Calling AI with Function
The processing logic of the edge function is implemented in the
functions/v1/generate/index.js file. The logic flow of this file is: first receive parameters (including prompt, platform, model) from the frontend, then check if the environment variables for the corresponding platform are configured correctly. Sample code for checking environment variables:// Token validation for different platformsconst validateToken = (platform) => {const tokens = {nebius: env.NEBIUS_TOKEN,huggingface: env.HF_TOKEN,replicate: env.REPLICATE_TOKEN,openai: env.OPENAI_API_KEY,fal: env.FAL_KEY,};if (!tokens[platform]) {throw new Error(`${platform} API token is not configured. Please check your environment variables.`);}};
Access environment variables via
env to effectively prevent API key exposure in code and improve application security. This approach stores sensitive information in environment variables rather than hard-coded in source code.After checking the environment variables, it will directly request the image generative model API of the corresponding platform. For example, HuggingFace's standard API request core code is as follows:
'nerijs/pixel-art-xl': () => {validateToken('huggingface');return fal_query({prompt,}, 'https://router.huggingface.co/fal-ai/fal-ai/fast-sdxl');}
const response = await PROVIDERS.fetch(url, {headers: {Authorization: `Bearer ${token}`,"Content-Type": "application/json",},method: "POST",body: JSON.stringify(data),});
To integrate which AI models, learn about their AI call API protocols, then encapsulate them in functions. Here Edgeone's AI image generation templates already support models like HuggingFace, OpenAI, Replicate, Fal, and Nebius.
After image generation, return it to the front end. The template project has built-in logic for image display, with UI interaction before, during, and after the image request.
AI SDK Encapsulated Invocation
AI SDK encapsulated invocation method uses the unified API provided by AI SDK to call AI image models from different vendors, simplifying development process via SDK encapsulation. The logic process of the ai-sdk-image-generator-starter template is similar to that of the native API call template, with only slight variations in implementation details when calling AI image models.
1. Image Parameter Selection
Start with sending a request from the frontend. In the project, the core code to initiate request is located in
src/pages.tsx file. The frontend sends request via /api/generate API. The core code is as follows:const response = await fetch(apiUrl, {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({prompt,model,size,}),});
Among them,
prompt is the user input for image generation; model is the requested model name, used to specify the AI image generation model to call; size is the image dimensions parameter; quality is the quality parameter.Notably, the size parameter must be set in advance because different models support varying specifications. For example, DALL-E 3 supports sizes such as "1024x1024", "1024x1792", and "1792x1024", while Stable Diffusion may support different specifications like "512x512" and "768x768". Therefore, configure the size in advance to ensure selecting the correct parameter list when switching models.
The AI SDK image generation template in EdgeOne Makers has compiled a list of supported model sizes. The related configuration is located in the
components/modelSizeMapping.ts file. Developers can directly use these pre-configured size mappings, eliminating the need to manually handle size compatibility issues across different models.2. Calling AI with Function
The AI SDK encapsulated invocation method is the same as the native invocation method mentioned above, avoiding key leakage risk. Here, the environment variable check step is skipped. When calling the AI image model, the function uses the experimental_generateImage object exposed by the AI SDK to unify image generation. The key retrieval is automatically handled internally by experimental_generateImage. Users only need to configure it in the .env.local file as mentioned in the previous context. The core sample code for image generation using experimental_generateImage is as follows:
const imageResult = await experimental_generateImage({model: imageModel,prompt: prompt,size: size, // Use frontend-provided size});
After calling experimental_generateImage, you only need to read the function return in standard format. Following is the example code for reading the base64 content of the image:
const imageUrl = `data:image/png;base64,${imageResult.image.base64}`;return new Response(JSON.stringify({images: [{url: imageUrl,base64: imageResult.image.base64,},],}));
After obtaining the generated image data, return it to the frontend for display. The frontend display details are not described here. If interested in UI interaction details, just view the code.
Local Debugging
After downloading the project locally and analyzing its implementation details, developers may need to perform local development, debugging, or preview. To enable local debugging, you also need to configure environment variables, which can be cumbersome. In this case, you can use EdgeOne CLI. It can synchronize the configuration information deployed on EdgeOne Makers to your local environment and also deploy the project locally. Using EdgeOne CLI requires installation and login. For specific details, refer to the documentation of EdgeOne CLI.
After installation and login, run the following command in your local project directory to link the project with the project in the Edgeone Makers console.
edgeone makers link
After running
edgeone makers link , you will be prompted to enter the EdgeOne Makers project name, which is the name of the template project deployed in the previous context. After the project name is entered, the environment variables from the EdgeOne Makers console for the deployed project are synchronized to your local machine. Upon successful association, a .env file is generated in the root directory of your local project. This file contains the list of configured environment variables.After association, execute the following command to proceed with local deployment:
edgeone makers dev
After deployment, you can access it at
localhost:8088. Take ai-sdk-image-generator-starter as an example, the preview is as follows:
If you have made custom modifications to the code, you can directly submit the project to GitHub via git. EdgeOne Makers detects the commit records on GitHub and automatically redeploys the project. After deployment, go to the console to verify. The sample page that appears after deployment is as follows:
More Related Content
