你见过的最强的看图写话项目?使用 OpenAI 多模态编程

176 阅读4分钟

引言

随着人工智能技术的快速发展,OpenAI 推出的一系列模型和服务,极大地推动了自然语言处理和图像生成等领域的发展。这些服务不仅限于文本处理,还支持图片、视频和音频等多种媒体形式(多模态),为开发者提供了丰富的工具来构建创新的应用程序。这次我们来使用 gpt4o 的多模态读图能力完成对任意图片的解读。

111111.jpg

开始之前:环境准备

在开始编写代码之前,我们需要先准备好开发环境。首先,确保你的机器上已经安装了 Node.js。接下来,创建一个新的项目目录,并初始化一个 npm 项目:

npm init -y

这将创建一个 package.json 文件,用于管理项目的依赖和其他配置信息。

安装 OpenAI SDK

为了与 OpenAI 的 API 进行交互,我们需要安装官方提供的 SDK。

这里推荐使用 pnpm 作为包管理器,因为它比 npm 更快且更节省磁盘空间,能够实现实现高效的空间利用和快速的依赖安装,既不会重复安装,也不会污染全局

npm config set registry https://registry.npmmirror.com  
//国外的npm仓库下载依赖项可能会非常缓慢  使用阿里的npm国内镜像,可以显著提升下载速度和稳定性
npm install -g pnpm    //全局安装 pnpm 包管理器
pnpm install openai       //直接使用pnpm安装openai

创建主入口文件

在项目根目录下创建一个名为 main.mjs 的文件,这是我们的主入口文件。使用 ES6 模块语法可以更好地组织代码结构:

import OpenAI from "openai";  //导入OpenAI
// 实例化openai
const client = new OpenAI({
    apiKey: "你自己的api密钥",
    baseURL: 'https://api.302.ai/v1'  // 转发 
})

// 良好的编程风格
// 主函数 执行的入口, 单点


// async 是函数修饰符,声明函数是异步的,它会返回一个 Promise 对象
// await 只能在async函数内部使用, await 会使异步操作暂停,直到 Promise 被解析或拒绝,然后继续执行后续代码   
// 能够使异步代码的编写和阅读变得更加直观和简洁


const main = async () => {
    // openai 的调用是异步的 
    // await 等会儿
    // chat 聊天的方式调用
    // completions 完成问答
    // create 创建
    try {
        const response = await client.chat.completions.create({
            model: 'gpt-4o',  //gpt-4o的多模态读图能力能识别图片
            //对话列表
            messages: [
                {
                    role: 'user',   // 角色
                    content: [
                        {
                            type: 'text',
                            'text': '请描述以下图片的内容'
                        },
                        {
                            type: 'image_url',
                            "image_url": {
                                "url": "你需要的图片地址"
                                //
                            }
                        }
                    ]
                }
            ],
            max_tokens: 300  //表示在与OpenAI的GPT-4模型进行聊天交互时,生成的回复中最大的token数量为300
        })
        console.log(response.choices[0].message.content)
    } catch (err) {

        console.log(err);

    }
    
    //使用了try、catch
    //try来抛出异常,catch块会捕获这些异常并进行处理
    //如果发生错误,会打印错误信息(err)
    //通常用于记录错误日志,帮助你追踪和调试问题,这不仅可以提高代码的健壮性,还能帮助你更快地定位问题所在

}
main()

在这个例子中,我们定义了一个异步函数 main,它接受一个图片地址作为参数,并使用 gpt-4o 的多模态读图能力能识别图片。

安全注意事项

关于 API 密钥的安全管理非常重要,永远不要将密钥直接写入代码或提交到远程库中。

在这里我们使用一个Node.js 模块:dotenv

它通过读取项目根目录下的 .env 文件,将其中定义的环境变量加载到 process.env 对象中,从而方便地在代码中使用这些变量。

  1. 先下载dotenv
pnpm install dotenv  
  1. 在根目录上创建一个.env文件。
  2. 记得将dotenv导入到main.mjs文件中,加载环境变量,并修改你的apiKey
//main.mjs
import dotenv from 'dotenv';  //导入dotenv
dotenv.config(); //加载环境变量

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

4.将你自己的apiKey放在.env文件中

OPENAI_API_KEY="你自己的密钥"

5.我们还需要一个.gitignore文件

.gitignore 用于指定哪些文件和目录不应该被 Git 跟踪和提交。合理配置 .gitignore 文件可以避免不必要的文件被提交到版本控制系统中,从而保持仓库的整洁和高效。

.env文件名添加到.gitignore 文件中

这样,即使你提交了代码到Github或者Gitee上,也不会导致密钥的泄露,因为.env文件不会提交上去,从而保护了你的资产安全。

总结

这样,我们了解了如何使用 OpenAI 的 API 构建一个多模态应用程序。从环境准备到代码实现,再到安全注意事项,每一步都至关重要。未来,随着技术的不断进步,多模态技术将在更多领域发挥重要作用,熟练使用这个技术对我们之后的学习和工作都有很大帮助。