mediaAll/src/view/qh/index.vue

<template>
  <h2 style="text-align: center; margin: 18px 0;font-size: 25px;font-family: 'Source Sans Pro', 'ui-sans-serif', 'system-ui', sans-serif;">ChatGLM</h2>
  <div class="chatbg tool">
    <div
      style="float: left; font-size: 12px;padding: 4px 8px;border-right: 1px solid #e5e7eb;border-bottom: 1px solid #e5e7eb;border-bottom-right-radius: 7px;"
    >
        <el-icon><ChatDotRound /></el-icon>
      Chatbot
    </div>
    <div style="clear: both"></div>
    <div class="chatGptChat" ref="chatEle">
      <div v-for="(item, index) in chat" :key="index">
        <div v-if="item.type === 'robot'" class="chat">
          <div class="cahtText">
            <textShow :text="item.text" />
          </div>
        </div>
        <div v-if="item.type === 'user'" class="chat chatRight">
          <div class="cahtText" v-text="item.text"></div>
        </div>
        <div style="clear: both"></div>
      </div>
    </div>
  </div>
  <div class="tool">
    <el-row :gutter="15">
      <el-col :span="16">
        <el-input
          v-model="inputText"
          :rows="10"
          type="textarea"
          placeholder="请输入您的问题"
        />
        <el-button
          style="
            width: 100%;
            color: #ea580c;
            font-weight: 600;
            font-size: 16px;
            margin-top: 1em;
          "
          :loading="load"
          color="#fdba74"
          size="large"
          @click="saveText"
        >
          提交
        </el-button>
      </el-col>
      <el-col :span="8">
        <el-button
          style="width: 100%; margin-bottom: 1em"
          color="#f3f4f6"
          size="large"
          @click="chat = []"
        >
          清除历史记录
        </el-button>
        <div class="tools">
          <div class="toolsItem">
            最大长度
            <el-input-number
              style="float: right"
              v-model="num"
              :min="0"
              :max="4096"
              @change="change"
              controls-position="right"
              size="small"
            />
            <input
              :value="0"
              type="range"
              id="num"
              style="width: 100%"
              @input="input"
            />
          </div>
          <div class="line"></div>
          <div class="toolsItem">
            Top P
            <el-input-number
              style="float: right"
              v-model="num1"
              :min="0"
              :max="1"
              :step="0.01"
              @change="change1"
              controls-position="right"
              size="small"
            />
            <input
              :value="0"
              type="range"
              id="num1"
              style="width: 100%"
              @input="input1"
            />
          </div>
          <div class="line"></div>
          <div class="toolsItem">
            感情度
            <el-input-number
              style="float: right"
              v-model="num2"
              :min="0"
              :max="1"
              :step="0.01"
              @change="change2"
              controls-position="right"
              size="small"
            />
            <input
              :value="0"
              type="range"
              id="num2"
              style="width: 100%"
              @input="input2"
            />
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>
<script setup>
import { createSocket } from '@/utils/socket';
import { ChatDotRound } from '@element-plus/icons-vue';
import { ref, nextTick, onMounted } from 'vue';

import textShow from './textShow.vue';

const chat = ref([]);
const load = ref(false);
const chatEle = ref(null);
const inputText = ref('');
const num = ref(2048);
const num1 = ref(0.7);
const num2 = ref(0.95);
let chatlist = ref([]);

function saveText() {
  load.value = true;
  nextTick(() => {
    // 滚动到最底层
    if (chatEle.value.scrollHeight > chatEle.value.clientHeight) {
      chatEle.value.scrollTop = chatEle.value.scrollHeight;
    }
  });
  chat.value.push({
    text: inputText.value,
    type: 'user',
  });
  chat.value.push({
    text: '',
    type: 'robot',
  });
  const idnex = chatlist.value.length === 0 ? 0 : chatlist.value.length - 1;
  const t = inputText.value;
  inputText.value = '';
  createSocket(ws => {
    const data = ws.data || {};
    let session_hash = Math.random().toString(36).substring(2);
    if (data.msg == 'send_hash')
      ws.ws.send(
        JSON.stringify({
          fn_index: idnex,
          session_hash,
        })
      );
    if (data.msg == 'send_data')
      ws.ws.send(
        JSON.stringify({
          fn_index: idnex,
          data: [t, chatlist.value, num.value, num1.value, num2.value, null],
          event_data: null,
          session_hash,
        })
      );
    if (data.msg == 'process_generating') {
      const li = data.output.data[0] || [];
      const olist = li[li.length - 1];
      chat.value[chat.value.length - 1].text = olist[1];
    }
    if (data.msg == 'process_completed') {
      chatlist.value = data.output.data[0] || [];
      load.value = false;
    }
  });
}

const input = e => {
  num.value = Math.floor((e.target.value / 100) * 4096);
};

const change = () => {
  document.querySelector('#num').value =
    ((num.value / 4096) * 100).toFixed(0) - 0;
};
const input1 = e => {
  num1.value = e.target.value / 100;
};

const change1 = () => {
  document.querySelector('#num1').value = num1.value * 100;
};
const input2 = e => {
  num2.value = e.target.value / 100;
};

const change2 = () => {
  document.querySelector('#num2').value = num2.value * 100;
};
onMounted(() => {
  change();
  change1();
  change2();
});
</script>
<style>
.chatbg {
  min-height: 3em;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}
.chatGptChat {
  padding-top: 5px;
  box-sizing: border-box;
  font-weight: 500;
  margin: 1em auto 0 auto;
  width: 100%;
  height: auto;
  max-height: 480px;
  position: relative;
  overflow-y: auto;
  padding: 0 1em;
}

.chatGptChat .van-field {
  background-color: #eee;
  position: fixed;
  padding-bottom: 1em;
  bottom: 0;
  left: 0;
}

.chatGptChat .van-field .van-field__control {
  background-color: #ffffff;
  padding: 0.4em;
}

.chatGptChat .chat {
  padding: 8px 12px;
  background-color: #f4f4f680;
  border-radius: 22px;
  border: 1px solid #e5e7eb;
  width: 98%;
  border-bottom-left-radius: 0;
  margin-bottom: 1em;
}

.chatGptChat .chat .cahtText {
  text-align: left;
  line-height: 1.5em;
  border-radius: 5px;
  padding: 0.5em;
  display: inline-block;
  max-width: calc(100% - 40px);
  vertical-align: middle;
}

.chatGptChat .chat .van-image {
  vertical-align: top;
}

.chatGptChat .chat .cahtText:not(:last-child),
.chatGptChat .chat .van-image:not(:last-child) {
  margin-right: 5px;
}
.chatGptChat .chatRight {
  border-color: #fdba74;
  background-color: #fff7ed;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 22px;
  float: right;
}

.tool {
  width: 100%;
  margin: 1em auto 0 auto;
}

@media (min-width: 640px) {
  .chatGptChat,
  .tool {
    max-width: 608px;
  }
}

@media (min-width: 768px) {
  .chatGptChat,
  .tool {
    max-width: 736px;
  }
}

@media (min-width: 1024px) {
  .chatGptChat,
  .tool {
    max-width: 992px;
  }
}

@media (min-width: 1280px) {
  .chatGptChat,
  .tool {
    max-width: 1248px;
  }
}

@media (min-width: 1536px) {
  .chatGptChat,
  .tool {
    max-width: 1504px;
  }
}

.tools {
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  line-height: 1.5em;
}
.toolsItem {
  padding: 10px 12px;
  font-size: 14px;
  font-weight: 400;
  color: #6b7280;
}
.line {
  height: 1px;
  background-color: #e5e7eb;
}
</style>