Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Audio Annotator</title> | |
| <!-- Load Tailwind CSS --><script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" type="text/css" href="/static/css/style.css"> | |
| </head> | |
| <body> | |
| <div class="w-full max-w-4xl p-4 md:p-8 bg-white shadow-2xl rounded-xl relative"> <!-- Added 'relative' here --> | |
| <!-- Logo Added Here --> | |
| <img id="logo" src="/static/logo_white_v2.jpg" alt="App Logo" class="absolute top-4 left-4 h-24"> | |
| <h1 class="text-3xl font-extrabold text-gray-800 mt-6 mb-6 text-center"> <!-- Adjusted mt-6 for logo clearance -->Audio Transcription Tool | |
| </h1> | |
| <!-- File Upload Section --> | |
| <div id="upload-section" class="mb-8 border-2 border-dashed border-gray-300 p-6 rounded-lg bg-gray-50"> | |
| <h2 class="text-xl font-semibold mb-3 text-center text-gray-700">Upload Your Audio Files (WAV/MP3)</h2> | |
| <input type="file" id="audio-files" multiple accept="audio/*" class="w-full text-sm text-gray-500 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-indigo-100 file:text-indigo-700 hover:file:bg-indigo-200"/> | |
| <button | |
| id="upload-button" | |
| onclick="uploadFiles()" | |
| class="mt-4 w-full py-2 bg-indigo-600 text-white font-bold rounded-lg shadow-md hover:bg-indigo-700 transition duration-150 disabled:bg-indigo-400" | |
| > | |
| 🚀 Start Annotation | |
| </button> | |
| <center> | |
| <div style="margin-top:20px;"> | |
| <h2 class="text-xl font-semibold mb-3 text-center text-gray-700">Fine-tune OpenAI/Whisper-small</h2> | |
| <div> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/T9hqu16jDWA?si=IhpKCUmsJ-WAvRzP" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | |
| </div> | |
| <a href="https://colab.research.google.com/github/Kimang18/DoRA-LoRAC-fine-tune-whisper-small/blob/main/Khmer_small_fine_tune_whisper.ipynb"> | |
| <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab" /, width=150, height=150/> | |
| </a> | |
| </div> | |
| <div style="margin-top:20px;"> | |
| <h2 class="text-xl font-semibold mb-3 text-center text-gray-700">Fine-tune Facebook/MMS-1b-all</h2> | |
| <div> | |
| <iframe width="560" height="315" src="https://www.youtube.com/embed/5kfLb1eJbiI?si=5vEVym8k1lvAg_6a" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe> | |
| </div> | |
| <a href="https://colab.research.google.com/github/Kimang18/DoRA-LoRAC-finetune-mms-1b-all/blob/main/Khmer_Fine_Tune_MMS_on_Common_Voice.ipynb"> | |
| <img src="https://colab.research.google.com/assets/colab-badge.svg" alt="Open In Colab" /, width=150, height=150/> | |
| </a> | |
| </div> | |
| </center> | |
| </div> | |
| <!-- Annotation Section (Hidden until files are loaded) --> | |
| <div id="annotation-section" class="hidden"> | |
| <div class="mb-4 text-center"> | |
| <span id="counter" class="text-lg font-medium text-indigo-600">No files loaded.</span> | |
| <span id="filename-display" class="text-sm text-gray-500 block"></span> | |
| <div id="status-message" class="text-sm font-semibold mt-2 h-5"></div> | |
| </div> | |
| <!-- Data Table --><div class="shadow-md rounded-lg mb-6"> | |
| <table class="min-w-full divide-y divide-gray-200 responsive-table"> | |
| <thead class="bg-indigo-50"> | |
| <tr> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-1/2"> | |
| Speaker (Type Here) | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-1/2"> | |
| Transcription (Type Here) | |
| </th> | |
| <th scope="col" class="px-6 py-3 text-left text-xs font-semibold text-gray-600 uppercase tracking-wider w-1/2"> | |
| Audio Playback | |
| </th> | |
| </tr> | |
| </thead> | |
| <tbody class="bg-white divide-y divide-gray-200"> | |
| <tr id="data-row"> | |
| <!-- Speaker's name Text Area --><td data-label="Speaker" class="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900"> | |
| <div id="speaker-text" | |
| contenteditable="true" | |
| class="w-full text-base" | |
| data-placeholder="Enter speaker's name here..."> | |
| </div> | |
| <!-- Transcription Text Area --><td data-label="Transcription" class="px-6 py-4 whitespace-normal text-sm font-medium text-gray-900"> | |
| <div id="transcription-text" | |
| contenteditable="true" | |
| class="w-full text-base" | |
| data-placeholder="Enter your transcription here..."> | |
| </div> | |
| </td> | |
| <!-- Audio Player Widget --><td data-label="Audio" class="px-6 py-4 text-sm text-gray-500 flex items-center justify-center"> | |
| <audio id="audio-player" controls class="w-full max-w-xs md:max-w-none" disabled> | |
| Your browser does not support the audio element. | |
| </audio> | |
| </td> | |
| </tr> | |
| </tbody> | |
| </table> | |
| </div> | |
| <div class="flex justify-center space-x-4 flex-wrap"> <!-- Control Buttons --> | |
| <!-- Previous Button --><button | |
| id="prev-button" | |
| onclick="loadAudio('prev')" | |
| class="mt-3 px-6 py-3 bg-red-500 text-white font-bold rounded-lg shadow-md hover:bg-red-600 transition duration-150 focus:outline-none focus:ring-4 focus:ring-red-500 focus:ring-opacity-50 disabled:bg-gray-400" | |
| disabled | |
| > | |
| « Previous Audio | |
| </button> | |
| <!-- Next Button --><button | |
| id="next-button" | |
| onclick="loadAudio('next')" | |
| class="mt-3 px-6 py-3 bg-green-600 text-white font-bold rounded-lg shadow-md hover:bg-green-700 transition duration-150 focus:outline-none focus:ring-4 focus:ring-green-500 focus:ring-opacity-50 disabled:bg-gray-400" | |
| disabled | |
| > | |
| Next Audio » | |
| </button> | |
| <!-- Download Button --><button | |
| id="download-button" | |
| onclick="downloadAnnotations()" | |
| class="mt-3 px-6 py-3 bg-indigo-600 text-white font-bold rounded-lg shadow-md hover:bg-indigo-700 transition duration-150 focus:outline-none focus:ring-4 focus:ring-indigo-500 focus:ring-opacity-50 disabled:bg-gray-400" | |
| disabled | |
| > | |
| ⬇️ Download Annotated Dataset | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <footer class="mt-8 mb-4 text-center text-gray-500 text-sm w-full max-w-4xl"> | |
| Thanks Huggingface Spaces 🤗 | |
| </footer> | |
| <script src="/static/js/script2.js"></script> | |
| </body> | |
| </html> | |