根据springboot的集成本地ai大模型流式输出的前台打字机效果展示

首先:后端配置ai大模型集成springboot可以参考以下我的原创作品

springBoot集成Ollama大模型以及流式传输-CSDN博客

前端我们集成打字机效果进行展示

 效果展示:

<template>
  <div class="container">
    <div class="result-container">
      <p class="result" v-text="combinedResult"></p>
    </div>
    <div class="input-container">
      <textarea v-model="input" placeholder="输入您的消息"></textarea><br>
      <button @click="getResults">发送</button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      results: [], // 这里填入您的结果数组
      input: '',
      currentResult: '',
      currentIndex: 0,
      combinedResult: '',
      showResults: false,
      allResultsShown: false,
      controller: new AbortController(),
      // 本地结果历史记录的集合
      combinedResultList: [],
    //   本地发送的集合
    };
  },
  created() {

  },
  methods: {
    getResults() {
      if(this.combinedResult!=""){
        this.combinedResultList.push(this.combinedResult+"||")
      }
      console.log(this.combinedResultList+"历史记录")
      this.controller = new AbortController(); // 创建新的AbortController
      this.combinedResult = ''; // 清空上一次的所有文字
      this.currentIndex = 0; // 重置索引
      const signal = this.controller.signal;
      this.$axios.get('http://localhost:8888/ai/streamChat?message=' + this.input, {signal}).then(response => {
        this.results = response.data.map(result => result.result.output.content);
        this.showResults = true; // 显示结果
        this.typeWriter(); // 启动打字机效果
      }).catch(error => {
        if (error.name === 'AbortError') {
          console.log('Fetch请求已被中断');
        } else {
          console.error('Error:', error);
        }
      });
    },
    typeWriter() {
      if (this.currentIndex < this.results.length) {
        this.currentResult = this.results[this.currentIndex];
        this.combinedResult += this.currentResult + ' '; // 动态更新展示的文字
        this.currentIndex++;
        setTimeout(this.typeWriter, 50); // 控制打字机速度
      } else {
        this.allResultsShown = true; // 所有结果都已显示完毕
      }
    },
    cancelRequest() {
      this.controller.abort(); // 取消Fetch请求
    }
  }
};
</script>

<style>
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.result-container {
  margin-bottom: 20px;
  text-align: center;
}

.input-container {
  display: flex;
  align-items: center;
}

textarea {
  flex: 1;
  margin-right: 10px;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 16px;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #007bff;
  color: #fff;
  cursor: pointer;
  transition: background-color 0.3s;
}

button:hover {
  background-color: #0056b3;
}
</style>