《扔掉SDK！用原生Fetch请求实现多模态图像生成》

从零到一：用Fetch请求实现多模态图像生成（附完整代码）

告别SDK依赖，深入理解大模型API的本质

前言

在AI快速发展的今天，多模态大模型已经成为热门话题。很多同学在学习时习惯直接使用官方SDK，但这往往会让我们忽略API调用的本质。今天，我将带你跳出SDK的舒适圈，用最原始的fetch请求来实现一个多模态图像生成功能。

通过这篇文章，你不仅能学会如何调用多模态API，更重要的是能理解：所有大模型服务的本质，不过是一次HTTP请求。

一、从NLP到多模态：技术演进之路

1.1 自然语言处理基础

自然语言处理（NLP）是让计算机理解和生成人类语言的技术。传统NLP任务包括：

• 情感分析：判断文本的情感倾向（积极/消极）
• 信息提取：从文本中提取关键信息（实体、关系）
• 文本生成：根据输入生成新的文本内容

1.2 多模态的崛起

随着技术发展，单一的文本处理已经无法满足需求。多模态技术应运而生，它可以同时处理：

• 文本
• 图像
• 音频
• 视频

今天我们要实现的，就是文本+图像 → 生成新图像的多模态任务。

二、理解API的本质

2.1 为什么不用SDK？

市面上各大AI公司（OpenAI、阿里云等）都提供了官方SDK，看起来开箱即用：

javascript

// SDK方式（封装了细节）
const openai = new OpenAI({ apiKey: 'xxx' });
const response = await openai.images.generate({ ... });

但这样会让我们忽略一个重要事实：SDK底层就是HTTP请求。理解这一点，比学会使用SDK更重要。

2.2 HTTP请求核心要素

一次完整的API调用包含三个核心部分：

组成部分	作用	示例
URL	服务地址	https://api.example.com/v1/generate
Method	请求方法	POST（比GET更安全，适合发送数据）
Headers	请求头	包含认证信息、内容类型
Body	请求体	实际发送的数据

三、实战：多模态图像生成

3.1 准备工作

首先，安装并配置环境变量：

bash

npm install dotenv

创建.env文件：

env

OPENAI_API_KEY=your-api-key-here

3.2 完整代码实现

javascript

import dotenv from 'dotenv';
dotenv.config();

/**
 * 多模态图像生成函数
 * 根据参考图片和文本指令生成新图像
 */
async function generateImage() {
  // 1. 获取API密钥
  const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
  
  // 2. 构建HTTP请求
  const res = await fetch(
    'https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation',
    {
      method: 'POST',  // POST请求更安全，可以携带大量数据
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${OPENAI_API_KEY}`  // Bearer Token认证
      },
      body: JSON.stringify({
        "model": "qwen-image-2.0-pro",  // 通义千问图像生成模型
        "input": {
          "message": [
            {
              "role": "user",
              "content": [
                // 参考图片1
                { "image": "https://example.com/input1.png" },
                // 参考图片2
                { "image": "https://example.com/input2.png" },
                // 参考图片3
                { "image": "https://example.com/input3.png" },
                // 文本指令
                { "text": "图1中的女生穿着图2中的黑色裙子按图3的姿势坐下" }
              ]
            }
          ]
        }
      })
    }
  );
  
  // 3. 处理响应
  const data = await res.json();
  console.log('生成的图片URL:', data.output);
  return data;
}

// 执行函数
generateImage().catch(console.error);

3.3 代码解读

为什么用POST而不是GET？

• 安全性：API Key在请求头中传输，不会暴露在URL
• 数据量：图片URL和文本指令可能很长，POST没有长度限制
• 语义正确：POST表示“创建资源”，GET表示“获取资源”

请求头的关键配置

javascript

headers: {
  'Content-Type': 'application/json',  // 告诉服务器我们发送的是JSON
  'Authorization': `Bearer ${OPENAI_API_KEY}`  // 身份认证
}

请求体的结构

javascript

{
  "model": "模型名称",  // 指定使用哪个模型
  "input": {
    "message": [       // 消息数组
      {
        "role": "user",  // 角色：user/assistant/system
        "content": [...] // 多模态内容
      }
    ]
  }
}

3.4 进阶：添加错误处理

javascript

async function generateImageWithErrorHandling() {
  try {
    const OPENAI_API_KEY = process.env.OPENAI_API_KEY;
    
    if (!OPENAI_API_KEY) {
      throw new Error('请设置OPENAI_API_KEY环境变量');
    }
    
    const res = await fetch('https://dashscope.aliyuncs.com/api/v1/services/aigc/multimodal-generation/generation', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${OPENAI_API_KEY}`
      },
      body: JSON.stringify({ /* 同上 */ })
    });
    
    // 检查HTTP状态码
    if (!res.ok) {
      const error = await res.json();
      throw new Error(`API错误 ${res.status}: ${JSON.stringify(error)}`);
    }
    
    const data = await res.json();
    
    // 检查业务状态码
    if (data.code) {
      throw new Error(`业务错误 ${data.code}: ${data.message}`);
    }
    
    return data;
    
  } catch (error) {
    console.error('图像生成失败:', error.message);
    throw error;
  }
}

四、应用场景拓展

4.1 电商场景

javascript

// 生成商品展示图
const prompt = {
  image1: "模特照片",
  image2: "商品照片", 
  text: "让模特穿着这件衣服，站在白色背景前"
};

4.2 设计辅助

javascript

// 室内设计
const prompt = {
  image1: "房间原始照片",
  image2: "参考风格图片",
  text: "按照图2的风格重新设计图1的房间"
};

4.3 影视制作

javascript

// 分镜生成
const prompt = {
  image1: "角色设定图",
  image2: "场景概念图",
  text: "让角色在图2的场景中，采用电影感构图"
};

五、踩坑指南

5.1 API Key安全

❌ 错误做法：

javascript

// 直接写在代码中
const API_KEY = 'sk-xxxxx';

✅ 正确做法：

javascript

// 使用环境变量
const API_KEY = process.env.OPENAI_API_KEY;

5.2 图片URL要求

• 必须是公网可访问的URL
• 支持格式：PNG、JPG、JPEG
• 建议图片小于10MB

5.3 请求频率限制

不同API服务有不同限制：

• 免费版：通常 60次/分钟
• 付费版：根据需要提升

六、总结与展望

通过这篇文章，我们学到了：

1. API的本质：所有SDK底层都是HTTP请求
2. 多模态能力：文本+图片 → 新图片的生成逻辑
3. 实战技巧：错误处理、安全配置、场景应用

下一步学习建议

• 尝试流式响应（Streaming）处理
• 探索其他多模态任务（图生文、文生视频）
• 构建完整的AI应用产品

---

互动环节：你在使用多模态API时遇到过什么有趣的问题？欢迎在评论区分享！

本文代码已上传至 GitHub仓库，欢迎Star和PR~