OpenAI新篇章：一起探索多模态应用的无限可能！

引言

随着人工智能技术的飞速发展，多模态应用逐渐成为研究和开发的热点，多模态应用能够处理多种类型的数据，如文本、图片、视频和音频，为用户提供更加丰富和自然的交互体验。本文将围绕以下图片介绍如何使用 OpenAI 的 GPT-4 模型开发一个多模态应用。希望你本文可以为你提供些许参考。

1. 背景介绍：多模态 vs 单模态！

在人工智能领域，模态（Modality）指的是数据的不同形式或类型。根据处理的数据类型，可以将模型分为单模态和多模态两大类。

• 单模态：单模态模型专注于处理一种类型的数据，这种模型通常在特定任务上表现优异，但在处理复杂、多样化的任务时可能显得局限。例如，ChatGPT 主要处理文本数据，只能生成和理解纯文本内容。

• 多模态：多模态模型能够处理多种类型的数据，如文本、图片、视频和音频，这种模型通过整合不同模态的信息，能够提供更丰富、更自然的交互体验，包括文本、图片、视频和音频等多种类型的数据。例如，GPT-4 可以处理文本指令和图片地址，生成相应的响应。

2. 基础步骤：项目初始化和openai的安装

• 1.初始化项目：npm init -y

  • 这条命令会生成一个 package.json 文件，包含项目的初始配置。

• 2.安装 OpenAI SDK：npm i openai

• • 这条命令会安装 OpenAI 的 SDK，但在中国大陆地区，由于网络原因，可能会比较慢。

• 3.全局安装 OpenAI SDK：npm i -g openai

  • -g 参数表示全局安装，这样你可以在任何地方使用 OpenAI。

• 4.设置 npm 源：npm config set registry https://registry.npmmirror.com

  • 为了加快下载速度，可以使用淘宝的 npm 镜像。这会将 npm 的源切换到国内的镜像，显著提高下载速度。

• 5.全局安装 pnpm：npm i -g pnpm

  • pnpm 是一个快速、节省磁盘空间的包管理器，通过使用符号链接优化了依赖安装过程。
• 6. 查看 pnpm 版本：pnpm --version
  • 这条命令会显示当前安装的 pnpm 版本，确保安装成功。

• 7.使用 pnpm 安装 OpenAI SDK：pnpm i openai

  • 使用 pnpm 安装 OpenAI SDK，可以进一步提高安装速度并节省磁盘空间。

注意：为什么要使用pnpm?

• 快速：pnpm 通过使用符号链接优化了依赖安装过程，显著提高了安装速度。
• 节省磁盘空间：pnpm 只会安装一次依赖包，并通过符号链接共享这些包，避免了重复安装。
• 不会污染全局：pnpm 的全局安装不会污染系统的全局环境变量。

3. ES6 模块下 代码案例演示：

//使用 ES6 模块语法进行导入
import OpenAI from "openai";
// 实例化openai 客户端 
const client = new OpenAI({
    apiKey: '你的apikey',
    baseURL: 'https://api.302.ai/v1' // 转发 
})


// es6 箭头函数 传统函数更简洁 
// 赋值语句
// 函数也是对象
// 函数表达式
// async 是函数修饰符，+  await  一对
const main = async () => {
    // openai 的调用是异步的
    // await 等会儿
    // chat 聊天的方式调用
    // completions 完成问答
    // create 创建
     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.huxiucdn.com/img/minitopic/202406/25/084826659075.jpg?imageView2/1/w/512/h/512/|imageMogr2/strip/interlace/1/quality/85"
                         }
                     }
                 ]
             }
         ],
         max_tokens: 300
     })
     console.log(response.choices[0].message.content)
 }
main()

4. 大厂必备 细节优化！

1.容错处理

在开发多模态应用时，容错处理是确保应用稳定性和用户体验的重要环节，通过使用 try-catch 块，可以捕获和处理可能出现的异常，防止应用因错误而崩溃，并提供友好的错误提示。

1. 基本结构：

   • try 块用于包裹可能抛出异常的代码。
   • catch 块用于捕获并处理异常。
   • finally 块（可选）用于执行无论是否发生异常都需要执行的代码。

2. 代码演示：

import OpenAI from "openai";
const client = new OpenAI({
    apiKey: '你的apikey',
    baseURL: 'https://api.302.ai/v1' // 转发 
})
const main = async () => {
    try {
        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.huxiucdn.com/img/minitopic/202406/25/084826659075.jpg?imageView2/1/w/512/h/512/|imageMogr2/strip/interlace/1/quality/85"
                            }
                        }
                    ]
                }
            ],
            max_tokens: 300

        })
        console.log(response.choices[0].message.content)
    } catch (error) {
        console.log(error)
    }
}
main()

2.API 密钥安全

在开发多模态应用时，保护 API 密钥的安全性至关重要,API 密钥通常用于身份验证和授权，如果泄露，可能会导致数据泄露、滥用服务甚至财务损失。

• API 密钥不能提交到 GitHub：提交到GitHub时不提交.evn文件。

步骤：

• 在 .env 文件中存储密钥：

 OPENAI_API_KEY=你的apikey

• 使用 dotenv 包加载环境变量：

npm i dotenv

• 在 main.mjs 中加载环境变量：

import dotenv from 'dotenv';
import OpenAI from "openai";
dotenv.config();
console.log(process.env.OPENAI_API_KEY, '////');

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

总结

理解以上步骤后，你就可以搭建一个你需要的面向 OpenAI 接口的多模态应用。希望小伙伴们能够收获到自己想要了解的知识，祝你在开发过程中一切顺利！成为一名更牛的开发者！