App.vue

<template>
  <div class="container ivu-p">
    <Title :level="4" class="ivu-text-center">ChatGPT 中英互译</Title>
    <Paragraph class="ivu-text-center">
      Powered By <img src="./assets/inscode-logo.png" height="14">
      <br>
      <a href="https://inscode.net">https://inscode.net</a>
    </Paragraph>
    <Alert>QPM 是 5，如果超过访问限制，可以到 <a href="https://inscode.csdn.net/@aresn/gpt-vue">https://inscode.csdn.net/@aresn/gpt-vue</a> Fork 后免费使用自己的额度。</Alert>
    <div class="dialog">
      <template v-for="(item, index) in dialogs" :key="index">
        <div class="dialog-item" :class="{ 'dialog-item-me': item.role === 'me', 'dialog-item-ai': item.role === 'ai' }">
          <div class="dialog-item-main">{{ item.text }}</div>
        </div>
        <div class="dialog-action" :class="{ 'dialog-action-me': item.role === 'me', 'dialog-action-ai': item.role === 'ai' }">
          <Space class="ivu-mt-8">
            <Button size="small" icon="md-megaphone" @click="handleRead(item.text)">朗读</Button>
            <Button size="small" icon="md-copy" @click="handleCopy(item.text)">复制</Button>
          </Space>
        </div>
      </template>
    </div>
    <div class="question ivu-mt">
      <Input v-model="question" type="textarea" :autosize="{ minRows: 4, maxRows: 6 }" placeholder="当你输入中文时，会翻译为英文；当你输入英文时，则会翻译为中文..." />
      <Row class="ivu-mt">
        <Col>
          <Button type="primary" size="large" icon="md-send" :loading="loading" @click="handleSend">翻译</Button>
        </Col>
        <Col>
          <Button size="large" class="ivu-ml" icon="md-add" :disabled="loading" @click="handleNewChat">新对话</Button>
        </Col>
      </Row>
    </div>
  </div>
</template>
<script>
import { fetchEventSource } from '@microsoft/fetch-event-source';
import { apiKey, apiUrl } from './api';

export default {
  data() {
    return {
      question: '',
      loading: false,
      dialogs: []
    }
  },
  methods: {
    handleSend() {
      if (this.loading || this.question === '') return;
      this.loading = true;

      const question = this.question;
      this.question = '';

      this.dialogs.push({
        id: this.dialogs.length + 1,
        role: 'me',
        text: question
      });

      const aiDialogID = this.dialogs.length + 1;

      this.dialogs.push({
        id: aiDialogID,
        role: 'ai',
        text: 'AI 翻译中...'
      });

      const dialog = this.dialogs.find(item => item.id === aiDialogID);

      /**
       * 发送请求，InsCode 已经集成了 GPT 能力
       * 在 vite.config.js 中已通过环境变量写入了 apiKey（该 key 是动态写入使用者的，在 IDE 中是作者，发布到社区是运行该作品的用户）
       * 发布到社区后，将消耗运行者的额度
       * 注意：如果部署应用，任何人通过部署后的域名访问应用时，都将消耗部署者的额度
       */
      const body = {
        messages: [
          {
            role: 'user',
            content: '把以下内容进行翻译，只返回翻译后的内容。现在你是一个英汉互译器，当我输入中文时，你翻译成英文；当我输入英文时，请翻译成中文。以下是要翻译的内容\n\n：' + question
          }
        ],
        apikey: apiKey
      }

      const source = fetchEventSource(apiUrl, {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json'
        },
        body: JSON.stringify(body),
        onopen: (response) => {
          dialog.text = '';
        },
        onmessage: (msg) => {
          if (msg.data === '[DONE]') {
            this.loading = false;
            return;
          };
          const data = JSON.parse(msg.data);
          const finish_reason = data.choices[0].finish_reason;
          const finish = finish_reason === 'stop' || finish_reason === 'length';
          const content = data.choices[0].delta.content;

          console.log(222, content);

          if (finish) {
            this.loading = false;
          } else if (content) {
            const text = content;
            dialog.text += text;
            if (content.indexOf('超过访问限制') >=0) this.loading = false;
          }
        },
        onerror: (err) => {
          console.log("error", err);
        }
      });
    },
    handleNewChat() {
      this.dialogs = [];
    },
    handleRead (text) {
      const speech = new SpeechSynthesisUtterance(text);
      speech.rate = 1;
      speech.pitch = 1;
      window.speechSynthesis.speak(speech);
    },
    handleCopy (text) {
      this.$Copy({
          text: text
      })
    }
  }
}
</script>
<style>
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.dialog {
  flex: 1;
  overflow: auto;
}

.dialog-item {
  display: flex;
}

.dialog-item-main {
  max-width: 80%;
  padding: 8px;
  word-wrap: break-word;
  margin-top: 16px;
  border-radius: 4px;
}

.dialog-item-me {
  justify-content: flex-end;
}

.dialog-item-me .dialog-item-main {
  background-color: antiquewhite;
}

.dialog-item-ai .dialog-item-main {
  background-color: #eee;
}

.dialog-action{
  display: flex;
}
.dialog-action-me{
  justify-content: flex-end;
}
</style>