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

本文涉及的产品
服务治理 MSE Sentinel/OpenSergo,Agent数量 不受限
可观测可视化 Grafana 版,10个用户账号 1个月
简介: HTML,JavaScript等技术的应用。

640.png

HTML,JavaScript等技术的应用。

01、任务实现步骤

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

第一步:编写base.htm。base.htm用来调用项目外部static文件中的css、js、scss、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来展示网站网页所有的显示界面,核心代码如下所示。

 <!-- 功能按钮设置 -->
              <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服务器便会把这个页面展示出来,核心代码如下所示。


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    {
   
   你访问的页面不存在!!!请重新访问}
</body>
</html>
目录
相关文章
|
2天前
|
缓存 前端开发 测试技术
(译)Python 官方团队在打包项目中踩过的坑
(译)Python 官方团队在打包项目中踩过的坑
18 2
|
10天前
|
数据采集 存储 架构师
上进计划 | Python爬虫经典实战项目——电商数据爬取!
在如今这个网购风云从不间歇的时代,购物狂欢持续不断,一年一度的“6.18年中大促”、“11.11购物节”等等成为了网购电商平台的盛宴。在买买买的同时,“如何省钱?”成为了大家最关心的问题。 比价、返利、优惠券都是消费者在网购时的刚需,但在这些“优惠”背后已产生灰色地带。
|
26天前
|
Web App开发 数据采集 自然语言处理
python脚本抢各大平台大额优惠卷
python脚本抢各大平台大额优惠卷
27 0
|
2月前
|
存储 Python
Python实战项目(十三)使用 Tkinter GUI 库构建闹钟应用程序
Python实战项目(十三)使用 Tkinter GUI 库构建闹钟应用程序
22 0
|
2月前
|
机器学习/深度学习 算法 TensorFlow
文本分类识别Python+卷积神经网络算法+TensorFlow模型训练+Django可视化界面
文本分类识别Python+卷积神经网络算法+TensorFlow模型训练+Django可视化界面
40 0
文本分类识别Python+卷积神经网络算法+TensorFlow模型训练+Django可视化界面
|
4天前
|
前端开发 数据可视化
探索前端开发中的新趋势:低代码平台的应用与挑战
【2月更文挑战第8天】随着前端开发领域的不断发展,低代码平台作为一种新兴的开发方式正逐渐受到关注。本文将探讨低代码平台在前端开发中的应用现状、优势以及挑战,带领读者深入了解这一新趋势。
|
2月前
|
前端开发 数据库 Python
使用 Python 的 Web 框架(如 Django 或 Flask)来建立后端接口,用于处理用户的请求,从数据库中查找答案并返回给前端界面
【1月更文挑战第13天】使用 Python 的 Web 框架(如 Django 或 Flask)来建立后端接口,用于处理用户的请求,从数据库中查找答案并返回给前端界面
48 7
|
1天前
|
小程序 前端开发 API
快递平台独立版小程序源码|带cps推广营销流量主+前端
快递平台独立版小程序源码|带cps推广营销流量主+前端
11 7
快递平台独立版小程序源码|带cps推广营销流量主+前端
|
2天前
|
Web App开发 人工智能 Kubernetes
Python 潮流周刊#23:35 个容易上手的 Python 小项目
Python 潮流周刊#23:35 个容易上手的 Python 小项目
9 1
|
2天前
|
人工智能 自然语言处理 前端开发
Python 潮流周刊#17:Excel 终于支持 Python 了、Meta 重磅开源新项目、Mojo 新得 1 亿美元融资
Python 潮流周刊#17:Excel 终于支持 Python 了、Meta 重磅开源新项目、Mojo 新得 1 亿美元融资
14 1

相关产品

  • 云消息队列 MQ
  • 微服务引擎
  • 云消息队列 Kafka 版