add application files and dependencies based on project audio-annotator

Dockerfile

@@ -0,0 +1,19 @@
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+
+# create the uploads directory inside the container
+RUN mkdir -p /app/uploaded_audio
+CMD ["uvicorn", "main:app", "--host", "0.0.0.0", "--port", "7860"]

main.py

@@ -0,0 +1,252 @@
+from typing import List, Dict, Any
+import os
+import shutil
+import uuid
+from fastapi import FastAPI, Request, UploadFile, File, HTTPException
+from fastapi.responses import HTMLResponse, JSONResponse
+from fastapi.templating import Jinja2Templates
+from fastapi.staticfiles import StaticFiles
+from starlette.middleware.sessions import SessionMiddleware
+from starlette.responses import FileResponse
+from starlette.background import BackgroundTask
+from pydantic import BaseModel
+from datasets import Dataset, Audio
+
+
+# --- Pydantic Models for Data Validation/Serialization ---
+class SaveAnnotationRequest(BaseModel):
+    """Model for the POST request payload to save transcription."""
+    index: int
+    transcription: str
+    speaker: str
+
+class AudioDataResponse(BaseModel):
+    """Model for the GET response when loading an audio row."""
+    index: int
+    filename: str
+    transcription: str
+    speaker: str
+    max_index: int
+
+
+# --- Configuration and Global State ---
+
+# Directory to save user-uploaded audio files
+UPLOAD_DIR = "./uploaded_audio"
+# Data structure to hold the annotation state: {f'{user_id}': [{"filename": str, "speaker": str, "transcription": str}]}
+ANNOTATION_DATA: Dict[str, List[Dict[str, Any]]] = {}
+# Index of the audio file currently being displayed/annotated
+current_index: Dict[str, int] = {}
+
+# Ensure the upload directory exists
+os.makedirs(UPLOAD_DIR, exist_ok=True)
+
+
+# --- FastAPI Setup ---
+app = FastAPI(title="Audio Annotation Tool with File Upload")
+app.mount("/static", StaticFiles(directory="./static", html=True), name="static")
+app.add_middleware(SessionMiddleware, secret_key="audio-annotator-application")
+templates = Jinja2Templates(directory="./templates")
+
+# --- Utility Functions ---
+
+
+def load_data_for_index(user_id: int, index: int) -> Dict[str, Any]:
+    """Helper to safely fetch data for a given index."""
+    if not ANNOTATION_DATA[user_id]:
+        return {"index": -1, "filename": "", "transcription": "No files uploaded yet.", "speaker": "No files uploaded yet.", "max_index": 0}
+    if 0 <= index < len(ANNOTATION_DATA[user_id]):
+        item = ANNOTATION_DATA[user_id][index]
+        return {
+            "index": index,
+            "filename": item['filename'],
+            "transcription": item['transcription'],
+            "speaker": item['speaker'],
+            "max_index": len(ANNOTATION_DATA[user_id])
+        }
+    else:
+        # Wrap around if needed, or handle boundary cases
+        raise IndexError("Index out of bounds.")
+
+def get_user_directory(user_id):
+    return os.path.join(UPLOAD_DIR, f'{user_id}')
+
+def serve_index_html(request: Request):
+    try:
+        user_id = request.session.get('_id', None)
+        if user_id is None:
+            user_id = str(uuid.uuid4())
+            request.session['_id'] = user_id
+            # Ensure the upload directory exists
+            # print(user_id)
+            user_dir = get_user_directory(user_id)
+            os.makedirs(user_dir, exist_ok=True)
+            ANNOTATION_DATA[user_id] = []
+            current_index[user_id] = -1
+
+        return templates.TemplateResponse("index.html", context={"request": request})
+    except FileNotFoundError:
+        return HTMLResponse(content="<h1>Server Error: index.html not found.</h1>", status_code=500)
+
+
+# --- Routes ---
+
+
+@app.get("/")
+async def index(request: Request):
+    """Serves the main application page by reading index.html."""
+    return serve_index_html(request)
+
+
+@app.get("/annotate")
+async def annotate(request: Request):
+    """Serves the main application page by reading index.html."""
+    return serve_index_html(request)
+
+
+@app.post("/upload_audio")
+async def upload_audio(request: Request, audio_files: List[UploadFile] = File(...)):
+    """Handles multiple audio file uploads from the client."""
+    global ANNOTATION_DATA, current_index
+    new_files_count = 0
+    user_id = request.session.get('_id', None)
+
+    # Reset index if this is the first upload
+    if not ANNOTATION_DATA[user_id]:
+        current_index[user_id] = 0
+
+    for file in audio_files:
+        # Construct the full path
+        user_dir = get_user_directory(user_id)
+        file_path = os.path.join(user_dir, file.filename)
+
+        # Save the file to disk
+        try:
+            with open(file_path, "wb") as buffer:
+                # Read the file chunk by chunk to handle large files
+                shutil.copyfileobj(file.file, buffer)
+
+            # Update the annotation data structure
+            ANNOTATION_DATA[user_id].append({
+                "filename": file.filename,
+                "transcription": "",  # Initialize transcription as empty,
+                "speaker": ""  # Initialize speaker as empty
+            })
+            new_files_count += 1
+        except Exception as e:
+            print(f"Error saving file {file.filename}: {e}")
+            raise HTTPException(status_code=500, detail=f"Failed to save file: {file.filename}")
+
+    return JSONResponse({
+        "message": f"Successfully uploaded {new_files_count} files.",
+        "total_files": len(ANNOTATION_DATA[user_id])
+    })
+
+
+@app.post("/save_annotation")
+async def save_annotation(request: Request, data: SaveAnnotationRequest):
+    """Saves the transcription for the current index."""
+    try:
+        user_id = request.session.get('_id', None)
+        index_to_save = data.index
+
+        if 0 <= index_to_save < len(ANNOTATION_DATA[user_id]):
+            # Update the transcription text
+            ANNOTATION_DATA[user_id][index_to_save]["transcription"] = data.transcription
+            ANNOTATION_DATA[user_id][index_to_save]["speaker"] = data.speaker
+            return JSONResponse({"success": True, "message": f"Row {index_to_save + 1} saved."})
+        else:
+            raise HTTPException(status_code=400, detail="Invalid index for saving.")
+
+    except Exception as e:
+        print(f"Error during save: {e}")
+        raise HTTPException(status_code=500, detail=f"Internal server error: {str(e)}")
+
+
+@app.get("/load_audio_data/{direction}")
+async def load_audio_data(request: Request, direction: str):
+    """Loads the audio data and increments/decrements the current_index."""
+    global current_index
+    user_id = request.session.get('_id', None)
+
+    if not ANNOTATION_DATA[user_id]:
+        return JSONResponse(load_data_for_index(user_id, -1))
+
+    new_index = current_index[user_id]
+    max_len = len(ANNOTATION_DATA[user_id])
+
+    if direction == 'next':
+        new_index = (current_index[user_id] + 1) % max_len
+    elif direction == 'prev':
+        # Handles wrapping from 0 back to the last index
+        new_index = (current_index[user_id] - 1 + max_len) % max_len
+    else:
+        # 'current' direction is used for initial load or after upload
+        pass
+
+    try:
+        data = load_data_for_index(user_id, new_index)
+        # Only update the global index if navigation was successful
+        current_index[user_id] = new_index
+        return JSONResponse(data)
+    except IndexError:
+        raise HTTPException(status_code=404, detail="No more audio files to load.")
+
+
+@app.get("/audio_file/{filename}")
+async def serve_audio_file(request: Request, filename: str):
+    """Streams the requested audio file from the upload directory."""
+    user_id = request.session.get('_id', None)
+    user_dir = get_user_directory(user_id)
+    file_path = os.path.join(user_dir, filename)
+
+    if os.path.exists(file_path):
+        # FileResponse sends the file directly, optimized for binary streams
+        return FileResponse(file_path, media_type="audio/wav") # Assume WAV for simplicity, use relevant type if required
+
+    raise HTTPException(status_code=404, detail="Audio file not found.")
+
+
+@app.get("/download_annotations")
+async def download_annotations(request: Request):
+    """Returns the entire annotated dataset as a downloadable JSON file."""
+    global current_index, ANNOTATION_DATA
+    user_id = request.session.get('_id', None)
+
+    if not ANNOTATION_DATA[user_id]:
+        raise HTTPException(status_code=404, detail="No annotations available to download.")
+
+    user_dir = get_user_directory(user_id)
+    # Convert the dataset to Dataset
+    data = {"audio": [], "transcription": [], "speaker": []}
+    for item in ANNOTATION_DATA[user_id]:
+        data['audio'].append(os.path.join(user_dir, item['filename']))
+        data['transcription'].append(item['transcription'])
+        data['speaker'].append(item['speaker'])
+    # print(data)
+    ds = Dataset.from_dict(data).cast_column('audio', Audio(sampling_rate=16000))
+    dataset_dir = os.path.join(user_dir, 'dataset')
+    ds.save_to_disk(dataset_dir)
+
+    # Write the content to a temporary file
+    zip_dir = os.path.join(user_dir, 'final')
+    shutil.make_archive(zip_dir, 'zip', dataset_dir)
+    # Create a temporary file path
+    temp_file = f'{zip_dir}.zip'
+
+    def cleanup_file():
+        try:
+            shutil.rmtree(user_dir)
+            os.makedirs(user_dir)
+        except Exception as e:
+            print(f"Error deleting directory {user_dir}: {e}")
+        ANNOTATION_DATA[user_id] = []
+        current_index[user_id] = -1
+
+    # Return the file, which will be deleted after being sent
+    return FileResponse(
+        path=temp_file,
+        filename='annotated_data.zip',
+        media_type="application/zip",
+        background=BackgroundTask(cleanup_file)
+    )

requirements.txt

@@ -0,0 +1,7 @@
+fastapi
+uvicorn[standard]
+python-multipart
+itsdangerous
+jinja2
+datasets[audio]
+numpy

static/css/style.css

@@ -0,0 +1,57 @@
+/* Custom styles for the table for better mobile viewing */
+@media (max-width: 768px) {
+    .responsive-table tr {
+        display: block;
+        margin-bottom: 0.75rem;
+        border-bottom: 2px solid #e5e7eb;
+    }
+    .responsive-table th, .responsive-table td {
+        display: block;
+        text-align: right;
+        padding: 0.5rem 1rem;
+    }
+    .responsive-table td::before {
+        content: attr(data-label);
+        float: left;
+        font-weight: 600;
+        color: #4b5563;
+    }
+    .responsive-table thead {
+        display: none;
+    }
+}
+/* Ensure the body uses the Inter font, centers content, and stacks vertically */
+body {
+    font-family: 'Inter', sans-serif;
+    background-color: #f3f4f6;
+    display: flex;
+    flex-direction: column; /* FIX: Stack children vertically */
+    justify-content: flex-start;
+    align-items: center; /* FIX: Center content horizontally */
+    min-height: 100vh;
+    padding-top: 2rem;
+    padding-bottom: 2rem;
+}
+[contenteditable="true"] {
+    border: 1px solid #c7d2fe;
+    background-color: #f0f4ff;
+    padding: 0.75rem;
+    cursor: text;
+    min-height: 5rem;
+    border-radius: 0.5rem;
+    transition: border-color 0.15s ease-in-out;
+    resize: vertical; /* Allow vertical resizing for long transcriptions */
+    overflow: auto;
+}
+[contenteditable="true"]:focus {
+    outline: none;
+    border-color: #4f46e5;
+    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.5);
+}
+/* New CSS for Contenteditable Placeholder */
+[contenteditable][data-placeholder]:empty::before {
+    content: attr(data-placeholder);
+    color: #9ca3af; /* A light grey color */
+    pointer-events: none; /* Allows the user to click the div to type */
+    display: block;
+}

static/js/script.js

@@ -0,0 +1,298 @@
+
+// Global variables for tracking state
+let currentDataIndex = -1; 
+let maxDataIndex = 0;
+let isUploading = false;
+
+const BASE_URL = window.location.origin;
+
+// Elements
+const uploadSection = document.getElementById('upload-section');
+const annotationSection = document.getElementById('annotation-section');
+const uploadButton = document.getElementById('upload-button');
+const nextButton = document.getElementById('next-button');
+const prevButton = document.getElementById('prev-button');
+const downloadButton = document.getElementById('download-button');
+const counter = document.getElementById('counter');
+const filenameDisplay = document.getElementById('filename-display');
+const audioPlayer = document.getElementById('audio-player');
+const transcriptionText = document.getElementById('transcription-text');
+const speakerText = document.getElementById('speaker-text');
+const statusMessage = document.getElementById('status-message');
+const audioFilesInput = document.getElementById('audio-files');
+
+// --- Routing and Navigation Functions ---
+
+/** Changes the URL path and pushes state to history without reloading. */
+function navigateTo(path) {
+    window.history.pushState(null, '', path);
+    router();
+}
+
+/** Controls the view shown based on the current URL path and server state. */
+async function router() {
+    // Normalize path to handle both '/' and '/index' as root
+    const path = window.location.pathname.replace(/\/+$/, ''); // Remove trailing slash
+    
+    // 1. Reset visibility for all sections
+    uploadSection.classList.add('hidden');
+    annotationSection.classList.add('hidden');
+
+    const isAnnotationPath = path === '/annotate';
+    console.log(isAnnotationPath);
+
+    if (isAnnotationPath) {
+        // Route: /annotate
+        annotationSection.classList.remove('hidden');
+        
+        // Attempt to load data from the server. This determines if a session exists.
+        const initialData = await loadAudio('current');
+        
+        // If the backend returns index: -1, it means no files are loaded.
+        if (initialData && initialData.index === -1) {
+            navigateTo('/');
+        }
+    } else { 
+        // Route: / or /index
+        // Always show upload form initially, but check if we should redirect to annotation
+        
+        // Check server state to see if any files are currently loaded
+        const checkData = await loadAudio('current', { suppressNavigation: true });
+        
+        if (checkData && checkData.index !== -1) {
+            // Files exist on the server, redirect to annotation screen
+            navigateTo('/annotate');
+        } else {
+            // No files loaded, stay on upload page
+            uploadSection.classList.remove('hidden');
+        }
+    }
+}
+
+// --- Core Application Functions ---
+
+/** Sets the status message with a specified color/style. */
+function setStatus(message, type = 'info') {
+    let color = 'text-gray-600';
+    if (type === 'success') color = 'text-green-600';
+    else if (type === 'error') color = 'text-red-600';
+    else if (type === 'warn') color = 'text-yellow-600';
+    else if (type === 'loading') color = 'text-indigo-600';
+    
+    statusMessage.className = `text-sm font-semibold mt-2 h-5 ${color}`;
+    statusMessage.textContent = message;
+}
+
+/** Disables/enables navigation buttons. */
+function toggleNavigationButtons(disabled) {
+    nextButton.disabled = disabled;
+    prevButton.disabled = disabled;
+    downloadButton.disabled = disabled;
+    audioPlayer.disabled = disabled;
+    transcriptionText.contentEditable = disabled ? 'false' : 'true';
+    speakerText.contentEditable = disabled ? 'false' : 'true';
+}
+
+/** 1. Handles file upload to the server. */
+async function uploadFiles() {
+    if (isUploading) return;
+    const files = audioFilesInput.files;
+
+    if (files.length === 0) {
+        setStatus("Please select at least one audio file.", 'warn');
+        return;
+    }
+
+    isUploading = true;
+    uploadButton.disabled = true;
+    setStatus(`Uploading ${files.length} file(s)...`, 'loading');
+
+    try {
+        const formData = new FormData();
+        for (let i = 0; i < files.length; i++) {
+            formData.append("audio_files", files[i]);
+        }
+
+        const response = await fetch(`${BASE_URL}/upload_audio`, {
+            method: 'POST',
+            body: formData
+        });
+
+        if (!response.ok) {
+            throw new Error(`Upload failed with status: ${response.status}`);
+        }
+        const result = await response.json();
+        
+        setStatus(result.message, 'success');
+        
+        // Switch UI and load the first file
+        // uploadSection.classList.add('hidden');
+        // annotationSection.classList.remove('hidden');
+        // await loadAudio('current');
+        navigateTo('/annotate');
+
+    } catch (error) {
+        console.error("Upload error:", error);
+        setStatus("An error occurred during upload. Check console for details.", 'error');
+    } finally {
+        isUploading = false;
+        uploadButton.disabled = false;
+    }
+}
+
+/** 2. Saves the current transcription before navigating. */
+async function saveCurrentAnnotation() {
+    if (currentDataIndex < 0 || maxDataIndex === 0) return;
+
+    const textToSave = transcriptionText.textContent.trim();
+    const nameToSave = speakerText.textContent.trim();
+    setStatus(`Saving File ${currentDataIndex + 1}...`, 'loading');
+
+    try {
+        const response = await fetch(`${BASE_URL}/save_annotation`, {
+            method: 'POST',
+            headers: { 'Content-Type': 'application/json' },
+            body: JSON.stringify({
+                index: currentDataIndex,
+                transcription: textToSave,
+                speaker: nameToSave
+            })
+        });
+
+        if (!response.ok) {
+            const errorDetails = await response.json();
+            throw new Error(errorDetails.detail || "Failed to save annotation.");
+        }
+        
+        setStatus(`File ${currentDataIndex + 1} saved.`, 'success');
+    } catch (error) {
+        console.error("Save failed:", error);
+        setStatus(`Save failed for File ${currentDataIndex + 1}.`, 'error');
+    }
+}
+
+
+/** 3. Loads audio data based on direction ('next', 'prev', 'current'). */
+async function loadAudio(direction, options = {}) {
+    const { suppressNavigation = false } = options;
+
+    if (!suppressNavigation) {
+        toggleNavigationButtons(true);
+        
+        // 1. Save the current state before navigating
+        if (direction !== 'current') {
+            await saveCurrentAnnotation();
+        } else {
+            // Clear initial state message for fresh load
+            setStatus("Loading audio data...", 'loading');
+        }
+    }
+
+    try {
+        // The server determines the correct index based on 'direction' and its internal state
+        const response = await fetch(`${BASE_URL}/load_audio_data/${direction}`);
+
+        if (!response.ok) {
+            throw new Error(`HTTP error! status: ${response.status}`);
+        }
+        const data = await response.json();
+
+        if (data.index === -1) {
+            // Handle the initial state before files are uploaded
+            counter.textContent = "No files loaded.";
+            filenameDisplay.textContent = "";
+            transcriptionText.textContent = "Please upload audio files to begin annotation.";
+            transcriptionText.contentEditable = 'false';
+            speakerText.textContent = "Please upload audio files to begin annotation.";
+            speakerText.contentEditable = 'false';
+            toggleNavigationButtons(true);
+            return data; // Return data for router to check
+        }
+        
+        // Update global state
+        currentDataIndex = data.index;
+        maxDataIndex = data.max_index;
+
+        // 2. Update text fields and counter
+        transcriptionText.textContent = data.transcription;
+        speakerText.textContent = data.speaker;
+        counter.textContent = `File ${currentDataIndex + 1} of ${maxDataIndex}`;
+        filenameDisplay.textContent = `File: ${data.filename}`;
+
+        // 3. Update the audio player source
+        const audioSourceUrl = `${BASE_URL}/audio_file/${data.filename}`;
+        audioPlayer.src = audioSourceUrl;
+        audioPlayer.load();
+        
+        // Clear status unless a save operation just happened
+        if (!statusMessage.textContent.includes("saved")) {
+            statusMessage.textContent = "";
+        }
+
+        // Attempt to play the audio immediately
+        try {
+            await audioPlayer.play();
+        } catch (e) {
+            // Fail gracefully if autoplay is blocked
+            console.log("Autoplay prevented by browser.", e);
+        }
+
+        toggleNavigationButtons(false);
+        return data;
+
+    } catch (error) {
+        console.error("Navigation error:", error);
+        setStatus("Error loading audio. Please try reloading or uploading files.", 'error');
+        transcriptionText.textContent = "Error loading data.";
+        speakerText.textContent = "Error loading data.";
+        toggleNavigationButtons(true);
+        return { index: -1 }; // Return -1 on catastrophic error
+    } 
+}
+
+/** 4. Triggers the download of the annotated dataset. */
+async function downloadAnnotations() {
+    downloadButton.disabled = true;
+    setStatus("Preparing annotated data for download...", 'loading');
+
+    try {
+        const response = await fetch(`${BASE_URL}/download_annotations`);
+        if (!response.ok) {
+            throw new Error(`Download failed with status: ${response.status}`);
+        }
+        
+        // Get the blob and trigger download
+        const blob = await response.blob();
+        const url = window.URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.style.display = 'none';
+        a.href = url;
+        // const date = new Date().toISOString().slice(0, 10);
+        // a.download = `annotations_${date}.json`;
+        a.download = `annotated_data.zip`;
+        document.body.appendChild(a);
+        a.click();
+        window.URL.revokeObjectURL(url);
+        
+        setStatus("Download complete! Session cleared", 'success');
+        
+        // Navigate back to the upload page to start fresh
+        navigateTo('/'); 
+
+    } catch (error) {
+        console.error("Download error:", error);
+        setStatus("Error downloading annotations.", 'error');
+    } finally {
+        downloadButton.disabled = false;
+    }
+}
+
+
+// Load initial state and set up routing listeners
+window.onload = () => {
+     // Handle back/forward buttonn clicks by rerunning the router
+     window.onpopstate = router;
+     
+     // Initial route call
+     router();
+};

templates/index.html

@@ -0,0 +1,115 @@
+<!DOCTYPE html>
+<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>
+        </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
+                >
+                    &laquo; 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 &raquo;
+                </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/script.js"></script>
+</body>
+</html>