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>
相关推荐
拾光拾趣录几秒前
Vue Router 执行顺序
前端·vue.js·vue-router
前端权2 分钟前
Vue3 多行文本溢出隐藏与展开收起功能实现总结
前端·vue.js
用户3802258598242 分钟前
vue3源码解析:调度器
前端·vue.js
一一一87112 分钟前
javaScript数据存储, 对象和原型与原型链
javascript
Dolphin_海豚25 分钟前
electron windows 无边框窗口最大化时的隐藏边框问题
前端·electron·api
梦想CAD控件28 分钟前
WEB CAD与Mapbox结合实现在线地图和CAD编辑(CGCS2000)
前端·javascript·vue.js
WTSolutions1 小时前
Excel 转 JSON by WTSolutions API 文档
javascript
AverageJoe19911 小时前
一次vite热更新不生效问题排查
前端·debug·vite
努力只为躺平1 小时前
🔥 油猴脚本开发指南:从基础API到发布全流程
前端·javascript