made some changes

api.py

@@ -16,6 +16,7 @@ from fastapi.staticfiles import StaticFiles
 from huggingface_hub import HfApi, create_repo, upload_file
 from transformers import WhisperForConditionalGeneration, WhisperProcessor
 
+
 # ── Env ────────────────────────────────────────────────────────────────────
 load_dotenv()
 
@@ -279,4 +280,5 @@ async def dataset_entries(limit: int = 50, offset: int = 0):
 
 
 # ── Static files ───────────────────────────────────────────────────────────
-app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+app.mount("/static", StaticFiles(directory=str(STATIC_DIR)), name="static")
+app.mount("/assets", StaticFiles(directory="assets"), name="assets")

app.py

@@ -1,701 +0,0 @@
-import os
-import uuid
-import shutil
-import numpy as np
-import pandas as pd
-import soundfile as sf
-import torch
-import torchaudio
-import gradio as gr
-
-import threading
-from dotenv import load_dotenv
-from huggingface_hub import HfApi, create_repo, upload_file
-from transformers import WhisperForConditionalGeneration, WhisperProcessor
-
-# =========================================================
-# LOAD ENV VARIABLES
-# =========================================================
-
-load_dotenv()
-
-HF_TOKEN = os.getenv("HF_TOKEN")
-DATASET_REPO = os.getenv("HF_DATASET_REPO")
-
-# =========================================================
-# LOCAL STORAGE
-# =========================================================
-
-LOCAL_DATASET_DIR = "hf_dataset"
-LOCAL_AUDIO_DIR = os.path.join(LOCAL_DATASET_DIR, "audio")
-LOCAL_METADATA = os.path.join(LOCAL_DATASET_DIR, "metadata.csv")
-
-os.makedirs(LOCAL_AUDIO_DIR, exist_ok=True)
-
-# =========================================================
-# HUGGING FACE SETUP
-# =========================================================
-
-api = HfApi(token=HF_TOKEN)
-
-try:
-    create_repo(
-        repo_id=DATASET_REPO,
-        repo_type="dataset",
-        exist_ok=True,
-        token=HF_TOKEN
-    )
-except Exception as e:
-    print("Dataset repo check:", e)
-
-# =========================================================
-# LOAD MODEL
-# =========================================================
-
-model = WhisperForConditionalGeneration.from_pretrained(
-    "Kennethdot/kasanoma_whisper"
-)
-
-processor = WhisperProcessor.from_pretrained(
-    "Kennethdot/kasanoma_whisper"
-)
-
-device = torch.device(
-    "cuda" if torch.cuda.is_available() else "cpu"
-)
-
-model = model.to(device)
-model.eval()
-
-# =========================================================
-# TRANSCRIPTION FUNCTION
-# =========================================================
-
-def transcribe_audio(audio_path):
-
-    if audio_path is None:
-        return "", "", None
-
-    try:
-        audio_data, sampling_rate = sf.read(audio_path)
-
-        # Stereo → mono
-        if len(audio_data.shape) > 1:
-            audio_data = np.mean(audio_data, axis=1)
-
-        audio_data = audio_data.astype(np.float32)
-
-        # Resample
-        if sampling_rate != 16000:
-            audio_tensor = torch.tensor(
-                audio_data,
-                dtype=torch.float32
-            )
-
-            resampler = torchaudio.transforms.Resample(
-                orig_freq=sampling_rate,
-                new_freq=16000
-            )
-
-            audio_data = resampler(audio_tensor).numpy()
-            sampling_rate = 16000
-
-    except Exception as e:
-        return f"Error reading audio: {e}", "", None
-
-    # Normalize
-    if np.max(np.abs(audio_data)) > 0:
-        audio_data = audio_data / np.max(np.abs(audio_data))
-
-    # Feature extraction
-    input_features = processor.feature_extractor(
-        audio_data,
-        sampling_rate=sampling_rate,
-        return_tensors="pt"
-    ).input_features.to(device)
-
-    # Inference
-    with torch.no_grad():
-
-        generated_ids = model.generate(
-            input_features,
-            task="transcribe",
-            language="yo",
-            temperature=0.0
-        )
-
-    transcription = processor.batch_decode(
-        generated_ids,
-        skip_special_tokens=True
-    )[0].strip()
-
-    return transcription, transcription, audio_path
-
-# =========================================================
-# SAVE FUNCTION
-# =========================================================
-
-# Lock prevents concurrent saves from corrupting the CSV
-_csv_lock = threading.Lock()
-
-
-def _upload_in_background(saved_audio_path, relative_audio_path):
-    """Runs in a daemon thread. Uploads audio then CSV — never blocks the UI."""
-    try:
-        upload_file(
-            path_or_fileobj=saved_audio_path,
-            path_in_repo=relative_audio_path,
-            repo_id=DATASET_REPO,
-            repo_type="dataset",
-            token=HF_TOKEN
-        )
-        with _csv_lock:
-            upload_file(
-                path_or_fileobj=LOCAL_METADATA,
-                path_in_repo="metadata.csv",
-                repo_id=DATASET_REPO,
-                repo_type="dataset",
-                token=HF_TOKEN
-            )
-    except Exception as e:
-        print(f"[Background upload error] {e}")
-
-
-def save_sample(audio_path, corrected_text):
-
-    if audio_path is None:
-        return
-
-    try:
-        unique_id = str(uuid.uuid4())
-
-        saved_audio_path = os.path.join(
-            LOCAL_AUDIO_DIR,
-            f"{unique_id}.wav"
-        )
-
-        # Copy audio locally — fast, no network
-        shutil.copy(audio_path, saved_audio_path)
-
-        relative_audio_path = f"audio/{unique_id}.wav"
-
-        # Write metadata locally — fast, no network
-        new_row = pd.DataFrame([{
-            "id": unique_id,
-            "audio": relative_audio_path,
-            "transcription": corrected_text,
-            "language": "twi_en"
-        }])
-
-        with _csv_lock:
-            if os.path.exists(LOCAL_METADATA):
-                existing = pd.read_csv(LOCAL_METADATA)
-                updated = pd.concat([existing, new_row], ignore_index=True)
-            else:
-                updated = new_row
-            updated.to_csv(LOCAL_METADATA, index=False)
-
-        # Fire-and-forget — HuggingFace upload happens in background
-        threading.Thread(
-            target=_upload_in_background,
-            args=(saved_audio_path, relative_audio_path),
-            daemon=True
-        ).start()
-
-        return
-
-    except Exception as e:
-        print(f"[Save error] {e}")
-        return
-
-# =========================================================
-# CUSTOM CSS  (from the styled version)
-# =========================================================
-
-css = """
-@import url('https://fonts.googleapis.com/css2?family=Sora:wght@300;400;600;700&family=DM+Mono:wght@400;500&display=swap');
-
-:root {
-    --navy:   #0d1b4b;
-    --blue:   #1a6fd4;
-    --sky:    #4db8f0;
-    --violet: #7b4fd4;
-    --lilac:  #b57bee;
-    --white:  #e8f0ff;
-    --card:   rgba(255,255,255,0.07);
-    --border: rgba(180,160,255,0.2);
-    --radius: 16px;
-}
-
-/* ── animated mesh background ── */
-body, .gradio-container {
-    background:
-        radial-gradient(ellipse at 15% 10%,  #1a3fa8 0%,  transparent 55%),
-        radial-gradient(ellipse at 85% 5%,   #7b3fc4 0%,  transparent 45%),
-        radial-gradient(ellipse at 50% 50%,  #d0e8ff 0%,  transparent 60%),
-        radial-gradient(ellipse at 80% 80%,  #b57bee 0%,  transparent 50%),
-        radial-gradient(ellipse at 10% 90%,  #1a6fd4 0%,  transparent 50%),
-        #0d1b4b !important;
-    font-family: 'Sora', sans-serif !important;
-    min-height: 100vh;
-}
-
-/* ── slow drifting orbs ── */
-.gradio-container::before,
-.gradio-container::after {
-    content: '';
-    position: fixed;
-    border-radius: 50%;
-    filter: blur(80px);
-    pointer-events: none;
-    z-index: 0;
-}
-.gradio-container::before {
-    width: 520px; height: 520px;
-    top: -120px; left: -100px;
-    background: radial-gradient(circle, rgba(74,130,230,0.45), transparent 70%);
-    animation: drift1 12s ease-in-out infinite alternate;
-}
-.gradio-container::after {
-    width: 480px; height: 480px;
-    bottom: -100px; right: -80px;
-    background: radial-gradient(circle, rgba(160,100,240,0.4), transparent 70%);
-    animation: drift2 15s ease-in-out infinite alternate;
-}
-@keyframes drift1 {
-    from { transform: translate(0, 0); }
-    to   { transform: translate(60px, 80px); }
-}
-@keyframes drift2 {
-    from { transform: translate(0, 0); }
-    to   { transform: translate(-50px, -70px); }
-}
-
-/* ── hero ── */
-#hero {
-    text-align: center;
-    padding: 40px 24px 16px;
-    position: relative;
-    z-index: 1;
-    animation: fadeUp 0.8s ease both;
-}
-@keyframes fadeUp {
-    from { opacity: 0; transform: translateY(24px); }
-    to   { opacity: 1; transform: translateY(0); }
-}
-
-/* ── animated orb ── */
-.orb-wrap {
-    display: flex;
-    justify-content: center;
-    margin-bottom: 22px;
-}
-.orb-stage {
-    position: relative;
-    width: 110px;
-    height: 110px;
-}
-.orb-ring {
-    position: absolute;
-    border-radius: 50%;
-    border: 1.5px solid transparent;
-    inset: 0;
-    animation: orbSpin 6s linear infinite;
-}
-.orb-ring:nth-child(1) {
-    border-top-color: #4db8f0;
-    border-right-color: rgba(77,184,240,0.25);
-    animation-duration: 5s;
-}
-.orb-ring:nth-child(2) {
-    inset: 8px;
-    border-top-color: #b57bee;
-    border-left-color: rgba(181,123,238,0.25);
-    animation-direction: reverse;
-    animation-duration: 7s;
-}
-.orb-ring:nth-child(3) {
-    inset: 16px;
-    border-top-color: #1a6fd4;
-    border-bottom-color: rgba(26,111,212,0.25);
-    animation-duration: 9s;
-}
-@keyframes orbSpin { to { transform: rotate(360deg); } }
-
-.orb-core {
-    position: absolute;
-    inset: 24px;
-    border-radius: 50%;
-    background: radial-gradient(circle at 35% 35%,
-        rgba(200,220,255,0.95),
-        rgba(100,150,240,0.8) 40%,
-        rgba(90,55,200,0.9) 75%,
-        rgba(25,15,75,1)
-    );
-    box-shadow:
-        0 0 22px 6px rgba(77,184,240,0.45),
-        0 0 50px 12px rgba(120,80,220,0.28),
-        inset 0 0 14px rgba(255,255,255,0.18);
-    animation: orbBreathe 3.5s ease-in-out infinite;
-}
-.orb-core::after {
-    content: '';
-    position: absolute;
-    top: 14%; left: 22%;
-    width: 28%; height: 20%;
-    border-radius: 50%;
-    background: rgba(255,255,255,0.5);
-    filter: blur(3px);
-}
-@keyframes orbBreathe {
-    0%, 100% {
-        transform: scale(1);
-        box-shadow: 0 0 22px 6px rgba(77,184,240,0.45), 0 0 50px 12px rgba(120,80,220,0.28), inset 0 0 14px rgba(255,255,255,0.18);
-    }
-    50% {
-        transform: scale(1.1);
-        box-shadow: 0 0 34px 12px rgba(77,184,240,0.65), 0 0 70px 20px rgba(120,80,220,0.42), inset 0 0 20px rgba(255,255,255,0.28);
-    }
-}
-
-.orb-waves {
-    position: absolute;
-    inset: 24px;
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: 3px;
-    overflow: hidden;
-}
-.orb-wave-bar {
-    width: 3px;
-    border-radius: 99px;
-    background: rgba(255,255,255,0.75);
-    animation: waveBar 1.3s ease-in-out infinite;
-}
-.orb-wave-bar:nth-child(1) { height: 8px;  animation-delay: 0s; }
-.orb-wave-bar:nth-child(2) { height: 16px; animation-delay: 0.18s; }
-.orb-wave-bar:nth-child(3) { height: 22px; animation-delay: 0.35s; }
-.orb-wave-bar:nth-child(4) { height: 16px; animation-delay: 0.52s; }
-.orb-wave-bar:nth-child(5) { height: 8px;  animation-delay: 0.7s; }
-@keyframes waveBar {
-    0%, 100% { transform: scaleY(0.3); opacity: 0.45; }
-    50%       { transform: scaleY(1);   opacity: 1; }
-}
-
-/* ── title & subtitle ── */
-.kasa-title {
-    font-size: clamp(2.4rem, 7vw, 4rem);
-    font-weight: 700;
-    letter-spacing: -0.03em;
-    background: linear-gradient(120deg, var(--white) 0%, var(--sky) 40%, var(--lilac) 100%);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    background-clip: text;
-    margin: 0 0 10px;
-    line-height: 1.1;
-}
-.kasa-sub {
-    font-size: 0.97rem;
-    font-weight: 300;
-    color: rgba(220,230,255,0.85);
-    max-width: 460px;
-    margin: 0 auto 14px;
-    line-height: 1.65;
-}
-.kasa-badge {
-    display: inline-flex;
-    align-items: center;
-    gap: 6px;
-    padding: 5px 16px;
-    border-radius: 999px;
-    border: 1px solid rgba(180,160,255,0.3);
-    background: rgba(120,100,220,0.12);
-    font-size: 0.7rem;
-    font-weight: 500;
-    letter-spacing: 0.13em;
-    text-transform: uppercase;
-    color: var(--lilac);
-    backdrop-filter: blur(8px);
-}
-
-/* ── divider ── */
-.kasa-divider {
-    border: none;
-    border-top: 1px solid var(--border);
-    margin: 10px 0 28px;
-    position: relative;
-    z-index: 1;
-}
-
-/* ── panel labels ── */
-.kasa-label {
-    font-size: 0.7rem;
-    font-weight: 600;
-    letter-spacing: 0.14em;
-    text-transform: uppercase;
-    color: #a8d4f8;
-    margin-bottom: 10px;
-}
-
-/* ── Gradio field labels ── */
-label, .gr-form label, .svelte-1gfkn6j {
-    color: #c8d8f8 !important;
-    font-family: 'Sora', sans-serif !important;
-    font-size: 0.82rem !important;
-    font-weight: 500 !important;
-}
-
-/* ── WHITE audio widget ── */
-.gr-audio,
-[data-testid="audio"],
-.gr-audio > div {
-    background: #ffffff !important;
-    border: 1.5px solid rgba(100,140,240,0.4) !important;
-    border-radius: 14px !important;
-    box-shadow: 0 4px 28px rgba(26,60,180,0.14) !important;
-    overflow: hidden !important;
-}
-
-[data-testid="audio"] button,
-.gr-audio button {
-    color: #1a6fd4 !important;
-    background: transparent !important;
-}
-[data-testid="audio"] svg,
-.gr-audio svg {
-    stroke: #1a6fd4 !important;
-    fill: none !important;
-}
-[data-testid="audio"] span,
-[data-testid="audio"] .time,
-[data-testid="audio"] .duration,
-.gr-audio span {
-    color: #1a3fa8 !important;
-    font-family: 'DM Mono', monospace !important;
-}
-[data-testid="audio"] canvas,
-.gr-audio canvas {
-    filter: hue-rotate(195deg) saturate(2) brightness(0.85) !important;
-}
-[data-testid="audio"] .tabs button,
-.gr-audio .tabs button {
-    color: #1a6fd4 !important;
-    font-family: 'Sora', sans-serif !important;
-    font-weight: 600 !important;
-}
-[data-testid="audio"] .tabs button.selected,
-.gr-audio .tabs button.selected {
-    border-bottom: 2px solid #1a6fd4 !important;
-}
-
-/* ── WHITE textbox ── */
-textarea, .gr-textbox textarea {
-    background: #ffffff !important;
-    border: 1.5px solid rgba(100,140,240,0.4) !important;
-    border-radius: 12px !important;
-    color: #0d1b6e !important;
-    font-family: 'Sora', sans-serif !important;
-    font-size: 0.95rem !important;
-    font-weight: 400 !important;
-    padding: 14px !important;
-    box-shadow: 0 4px 24px rgba(26,60,180,0.1) !important;
-    transition: border-color 0.2s, box-shadow 0.2s !important;
-    line-height: 1.75 !important;
-    letter-spacing: 0.01em !important;
-}
-textarea::placeholder {
-    color: #7a9acc !important;
-    font-style: italic;
-    font-family: 'Sora', sans-serif !important;
-}
-textarea:focus {
-    border-color: #4db8f0 !important;
-    box-shadow: 0 0 0 3px rgba(77,184,240,0.2) !important;
-    outline: none !important;
-}
-.gr-textbox, [data-testid="textbox"] {
-    background: #ffffff !important;
-    border: 1.5px solid rgba(100,140,240,0.4) !important;
-    border-radius: 14px !important;
-    box-shadow: 0 4px 28px rgba(26,60,180,0.14) !important;
-    overflow: hidden !important;
-}
-
-/* ── Edit hint text ── */
-.edit-hint {
-    font-size: 0.75rem;
-    font-weight: 300;
-    color: rgba(200,215,255,0.6);
-    margin-top: -6px;
-    margin-bottom: 8px;
-    font-style: italic;
-    letter-spacing: 0.02em;
-}
-
-/* ── Buttons ── */
-.gr-button-primary, button.primary {
-    background: linear-gradient(135deg, #1a6fd4 0%, #7b4fd4 100%) !important;
-    border: none !important;
-    border-radius: 10px !important;
-    font-family: 'Sora', sans-serif !important;
-    font-weight: 600 !important;
-    font-size: 0.9rem !important;
-    padding: 12px 28px !important;
-    color: #ffffff !important;
-    transition: transform 0.15s, box-shadow 0.15s !important;
-    box-shadow: 0 4px 22px rgba(100,80,200,0.4) !important;
-    position: relative;
-    z-index: 1;
-}
-.gr-button-primary:hover, button.primary:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 8px 32px rgba(120,80,220,0.55) !important;
-}
-.gr-button-primary:active, button.primary:active {
-    transform: translateY(0) !important;
-}
-
-/* ── Save checkmark button ── */
-#save-btn button {
-    width: 52px !important;
-    height: 52px !important;
-    min-width: 52px !important;
-    border-radius: 50% !important;
-    padding: 0 !important;
-    font-size: 1.5rem !important;
-    background: linear-gradient(135deg, #1a6fd4 0%, #7b4fd4 100%) !important;
-    border: none !important;
-    box-shadow: 0 4px 22px rgba(100,80,200,0.4) !important;
-    color: #fff !important;
-    transition: transform 0.15s, box-shadow 0.15s !important;
-    line-height: 1 !important;
-}
-#save-btn button:hover {
-    transform: scale(1.12) translateY(-2px) !important;
-    box-shadow: 0 8px 32px rgba(120,80,220,0.55) !important;
-}
-#save-btn button:active {
-    transform: scale(0.96) !important;
-}
-
-
-/* ── footer ── */
-.kasa-footer {
-    text-align: center;
-    font-size: 0.72rem;
-    color: rgba(180,190,255,0.58);
-    padding: 24px 0 32px;
-    letter-spacing: 0.05em;
-    position: relative;
-    z-index: 1;
-}
-
-/* ── pulse dot ── */
-.pulse-dot {
-    display: inline-block;
-    width: 9px; height: 9px;
-    border-radius: 50%;
-    background: #ffffff;
-    box-shadow: 0 0 6px 2px rgba(255,255,255,0.6);
-    animation: pulse 2s ease-in-out infinite;
-}
-@keyframes pulse {
-    0%, 100% { opacity: 1;   transform: scale(1); }
-    50%       { opacity: 0.3; transform: scale(0.65); }
-}
-"""
-
-# =========================================================
-# UI
-# =========================================================
-
-with gr.Blocks(css=css, theme=gr.themes.Base()) as demo:
-
-    # ── Hero ──
-    gr.HTML("""
-    <div id="hero">
-        <div class="orb-wrap">
-            <div class="orb-stage">
-                <div class="orb-ring"></div>
-                <div class="orb-ring"></div>
-                <div class="orb-ring"></div>
-                <div class="orb-core"></div>
-                <div class="orb-waves">
-                    <div class="orb-wave-bar"></div>
-                    <div class="orb-wave-bar"></div>
-                    <div class="orb-wave-bar"></div>
-                    <div class="orb-wave-bar"></div>
-                    <div class="orb-wave-bar"></div>
-                </div>
-            </div>
-        </div>
-        <div class="kasa-title">Kasanoma ASR</div>
-        <div class="kasa-sub">
-            Automatic speech recognition for natural English–Twi
-            code-switched conversations. Speak the way you actually speak.
-        </div>
-        <span class="kasa-badge"><span class="pulse-dot"></span>Live Transcription</span>
-    </div>
-    """)
-
-    # ── Main columns ──
-    with gr.Row(equal_height=True):
-
-        with gr.Column(scale=1):
-            gr.HTML('<div class="kasa-label">Audio Input</div>')
-            audio_input = gr.Audio(
-                sources=["microphone", "upload"],
-                type="filepath",
-                label="Record or upload audio"
-            )
-            transcribe_btn = gr.Button("Transcribe →", variant="primary")
-
-        with gr.Column(scale=1):
-            gr.HTML('<div class="kasa-label">Transcription</div>')
-            model_output = gr.Textbox(
-                label="",
-                placeholder="Transcription will appear here…",
-                lines=3,
-                interactive=False
-            )
-            gr.HTML('<div class="kasa-label" style="margin-top:14px;">Edit</div>')
-            gr.HTML('<div class="edit-hint">Type what was actually said — fix any errors the model made, then hit ✓ to save.</div>')
-            with gr.Row(equal_height=True):
-                corrected_output = gr.Textbox(
-                    label="",
-                    placeholder="Correct the transcription if needed…",
-                    lines=3,
-                    scale=9
-                )
-                save_btn = gr.Button("✓", elem_id="save-btn", scale=1)
-
-
-    hidden_audio_path = gr.State()
-
-    # ── Footer ──
-    gr.HTML("""
-    <div class="kasa-footer">
-        Kasanoma &middot; English&ndash;Twi Code-Switching ASR &middot; Project Kasa 2026
-    </div>
-    """)
-
-    # ── Event handlers ──
-    transcribe_btn.click(
-        fn=transcribe_audio,
-        inputs=audio_input,
-        outputs=[model_output, corrected_output, hidden_audio_path]
-    )
-
-    save_btn.click(
-        fn=save_sample,
-        inputs=[hidden_audio_path, corrected_output]
-    )
-
-# =========================================================
-# LAUNCH
-# =========================================================
-
-if __name__ == "__main__":
-    demo.launch(share=True)

main.py

@@ -1,3 +1,5 @@
 from api import app
+from fastapi.staticfiles import StaticFiles
 
+app.mount("/assets", StaticFiles(directory="assets"), name="assets")
 __all__ = ["app"]

requirements.txt

@@ -8,4 +8,5 @@ datasets>=3.2.0
 torch>=2.0.0
 torchaudio>=2.0.0
 librosa>=0.9.2
-python-dotenv>=0.19.0
+python-dotenv>=0.19.0
+gradio>=3.38.0

static/index.html

@@ -13,16 +13,16 @@
     *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
     :root {
-      --bg:       #f5f3ef;
-      --surface:  #faf9f7;
+      --bg:       #f4faf6;
+      --surface:  #fbfdfc;
       --card:     #ffffff;
-      --border:   rgba(0,0,0,0.08);
-      --border-md: rgba(0,0,0,0.13);
-      --text:     #1a1714;
-      --muted:    #7a7268;
-      --hint:     #b3aca3;
+      --border:   rgba(42,92,69,0.10);
+      --border-md: rgba(42,92,69,0.18);
+      --text:     #16261f;
+      --muted:    #5f7a6c;
+      --hint:     #9db3a6;
       --accent:   #2a5c45;
-      --accent-bg:#ecf4ef;
+      --accent-bg:#e8f5ee;
       --red:      #c0392b;
       --red-bg:   #fdf0ee;
       --font-serif: 'Instrument Serif', Georgia, serif;
@@ -37,7 +37,12 @@
 
     body {
       font-family: var(--font-sans);
-      background: var(--bg);
+      background:
+        radial-gradient(ellipse 900px 600px at 12% 0%, rgba(154,211,181,0.35), transparent 60%),
+        radial-gradient(ellipse 900px 650px at 100% 15%, rgba(210,235,220,0.55), transparent 65%),
+        radial-gradient(ellipse 800px 700px at 50% 100%, rgba(180,220,197,0.30), transparent 60%),
+        linear-gradient(180deg, #ffffff 0%, #f2f9f5 45%, #eaf6ef 100%);
+      background-attachment: fixed;
       color: var(--text);
       min-height: 100vh;
       display: flex;
@@ -90,6 +95,12 @@
     }
     /* ── Hero ── */
     .hero { margin-bottom: 36px; }
+    .hero-logo {
+      height: 44px;
+      width: auto;
+      margin-bottom: 16px;
+      display: block;
+    }
     .lang-tag {  
       display: inline-flex;
       align-items: center;
@@ -382,11 +393,34 @@
       display: flex;
       align-items: center;
       justify-content: space-between;
+      margin-top: 8px;
+      padding-top: 8px;
+    }
+    .footer-content {
+      display: flex;
+      align-items: center;
+      gap: 24px;
     }
     .footer-copy { font-size: 0.72rem; color: var(--hint); }
     .footer-links { display: flex; gap: 18px; }
     .footer-links a { font-size: 0.72rem; color: var(--hint); text-decoration: none; transition: color 0.2s; }
     .footer-links a:hover { color: var(--muted); }
+    .footer-logos {
+      display: flex;
+      gap: 12px;
+      align-items: center;
+    }
+    .footer-logo {
+      height: 72px;
+      width: 72px;
+      border-radius: 10%;
+      background: var(--surface);
+      transition: transform 0.2s ease, border-color 0.2s ease;
+    }
+    .footer-logo:hover {
+      transform: scale(1.08);
+      border-color: var(--accent);
+    }
 
     /* ── Toast ── */
     .toast {
@@ -413,12 +447,73 @@
     @keyframes blink { 0%,100%{opacity:1;transform:scale(1)}50%{opacity:.3;transform:scale(.55)} }
     @keyframes rot { to { transform: rotate(360deg); } }
 
+    /* ── Header Logo Section ── */
+    .header-logo-section {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 20px 0 24px;
+      margin-bottom: 28px;
+      animation: slideDown 0.5s ease;
+    }
+    .header-logo-container {
+      display: flex;
+      align-items: center;
+      gap: 16px;
+    }
+    .header-logo-container img {
+      height: 64px;
+      width: auto;
+      transition: transform 0.3s ease;
+    }
+    .header-logo-container img:hover {
+      transform: scale(1.06);
+    }
+    .header-title {
+      font-family: var(--font-serif);
+      font-size: 1.15rem;
+      font-weight: 400;
+      color: var(--text);
+      letter-spacing: -0.01em;
+    }
+    .header-nav {
+      display: flex;
+      gap: 16px;
+      align-items: center;
+    }
+    .header-nav-link {
+      display: inline-flex;
+      align-items: center;
+      gap: 5px;
+      padding: 7px 12px;
+      border-radius: 6px;
+      border: 1px solid var(--border);
+      background: var(--accent-bg);
+      color: var(--accent);
+      text-decoration: none;
+      font-size: 0.8rem;
+      font-weight: 500;
+      transition: all 0.2s ease;
+      font-family: var(--font-sans);
+    }
+    .header-nav-link:hover {
+      border-color: var(--accent);
+      background: rgba(42, 92, 69, 0.15);
+      color: var(--text);
+    }
+    @keyframes slideDown {
+      from { opacity: 0; transform: translateY(-12px); }
+      to   { opacity: 1; transform: translateY(0); }
+    }
+
     @media (max-width: 520px) {
       body { padding: 28px 14px 60px; }
       .stats { grid-template-columns: 1fr 1fr; }
       .stats .stat:last-child { grid-column: span 2; }
       .nav { display: none; }
       .footer { flex-direction: column; gap: 10px; }
+      .header-nav { gap: 10px; }
+      .header-nav-link { font-size: 0.75rem; padding: 6px 10px; }
     }
   </style>
 </head>
@@ -426,14 +521,16 @@
 
 <div class="page">
 
-  <nav class="topbar">
-    <span class="logo">Kasanoma</span>
-    <ul class="nav">
-      <li><a href="#">Docs</a></li>
-      <li><a href="#">Dataset</a></li>
-      <li><a href="#">GitHub</a></li>
-    </ul>
-  </nav>
+  <div class="header-logo-section">
+    <div class="header-logo-container">
+      <img src="/assets/logo.png" alt="Kasanoma logo" />
+      <div class="header-title">Kasanoma</div>
+    </div>
+    <div class="header-nav">
+      <a href="https://huggingface.co/datasets/Kennethdot/Ghana_English-Twi_Code-switching_ASR" class="header-nav-link">Docs</a>
+      <a href="https://github.com/Kennethdotse/project-kasa" class="header-nav-link">GitHub</a>
+    </div>
+  </div>
 
   <div class="hero">
     <div class="lang-tag"><i class="ti ti-language" aria-hidden="true"></i>English · Twi code-switching</div>
@@ -499,7 +596,8 @@
         </button>
       </div>
     </div>
-
+ 
+    <!-- COMMENTED OUT: Correct & save section
     <div class="sec">
       <div class="sec-label">Correct &amp; save</div>
       <p class="edit-hint">Fix any errors — your correction helps improve the model.</p>
@@ -511,10 +609,11 @@
         <button class="disc-btn" id="disc-btn">Discard</button>
       </div>
     </div>
+    -->
 
-  </div>
+  </div> 
 
-  <div class="stats">
+  <!-- <div class="stats">
     <div class="stat">
       <div class="stat-v" id="stat-saved">0</div>
       <div class="stat-l">Saved</div>
@@ -527,14 +626,20 @@
       <div class="stat-v" style="font-size:1.1rem;font-style:normal;font-family:var(--font-sans);font-weight:500;padding-top:4px;">Twi · EN</div>
       <div class="stat-l">Language</div>
     </div>
-  </div>
+  </div> -->
 
   <footer class="footer">
-    <span class="footer-copy">Project Kasa · 2026</span>
-    <div class="footer-links">
-      <a href="#">Privacy</a>
-      <a href="#">Terms</a>
-      <a href="#">Contact</a>
+    <div class="footer-content">
+      <span class="footer-copy">Project Kasa · 2026</span>
+      <div class="footer-links">
+        <a href="#">Privacy</a>
+        <a href="#">Terms</a>
+        <a href="#">Contact</a>
+      </div>
+    </div>
+    <div class="footer-logos">
+      <img src="/assets/logo.png" alt="Kasanoma logo" class="footer-logo" />
+      <img src="/assets/gen.png" alt="Gen logo" class="footer-logo" />
     </div>
   </footer>
 
@@ -697,38 +802,40 @@
     if (t) navigator.clipboard.writeText(t).then(() => toast('Copied', 'ok'));
   });
 
-  $('save-btn').addEventListener('click', async () => {
-    const text = $('edit-ta').value.trim();
-    if (!text) { toast('Nothing to save.', 'err'); return; }
-    if (!audioBlob) { toast('No audio attached.', 'err'); return; }
-    const btn = $('save-btn'); btn.disabled = true;
-    try {
-      const fd = new FormData();
-      fd.append('audio', audioBlob, audioBlob.name || 'audio.webm');
-      fd.append('transcription', text);
-      const res = await fetch('/save', { method: 'POST', body: fd });
-      if (!res.ok) throw new Error(`Server error ${res.status}`);
-      saved++; $('stat-saved').textContent = saved;
-      btn.classList.add('saved');
-      setTimeout(() => btn.classList.remove('saved'), 2000);
-      toast('Saved to dataset', 'ok');
-    } catch (err) {
-      toast('Save failed: ' + err.message, 'err');
-    } finally { btn.disabled = false; }
-  });
-
-  $('disc-btn').addEventListener('click', () => {
-    $('edit-ta').value = '';
-    $('out').classList.remove('has');
-    $('out-txt').textContent = '';
-    toast('Cleared');
-  });
-
-  // ── Load real saved count from backend on page load ──
-  fetch('/dataset/stats')
-    .then(r => r.json())
-    .then(d => { if (d.total) { saved = d.total; $('stat-saved').textContent = saved; } })
-    .catch(() => {});
+  // COMMENTED OUT: Save to dataset functionality
+  // $('save-btn').addEventListener('click', async () => {
+  //   const text = $('edit-ta').value.trim();
+  //   if (!text) { toast('Nothing to save.', 'err'); return; }
+  //   if (!audioBlob) { toast('No audio attached.', 'err'); return; }
+  //   const btn = $('save-btn'); btn.disabled = true;
+  //   try {
+  //     const fd = new FormData();
+  //     fd.append('audio', audioBlob, audioBlob.name || 'audio.webm');
+  //     fd.append('transcription', text);
+  //     const res = await fetch('/save', { method: 'POST', body: fd });
+  //     if (!res.ok) throw new Error(`Server error ${res.status}`);
+  //     saved++; $('stat-saved').textContent = saved;
+  //     btn.classList.add('saved');
+  //     setTimeout(() => btn.classList.remove('saved'), 2000);
+  //     toast('Saved to dataset', 'ok');
+  //   } catch (err) {
+  //     toast('Save failed: ' + err.message, 'err');
+  //   } finally { btn.disabled = false; }
+  // });
+
+  // COMMENTED OUT: Discard transcription
+  // $('disc-btn').addEventListener('click', () => {
+  //   $('edit-ta').value = '';
+  //   $('out').classList.remove('has');
+  //   $('out-txt').textContent = '';
+  //   toast('Cleared');
+  // });
+
+  // COMMENTED OUT: Load real saved count from backend on page load
+  // fetch('/dataset/stats')
+  //   .then(r => r.json())
+  //   .then(d => { if (d.total) { saved = d.total; $('stat-saved').textContent = saved; } })
+  //   .catch(() => {});
 </script>
 </body>
 </html>