Update app.py

app.py

@@ -55,193 +55,52 @@ class SeamlessTranslator:
             raise gr.Error(f"❌ Translation failed: {str(e)}")
 
 css = """
-#component-0 {
-    max-width: 1200px;
-    margin: auto;
-    padding: 20px;
+.gradio-container {
+    max-width: 1200px !important;
+    margin: auto !important;
 }
 
-.container {
-    border-radius: 16px;
-    padding: 24px;
-    background: white;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-
-.header-container {
+.main-header {
     text-align: center;
     margin-bottom: 2rem;
     padding: 2rem;
-    background: linear-gradient(135deg, #f8fafc, #e2e8f0);
-    border-radius: 16px;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
-}
-
-.title {
-    font-size: 2.75rem;
-    font-weight: 800;
     background: linear-gradient(135deg, #1e40af, #3b82f6);
-    -webkit-background-clip: text;
-    -webkit-text-fill-color: transparent;
-    margin-bottom: 0.5rem;
-}
-
-.subtitle {
-    color: #64748b;
-    font-size: 1.1rem;
-    margin-bottom: 1rem;
-}
-
-.stats {
-    display: flex;
-    justify-content: center;
-    gap: 2rem;
-    margin-top: 1rem;
-}
-
-.stat-item {
-    text-align: center;
-    padding: 0.5rem 1rem;
-    background: white;
-    border-radius: 8px;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-
-.stat-value {
-    font-weight: 600;
-    color: #1e40af;
-    font-size: 1.25rem;
-}
-
-.stat-label {
-    color: #64748b;
-    font-size: 0.875rem;
-}
-
-.tab-nav {
-    background: white;
-    padding: 0.5rem;
     border-radius: 12px;
-    margin-bottom: 1.5rem;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-
-.gr-form {
-    border: none !important;
-    background: white;
-    padding: 1.5rem !important;
-    border-radius: 12px !important;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-
-.gr-box {
-    border-radius: 12px !important;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-
-.gr-button {
-    border-radius: 8px !important;
-    background: linear-gradient(135deg, #1e40af, #3b82f6) !important;
-    color: white !important;
-    font-weight: 600 !important;
-    padding: 0.75rem 1.5rem !important;
-    transition: all 0.2s !important;
+    color: white;
 }
 
-.gr-button:hover {
-    transform: translateY(-1px) !important;
-    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1) !important;
-}
-
-.gr-input, .gr-select {
-    border-radius: 8px !important;
-    border: 1px solid #e2e8f0 !important;
-    padding: 0.75rem !important;
-    transition: all 0.2s !important;
-}
-
-.gr-input:focus, .gr-select:focus {
-    border-color: #3b82f6 !important;
-    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
+.main-title {
+    font-size: 2.5rem;
+    font-weight: bold;
+    margin-bottom: 0.5rem;
 }
 
-.gr-panel {
-    border-radius: 12px !important;
-    border: none !important;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1) !important;
+.main-subtitle {
+    font-size: 1.2rem;
+    opacity: 0.9;
 }
 
-.output-container {
-    background: #f8fafc;
+.container {
     padding: 1.5rem;
     border-radius: 12px;
-    margin-top: 1rem;
-}
-
-.output-label {
-    font-weight: 600;
-    color: #1e40af;
-    margin-bottom: 0.75rem;
-    font-size: 1.1rem;
+    background: white;
+    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
+    margin-bottom: 1.5rem;
 }
 
-.status-message {
-    padding: 0.75rem;
+.status-box {
+    padding: 1rem;
     border-radius: 8px;
-    margin-top: 1rem;
-    font-size: 0.875rem;
     background: #f0f9ff;
     border-left: 4px solid #3b82f6;
+    margin-top: 1rem;
 }
 
 .footer {
     text-align: center;
-    margin-top: 3rem;
-    padding: 1.5rem;
-    background: white;
-    border-radius: 12px;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-
-.footer-text {
-    color: #64748b;
-    font-size: 0.875rem;
-}
-
-.feature-grid {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    gap: 1rem;
-    margin: 1rem 0;
-}
-
-.feature-item {
-    background: white;
+    margin-top: 2rem;
     padding: 1rem;
-    border-radius: 8px;
-    text-align: center;
-    box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1);
-}
-
-.feature-icon {
-    font-size: 1.5rem;
-    margin-bottom: 0.5rem;
-    color: #3b82f6;
-}
-
-.language-pair {
-    display: flex;
-    align-items: center;
-    gap: 1rem;
-    margin: 1rem 0;
-    padding: 0.75rem;
-    background: #f8fafc;
-    border-radius: 8px;
-}
-
-.language-arrow {
-    color: #3b82f6;
-    font-weight: bold;
+    color: #666;
 }
 """
 
@@ -249,71 +108,50 @@ def create_ui():
     translator = SeamlessTranslator()
 
     with gr.Blocks(css=css, title="A.R.I.S. Translator") as demo:
-        # Header
-        with gr.Column(elem_class="header-container"):
-            gr.HTML(
-                """
-                <div class="title">A.R.I.S. Translator</div>
-                <div class="subtitle">Advanced Real-time Interpretation System</div>
-                <div class="stats">
-                    <div class="stat-item">
-                        <div class="stat-value">10</div>
-                        <div class="stat-label">Languages</div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="stat-value">Real-time</div>
-                        <div class="stat-label">Translation</div>
-                    </div>
-                    <div class="stat-item">
-                        <div class="stat-value">Neural</div>
-                        <div class="stat-label">Technology</div>
-                    </div>
-                </div>
-                """
-            )
+        gr.HTML(
+            """
+            <div class="main-header">
+                <div class="main-title">A.R.I.S. Translator</div>
+                <div class="main-subtitle">Advanced Real-time Interpretation System</div>
+            </div>
+            """
+        )
 
-        # Main content
-        with gr.Tabs() as tabs:
+        with gr.Tabs():
             # Text Translation Tab
-            with gr.Tab("🔤 Text Translation", id=1):
+            with gr.Tab("🔤 Text Translation"):
                 with gr.Row():
                     with gr.Column():
                         text_input = gr.Textbox(
                             label="Text to Translate",
                             placeholder="Enter your text here...",
-                            lines=5,
-                            elem_classes="gr-input"
+                            lines=5
                         )
                         with gr.Row():
                             src_lang = gr.Dropdown(
                                 choices=list(translator.languages.keys()),
                                 value="🇺🇸 English",
-                                label="Source Language",
-                                elem_classes="gr-select"
+                                label="Source Language"
                             )
                             tgt_lang = gr.Dropdown(
                                 choices=list(translator.languages.keys()),
                                 value="🇪🇸 Spanish",
-                                label="Target Language",
-                                elem_classes="gr-select"
+                                label="Target Language"
                             )
                         translate_btn = gr.Button("🔄 Translate", variant="primary")
                         status_text = gr.Textbox(
                             label="Status",
-                            interactive=False,
-                            elem_classes="status-message"
+                            interactive=False
                         )
 
                     with gr.Column():
-                        with gr.Box(elem_classes="output-container"):
-                            gr.HTML('<div class="output-label">🔊 Translation Output</div>')
-                            audio_output = gr.Audio(
-                                label="Translated Audio",
-                                type="numpy"
-                            )
+                        audio_output = gr.Audio(
+                            label="Translation Output",
+                            type="numpy"
+                        )
 
             # Audio Translation Tab
-            with gr.Tab("🎤 Audio Translation", id=2):
+            with gr.Tab("🎤 Audio Translation"):
                 with gr.Row():
                     with gr.Column():
                         audio_input = gr.Audio(
@@ -323,51 +161,24 @@ def create_ui():
                         tgt_lang_audio = gr.Dropdown(
                             choices=list(translator.languages.keys()),
                             value="🇺🇸 English",
-                            label="Target Language",
-                            elem_classes="gr-select"
+                            label="Target Language"
                         )
                         translate_audio_btn = gr.Button("🔄 Translate Audio", variant="primary")
                         status_text_audio = gr.Textbox(
                             label="Status",
-                            interactive=False,
-                            elem_classes="status-message"
+                            interactive=False
                         )
 
                     with gr.Column():
-                        with gr.Box(elem_classes="output-container"):
-                            gr.HTML('<div class="output-label">🔊 Translation Output</div>')
-                            audio_output_from_audio = gr.Audio(
-                                label="Translated Audio",
-                                type="numpy"
-                            )
-
-        # Features Grid
-        gr.HTML(
-            """
-            <div class="feature-grid">
-                <div class="feature-item">
-                    <div class="feature-icon">🌐</div>
-                    <div>10 Languages</div>
-                </div>
-                <div class="feature-item">
-                    <div class="feature-icon">⚡</div>
-                    <div>Real-time Processing</div>
-                </div>
-                <div class="feature-item">
-                    <div class="feature-icon">���</div>
-                    <div>High Accuracy</div>
-                </div>
-            </div>
-            """
-        )
+                        audio_output_from_audio = gr.Audio(
+                            label="Translation Output",
+                            type="numpy"
+                        )
 
-        # Footer
         gr.HTML(
             """
             <div class="footer">
-                <div class="footer-text">
-                    Powered by Meta's SeamlessM4T model | Built with ❤️ using Gradio
-                </div>
+                Powered by Meta's SeamlessM4T model | Built with Gradio
             </div>
             """
         )