Update app.py

app.py

@@ -14,19 +14,160 @@ def transcribe(file):
         return "Please upload a video or audio file."
     try:
         m = load_model()
-        result = m.transcribe(file, language="en", verbose=False)
+        result = m.transcribe(file.name, language="en", verbose=False)
         return result["text"].strip()
     except Exception as e:
         return f"Error: {str(e)}"
 
-demo = gr.Interface(
-    fn=transcribe,
-    inputs=gr.Audio(type="filepath", label="Upload your video or audio file"),
-    outputs=gr.Textbox(label="Transcript", lines=15),
-    title="🎙️ AI Video Transcriber",
-    description="Upload any video or audio file and get a full transcript powered by OpenAI Whisper.",
-    theme=gr.themes.Soft()
-)
+custom_css = """
+@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display:ital@0;1&family=DM+Sans:wght@300;400;500&display=swap');
+
+* { box-sizing: border-box; }
+
+body, .gradio-container {
+    background: #0a0a0a !important;
+    font-family: 'DM Sans', sans-serif !important;
+}
+
+.gradio-container {
+    max-width: 920px !important;
+    margin: 0 auto !important;
+    padding: 48px 24px !important;
+}
+
+.prose h1 {
+    font-family: 'DM Serif Display', serif !important;
+    font-size: 2.8rem !important;
+    font-weight: 400 !important;
+    color: #f0ece2 !important;
+    letter-spacing: -0.02em !important;
+    line-height: 1.1 !important;
+    margin-bottom: 0 !important;
+}
+
+.prose p {
+    font-family: 'DM Sans', sans-serif !important;
+    color: #6b6860 !important;
+    font-size: 0.95rem !important;
+    font-weight: 300 !important;
+    margin-top: 10px !important;
+}
+
+.contain, .gap {
+    background: transparent !important;
+    border: none !important;
+    gap: 20px !important;
+}
+
+.block {
+    background: #111111 !important;
+    border: 1px solid #1e1e1e !important;
+    border-radius: 16px !important;
+}
+
+.block label span {
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.75rem !important;
+    font-weight: 500 !important;
+    color: #6b6860 !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.1em !important;
+}
+
+textarea {
+    background: transparent !important;
+    color: #f0ece2 !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.95rem !important;
+    line-height: 1.8 !important;
+    font-weight: 300 !important;
+    border: none !important;
+}
+
+.file-preview, .upload-container {
+    background: transparent !important;
+    border: none !important;
+    color: #555 !important;
+}
+
+button.primary {
+    background: #c9a96e !important;
+    border: none !important;
+    border-radius: 12px !important;
+    color: #0a0a0a !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.1em !important;
+    text-transform: uppercase !important;
+    padding: 14px 28px !important;
+    transition: all 0.2s ease !important;
+}
+
+button.primary:hover {
+    background: #d4b87e !important;
+    transform: translateY(-1px) !important;
+    box-shadow: 0 4px 20px rgba(201,169,110,0.25) !important;
+}
+
+button.secondary {
+    background: transparent !important;
+    border: 1px solid #222 !important;
+    border-radius: 12px !important;
+    color: #555 !important;
+    font-family: 'DM Sans', sans-serif !important;
+    font-size: 0.8rem !important;
+    font-weight: 500 !important;
+    letter-spacing: 0.1em !important;
+    text-transform: uppercase !important;
+    transition: all 0.2s ease !important;
+}
+
+button.secondary:hover {
+    border-color: #444 !important;
+    color: #f0ece2 !important;
+}
+
+footer { display: none !important; }
+
+textarea::-webkit-scrollbar { width: 4px; }
+textarea::-webkit-scrollbar-track { background: transparent; }
+textarea::-webkit-scrollbar-thumb { background: #2a2a2a; border-radius: 4px; }
+
+.gradio-container::before {
+    content: '';
+    display: block;
+    width: 36px;
+    height: 2px;
+    background: #c9a96e;
+    margin-bottom: 28px;
+}
+"""
+
+with gr.Blocks(css=custom_css, title="KalpTranscript") as demo:
+    gr.Markdown("""
+# KalpTranscript
+Turn any video or audio into clean, readable text — powered by OpenAI Whisper.
+""")
+
+    with gr.Row():
+        with gr.Column():
+            file_input = gr.File(
+                label="Drop your file here",
+                file_types=["video", "audio"]
+            )
+            with gr.Row():
+                clear_btn = gr.ClearButton(value="Clear")
+                submit_btn = gr.Button("Transcribe →", variant="primary")
+
+        with gr.Column():
+            output = gr.Textbox(
+                label="Transcript",
+                lines=14,
+                placeholder="Your transcript will appear here..."
+            )
+
+    submit_btn.click(fn=transcribe, inputs=file_input, outputs=output)
 
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch()