olivebot/gui/templates/index.html
guo zebin 4cfad5ae0f 年翻更新
- 全新ui
- 全面优化websocket逻辑,提高数字人和ui连接的稳定性及资源开销
- 全面优化唤醒逻辑,提供稳定的普通唤醒模式和前置词唤醒模式
- 优化拾音质量,支持多声道麦克风拾音
- 优化自动播放服务器的对接机制,提供稳定和兼容旧版ue工程的对接模式
- 数字人接口输出机器人表情,以适应新fay ui及单片机的数字人表情输出
- 使用更高级的音频时长计算方式,可以更精准控制音频播放完成后的逻辑
- 修复点击关闭按钮会导致程序退出的bug
- 修复没有麦克风的设备开启麦克风会出错的问题
- 为服务器主机地址提供配置项,以方便服务器部署
2024-10-26 11:34:55 +08:00

107 lines
3.8 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">[[item.timetext]]</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 src="{{ url_for('static',filename='images/voice.png') }}" alt="" style="filter: grayscale(100%);" ></div>
<div class="inputmessage_input"> <textarea class="text_in" placeholder="请输入内容" v-model="newMessage" @keyup.enter="sendMessage"></textarea></div>
<div class="inputmessage_send"><img src="{{ url_for('static',filename='images/send.png') }}" alt="发送信息" @click="sendMessage"></div>
<div class="inputmessage_open">
<img v-if="liveState == 1" src="{{ url_for('static',filename='images/close.png') }}" @click=stopLive() >
<img v-else 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>