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

@派大星

发布于 2023-09-08 17:14:37

4020

首先使用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

image.png

在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：TypeScript
pnpm create vite

image.png

cd frontend/

# 安装
pnpm i
pnpm 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,
    })
}

至此，一个简易的英语学习工具就搭建完成啦。如图：