进来先看网页效果，由于网速和服务器的关系有一点慢。

前言

自从chatGPT出现并迅速流行起来，不少网站和小程序都添加了相似的互动问答特性，这让我非常想知道他们是如何将这项技术融入其中的。现在，随着我对前后端交互技巧的掌握，我已经懂得如何在自己的项目里也运用GPT这样的工具了。接下来我将带着大家手搓一个简单的基于 model: 'gpt-3.5-turbo'的ai模型的网页搭建。

准备工作

配置环境

首先我们是在vue的环境下进行实验操作的，因为这样可以减去我们进行对API接口的使用的依赖，更重要的是vue的响应式页面开发是让我们不用通过Ajax技术来刷新页面。安装最新的vue环境：[vue3官方文档](快速上手 | Vue.js (vuejs.org))

npm i vue@latest //安装最新的vue版本
npm i //安装依赖

然后进行openai模块的安装：

npm i openai

为什么使用openai模块包呢？openai模块包是一个第三方的AI模块由openai官方推出模块包，它推出的API和服务允许开发者通过编程接口接入强大的AI模型，使用这些服务需要一个密钥，这个密钥称为API密钥，它充当安全通行证，允许用户在保持账户安全的同时调用OpenAI的API。

最后创建一个OpenAI.vue文件和在根部录下创建一个.env文件

在App.vue文件中将OpenAI.vue文件进行导入并使用

import OPENAI from "./components/OpenAI.vue"

在.env文件中将准备好的密钥和网址进行配置，注意，在vue3中配置环境变量一定使用VITE_作为标志，否则将可能会识别不出这个环境变量。

着手搭建

client

<template>内的内容直接给出，以便读者好理解了。

<template>
  <div>
<h1>小小ai助手</h1>

问题：<input type="text" id="inp">
<button @click="Search">查询</button>
<div v-html="replay" id="outp"></div>
  </div>
</template>

<script setup>内先导入openai模块，和vue3响应式API{ref}，然后创建一个openai实例对象client并对其进行密钥，url配置。

import {ref}from 'vue'
import OpenAI from 'openai';
const client = new OpenAI({
  // 直接从环境变量中获取API密钥和基础URL
  apiKey: import.meta.env.VITE_OPENAI_API_KEY, // vue3使用import.meta.env来访问环境变量
  baseURL: import.meta.env.VITE_OPENAI_BASE_URL, // 默认基础URL，如果未设置则使用此值
  dangerouslyAllowBrowser: true   //选项来允许在浏览器环境中使用
});

注释：dangerouslyAllowBrowser默认为false,他的作用就是拒绝在浏览器环境中使用一个原本设计为在服务器端运行的库或API。这类库通常需要访问敏感信息，如API密钥，直接在浏览器环境中使用可能会导致这些密钥暴露给最终用户，从而增加安全风险。

而在上线的项目中前端一般只与后端服务通信，而后者再与外部API交互。这样，敏感信息被隔离在用户不可见的服务器端。

main()

然后我们再写一个调用ai模型的主函数main()：

async function main(prompt) {
  try {
    const chatCompletion = await client.chat.completions.create({
      model: 'gpt-3.5-turbo',   // 适合聊天的模型
      messages: [
        {
          role: 'user',
          content: prompt,
        },
      ],
    });
    return    chatCompletion.choices[0].message.content
  } catch (error) {
    console.error("Error fetching chat completion:", error);
  }
}

想知道这里为什么要这样引用结构的可以看openai模块包官方文档

Serach()

接着再完善Serach()函数，由于main()获取数据操作需要很长的时间才能返回结果，所以这里我们也是用异步操作：

const replay=ref('你好啊！我是小小ai助手，有什么问题都可以问我呢。')
async function Search() {
  const inp=document.getElementById('inp')
  replay.value='小助手正在努力思考中哦......'
  replay.value=await main(inp.value);
}

这样便完成了我们的在线聊天机器人的创建，css写的一坨就不显丑了，最后它给我讲了个冷笑话。