图片大模型集成
本文主要讲述将 AI 图片生成能力集成到应用中。从获取密钥到部署上线，通过原生 API 和 AI SDK 两种方式实现，满足不同开发需求。原生 API 提供精细控制和高度灵活性，AI SDK 则简化开发流程支持多厂商切换。
快速入门
EdgeOne Pages 提供多个 AI 图片生成的模板，支持原生接口调用和AI SDK 封装调用两种接入方式。示例如下：
本文将以这两个模版为范例，分别对原生接口调用和 AI SDK 封装调用两种技术路径进行详细的集成解析。
前置条件说明
实现 AI 图片生成功能需要先申请 API Key。以下是各主流 AI 图片生成提供商的 API Key 获取地址：
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
一键部署
首先需要部署上文提到的模版，将项目代码同步到 GitHub 仓库，然后开始详细介绍集成实现过程。
以 ai-sdk-image-generator-starter 模版为例，在模版详情页面点击 "Deploy" 按钮跳转到 EdgeOne Pages 控制台。进入部署界面后，会展示环境变量配置选项，这些配置项对应不同 AI 图片生成服务的 API Key。不同模版会呈现不同的配置项列表，但必须确保至少有一个 API Key 配置正确且可用。示例配置页面显示如下：
完成配置后点击 "start deployment" 按钮即可开始项目部署。
集成详情
下载代码
部署成功后，Github 帐户下已经生成了一个和模版一样的项目。这里先使用 clone 命令从 Github 帐户下将代码下载到本地。同样以 ai-sdk-image-generator-starter 模版为示例，在终端执行如下命令：
git clone https://github.com/${your-github-account}/ai-sdk-image-generator-starter.gitcd ai-sdk-image-generator
原生接口调用
如果选择是原生接口调用的模版，生图的模版项目的逻辑流程主要是：生图参数选择 → 边缘函数调用 AI → 前端显示图片。下面将对生图参数选择、边缘函数调用 AI 等关键环节进行详细描述
1、生图参数选择
Edgeone 的 AI 图片生成模版已内置了前端页面的渲染流程。用户只需在前端参数中配置好可用的 AI 模型列表即可，无需额外开发。在 src/pages/index.tsx 文件中包含的生成图片的请求逻辑。核心代码示例：
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、函数调用 AI
边缘函数的处理逻辑是在
functions/v1/generate/index.js 文件内实现的。该文件的逻辑流程是：首先接收前端传递的参数（包括 prompt、platform、model 等），然后检查对应平台的环境变量是否配置正确，检查环境变量的代码示例如下：// 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.`);}};
通过
env 的方式访问环境变量，可以有效防止 API 密钥在代码中明文暴露，提高应用的安全性。这种方式将敏感信息存储在环境变量中，而不是硬编码在源代码里。
完成环境变量检查后，接下来会直接请求对应平台的图片生成模型 API。以 HuggingFace 为例，其标准的 API 请求核心代码如下：
'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),});
要集成哪些 AI 模型，就去了解它的 AI 调用的接口协议，然后封装在函数中。这里 Edgeone 的 AI 图片生成模版已经支持了 HuggingFace、OpenAI、Replicate、Fal、Nebius 等模型。
生成图片后，返回给前端即可，模版项目内已经内置了图片显示的逻辑，在图片请求前、请求中、请求后都有对应的 UI 交互。
AI SDK 封装调用
AI SDK 封装调用方式是指使用 AI SDK 提供的统一接口来调用不同厂商的 AI 图片模型，通过 SDK 的封装简化开发流程。ai-sdk-image-generator-starter 模版的逻辑流程和原生接口调用的模版差不多，只不过在调用 AI 图片模型上的实现细节上略有不同。
1、生图参数选择
先从前端发送请求开始讲起。在项目中，发起请求的核心代码位于
src/pages.tsx 文件中。前端通过 /api/generate 接口发送请求，核心代码如下：const response = await fetch(apiUrl, {method: "POST",headers: {"Content-Type": "application/json",},body: JSON.stringify({prompt,model,size,}),});
其中，
prompt 是用户输入的图片生成提示词；model 是请求的对应模型名称，用于指定要调用的 AI 图片生成模型；size 是图片尺寸参数；quality 是图片质量参数。
需要注意的是，size 参数需要提前设置，因为不同的模型支持的尺寸列表不一致。例如，DALL-E 3 支持 "1024x1024"、"1024x1792"、"1792x1024" 等尺寸，而 Stable Diffusion 可能支持 "512x512"、"768x768" 等不同规格。因此，需要提前对尺寸进行配置化，确保选择不同的模型时，能够选择正确的尺寸参数列表。
EdgeOne Pages 的 AI SDK 图片生成模版已经梳理了 AI SDK 支持的模型对应的尺寸列表，相关配置位于
components/modelSizeMapping.ts 文件中。开发者可以直接使用这些预配置的尺寸映射，无需手动处理不同模型的尺寸兼容性问题。
2、函数调用 AI
AI SDK 封装调用方式与上面的原生调用方式一样，也规避了密钥泄漏风险，这里略过环境变量的检查环节。函数在调用 AI 图片模型时，使用 AI SDK 暴露的 experimental_generateImage 对象来统一生成图片内容，密钥的获取 experimental_generateImage 在内部会自动处理，用户只需要像上文中提到的配置到 .env.local 文件即可。使用 experimental_generateImage 生成图片的核心代码示例如下：
const imageResult = await experimental_generateImage({model: imageModel,prompt: prompt,size: size, // Use frontend-provided size});
调用 experimental_generateImage 后，接下来只需要读取函数返回的标准格式内容即可，下面是读取图片 base64 内容的示例代码：
const imageUrl = `data:image/png;base64,${imageResult.image.base64}`;return new Response(JSON.stringify({images: [{url: imageUrl,base64: imageResult.image.base64,},],}));
获取生成图片的数据后，返回给前端显示即可。这里前端的显示细节不作过多描述。对 UI 交互细节感兴趣的话，可以直接查看代码即可。
本地调试
在下载项目到本地并对项目实现细节进行解析后，开发者可能需要对其进行本地开发、调试或预览。要开启本地调试时同样需要配置环境变量，这显得比较繁琐。此时可以使用 EdgeOne CLI，它可以将上文在 EdgeOne Pages 部署的配置信息同步到本地，同时也可以直接在本地对项目进行部署。使用 EdgeOne CLI 需要安装和登陆，具体详情可以参考 EdgeOne CLI 的文档介绍。
在安装和登陆后，在本地项目下执行下面的命令可以将项目与 Edgeone Pages 控制台的项目进行关联。
edgeone pages link
执行
edgeone pages link 后，会提示输入 EdgeOne Pages 的项目名，也就是上文中部署的模版项目的项目名称。输入项目名后，会将 EdgeOne Pages 控制台在上文中部署项目的环境变量同步到本地。关联成功后，会在本地项目根目录下生成 .env 文件，文件内包含配置的环境变量列表。
关联后，可以执行以下命令来进行本地部署：
edgeone pages dev
部署后，可以在
localhost:8088 进行访问。以 ai-sdk-image-generator-starter 为例，预览示例如下：
如果对代码有自定义修改，可以直接通过 git 来提交项目到 GitHub，EdgeOne Pages 会检测 GitHub 的提交记录并自动进行重新部署，部署后进入控制台进行验证即可，在部署完成后会出现的示例界面如下：
更多相关内容
