Files added

README.md

@@ -1,11 +0,0 @@
----
-title: Arabic ASR Flask
-emoji: 🔥
-colorFrom: green
-colorTo: yellow
-sdk: docker
-pinned: false
-license: apache-2.0
----
-
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

app.py

@@ -1,83 +1,85 @@
-import os
-from flask import Flask, request, jsonify, render_template
-from transformers import pipeline
-from flask_cors import CORS
-from pydub import AudioSegment
-from io import BytesIO
+import gradio as gr
+import requests
 import Levenshtein
-
-# Set the FFmpeg paths explicitly
-AudioSegment.converter = "/usr/bin/ffmpeg"
-AudioSegment.ffprobe = "/usr/bin/ffprobe"
-
-# Set Hugging Face cache directory to avoid permission issues
-os.environ['HF_HOME'] = '/tmp/.cache'
-
-app = Flask(__name__)
-CORS(app)
-
-# Use Hugging Face ASR pipeline for automatic speech recognition
-asr_pipeline = pipeline("automatic-speech-recognition", model="jonatasgrosman/wav2vec2-large-xlsr-53-arabic")
-
-
-def convert_to_wav(audio_bytes):
-    """Convert audio bytes to wav format using pydub"""
-    try:
-        audio = AudioSegment.from_file(BytesIO(audio_bytes))  # Auto-detect format
-        wav_io = BytesIO()
-        audio.export(wav_io, format="wav")
-        wav_io.seek(0)
-        return wav_io
-    except Exception as e:
-        print(f"Error converting audio: {e}")
-        return None
-
-
-def transcribe_audio(audio_bytes):
-    """Transcribes the audio using the Hugging Face ASR pipeline."""
-    wav_io = convert_to_wav(audio_bytes)
-    if wav_io is None:
-        raise Exception("Could not convert audio to WAV format")
-
-    # Read the audio file into bytes for the ASR pipeline
-    wav_io.seek(0)
-    transcription = asr_pipeline(wav_io)["text"]
-    return transcription.strip()
-
+import librosa
+import torch
+from transformers import Wav2Vec2ForCTC, Wav2Vec2Processor
+
+def load_model():
+    MODEL_ID = "jonatasgrosman/wav2vec2-large-xlsr-53-arabic"
+    processor = Wav2Vec2Processor.from_pretrained(MODEL_ID)
+    model = Wav2Vec2ForCTC.from_pretrained(MODEL_ID)
+    return processor, model
+
+processor, model = load_model()
+
+def transcribe_audio_hf(audio_path):
+    """
+    Transcribes speech from an audio file using a pretrained Wav2Vec2 model.
+    Args:
+        audio_path (str): Path to the audio file.
+    Returns:
+        str: The transcription of the speech in the audio file.
+    """
+    speech_array, sampling_rate = librosa.load(audio_path, sr=16000)
+    input_values = processor(speech_array, sampling_rate=sampling_rate, return_tensors="pt", padding=True).input_values
+    with torch.no_grad():
+        logits = model(input_values).logits
+    predicted_ids = torch.argmax(logits, dim=-1)
+    transcription = processor.batch_decode(predicted_ids)[0].strip()
+    return transcription
 
 def levenshtein_similarity(transcription1, transcription2):
+    """
+    Calculate the Levenshtein similarity between two transcriptions.
+    Args:
+        transcription1 (str): The first transcription.
+        transcription2 (str): The second transcription.
+    Returns:
+        float: A normalized similarity score between 0 and 1, where 1 indicates identical transcriptions.
+    """
     distance = Levenshtein.distance(transcription1, transcription2)
     max_len = max(len(transcription1), len(transcription2))
-    return 1 - distance / max_len
-
-
-@app.route('/')
-def index():
-    return render_template('index.html')
-
-
-@app.route('/transcribe', methods=['POST'])
-def transcribe():
-    try:
-        original_audio = request.files['original_audio']
-        user_audio = request.files['user_audio']
-
-        original_audio_bytes = original_audio.read()
-        user_audio_bytes = user_audio.read()
-
-        transcription_original = transcribe_audio(original_audio_bytes)
-        transcription_user = transcribe_audio(user_audio_bytes)
-    except Exception as e:
-        return jsonify({"error": str(e)}), 500
-
-    similarity_score = levenshtein_similarity(transcription_original, transcription_user)
-
-    return jsonify({
-        "transcription_original": transcription_original,
-        "transcription_user": transcription_user,
-        "similarity_score": similarity_score
-    })
-
-
-if __name__ == '__main__':
-    app.run(debug=False, port=7860, host='0.0.0.0')
+    return 1 - distance / max_len  # Normalize to get similarity score
+
+def evaluate_audio_similarity(original_audio, user_audio):
+    """
+    Compares the similarity between the transcription of an original audio file and a user's audio file.
+    Args:
+        original_audio (str): Path to the original audio file.
+        user_audio (str): Path to the user's audio file.
+    Returns:
+        tuple: Transcriptions and Levenshtein similarity score.
+    """
+    transcription_original = transcribe_audio_hf(original_audio)
+    transcription_user = transcribe_audio_hf(user_audio)
+    similarity_score_levenshtein = levenshtein_similarity(transcription_original, transcription_user)
+    return transcription_original, transcription_user, similarity_score_levenshtein
+
+def perform_testing(original_audio, user_audio):
+    if original_audio is not None and user_audio is not None:
+        transcription_original, transcription_user, similarity_score = evaluate_audio_similarity(original_audio, user_audio)
+        return (
+            f"**Original Transcription:** {transcription_original}",
+            f"**User Transcription:** {transcription_user}",
+            f"**Levenshtein Similarity Score:** {similarity_score:.2f}"
+        )
+
+# Gradio Interface
+with gr.Blocks() as app:
+    gr.Markdown("# Audio Transcription and Similarity Checker")
+
+    original_audio_upload = gr.Audio(label="Upload Original Audio", type="filepath")
+    user_audio_upload = gr.Audio(label="Upload User Audio", type="filepath")
+    upload_button = gr.Button("Perform Testing")
+    output_original_transcription = gr.Markdown()
+    output_user_transcription = gr.Markdown()
+    output_similarity_score = gr.Markdown()
+
+    upload_button.click(
+        perform_testing,
+        inputs=[original_audio_upload, user_audio_upload],
+        outputs=[output_original_transcription, output_user_transcription, output_similarity_score]
+    )
+
+app.launch()

requirements.txt

@@ -1,5 +1,3 @@
-Flask
-Flask-Cors
 librosa
 torch
 transformers
@@ -7,4 +5,5 @@ pydub
 Levenshtein
 Werkzeug
 gunicorn
+gradio
 

static/script.js

@@ -1,103 +0,0 @@
-let mediaRecorder;
-let audioChunks = [];
-let originalAudioBlob = null;
-let userAudioBlob = null;
-
-document.getElementById('originalAudio').addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    const audioPlayer = document.getElementById('originalAudioPlayer');
-    const fileURL = URL.createObjectURL(file);
-    audioPlayer.src = fileURL;
-    audioPlayer.play();
-    originalAudioBlob = file;
-});
-
-document.getElementById('userAudio').addEventListener('change', function (e) {
-    const file = e.target.files[0];
-    const audioPlayer = document.getElementById('userAudioPlayer');
-    const fileURL = URL.createObjectURL(file);
-    audioPlayer.src = fileURL;
-    audioPlayer.play();
-    userAudioBlob = file;
-});
-
-function startRecording(type) {
-    audioChunks = [];
-
-    navigator.mediaDevices.getUserMedia({ audio: true }).then(stream => {
-        mediaRecorder = new MediaRecorder(stream, { mimeType: 'audio/webm' }); // Default format is webm
-        mediaRecorder.start();
-
-        mediaRecorder.addEventListener("dataavailable", event => {
-            audioChunks.push(event.data);
-        });
-
-        mediaRecorder.addEventListener("stop", () => {
-            const audioBlob = new Blob(audioChunks, { type: 'audio/wav' }); // Save as .wav
-            const audioURL = URL.createObjectURL(audioBlob);
-
-            if (type === 'original') {
-                document.getElementById('originalAudioPlayer').src = audioURL;
-                originalAudioBlob = audioBlob;
-            } else if (type === 'user') {
-                document.getElementById('userAudioPlayer').src = audioURL;
-                userAudioBlob = audioBlob;
-            }
-        });
-    });
-
-    // Add recording animation and disable the start button
-    if (type === 'original') {
-        document.getElementById('recordOriginalAudio').classList.add('recording-active');
-        document.getElementById('recordOriginalAudio').disabled = true;
-        document.getElementById('stopOriginalAudio').disabled = false;
-    } else {
-        document.getElementById('recordUserAudio').classList.add('recording-active');
-        document.getElementById('recordUserAudio').disabled = true;
-        document.getElementById('stopUserAudio').disabled = false;
-    }
-}
-
-function stopRecording(type) {
-    mediaRecorder.stop();
-
-    // Remove recording animation and enable the start button
-    if (type === 'original') {
-        document.getElementById('recordOriginalAudio').classList.remove('recording-active');
-        document.getElementById('recordOriginalAudio').disabled = false;
-        document.getElementById('stopOriginalAudio').disabled = true;
-    } else {
-        document.getElementById('recordUserAudio').classList.remove('recording-active');
-        document.getElementById('recordUserAudio').disabled = false;
-        document.getElementById('stopUserAudio').disabled = true;
-    }
-}
-
-document.getElementById('performTesting').addEventListener('click', function () {
-    if (originalAudioBlob && userAudioBlob) {
-        const formData = new FormData();
-        formData.append('original_audio', originalAudioBlob, 'original_audio.wav');
-        formData.append('user_audio', userAudioBlob, 'user_audio.wav');
-
-        // Show loader
-        document.getElementById('loader').style.display = 'block';
-        document.getElementById('results').style.display = 'none';
-
-        fetch('/transcribe', {
-            method: 'POST',
-            body: formData
-        })
-        .then(response => response.json())
-        .then(data => {
-            // Hide loader and show results
-            document.getElementById('loader').style.display = 'none';
-            document.getElementById('results').style.display = 'block';
-
-            document.getElementById('transcriptionOriginal').innerText = `Original Transcription: ${data.transcription_original}`;
-            document.getElementById('transcriptionUser').innerText = `User Transcription: ${data.transcription_user}`;
-            document.getElementById('similarityScore').innerText = `Similarity Score: ${data.similarity_score.toFixed(2)}`;
-        });
-    } else {
-        alert('Please provide both original and user audio files.');
-    }
-});

static/style.css

@@ -1,173 +0,0 @@
-/* Reset some default browser styles */
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
-
-/* Make the body take up the full viewport height */
-body {
-    font-family: 'Arial', sans-serif;
-    background-color: #2c2f33;
-    color: white;
-    height: 100vh;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-}
-
-/* Center container and add padding for mobile devices */
-.container {
-    width: 90%;
-    max-width: 1200px;
-    margin: auto;
-    text-align: center;
-    padding: 20px;
-    background-color: #1c1e22;
-    border-radius: 12px;
-    box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.4);
-    transition: all 0.3s ease;
-}
-
-/* Add hover effect for container */
-.container:hover {
-    box-shadow: 0px 6px 24px rgba(0, 0, 0, 0.6);
-}
-
-/* Style the headings */
-h1 {
-    margin: 20px 0;
-    font-size: 2.5rem;
-    color: #7289da;
-}
-
-/* Make the audio-panel responsive using flexbox */
-.audio-panel {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: space-around;
-    margin: 20px 0;
-}
-
-.audio-upload {
-    width: 45%;
-    min-width: 300px;
-    padding: 10px;
-    margin-bottom: 20px;
-    background-color: #40444b;
-    border-radius: 10px;
-    transition: transform 0.2s;
-}
-
-.audio-upload:hover {
-    transform: translateY(-5px);
-}
-
-h2 {
-    font-size: 1.25rem;
-    margin-bottom: 10px;
-    color: #99aab5;
-}
-
-/* Style for file input */
-input[type="file"] {
-    display: block;
-    margin: 10px 0;
-    background-color: #7289da;
-    color: white;
-    padding: 10px;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s;
-}
-
-input[type="file"]:hover {
-    background-color: #5b6bb0;
-}
-
-/* Style the audio players */
-audio {
-    width: 100%;
-    margin: 10px 0;
-}
-
-/* Style buttons with consistent design */
-button {
-    padding: 12px 25px;
-    font-size: 1rem;
-    background-color: #7289da;
-    color: white;
-    border: none;
-    border-radius: 5px;
-    cursor: pointer;
-    transition: background-color 0.3s, transform 0.2s;
-    margin: 10px 5px;
-}
-
-button:hover {
-    background-color: #5b6bb0;
-    transform: translateY(-3px);
-}
-
-/* Loader and result display */
-#loader {
-    font-size: 1.25rem;
-    color: #7289da;
-    margin: 20px 0;
-}
-
-.results {
-    margin-top: 20px;
-    background-color: #40444b;
-    padding: 20px;
-    border-radius: 10px;
-    color: #99aab5;
-    text-align: left;
-}
-
-.results h3 {
-    margin-bottom: 10px;
-    color: #7289da;
-}
-
-#results p {
-    font-size: 1.1rem;
-    margin: 5px 0;
-}
-
-/* Media query to ensure responsiveness on smaller screens */
-@media (max-width: 768px) {
-    .audio-upload {
-        width: 100%;
-        margin-bottom: 20px;
-    }
-
-    h1 {
-        font-size: 2rem;
-    }
-
-    button {
-        width: 100%;
-        padding: 15px;
-    }
-}
-
-/* Add recording animation style */
-.recording-active {
-    animation: pulse 1s infinite;
-    background-color: red;
-    color: white;
-}
-
-@keyframes pulse {
-    0% {
-        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0.7);
-    }
-    70% {
-        box-shadow: 0 0 0 10px rgba(255, 0, 0, 0);
-    }
-    100% {
-        box-shadow: 0 0 0 0 rgba(255, 0, 0, 0);
-    }
-}

templates/index.html

@@ -1,52 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Audio Transcription and Similarity Checker</title>
-    <link rel="stylesheet" href="/static/style.css">
-</head>
-<body>
-    <div class="container">
-        <h1>Audio Transcription and Similarity Checker</h1>
-
-        <!-- Audio upload/record panel -->
-        <div class="audio-panel">
-            <div class="audio-upload">
-                <h2>Upload or Record Original Audio</h2>
-                <input type="file" id="originalAudio" accept="audio/*">
-                <audio id="originalAudioPlayer" controls></audio>
-                <br>
-                <button id="recordOriginalAudio" onclick="startRecording('original')">Start Recording</button>
-                <button id="stopOriginalAudio" onclick="stopRecording('original')" disabled>Stop Recording</button>
-            </div>
-            <div class="audio-upload">
-                <h2>Upload or Record User Audio</h2>
-                <input type="file" id="userAudio" accept="audio/*">
-                <audio id="userAudioPlayer" controls></audio>
-                <br>
-                <button id="recordUserAudio" onclick="startRecording('user')">Start Recording</button>
-                <button id="stopUserAudio" onclick="stopRecording('user')" disabled>Stop Recording</button>
-            </div>
-        </div>
-
-        <!-- Button to perform similarity check -->
-        <button id="performTesting">Perform Testing</button>
-
-        <!-- Loader while processing -->
-        <div id="loader" style="display: none;">
-            <p>Processing... Please wait</p>
-        </div>
-
-        <!-- Results section -->
-        <div id="results" class="results" style="display: none;">
-            <h3>Results</h3>
-            <p id="transcriptionOriginal"></p>
-            <p id="transcriptionUser"></p>
-            <p id="similarityScore"></p>
-        </div>
-    </div>
-
-    <script src="/static/script.js"></script>
-</body>
-</html>