devbox
不正经
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

基于百度AI开放平台的人脸识别及语音合成

作者：不正经 | 2024-04-11 02:25:27

赞

踩

人工智能利用百度ai开放平台进行语音合成,将一段文字转换成mp3格式的语音文件

基于百度AI的人脸识别及语音合成课题

课题需求

（1）人脸识别
在Web界面上传人的照片，后台使用Java技术接收图片，然后对图片进行解码，调用云平台接口识别人脸特征，接收平台返回的人员年龄、性别、颜值等信息，将信息返回到Web界面进行显示。
（2）人脸比对
在Web界面上传两张人的照片，后台使用Java技术接收图片，然后对图片进行解码，调用云平台接口比对照片信息，返回相似度。
（3）语音识别
在Web页面上传语音文件，判断语音文件格式，如果不是wav格式进行转码处理，然后调用平台接口进行识别，最后将识别的文本内容返回到Web界面进行显示。
（4）语音合成
在Web界面上传文本内容和语音类型，后台接收文本内容和语音类型后，调用平台接口生成语音数据，最后将数据转码成mp3格式文件，Web界面可以下载到本地。

课题设计

课题基于客户端—服务端-平台端构架，客户端主要实现功能界面展示、数据上传和处理结果展示；服务器端接收客户端数据、数据转码处理、平台接口调用、请求结果相应；平台端介绍服务端数据、人脸识别、人脸比对、语音识别、语音合成等。

总体架构

1670577-20190424164017821-2011040102.png

总体逻辑

1670577-20190424164034371-839412247.png

前端设计（包括首页、人脸检测、人脸对比、语音识别及语音合成）

index.html

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3.  
  4.     <head>
  5.         <meta charset="UTF-8">
  6.         <title>人工智能 未来已来</title>
  7.         <link rel="stylesheet" href="css/button.min.css" />
  8.         <link rel="stylesheet" href="css/style.css" />
  9.         <script type='text/javascript' src='js/jquery-1.11.1.min.js'></script>
  10.         <script type='text/javascript' src='js/jquery.particleground.min.js'></script>
  11.         <script type='text/javascript' src='js/ai.js'></script>
  12.     </head>
  13.     <body>
  14.         <div id="context">
  15.             <div class="intro">
  16.                     <div class="position">
  17.                         <h1>人工智能 未来已来</h1>
  18.                         <!--start button, nothing above this is necessary -->
  19.                         <div class="svg-wrapper">
  20.                             <svg height="140" width="450" xmlns="http://www.w3.org/2000/svg">
  21.                                 <rect id="shape" height="140" width="300" />
  22.                                 <div id="text">
  23.                                     <a href="face_recognition.html"><span class="spot"></span>人脸检测</a>
  24.                                 </div>
  25.                             </svg>
  26.                         </div>
  27.                         <div class="svg-wrapper">
  28.                             <svg height="140" width="450" xmlns="http://www.w3.org/2000/svg">
  29.                                 <rect id="shape" height="140" width="300" />
  30.                                 <div id="text">
  31.                                     <a href="face_match.html"><span class="spot"></span>人脸比对</a>
  32.                                 </div>
  33.                             </svg>
  34.                         </div>
  35.                         <!--Next button -->
  36.                         <div class="svg-wrapper">
  37.                             <svg height="140" width="450" xmlns="http://www.w3.org/2000/svg">
  38.                                 <rect id="shape" height="140" width="300" />
  39.                                 <div id="text">
  40.                                     <a href="speech_recognition.html"><span class="spot"></span>语音识别</a>
  41.                                 </div>
  42.                             </svg>
  43.                         </div>
  44.                         <!--Next button -->
  45.                         <div class="svg-wrapper">
  46.                             <svg height="140" width="450" xmlns="http://www.w3.org/2000/svg">
  47.                                 <rect id="shape" height="140" width="300" />
  48.                                 <div id="text">
  49.                                     <a href="speech_produce.html"><span class="spot"></span>语音合成</a>
  50.                                 </div>
  51.                             </svg>
  52.                         </div>
  53.                         <!--End button -->
  54.                     </div>
  55.                 </div>
  56.         </div>
  57.     </body>
  58. </html>

face_recognition.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>人脸识别</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
  9.         <script src="js/jquery.particleground.min.js" type="text/javascript" charset="utf-8"></script>
  10.         <script src="js/ai.js" type="text/javascript" charset="utf-8"></script>
  11.         <link rel="stylesheet" type="text/css" href="css/style.css" />
  12.         <style type="text/css">
  13.             .cent_bg {
  14.                 width: 80%;
  15.                 height: 22em;
  16.                 border: 1px solid rgba(255, 255, 255, 0.5);
  17.                 margin: auto;
  18.                 padding: 3% 6%;
  19.                 border-radius: 10%;
  20.                 font-size: 1.5em;
  21.                 line-height: 2em;
  22.                 position: relative;
  23.             }
  24.             
  25.             .cent {
  26.                 margin-top: 1.5em;
  27.                 overflow-y: auto;
  28.                 height: 80%;
  29.                 text-indent: 2em;
  30.                 text-align: left;
  31.                 padding-right: 0.2em;
  32.             }
  33.             
  34.             
  35.             ::-webkit-scrollbar {
  36.                 width: 10px;
  37.                 background-color: rgba(255,255,255,0.2);
  38.             }
  39.             /*定义滚动条轨道 内阴影+圆角*/
  40.             
  41.             ::-webkit-scrollbar-track {
  42.                 border-radius: 5px;
  43.                 background-color: transparent;
  44.             }
  45.             /*定义滑块 内阴影+圆角*/
  46.             ::-webkit-scrollbar-thumb {
  47.                 border-radius: 10px;
  48.                 background-color: rgba(255,255,255,0.7);
  49.             }
  50.             
  51.             .btn{
  52.                 margin-top: 20px;
  53.                 width: 70%;
  54.                 height:80px;
  55.                 transition: 0.4s;
  56.                 border-radius: 1em;
  57.                 border: 1px solid rgba(255, 255, 255, 0.5);
  58.                 border-top:none;
  59.                 z-index: 66;
  60.                 background: rgba(255, 255, 255, 0.2);
  61.             }
  62.             .btn:hover{
  63.                 border: 1px solid rgba(255, 255, 255, 0.8) !important;
  64.                 border-top:none !important;
  65.             }
  66.             
  67.             .btn span{
  68.                 width: 40%;
  69.                 height: 84%;
  70.                 margin-top:6px;
  71.                 line-height: 38px;
  72.                 display: inline-block;
  73.                 border: 1px solid #009FFD;
  74.                 color: #fff;
  75.                 background: rgba(255,255,255,0.4);
  76.                 border-radius: 4px;
  77.                 cursor: pointer;
  78.             }
  79.             .btn span:nth-of-type(1){
  80.                 margin-right: 15px;
  81.             }
  82.             .btn span:nth-of-type(2){
  83.                 margin-left: 15px;
  84.             }
  85.             .img{
  86.             width: 70%;
  87.             height: 100%;
  88.             float: left;
  89.             position: relative;
  90.             }
  91.             .xinxi{
  92.             width: 30%;
  93.             height: 100%;
  94.             float: left;
  95.             }
  96.             .biankuang{
  97.             width: 92%;
  98.             height: 150%;
  99.             top: -100px;
  100.             position: absolute;
  101.             background: url(img/biankuang.png) no-repeat;
  102.             background-size: 100% 100%;
  103.             }
  104.             .xinxi{
  105.             text-align: left;
  106.             }
  107.             .xinxi span{
  108.             margin-top: 50px;
  109.             }
  110.             .xinxi span a{
  111.             color: #FFFFFF;
  112.             text-decoration: none;
  113.             }
  114.             #neirong{
  115.                 color: red;
  116.             }
  117.         </style>
  118.     </head>
  119.  
  120.     <body>
  121.         <div id="context">
  122.             <div class="intro">
  123.                 <div class="cent_bg">
  124.                 <div class="img">
  125.                 <div class="biankuang">
  126.                 <img src="img/img111.jpg" id='img' style="width: 83%;height: 55%;position: absolute;left: 49px;top: 150px;"/>   
  127.                 </div>
  128.                 </div>
  129.                 <div class="xinxi">
  130.                 <span style="display: block;">性别：<a href="" id="sex"></a></span>
  131.                 <span style="display: block;">年龄：<a href="" id="age"></a><span style="margin-left: 10px;">岁</span></span>               
  132.                 <span style="display: block;">表情：<a href="" id="expression"></a></span>
  133.                 <span style="display: block;">颜值：<a href="" id="beauty"></a></span>
  134.                 <span style="display: block;"><a href="" id="neirong"></a></span>
  135.                 </div>
  136.                 </div>
  137.                 <div class="btn">
  138.                 <form id="renlian" method="post">
  139.                 <span style="position: relative;">提交图片
  140.                 <input type="file" name="image" value="" id="uploading" onchange="test()" style="opacity: 0;width: 100%;position: absolute;height: 100%;display: block;top: 0px;" />
  141.                 </span>
  142.                 <span id="tijiao">开始识别</span>
  143.                 </form>
  144.                 </div>
  145.             </div>
  146.         </div>
  147.     </body>
  148.  
  149. </html>
  150. <script type="text/javascript">
  151.     function test() {
  152.             var file = document.getElementById("uploading").files[0];
  153.             var fr = new FileReader;
  154.             var filePath = document.querySelector("#uploading").value;
  155.             fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
  156.             if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
  157.                 alert('上传错误,文件格式必须为：png/jpg/jpeg');
  158.                 return;
  159.             } else {
  160.                 fr.readAsDataURL(file);
  161.                 fr.onload = function(e) {
  162.                     document.getElementById("img").src = this.result;
  163.                 }
  164.             }
  165.         }
  166.         $("#tijiao").click(function() {
  167.             $.ajax({
  168.                 type: "post",
  169.                 url: basePath + "/FaceDetect",
  170.                 dataType: "json",
  171.                 data: new FormData($('#renlian')[0]),
  172.                 processData: false,
  173.                 contentType: false,
  174.                 beforeSend: function() {
  175.                     uploading = true;
  176.                 },
  177.                 success: function(res) {
  178.                     if(res.status=="200"){
  179.                         $("#neirong").text("");
  180.                         $("#sex").text(res.data.gender);
  181.                         $("#age").text(res.data.age);
  182.                         $("#expression").text(res.data.expression);
  183.                         $("#beauty").text(res.data.beauty);
  184.                     }else{
  185.                         $("#neirong").text("无法识别");
  186.                     }
  187.                 },
  188.                 error(xhr,status,error){
  189.                     $("#neirong").text("后台服务异常");
  190.                     return;
  191.                 }
  192.             })
  193.         })
  194. </script>

face_match.html

  1. <!DOCTYPE html>
  2.     <html>
  3.     
  4.         <head>
  5.             <meta charset="UTF-8">
  6.             <title>人脸比对</title>
  7.             <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
  8.                 <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
  9.             <script src="js/jquery.particleground.min.js" type="text/javascript" charset="utf-8"></script>
  10.             <script src="js/ai.js" type="text/javascript" charset="utf-8"></script>
  11.             <link rel="stylesheet" type="text/css" href="css/style.css" />
  12.             <style type="text/css">
  13.                 #dianji:hover{
  14.                     transition: 0.5s;
  15.                     background: skyblue;
  16.                 }
  17.                 .sss{
  18.                     display: inline-block;
  19.                     line-height:100px ;
  20.                     border-radius: 100%; 
  21.                     width: 200px;
  22.                     margin: auto; 
  23.                     height: 200px; 
  24.                     border: 1px solid white;
  25.                     margin-top: 10%;
  26.                 }
  27.             </style>
  28.         </head>
  29.     
  30.         <body>
  31.             <div id="context">
  32.                 <div class="intro">
  33.                     <div style="overflow: hidden; position: relative;top: 40%; overflow: hidden;margin: auto;text-align: center;">
  34.                         <div style="border: 1px solid white; width: 30%; height: 400px; float: left;"><img id="ig1" src="" alt="" style="width: 100%; height: 100%"/></div>
  35.                         <div class="sss">相似度</div>
  36.                         <div style="border: 1px solid white; width: 30%; height: 400px; float: right;"><img id="ig2" src="" alt="" style="width: 100%; height: 100%;"/></div>
  37.                     </div>
  38.     
  39.                     <form id="tttt" method="post" style="width: 80%;  margin:40px auto;">
  40.                         <div style="width: 40%;float: left; position: relative;">
  41.                             <span style="position: absolute;left: 0px;background: skyblue;display: inline-block;height: 40px;line-height: 40px;width: 160px;">
  42.                             点击上传
  43.                             </span>
  44.                             <input style="opacity: 0; position: absolute;left: 0px; height: 40px;" id="uploading" type="file" onchange="upload1()" name="image1">
  45.                         </div>
  46.                         <div style="float: right;bwidth: 40%;float: right;position: relative;">
  47.                           <span id="" style="position: absolute;right: 0px;background: skyblue;display: inline-block;height: 40px;line-height: 40px;width: 160px;">
  48.                             点击上传
  49.                          </span>
  50.                          <input  id="up" type="file" onchange="upload2()" name="image2" style="opacity: 0; position: absolute;right: 0px; height: 40px;" >
  51.                          </div>
  52.                     </form>
  53.                     <div id="dianji" style="border: 1px solid white;width: 140px;height: 40px;line-height: 40px;border-radius: 15px; margin: auto;">开始比对</div>
  54.                 </div>
  55.     
  56.             </div>
  57.         </body>
  58.         <script type="text/javascript">
  59.             function upload1() {
  60.                 var file = document.getElementById("uploading").files[0];
  61.                 var fr = new FileReader;
  62.                 var filePath = document.querySelector("#uploading").value;
  63.                 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
  64.                 if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
  65.                     alert('上传错误,文件格式必须为：png/jpg/jpeg');
  66.                     return;
  67.                 } else {
  68.                     fr.readAsDataURL(file);
  69.                     fr.onload = function(e){
  70.                         document.getElementById("ig1").src = this.result;
  71.                     }
  72.                 }
  73.             }
  74.             function upload2() {
  75.                 var file = document.getElementById("up").files[0];
  76.                 var fr = new FileReader;
  77.                 var filePath = document.querySelector("#up").value;
  78.                 fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase();
  79.                 if(!fileFormat.match(/.png|.jpg|.jpeg/)) {
  80.                     alert('上传错误,文件格式必须为：png/jpg/jpeg');
  81.                     return;
  82.                 } else {
  83.                     fr.readAsDataURL(file);
  84.                     fr.onload = function(e){
  85.                         document.getElementById("ig2").src = this.result;
  86.                     }
  87.                 }
  88.             }
  89.             $(function() {
  90.                 $("#dianji").click(function() {
  91.                     $.ajax({
  92.                         url: basePath+"/FaceMatch",
  93.                         type: 'post',
  94.                         cache: false,
  95.                         data: new FormData($('#tttt')[0]),
  96.                         processData: false,
  97.                         contentType: false,
  98.                         dataType: "json",
  99.                         beforeSend: function() {
  100.                             uploading = true;
  101.                             
  102.                         },
  103.                         success: function(data) {
  104.                             if(data.status==200){
  105.                                 document.querySelector(".sss").innerHTML="相似度<br>"+data.data.score;
  106.                             }else{
  107.                                 $(".sss").html("相似度<br><span style='color:red'>"+data.msg+"</span>");
  108.                             }
  109.                             
  110.                         },
  111.                         error(xhr,status,error){
  112.                             $(".sss").html("相似度<br><span style='color:red'>后台服务异常</span>");
  113.                             return;
  114.                         }
  115.                     });
  116.                 });
  117.             });
  118.         </script>
  119.     
  120.     </html>
  121.     
  122.     speech_recognition.html
  123.     
  124.     <!DOCTYPE html>
  125.     <html>
  126.     
  127.         <head>
  128.             <meta charset="utf-8" />
  129.             <title>语音识别</title>
  130.             <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  131.             <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
  132.             <script src="js/jquery.particleground.min.js" type="text/javascript" charset="utf-8"></script>
  133.             <script src="js/ai.js" type="text/javascript" charset="utf-8"></script>
  134.             <link rel="stylesheet" type="text/css" href="css/style.css" />
  135.             <style type="text/css">
  136.                 .cent_bg {
  137.                     width: 80%;
  138.                     height: 22em;
  139.                     border: 1px solid rgba(255, 255, 255, 0.5);
  140.                     margin: auto;
  141.                     padding: 3% 6%;
  142.                     border-radius: 10%;
  143.                     font-size: 1.5em;
  144.                     line-height: 2em;
  145.                     position: relative;
  146.                 }
  147.                 
  148.                 .cent {
  149.                     margin-top: 1.5em;
  150.                     overflow-y: auto;
  151.                     height: 80%;
  152.                     text-indent: 2em;
  153.                     text-align: left;
  154.                     padding-right: 0.2em;
  155.                 }
  156.                 
  157.                 ::-webkit-scrollbar {
  158.                     width: 10px;
  159.                     background-color: rgba(255, 255, 255, 0.2);
  160.                 }
  161.                 /*定义滚动条轨道 内阴影+圆角*/
  162.                 
  163.                 ::-webkit-scrollbar-track {
  164.                     border-radius: 5px;
  165.                     background-color: transparent;
  166.                 }
  167.                 /*定义滑块 内阴影+圆角*/
  168.                 
  169.                 ::-webkit-scrollbar-thumb {
  170.                     border-radius: 10px;
  171.                     background-color: rgba(255, 255, 255, 0.7);
  172.                 }
  173.                 #ttttt{
  174.                     display: none;
  175.                 }
  176.                 
  177.                 .btn {
  178.                     margin-top: 20px;
  179.                     width: 70%;
  180.                     height: 80px;
  181.                     transition: 0.4s;
  182.                     border-radius: 1em;
  183.                     border: 1px solid rgba(255, 255, 255, 0.5);
  184.                     border-top: none;
  185.                     z-index: 66;
  186.                     overflow: hidden;
  187.                     position: relative;
  188.                     background: rgba(255, 255, 255, 0.2);
  189.                 }
  190.                 
  191.                 .btn:hover {
  192.                     border: 1px solid rgba(255, 255, 255, 0.8) !important;
  193.                     border-top: none !important;
  194.                 }
  195.                 
  196.                 .btn span {
  197.                     width: 40%;
  198.                     height: 84%;
  199.                     margin-top: 6px;
  200.                     line-height: 38px;
  201.                     display: inline-block;
  202.                     border: 1px solid #009FFD;
  203.                     color: #fff;
  204.                     background: rgba(255, 255, 255, 0.4);
  205.                     border-radius: 4px;
  206.                     cursor: pointer;
  207.                 }
  208.                 
  209.                 .btn span:nth-of-type(1) {
  210.                     margin-right: 15px;
  211.                     position: relative;
  212.                 }
  213.                 
  214.                 .btn span:nth-of-type(2) {
  215.                     margin-left: 15px;
  216.                 }
  217.                 input{
  218.                     width: 100%;
  219.                     height: 100%;
  220.                     border: 1px solid red;
  221.                     position: absolute;
  222.                     top: 0;
  223.                     left: 0;
  224.                     opacity: 0;
  225.                 }
  226.                 .img{
  227.                     width: 60px;
  228.                     height: 60px;
  229.                     margin: auto;
  230.                     text-align: center;
  231.                     position: relative;
  232.                 }
  233.                 .img img{
  234.                     width: 100%;
  235.                     height: 100%;
  236.                     position: absolute;
  237.                     top: 0;
  238.                     left: 0;
  239.                 }
  240.                 .mmm{
  241.                     width: 100%;
  242.                     height: 100%;
  243.                     position: absolute;
  244.                     top: 0;
  245.                     left: 0;
  246.                     z-index: 999;
  247.                     display: none;
  248.                     cursor: pointer;
  249.                     background: #b9fff4;
  250.                     color: aqua;
  251.                     line-height: 80px;
  252.                 }
  253.             </style>
  254.         </head>
  255.     
  256.         <body>
  257.             <div id="context">
  258.                 <div class="intro">
  259.                     <div class="cent_bg">
  260.                         <h3>语音识别内容：</h3>
  261.                         <div class="cent">
  262.                         </div>
  263.                     </div>
  264.                     <div class="btn">
  265.                         <span>上传文件
  266.                         </span>
  267.                         <span>开始识别</span>
  268.                         <div class="mmm">
  269.                             正在识别...
  270.                         </div>
  271.                     </div>
  272.                     <form id="ttttt" action="" method="post">
  273.                         <input type="file" name="voice" value="">
  274.                     </form>
  275.                 </div>
  276.             </div>
  277.         </body>
  278.     
  279.     </html>
  280.     <script type="text/javascript">
  281.         $(function() {
  282.             $(".btn span:nth-of-type(1)").click(function() {
  283.                 $('#ttttt input[name="voice"]').click();
  284.             })
  285.             $(".btn span:nth-of-type(2)").click(function() {
  286.                 if(document.querySelector("input").value==""){
  287.                     return alert("未选择文件");
  288.                 }
  289.                 $(".mmm").css("display","block");
  290.                 $(".cent").html('<div class="img"><img src="img/timg.gif"/></div>');
  291.                 $.ajax({
  292.                     url: basePath + "/VoiceRecognize",
  293.                     type: 'post',
  294.                     cache: false,
  295.                     data: new FormData($('#ttttt')[0]),
  296.                     processData: false,
  297.                     contentType: false,
  298.                     dataType: "json",
  299.                     beforeSend: function() {
  300.                         uploading = true;
  301.                     },
  302.                     success: function(data) {
  303.                         if (data.status=="200") {
  304.                             $(".cent").html(data.data.text);
  305.                             $(".mmm").css("display","none");
  306.                         } else{
  307.                             $(".cent").html("未能识别 "+data.msg);
  308.                             $(".mmm").css("display","none");
  309.                         }
  310.                     }
  311.                 });
  312.             });
  313.         });
  314.     </script>

speech_produce.html

  1. <!DOCTYPE html>
  2. <html>
  3.  
  4.     <head>
  5.         <meta charset="utf-8" />
  6.         <title>语音合成</title>
  7.         <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  8.         <script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
  9.         <script src="js/jquery.particleground.min.js" type="text/javascript" charset="utf-8"></script>
  10.         <script src="js/ai.js" type="text/javascript" charset="utf-8"></script>
  11.         <link rel="stylesheet" type="text/css" href="css/style.css" />
  12.         <style type="text/css">
  13.             #error {
  14.                 width: 60%;
  15.                 height: 120px;
  16.                 line-height: 120px;
  17.                 text-align: center;
  18.                 font-size: 1.5em;
  19.                 position: absolute;
  20.                 top: 50%;
  21.                 left: 50%;
  22.                 transform: translate(-50%, -65%);
  23.                 z-index: 999;
  24.             }
  25.             
  26.             .cent_bg {
  27.                 width: 80%;
  28.                 height: 22em;
  29.                 border: 1px solid rgba(255, 255, 255, 0.5);
  30.                 margin: auto;
  31.                 padding: 3% 6%;
  32.                 border-radius: 10%;
  33.                 font-size: 1.5em;
  34.                 line-height: 2em;
  35.                 position: relative;
  36.             }
  37.             
  38.             .cent {
  39.                 margin-top: 1em;
  40.                 width: 100%;
  41.                 background: rgba(0, 0, 0, .5);
  42.                 overflow-y: auto;
  43.                 height: 80%;
  44.                 color: white;
  45.                 font-size: 1.3em;
  46.                 text-indent: 1em;
  47.                 padding: .8em;
  48.                 border: none;
  49.                 resize: none;
  50.                 outline-color: white;
  51.             }
  52.             
  53.             ::-webkit-scrollbar {
  54.                 width: 10px;
  55.                 background-color: rgba(255, 255, 255, 0.2);
  56.             }
  57.             /*定义滚动条轨道 内阴影+圆角*/
  58.             
  59.             ::-webkit-scrollbar-track {
  60.                 border-radius: 5px;
  61.                 background-color: transparent;
  62.             }
  63.             /*定义滑块 内阴影+圆角*/
  64.             
  65.             ::-webkit-scrollbar-thumb {
  66.                 border-radius: 10px;
  67.                 background-color: rgba(255, 255, 255, 0.7);
  68.             }
  69.             
  70.             .btn {
  71.                 width: 70%;
  72.                 height: 40px;
  73.                 transition: 0.4s;
  74.                 border-bottom-left-radius: 1em;
  75.                 border-bottom-right-radius: 1em;
  76.                 border: 1px solid rgba(255, 255, 255, 0);
  77.                 border-top: none;
  78.                 z-index: 66;
  79.                 background: rgba(255, 255, 255, 0.2);
  80.                 padding: 5px 0px;
  81.             }
  82.             
  83.             .btn #btnSub:hover {
  84.                 border: 1px solid rgba(255, 255, 255) !important;
  85.                 color: white;
  86.             }
  87.             
  88.             .btn #btnSub {
  89.                 width: 40%;
  90.                 height: 100%;
  91.                 line-height: 25px;
  92.                 display: inline-block;
  93.                 border: 1px solid #009FFD;
  94.                 color: #fff;
  95.                 background: rgba(255, 255, 255, 0.4);
  96.                 border-radius: 4px;
  97.                 font-size: 1.1em;
  98.                 cursor: pointer;
  99.             }
  100.             
  101.             #select {
  102.                 margin: auto;
  103.                 margin-top: 10px;
  104.                 width: 70%;
  105.                 height: 30px;
  106.                 border-top-left-radius: 1em;
  107.                 border-top-right-radius: 1em;
  108.                 transition: 0.4s;
  109.                 border-top: none;
  110.                 z-index: 66;
  111.                 background: rgba(255, 255, 255, 0.2);
  112.             }
  113.             
  114.             #selectBox {
  115.                 width: 70%;
  116.                 height: 30px;
  117.                 margin: 0 auto;
  118.             }
  119.             
  120.             #mantext,
  121.             #womantext {
  122.                 font-size: 1.25em;
  123.                 line-height: 30px;
  124.                 float: left;
  125.             }
  126.             
  127.             #mantext {
  128.                 text-align: center;
  129.             }
  130.             
  131.             #woman {}
  132.             
  133.             .inputBox {
  134.                 width: 50%;
  135.                 height: 30px;
  136.                 float: left;
  137.             }
  138.             
  139.             #man,
  140.             #woman {
  141.                 margin-top: 6px;
  142.                 display: block;
  143.                 float: left;
  144.                 width: 20px;
  145.                 height: 20px;
  146.             }
  147.         </style>
  148.     </head>
  149.  
  150.     <body>
  151.         <div id="error">请在此输入文本内容</div>
  152.         <div id="context">
  153.             <div class="intro">
  154.                 <form method="post" enctype="multipart/form-data" id="Voice">
  155.                     <div class="cent_bg">
  156.                         <h3>请输入要合成的语音文本：</h3>
  157.                         <textarea id="Content" class="cent" name="text"></textarea>
  158.                     </div>
  159.                     <div id="select">
  160.                         <div id="selectBox">
  161.                             <div class="inputBox">
  162.                                 <label id="mantext" for="man" style="float: right;">男声</label><input id="man" type="radio" name="voiceType" checked value="1" style="float: right;" />
  163.                             </div>
  164.  
  165.                             <div class="inputBox">
  166.                                 <input id="woman" type="radio" name="voiceType" value="2" /><label id="womantext" for="woman">女声</label>
  167.                             </div>
  168.                         </div>
  169.                     </div>
  170.                     <div class="btn">
  171.                         <button id="btnSub" type="submit">合成语音</button>
  172.                     </div>
  173.                 </form>
  174.             </div>
  175.  
  176.         </div>
  177.  
  178.     </body>
  179.     <script>
  180.         $(function() {
  181.             var cor=0;
  182.             var stop=setInterval(function(){
  183.                 $('#error').fadeToggle(700);
  184.                 cor++;
  185.                 if(cor==3){
  186.                     clearInterval(stop);
  187.                 }
  188.             },700);
  189.             $('#btnSub').on('click', function() {
  190.                 cor=0;
  191.                 var Text = $('#Content').val();
  192.                 if(Text.length == 0) {
  193.                     var stop=setInterval(function(){
  194.                         $('#error').fadeToggle(700);
  195.                         cor++;
  196.                         if(cor==4){
  197.                             clearInterval(stop);
  198.                         }
  199.                     },700);
  200.                     return false;
  201.                 }
  202.             });
  203.             // 服务器请求地址
  204.             $('#Voice').attr('action', basePath+"/VoiceGen");
  205.         });
  206.     </script>
  207.  
  208. </html>

ai.js

  1. // 服务器主地址
  2. var basePath="127.0.0.1:8080/AIProject"
  3. // 背景效果
  4. $(document).ready(function() {
  5.   $('#context').particleground({
  6.     dotColor: '#5cbdaa',
  7.     lineColor: '#5cbdaa'
  8.   });
  9.   $('.intro').css({
  10.     'margin-top': -($('.intro').height() / 2)
  11.   });
  12. });

style.css

  1. /*********CSS初始化*********/
  2. html,
  3. body,
  4. div,
  5. span,
  6. applet,
  7. object,
  8. iframe,
  9. h1,
  10. h2,
  11. h3,
  12. h4,
  13. h5,
  14. h6,
  15. p,
  16. blockquote,
  17. pre,
  18. a,
  19. abbr,
  20. acronym,
  21. address,
  22. big,
  23. cite,
  24. code,
  25. del,
  26. dfn,
  27. em,
  28. img,
  29. ins,
  30. kbd,
  31. q,
  32. s,
  33. samp,
  34. small,
  35. strike,
  36. strong,
  37. sub,
  38. sup,
  39. tt,
  40. var,
  41. b,
  42. u,
  43. i,
  44. center,
  45. dl,
  46. dt,
  47. dd,
  48. ol,
  49. ul,
  50. li,
  51. fieldset,
  52. form,
  53. label,
  54. legend,
  55. table,
  56. caption,
  57. tbody,
  58. tfoot,
  59. thead,
  60. tr,
  61. th,
  62. td,
  63. article,
  64. aside,
  65. canvas,
  66. details,
  67. embed,
  68. figure,
  69. figcaption,
  70. footer,
  71. header,
  72. hgroup,
  73. menu,
  74. nav,
  75. output,
  76. ruby,
  77. section,
  78. summary,
  79. time,
  80. mark,
  81. audio,
  82. video {
  83.     margin: 0;
  84.     padding: 0;
  85.     border: 0;
  86.     font-size: 100%;
  87.     font: inherit;
  88.     vertical-align: baseline;
  89. }
  90.  
  91. article,
  92. aside,
  93. details,
  94. figcaption,
  95. figure,
  96. footer,
  97. header,
  98. hgroup,
  99. menu,
  100. nav,
  101. section {
  102.     display: block;
  103. }
  104.  
  105. body {
  106.     line-height: 1;
  107. }
  108.  
  109. ol,
  110. ul {
  111.     list-style: none;
  112. }
  113.  
  114. blockquote,
  115. q {
  116.     quotes: none;
  117. }
  118.  
  119. blockquote:before,
  120. blockquote:after,
  121. q:before,
  122. q:after {
  123.     content: '';
  124.     content: none;
  125. }
  126.  
  127. table {
  128.     border-collapse: collapse;
  129.     border-spacing: 0;
  130. }
  131.  
  132.  
  133. /* particleground demo */
  134.  
  135. *{
  136.     -webkit-box-sizing: border-box;
  137.     -moz-box-sizing: border-box;
  138.     box-sizing: border-box;
  139. }
  140.  
  141. html,
  142. body {
  143.     width: 100%;
  144.     height: 100%;
  145.     /*overflow: scroll;*/
  146. }
  147. /*********CSS初始化结束*********/
  148.  
  149. body {
  150.     background: #202AA3;
  151.     font-family: 'Montserrat', sans-serif;
  152.     color: #fff;
  153.     line-height: 1.3;
  154.     -webkit-font-smoothing: antialiased;
  155. }
  156.  
  157. #particles {
  158.     width: 100%;
  159.     height: 100%;
  160.     overflow: hidden;
  161. }
  162.  
  163. .intro {
  164.     position: absolute;
  165.     left: 0;
  166.     top: 50%;
  167.     padding: 0 20px;
  168.     width: 100%;
  169.     text-align: center;
  170. }
  171.  
  172. h1 {
  173.     text-transform: uppercase;
  174.     font-size: 85px;
  175.     font-weight: 700;
  176.     letter-spacing: 0.015em;
  177. }
  178.  
  179. h1::after {
  180.     content: '';
  181.     width: 60%;
  182.     display: block;
  183.     background: #fff;
  184.     height: 10px;
  185.     margin: 30px auto;
  186.     line-height: 1.1;
  187. }
  188.  
  189. p {
  190.     margin: 0 0 30px 0;
  191.     font-size: 24px;
  192. }
  193.  
  194. .btn {
  195.     display: inline-block;
  196.     padding: 15px 30px;
  197.     border: 2px solid #fff;
  198.     text-transform: uppercase;
  199.     letter-spacing: 0.015em;
  200.     font-size: 18px;
  201.     font-weight: 700;
  202.     line-height: 1;
  203.     color: #fff;
  204.     text-decoration: none;
  205.     -webkit-transition: all 0.4s;
  206.     -moz-transition: all 0.4s;
  207.     -o-transition: all 0.4s;
  208.     transition: all 0.4s;
  209. }
  210.  
  211. .btn:hover {
  212.     color: #005544;
  213.     border-color: #005544;
  214. }
  215.  
  216. @media only screen and (max-width: 1000px) {
  217.     h1 {
  218.         font-size: 70px;
  219.     }
  220. }
  221.  
  222. @media only screen and (max-width: 800px) {
  223.     h1 {
  224.         font-size: 48px;
  225.     }
  226.     h1::after {
  227.         height: 8px;
  228.     }
  229. }
  230.  
  231. @media only screen and (max-width: 568px) {
  232.     .intro {
  233.         padding: 0 10px;
  234.     }
  235.     h1 {
  236.         font-size: 30px;
  237.     }
  238.     h1::after {
  239.         height: 6px;
  240.     }
  241.     p {
  242.         font-size: 18px;
  243.     }
  244.     .btn {
  245.         font-size: 16px;
  246.     }
  247. }
  248.  
  249. @media only screen and (max-width: 320px) {
  250.     h1 {
  251.         font-size: 28px;
  252.     }
  253.     h1::after {
  254.         height: 4px;
  255.     }
  256. }

接口规范

数据交互类型：JSON
请求数据：请求数据除了请求参数以外，还需另外发送以下参数：(否则会返回403状态码)

返回数据格式：
{"status": "200","msg":"","data": {"namename":"user","password":"password"}}
1670577-20190424164302353-1713735814.png

（1）人脸识别
接口名：FaceDetect
请求参数：
1670577-20190424164324105-2146475225.png

返回参数：
1670577-20190424164348261-148075998.png

（2）人脸比对
接口名：FaceMatch
请求参数：
1670577-20190424164427669-777771077.png

返回参数：
1670577-20190424164446543-1945507329.png

（3）语音识别
接口名：VoiceRecognize
请求参数：
1670577-20190424164504835-1762499704.png

返回参数：
1670577-20190424164538950-1505695273.png

（4）语音生成
接口名：VoiceGen
1670577-20190424164554763-108736294.png

返回参数：
Mp3音频格式文件

请求注意事项

 请求体格式化：Content-Type为application/json，通过json格式化请求体。
 Base64编码：请求的图片需经过Base64编码，图片的base64编码指将图片数据编码成一串字符串，使用该字符串代替图像地址。您可以首先得到图片的二进制，然后用Base64格式编码即可。需要注意的是，图片的base64编码是不包含图片头的，如data:image/jpg;base64,
 图片格式：现支持PNG、JPG、JPEG、BMP，不支持GIF图片

实例代码

1. 人脸识别实例代码

  1. // 配置请求参数
  2. HashMap<String, String> options = new HashMap<String, String>();
  3. options.put("face_field", "age,gender,glasses,beauty,expression");
  4. options.put("max_face_num", "2");
  5. options.put("face_type", "LIVE");
  6. // 转换成base64
  7. String image = Base64Util.part2Base64(imagePart);
  8. String imageType = "BASE64";
  9. // 接口调用，并返回JSON数据
  10. JSONObject json = client.detect(image, imageType, options);
  11. // 响应数据处理
  12. Map<String, Object> map = new HashMap<>();
  13. // 获取人脸信息列表
  14. JSONObject result = json.getJSONObject("result").getJSONArray("face_list").getJSONObject(0);
  15. // 响应数据：性别
  16. JSONObject genderObj = result.getJSONObject("gender");
  17. String genderStr = genderObj.getString("type");
  18. if(genderObj.getDouble("probability") >= 0.6) {//概率并转换
  19.     if("female".equals(genderStr)) {
  20.         genderStr = "女";
  21.     }else if("male".equals(genderStr)) {
  22.         genderStr = "男";
  23.     }
  24. }
  25. map.put("gender", genderStr);
  26. // 返回接口数据
  27. return ResponseData.success(map);

2. 人脸对比实例代码

  1. // 转换成base64
  2. String image1 = Base64Util.part2Base64(imagePart1);
  3. String image2 = Base64Util.part2Base64(imagePart2);
  4. // 封装平台接口请求对象
  5. MatchRequest req1 = new MatchRequest(image1, "BASE64");
  6. MatchRequest req2 = new MatchRequest(image2, "BASE64");
  7. ArrayList<MatchRequest> requests = new ArrayList<MatchRequest>();
  8. requests.add(req1);
  9. requests.add(req2);
  10. // 人脸匹配
  11. JSONObject json = client.match(requests);
  12. // 响应数据处理
  13. Map<String, Object> map = new HashMap<>();
  14. // 匹配分值
  15. double score = json.getJSONObject("result").getDouble("score");
  16. return ResponseData.success(map);

3. 语音识别实例代码

  1. // 文件类型
  2. String fileType = voicePart.getContentType();
  3. if(fileType.endsWith("mp3")) {
  4.     fileType = MP3;
  5. }else if(fileType.endsWith("wav")) {
  6.     fileType = WAV;
  7. }else {
  8.     return ResponseData.fail("请上传mp3、wav音频");
  9. }
  10. try {
  11.     // 获取音频字符流
  12.     InputStream is = voicePart.getInputStream();
  13.     // 保存临时音频文件
  14.     String filename = new SimpleDateFormat("yyyyMMddHHmmssSSS").format(Calendar.getInstance().getTime());
  15.     File tmpVoice = new File(workspace + File.separator + filename+fileType);
  16.     VoiceUtil.saveVoiceFile(is, tmpVoice);
  17.     if(fileType.equals(MP3)) {
  18.         File mp3File = tmpVoice;
  19.         tmpVoice = new File(tmpVoice.getPath().replace(MP3, WAV));
  20.         if(!VoiceUtil.mp3ToWav(mp3File, tmpVoice)) {
  21.             return ResponseData.fail("mp3音频文件错误，请用wav音频。");
  22.         }
  23.         mp3File.delete();
  24.     }
  25.     // 调用百度接口
  26.     JSONObject json = client.asr(tmpVoice.getPath(), "wav", 16000, null);
  27.     tmpVoice.delete();
  28.     Integer status = json.getInt("err_no"); //状态码
  29.     if(status != 0) {
  30.         // 异常响应处理
  31.         String msg = json.getString("err_msg");
  32.         log.warn("百度接口调用响应异常,error_code:"+status + " error_msg:"+msg);
  33.         return ResponseData.fail(msg);
  34.     }
  35.     // 响应数据处理
  36.     Map<String, Object> map = new HashMap<>();
  37.     // 获取结果
  38.     JSONArray jsonArray = json.getJSONArray("result");
  39.     // 识别文本
  40.     String text = jsonArray.getString(0);
  41.     map.put("text", text);
  42.     return ResponseData.success(map);
  43. } catch (Exception e) {
  44.     log.warn("识别音频文件错误：", e);;
  45. }

4. 语音合成实例代码

  1. // 请求参数
  2. HashMap<String, Object> options = new HashMap<String, Object>();
  3. // 语速，取值0-9，默认为5中语速
  4. options.put("spd", "5");
  5. // 音调，取值0-9，默认为5中语调
  6. options.put("pit", "5");
  7. // 发音人选择, 0为女声，1为男声， 3为情感合成-度逍遥，4为情感合成-度丫丫，默认为普通女
  8. options.put("per", voiceType);
  9. // 调用百度api接口
  10. TtsResponse res = client.synthesis(text, "zh", 1, options);
  11. byte[] data = res.getData();
  12. return data;

效果展示

1670577-20190424164815590-589723684.png

1670577-20190424164924247-1113678498.png

1670577-20190424164944131-723848397.png

1670577-20190424165021819-488227002.png

1670577-20190424165133041-954755429.png

源码下载地址：https://github.com/jcdjor/AIProject

PS：欢迎大家给予评论、建议和下载学习，下面为源码的一些说明

  • AIProject.zip 为后端代码，为eclipse项目，app.properties文件需要自己配置百度云开发平台的AppID、APIKey、SecretKey。
  • Web.zip 为前端代码，前后端分离，可直接运行使用 。
  • 运行环境，对版本没太大要求，但jdk和tomcat要对应 JDK：我使用的版本为JDK1.8，官方下载地址
    Tomcat：，我使用的版本为tomcat 9，官方下载地址；
  • 注意需要百度云开放平台的AppID、APIKey、SecretKey，百度云AI开放平台：http://ai.baidu.com/

声明：本文欢迎大家评论和转载，使用本文章或代码还请声明，且在使用处的明显位置给出。如有其它问题或有什么建议，可在下方评论，或加QQ（1414782205），或发邮箱jcdjor@163.com。

转载于:https://www.cnblogs.com/jcdjor/p/10762738.html

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/不正经/article/detail/402395
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号