App.vue

<template>
  <div class="w-full h-screen">
    <!-- toolbar -->
    <div class="w-full h-14 pt-2 border-b-2 shadow-2xl fixed bg-slate-200 flex items-center">
      
      <div class="flex-none w-1/3">

      </div>
      <div class="flex-none w-1/3 text-center">
        <span class="leading-10 font-bold">{{ name }} {{ config?.mode === 'completions' ? '（无上下文）' : '' }}</span>

      </div> 
      <div class="flex-none w-1/3 *:ml-4 *:text-gray-600 *:hover:text-gray-900 text-sm float-right flex justify-end pr-4">
        <button @click="page='chat'">Chat</button>
        <button @click="page='content'">知识库</button>
        <button>设置</button>

        <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  cursor-pointer inline" @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>
      
      
     
    </div>
    <!-- main content -->
    <div class="flex w-full h-full pt-14">
      
      
      <div v-if="page === 'content'" class="w-full bg-slate-300 md:bg-slate-300 p-2 sm:p-8">
        <content/>
      </div>
      <!-- right -->
      <div class="flex-auto bg-slate-300 md:bg-slate-300 p-2 sm:p-8" v-else>

        

        <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-24 p-4 overflow-y-auto overflow-x-hidden" ref="messageList">
            <div v-for="(item,index) 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 text-sm" @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="w-[512px]"/>
                  </template>
                  <template v-else-if="item.message && item.message.length > 5">
                    <p class="text-sm">
                      {{ item.message }}
                    </p>
                    <!-- <markdown-it-vue class="md-body" content="123" :options="mdOptions" :key="index" v-if="item.message"/> -->

                  </template>
                  <p class="text-sm" v-else>思考中...</p>
                  
                </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 border-0" v-on:keyup.enter="query" placeholder="提示词" />

                <t-dropdown :options="options" @click="clickHandler" class="ml-4 mt-1" v-if="mode === 'draw'">
                  <t-button theme="default" variant="text" shape="square"> 
                    <t-icon :name="modeImage" size="24" class="w-6 h-6 text-cyan-800 font-bold hover:text-cyan-600 cursor-pointer"/>
                  </t-button>
                </t-dropdown>
              
                <!-- <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="mode === 'draw'">
                <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 InsCodeAI from './js/inscodeai.js'

import SDApi from './js/sd.js'
import StorageApi from './js/storage.js'
import PodsApi from './js/pod.js'
import RepEs from './js/repEs.js'
import { MessagePlugin } from 'tdesign-vue-next';

import Content from './components/content/index.vue'


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

// const DataServe = new Data()

export default {
  name: 'LlmApp',
  components: {
    MarkdownItVue, Content
  },
  data() {
    return {
      page: '',
      id: 0,
      name: '加载中...',
      userAvatarList: [],
      robotAvatarList: [],
      mode: 'chat',
      modeImage: 'image', // image chat chart-bubble
      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: {
      },
      sdServerType: 'common',
      sdServerTypeOptions: [
        { label: '公共服务器', value: 'common' },
        { label: '私有服务器', value: 'private' },
      ],
      sdServerUrl: '',
      loading: false,
      maxHistory: 200,
      speaking: false, // 是否正在输出语音
      autoSpeech: false, // 是否自动开始语音
      speech: null, // 语音object
      options: [
        { content: '绘图模式', value: 'draw' },
        { content: '聊天模式', value: 'chat' },
        { content: '自动模式', value: 'auto' },
      ],
      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: 'nfsw, 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',
      history: {
        name: 'ai',
        key: 'history',
      },
      mdOptions: {
        markdownIt: {
          linkify: true
        },
        linkAttributes: {
          attrs: {
            target: '_blank',
            rel: 'noopener'
          }
        }
      }
    }
  },
  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)
      this.client = new InsCodeAI(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
      }
      
      this.loading = true


      if (this.mode === 'draw') {
        this.draw()
      } else {


        const _this = this
        const messages = this.message
        const currentMsg = {
          "user": "AI", "message": ''
        }
        const newPrompt = this.prompt
        this.prompt = ''
        messages.push({ "user": "User", "message": newPrompt })
        messages.push(currentMsg)
        _this.$refs.messageList.scrollTop = _this.$refs.messageList.scrollHeight;
        
        if (this.indexClient) {
          this.indexClient.query(newPrompt).then(res => {
            this.getAnswer(res, newPrompt, currentMsg)
          }).catch((err) => {
            this.getAnswer(null, newPrompt, currentMsg)
          })
        }else {
          this.getAnswer(null, newPrompt, currentMsg)
        }
      }
      // 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 () {

      this.loading = true
      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
      const content = 'prompt: <br/>' + 
                        this.prompt + 
                        (negative_prompt ? '<br/><br/>' + 'negative_prompt: </br>' + negative_prompt : '') + '<br/><br/>' +
                        'width: ' + this.width + ' height: ' + this.height + '<br/>steps: ' + this.steps +'<br/>sampler: ' + this.sampler 
      messages.push({ "user": "User", "message": content })

      messages.push(currentMsg)

      // 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
      config.sd_api = this.sdServerUrl

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

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

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

      }).catch(err => {
        _this.loading = false
      })
    },
    getAnswer(context = null, prompt = null, currentMsg = null) {


      const newPrompt = prompt ? prompt : this.prompt
      const _this = this
      this.config.api_url = this.sdServerUrl
      const messages = this.message
      this.scrollBottom()
      this.client.createCompletion(
        newPrompt,
        this.message,
        context,
        {
          onmessage: (msg, isPart) => {
            // _this.set(_this.message, id, currentMsg)
            // console.info(msg)
            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) => {
            _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
        
        console.info(config)
      }
    },
    recoveryHistory() {

      StorageApi.get(this.history.name).then(data => {
        if (data && data.data) {
          const historyMessage = JSON.parse(data.data)
          if (historyMessage !== null && historyMessage.length > 0) {
            this.message = historyMessage
          }
          
        }
      })      
    },
    saveHistory() {
      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])
        }
        StorageApi.put(this.history.name, JSON.stringify(tmpHistory))
      } else {
        StorageApi.put(this.history.name, 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
    },
    handleSDServerTypeChange (type) {
      
      if (type === 'common') {
        
        this.sdServerUrl = this.config.common_gpt_url
      }
      this.saveConfig()
    },
    recoverConfig () {
      const config = localStorage.getItem('ai-docs-config')
      
      if (config) {
        const configJSON = JSON.parse(config)
        this.config = configJSON
        this.sdServerUrl = configJSON.sdServerUrl
        this.sdServerType = configJSON.sdServerType??'common'

        const data = Config.getData().data
        this.name = data.name
        document.title = this.name

        
        if (data.ext) {
          if (data.ext.common_gpt_url && this.sdServerType === 'common') {
            this.config.common_gpt_url = data.ext.common_gpt_url
            this.sdServerUrl = data.ext.common_gpt_url
          }
          
          if (data.ext.api_prompt_prefix) {
            this.config.api_prompt_prefix = data.ext.api_prompt_prefix
          }
          this.config.prompt_template = data.ext.prompt_template
          this.config.welcome_text = data.ext.welcome_text
          this.config.temperature = data.ext?.temperature??0.7
        }
        

      } else {
        
        this.getAppInfo()
        this.sdServerUrl = this.config.common_gpt_url
        this.sdServerType = 'common'
        
      }
    },
    saveConfig () {
      
      const config = JSON.parse(JSON.stringify(this.config))
      config.sdServerType = this.sdServerType
      config.sdServerUrl = this.sdServerUrl
      config.sdServerType = this.sdServerType
      localStorage.setItem('ai-docs-config', JSON.stringify(config))
    },
    getPods () {

      PodsApi.getPods().then(res => {


      })
    },
    initChat() {
      
      this.initAIClient()
      this.initIndexClient()
      const config = this.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,
          "ignore": true,
        })
      }
      this.showProfileSetting = config?.show_profile_setting??false

    }
  },
  mounted() {
    this.id = this.$route?.params?.id
    StorageApi.init(this.history.name).then(res => {
      this.recoveryHistory()
    })
    this.recoverConfig()
    // this.getAvatar()
    if (this.mode === 'chat') {
      this.initChat()
    }
  } 

};
</script>


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