2023-12-12 00:03:36 +08:00
|
|
|
<!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">
|
|
|
|
|
|
|
|
|
|
<!-- index.css -->
|
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static',filename='css/index.css') }}">
|
|
|
|
|
</link>
|
|
|
|
|
<!-- <link rel="stylesheet" href="./css/index.css"> -->
|
|
|
|
|
<!-- 引入element-ui样式 -->
|
|
|
|
|
<!-- <link rel="stylesheet" href="./css/element.css"> -->
|
|
|
|
|
<link rel="stylesheet" href="{{ url_for('static',filename='css/element.css') }}">
|
|
|
|
|
</link>
|
|
|
|
|
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
|
|
|
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css">
|
|
|
|
|
|
|
|
|
|
<title>Fay</title>
|
|
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<div id="app">
|
|
|
|
|
<div class="main">
|
|
|
|
|
<div class="title">
|
|
|
|
|
<h2>Fay数字人Agent版</h2>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="main_box">
|
|
|
|
|
<div class="left">
|
|
|
|
|
<div class="left_top">
|
|
|
|
|
<p class="left_top_p">人设：</p>
|
|
|
|
|
<div class="character">
|
|
|
|
|
<div class="character_top">
|
|
|
|
|
<div class="character_left">
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<p>姓名：</p>
|
|
|
|
|
<el-input v-model="attribute_name" placeholder="请输入内容"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>性别：</p>
|
|
|
|
|
<el-input v-model="attribute_gender" placeholder="请输入内容"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>年龄：</p>
|
|
|
|
|
<el-input v-model="attribute_age" placeholder="请输入内容"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
|
|
|
|
|
<li>
|
|
|
|
|
<p>出生地：</p>
|
|
|
|
|
<el-input v-model="attribute_birth" placeholder="请输入内容"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>生肖：</p>
|
|
|
|
|
<el-input v-model="attribute_zodiac" placeholder="请输入内容"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>星座：</p>
|
|
|
|
|
<el-input v-model="attribute_constellation" placeholder="请输入内容"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>职业：</p>
|
|
|
|
|
<el-input v-model="attribute_job" placeholder="请输入内容"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>联系方式：</p>
|
|
|
|
|
<el-input v-model="attribute_contact" placeholder="请输入内容"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>喜好：</p>
|
|
|
|
|
<el-input v-model="attribute_hobby" placeholder="请输入内容"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="character_right">
|
|
|
|
|
<ul>
|
|
|
|
|
<li>
|
|
|
|
|
<p>使用面板播放：</p>
|
|
|
|
|
<el-switch v-model="play_sound_enabled" active-color="#13ce66"
|
|
|
|
|
inactive-color="#ff4949">
|
|
|
|
|
</el-switch>
|
|
|
|
|
</li>
|
|
|
|
|
<br>
|
|
|
|
|
<li>
|
|
|
|
|
<p>声音选择：{{attribute_voice}}</p>
|
|
|
|
|
<el-select v-model="attribute_voice" placeholder="请选择">
|
|
|
|
|
<el-option v-for="item in voice_list" :key="item.value"
|
|
|
|
|
:label="item.label" :value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</li>
|
|
|
|
|
<br>
|
|
|
|
|
<li >
|
|
|
|
|
<el-button style="margin-left: 55px;width: 135px;" type="success" class="btn_open"
|
|
|
|
|
@click=postControlEyes()><i class="fas fa-eye"></i> Fay Eyes</el-button>
|
|
|
|
|
</li>
|
|
|
|
|
<br>
|
|
|
|
|
<li>
|
|
|
|
|
<p>唤醒模式：</p>
|
|
|
|
|
<el-switch v-model="wake_word_enabled" active-color="#13ce66"
|
|
|
|
|
inactive-color="#ff4949">
|
|
|
|
|
</el-switch>
|
|
|
|
|
</li>
|
|
|
|
|
<li>
|
|
|
|
|
<p>唤醒词：</p>
|
|
|
|
|
<el-input style="width: 250px;" v-model="wake_word" placeholder="请输入内容（以,隔开）"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="left_box">
|
|
|
|
|
<p> </p>
|
|
|
|
|
<div class="source">
|
|
|
|
|
<ul>
|
|
|
|
|
|
|
|
|
|
<li class="url">
|
|
|
|
|
<el-switch v-model="source_record_enabled" active-color="#13ce66"
|
|
|
|
|
inactive-color="#ff4949">
|
|
|
|
|
</el-switch>
|
|
|
|
|
<p>麦克风</p>
|
|
|
|
|
<el-select v-model="source_record_device" placeholder="请选择">
|
|
|
|
|
<el-option v-for="item in device_list" :key="item.value" :label="item.label"
|
|
|
|
|
:value="item.value">
|
|
|
|
|
</el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="url">
|
|
|
|
|
|
|
|
|
|
<p style="margin-left: 40px">消 息</p>
|
|
|
|
|
<el-input v-model="panel_msg" :disabled="true"></el-input>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="but">
|
|
|
|
|
<el-button v-if="live_state == 1" type="success" class="btn_close"
|
|
|
|
|
style="width:200px" @click=postStopLive()>关闭（运行中）</el-button>
|
|
|
|
|
<el-button v-else-if="live_state == 2" type="primary" plain disabled
|
|
|
|
|
style="width:200px">正在开启...</el-button>
|
|
|
|
|
<el-button v-else-if="live_state == 3" type="success" plain disabled
|
|
|
|
|
style="width:200px">正在关闭...</el-button>
|
|
|
|
|
<el-button v-else type="primary" style="width:200px" class="btn_open"
|
|
|
|
|
@click=postStartLive()>开启</el-button>
|
|
|
|
|
<el-button type="button" style="width:200px" @click=postData()>保存配置</el-button>
|
|
|
|
|
</li>
|
|
|
|
|
<li class="p_red" >
|
|
|
|
|
<p v-if="is_connect" style="color: #67c23a;"> 数字人：已连接 </p>
|
|
|
|
|
<p v-else > 数字人：未连接 </p>
|
|
|
|
|
</li>
|
|
|
|
|
</ul>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="right">
|
|
|
|
|
<div class="right_main">
|
|
|
|
|
<div class="container">
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
2023-12-25 22:13:09 +08:00
|
|
|
<div v-for="(item, index) in msg_list" :key="index">
|
|
|
|
|
|
|
|
|
|
<div class="item item-center"><span>[[item.timetext]]</span></div>
|
2023-12-12 00:03:36 +08:00
|
|
|
|
2023-12-25 22:13:09 +08:00
|
|
|
<div class="item item-left" v-if="item.type == 'fay'">
|
|
|
|
|
<div class="avatar"><img src="{{ url_for('static',filename='to.jpg') }}" />
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bubble bubble-left">[[item.content]]
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<div class="item item-right" v-else>
|
|
|
|
|
<div class="bubble bubble-right" >[[item.content]]<div v-if="loading && index === msg_list.length - 1" class="spinner"></div></div>
|
|
|
|
|
<div class="avatar"><img src="{{ url_for('static',filename='from.jpg') }}" />
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
2023-12-12 00:03:36 +08:00
|
|
|
<div class="input-area">
|
|
|
|
|
<textarea v-model="send_msg" name="text" id="textarea" placeholder="发送些内容给Fay..."></textarea>
|
|
|
|
|
<div class="button-area">
|
|
|
|
|
<button id="send-btn" @click="send()">Fay</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</body>
|
|
|
|
|
<!-- 开发环境vue.js -->
|
|
|
|
|
<script src="{{ url_for('static',filename='js/vue.js') }}"></script>
|
|
|
|
|
<!-- 发行环境vue.js -->
|
|
|
|
|
<!-- <script src="https://cdn.jsdelivr.net/npm/vue@2"></script> -->
|
|
|
|
|
<!-- 引入element-ui组件库 -->
|
|
|
|
|
<!-- <script src="./js/element.js"></script> -->
|
|
|
|
|
<script src="{{ url_for('static',filename='js/element.js') }}"></script>
|
|
|
|
|
<!-- index.js -->
|
|
|
|
|
<!-- <script src="./js/index.js"></script> -->
|
|
|
|
|
<!-- <script src="./js/self-adaption.js"></script> -->
|
|
|
|
|
|
|
|
|
|
<script src="{{ url_for('static',filename='js/index.js') }}"></script>
|
|
|
|
|
<script src="{{ url_for('static',filename='js/self-adaption.js') }}"></script>
|
|
|
|
|
|
|
|
|
|
</html>
|
