Merge branch 'interface-beautification' into 'main'

Revamp UI with custom theme, CSS, and Blocks interface for improved design and usability

See merge request sonne-technology/bsod-tv/waveform-matching-gradio-front-end!2

app.py

@@ -65,21 +65,236 @@ def process_audio(original_audio_path, dubbed_audio_path, email, company_name, t
     return "Processing started. Results will be emailed to you shortly."
 
 
-# Create the Gradio interface for the application.
-demo = gr.Interface(
-    fn=process_audio,
-    inputs=[
-        gr.Audio(type="filepath", label="Original .wav file"),
-        gr.Audio(type="filepath", label="Dubbed .wav file"),
-        gr.Textbox(label="Email"),
-        gr.Textbox(label="Company Name"),
-        gr.Slider(0, 100, value=5, label="Tolerance Percentage", info="Set the tolerance for audio comparison.")
-    ],
-    outputs=gr.Text(label="Processing Status"),
-    title="BSOD.tv - Dub QC Demo",
-    description="Upload original and dubbed .wav files (under 30 minutes) to start the QC process.",
-    allow_flagging="never"
-)
+# Create a professional Gradio interface using the Golden ratio (1.618) for proportions
+# Define custom CSS for a professional look
+css = """
+:root {
+    --main-bg-color: #111827;
+    --primary-color: #3B82F6;
+    --secondary-color: #60A5FA;
+    --text-color: #F9FAFB;
+    --text-secondary: #9CA3AF;
+    --card-bg: #1F2937;
+    --border-color: #374151;
+    --accent-blue: #3B82F6;
+    --accent-yellow: #FBBF24;
+    --accent-red: #EF4444;
+    --accent-green: #22C55E;
+    --border-radius: 8px;
+    --golden-ratio: 1.618;
+    --font-header: 'Barlow', sans-serif;
+    --font-body: 'Work Sans', sans-serif;
+}
+
+body {
+    font-family: var(--font-body);
+    background-color: var(--main-bg-color);
+    color: var(--text-color);
+}
+
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: calc(20px * var(--golden-ratio));
+    background-color: var(--main-bg-color);
+    border-radius: calc(var(--border-radius) * var(--golden-ratio));
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
+}
+
+.logo-container {
+    display: flex;
+    justify-content: center;
+    margin-bottom: calc(20px * var(--golden-ratio));
+    padding: 15px;
+    background-color: var(--card-bg);
+    border-radius: var(--border-radius);
+    border: 1px solid var(--border-color);
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+}
+
+.logo {
+    max-width: 200px;
+    max-height: 100px;
+    transition: transform 0.3s ease;
+}
+
+.logo:hover {
+    transform: scale(1.05);
+}
+
+.header {
+    text-align: center;
+    margin-bottom: calc(30px * var(--golden-ratio));
+    padding: calc(15px * var(--golden-ratio));
+    background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%);
+    color: white;
+    border-radius: var(--border-radius);
+    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
+}
+
+.header h1 {
+    color: white;
+    font-family: var(--font-header);
+    font-size: calc(1.5rem * var(--golden-ratio));
+    margin-bottom: calc(0.5rem * var(--golden-ratio));
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
+    font-weight: 600;
+}
+
+.header p {
+    color: rgba(255, 255, 255, 0.9);
+    font-size: 1rem;
+    max-width: calc(600px * var(--golden-ratio));
+    margin: 0 auto;
+}
+
+.input-section, .output-section {
+    background-color: var(--card-bg);
+    border: 1px solid var(--border-color);
+    border-radius: var(--border-radius);
+    padding: calc(20px * var(--golden-ratio));
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
+    margin-bottom: 20px;
+    transition: all 0.3s ease;
+}
+
+.input-section:hover, .output-section:hover {
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    border-color: var(--primary-color);
+}
+
+.input-section {
+    flex: var(--golden-ratio);
+}
+
+.output-section {
+    flex: 1;
+}
+
+.footer {
+    text-align: center;
+    margin-top: calc(30px * var(--golden-ratio));
+    padding: 15px;
+    color: var(--text-secondary);
+    font-size: 0.9rem;
+    border-top: 1px solid var(--border-color);
+}
+
+/* Improve form elements */
+.gradio-slider input[type=range] {
+    accent-color: var(--primary-color);
+}
+
+.gradio-textbox input, .gradio-textbox textarea {
+    background-color: var(--main-bg-color) !important;
+    border: 1px solid var(--border-color) !important;
+    border-radius: var(--border-radius) !important;
+    padding: 10px !important;
+    color: var(--text-color) !important;
+    transition: all 0.3s ease !important;
+}
+
+.gradio-textbox input:focus, .gradio-textbox textarea:focus {
+    border-color: var(--primary-color) !important;
+    box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.3) !important;
+}
+
+.gradio-button {
+    background-color: var(--primary-color) !important;
+    color: white !important;
+    border-radius: var(--border-radius) !important;
+    padding: calc(10px * var(--golden-ratio)) calc(20px * var(--golden-ratio)) !important;
+    font-weight: 600 !important;
+    font-family: var(--font-header) !important;
+    transition: all 0.3s ease !important;
+    box-shadow: 0 4px 6px rgba(59, 130, 246, 0.3) !important;
+    border: none !important;
+}
+
+.gradio-button:hover {
+    background-color: var(--secondary-color) !important;
+    transform: translateY(-2px);
+    box-shadow: 0 6px 12px rgba(59, 130, 246, 0.4) !important;
+}
+
+/* Golden ratio spacing for elements */
+.gradio-row {
+    margin-bottom: calc(16px * var(--golden-ratio)) !important;
+}
+
+/* Additional dark theme adjustments */
+.gradio-container {
+    background-color: var(--main-bg-color) !important;
+}
+
+.gradio-form {
+    background-color: var(--card-bg) !important;
+    border: 1px solid var(--border-color) !important;
+}
+
+/* Labels and text styling */
+label {
+    color: var(--text-color) !important;
+    font-family: var(--font-body) !important;
+}
+
+/* Responsive adjustments */
+@media (max-width: 768px) {
+    .container {
+        padding: 15px;
+    }
+
+    .input-section, .output-section {
+        padding: 15px;
+    }
+}
+"""
+
+# Create a Blocks interface for more customization
+with gr.Blocks(css=css, theme=gr.themes.Soft(primary_hue="indigo", secondary_hue="purple")) as demo:
+    with gr.Column(elem_classes="container"):
+        # Logo section
+        with gr.Row(elem_classes="logo-container"):
+            logo = gr.Image("logo.png", elem_id="logo")
+
+        # Header section
+        with gr.Column(elem_classes="header"):
+            gr.HTML("""
+                <h1 style="margin-top: 0;">BSOD.tv - Dub QC Demo</h1>
+                <p style="font-size: 1.1rem; line-height: 1.618;">
+                    Professional audio synchronization verification for media localization.
+                    <br>Upload original and dubbed .wav files (under 30 minutes) to start the QC process.
+                </p>
+            """)
+
+        # Main content with Golden ratio proportions
+        with gr.Row():
+            # Input section (larger according to Golden ratio)
+            with gr.Column(scale=1.618, elem_classes="input-section"):
+                original_audio = gr.Audio(type="filepath", label="Original .wav file")
+                dubbed_audio = gr.Audio(type="filepath", label="Dubbed .wav file")
+                email = gr.Textbox(label="Email")
+                company_name = gr.Textbox(label="Company Name")
+                tolerance = gr.Slider(0, 100, value=5, label="Tolerance Percentage", 
+                                     info="Set the tolerance for audio comparison.")
+                submit_btn = gr.Button("Process Audio", variant="primary")
+
+            # Output section (smaller according to Golden ratio)
+            with gr.Column(scale=1, elem_classes="output-section"):
+                output = gr.Text(label="Processing Status")
+                gr.Markdown("### Results")
+                gr.Markdown("Once processing is complete, results will be emailed to the address provided.")
+
+        # Footer
+        with gr.Row(elem_classes="footer"):
+            gr.Markdown("© BSOD.tv - Professional Dub Quality Control")
+
+    # Set up the processing function
+    submit_btn.click(
+        fn=process_audio,
+        inputs=[original_audio, dubbed_audio, email, company_name, tolerance],
+        outputs=output
+    )
 
 if __name__ == "__main__":
     # To run this file locally, you'll need to install gradio and requests:

requirements.txt

@@ -1,2 +1,3 @@
 gradio
-requests
+requests
+pillow