olivebot/gui/templates/index.html
xszyou 732e7e3b61 2023.02
1、集成live2d看板娘;
2、修改ngrok穿透是否开启的判断逻辑;
2023-02-03 18:46:12 +08:00

248 lines
14 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!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">
<script src="/static/live2d/autoload.js"></script>
<title>自动商品介绍控制器</title>
</head>
<body>
<div id="app">
<div class="main">
<div class="title">
<h2>Fay控制器2.0</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_hobby" placeholder="请输入内容"></el-input>
</li>
<li>
<p>联系方式:</p>
<el-input v-model="attribute_contact" placeholder="请输入内容"></el-input>
</li>
</ul>
</div>
<div class="character_right">
<ul>
<li>
<p>送礼敏感度:</p>
<el-slider v-model="interact_perception_gift"></el-slider>
</li>
<li>
<p>关注敏感度:</p>
<el-slider v-model="interact_perception_follow"></el-slider>
</li>
<li>
<p>进入敏感度:</p>
<el-slider v-model="interact_perception_join"></el-slider>
</li>
<li>
<p>留言敏感度:</p>
<el-slider v-model="interact_perception_chat"></el-slider>
</li>
<li>
<p>冷场敏感度:</p>
<el-slider v-model="interact_perception_indifferent"></el-slider>
</li>
<li>
<p>单次互动时长:</p>
<el-input-number v-model="interact_maxInteractTime" @change="handleChange" :min="1" :max="60" label="描述文字"></el-input-number>
<span style=" padding-left: 10px;
line-height: 40px;"></span>
</li>
<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>
<p>使用面板播放:</p>
<el-switch v-model="play_sound_enabled" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</li>
</ul>
</div>
</div>
<div class="character_box">
<p>Q&A文件</p>
<el-input v-model="interact_QnA" placeholder="请输入内容"></el-input>
<!-- <el-upload class="upload-demo" action="http://127.0.0.1:5000/"-->
<!-- :on-success="handlePreview">-->
<!-- <el-input v-model="interact_QnA" placeholder="请输入内容"></el-input>-->
<!-- </el-upload>-->
</div>
</div>
</div>
<div class="left_box">
<p>&nbsp;</p>
<div class="source">
<ul>
<li class="url">
<el-switch v-model="source_liveRoom_enabled" active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
<p>抖 音</p>
<el-input v-model="source_liveRoom_url" placeholder="请输入内容"></el-input>
</li>
<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>注:启动后请选中场景客户端,让其前端运行,否则可能会卡顿,或者无声音。</p>
</li>
</ul>
</div>
</div>
</div>
<div class="right">
<div class="right_main">
<el-tabs v-model="activeName" type="card" @tab-click="handleClick" editable @edit="handleTabsEdit">
<el-tab-pane :label="'商品'+(index+1)" :name="itme.tab_name" v-for="(itme, index) in items_data" :key="index">
<ul>
<li>
<p>名称:</p>
<el-input v-model='itme.name' placeholder="请输入内容"></el-input>
</li>
<li>
<p>商品简介:</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.intro'>
</el-input>
</li>
<li>
<p>使用场景:</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.usage'>
</el-input>
</li>
<li>
<p>售价说明:</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.price'>
</el-input>
</li>
<li>
<p>促销:</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.discount'>
</el-input>
</li>
<li>
<p>主播担保:</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.promise'>
</el-input>
</li>
<li>
<p>商品特点:</p>
<el-input type="textarea" :rows="3" placeholder="请输入内容" v-model='itme.explain.character'>
</el-input>
</li>
<li>
<p>展示视频:</p>
<el-input v-model="itme.demoVideo" placeholder="请输入内容"></el-input>
</li>
<li>
<p>Q&A文件</p>
<el-input v-model="itme.QnA" placeholder="请输入内容"></el-input>
</li>
<li>
<p>是否启用:</p>
<el-switch v-model='itme.enabled' active-color="#13ce66" inactive-color="#ff4949">
</el-switch>
</li>
</ul>
</el-tab-pane>
</el-tabs>
<br v-if="items_data.length==0">
</div>
</div>
</div>
</div>
</div>
</body>
<!-- 开发环境vue.js -->
<script src="{{ url_for('static',filename='js/vue.js') }}"></script>
<!--<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/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>