App.vue

<template>
  <div class="w-full h-screen">
    <!-- toolbar -->
    <div class="w-full h-14 pt-2 border-b-2 shadow-2xl text-center fixed bg-slate-200">
      <a href="#/llm-rep/app/">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
          class="w-4 h-4 absolute left-4 top-5">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M2.25 12l8.954-8.955c.44-.439 1.152-.439 1.591 0L21.75 12M4.5 9.75v10.125c0 .621.504 1.125 1.125 1.125H9.75v-4.875c0-.621.504-1.125 1.125-1.125h2.25c.621 0 1.125.504 1.125 1.125V21h4.125c.621 0 1.125-.504 1.125-1.125V9.75M8.25 21h8.25" />
        </svg>
      </a>
      <span class="leading-10 font-bold">{{ name }} {{ config?.mode === 'completions' ? '（无上下文）' : '' }}</span>
      <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor"
        class="w-4 h-4  absolute right-4 top-5 cursor-pointer" @click="cleanHistory">
        <path stroke-linecap="round" stroke-linejoin="round"
          d="M14.74 9l-.346 9m-4.788 0L9.26 9m9.968-3.21c.342.052.682.107 1.022.166m-1.022-.165L18.16 19.673a2.25 2.25 0 01-2.244 2.077H8.084a2.25 2.25 0 01-2.244-2.077L4.772 5.79m14.456 0a48.108 48.108 0 00-3.478-.397m-12 .562c.34-.059.68-.114 1.022-.165m0 0a48.11 48.11 0 013.478-.397m7.5 0v-.916c0-1.18-.91-2.164-2.09-2.201a51.964 51.964 0 00-3.32 0c-1.18.037-2.09 1.022-2.09 2.201v.916m7.5 0a48.667 48.667 0 00-7.5 0" />
      </svg>
    </div>
    <!-- main content -->
    <div class="flex w-full h-full pt-14">
      <!-- left  -->
      <div class="flex-none w-0 md:w-[260px] bg-slate-200 border-r-2 hidden md:block p-8">
        <t-form labelAlign="top" label-width="100" :style="{display: showProfileSetting ? 'block':'none'}">
            <t-form-item label="机器人头像">
              <!-- <t-input placeholder="请输入内容" v-model="config.robot_img"/> -->
              <t-space direction="vertical" align="center" v-for="imgItem in robotAvatarList" class="mr-2 cursor-pointer hover:bg-blue-600">
                <t-image class="rounded-lg border-2 " :class="{ 'border-blue-800': imgItem.src === config.robot_img }"
                  @click="changeRobotAvatar(imgItem.src)" :src="imgItem.src" fit="cover"
                  :style="{ width: '40px', height: '40px' }" />
                <!-- <span>{{ imgItem.name }}</span> -->
              </t-space>
            </t-form-item>
            <t-form-item label="你的头像">
              <t-space direction="vertical" align="center" v-for="imgItem in userAvatarList" class="mr-2 cursor-pointer hover:bg-blue-600">
                <t-image class="rounded-lg border-2 " :class="{ 'border-blue-800': imgItem.src === config.user_img }"
                  @click="changeUserAvatar(imgItem.src)" :src="imgItem.src" fit="cover"
                  :style="{ width: '40px', height: '40px' }" />
                <!-- <span>{{ imgItem.name }}</span> -->
              </t-space>
            </t-form-item>
            <t-form-item label="机器人对你的称呼" help="多个称呼用逗号隔开">
              <t-input v-model="config.user_call_name" />
            </t-form-item>
          </t-form>
      </div>
      <!-- right -->
      <div class="flex-auto bg-slate-300 md:bg-slate-300 p-2 sm:p-8">
        <div class="w-full bg-slate-200 h-full m-auto relative container max-w-6xl rounded-xl">
          <div class="w-full h-full pb-12 p-4 overflow-y-auto overflow-x-hidden" ref="messageList">
            <div v-for="item in message" class="mb-8">
              <div v-if="item.user === 'User'">
                <div class="flex flex-row-reverse">
                  <t-image class="rounded-lg" v-if="config.user_img" :src="config.user_img" fit="cover"
                    :style="{ width: '40px', height: '40px' }"></t-image>
                  <div class="bg-green-400 text-gray-700  p-4 mx-2 w-fit max-w-2xl 2xl:max-w-4xl rounded-lg cursor-pointer" @click="copyAsPrompt(item.message)" v-html="item.message">
                   
                  </div>
                </div>

              </div>
              <div v-else class="flex">
                <t-image class="rounded-lg" v-if="config.robot_img" :src="config.robot_img" fit="cover"
                  :style="{ width: '40px', height: '40px' }"></t-image>
                <div class="bg-slate-50 text-gray-700 p-4 mx-2 w-fit max-w-2xl 2xl:max-w-4xl rounded-lg text-wrapper">
                  
                  <template v-if="item?.viewMode??'chat' === 'image'">
                    <img v-if="item.img" :src="item.img"/>
                    <img v-else src="/loading.gif" class="max-w-[512px]"/>
                  </template>
                  <template>
                    {{  item.message ? item.message : '...' }}

                  </template>
                </div>
              </div>
            </div>
            <div class="text-center" v-if="mode !== 'draw'">
              <div v-if="loading"  @click="stop" class="-mt-4 px-5 py-1 m-auto w-fit cursor-pointer hover:bg-slate-300 border-dotted border-[1px] border-slate-400 rounded-md">
                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="animate-spin w-4 h-4 inline-block">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M21 12a9 9 0 11-18 0 9 9 0 0118 0z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M9 9.563C9 9.252 9.252 9 9.563 9h4.874c.311 0 .563.252.563.563v4.874c0 .311-.252.563-.563.563H9.564A.562.562 0 019 14.437V9.564z" />
                </svg>
                <span class="ml-2 text-[12px]">停止</span>
              </div>
             
            </div>
          </div>
          <div class="w-full absolute bottom-0 bg-slate-100 h-22 py-2 px-2 rounded flex flex-col  text-sm">
            
            <div class="w-full h-10 flex">
                <input v-model="prompt" class="flex-auto ring-0	outline-0	pl-2 bg-slate-200 h-10" v-on:keyup.enter="query" placeholder="提示词" />

                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" 
                @click="showMoreSetting=!showMoreSetting"
                class="w-6 mx-2 ml-4 mt-2 h-6 flex-none text-cyan-800 font-bold hover:text-cyan-600 cursor-pointer">
                  <path stroke-linecap="round" stroke-linejoin="round" d="M10.343 3.94c.09-.542.56-.94 1.11-.94h1.093c.55 0 1.02.398 1.11.94l.149.894c.07.424.384.764.78.93.398.164.855.142 1.205-.108l.737-.527a1.125 1.125 0 011.45.12l.773.774c.39.389.44 1.002.12 1.45l-.527.737c-.25.35-.272.806-.107 1.204.165.397.505.71.93.78l.893.15c.543.09.94.56.94 1.109v1.094c0 .55-.397 1.02-.94 1.11l-.893.149c-.425.07-.765.383-.93.78-.165.398-.143.854.107 1.204l.527.738c.32.447.269 1.06-.12 1.45l-.774.773a1.125 1.125 0 01-1.449.12l-.738-.527c-.35-.25-.806-.272-1.203-.107-.397.165-.71.505-.781.929l-.149.894c-.09.542-.56.94-1.11.94h-1.094c-.55 0-1.019-.398-1.11-.94l-.148-.894c-.071-.424-.384-.764-.781-.93-.398-.164-.854-.142-1.204.108l-.738.527c-.447.32-1.06.269-1.45-.12l-.773-.774a1.125 1.125 0 01-.12-1.45l.527-.737c.25-.35.273-.806.108-1.204-.165-.397-.505-.71-.93-.78l-.894-.15c-.542-.09-.94-.56-.94-1.109v-1.094c0-.55.398-1.02.94-1.11l.894-.149c.424-.07.765-.383.93-.78.165-.398.143-.854-.107-1.204l-.527-.738a1.125 1.125 0 01.12-1.45l.773-.773a1.125 1.125 0 011.45-.12l.737.527c.35.25.807.272 1.204.107.397-.165.71-.505.78-.929l.15-.894z" />
                  <path stroke-linecap="round" stroke-linejoin="round" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
                </svg>

                <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5"
                  stroke="currentColor"
                  class="w-6 mx-2 ml-4 mt-2 h-6 flex-none text-cyan-800 font-bold hover:text-cyan-600 cursor-pointer"
                  @click="query">
                  <path stroke-linecap="round" stroke-linejoin="round"
                    d="M6 12L3.269 3.126A59.768 59.768 0 0121.485 12 59.77 59.77 0 013.27 20.876L5.999 12zm0 0h7.5" />
                </svg>

                

            </div>
            <div class="w-full h-10 mt-2 flex gap-2" v-if="showMoreSetting">
                <input v-model="negative_prompt" class="flex-auto ring-0	outline-0	pl-2 bg-slate-200 h-10" v-on:keyup.enter="query" placeholder="逆向提示词" />
                <div class="flex-none w-40 ring-0	outline-0	pl-2  h-10 flex justify-between">
                  <input v-model="width" class="ring-0	outline-0	pl-2 bg-slate-200 h-10 w-16" placeholder="width"/> 
                  <span class="h-10 leading-10">*</span>
                  <input v-model="height" class="ring-0	outline-0	pl-2 bg-slate-200 h-10 w-16" placeholder="height"/>
                </div>
                <input v-model="steps" class="flex-none w-30 ring-0	outline-0	pl-2 bg-slate-200 h-10 w-16" placeholder="steps"/>
                <input v-model="sampler" class="flex-none w-40 ring-0	outline-0	pl-2 bg-slate-200 h-10 w-16 text-small" placeholder="sampler"/>

            </div>
           
            
          </div>
        </div>
      </div>
    </div>

  </div>
</template>
<script>

// import { Configuration, OpenAIApi } from "openai"
import OpenAI from './js/openai.js'
import Config from './js/config.js'
import SDApi from './js/sd.js'

// import MarkdownItVue from 'markdown-it-vue'
// import 'markdown-it-vue/dist/markdown-it-vue.css'
// https://github.com/ravenq/markdown-it-vue

// const DataServe = new Data()

export default {
  name: 'LlmApp',
  components: {
    // MarkdownItVue
  },
  data() {
    return {
      id: 0,
      name: '加载中...',
      userAvatarList: [],
      robotAvatarList: [],
      mode: 'draw',
      message: [
        // {"user": "User", "message": "创建一个用户表，要求分区"},
        // {"user": "AI", "message": "在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句：在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句：在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句：在GaussDB数据库中创建一个带有分区的用户表可以使用以下语句："},
        // {"user": "User", "message": "create table user(id int primary key, name varchar)将这个建表语句翻译成GaussDB建表语句create table user(id int primary key, name varchar)将这个建表语句翻译成GaussDB建表语句create table user(id int primary key, name varchar)将这个建表语句翻译成GaussDB建表语句create table user(id int primary key, name varchar)将这个建表语句翻译成GaussDB建表语句create table user(id int primary key, name varchar)将这个建表语句翻译成GaussDB建表语句"},
        // {"user": "AI", "message": "在GaussDB数据库中，创建一个带有主键约束的用户表可以使用以下语句:"},
      ],
      client: null,
      indexClient: null,
      prompt: '',
      config: {
        user_img: "",
        robot_img: "",
        user_call_name: "xxx",
        width: 512,
        // api_url: 'https://inscode-ide.node.inscode.run:8000/v1',
        // index_url: 'http://127.0.0.1:8000/search',
        // index_name: 'datasea',
        // api_prompt_prefix: '',
        // max_tokens: 2048,
        // prompt_template: "Use the following pieces of context to answer the question at the end. If you don't know the answer, just say that you don't know, don't try to make up an answer.\n" +
        //   "{context}\n"+
        //   "Question: {question}\n"+
        //   "Helpful Answer:"
      },
      loading: false,
      maxHistory: 200,
      speaking: false, // 是否正在输出语音
      autoSpeech: false, // 是否自动开始语音
      speech: null, // 语音object
      showProfileSetting: false, //是否显示角色设置模块
      width: 512,
      height: 512,
      steps: 20,
      sampler: 'DPM++ SDE Karras',
      showMoreSetting: false,
      default_prompt: '1girl, (ulzzang-6500:0.7), kpop idol, yae miko, detached sleeves, bare shoulders, pink hair, long hair, cleavage,japanese clothes,breast,best quality, (painting:1.5), (hair ornament:1.35), jewelry, purple eyes, earrings, breasts, torii, cherry blossoms, lantern light, depth of field, detailed face, face focus, ribbon_trim, (looking at viewer:1.25), nontraditional miko, shiny skin, long sleeves, smile, thick lips, game cg,  east asian architecture, (blurry background:1.2), sitting, upper body <lora:YaeMiko_Test:0.45>,<lora:mix4:0.5>',
      negative_prompt: 'bright lantern, brightness, (nipples:1.2), pussy, EasyNegative, (worst quality:2), (low quality:2), (normal quality:2), lowres, normal quality, ((monochrome)), ((grayscale)), skin spots, acnes, skin blemishes, age spot, glans,extra fingers, fewer fingers, strange fingers, bad hand, bare thighs,hand,bad finger',
    }
  },
  methods: {
    hideLeftMenu() {

    },
    changeUserAvatar(imgSrc) {
      this.config.user_img = imgSrc
    },
    changeRobotAvatar(imgSrc) {
      this.config.robot_img = imgSrc
    },
    getAvatar() {
      let that = this
      DataServe.find('t_llm_rep_chat_img', { resoure_sub_type: 'user_avatar' }).then(res => {
        if (res && res.status === 200 && res.data && res.data.code === 200 && res.data.data) {
          const data = res.data.data
          for (let item of data) {
            that.userAvatarList.push({
              src: JSON.parse(item.ext).img_src,
              name: item.name
            })
          }
        }
      })

      DataServe.find('t_llm_rep_chat_img', { resoure_sub_type: 'robot_avatar' }).then(res => {
        if (res && res.status === 200 && res.data && res.data.code === 200 && res.data.data) {
          const data = res.data.data
          for (let item of data) {
            that.robotAvatarList.push({
              src: JSON.parse(item.ext).img_src,
              name: item.name
            })
          }
        }
      })
    },
    initAIClient () {
      this.client = new OpenAI(this.config)
    },
    initIndexClient () {
      if (this.config?.index_url) {
        const index_type = this.config?.index_type
        //confluence
        if (index_type === 'es') {
          this.indexClient = new RepEs(this.config)
        } else if(index_type === 'confluence') {
          this.indexClient = new RepConfluence(this.config)
        } else {
          this.indexClient = new RepSimple(this.config)
        }
      } 
    },
    query() {
      if (this.loading) {
        MessagePlugin.warning({ content: '正在执行中，请稍等!', placement: 'center' })
        return
      }
      if (this.prompt === '') {

        MessagePlugin.warning({ content: '提示词不能为空！', placement: 'center' })
        console.info('提示词不能为空')
        return
      }
      
      if (this.mode === 'draw') {
        this.draw()
      } else {
        this.getAnswer()
      }
      // if (this.indexClient) {
      //   this.indexClient.query(this.prompt).then(res => {
      //     this.getAnswer(res)
      //   }).catch((err) => {
      //     this.getAnswer()
      //   })
      // } else {
      //   this.getAnswer()
      // }

    },
    scrollBottom () {
      const _this = this
      this.$nextTick(() => {
        _this.$refs.messageList.scrollTop = _this.$refs.messageList.scrollHeight + 20;
      })
      
    },
    draw () {

      const currentMsg = {
        "user": "AI", "message": '', img: null, viewMode: 'image'
      }
      const query = this.prompt
      const negative_prompt = this.negative_prompt
      const _this = this
      const messages = this.message
      messages.push({ "user": "User", "message": 'prompt: <br/>' + this.prompt + (negative_prompt ? '<br/>' + 'negative_prompt: </br>' + negative_prompt : '')   })

      messages.push(currentMsg)

      this.loading = true
      // this.prompt = ''
      this.scrollBottom()
      const config = JSON.parse(JSON.stringify(this.config)) 
      config.width = this.width
      config.height = this.height
      config.steps = this.steps
      config.sampler = this.sampler

      SDApi.draw(config, query, negative_prompt).then(res => {

        _this.loading = false
        _this.saveHistory()
        console.info('close')
        currentMsg.img = res

        messages.splice(messages.length - 1, 1)
        messages.push(currentMsg)
        _this.scrollBottom()
        

      }).catch(err => {
        _this.loading = false
      })
    },
    getAnswer(context) {
      this.loading = true
      const _this = this
      const messages = this.message
      const currentMsg = {
        "user": "AI", "message": ''
      }
      messages.push({ "user": "User", "message": this.prompt })
      messages.push(currentMsg)
      _this.$refs.messageList.scrollTop = _this.$refs.messageList.scrollHeight;
      const newPrompt = this.prompt
      console.info(this.prompt)
      console.info(newPrompt)
      this.prompt = ''
      
      this.client.createCompletion(
        newPrompt,
        this.message,
        context,
        {
          onmessage: (msg, isPart) => {
            // _this.set(_this.message, id, currentMsg)
            if (isPart) {
              currentMsg.message += msg
            } else {
              currentMsg.message = msg
            }

            messages.splice(messages.length - 1, 1)
            messages.push(currentMsg)
            _this.$refs.messageList.scrollTop = _this.$refs.messageList.scrollHeight;
            // console.info(currentMsg.message)
          },
          onclose: () => {
            _this.loading = false
            _this.saveHistory()
            console.info('close')
            if(_this.autoSpeech) {
              _this.speak()
            }
          },
          onerror: (err) => {
            debugger
            _this.loading = false
            console.info(err)
          }
        })
    },
    getAppInfo() {


      const data = Config.getData().data
      this.name = data.name
      document.title = this.name
      if (data.ext) {
        const config = data.ext
        
        this.config = config
        if (config.default_prompt) {
          this.prompt = config.default_prompt
        }
        if (config?.auto_speech??false) {
          this.autoSpeech = true
          this.initSpeaker()
        }
        if (config?.welcome_text && config?.welcome_text.length > 0 && this.message.length === 0) {
          this.message.push({
            "user": "AI", 
            "message": config.welcome_text
          })
        }
        this.showProfileSetting = config?.show_profile_setting??false

        this.initAIClient()
        console.info(config)
      }
    },
    recoveryHistory() {
      const cacheKey = 'history_' + this.id
      const data = localStorage.getItem(cacheKey)
      if (data) {
        this.message = JSON.parse(data)
      }
    },
    saveHistory() {
      const cacheKey = 'history_' + this.id
      if (this.message.length > this.maxHistory) {
        const tmpHistory = []
        const start = this.message.length - this.maxHistory
        const end = this.message.length
        for (let id = start; id < end; id++) {
          tmpHistory.push(this.message[id])
        }
        localStorage.setItem(cacheKey, JSON.stringify(tmpHistory))
      } else {
        localStorage.setItem(cacheKey, JSON.stringify(this.message))
      }

    },
    cleanHistory() {
      this.message = []
      this.saveHistory()
    },
    initSpeaker () {
      window.speechSynthesis.cancel()
      this.speech = new SpeechSynthesisUtterance();
      this.speech.onend = () => {
        console.log("语音播报结束")
        this.speaking = false
      }
    },
    speak () {
       this.speaking = true
        const content = this.message[this.message.length - 1].message
        if (content && content.length > 1) {
          // var utterThis = new SpeechSynthesisUtterance(text);
          this.speech.text = content;
          console.info('speak ' + content)
          // speech.lang = 'zh';//汉语
          window.speechSynthesis.speak(this.speech);
        }
        
    },
    stop () {
      this.client.close()
    },
    copyAsPrompt (message) {
      this.prompt = message
    }
  },
  mounted() {
    this.id = this.$route?.params?.id
    this.recoveryHistory()
    this.getAppInfo()
    // this.getAvatar()
  }

};
</script>


<style>
.text-wrapper {
  white-space: pre-wrap;
}
.vuepress-markdown-body {
  padding: 16px !important;
}
</style>