专栏目录

耗时一下午，我完结了 GPT Terminal，真正拥有了专归于我的 GPT 终端！

怎么用 GPT 在 5 分钟内 ”调教“ 出一个专归于你的 ”小黑子“？

怎么丝滑完结 GPT 打字机流式回复？Server-Sent Events！

我是怎么让我的 GPT Terminal “长记性” 的？还是老配方！

一个合格的类 GPT 使用需求具有什么？一文带你打通 GPT 产品功用！

开发一个 ChatGPT 真的只是当 “接口侠” 吗？GPT Terminal 细节共享！

怎么借助于 OpenAI 以指令的方式在 GPT 终端上画一只 “坤”？

不满足当 ChatGPT “接口侠”？轻松可视化 Fine-tuning 训练你的模型！

项目地址：github.com/ltyzzzxxx/g…

欢迎咱们Star、提出PR，一起快乐地用 GPT Terminal 游玩吧～

前言

信任咱们在看了上一篇的共享后，必定关于怎么完结一个类 GPT 使用，做到了心中有数。当你自己去动手完结的时分，只需求依照之前列出的功用点，去寻找相应的解决计划即可。

在这篇文章，我想给咱们共享一下我在面临这些问题时，是怎么解决的。我会就上一篇文章提到的 用户体会支撑功用，逐个进行解说。

关于 基础功用 部分的完结，咱们可以参考专栏之前发布的文章，根本都会对应的解说与完结计划

咱们是不是看的有点困了？没关系，在这篇文章中，我会贴一些代码片段，给咱们醒醒打盹！假如咱们不满足于此的话，可以进入 GPT Terminal 的项目中，深入了解一下完结细节！

用户体会支撑功用

在开端正式解说功用计划之前，先给咱们展现一下 GPT Terminal 的 Demo，信任咱们看了 Demo 之后再看文章解说，必定会有愈加形象深入的印象与了解！

GPT 呼应状况下，制止用户输入

在上一篇文章中，咱们提到为了避免 GPT 上下文混乱，因而在 GPT 呼应状况下，应制止用户输入。在 GPT Terminal 中，我也相同完结了这一点。

我使用的是 Vue3 框架。在规划上，用户与 GPT 的聊天记录展现，我将其放置于 ChatBox 组件中。而用户在终端上的输入框是放置于外层的父组件 GptTerminal 组件中。

至于为什么要这样规划，是因为组件分工不同。GptTerminal 是负责整体终端，包含指令输入、指令履行建议、展现成果；而对应到指令输出的成果，是动态的，依据输入指令的不同，输出展现不同的组件。

为了完结呼应状况下制止用户输入这一功用，我采用了 Vue 的 emit 事情机制，经过此特性完结父子组件之间的通讯。假如咱们对这一特性不熟悉，可以先去简略了解一下官方的示例。

父组件 GptTerminal.vue 部分代码如下所示：

对应于项目中 src/components/gpt-terminal/GptTerminal.vue 文件

// 处理 GPT 恳求开端时的操作
const handleStart = () => {
  console.log("开端")
  isRunning.value = true
}
// 处理 GPT 恳求完毕后的操作
const handleFinish = () => {
  console.log("完毕")
  isRunning.value = false
}

子组件 ChatBox.vue 部分代码如下所示：

对应于项目中 src/core/commands/gpt/subCommands/chat/ChatBox.vue 文件

// 定义 emit 事情
const emit = defineEmits(['start', 'finish']);
// 宣布恳求前，子组件向父组件发送`start`事情
emit('start')
// 履行发送恳求办法
getGptOutput()
// 恳求呼应完毕后，子组件向父组件发送`finish`事情
emit('finish')

在这部分代码中，isRunning 首要是为了控制输入框是否可写，将其绑定到 ant-design-vue 中 a-input 组件的 disabled 属性。

  • 在调用 GPT 接口之前，子组件向父组件发送 start 事情，父组件制止用户输入
  • 在完毕 GPT 托言调用后，子组件向父组件发送 finish 事情，解除输入约束

Loading 状况提示

在恳求发送到 GPT 服务之后，GPT 服务呼应之前，会有必定时刻的中止，以及国内用户拜访 OpenAI 可能存在较高的网络延时，因而在这儿是有必要设置 Loading 状况的。

为了在终端界面完结这一点，我想到了比较朴素的做法 – 定时器。当用户宣布指令的瞬间，即组件进入初始化状况，定时器便开端工作。

对应于项目中 src/core/commands/gpt/subCommands/chat/ChatBox.vue 文件

// 如下代码位于 onMounted 初始化办法中
let count = 0;
let loadingInterval = setInterval(() => {
count++;
if (count > 3) {
  count = 0;
}
switch (count) {
  case 0:
    output.value = "正在加载内容中";
    break;
  case 1:
    output.value = "正在加载内容中.";
    break;
  case 2:
    output.value = "正在加载内容中..";
    break;
  case 3:
    output.value = "正在加载内容中...";
    break;
}
}, 500)

信任聪明的咱们一看就懂，这不就是三个 . 符号无限循环，直至 GPT 开端呼应回复。对的，就是这么简略！因为在终端界面，不需求有什么花里胡哨的组件，只需求简略地表明 Loading 即可。

可是，还有一个细节需求注意，当 GPT 开端呼应后，必定要清空定时器与输出内容呀！

// 清空定时器与输出
clearInterval(loadingInterval)
output.value = ""

网络超时提示

当用户使用咱们的 GPT Terminal 时，可能会呈现 API Key 装备过错或者根本无法拜访 OpenAI 的网络问题。因而，咱们不只需求为用户显现 Loading 提示，还需求处理这些网络异常情况。

关于网络超时问题，我采用了 延时器 做法。当超越一段时刻之后，若 GPT 依然无法呼应并回复，则需求为用户做出相应的超时提示。

想必很聪明的咱们应该现已想到了，咱们这个三个功用有着紧密的相关。当延时器到达指定时刻时，需求做一些 收尾工作：

  • 关闭定时器，即关闭 Loading 提示
  • 关闭延时器
  • 判别 GPT 是否现已成功呼应
    • 若未呼应，则向父组件发送完毕事情，并提示用户网络超时

对应于项目中 src/core/commands/gpt/subCommands/chat/ChatBox.vue 文件

// 延时器
let timeoutTimer = setTimeout(() => {
    clearInterval(loadingInterval)
    clearTimeout(timeoutTimer)
    if (!flag.value) {
      emit('finish')
      output.value = "恳求超时，请检查您的网络环境是否装备正确 或 后端是否发动～"
    }
}, 35000)

可以看到，这儿 flag 的作用是判别 GPT 呼应是否成功，若成功的话，在 getGptOutput 办法中，会将 flag 的值设置为 true，并发送 finish 事情。若很遗憾没有成功的话，这部分操作就需求比及延时器触发时履行啦。

总结

看完之后，其实咱们会发现，在开发过程中，咱们很简单注意到这些用户体会细节。可是它们又是一些比较零碎的点，很简单让咱们失掉做的爱好。从我角度来看，为了让产品愈加完好、让用户体会更好，这些还是必须得完结呀！究竟有一句话是，细节决定成败。

为了避免咱们对 用户体会支撑功用 的规划不太清楚，我给咱们画了 GPT 恳求与呼应的流程图，信任咱们看了图之后，不只可以清楚地知道如上 3 个功用的规划，并且可以对 GPT Terminal 三方（前端、后端、第三方 Open AI）交互有着愈加深入的了解。

开发一个 ChatGPT 真的只是当

跋文

今日给咱们展现了我在 GPT Terminal 中，关于用户体会相关的细节功用是怎么完结的。

其实本来还要为咱们展现一下我在 GPT Terminal 中 拓宽功用 的完结计划，可是用户体会相关的细节功用又写了好多字，再写下去字数就太多啦～

为了避免咱们看得疲乏，所以我决定将这部分放到下一篇中（心里OS：下次再也不拖了！）

最后再小小地提一下，GPT Terminal 目前现已根本完结了主体功用啦，还有一些 Bug 需求修改，假如咱们想要了解 GPT Terminal 项目的更多细节与解锁更多玩法的话，请到其主页检查哦。

假如各位小伙伴关于文章或项目有什么不懂的当地，请直接提出 Issue，我会在 24 小时内回复！

看在我这么仔细的份上，咱们点个 Star、点个赞不过火吧（磕头！）下期再会！