Upload app.py with huggingface_hub

app.py

@@ -631,6 +631,75 @@ footer { display: none !important; }
     border-color: #6366f1 !important;
 }
 
+/* Model info chips */
+.model-chips {
+    display: flex;
+    gap: 6px;
+    flex-wrap: wrap;
+    margin-top: 8px;
+}
+.model-chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 4px;
+    background: #222228;
+    color: #a0a0b0;
+    font-size: 11px;
+    padding: 3px 10px;
+    border-radius: 6px;
+    border: 1px solid #333340;
+}
+.model-chip.active {
+    background: rgba(99,102,241,.12);
+    color: #818cf8;
+    border-color: #6366f1;
+}
+
+/* How-to steps */
+.howto {
+    display: flex;
+    gap: 16px;
+    margin: 12px 0 4px;
+    flex-wrap: wrap;
+}
+.howto-step {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    font-size: 13px;
+    color: #a0a0b0;
+}
+.howto-num {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #6366f1, #8b5cf6);
+    color: #fff;
+    font-size: 12px;
+    font-weight: 700;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+}
+
+/* Feature tags */
+.features {
+    display: flex;
+    gap: 8px;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 12px;
+}
+.feat-tag {
+    font-size: 11px;
+    padding: 4px 10px;
+    border-radius: 6px;
+    background: #1a1a1f;
+    border: 1px solid #333340;
+    color: #a0a0b0;
+}
+
 /* Footer */
 .footer-text {
     text-align: center;
@@ -642,6 +711,13 @@ footer { display: none !important; }
     color: #818cf8;
     text-decoration: none;
 }
+
+/* Responsive */
+@media (max-width: 640px) {
+    .howto { flex-direction: column; gap: 8px; }
+    .features { gap: 4px; }
+    .header-wrap h1 { font-size: 26px !important; }
+}
 """
 
 with gr.Blocks(theme=THEME, title="TranscribeAI", css=CUSTOM_CSS) as demo:
@@ -650,43 +726,59 @@ with gr.Blocks(theme=THEME, title="TranscribeAI", css=CUSTOM_CSS) as demo:
     gr.HTML("""
     <div class="header-wrap">
         <h1>TranscribeAI</h1>
-        <p>Transkripsi Audio dengan Speaker Diarization</p>
+        <p>Transkripsi Audio dengan Speaker Diarization &mdash; Gratis & Cepat</p>
         <div class="badge-gpu">ZeroGPU H200 &bull; Whisper &bull; Tanpa API Key</div>
+        <div class="features">
+            <span class="feat-tag">99+ Bahasa</span>
+            <span class="feat-tag">Speaker ID</span>
+            <span class="feat-tag">SRT / TXT / DOCX</span>
+            <span class="feat-tag">GPU Accelerated</span>
+            <span class="feat-tag">Auto-detect Bahasa</span>
+        </div>
+        <div class="howto">
+            <div class="howto-step"><div class="howto-num">1</div> Upload audio</div>
+            <div class="howto-step"><div class="howto-num">2</div> Pilih model & bahasa</div>
+            <div class="howto-step"><div class="howto-num">3</div> Klik Mulai</div>
+            <div class="howto-step"><div class="howto-num">4</div> Download hasil</div>
+        </div>
     </div>
     """)
 
-    # ---- Upload + Settings ----
+    # ---- Upload ----
     with gr.Group(elem_classes="card-section"):
-        gr.HTML('<div class="card-title">🎵 Upload & Pengaturan</div>')
-        with gr.Row():
-            with gr.Column(scale=3):
-                audio_input = gr.Audio(
-                    label="Upload Audio / Video / Rekam",
-                    type="filepath",
-                    sources=["upload", "microphone"],
-                    elem_classes="audio-upload",
-                )
-            with gr.Column(scale=2, elem_classes="settings-row"):
-                model_choice = gr.Dropdown(
-                    choices=list(WHISPER_MODELS.keys()),
-                    value="small",
-                    label="Model Whisper",
-                    info="tiny (cepat) → large-v3 (akurat)"
-                )
-                language_choice = gr.Dropdown(
-                    choices=list(LANGUAGE_MAP.keys()),
-                    value="Auto-detect",
-                    label="Bahasa",
-                )
-                speaker_count = gr.Slider(
-                    minimum=0, maximum=10, step=1, value=0,
-                    label="Jumlah Pembicara",
-                    info="0 = auto-detect"
-                )
-
-    # ---- Options ----
+        gr.HTML('<div class="card-title">🎵 Upload Audio</div>')
+        audio_input = gr.Audio(
+            label="Drag & drop file audio/video, atau klik untuk pilih file. Bisa juga rekam langsung.",
+            type="filepath",
+            sources=["upload", "microphone"],
+            elem_classes="audio-upload",
+        )
+        gr.HTML('<div style="font-size:11px;color:#6a6a7a;margin-top:6px;">Format: MP3, MP4, WAV, M4A, OGG, FLAC, WEBM &bull; Maks ~1 jam audio</div>')
+
+    # ---- Settings ----
     with gr.Group(elem_classes="card-section"):
-        gr.HTML('<div class="card-title">⚙️ Opsi</div>')
+        gr.HTML('<div class="card-title">⚙️ Pengaturan</div>')
+        with gr.Row():
+            model_choice = gr.Dropdown(
+                choices=list(WHISPER_MODELS.keys()),
+                value="small",
+                label="Model Whisper",
+                info="tiny (39M, cepat) • base (74M) • small (244M, rekomendasi) • medium (769M) • large-v3 (1.5B, paling akurat)",
+                scale=2,
+            )
+            language_choice = gr.Dropdown(
+                choices=list(LANGUAGE_MAP.keys()),
+                value="Auto-detect",
+                label="Bahasa",
+                info="Auto-detect atau pilih bahasa spesifik",
+                scale=1,
+            )
+            speaker_count = gr.Slider(
+                minimum=0, maximum=10, step=1, value=0,
+                label="Jumlah Pembicara",
+                info="0 = auto-detect",
+                scale=1,
+            )
         with gr.Row(elem_classes="toggle-row"):
             enable_diarization = gr.Checkbox(
                 value=True,
@@ -696,7 +788,7 @@ with gr.Blocks(theme=THEME, title="TranscribeAI", css=CUSTOM_CSS) as demo:
             enable_vad = gr.Checkbox(
                 value=True,
                 label="VAD Filter",
-                info="Lewati bagian hening"
+                info="Lewati bagian hening untuk hasil lebih bersih"
             )
 
     # ---- Start Button ----
@@ -708,29 +800,30 @@ with gr.Blocks(theme=THEME, title="TranscribeAI", css=CUSTOM_CSS) as demo:
     )
 
     # ---- Results ----
-    with gr.Group(elem_classes="card-section", visible=True):
-        gr.HTML('<div class="card-title">📊 Hasil</div>')
+    with gr.Group(elem_classes="card-section"):
+        gr.HTML('<div class="card-title">📊 Hasil Transkripsi</div>')
         summary_output = gr.Markdown(
-            label="Ringkasan",
             elem_classes="summary-box",
+            value="*Upload audio dan klik 'Mulai Transkripsi' untuk memulai.*"
         )
         transcript_output = gr.Textbox(
-            label="Transkripsi",
-            lines=18,
-            max_lines=40,
+            label="Teks Transkripsi",
+            lines=20,
+            max_lines=50,
             show_copy_button=True,
             interactive=False,
             elem_classes="transcript-box",
-            placeholder="Hasil transkripsi akan muncul di sini...",
+            placeholder="Hasil transkripsi dengan timestamp dan speaker label akan muncul di sini...\n\n[00:00] Speaker 1: contoh teks transkripsi...",
         )
 
     # ---- Downloads ----
     with gr.Group(elem_classes="card-section"):
-        gr.HTML('<div class="card-title">📥 Download</div>')
+        gr.HTML('<div class="card-title">📥 Download File</div>')
+        gr.HTML('<div style="font-size:12px;color:#6a6a7a;margin-bottom:8px;">File otomatis dihapus setelah 1 jam.</div>')
         with gr.Row(elem_classes="download-row"):
-            srt_file = gr.File(label="SRT (Subtitle)")
-            txt_file = gr.File(label="TXT (Teks)")
-            docx_file = gr.File(label="DOCX (Dokumen)")
+            srt_file = gr.File(label="SRT — Subtitle untuk video player")
+            txt_file = gr.File(label="TXT — Teks dengan speaker label")
+            docx_file = gr.File(label="DOCX — Dokumen Word berwarna")
 
     # ---- Connect ----
     btn_start.click(