Upload app.py with huggingface_hub

app.py

@@ -497,58 +497,242 @@ THEME = gr.themes.Base(
     input_border_color_dark="#333340",
 )
 
-with gr.Blocks(theme=THEME, title="TranscribeAI", css="""
-    .gradio-container { max-width: 900px !important; }
-    .gr-button-primary { background: linear-gradient(135deg, #6366f1, #8b5cf6) !important; }
-    footer { display: none !important; }
-""") as demo:
-
-    gr.Markdown("""
-    # TranscribeAI
-    **Transkripsi Audio + Speaker Diarization — GPU Accelerated (ZeroGPU H200)**
+CUSTOM_CSS = """
+/* Global */
+.gradio-container {
+    max-width: 960px !important;
+    margin: 0 auto !important;
+}
+footer { display: none !important; }
+
+/* Header */
+.header-wrap {
+    text-align: center;
+    padding: 32px 0 20px;
+}
+.header-wrap h1 {
+    font-size: 32px !important;
+    font-weight: 800 !important;
+    background: linear-gradient(135deg, #818cf8, #8b5cf6) !important;
+    -webkit-background-clip: text !important;
+    -webkit-text-fill-color: transparent !important;
+    background-clip: text !important;
+    letter-spacing: -0.5px;
+    margin-bottom: 6px !important;
+}
+.header-wrap p {
+    color: #a0a0b0 !important;
+    font-size: 14px !important;
+}
+.badge-gpu {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: rgba(99,102,241,.12);
+    color: #818cf8;
+    font-size: 12px;
+    padding: 4px 14px;
+    border-radius: 20px;
+    font-weight: 600;
+    margin-top: 8px;
+}
+.badge-gpu::before {
+    content: '';
+    width: 7px;
+    height: 7px;
+    background: #10b981;
+    border-radius: 50%;
+    display: inline-block;
+}
+
+/* Cards */
+.card-section {
+    background: #1a1a1f !important;
+    border: 1px solid #333340 !important;
+    border-radius: 14px !important;
+    padding: 20px 24px !important;
+    margin-bottom: 12px !important;
+}
+.card-title {
+    font-size: 14px !important;
+    font-weight: 700 !important;
+    color: #e8e8ed !important;
+    margin-bottom: 12px !important;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+}
+
+/* Primary button */
+.btn-start {
+    background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
+    border: none !important;
+    border-radius: 12px !important;
+    font-size: 16px !important;
+    font-weight: 700 !important;
+    padding: 14px 32px !important;
+    transition: all 0.2s !important;
+    box-shadow: 0 4px 15px rgba(99,102,241,.3) !important;
+}
+.btn-start:hover {
+    transform: translateY(-1px) !important;
+    box-shadow: 0 6px 20px rgba(99,102,241,.4) !important;
+}
+
+/* Settings grid */
+.settings-row {
+    gap: 8px !important;
+}
+
+/* Transcript output */
+.transcript-box textarea {
+    font-family: 'Inter', 'SF Mono', monospace !important;
+    font-size: 13px !important;
+    line-height: 1.7 !important;
+    background: #16161a !important;
+    border-radius: 10px !important;
+}
+
+/* Download cards */
+.download-row .file-preview {
+    background: #1a1a1f !important;
+    border: 1px solid #333340 !important;
+    border-radius: 10px !important;
+}
+
+/* Result summary */
+.summary-box {
+    background: #1a1a1f !important;
+    border: 1px solid #2a2a35 !important;
+    border-radius: 12px !important;
+    padding: 16px !important;
+}
+.summary-box table {
+    width: 100% !important;
+}
+.summary-box td, .summary-box th {
+    padding: 6px 12px !important;
+    font-size: 13px !important;
+    border-bottom: 1px solid #222230 !important;
+}
+
+/* Toggle checkboxes */
+.toggle-row {
+    gap: 24px !important;
+}
+
+/* Audio upload area */
+.audio-upload {
+    border: 2px dashed #333340 !important;
+    border-radius: 14px !important;
+    transition: all 0.2s !important;
+}
+.audio-upload:hover {
+    border-color: #6366f1 !important;
+}
+
+/* Footer */
+.footer-text {
+    text-align: center;
+    padding: 20px 0 8px;
+    color: #6a6a7a;
+    font-size: 12px;
+}
+.footer-text a {
+    color: #818cf8;
+    text-decoration: none;
+}
+"""
+
+with gr.Blocks(theme=THEME, title="TranscribeAI", css=CUSTOM_CSS) as demo:
+
+    # ---- Header ----
+    gr.HTML("""
+    <div class="header-wrap">
+        <h1>TranscribeAI</h1>
+        <p>Transkripsi Audio dengan Speaker Diarization</p>
+        <div class="badge-gpu">ZeroGPU H200 &bull; Whisper &bull; Tanpa API Key</div>
+    </div>
     """)
 
-    with gr.Row():
-        with gr.Column(scale=2):
-            audio_input = gr.Audio(
-                label="Upload Audio/Video",
-                type="filepath",
-                sources=["upload", "microphone"],
-            )
-        with gr.Column(scale=1):
-            model_choice = gr.Dropdown(
-                choices=list(WHISPER_MODELS.keys()),
-                value="small",
-                label="Model",
-                info="Lebih besar = lebih akurat tapi lebih lambat"
-            )
-            language_choice = gr.Dropdown(
-                choices=list(LANGUAGE_MAP.keys()),
-                value="Auto-detect",
-                label="Bahasa"
+    # ---- Upload + Settings ----
+    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 ----
+    with gr.Group(elem_classes="card-section"):
+        gr.HTML('<div class="card-title">⚙️ Opsi</div>')
+        with gr.Row(elem_classes="toggle-row"):
+            enable_diarization = gr.Checkbox(
+                value=True,
+                label="Speaker Diarization",
+                info="Identifikasi siapa yang berbicara"
             )
-            speaker_count = gr.Slider(
-                minimum=0, maximum=10, step=1, value=0,
-                label="Jumlah Pembicara (0 = auto)",
+            enable_vad = gr.Checkbox(
+                value=True,
+                label="VAD Filter",
+                info="Lewati bagian hening"
             )
 
-    with gr.Row():
-        enable_diarization = gr.Checkbox(value=True, label="Speaker Diarization")
-        enable_vad = gr.Checkbox(value=True, label="VAD Filter")
-
-    btn_start = gr.Button("Mulai Transkripsi", variant="primary", size="lg")
-
-    summary_output = gr.Markdown(label="Ringkasan")
-    transcript_output = gr.Textbox(
-        label="Hasil Transkripsi", lines=15,
-        show_copy_button=True, interactive=False,
+    # ---- Start Button ----
+    btn_start = gr.Button(
+        "🚀 Mulai Transkripsi",
+        variant="primary",
+        size="lg",
+        elem_classes="btn-start",
     )
 
-    with gr.Row():
-        srt_file = gr.File(label="Download SRT")
-        txt_file = gr.File(label="Download TXT")
-        docx_file = gr.File(label="Download DOCX")
+    # ---- Results ----
+    with gr.Group(elem_classes="card-section", visible=True):
+        gr.HTML('<div class="card-title">📊 Hasil</div>')
+        summary_output = gr.Markdown(
+            label="Ringkasan",
+            elem_classes="summary-box",
+        )
+        transcript_output = gr.Textbox(
+            label="Transkripsi",
+            lines=18,
+            max_lines=40,
+            show_copy_button=True,
+            interactive=False,
+            elem_classes="transcript-box",
+            placeholder="Hasil transkripsi akan muncul di sini...",
+        )
+
+    # ---- Downloads ----
+    with gr.Group(elem_classes="card-section"):
+        gr.HTML('<div class="card-title">📥 Download</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)")
 
+    # ---- Connect ----
     btn_start.click(
         fn=transcribe_full,
         inputs=[audio_input, model_choice, language_choice, speaker_count,
@@ -556,9 +740,13 @@ with gr.Blocks(theme=THEME, title="TranscribeAI", css="""
         outputs=[summary_output, transcript_output, srt_file, txt_file, docx_file],
     )
 
-    gr.Markdown("""
-    ---
-    **TranscribeAI** by [romizone](https://huggingface.co/romizone) | ZeroGPU H200 | [GitHub](https://github.com/romizone/transcribeAI)
+    # ---- Footer ----
+    gr.HTML("""
+    <div class="footer-text">
+        <strong>TranscribeAI</strong> by <a href="https://huggingface.co/romizone">romizone</a>
+        &bull; <a href="https://github.com/romizone/transcribeAI">GitHub</a>
+        &bull; ZeroGPU H200 &bull; Whisper + PyTorch
+    </div>
     """)
 
 demo.queue().launch(ssr_mode=False)