前端调用 AI 图像能力：Stable Diffusion / DALL·E 实战

随着生成式 AI 的爆发，文本生成图像（Text-to-Image）已不再是科研专属。我们现在可以通过简单的接口调用，让用户仅用一句描述，就能生成商品封面、社媒配图、头像甚至漫画场景。

对前端开发者而言，这意味着图像内容不再是后端生成或人工上传，而是可以在前端实时完成的交互体验。

一、主流图像生成方案对比

模型平台	接入方式	优点	缺点
DALL·E 3（OpenAI）	API 接口	效果极佳，支持修图与风格控制	内容审查严格，生成速度偏慢
Stable Diffusion（SDXL）	本地部署 / Replicate API	自由度高，可控制性强	Prompt 要求更专业，样式不稳定
Hugging Face Spaces	Gradio 接口嵌入	快速试验，适合 Demo	免费版速率有限，性能一般

二、前端调用图像生成接口实战（以 Replicate + Vue 为例）

1. 获取模型 API（以 SDXL 为例）

stability-ai/sdxl | Run with an API on Replicate

注册并获取 Token。

2. 接口封装

async function generateImage(prompt: string) {
  const response = await fetch('https://api.replicate.com/v1/predictions', {
    method: 'POST',
    headers: {
      Authorization: `Token ${YOUR_TOKEN}`,
      'Content-Type': 'application/json',
    },
    body: JSON.stringify({
      version: "your-model-version-id",
      input: { prompt }
    })
  });
  const result = await response.json();
  return result.urls.get;
}

3. Vue 组件绑定

<template>
  <div>
    <input v-model="prompt" placeholder="描述你想要的图像..." />
    <button @click="generate">生成图像</button>
    <img v-if="imageUrl" :src="imageUrl" alt="AI Image" />
  </div>
</template>

三、提示词（Prompt）技巧分享

目标	示例 Prompt
电商封面	“A modern minimalist product photo of a smartwatch, white background, studio lighting”
封面插图	“Futuristic UI dashboard illustration, 2D flat style, gradient background”
品牌头像	“Friendly cartoon robot character, smiling, blue theme”
社媒图文背景	“Digital abstract waves in deep purple, glowing edges, 16:9 ratio”

四、进阶玩法：前端实时控制图像风格

你可以为用户提供可选项，控制生成图像的风格和构图：

const prompt = `${userInput}, ${style}, ${lighting}, ${background}`;

控制项	可选值示例
风格	3D render / watercolor / anime / sketch
背景	white / studio / gradient / transparent
构图比例	2:1 / 1:1 / 3:4

还可以使用下拉选择器动态组合构造 prompt。 

五、适用场景举例

场景	说明
AI 电商站	用户上传产品描述 → 自动生成封面图
博客平台	用户发布文章 → 根据摘要生成封面插图
头像生成器	输入性格/风格关键词 → 创建个性头像
创意生成	输入剧情描述 → 漫画草图场景初稿

六、性能与成本注意事项

• 使用 DALL·E 或 Replicate 等第三方服务，会产生调用费用；

• 图像生成耗时 5～15 秒，需添加 loading 动画；

• 生成任务建议异步队列处理，可定期刷新状态；

• 可设置“预生成”推荐图像，加速用户体验。

七、小结

AI 生成图像的能力，正在前端层被“消费”成一种服务。作为开发者，你需要做的不仅是接入 API，更重要的是设计好交互流、Prompt 工具箱、风格控制和性能体验。

未来的“图像设计师”，或许就是懂 Prompt 的前端。