Upload app.py

app.py

@@ -43,112 +43,246 @@ def save_transcript(text):
     return path
 
 custom_css = """
-@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:wght@300;400;500&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Syne:wght@400;500;600;700&family=Inter:wght@300;400;500&display=swap');
+
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
 
 body, .gradio-container {
-    background: #080808 !important;
-    font-family: 'DM Sans', sans-serif !important;
+    background: #000000 !important;
+    font-family: 'Inter', sans-serif !important;
+    color: #EFECE3 !important;
 }
+
 .gradio-container {
-    max-width: 1000px !important;
+    max-width: 1100px !important;
     margin: 0 auto !important;
-    padding: 48px 28px 80px !important;
+    padding: 0 !important;
 }
-.gradio-container::before {
-    content: '';
-    display: block;
-    width: 36px;
-    height: 2px;
-    background: #c9a96e;
-    margin-bottom: 32px;
+
+/* ── Hero header ── */
+.prose {
+    padding: 64px 48px 48px !important;
+    border-bottom: 1px solid #111 !important;
+    margin-bottom: 0 !important;
 }
+
 .prose h1 {
-    font-family: 'DM Serif Display', serif !important;
-    font-size: 3rem !important;
-    font-weight: 400 !important;
-    color: #f0ece2 !important;
-    letter-spacing: -0.02em !important;
-    line-height: 1.05 !important;
+    font-family: 'Syne', sans-serif !important;
+    font-size: 4rem !important;
+    font-weight: 700 !important;
+    color: #EFECE3 !important;
+    letter-spacing: -0.03em !important;
+    line-height: 1 !important;
+    margin-bottom: 0 !important;
+}
+
+.prose h1 span {
+    color: #58B8FF !important;
 }
+
 .prose p {
-    color: #555 !important;
-    font-size: 0.9rem !important;
-    font-weight: 300 !important;
-    margin-top: 8px !important;
+    font-size: 0.88rem !important;
+    color: #3066BE !important;
+    font-weight: 400 !important;
+    margin-top: 12px !important;
+    letter-spacing: 0.08em !important;
+    text-transform: uppercase !important;
+}
+
+/* ── Main layout ── */
+.contain, .gap {
+    background: transparent !important;
+    border: none !important;
 }
-.contain, .gap { background: transparent !important; border: none !important; }
+
+.main-row {
+    padding: 40px 48px !important;
+    gap: 32px !important;
+    align-items: flex-start !important;
+}
+
+/* ── All blocks ── */
 .block {
-    background: #0f0f0f !important;
-    border: 1px solid #1c1c1c !important;
-    border-radius: 14px !important;
+    background: #080808 !important;
+    border: 1px solid #1a1a1a !important;
+    border-radius: 4px !important;
+    transition: border-color 0.2s !important;
 }
+
+.block:hover { border-color: #3066BE !important; }
+
+/* ── Labels ── */
 .block label > span, label > span {
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.72rem !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 0.68rem !important;
     font-weight: 500 !important;
-    color: #4a4a4a !important;
+    color: #112D4E !important;
     text-transform: uppercase !important;
-    letter-spacing: 0.12em !important;
+    letter-spacing: 0.15em !important;
 }
+
+/* ── File upload zone ── */
+.file-upload, [data-testid="file"], .upload-container {
+    background: #050505 !important;
+    border: 1.5px dashed #1a2a3a !important;
+    border-radius: 4px !important;
+    transition: all 0.25s !important;
+    min-height: 160px !important;
+}
+
+.file-upload:hover, [data-testid="file"]:hover {
+    border-color: #3066BE !important;
+    background: #060d1a !important;
+}
+
+.file-upload .wrap {
+    display: flex !important;
+    flex-direction: column !important;
+    align-items: center !important;
+    justify-content: center !important;
+    gap: 10px !important;
+    padding: 40px !important;
+}
+
+.file-upload .wrap svg {
+    color: #3066BE !important;
+    width: 28px !important;
+    height: 28px !important;
+    opacity: 0.6 !important;
+}
+
+.file-upload .wrap span {
+    font-size: 0.82rem !important;
+    color: #2a3a4a !important;
+    font-family: 'Inter', sans-serif !important;
+}
+
+/* ── Dropdowns ── */
+.wrap-inner, select {
+    background: #080808 !important;
+    border: 1px solid #1a1a1a !important;
+    border-radius: 4px !important;
+    color: #EFECE3 !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 0.85rem !important;
+}
+
+/* ── Radio buttons ── */
+.wrap.svelte-12cmxck, .wrap.svelte-1p9xokt {
+    gap: 8px !important;
+}
+
+input[type="radio"] { accent-color: #3066BE !important; }
+input[type="checkbox"] { accent-color: #3066BE !important; }
+
+.radio-group label, .checkbox-group label {
+    font-size: 0.82rem !important;
+    color: #EFECE3 !important;
+    font-family: 'Inter', sans-serif !important;
+}
+
+/* ── Textarea / output ── */
 textarea {
     background: transparent !important;
-    color: #d4d0c8 !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.92rem !important;
-    line-height: 1.85 !important;
+    color: #EFECE3 !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 0.9rem !important;
+    line-height: 1.9 !important;
     font-weight: 300 !important;
     border: none !important;
+    letter-spacing: 0.01em !important;
 }
-textarea::placeholder { color: #2e2e2e !important; }
-input[type="checkbox"] { accent-color: #c9a96e !important; }
+
+textarea::placeholder { color: #1a1a1a !important; }
+
+/* ── Primary button ── */
 button.primary {
-    background: #c9a96e !important;
+    background: #3066BE !important;
     border: none !important;
-    border-radius: 11px !important;
-    color: #080808 !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.78rem !important;
-    font-weight: 500 !important;
+    border-radius: 4px !important;
+    color: #F9F7F7 !important;
+    font-family: 'Syne', sans-serif !important;
+    font-size: 0.82rem !important;
+    font-weight: 600 !important;
     letter-spacing: 0.12em !important;
     text-transform: uppercase !important;
-    padding: 14px 28px !important;
+    padding: 15px 32px !important;
     transition: all 0.2s ease !important;
 }
+
 button.primary:hover {
-    background: #d4b87e !important;
+    background: #58B8FF !important;
+    color: #000000 !important;
     transform: translateY(-1px) !important;
-    box-shadow: 0 6px 24px rgba(201,169,110,0.3) !important;
 }
+
+button.primary:active { transform: translateY(0) !important; }
+
+/* ── Secondary button ── */
 button.secondary {
     background: transparent !important;
-    border: 1px solid #1e1e1e !important;
-    border-radius: 11px !important;
-    color: #4a4a4a !important;
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.78rem !important;
-    font-weight: 500 !important;
+    border: 1px solid #1a1a1a !important;
+    border-radius: 4px !important;
+    color: #2a3a4a !important;
+    font-family: 'Syne', sans-serif !important;
+    font-size: 0.82rem !important;
+    font-weight: 600 !important;
     letter-spacing: 0.12em !important;
     text-transform: uppercase !important;
+    padding: 15px 32px !important;
     transition: all 0.2s ease !important;
 }
-button.secondary:hover { border-color: #3a3a3a !important; color: #c8c4bc !important; }
+
+button.secondary:hover {
+    border-color: #3066BE !important;
+    color: #58B8FF !important;
+}
+
+/* ── Tabs ── */
+.tab-nav {
+    border-bottom: 1px solid #111 !important;
+    margin-bottom: 0 !important;
+}
+
 .tab-nav button {
-    font-family: 'DM Sans', sans-serif !important;
-    font-size: 0.78rem !important;
+    font-family: 'Inter', sans-serif !important;
+    font-size: 0.72rem !important;
     font-weight: 500 !important;
-    letter-spacing: 0.1em !important;
+    letter-spacing: 0.12em !important;
     text-transform: uppercase !important;
-    color: #4a4a4a !important;
+    color: #2a3a4a !important;
     background: transparent !important;
     border: none !important;
     border-bottom: 2px solid transparent !important;
+    padding: 12px 20px !important;
     transition: all 0.2s !important;
 }
-.tab-nav button.selected { color: #c9a96e !important; border-bottom-color: #c9a96e !important; }
-::-webkit-scrollbar { width: 3px; }
+
+.tab-nav button.selected {
+    color: #58B8FF !important;
+    border-bottom-color: #58B8FF !important;
+}
+
+/* ── Progress bar ── */
+.progress-bar { background: #3066BE !important; }
+.progress-bar-wrap { background: #111 !important; border-radius: 0 !important; }
+
+/* ── Scrollbar ── */
+::-webkit-scrollbar { width: 2px; }
 ::-webkit-scrollbar-track { background: transparent; }
-::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
+::-webkit-scrollbar-thumb { background: #1a2a3a; border-radius: 0; }
+
+/* ── Footer ── */
 footer { display: none !important; }
+
+/* ── Bottom credit bar ── */
+.credit-bar {
+    padding: 20px 48px !important;
+    border-top: 1px solid #0a0a0a !important;
+    display: flex !important;
+    align-items: center !important;
+    justify-content: space-between !important;
+}
 """
 
 LANGUAGES = [
@@ -157,13 +291,14 @@ LANGUAGES = [
     "Korean", "Arabic", "Russian", "Dutch", "Turkish"
 ]
 
-with gr.Blocks(title="KalpTranscript") as demo:
+with gr.Blocks(title="Kalp Transcript — Kalpi Edition") as demo:
+
     gr.Markdown("""
-# KalpTranscript
-Turn any video or audio into clean, readable text — powered by OpenAI Whisper.
+# Kalp <span>Transcript</span>
+Created by Kalpi Edition
 """)
 
-    with gr.Row():
+    with gr.Row(elem_classes=["main-row"]):
         with gr.Column(scale=1):
             file_input = gr.File(
                 label="Drop your file here",
@@ -172,8 +307,8 @@ Turn any video or audio into clean, readable text — powered by OpenAI Whisper.
             with gr.Row():
                 model_choice = gr.Dropdown(
                     choices=["tiny", "base", "small", "medium"],
-                    value="small",
-                    label="Model"
+                    value="tiny",
+                    label="Model  —  tiny = fastest · medium = best accuracy"
                 )
                 language = gr.Dropdown(
                     choices=LANGUAGES,
@@ -193,11 +328,15 @@ Turn any video or audio into clean, readable text — powered by OpenAI Whisper.
         with gr.Column(scale=1):
             with gr.Tabs():
                 with gr.Tab("Transcript"):
-                    output = gr.Textbox(label="", lines=16, placeholder="Your transcript will appear here...")
+                    output = gr.Textbox(
+                        label="",
+                        lines=18,
+                        placeholder="Your transcript will appear here..."
+                    )
                 with gr.Tab("Download"):
-                    plain_output = gr.Textbox(label="Plain text", lines=10, visible=False)
+                    plain_output = gr.Textbox(label="Plain text", lines=12, visible=False)
                     download_btn = gr.Button("Save as .txt", variant="secondary")
-                    download_file = gr.File(label="Download")
+                    download_file = gr.File(label="")
 
     submit_btn.click(
         fn=transcribe,