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

本文涉及的产品
注册配置 MSE Nacos/ZooKeeper,118元/月
Serverless 应用引擎免费试用套餐包,4320000 CU,有效期3个月
应用实时监控服务-应用监控,每月50GB免费额度
简介: 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>
相关实践学习
达摩院智能语音交互 - 声纹识别技术
声纹识别是基于每个发音人的发音器官构造不同,识别当前发音人的身份。按照任务具体分为两种: 声纹辨认:从说话人集合中判别出测试语音所属的说话人,为多选一的问题 声纹确认:判断测试语音是否由目标说话人所说,是二选一的问题(是或者不是) 按照应用具体分为两种: 文本相关:要求使用者重复指定的话语,通常包含与训练信息相同的文本(精度较高,适合当前应用模式) 文本无关:对使用者发音内容和语言没有要求,受信道环境影响比较大,精度不高 本课程主要介绍声纹识别的原型技术、系统架构及应用案例等。 讲师介绍: 郑斯奇,达摩院算法专家,毕业于美国哈佛大学,研究方向包括声纹识别、性别、年龄、语种识别等。致力于推动端侧声纹与个性化技术的研究和大规模应用。
目录
相关文章
|
9天前
|
测试技术 Python
【03】做一个精美的打飞机小游戏,规划游戏项目目录-分门别类所有的资源-库-类-逻辑-打包为可玩的exe-练习python打包为可执行exe-优雅草卓伊凡-持续更新-分享源代码和游戏包供游玩-1.0.2版本
【03】做一个精美的打飞机小游戏,规划游戏项目目录-分门别类所有的资源-库-类-逻辑-打包为可玩的exe-练习python打包为可执行exe-优雅草卓伊凡-持续更新-分享源代码和游戏包供游玩-1.0.2版本
【03】做一个精美的打飞机小游戏,规划游戏项目目录-分门别类所有的资源-库-类-逻辑-打包为可玩的exe-练习python打包为可执行exe-优雅草卓伊凡-持续更新-分享源代码和游戏包供游玩-1.0.2版本
|
3月前
|
机器学习/深度学习 数据采集 数据可视化
Python 数据分析:从零开始构建你的数据科学项目
【10月更文挑战第9天】Python 数据分析:从零开始构建你的数据科学项目
76 2
|
30天前
|
Python
课程设计项目之基于Python实现围棋游戏代码
游戏进去默认为九路玩法,当然也可以选择十三路或是十九路玩法 使用pycharam打开项目,pip安装模块并引用,然后运行即可, 代码每行都有详细的注释,可以做课程设计或者毕业设计项目参考
65 33
|
1月前
|
机器学习/深度学习 前端开发 算法
婚恋交友系统平台 相亲交友平台系统 婚恋交友系统APP 婚恋系统源码 婚恋交友平台开发流程 婚恋交友系统架构设计 婚恋交友系统前端/后端开发 婚恋交友系统匹配推荐算法优化
婚恋交友系统平台通过线上互动帮助单身男女找到合适伴侣,提供用户注册、个人资料填写、匹配推荐、实时聊天、社区互动等功能。开发流程包括需求分析、技术选型、系统架构设计、功能实现、测试优化和上线运维。匹配推荐算法优化是核心,通过用户行为数据分析和机器学习提高匹配准确性。
129 3
|
2月前
|
存储 数据可视化 数据挖掘
Python数据分析项目:抖音短视频达人粉丝增长趋势
Python数据分析项目:抖音短视频达人粉丝增长趋势
|
2月前
|
监控 安全 测试技术
如何在实际项目中应用Python Web开发的安全测试知识?
如何在实际项目中应用Python Web开发的安全测试知识?
45 4
|
2月前
|
弹性计算 Linux iOS开发
Python 虚拟环境全解:轻松管理项目依赖
本文详细介绍了 Python 虚拟环境的概念、创建和使用方法,包括 `virtualenv` 和 `venv` 的使用,以及最佳实践和注意事项。通过虚拟环境,你可以轻松管理不同项目的依赖关系,避免版本冲突,提升开发效率。
177 3
|
3月前
|
JSON 搜索推荐 API
Python的web框架有哪些?小项目比较推荐哪个?
【10月更文挑战第15天】Python的web框架有哪些?小项目比较推荐哪个?
104 1
|
3月前
|
机器学习/深度学习 人工智能 算法
【玉米病害识别】Python+卷积神经网络算法+人工智能+深度学习+计算机课设项目+TensorFlow+模型训练
玉米病害识别系统,本系统使用Python作为主要开发语言,通过收集了8种常见的玉米叶部病害图片数据集('矮花叶病', '健康', '灰斑病一般', '灰斑病严重', '锈病一般', '锈病严重', '叶斑病一般', '叶斑病严重'),然后基于TensorFlow搭建卷积神经网络算法模型,通过对数据集进行多轮迭代训练,最后得到一个识别精度较高的模型文件。再使用Django搭建Web网页操作平台,实现用户上传一张玉米病害图片识别其名称。
96 0
【玉米病害识别】Python+卷积神经网络算法+人工智能+深度学习+计算机课设项目+TensorFlow+模型训练
|
3月前
|
前端开发 Python
帮我用python作为网页前端输出“hallow world
帮我用python作为网页前端输出“hallow world