|
<!DOCTYPE html> |
|
<html lang="en-US"> |
|
|
|
<head> |
|
<title>Speech Transcription</title> |
|
<link rel="icon" href="https://cdn-icons-png.flaticon.com/512/5262/5262072.png"> |
|
<link rel="stylesheet" href="../static/css/style2.css"> |
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css"> |
|
<link rel="stylesheet" href="../static/css/vendor.bundle.base.css"> |
|
</head> |
|
|
|
<body style="background-color: #1F2020;"> |
|
<nav class="navbar navbar-expand-lg bg-ocr mb-5"> |
|
<div class="container h-100"> |
|
|
|
<a class="navbar-brand" href="pdf"> |
|
<img class="navbar-brand-item" src="../static/icons/avignon_universite_blanc_RVB.png" alt="logo"> |
|
</a> |
|
|
|
|
|
|
|
<button class="navbar-toggler ms-auto icon-md btn btn-light p-0 collapsed" type="button" |
|
data-bs-toggle="collapse" data-bs-target="#navbarCollapse" aria-controls="navbarCollapse" |
|
aria-expanded="false" aria-label="Toggle navigation"> |
|
<span class="navbar-toggler-animation"> |
|
<span></span> |
|
<span></span> |
|
<span></span> |
|
</span> |
|
</button> |
|
|
|
|
|
<div class="navbar-collapse collapse" id="navbarCollapse"> |
|
<ul class="navbar-nav navbar-nav-scroll ms-auto p-xl-0"> |
|
<li class="nav-item nav-pills nav-pills-ocr"> |
|
<a class="nav-item nav-link mb-5" href="pdf">PDF Classifier</a> |
|
</li> |
|
<li class="nav-item nav-pills nav-pills-ocr"> |
|
<a class="nav-item nav-link " href="sentence">Text Classifier</a> |
|
</li> |
|
<li class="nav-item nav-pills nav-pills-ocr"> |
|
<a class="nav-item nav-link active" href="voice">SLU</a> |
|
</li> |
|
<li class="nav-item dropdown"> |
|
<a class="nav-link" href="#" id="accounntMenu" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false">language</a> |
|
<ul class="dropdown-menu" aria-labelledby="accounntMenu"> |
|
<li> <a class="dropdown-item " href="voice_fr"><img src="../static/icons/France.svg" class="avatar avatar" style="height: 20px;" alt="French flag"> French</a> </li> |
|
</ul> |
|
</li> |
|
</ul> |
|
</div> |
|
|
|
</div> |
|
</nav> |
|
|
|
<main class="pt-3 pt-md-5 pb-md-5 pt-lg-0 mt-3"> |
|
<div class="container mt-lg-7"> |
|
<div class="row"> |
|
<div class="col-lg-6 mb-4"> |
|
<div class="card bg-ocr h-100"> |
|
<div class="card-body"> |
|
<h5 class="card-title text-white">Record Speech</h5> |
|
<p class="card-text text-white-50">Click the button to start recording your speech.</p> |
|
<div class="mt-auto text-center"> |
|
<button id="startRecord" class="btn btn-ocr">Start Recording</button> |
|
<button id="stopRecord" class="btn btn-green" disabled>Stop Recording</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="col-lg-6 mb-4"> |
|
<div class="card bg-ocr"> |
|
<div class="card-body"> |
|
<h5 class="card-title text-white">Upload Audio File</h5> |
|
<p class="card-text text-white-50">Click or drag and drop to upload an audio file.</p> |
|
<div class="file-upload-wrapper" id="fileUploadWrapper"> |
|
<input type="file" id="audioFileInput" accept="audio/*"> |
|
<div class="file-upload-text"> |
|
<i class="bi bi-cloud-upload" style="font-size: 2rem;"></i> |
|
<p>Click or drag audio file here</p> |
|
<p class="file-name"></p> |
|
</div> |
|
</div> |
|
<div class="text-center"> |
|
<button id="uploadAudio" class="btn btn-ocr mt-3 text-center">Upload and |
|
Transcribe</button> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
<h1 class="text-center text-white-50"> Results</h1> |
|
<div class="card" id = 'static' style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);"> |
|
<div class="card-body text-center" id="static"> |
|
<div class="col-12 d-flex justify-content-center"> |
|
<div class="col-sm-12 d-inline align-items-center" style="height: 175px; width: 229px;"> |
|
<div class="flex-shrink-0 avatar avatar-lg me-2 mb-3 mt-4"> |
|
<img class="avatar-img rounded-circle" |
|
src="../static/icons/logo_header_128x128.png" alt=""> |
|
</div> |
|
<h5 class="card-title text-white-50">Get more insights about your speech 📣📢.</h5> |
|
</div> |
|
|
|
</div> |
|
</div> |
|
</div> |
|
<div class="row d-none" id = 'dynamic'> |
|
<div class="col-4"> |
|
<div class="nav flex-column position-sticky top-10 shadow-lg" style="background-color: #222424;"> |
|
<div class="card mb-3" style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);"> |
|
<div class="card-body"> |
|
<h4 class="card-title text-white">Text's Category</h4> |
|
<div class="row d-flex"> |
|
<div class="col-sm-7 col-6"> |
|
<ul class="graphl-legend-rectangle" id="class-probabilities"> |
|
{% if class_probabilities %} |
|
{% for class_label, probability in class_probabilities.items() %} |
|
{% if loop.index <= 5 %} |
|
<li class="text-white-50"> |
|
<span class="bg-{{ class_label[1] }}"></span> |
|
<div class="d-flex justify-content-center"> |
|
{{ class_label[0] }}: |
|
<span class="text-white w-100"> {{ "%.2f" % (probability) }}%</span> |
|
</div> |
|
</li> |
|
{% endif %} |
|
{% endfor %} |
|
{% endif %} |
|
</ul> |
|
</div> |
|
<div class="col-sm-5 grid-margin col-6"> |
|
<canvas class="bestSellers" data-chart='{{ chart_data | tojson}}' |
|
id="bestSellers"></canvas> |
|
</div> |
|
</div> |
|
<div class="mb-lg-0 text-white-50"> |
|
la classe la plus dominante est <span class="fw-bolder text-white" |
|
id="predicted-class">{{ |
|
predicted_class[0] if predicted_class else "" |
|
}}</span> |
|
</div> |
|
</div> |
|
</div> |
|
<div class="card my-auto mt-3" |
|
style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);"> |
|
<div class="card-body"> |
|
<h4 class="card-title text-white">Legend</h4> |
|
<div class="row d-flex"> |
|
<div class="col-sm-6 col-6"> |
|
<ul class="graphl-legend-rectangle"> |
|
<li class="text-white-50"><span class="bg-info "></span>vehicles |
|
</li> |
|
<li class="text-white-50"><span class="bg-success"></span>environments |
|
</li> |
|
<li class="text-white-50"><span class="bg-danger"></span>energies |
|
</li> |
|
<li class="text-white-50"><span class="bg-primary"></span>Physics |
|
</li> |
|
<li class="text-white-50"><span class="bg-moss"></span>robotics |
|
</li> |
|
<li class="text-white-50"><span class="bg-agri"></span>agriculture |
|
</li> |
|
<li class="text-white-50"><span class="bg-yellow"></span>ML |
|
</li> |
|
<li class="text-white-50"><span class="bg-warning"></span>economies |
|
</li> |
|
<li class="text-white-50"><span class="bg-vanila"></span>technologies |
|
</li> |
|
</ul> |
|
</div> |
|
<div class="col-sm-6 col-6"> |
|
<ul class="graphl-legend-rectangle"> |
|
|
|
<li class="text-white-50"><span class="bg-coffe"></span>mathematics |
|
</li> |
|
<li class="text-white-50"><span class="bg-orange "></span>sports |
|
</li> |
|
<li class="text-white-50"><span class="bg-cyan"></span>AI |
|
</li> |
|
<li class="text-white-50"><span class="bg-rosy"></span>Innovation |
|
</li> |
|
<li class="text-white-50"><span class="bg-picton"></span>Science |
|
</li> |
|
<li class="text-white-50"><span class="bg-purple"></span>Societies |
|
</li> |
|
<li class="text-white-50"><span class="bg-pink"></span>administration |
|
</li> |
|
<li class="text-white-50"><span class="bg-cambridge"></span>biology |
|
</li> |
|
</ul> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
|
|
<div class="col-8"> |
|
<div class="card" style="background-color: #303131; border: 2px dashed rgb(82, 82, 82);"> |
|
<div class="card-body"> |
|
<h5 class="card-title text-white mb-3">Transcribed and Classified Text</h5> |
|
<div id="transcribedText" class="text-white-50 mb-4"></div> |
|
<div id="static" class="text-center"> |
|
<div class="col-12 d-flex justify-content-center"> |
|
<div class="col-sm-12 d-inline align-items-center" id="classifiedText"> |
|
{% if sentences_prediction %} |
|
{% for sentence, color in sentences_prediction.items() %} |
|
<span class="text-bold text-start bg-{{color[1]}}"> |
|
{{sentence}} |
|
</span> |
|
{% endfor %} |
|
{% endif %} |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</div> |
|
</main> |
|
|
|
<div id="loadingIndicator" style="display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); z-index: 9999;"> |
|
<div style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white;"> |
|
Processing... |
|
</div> |
|
</div> |
|
|
|
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script> |
|
<script src="../static/js/voice.js" type="text/javascript"></script> |
|
<script src="../static/js/vendor.bundle.base.js"></script> |
|
</body> |
|
|
|
</html> |
