专栏目录

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

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

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

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

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

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

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

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

耗时一下午，我终于上线了我的 GPT 终端！（内含具体布置计划记载）

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

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

前言

我们好，端午节健康！另外一件事情便是，GPT Terminal 功用又上新啦！所以今日来带我们看看新功用！

已然今日是节假日，那么我想着文章风格得是偏轻松一些的，让我们可以 躺着 学会！首要带我们学习和运用 OpenAI 供给的 AI 图片生成接口，而且我会结合 GPT Terminal 项目，在实战中解说怎么运用该接口画一只 “坤”！

话不多说，我们迅速进入正题！

OpenAI 图片生成接口

假如我们想要做一个自己的 ChatGPT 运用，除了到网上查询现成的解决计划，一定还离不开 OpenAI 官方 API 文档，其间包含了会话补全、图画生成、微调 Fine-tuning、语音转文本等多个接口。

假如我们看英文不习惯的话，可以去看看 中文文档

会话补全功用我们在之前的文章中现已屡次提到了，其实便是惯例意义上的聊天功用。而运用图片生成功用则要更加简略一些，如下即为接口内容。我们可以在自己的终端中直接履行，履行之前记得装备好 API Key 哦！

curl https://api.openai.com/v1/images/generations \
  -H "Content-Type: application/json" \
  -H "Authorization: Bearer $OPENAI_API_KEY" \
  -d '{
    "prompt": "A cute baby sea otter",
    "n": 2,
    "size": "1024x1024"
  }'

这其实便是一个很惯例的接口调用，接口参数有：

  • prompt – 所要生成图片的提示内容，比方：一只
  • n – 生成图片的数量，经过测验后我发现免费用户的 API Key 一次最多 5 张
  • size – 图片的尺度大小，可供挑选有：256x256 / 512x512 / 1024x1024

其间，prompt 是必填参数，n 与 size 是可选参数，n 默以为 1，size 默以为 1024x1024（可恶，默许大图好挣钱是吧！）

接口的回来内容也是很简洁的，包含了创立时间与图片 url 数组，我们通过拜访该 url 地址，便可获取到图片啦！

{
  "created": 1589478378,
  "data": [
    {
      "url": "https://..."
    },
    {
      "url": "https://..."
    }
  ]
}

GPT Terminal 项目实战

信任我们看了接口之后，会觉得竟然如此简略。没错，便是这么简略！我们火速进入实战环节！

首要，我们需求在 GPT Terminal 的前端中恳求后端服务，其间定义了图片生成接口。在该后端接口中，去恳求 OpenAI 服务。假如我们看了之前的系列文章，一定会对这个流程十分熟悉。

如何借助于 OpenAI 以命令的方式在 GPT 终端上画一只 “坤”？

后端实战

后端服务中，我集成了 OpenAI 供给的 SDK 包，我们可以通过简略的办法直接调用 OpenAI 供给的服务。

如下代码坐落项目 server/src/thirdpart/gptApi/gptApi.js 文件

// 装备 API Key，得到操作 OpenAI 接口的目标
const configuration = new Configuration({
  apiKey: gptConfig.key,
});
const openai = new OpenAIApi(configuration);
// 生成图片的办法
async function createImage(prompt, number = 1, size = "256x256") {
  const res = await openai.createImage({
    prompt: prompt,
    n: number,
    size: size,
  });
  console.log(res.data.data);
  if (res?.data?.data && res?.data?.data?.length) {
    return res.data.data;
  }
  throw new Error("Failed to get response from OpenAI service.");
}

这段代码很简略，信任聪明的我们一看就懂！

首要我们需求装备 OpenAI，以便于操作接口。之后通过 OpenAI SDK 中供给的 createImage 办法得到响应成果。在进行根本的判断后，将成果回来。

  • 其间，我们需求留意的是 n 和 size 并非必填参数。虽然 OpenAI 接口中有默许参数，但默许尺度是最大的，花钱也最多，所以我们将 size 默许值设置为 256x256（绝不能让它薅我们羊毛！）

在写好 OpenAI 第三方服务的代码后，我们还需求写一个后端接口，并露出给前端，使前端可以进行调用。

如下代码坐落项目 server/src/controller/gptController.js 文件

async function getGptImage(event, req, res) {
  try {
    let authResp = await openaiAuth();
  } catch (e) {
    throw new MyError(NO_AUTH_ERROR_CODE, "API Key 装备不正确");
  }
  console.log("event -", event);
  if (event.prompt === "") {
    throw new MyError(REQUEST_PARAMS_ERROR_CODE, "生成图画提示不能为空");
  }
  if (event.number && (event.number > 5 || event.number < 1)) {
    throw new MyError(REQUEST_PARAMS_ERROR_CODE, "图片数量有必要为1～5之间的整数");
  }
  if (
    event.size &&
    event.size != "256x256" &&
    event.size != "512x512" &&
    event.size != "1024x1024"
  ) {
    throw new MyError(REQUEST_PARAMS_ERROR_CODE, "生成图画尺度格局过错");
  }
  return await createImage(
    event.prompt,
    event.number || 1,
    event.size || "256x256"
  );
}

在如上代码中，我们需求对前端传入的参数进行额外的校验。此外，我们还看到办法一开始调用了 openaiAuth 办法，对 API Key 进行了校验。这个办法其实是我调用了 OpenAI 供给的 listModels 办法，其首要意图便是为了判断你能否正常恳求到它的服务。

前端校验往往是不可靠的，后端的这层校验是有必要的

如下代码坐落项目 server/src/thirdpart/gptApi/gptApi.js 文件

// API Key 验证
async function openaiAuth() {
  return await openai.listModels();
}

前端实战

前端流程其实相对比较复杂，由于其间涉及到了 指令读取、指令解析 流程，可是这部分并不是我们今日重点重视的，暂时越过。假如我们对其感兴趣，可以看看 GPT Terminal 项目源码中的 src/core 部分。或者你也可以直接问我，我会在 24 小时内回答。

在前端代码中，我们也需求定义一个调用办法，去恳求后端服务。

如下代码坐落项目 src/core/commands/gpt/subCommands/image/imageApi.ts 文件

import myAxios from "../../../../../plugins/myAxios";
export const getImage = async (
  prompt: string,
  number: number,
  size: string
) => {
  return await myAxios.post("/gpt/getImage", {
    prompt,
    number,
    size,
  });
};

之后，我们通过在 ImageBox.vue 组件中调用此办法，获取回来的响应成果，并将其烘托到页面中即可！

在 onMounted 办法中，即组件加载时，我们去调用后端接口，并处理响应成果

如下代码坐落项目 src/core/commands/gpt/subCommands/image/ImageBox.vue 文件

const res: any = await getImage(prompt.value, number.value, size.value)
if (res?.code !== 0) {
    // 服务端异常处理
    return;
}
imageUrlList.value = res.data

最终，我们将 mageUrlList烘托到组件中。

在这儿，我运用了 Ant-Design-Vue 供给的 Grid 与 Image 组件。

<a-row :gutter="[0, 40]">
    <a-col :span="4" v-for="(item, index) in imageUrlList" :key="index">
        <a-image :src="item.url" />
    </a-col>
</a-row>

假如我们去看 GPT Terminal 代码的话，会发现 onMounted 办法中除了恳求后端接口，还包含了其它操作，如定时器控制 Loading、向父组件发送事件等。

这些代码解说坐落 上一篇文章 中。

成果展现

代码现已完工！我们就来测验一下看看，在 GPT Terminal 中画一只 “坤” 是什么样的体验！

如何借助于 OpenAI 以命令的方式在 GPT 终端上画一只 “坤”？

总结

今日给我们解说并展现了怎么用 OpenAI 供给的 AI 图片生成接口，为我们生成 “坤”（小黑子油饼食不食！），我们在日后做自己的 ChatGPT 运用的过程中，也应该多多参阅官方供给的文档教程，而且其间还有很多有意思而且值得探索的东西。

后记

那么今日就先到这儿啦！

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

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

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