尝试用ChatGPT开发一个聊天网站

本文正在参加 人工智能创作者扶持方案

最近想测验运用下ChatGPT开发能力

我说：用vue开发一个能够拜访ChatGPT的网页

GPT: 好的，那咱们用Vue.js构建一个简略的页面，完结拜访ChatGPT并传入apikey参数的功用。 首先，中装axios库。能够运用以下命令：

npm install axios

然后，翻开Vue组件文件（例如App.vue），在template标签中增加一个简略的输入框和一个按钮：

template>
  <div>
   <input type="text" v-model="question" placeholder="请输入问题" />
   <button @click="getAnswer">查找答案</button>
   <div v-if="answer">{{ answer }}</div>
  </div>
</template>

接下来，在script标签中导入axios并界说 getAnswer 方法。其间，咱们将传入apikey参数并发送GET恳求来获取答案：

<script>
import axios from 'axios';
export default {
  name: 'App',
  data() {
    return {
      question: '',
      answer: '',
      apiKey: 'YOUR_API_KEY_HERE'
    };
  },
  methods: {
    async getAnswer() {
      try {
        const response = await axios.get(
          `https://api.openai.com/v1/answers?model=curie&prompt=${this.question}&max_tokens=5`,
          {
            headers: {
              Authorization: `Bearer ${this.apiKey}`
            }
          }
        );
        this.answer = response.data.answers[0].text;
      } catch (error) {
        console.log(error);
      }
    }
  }
};
</script>

最后，替换掉apiKey变量中的 YOUR_API_KEY_HERE，留意加上自己在OpenAI恳求的密钥，保存文件并运转Vue项目即可。用户在输入问题后，点击查找答案按钮，即可获得ChatGPT给出的答案。

当然，这仅仅简略的演示，实践开发中还需求合理处理接口返回结果、增加错误处理等，但这应该能够给您提供一个简略的思路。

看起来好像很简略，我把代码试运转了下，报错接口拜访失利。

哈哈好吧，我就知道。我查了下官方API文档，没有这个接口。可能是ChatGPT3.5素材比较老了，我参照文档修改了下

const response = await axios.post(
          `https://api.openai.com/v1/chat/completions`,
          {
          	"model":"gpt-3.5-turbo",
          	"messages": [{role: "user", content: this.question}],
          	"temperature": 0.7
          },
          {
            headers: {
              Authorization: `Bearer ${this.apiKey}`,
        	  ContentType:"application/json"
            }
          }
        );
        this.answer = response.data.choices[0].message.content;

然后就能够了

但是这样只能问答，没法谈天呀，并且姿态有点丑。

找下ChatGPT：ChatGPT优化下界面，需求保存对话。

GPT: 好的，保存对话能够让用户随时检查之前的谈天记录，也便于后期分析用户行为，优化ChatGPT的表现。

新增一个dialogs数组，保存用户和ChatGPT的对话记录：

() {
  return {
    question: '',
    answer: '',
    apiKey: 'YOUR_API_KEY_HERE',
    context: [],
    dialogs: []
  };
}

在getAnswer方法中，将用户提出的问题和ChatGPT返回的答案保存到dialogs中：

// 保存对话
this.dialogs.push({
  question: this.question,
  answer: response.data.answers[0].text,
  from: 'user'
}, {
  question: this.question,
  answer: response.data.answers[0].text,
  from: 'ChatGPT'
});
// 清空
this.question = '';

这儿咱们将提出的问题和ChatGPT返回的答案都保存到dialogs中，用from字段标明是谁发出来的音讯。

接着，咱们能够在界面中增加一个音讯记录的区域，实时显现用户的对话记录：

<div class="message-container">
  <div v-for="(dialog, index) in dialogs" :key="index" :class="['message', dialog.from]">
   div class="avatar"></div>
   div class="bubble">{{ dialog.answer }}</div>
  </div>
</div>

这儿运用v-for遍数组将前保存的对话记录渲染到界面中。

最后在款式表中增加一些款式，美化谈天界面：

.message-container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  height: 400px;
  overflow-y: scroll;
}
.message {
  display: flex;
  margin-top: 20px: 60%;
  min-width: 120px;
}
.user .bubble {
  background-color: var(--theme-color);
  color: #fff;
  border-radius: 20px 20px 20px 0;
  margin-left: 10px;
  margin-right: auto;
  padding: 10px 15px;
  font-size: 14px;
  line.5;
}
.ChatGPT .bubble {
  background-color: #f4f4f4;
  color: #333;
  border-radius: 20px 20px 0 20px;
  margin-right: 10px;
  margin-left: auto;
  padding: 10px 15px;
  font-size: 14px;
  line-height: 1.5;
}
.avatar {
  width: 40px;
  height:  border-radius: 50%;
  background-color: var(--theme-color);
  margin-right: 10px;
}
.user .avatar {
  margin-left: auto;
  margin-right: 0;
}

在这儿，咱们设置了音讯记录区域的高度为400px，超出部分能够翻滚显现。另外，咱们为用户和ChatGPT分别设置了不同的气泡款式，并将头像设置为圆形。

这样，经过保存对话，咱们不仅增加了用户体会，还能便利分析用户行为，从而优化ChatGPT的表现。

我直接搬运下,作用如图

好吧，这时候又是需求程序员的时候了，左图是ChatGPT给出的代码的作用，右图是调整过的。

好像仍是有问题，他不记得我的名字了，好吧再找下ChatGPT

我：需求能够联络上下文

GPT: 好的，那咱们能够结合上下文信息，完结一个愈加智能的ChatGPT。

首先，咱们需求保存用户之前提出的问题及ChatGPT返回的答案，以此来构建上下文。

在data中增加一个context数组：

data() {
  return {
    question: '',
    answer: '',
    apiKey: 'YOUR_API_KEY_HERE',
    context: []
  };
}

在getAnswer方法中，将返回的答案以及用户提出的问题存储到context，作为下一次恳求的上下文：

this.context.push({
  question: this.question,
  answer: response.data.answers[0].text
});

然后，在发送下一次恳求时，将context中最近的几个问题和答案拼接成一个较长的prompt，以便ChatGPT更好地理解上下文：

// 获取上下文
let contextPrompt = '';
if (this.context.length > 0) {
  const startIndex = Math.max(0, this.context.length - 3);
  const context = this.context.slice(startIndex).reverse();
  contextPrompt = context
    .map(item => item.question + item.answer)
    .join(' ');
}
// 发送恳求
const response = await axios.get(
 .open.com/v1/answers?model=curie&prompt=${encodeURIComponent(
    this.question
  )}${encodeURIComponent(contextPrompt)}&max_tokens=5`,
  {
    headers: {
      Authorization: `Bearer ${this.apiKey}`
    }
  }
);

其间运用encodeURIComponent对prompt进行编码，以防止可能的特别字符造成的恳求问题。

这样，咱们便能够运用上下文信息，让ChatGPT更好地理解用户目的，构建出愈加智能的谈天应用。

当然这儿的接口调用仍是老问题，调整下

他现在能够知道我了。这儿特别说明下ChatGPT给出代码逻辑上下文默许最近3个，如果不约束会导致上下文过大，token数量巨大，测验过抵达一定数量会出现异常。

体会下来ChatGPT3.5总体逻辑没有问题，最大问题给出了错误的api，估量是受限于训练素材，有条件的伙伴能够用ChatGPT4试下。当然这仅仅最简略的谈天了，经过api文档能够发现能够设置类似于预设信息之类，还能够对文档词汇进行鉴黄等操作。自己初次尝鲜有什么问题还望纠正。