Refactor code structure for improved readability and maintainability

.gitattributes

@@ -33,3 +33,4 @@ saved_model/**/* filter=lfs diff=lfs merge=lfs -text
 *.zip filter=lfs diff=lfs merge=lfs -text
 *.zst filter=lfs diff=lfs merge=lfs -text
 *tfevents* filter=lfs diff=lfs merge=lfs -text
+*.png filter=lfs diff=lfs merge=lfs -text

app/main.py

@@ -19,6 +19,7 @@ from pathlib import Path
 from dotenv import load_dotenv
 from fastapi import FastAPI, File, Form, HTTPException, Query, UploadFile
 from fastapi.responses import HTMLResponse, Response
+from fastapi.staticfiles import StaticFiles
 
 from .phrases import CATEGORIES, LESSONS, PHRASES, public_phrases
 from .prompt_tts import ENGINES, PromptTTSUnavailable, hebrew_mp3
@@ -53,6 +54,7 @@ def create_app(scorer: Scorer | None = None, tts: SawtakTTS | None = None) -> Fa
         yield
 
     app = FastAPI(title="ihki", lifespan=lifespan)
+    app.mount("/static", StaticFiles(directory=STATIC), name="static")
 
     @app.get("/")
     def index():

arabic_splash/README.md

@@ -0,0 +1,12 @@
+# Animated splash for FastAPI / HTML
+
+Run locally:
+
+```bash
+pip install -r requirements.txt
+uvicorn app:app --host 0.0.0.0 --port 7860
+```
+
+For Hugging Face Spaces Docker, run uvicorn on port 7860 and expose port 7860 in your Dockerfile.
+
+To integrate into an existing project: copy static/logo.png, splash.css, splash.js; add the stylesheet to your HTML head, the `#app-splash` div from index.html at the beginning of body, and the JS script at the end of body. Ensure your FastAPI app serves /static. The demo uses three clipped copies of the original image, preserving the logo exactly. It is a reveal animation, not true vector stroke tracing.

arabic_splash/app.py

@@ -0,0 +1,12 @@
+from pathlib import Path
+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+
+BASE = Path(__file__).resolve().parent
+app = FastAPI()
+app.mount('/static', StaticFiles(directory=BASE / 'static'), name='static')
+
+@app.get('/')
+def home():
+    return FileResponse(BASE / 'index.html')

arabic_splash/index.html

@@ -0,0 +1,20 @@
+<!doctype html>
+<html lang="he" dir="rtl">
+<head>
+  <meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1">
+  <title>Arabic School — Splash Demo</title>
+  <link rel="stylesheet" href="/static/splash.css">
+  <style>body{margin:0;font-family:system-ui,sans-serif;background:#faf9f6;color:#252525}main{max-width:720px;margin:12vh auto;padding:24px;text-align:center}button{padding:12px 20px;border:1px solid #333;background:white;border-radius:8px;cursor:pointer}</style>
+</head>
+<body>
+  <div id="app-splash" role="status" aria-label="האפליקציה נטענת">
+    <div class="splash-art" aria-hidden="true">
+      <img class="splash-layer splash-symbol" src="/static/logo.png" alt="">
+      <img class="splash-layer splash-arabic" src="/static/logo.png" alt="">
+      <img class="splash-layer splash-hebrew" src="/static/logo.png" alt="">
+    </div>
+  </div>
+  <main><h1>ברוכים הבאים</h1><p>זהו מסך הדגמה. החליפו את התוכן הזה בממשק האפליקציה שלכם.</p><button onclick="location.reload()">הפעל את האנימציה שוב</button></main>
+  <script src="/static/splash.js" defer></script>
+</body>
+</html>

arabic_splash/requirements.txt

@@ -0,0 +1,2 @@
+fastapi
+uvicorn

arabic_splash/static/splash.css

@@ -0,0 +1,12 @@
+:root { --splash-bg: #fff; --splash-duration: 3100ms; }
+#app-splash { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; background:var(--splash-bg); transition:opacity .45s ease, visibility .45s ease; }
+#app-splash.splash-done { opacity:0; visibility:hidden; pointer-events:none; }
+.splash-art { position:relative; width:min(88vw, 560px); aspect-ratio:489/225; }
+.splash-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
+.splash-symbol { clip-path:polygon(64% 0,100% 0,100% 100%,64% 100%); animation:symbol-in .95s ease-out both; transform-origin:82% 48%; }
+.splash-arabic { clip-path:polygon(0 0,65% 0,65% 72%,0 72%); animation:arabic-in 1.05s .65s ease-out both; }
+.splash-hebrew { clip-path:polygon(0 69%,65% 69%,65% 100%,0 100%); animation:hebrew-in .65s 1.6s ease-out both; }
+@keyframes symbol-in { from {opacity:0; transform:scale(.78) rotate(-18deg)} to {opacity:1; transform:scale(1) rotate(0)} }
+@keyframes arabic-in { from {opacity:0; clip-path:polygon(65% 0,65% 0,65% 72%,65% 72%)} to {opacity:1; clip-path:polygon(0 0,65% 0,65% 72%,0 72%)} }
+@keyframes hebrew-in { from {opacity:0; transform:translateY(10px)} to {opacity:1; transform:translateY(0)} }
+@media (prefers-reduced-motion:reduce) { .splash-layer {animation:none!important} #app-splash {transition:none} }

arabic_splash/static/splash.js

@@ -0,0 +1,9 @@
+(() => {
+  const splash = document.getElementById('app-splash');
+  if (!splash) return;
+  const hide = () => { splash.classList.add('splash-done'); window.setTimeout(() => splash.remove(), 500); };
+  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const start = () => window.setTimeout(hide, reduced ? 300 : 3100);
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once:true });
+  else start();
+})();

static/index.html

@@ -3,7 +3,7 @@
 <head>
 <meta charset="utf-8">
 <meta name="viewport" content="width=device-width,initial-scale=1,viewport-fit=cover">
-<title>احكي · אחכי</title>
+<title>אהלא וסהלא</title>
 <link rel="preconnect" href="https://fonts.googleapis.com">
 <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Assistant:wght@400;600;700&family=Secular+One&family=Noto+Naskh+Arabic:wght@500;700&family=Noto+Sans+Mono&display=swap">
 <style>
@@ -99,12 +99,32 @@ body.driving .mic{width:84px;height:84px}
 .voicebox select{font:600 14px var(--f-body);padding:4px 8px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--ink)}
 .note{font-size:12px;margin:0;color:var(--muted);max-width:65ch}
 .warn{background:var(--amber-bg);color:var(--amber);border-radius:10px;padding:10px 12px;font-size:14px}
+/* Opening splash: three clipped copies of the logo revealed in turn, then faded out by the script at the end of body. */
+:root { --splash-bg: #fff; --splash-duration: 3100ms; }
+#app-splash { position:fixed; inset:0; z-index:99999; display:grid; place-items:center; background:var(--splash-bg); transition:opacity .45s ease, visibility .45s ease; }
+#app-splash.splash-done { opacity:0; visibility:hidden; pointer-events:none; }
+.splash-art { position:relative; width:min(88vw, 560px); aspect-ratio:489/225; }
+.splash-layer { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
+.splash-symbol { clip-path:polygon(64% 0,100% 0,100% 100%,64% 100%); animation:symbol-in .95s ease-out both; transform-origin:82% 48%; }
+.splash-arabic { clip-path:polygon(0 0,65% 0,65% 72%,0 72%); animation:arabic-in 1.05s .65s ease-out both; }
+.splash-hebrew { clip-path:polygon(0 69%,65% 69%,65% 100%,0 100%); animation:hebrew-in .65s 1.6s ease-out both; }
+@keyframes symbol-in { from {opacity:0; transform:scale(.78) rotate(-18deg)} to {opacity:1; transform:scale(1) rotate(0)} }
+@keyframes arabic-in { from {opacity:0; clip-path:polygon(65% 0,65% 0,65% 72%,65% 72%)} to {opacity:1; clip-path:polygon(0 0,65% 0,65% 72%,0 72%)} }
+@keyframes hebrew-in { from {opacity:0; transform:translateY(10px)} to {opacity:1; transform:translateY(0)} }
+@media (prefers-reduced-motion:reduce) { .splash-layer {animation:none!important} #app-splash {transition:none} }
 </style>
 </head>
 <body>
+<div id="app-splash" role="status" aria-label="האפליקציה נטענת">
+  <div class="splash-art" aria-hidden="true">
+    <img class="splash-layer splash-symbol" src="/static/logo.png" alt="">
+    <img class="splash-layer splash-arabic" src="/static/logo.png" alt="">
+    <img class="splash-layer splash-hebrew" src="/static/logo.png" alt="">
+  </div>
+</div>
 <div class="wrap">
   <header>
-    <div class="brand">אחכי<span class="ar">احكي</span></div>
+    <div class="brand">אהלא וסהלא</div>
     <div class="sub">תרגמו לערבית מדוברת ואמרו בקול</div>
     <button class="drive" id="driveBtn" title="מצב נסיעה: האפליקציה מקריאה, מקשיבה ואומרת את ההערכה בקול">🚗 נסיעה</button>
   </header>
@@ -498,5 +518,16 @@ fetch("/api/phrases").then(r=>r.json()).then(d=>{
   buildCats(); startCat();
 }).catch(()=>{ $("prompt").textContent="השרת לא זמין."; });
 </script>
+<script>
+(() => {
+  const splash = document.getElementById('app-splash');
+  if (!splash) return;
+  const hide = () => { splash.classList.add('splash-done'); window.setTimeout(() => splash.remove(), 500); };
+  const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+  const start = () => window.setTimeout(hide, reduced ? 300 : 3100);
+  if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', start, { once:true });
+  else start();
+})();
+</script>
 </body>
 </html>