Python智能语音识别语翻译平台｜项目前端搭建

HTML，JavaScript等技术的应用。

01、任务实现步骤

任务描述：本任务利用HTML和JavaScript等搭建智能语音识别与翻译平台的前端页面，包括index.htm、base.htm前端网页模板的编写以及错误页面404.htm的编写。

第一步：编写base.htm。base.htm用来调用项目外部static文件中的css、js、scss、html等配置文件，核心代码如下所示。

html 复制代码

<!-- 左边滑动栏  -->
  <aside class="main-sidebar elevation-4 sidebar-light-cyan">
      <!-- website logo  -->
      < a href="/" class="brand-link navbar-cyan">
      <img src="{% static 'dist/img/website logo.png' %}" alt="NLPStudio Logo" class="brand-image img-circle elevation-3"
           style="opacity: .8">
      <span class="brand-textfont-weight-light" style="
font-size:20px;color:lightgreen" >identification tool </span>
    </ a>
      <div class="sidebar">
      <!-- 用户信息  -->
      < a href="#">
        <div class="user-panel mt-3 pb-3 mb-3 d-flex">
            <div class="pull-left image">
                 <img src="{% static 'img/user_logo.png' %}" class="img-circle" alt="User Image">
            </div>
            <div class="pull-left info">
              <p style="font-size:20px;color:lightgreen" >Python</p>
              <i class="fafa-circletext-success"style="fontsize:20px;color:lightgreen" > 埋头苦干中  </i>
            </div>
          </div>
        </ a>
      <!-- 侧边栏菜单-->
          {% include "home/slide.htm" %}
       </div>
  </aside>

<!-- Page header-->
 <div class="content-wrapper">
{% block content-header %}
<section class="content-header">
     <div class="container-fluid">
        <div class="row">
          <div class="col-6">
              {% block module-title %}{% endblock %}
          </div>
            <!-- 导航 -->
          <div class="col-6">
            <ol class="breadcrumb float-sm-right">
                {% block breadcrumb %}{% endblock %}
             </ol>
          </div>
        </div>
      </div>
  </section>

第二步：搭建index.htm来展示网站网页所有的显示界面，核心代码如下所示。

html 复制代码

  <!-- 功能按钮设置 -->
              <div class="card">
                <div class="card-header d-flex p-0">
                  <h3 class="card-title p-3"> 功能 </h3>
                  <ul class="nav nav-pills ml-auto p-2">
                    <!-- 功能选项卡设置 -->
                    <li class="nav-item"><a class="nav-link active" href="#tab_1" data-toggle="tab">Voice File --> </ a></li>
                    <li class="nav-item"><a class="nav-link" href="#tab_2" data-toggle="tab">identification Text --> </ a></li>
                    <li class="nav-item"><a class="nav-link" href="#tab_3" data-toggle="tab">Translation and reading --> </ a></li>
                  </ul>
                </div><!--功能文本框设置 -->
                <div class="card-body">
                  <div class="tab-content">
                    <div class="tab-pane active" id="tab_1">
                      <div class="col-12">
                        <div class="input-group rounded-0">
                          <!-- 显示上传的文件路径 -->
                          <input type="text" name="audiopath" class="form-control" value=""
                                 placeholder="文件不能大于1M,格式需为wav" id="audiopath" />
                          <div class="input-group-append">
                          <label class="btn btn-default btn-flat"  for="uploadfield_btn">
                              <i class="fa fa-upload"></i>
                              <!-- 上传控制输入框 -->
                            <input hidden type="file" name="file" id="uploadfield_btn">
                          </label>
                         </div>
                      </div>
                     </div>
                      {% csrf_token %}     
                    </div>
                    <div class="tab-pane" id="tab_2">
                      <div class="row"  style="padding-bottom: 10px;">
                        <div class="col-12 form-group">
                          <!-- 解析后文本框 -->
                          <textarea name class="form-control form-control-rev" name="trans_text" ></textarea>  
                        </div>

第三步：编写错误视图404.htm，来展示当网站访问到死链接或不存在的网址时，Web服务器便会把这个页面展示出来，核心代码如下所示。

html 复制代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {你访问的页面不存在！！！请重新访问}
</body>
</html>