Spaces:

EnDevSols
/

ASR-Arabic-JS

Running

App Files Files Community

muzammil-eds commited on Sep 5, 2024

Commit

9997b92

verified ·

1 Parent(s): 2b5efb0

Update index.html

Browse files

Files changed (1) hide show

index.html +113 -23

index.html CHANGED Viewed

@@ -1,29 +1,119 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
-    <meta charset="UTF-8" />
-    <link rel="stylesheet" href="style.css" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Transformers.js - Object Detection</title>
 </head>
 <body>
-    <h1>Object Detection w/ 🤗 Transformers.js</h1>
-    <label id="container" for="upload">
-        <svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path fill="#000"
-                d="M3.5 24.3a3 3 0 0 1-1.9-.8c-.5-.5-.8-1.2-.8-1.9V2.9c0-.7.3-1.3.8-1.9.6-.5 1.2-.7 2-.7h18.6c.7 0 1.3.2 1.9.7.5.6.7 1.2.7 2v18.6c0 .7-.2 1.4-.7 1.9a3 3 0 0 1-2 .8H3.6Zm0-2.7h18.7V2.9H3.5v18.7Zm2.7-2.7h13.3c.3 0 .5 0 .6-.3v-.7l-3.7-5a.6.6 0 0 0-.6-.2c-.2 0-.4 0-.5.3l-3.5 4.6-2.4-3.3a.6.6 0 0 0-.6-.3c-.2 0-.4.1-.5.3l-2.7 3.6c-.1.2-.2.4 0 .7.1.2.3.3.6.3Z">
-            </path>
-        </svg>
-        Click to upload image
-        <label id="example">(or try example)</label>
-    </label>
-    <label id="status">Loading model...</label>
-    <input id="upload" type="file" accept="image/*" />
-    <script src="index.js" type="module"></script>
-</body>
-</html>

 <!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>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            background-color: #f4f4f4;
+            padding: 20px;
+        }
+        .container {
+            max-width: 700px;
+            margin: 0 auto;
+            background: #fff;
+            padding: 20px;
+            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+        }
+        h1 {
+            text-align: center;
+        }
+        .button {
+            background-color: #e8b62c;
+            color: white;
+            padding: 10px 20px;
+            text-align: center;
+            cursor: pointer;
+            border: none;
+            margin-top: 10px;
+            display: block;
+            width: 100%;
+        }
+        .audio-upload {
+            margin-top: 20px;
+            text-align: center;
+        }
+        .result {
+            margin-top: 20px;
+        }
+    </style>
 </head>
 <body>
+    <div class="container">
+        <h1>Audio Transcription and Similarity Checker</h1>
+        <div id="original-audio" class="audio-upload">
+            <h2>Upload Original Audio</h2>
+            <input type="file" id="originalFile" accept="audio/*">
+        </div>
+        <div id="user-audio" class="audio-upload">
+            <h2>Upload User Audio</h2>
+            <input type="file" id="userFile" accept="audio/*">
+        </div>
+        <button id="transcribeButton" class="button">Perform Transcription and Testing</button>
+        <div id="result" class="result"></div>
+    </div>
+    <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers"></script>
+    <script>
+        const MODEL_ID = "facebook/wav2vec2-large-960h";  // Sample model, change if necessary
+        let processor, model;
+        // Load model and processor
+        async function loadModel() {
+            processor = await transformers.AutoProcessor.from_pretrained(MODEL_ID);
+            model = await transformers.Wav2Vec2ForCTC.from_pretrained(MODEL_ID);
+        }
+        async function transcribe(audioFile) {
+            const arrayBuffer = await audioFile.arrayBuffer();
+            const audioData = new Float32Array(arrayBuffer);
+            const inputValues = processor(audioData, {return_tensors: "pt", padding: true}).input_values;
+            const logits = await model(inputValues).logits;
+            const predicted_ids = logits.argmax(-1);
+            const transcription = processor.decode(predicted_ids, {skip_special_tokens: true});
+            return transcription;
+        }
+        document.getElementById("transcribeButton").addEventListener("click", async () => {
+            const originalFile = document.getElementById("originalFile").files[0];
+            const userFile = document.getElementById("userFile").files[0];
+            if (originalFile && userFile) {
+                const transcriptionOriginal = await transcribe(originalFile);
+                const transcriptionUser = await transcribe(userFile);
+                const levenshteinDistance = (a, b) => {
+                    let dp = Array.from({length: a.length + 1}, () => Array(b.length + 1).fill(0));
+                    for (let i = 0; i <= a.length; i++) dp[i][0] = i;
+                    for (let j = 0; j <= b.length; j++) dp[0][j] = j;
+                    for (let i = 1; i <= a.length; i++) {
+                        for (let j = 1; j <= b.length; j++) {
+                            dp[i][j] = a[i - 1] === b[j - 1] ? dp[i - 1][j - 1] : Math.min(dp[i - 1][j], dp[i][j - 1], dp[i - 1][j - 1]) + 1;
+                        }
+                    }
+                    return dp[a.length][b.length];
+                };
+                const similarityScore = 1 - levenshteinDistance(transcriptionOriginal, transcriptionUser) / Math.max(transcriptionOriginal.length, transcriptionUser.length);
+                document.getElementById("result").innerHTML = `
+                    <h2>Transcription Results</h2>
+                    <p><strong>Original Transcription:</strong> ${transcriptionOriginal}</p>
+                    <p><strong>User Transcription:</strong> ${transcriptionUser}</p>
+                    <p><strong>Levenshtein Similarity Score:</strong> ${similarityScore.toFixed(2)}</p>
+                `;
+            } else {
+                alert("Please upload both audio files.");
+            }
+        });
+        loadModel();
+    </script>
+</body>
+</html>