GPT-4o 图像生成实战:获取 API Key 并用代码生成图片,本指南将引导您如何使用 NodeJS 和 OpenAI SDK 调用 GPT-4o 模型进行图像处理。

环境准备

1. 克隆项目启动模版

我们提供了一个包含基础配置(Node + TS + ESM)的项目模版,方便您快速开始。

git clone git@github.com:KelvinQiu802/ts-node-esm-template.git

2. 安装依赖

进入项目目录,安装必要的依赖库:

  • openai: 用于调用 OpenAI API 的官方 SDK。
  • dotenv: 用于加载项目根目录下的环境变量文件。
cd ts-node-esm-template
pnpm install
pnpm add openai dotenv

3. 配置环境变量

在项目根目录下创建一个 .env 文件,并配置以下环境变量:

OPENAI_API_KEY=你的API密钥
OPENAI_BASE_URL=https://sg.uiuiapi.com/v1 # 或者使用官方或其他代理地址
OPENAI_MODEL=gpt-4o # 指定要使用的模型,这里是 gpt-4o

API 信息:
API 基础地址: https://sg.uiuiapi.com/v1
对话请求地址: https://sg.uiuiapi.com/v1/chat/completions
支持的模型 (根据需求选择):

    *   `gpt-4o-all`:按 token 计费,价格便宜,用户较多。
    *   `gpt-4o-image`:按次计费,价格便宜,用户较少。
    *   `gpt-4o-image-vip`:按次计费,价格较高,用户最少。

请注意:本脚本默认使用 gpt-4o-image-vip 模型。您可以根据需要修改脚本中的 model 字段来选择其他模型。
注意: 请将 你的API密钥 替换为您自己的 OpenAI API Key。OPENAI_BASE_URL 可以根据您的需要设置为 OpenAI 官方地址或其他代理服务地址。

openai api key已开放免费获取,这里推荐两个渠道;
OpenAI API代理 :

  • UIUIAPI提供便捷的API中转服务,让您直接使用OpenAI、Claude、Gemini等官方API,无需配置环境、充值或担心封号。我们处理账号和风险,您只需专注于应用开发,我们不记录任何数据。聚合众多AI只需要一个接口即可调用 (推荐) uiuiapi.com 平台提供 OpenAI API 的API分发服务,可以提供更便捷的访问方式。

官方获取:

  • 差别就是api key也是免费获取,就是要充值才可以调用。推荐第一个,价格和稳定方面有优势。

编写脚本

以下是调用 GPT-4o 处理图像的核心脚本代码。

import 'dotenv/config'; // 确保在最开始加载环境变量

import { OpenAI } from 'openai';
import { image2Base64 } from './utils'; // 引入图片转 Base64 的工具函数

// 初始化 OpenAI 客户端
const openai = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY, // 从环境变量读取 API Key
    baseURL: process.env.OPENAI_BASE_URL, // 从环境变量读取 Base URL
});

const imagePath = './assets/photo.jpg'; // 指定输入图片的路径
const imageType = imagePath.split('.').pop(); // 从路径中提取图片类型 (e.g., 'jpg')

async function main() {
    try {
        console.log("开始请求 OpenAI API...");

        // 调用 chat completions API,并启用流式响应
        const stream = await openai.chat.completions.create({
            model: process.env.OPENAI_MODEL as string, // 指定使用的模型
            messages: [{
                role: 'user', // 消息发送者为用户
                content: [
                    {
                        type: "image_url", // 消息内容类型:图片 URL
                        image_url: {
                            // 将本地图片转换为 Base64 编码的 Data URL
                            url: `data:image/${imageType};base64,${image2Base64(imagePath)}`
                        }
                    },
                    {
                        type: "text", // 消息内容类型:文本
                        text: `把图片转换成文艺复兴时期的油画风格` // 对图像处理的提示指令
                    },
                ]
            }],
            stream: true, // 启用流式输出
        });

        console.log("接收响应:");
        // 迭代处理流式响应数据块
        for await (const chunk of stream) {
            // 提取响应中的文本内容
            const content = chunk.choices[0]?.delta?.content || '';
            if (content) {
                process.stdout.write(content); // 将内容实时输出到控制台
            }
        }
        process.stdout.write('\n'); // 输出换行符
        console.log("请求处理完成。");

    } catch (error) {
        console.error('处理图片时出错:', error);
        process.exit(1); // 发生错误时退出程序
    }
}

// 执行主函数
main();

image2Base64 工具函数

这个辅助函数用于读取本地图片文件并将其转换为 Base64 编码字符串,以便嵌入到 API 请求中。

import fs from 'fs';

/**
 * 读取图片文件并将其转换为 Base64 编码字符串
 * @param imagePath 图片文件的路径
 * @returns Base64 编码的字符串
 */
export function image2Base64(imagePath: string): string {
    const imageBuffer = fs.readFileSync(imagePath); // 同步读取文件内容到 Buffer
    return imageBuffer.toString('base64'); // 将 Buffer 转换为 Base64 字符串
}

现在,您可以运行 pnpm dev (或其他在 package.json 中配置的启动命令) 来执行脚本,它会将指定图片发送给 GPT-4o,并根据提示词进行处理,然后将结果流式输出到控制台。


uiuihaoAICG
15 声望5 粉丝