Merge pull request #1692 from WilliamZhang06/web
[WebSocket] added online web client, test=docpull/1694/head
commit
258e7e251f
@ -0,0 +1,22 @@
|
||||
#!/usr/bin/env python3
|
||||
# -*- coding: utf-8 -*-
|
||||
|
||||
# Copyright 2021 Mobvoi Inc. All Rights Reserved.
|
||||
# Author: zhendong.peng@mobvoi.com (Zhendong Peng)
|
||||
|
||||
import argparse
|
||||
|
||||
from flask import Flask, render_template
|
||||
|
||||
parser = argparse.ArgumentParser(description='training your network')
|
||||
parser.add_argument('--port', default=19999, type=int, help='port id')
|
||||
args = parser.parse_args()
|
||||
|
||||
app = Flask(__name__)
|
||||
|
||||
@app.route('/')
|
||||
def index():
|
||||
return render_template('index.html')
|
||||
|
||||
if __name__ == '__main__':
|
||||
app.run(host='0.0.0.0', port=args.port, debug=True)
|
File diff suppressed because one or more lines are too long
@ -0,0 +1,453 @@
|
||||
/*
|
||||
* @Author: baipengxia
|
||||
* @Date: 2021-03-12 11:44:28
|
||||
* @Last Modified by: baipengxia
|
||||
* @Last Modified time: 2021-03-12 15:14:24
|
||||
*/
|
||||
|
||||
/** COMMON RESET **/
|
||||
* {
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
}
|
||||
|
||||
body,
|
||||
h1,
|
||||
h2,
|
||||
h3,
|
||||
h4,
|
||||
h5,
|
||||
h6,
|
||||
hr,
|
||||
p,
|
||||
dl,
|
||||
dt,
|
||||
dd,
|
||||
ul,
|
||||
ol,
|
||||
li,
|
||||
fieldset,
|
||||
lengend,
|
||||
button,
|
||||
input,
|
||||
textarea,
|
||||
th,
|
||||
td {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
color: #000;
|
||||
}
|
||||
|
||||
body {
|
||||
font-size: 14px;
|
||||
}
|
||||
html, body {
|
||||
min-width: 1200px;
|
||||
}
|
||||
|
||||
button,
|
||||
input,
|
||||
select,
|
||||
textarea {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
ul,
|
||||
ol,
|
||||
li {
|
||||
list-style: none;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
a:hover {
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
fieldset,
|
||||
img {
|
||||
border: none;
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
}
|
||||
|
||||
i {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
label {
|
||||
position: inherit;
|
||||
}
|
||||
|
||||
.clearfix:after {
|
||||
content: ".";
|
||||
display: block;
|
||||
height: 0;
|
||||
clear: both;
|
||||
visibility: hidden;
|
||||
}
|
||||
|
||||
.clearfix {
|
||||
zoom: 1;
|
||||
display: block;
|
||||
}
|
||||
|
||||
html,
|
||||
body {
|
||||
font-family: Tahoma, Arial, 'microsoft yahei', 'Roboto', 'Droid Sans', 'Helvetica Neue', 'Droid Sans Fallback', 'Heiti SC', 'Hiragino Sans GB', 'Simsun', 'sans-self';
|
||||
}
|
||||
|
||||
|
||||
|
||||
.audio-banner {
|
||||
width: 100%;
|
||||
overflow: auto;
|
||||
padding: 0;
|
||||
background: url('../image/voice-dictation.svg');
|
||||
background-size: cover;
|
||||
}
|
||||
.weaper {
|
||||
width: 1200px;
|
||||
height: 155px;
|
||||
margin: 72px auto;
|
||||
}
|
||||
.text-content {
|
||||
width: 670px;
|
||||
height: 100%;
|
||||
float: left;
|
||||
}
|
||||
.text-content .title {
|
||||
font-size: 34px;
|
||||
font-family: 'PingFangSC-Medium';
|
||||
font-weight: 500;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
line-height: 48px;
|
||||
}
|
||||
.text-content .con {
|
||||
font-size: 16px;
|
||||
font-family: PingFangSC-Light;
|
||||
font-weight: 300;
|
||||
color: rgba(255, 255, 255, 1);
|
||||
line-height: 30px;
|
||||
}
|
||||
.img-con {
|
||||
width: 416px;
|
||||
height: 100%;
|
||||
float: right;
|
||||
}
|
||||
.img-con img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
.con-container {
|
||||
margin-top: 34px;
|
||||
}
|
||||
|
||||
.audio-advantage {
|
||||
background: #f8f9fa;
|
||||
}
|
||||
.asr-advantage {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.asr-advantage h2 {
|
||||
text-align: center;
|
||||
font-size: 22px;
|
||||
padding: 30px 0 0 0;
|
||||
}
|
||||
.asr-advantage > ul > li {
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.asr-advantage > ul > li .icons{
|
||||
margin-top: 10px;
|
||||
margin-bottom: 20px;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
}
|
||||
.service-item-content {
|
||||
margin-top: 35px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
.service-item-content img {
|
||||
width: 160px;
|
||||
vertical-align: bottom;
|
||||
}
|
||||
.service-item-content > li {
|
||||
box-sizing: border-box;
|
||||
padding: 0 16px;
|
||||
width: 33%;
|
||||
text-align: center;
|
||||
margin-bottom: 35px;
|
||||
}
|
||||
.service-item-content > li .service-item-content-title {
|
||||
line-height: 1.5;
|
||||
font-weight: 700;
|
||||
margin-top: 10px;
|
||||
}
|
||||
.service-item-content > li .service-item-content-desc {
|
||||
margin-top: 5px;
|
||||
line-height: 1.8;
|
||||
color: #657384;
|
||||
}
|
||||
|
||||
|
||||
.audio-scene-con {
|
||||
width: 100%;
|
||||
padding-bottom: 84px;
|
||||
background: #fff;
|
||||
}
|
||||
.audio-scene {
|
||||
overflow: auto;
|
||||
width: 1200px;
|
||||
background: #fff;
|
||||
text-align: center;
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
}
|
||||
.audio-scene h2 {
|
||||
padding: 30px 0 0 0;
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.audio-experience {
|
||||
width: 100%;
|
||||
height: 538px;
|
||||
background: #fff;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
overflow: auto;
|
||||
}
|
||||
.asr-box {
|
||||
width: 1200px;
|
||||
height: 394px;
|
||||
margin: 64px auto;
|
||||
}
|
||||
.asr-box h2 {
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
margin-bottom: 64px;
|
||||
}
|
||||
.voice-container {
|
||||
position: relative;
|
||||
width: 1200px;
|
||||
height: 308px;
|
||||
background: rgba(255, 255, 255, 1);
|
||||
border-radius: 8px;
|
||||
border: 1px solid rgba(225, 225, 225, 1);
|
||||
}
|
||||
.voice-container .voice {
|
||||
height: 236px;
|
||||
width: 100%;
|
||||
border-radius: 8px;
|
||||
}
|
||||
.voice-container .voice textarea {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
border: none;
|
||||
outline: none;
|
||||
border-radius: 8px;
|
||||
padding: 25px;
|
||||
font-size: 14px;
|
||||
box-sizing: border-box;
|
||||
resize: none;
|
||||
}
|
||||
.voice-input {
|
||||
width: 100%;
|
||||
height: 72px;
|
||||
box-sizing: border-box;
|
||||
padding-left: 35px;
|
||||
background: rgba(242, 244, 245, 1);
|
||||
border-radius: 8px;
|
||||
line-height: 72px;
|
||||
}
|
||||
.voice-input .el-select {
|
||||
width: 492px;
|
||||
}
|
||||
.start-voice {
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
}
|
||||
.start-voice .time {
|
||||
margin-right: 25px;
|
||||
}
|
||||
.asr-advantage > ul > li {
|
||||
margin-bottom: 77px;
|
||||
}
|
||||
#msg {
|
||||
width: 100%;
|
||||
line-height: 40px;
|
||||
font-size: 14px;
|
||||
margin-left: 330px;
|
||||
}
|
||||
#captcha {
|
||||
margin-left: 350px !important;
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
.black {
|
||||
position: fixed;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.container {
|
||||
position: fixed;
|
||||
z-index: 6;
|
||||
top: 25%;
|
||||
left: 10%;
|
||||
}
|
||||
.audio-scene-con {
|
||||
width: 100%;
|
||||
padding-bottom: 84px;
|
||||
background: #fff;
|
||||
}
|
||||
#sound {
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
background: #147ede;
|
||||
padding: 10px;
|
||||
margin-top: 30px;
|
||||
margin-left: 135px;
|
||||
width: 176px;
|
||||
height: 30px !important;
|
||||
text-align: center;
|
||||
line-height: 30px !important;
|
||||
border-radius: 10px;
|
||||
}
|
||||
.con-ten {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
z-index: 5;
|
||||
background: #fff;
|
||||
opacity: 0.5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
.websocket-url {
|
||||
width: 320px;
|
||||
height: 20px;
|
||||
border: 1px solid #dcdfe6;
|
||||
line-height: 20px;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.voice-btn {
|
||||
color: #fff;
|
||||
background-color: #409eff;
|
||||
font-weight: 500;
|
||||
padding: 12px 20px;
|
||||
font-size: 14px;
|
||||
border-radius: 4px;
|
||||
border: 0;
|
||||
cursor: pointer;
|
||||
}
|
||||
.voice-btn.end {
|
||||
display: none;
|
||||
}
|
||||
.result-text {
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
}
|
||||
.voice-footer {
|
||||
border-top: 1px solid #dddede;
|
||||
background: #f7f9fa;
|
||||
text-align: center;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
font-size: 12px;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
/** line animate **/
|
||||
.time-box {
|
||||
display: none;
|
||||
margin-left: 10px;
|
||||
width: 300px;
|
||||
}
|
||||
.total-time {
|
||||
font-size: 14px;
|
||||
color: #545454;
|
||||
}
|
||||
.voice-btn.end.show,
|
||||
.time-box.show {
|
||||
display: inline;
|
||||
}
|
||||
.start-taste-line {
|
||||
margin-right: 20px;
|
||||
display: inline-block;
|
||||
}
|
||||
.start-taste-line hr {
|
||||
background-color: #187cff;
|
||||
width: 3px;
|
||||
height: 8px;
|
||||
margin: 0 3px;
|
||||
display: inline-block;
|
||||
border: none;
|
||||
}
|
||||
.hr {
|
||||
animation: note 0.2s ease-in-out;
|
||||
animation-iteration-count: infinite;
|
||||
animation-direction: alternate;
|
||||
}
|
||||
.hr-one {
|
||||
animation-delay: -0.9s;
|
||||
}
|
||||
.hr-two {
|
||||
animation-delay: -0.8s;
|
||||
}
|
||||
.hr-three {
|
||||
animation-delay: -0.7s;
|
||||
}
|
||||
.hr-four {
|
||||
animation-delay: -0.6s;
|
||||
}
|
||||
.hr-five {
|
||||
animation-delay: -0.5s;
|
||||
}
|
||||
.hr-six {
|
||||
animation-delay: -0.4s;
|
||||
}
|
||||
.hr-seven {
|
||||
animation-delay: -0.3s;
|
||||
}
|
||||
.hr-eight {
|
||||
animation-delay: -0.2s;
|
||||
}
|
||||
.hr-nine {
|
||||
animation-delay: -0.1s;
|
||||
}
|
||||
@keyframes note {
|
||||
from {
|
||||
transform: scaleY(1);
|
||||
}
|
||||
to {
|
||||
transform: scaleY(4);
|
||||
}
|
||||
}
|
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 432 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
After Width: | Height: | Size: 72 KiB |
After Width: | Height: | Size: 286 KiB |
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -0,0 +1,6 @@
|
||||
/*
|
||||
录音
|
||||
https://github.com/xiangyuecn/Recorder
|
||||
src: extensions/frequency.histogram.view.js
|
||||
*/
|
||||
!function(){"use strict";var t=function(t){return new e(t)},e=function(t){var e=this,r={scale:2,fps:20,lineCount:30,widthRatio:.6,spaceWidth:0,minHeight:0,position:-1,mirrorEnable:!1,stripeEnable:!0,stripeHeight:3,stripeMargin:6,fallDuration:1e3,stripeFallDuration:3500,linear:[0,"rgba(0,187,17,1)",.5,"rgba(255,215,0,1)",1,"rgba(255,102,0,1)"],stripeLinear:null,shadowBlur:0,shadowColor:"#bbb",stripeShadowBlur:-1,stripeShadowColor:"",onDraw:function(t,e){}};for(var a in t)r[a]=t[a];e.set=t=r;var i=t.elem;i&&("string"==typeof i?i=document.querySelector(i):i.length&&(i=i[0])),i&&(t.width=i.offsetWidth,t.height=i.offsetHeight);var o=t.scale,l=t.width*o,n=t.height*o,h=e.elem=document.createElement("div"),s=["","transform-origin:0 0;","transform:scale("+1/o+");"];h.innerHTML='<div style="width:'+t.width+"px;height:"+t.height+'px;overflow:hidden"><div style="width:'+l+"px;height:"+n+"px;"+s.join("-webkit-")+s.join("-ms-")+s.join("-moz-")+s.join("")+'"><canvas/></div></div>';var f=e.canvas=h.querySelector("canvas");e.ctx=f.getContext("2d");if(f.width=l,f.height=n,i&&(i.innerHTML="",i.appendChild(h)),!Recorder.LibFFT)throw new Error("需要lib.fft.js支持");e.fft=Recorder.LibFFT(1024),e.lastH=[],e.stripesH=[]};e.prototype=t.prototype={genLinear:function(t,e,r,a){for(var i=t.createLinearGradient(0,r,0,a),o=0;o<e.length;)i.addColorStop(e[o++],e[o++]);return i},input:function(t,e,r){var a=this;a.sampleRate=r,a.pcmData=t,a.pcmPos=0,a.inputTime=Date.now(),a.schedule()},schedule:function(){var t=this,e=t.set,r=Math.floor(1e3/e.fps);t.timer||(t.timer=setInterval(function(){t.schedule()},r));var a=Date.now(),i=t.drawTime||0;if(a-t.inputTime>1.3*e.stripeFallDuration)return clearInterval(t.timer),void(t.timer=0);if(!(a-i<r)){t.drawTime=a;for(var o=t.fft.bufferSize,l=t.pcmData,n=t.pcmPos,h=new Int16Array(o),s=0;s<o&&n<l.length;s++,n++)h[s]=l[n];t.pcmPos=n;var f=t.fft.transform(h);t.draw(f,t.sampleRate)}},draw:function(t,e){var r=this,a=r.set,i=r.ctx,o=a.scale,l=a.width*o,n=a.height*o,h=a.lineCount,s=r.fft.bufferSize,f=a.position,d=Math.abs(a.position),c=1==f?0:n,p=n;d<1&&(c=p/=2,p=Math.floor(p*(1+d)),c=Math.floor(0<f?c*(1-d):c*(1+d)));for(var u=r.lastH,v=r.stripesH,w=Math.ceil(p/(a.fallDuration/(1e3/a.fps))),g=Math.ceil(p/(a.stripeFallDuration/(1e3/a.fps))),m=a.stripeMargin*o,M=1<<(Math.round(Math.log(s)/Math.log(2)+3)<<1),b=Math.log(M)/Math.log(10),L=20*Math.log(32767)/Math.log(10),y=s/2,S=Math.min(y,Math.floor(5e3*y/(e/2))),C=S==y,H=C?h:Math.round(.8*h),R=S/H,D=C?0:(y-S)/(h-H),x=0,F=0;F<h;F++){var T=Math.ceil(x);x+=F<H?R:D;for(var B=Math.min(Math.ceil(x),y),E=0,j=T;j<B;j++)E=Math.max(E,Math.abs(t[j]));var I=M<E?Math.floor(17*(Math.log(E)/Math.log(10)-b)):0,q=p*Math.min(I/L,1);u[F]=(u[F]||0)-w,q<u[F]&&(q=u[F]),q<0&&(q=0),u[F]=q;var z=v[F]||0;if(q&&z<q+m)v[F]=q+m;else{var P=z-g;P<0&&(P=0),v[F]=P}}i.clearRect(0,0,l,n);var W=r.genLinear(i,a.linear,c,c-p),k=a.stripeLinear&&r.genLinear(i,a.stripeLinear,c,c-p)||W,A=r.genLinear(i,a.linear,c,c+p),G=a.stripeLinear&&r.genLinear(i,a.stripeLinear,c,c+p)||A;i.shadowBlur=a.shadowBlur*o,i.shadowColor=a.shadowColor;var V=a.mirrorEnable,J=V?2*h-1:h,K=a.widthRatio,N=a.spaceWidth*o;0!=N&&(K=(l-N*(J+1))/l);for(var O=Math.max(1*o,Math.floor(l*K/J)),Q=(l-J*O)/(J+1),U=a.minHeight*o,X=V?l/2-(Q+O/2):0,Y=(F=0,X);F<h;F++)Y+=Q,$=Math.floor(Y),q=Math.max(u[F],U),0!=c&&(_=c-q,i.fillStyle=W,i.fillRect($,_,O,q)),c!=n&&(i.fillStyle=A,i.fillRect($,c,O,q)),Y+=O;if(a.stripeEnable){var Z=a.stripeShadowBlur;i.shadowBlur=(-1==Z?a.shadowBlur:Z)*o,i.shadowColor=a.stripeShadowColor||a.shadowColor;var $,_,tt=a.stripeHeight*o;for(F=0,Y=X;F<h;F++)Y+=Q,$=Math.floor(Y),q=v[F],0!=c&&((_=c-q-tt)<0&&(_=0),i.fillStyle=k,i.fillRect($,_,O,tt)),c!=n&&(n<(_=c+q)+tt&&(_=n-tt),i.fillStyle=G,i.fillRect($,_,O,tt)),Y+=O}if(V){var et=Math.floor(l/2);i.save(),i.scale(-1,1),i.drawImage(r.canvas,Math.ceil(l/2),0,et,n,-et,0,et,n),i.restore()}a.onDraw(t,e)}},Recorder.FrequencyHistogramView=t}();
|
@ -0,0 +1,6 @@
|
||||
/*
|
||||
录音
|
||||
https://github.com/xiangyuecn/Recorder
|
||||
src: extensions/lib.fft.js
|
||||
*/
|
||||
Recorder.LibFFT=function(r){"use strict";var s,v,d,l,F,b,g,m;return function(r){var o,t,a,f;for(s=Math.round(Math.log(r)/Math.log(2)),d=((v=1<<s)<<2)*Math.sqrt(2),l=[],F=[],b=[0],g=[0],m=[],o=0;o<v;o++){for(a=o,f=t=0;t!=s;t++)f<<=1,f|=1&a,a>>>=1;m[o]=f}var n,u=2*Math.PI/v;for(o=(v>>1)-1;0<o;o--)n=o*u,g[o]=Math.cos(n),b[o]=Math.sin(n)}(r),{transform:function(r){var o,t,a,f,n,u,e,h,M=1,i=s-1;for(o=0;o!=v;o++)l[o]=r[m[o]],F[o]=0;for(o=s;0!=o;o--){for(t=0;t!=M;t++)for(n=g[t<<i],u=b[t<<i],a=t;a<v;a+=M<<1)e=n*l[f=a+M]-u*F[f],h=n*F[f]+u*l[f],l[f]=l[a]-e,F[f]=F[a]-h,l[a]+=e,F[a]+=h;M<<=1,i--}t=v>>1;var c=new Float64Array(t);for(n=-(u=d),o=t;0!=o;o--)e=l[o],h=F[o],c[o-1]=n<e&&e<u&&n<h&&h<u?0:Math.round(e*e+h*h);return c},bufferSize:v}};
|
File diff suppressed because one or more lines are too long
After Width: | Height: | Size: 4.2 KiB |
Loading…
Reference in new issue