小白也能基于 OpenAI 搭建自己的英语学习工具

2023-08-01
辽宁
本文字数：3347 字
阅读完需：约 11 分钟

首先使用 koa-setup 脚手架搭建项目，端口号配置8080另外选上koaRouter、koaBody

koa-setup

复制代码

如图：

执行成功后如图所示，并在package.json文件中添加 "type": "module",如图：

修改 index.js，并在项目目录创建 src 文件夹，将 index.js 移动到下面。完整如下：

import Koa from 'koa'import Router from 'koa-router'import { koaBody } from 'koa-body'


const app = new Koa()

app.use(koaBody({    multipart:true}))const router = new Router()router.get("/",(ctx)=>{    ctx.body = "hello ."})app.use(router.routes())

app.listen(8080,()=>{    console.log("open server localhost:8080")})

复制代码

并如图所示，修改package.json添加 "dec": "nodemon src/index.js",

接下来安装nodemon

pnpm i nodemon -D

复制代码

执行命令pnpm dev，如图：

验证(如图所示便是成功)：

调整文件在 src 下新建文件夹router以及在其下面新建文件index.js。router 下的 index.js 内容如下：

import Router from 'koa-router'
export const router = new Router()router.get("/",(ctx)=>{    ctx.body = "hello ."})

复制代码

src 下的 index.js 文件

import Koa from 'koa'
import { koaBody } from 'koa-body'import { router } from './router/index.js'

const app = new Koa()

app.use(koaBody({    multipart:true}))
app.use(router.routes())
app.listen(8080,()=>{    console.log("open server localhost:8080")})

复制代码

此时的文件层级结构如下：

openAI 的图片生成文档：官网地址：https://platform.openai.com/

安装 OpenAI

pnpm i openai

复制代码

调用 ChatGPT 生成图片：

修改 router 文件夹下的 index.js，完整内容如下：

import Router from 'koa-router'import { Configuration, OpenAIApi } from 'openai'

export const router = new Router()router.post("/generate-img",async (ctx)=>{    const {prompt} = ctx.request.body;    const config = new Configuration({        apiKey: "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"    });
    const openai = new OpenAIApi(config);    const {data} = await openai.createImage({        prompt: prompt,        n: 1,        size: "256x256",    });
    console.log(data.data);
    const imageUrl = data.data[0].url
    ctx.body = {        state: "ok",        data: imageUrl    }})

复制代码

浏览器请求地址：http://localhost:8080/generate-img 结果如图：

改造：创建一个 controller 文件夹，并在这个文件夹下面创建一个openaiController.js文件。内容如下：

import { Configuration, OpenAIApi } from 'openai'
export class OpenAIController{    constructor(ctx){        this.ctx = ctx;        const config = new Configuration({            apiKey: "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"        });            this.openai = new OpenAIApi(config);    }    async generateImg(){        const {prompt} = this.ctx.request.body;        const {data} = await this.openai.createImage({            prompt: prompt,            n: 1,            size: "256x256",     });
        console.log(data.data);
        const imageUrl = data.data[0].url
        this.ctx.body = {            state: "ok",            data: imageUrl        }    }}

复制代码

然后继续调整 router 文件夹下的index.js文件，

import Router from 'koa-router'
import { OpenAIController } from '../controllers/openaiController.js'

export const router = new Router()router.post("/generate-img",async (ctx)=>{    const openaiController = new OpenAIController(ctx);    await openaiController.generateImg();})

复制代码

配置完成后的项目层级关系为：

调用 ChatGPT 文本接口：具体参考：https://www.npmjs.com/

安装：

pnpm i chatgpt

复制代码

在 controllers 文件夹中创建一个chatgptController.js文件。

import { ChatGPTAPI } from "chatgpt";
export class ChatGPTController {    constructor(ctx){        this.ctx = ctx;        this.api = new ChatGPTAPI({            apiKey: "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"        })    }
    async conversation(ctx){        const { question } = this.ctx.request.body        const answer = await this.api.sendMessage(question + "请使用中文进行回答");                this.ctx.body={            state: "ok",            data: answer        }    }}

复制代码

补充 router 文件夹写的index.js文件，补充完之后内容如下：

import Router from 'koa-router'
import { OpenAIController } from '../controllers/openaiController.js'import { ChatGPTController } from '../controllers/chatgptController.js'

export const router = new Router()router.post("/generate-img",async (ctx)=>{    const openaiController = new OpenAIController(ctx);    await openaiController.generateImg();})
router.post("/conversation",async (ctx)=>{    const chatgptController = new ChatGPTController(ctx);    await chatgptController.conversation();})

复制代码

后端接口已经搭建完成，接下来完成前端的搭建吧：构建前端项目：

# 项目名：frontend framework：vue variant：TypeScriptpnpm create vite

复制代码

cd frontend/
# 安装pnpm ipnpm i axios

# 运行pnpm dev
# axios

复制代码

配置代理 vite 官方文档：https://cn.vitejs.dev/config/server-options.html#server-proxy

将上面标注的配置粘贴在vite.config.js文件中

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'
// https://vitejs.dev/config/export default defineConfig({  plugins: [vue()],  server: {    proxy: {      '/api': {        target: 'http://localhost:8080',        changeOrigin: true,        rewrite: (path) => path.replace(/^\/api/, ''),      },    }  }})

复制代码

修改App.vue文件


<script setup lang="ts">import { ref } from "vue"import { apiGenerateImg, apiConversation } from './api'

const analysis = ref("")const imgUrl = ref("")const text= ref("")
function handleCheck () {  // api  apiGenerateImg(text.value).then(({data})=>{    imgUrl.value = data.data;    console.log(data);  });
  apiConversation(text.value).then(({data})=>{    analysis.value = data.data.text;  })}
</script>
<template>  <div> 
    <div>      <div>        <img :src="imgUrl" alt="">      </div>      <div>       {{ analysis }}      </div>    </div>    <div>      <input type="text" v-model="text">      <button @click="handleCheck">check</button>    </div>

  </div></template>
<style scoped>.logo {  height: 6em;  padding: 1.5em;  will-change: filter;  transition: filter 300ms;}.logo:hover {  filter: drop-shadow(0 0 2em #646cffaa);}.logo.vue:hover {  filter: drop-shadow(0 0 2em #42b883aa);}</style>
function ref(arg0: string) {  throw new Error("Function not implemented.");}
function apiGenerateImg(arg0: string) {  throw new Error("Function not implemented.");}

复制代码

在 frontend 目录下的 src 目录下创建一个 api 目录并在里面创建一个index.tx文件。内容如下：

import axios from 'axios'

export function apiGenerateImg(prompt: string) {    return axios.post("/api/generate-img", {        prompt,    })}

export function apiConversation(question: string) {    return axios.post("/api/conversation", {        question,    })}