olivebot/gui/templates/index.html
莣仔 fa92b8e124 年翻更新
1、接口新增错误处理机制;
2、nlp_gpt代码重构;
3、首页新增服务器麦克风控制;
4、首页新增服务器扬声器控制;
5、优化socket10001映射到websocket连接;
6、新增未启动时也可以在控制台输入exit进行关闭;
7、新增10002数字人接口传入Output参数可设定不合成音频;
8、处理音色接口格式报错问题;
9、取消edge_tts版本限定;
10、优化手动采纳错误处理。
2024-11-13 18:01:03 +08:00

121 lines
4.6 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Fay数字人</title>
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}" />
<script src="{{ url_for('static',filename='js/vue.js') }}"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/index.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.15.6/lib/theme-chalk/index.css" />
<script src="{{ url_for('static',filename='js/index.js') }}" defer></script>
</head>
<body >
<div id="app" class="main_bg">
<div class="main_left">
<div class="main_left_logo" ><img src="{{ url_for('static',filename='images/logo.png') }}" alt="">
</div>
<div class="main_left_menu">
<ul>
<li class="changeImg"><a href="/"><span class="iconimg1">消息</span></a></li>
<li class="changeImg2"><a href="/setting"><span class="iconimg2">设置</span></a></li>
</ul>
</div>
<div class="main_left_emoji"><img style="padding-top: 60px; max-width: 140px;" :src="robot" alt="" >
</div>
</div>
<div class="main_right">
<div class="top_info"><span class="top_info_text">消息:</span>[[panelMsg]]</div>
<!-- 以上是即时信息显示 -->
<div class="chatmessage">
<div class="chat-container" id="user0" >
<div v-for="(item, index) in messages" :key="index" >
<div class="message receiver-message" v-if="item.type == 'fay'">
<img class="avatar" src="{{ url_for('static',filename='images/Fay_send.png') }}" alt="接收者头像">
<div class="message-content">
<div class="message-bubble">[[item.content]]</div>
<div class="message-time"><span class="what-time">[[item.timetext]]</span>
<div v-if="item.is_adopted == 0" class="adopt-button" @click="adoptText(item.id)">
<img src="{{ url_for('static',filename='images/adopt.png') }}" alt="采纳图标" class="adopt-img" />
</div>
<div v-else class="adopt-button">
<img src="{{ url_for('static',filename='images/adopted.png') }}" alt="采纳图标" class="adopt-img" />
</div>
</div>
</div>
</div>
<div class="message sender-message" v-else>
<div class="message-content">
<div class="sender-message message-bubble">[[item.content]]</div>
<div class="sender-message-time">[[item.timetext]]</div>
</div>
<img class="avatar" src="{{ url_for('static',filename='images/User_send.png') }}" alt="发送者头像">
</div>
</div>
<div >
</div>
</div>
</div>
<!-- 以上是聊天对话 -->
<div class="inputmessage">
<div class="inputmessage_voice" >
<img v-if="!source_record_enabled" src="{{ url_for('static',filename='images/recording.png') }}" alt="" @click=changeRecord() >
<img v-else src="{{ url_for('static',filename='images/record.png') }}" alt="" @click=changeRecord() >
</div>
<div class="inputmessage_input"> <textarea class="text_in" placeholder="请输入内容" v-model="newMessage" @keyup.enter="sendMessage" style="padding-top: 13px;"></textarea></div>
<div class="inputmessage_send"><img src="{{ url_for('static',filename='images/send.png') }}" alt="发送信息" @click="sendMessage"></div>
<div v-if="liveState == 1" class="inputmessage_open">
<img v-if="!play_sound_enabled" src="{{ url_for('static',filename='images/sound_off.png') }}" @click=changeSound() >
<img v-else src="{{ url_for('static',filename='images/sound_on.png') }}" @click=changeSound() >
</div>
<div v-else class="inputmessage_open">
<img src="{{ url_for('static',filename='images/open.png') }}" @click=startLive() >
</div>
</div>
<div class="Userchange">
<div class="tag-container">
<div class="tag" v-for="user in userList" :key="user[0]" :class="{'selected': selectedUser && selectedUser[0] === user[0]}" @click="selectUser(user)">
[[ user[1] ]]
</div>
</div>
</div>
</div>
<!-- 以上是多用户切换 -->
</div>
</div>
</body>