Spaces:

IqraEval
/

ArabicPhoneme

Running

App Files Files Community

01Yassine commited on Jun 10

Commit

c1b5b1d

verified ·

1 Parent(s): 3d79f66

Update index.html

Browse files

Files changed (1) hide show

index.html +150 -17

index.html CHANGED Viewed

@@ -1,19 +1,152 @@
 <!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
 </html>

 <!doctype html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width" />
+  <title>Phonemes Used – Iqra’Eval</title>
+  <style>
+    :root {
+      --navy-blue: #001f4d;
+      --coral: #ff6f61;
+      --light-gray: #f5f7fa;
+      --text-dark: #222;
+    }
+    body {
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      background-color: var(--light-gray);
+      color: var(--text-dark);
+      margin: 20px;
+      line-height: 1.6;
+    }
+    h1, h2 {
+      color: var(--navy-blue);
+      font-weight: 700;
+      margin-top: 1.2em;
+    }
+    h1 {
+      text-align: center;
+      font-size: 2.5rem;
+      margin-bottom: 0.5em;
+    }
+    h2 {
+      border-bottom: 3px solid var(--coral);
+      padding-bottom: 0.3em;
+      font-size: 1.8rem;
+    }
+    p {
+      max-width: 900px;
+      margin: 0.8em auto;
+    }
+    code {
+      background-color: #eef4f8;
+      color: var(--navy-blue);
+      padding: 2px 6px;
+      border-radius: 4px;
+      font-family: Consolas, monospace;
+      font-size: 0.9em;
+    }
+    a {
+      color: var(--coral);
+      text-decoration: none;
+    }
+    a:hover { text-decoration: underline; }
+    .card {
+      max-width: 960px;
+      background: white;
+      margin: 0 auto 40px;
+      padding: 2em 2.5em;
+      box-shadow: 0 4px 14px rgba(0,0,0,0.1);
+      border-radius: 12px;
+    }
+    .table-container {
+      overflow-x: auto;
+      margin: 1.5em auto;
+      max-width: 100%;
+    }
+    table {
+      border-collapse: collapse;
+      width: 100%;
+      min-width: 800px;
+    }
+    th, td {
+      border: 1px solid #ccc;
+      padding: 8px 10px;
+      text-align: center;
+      font-size: 0.9em;
+    }
+    th {
+      background-color: var(--navy-blue);
+      color: white;
+      font-weight: 600;
+    }
+    tr:nth-child(even) {
+      background-color: #f9fbfc;
+    }
+  </style>
+</head>
+<body>
+  <div class="card">
+    <h1>Phonemes Used</h1>
+    <p>
+      Since our goal is to detect mispronounced sounds in Qur’anic recitation, the model learns to recognize the sequence of pronounced phonemes and compare it to the target. We use the Nawar Halabi phonetizer for vowelized MSA (no tajweed rules), which covers stress, pausing, intonation, emphaticness, diphones, and gemination. Geminated consonants are represented by doubling the symbol (e.g., <code>/b/ → /bb/</code>), yielding 68 phonemes in total.
+    </p>
+    <div class="table-container">
+      <table>
+        <thead>
+          <tr>
+            <th>Arabic</th>
+            <th>IPA</th>
+            <th>Encoding</th>
+            <th>Arabic</th>
+            <th>IPA</th>
+            <th>Encoding</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr>
+            <td>ء</td><td>ʔ</td><td>&lt;</td>
+            <td>ب</td><td>b</td><td>b</td>
+          </tr>
+          <tr>
+            <td>ءّ</td><td>ʔʔ</td><td>&lt;&lt;</td>
+            <td>بّ</td><td>bb</td><td>bb</td>
+          </tr>
+          <tr>
+            <td>ت</td><td>t</td><td>t</td>
+            <td>تّ</td><td>tt</td><td>tt</td>
+          </tr>
+          <tr>
+            <td>ث</td><td>θ</td><td>^</td>
+            <td>ثّ</td><td>θθ</td><td>^^</td>
+          </tr>
+          <tr>
+            <td>ج</td><td>ʒ</td><td>j</td>
+            <td>جّ</td><td>ʒʒ</td><td>jj</td>
+          </tr>
+          <tr>
+            <td>ح</td><td>ħ</td><td>H</td>
+            <td>حّ</td><td>ħħ</td><td>HH</td>
+          </tr>
+          <tr>
+            <td>خ</td><td>χ</td><td>x</td>
+            <td>خّ</td><td>γχχ</td><td>xx</td>
+          </tr>
+          <tr>
+            <td>د</td><td>d</td><td>d</td>
+            <td>دّ</td><td>dd</td><td>dd</td>
+          </tr>
+          <tr>
+            <td>ذ</td><td>ð</td><td>Z</td>
+            <td>ذّ</td><td>ðð</td><td>**</td>
+          </tr>
+          <!-- continue rows for ر, ز, س, ش, ص, ض, ط, ظ, ع, غ, ف, ق, ك, ل, م, ن, ه, و*, ي*, ا, etc. -->
+        </tbody>
+      </table>
+    </div>
+    <p>
+      For the full phoneme inventory (all 68 symbols, including vowels & diphthongs) and examples of use, see our <a href="phoneme_inventory.html">Phoneme Inventory details page</a>.
+    </p>
+  </div>
+</body>
 </html>