thanks to NVIDIA ❤

7934b29 about 3 years ago

6.21 kB

	<!--
	# Copyright (c) 2021, NVIDIA CORPORATION. All rights reserved.
	#
	# Licensed under the Apache License, Version 2.0 (the "License");
	# you may not use this file except in compliance with the License.
	# You may obtain a copy of the License at
	#
	# http://www.apache.org/licenses/LICENSE-2.0
	#
	# Unless required by applicable law or agreed to in writing, software
	# distributed under the License is distributed on an "AS IS" BASIS,
	# WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
	# See the License for the specific language governing permissions and
	# limitations under the License.
	-->
	<!doctype html>
	<html lang="en">
	<head>
	<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Roboto:300,400,500,700" type="text/css">
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Automatic Speech Recognition</title>
	<link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

	<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
	<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.light_green-lime.min.css">
	<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
	<style>
	.ui-resizable-se {
	bottom: 17px;
	}

	</style>
	<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
	<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

	<!-- Load from https://htmx.org/ -->
	<script src="https://unpkg.com/htmx.org@1.3.1"></script>
	</head>
	<body>

	<!-- Always shows a header, even in smaller screens. -->
	<div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
	<header class="mdl-layout__header">
	<div class="mdl-layout__header-row">
	<!-- Title -->
	<span class="mdl-layout-title">NeMo Automatic Speech Recognition Demo</span>
	<!-- Add spacer, to align navigation to the right -->
	<div class="mdl-layout-spacer"></div>
	<!-- Navigation. We hide it in small screens. -->
	<nav class="mdl-navigation mdl-layout--large-screen-only">
	<a class="mdl-navigation__link" href="#top">Top</a>
	</nav>
	</div>
	</header>
	<div class="mdl-layout__drawer">
	<span class="mdl-layout-title">ASR Transcription</span>
	<nav class="mdl-navigation">
	<a class="mdl-navigation__link" href="https://github.com/NVIDIA/NeMo">Github</a>
	</nav>
	</div>
	<main class="mdl-layout__content">
	<div class="page-content">

	<!--Placeholder for top of app-->
	<div id="top"></div>

	<form id="model_names_form" action="" enctype="multipart/form-data" style="display: inline;">

	<h5> Model Name :

	<!-- Format selectable list of models -->
	<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label" style="width: 25%">
	<select name="model_names_select" class="mdl-textfield__input" id="model_names_select_id">
	{% for x in model_names %}
	<option value="{{ x }}" {% if loop.first %} SELECTED{% endif %}>{{ x }}</option>
	{% endfor %}
	</select>
	</div>

	<!-- Load Model -->
	<button class="btn mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
	hx-post="{{ url_for('initialize_model') }}" hx-target="this" hx-swap="afterend"
	hx-encoding="multipart/form-data">
	Load Model
	</button>

	<!-- Load .nemo checkpoint -->
	<!-- Comment this section out to remove ability to upload files -->

	<br>
	NeMo File :
	<input type="file" name="nemo_model" accept=".nemo" id="nemo_model_file"/>

	<!-- Comment out upto here to remove ability to upload models -->

	</h5>

	<!-- GPU checkbox -->
	<label class="mdl-checkbox mdl-js-checkbox mdl-js-ripple-effect" for="use_gpu_ckbx_id">
	<input type="checkbox" id="use_gpu_ckbx_id" name="use_gpu_ckbx" class="mdl-checkbox__input" checked>
	<span class="mdl-checkbox__label">Use GPU (if available)</span>
	</label>

	</form>

	<hr>
	<br>

	<!-- Form input for files -->
	<form action="" enctype="multipart/form-data">
	<input type="file" name="file" accept=".wav" multiple=""/>

	<button class="btn mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
	hx-post="{{ url_for('upload_audio_files') }}"
	hx-target="this" hx-swap="outerHTML" hx-encoding="multipart/form-data">
	Upload audio file(s)
	</button>

	<button class="btn mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
	hx-post="{{ url_for('remove_audio_files') }}"
	hx-target="this" hx-swap="outerHTML">
	Remove all files
	</button>
	</form>
	<hr>
	<br>

	<!-- Transcribe Button -->
	<button class="btn mdl-button mdl-js-button mdl-button--raised mdl-button--colored mdl-js-ripple-effect"
	hx-post="{{ url_for('transcribe') }}" hx-target="#transcribeResults">
	Transcribe all
	</button>

	<div id="transcribeResults"></div>


	<!--Material Toast -->

	<div id="toast" class="mdl-js-snackbar mdl-snackbar">
	<div class="mdl-snackbar__text"></div>
	<button class="mdl-snackbar__action" type="button"></button>
	</div>

	</div>
	</main>
	</div>

	</body>
	</html>