| <!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/bootstrap-icons@1.11.3/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> |
