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>
相关推荐
爱编程的喵几秒前
深入理解JavaScript节流函数:从原理到实战应用
前端·javascript·html
尧木晓晓1 分钟前
开发避坑指南:Whistle 代理失效背后,localhost和 127.0.0.1 的 “爱恨情仇” 与终极解决方案
前端·javascript
风无雨33 分钟前
GO启动一个视频下载接口 前端可以边下边放
前端·golang·音视频
Rainbow_Pearl38 分钟前
Vue2_element 表头查询功能
javascript·vue.js·elementui
aha-凯心1 小时前
前端学习 vben 之 axios interceptors
前端·学习
熊出没2 小时前
Vue前端导出页面为PDF文件
前端·vue.js·pdf
VOLUN2 小时前
Vue3项目中优雅封装API基础接口:getBaseApi设计解析
前端·vue.js·api
此乃大忽悠2 小时前
XSS(ctfshow)
javascript·web安全·xss·ctfshow
用户99045017780092 小时前
告别广告干扰,体验极简 JSON 格式化——这款工具让你专注代码本身
前端
前端极客探险家2 小时前
告别卡顿与慢响应!现代 Web 应用性能优化:从前端渲染到后端算法的全面提速指南
前端·算法·性能优化