本地调用gpt-4o api

本地调用GPT-4o接口实现图像描述功能：前端开发者与AI研究者的指南

随着人工智能技术的快速发展，多模态模型和单模态模型正在改变我们与计算机交互的方式。在这篇文章中，我们将探讨如何在本地环境中使用JavaScript来调用GPT-4o接口，以实现一个图像描述的应用场景。这个过程不仅展示了单模态模型（如文本生成）的能力，还体现了多模态处理（如结合图像分析）的魅力。

准备工作

首先确保你的开发环境已经安装了Node.js，并且你拥有一个有效的API密钥来访问GPT-4o服务。此外，你需要安装dotenv用于管理环境变量以及openai库来与OpenAI API进行交互。

安装依赖

bash 复制代码

npm install dotenv openai

初始化项目

创建一个新的Node.js项目，并在根目录下添加.env文件来存储你的API密钥。

plaintext 复制代码

# .env
OPENAI_API_KEY=your_openai_api_key_here

接下来，在项目中创建一个名为main.js的入口文件，并开始编写代码。

编写代码

下面是我们将要构建的应用程序的核心代码。这段代码实现了从指定URL加载一张图片，并请求GPT-4o模型基于这张图片生成一段描述性文本的功能。

javascript 复制代码

import dotenv from "dotenv";
import OpenAI from "openai";

// 加载环境变量
dotenv.config();

// 初始化OpenAI客户端
const client = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,//注意这里容易犯错，这个process.env.OPENAI_API_KEY是一个对象，所以不要用字符串括起来
    baseURL: "https://api.302.ai/v1"
});

// 主函数
const main = async () => {
    try {
        // 发送请求到GPT-4o模型
        const response = await client.chat.completions.create({
            model: "gpt-4o",
            messages: [
                {
                    role: "user",
                    content: [
                        { type: "text", text: "请描述这张图片" },
                        { type: "image_url", image_url: { url: "https://img-blog.csdnimg.cn/img_convert/97cb29344629c3b314a5dae225d73187.jpeg" } }
                    ]
                }
            ],
            temperature: 0.9,
            max_tokens: 150
        });

        // 输出模型返回的结果
        console.log(response.choices[0].message.content);
    } catch (error) {
        console.error("发生错误:", error);
    }
};

main();

我们来简单介绍每行代码

1. 导入依赖

javascript 复制代码

javascript

import dotenv from "dotenv";
import OpenAI from "openai";

dotenv：用于从.env文件中加载环境变量。
OpenAI：这是OpenAI提供的Node.js客户端库，用于与OpenAI API进行交互。

2. 加载环境变量

ini 复制代码

javascript

dotenv.config();

dotenv.config()：加载项目根目录下的.env文件中的环境变量。这使得我们可以安全地在代码中使用这些变量，而不需要硬编码API密钥等敏感信息。

3. 初始化OpenAI客户端

php 复制代码

javascript

const client = new OpenAI({
    apiKey: process.env.OPENAI_API_KEY,
    baseURL: "https://api.302.ai/v1"
});

new OpenAI({...})：创建一个新的OpenAI客户端实例。
apiKey: process.env.OPENAI_API_KEY：设置API密钥，从环境变量中获取。
baseURL: "https://api.302.ai/v1"：设置API的基础URL。这里假设你使用的是自定义的API端点（例如302.AI），而不是默认的OpenAI端点。

4. 主函数

javascript 复制代码

javascript

const main = async () => {

async：声明一个异步函数，允许我们使用await关键字来处理异步操作。

5. 尝试调用API

arduino 复制代码

javascript

try {

try：开始一个尝试块，捕获可能发生的异常。

6. 发送请求到GPT-4o模型

php 复制代码

javascript

const response = await client.chat.completions.create({
    model: "gpt-4o",
    messages: [
        {
            role: "user",
            content: [
                { type: "text", text: "描述这张图片" },
                { type: "image_url", image_url: { url: "https://img-blog.csdnimg.cn/img_convert/97cb29344629c3b314a5dae225d73187.jpeg" } }
            ]
        }
    ],
    temperature: 0.9,
    max_tokens: 150
});

client.chat.completions.create({...})：发送一个聊天完成请求到GPT-4o模型。
model: "gpt-4o"：指定使用的模型为GPT-4o。
messages：包含用户消息的数组。
- role: "user"：指定消息的角色为用户。
- content：消息内容数组，可以包含多种类型的内容。
  - { type: "text", text: "描述这张图片" }：文本消息，告诉模型要描述一张图片。
  - { type: "image_url", image_url: { url: "..." } }：图像消息，提供图像的URL。
temperature: 0.9：控制生成文本的随机性，值越高，生成的文本越多样化。
max_tokens: 150：限制生成的最大令牌数。

注意，这里有个小细节，你传给大模型的额image_url一定要是一个对象，所以一定要用花括号括起来

7. 输出模型返回的结果

ini 复制代码

javascript

console.log(response.choices[0].message.content);

response.choices[0].message.content：获取并打印模型返回的第一个选择的消息内容。

8. 异常处理

vbnet 复制代码

javascript

} catch (error) {
    console.error("发生错误:", error);
}

catch (error)：捕获在try块中发生的任何异常。
console.error("发生错误:", error)：打印错误信息到控制台。

9. 启动主函数

csharp 复制代码

javascript

main();

调用main函数，启动程序。

代码解析

导入依赖 ：首先导入必要的库，包括dotenv用于配置环境变量，openai用来与OpenAI的服务通信。
设置环境变量 ：通过dotenv.config()加载.env文件中的环境变量。
初始化客户端：利用提供的API密钥初始化OpenAI客户端实例。
主逻辑 ：定义异步函数main作为程序的入口点。这里构造了一个包含用户消息（含文本和图片链接）的对象数组，然后发送给GPT-4o模型请求处理。最后打印出模型生成的回复内容。
异常处理：通过try-catch结构捕获并打印可能发生的任何异常信息。

运行应用

完成上述步骤后，只需运行node main.js命令即可启动程序。如果一切正常，你应该能在控制台看到GPT-4o根据给定图片生成的一段描述文字。

我们来看看调用的结果