Update app.py

app.py

@@ -161,161 +161,77 @@ ROFORMER_MODELS = {
 OUTPUT_FORMATS = ['wav', 'flac', 'mp3', 'ogg', 'opus', 'm4a', 'aiff', 'ac3']
 
 # CSS (unchanged from provided version)
-CSS = """
-/* Modern ve Etkileşimli Tema */
-#app-container {
-    max-width: 900px;
-    width: 100%;
-    margin: 0 auto;
-    padding: 1rem;
-    box-sizing: border-box;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    min-height: 100vh;
-    background: linear-gradient(135deg, #1a0b2e, #2e1a47);
-    position: relative;
-    overflow: visible; /* Ensure no clipping */
-}
+css = """
 body {
-    background: none;
+    background: linear-gradient(to bottom, rgba(45, 11, 11, 0.9), rgba(0, 0, 0, 0.8)), url('/content/logo.jpg') no-repeat center center fixed;
+    background-size: cover;
+    min-height: 100vh;
     margin: 0;
-    padding: 0;
-    font-family: 'Roboto', sans-serif;
-    color: #e0e0e0;
-    display: flex;
-    justify-content: center;
-}
-body::after {
-    content: '';
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(26, 11, 46, 0.8);
-    z-index: -1;
-}
-.logo-container {
-    position: fixed;
-    top: 1rem;
-    left: 50%;
-    transform: translateX(-50%);
-    z-index: 2000;
-}
-.logo-img {
-    width: 80px;
-    height: auto;
-    transition: transform 0.3s ease;
-}
-.logo-img:hover {
-    transform: scale(1.1);
+    padding: 1rem;
+    font-family: 'Poppins', sans-serif;
+    color: #C0C0C0;
+    overflow-x: hidden;
 }
 .header-text {
     text-align: center;
-    padding: 3rem 0 1rem;
-    color: #ff6b6b;
-    font-size: 2rem;
-    font-weight: 800;
-    text-shadow: 0 0 10px rgba(255, 107, 107, 0.7);
-    animation: glow 2s infinite alternate;
-}
-@keyframes glow {
-    0% { text-shadow: 0 0 10px rgba(255, 107, 107, 0.7); }
-    100% { text-shadow: 0 0 20px rgba(255, 107, 107, 1); }
+    padding: 100px 20px 20px;
+    color: #ff4040;
+    font-size: 3rem;
+    font-weight: 900;
+    text-shadow: 0 0 10px rgba(255, 64, 64, 0.5);
+    z-index: 1500;
+    animation: text-glow 2s infinite;
 }
-.dubbing-theme {
-    padding: 1rem; /* Keep padding for spacing */
-    width: 100%;
-    transition: transform 0.3s ease; /* Keep transition for hover effect */
-    position: relative;
-    z-index: 10;
-    background: transparent; /* Remove background to blend with parent */
-}
-.dubbing-theme:hover {
-    transform: translateY(-5px);
-}
-.footer {
+.header-subtitle {
     text-align: center;
-    padding: 0.5rem;
-    color: #ff6b6b;
-    font-size: 12px;
-    position: fixed;
-    bottom: 0;
-    width: 100%;
-    max-width: 900px;
-    background: rgba(26, 11, 46, 0.7);
-    z-index: 1001;
-    left: 50%;
-    transform: translateX(-50%);
+    color: #C0C0C0;
+    font-size: 1.2rem;
+    font-weight: 300;
+    margin-top: -10px;
+    text-shadow: 0 0 5px rgba(255, 64, 64, 0.3);
+}
+.gr-tab {
+    background: rgba(128, 0, 0, 0.5) !important;
+    border-radius: 12px 12px 0 0 !important;
+    margin: 0 5px !important;
+    color: #C0C0C0 !important;
+    border: 1px solid #ff4040 !important;
+    z-index: 1500;
+    transition: background 0.3s ease, color 0.3s ease;
+    padding: 10px 20px !important;
+    font-size: 1.1rem !important;
 }
 button {
-    background: #ff6b6b !important;
-    border: none !important;
-    color: #fff !important;
+    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
+    background: #800000 !important;
+    border: 1px solid #ff4040 !important;
+    color: #C0C0C0 !important;
     border-radius: 8px !important;
     padding: 8px 16px !important;
-    font-size: 1rem !important;
-    font-weight: 600 !important;
-    transition: all 0.3s ease !important;
-    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4) !important;
+    box-shadow: 0 2px 10px rgba(255, 64, 64, 0.3);
 }
 button:hover {
     transform: scale(1.05) !important;
-    background: #ff8787 !important;
-    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.6) !important;
+    box-shadow: 0 10px 40px rgba(255, 64, 64, 0.7) !important;
+    background: #ff4040 !important;
 }
 .compact-upload.horizontal {
-    display: flex !important;
+    display: inline-flex !important;
     align-items: center !important;
     gap: 8px !important;
-    max-width: 300px !important;
-    padding: 6px 10px !important;
-    border: 2px dashed #ff6b6b !important;
-    background: rgba(46, 26, 71, 0.7) !important;
+    max-width: 400px !important;
+    height: 40px !important;
+    padding: 0 12px !important;
+    border: 1px solid #ff4040 !important;
+    background: rgba(128, 0, 0, 0.5) !important;
     border-radius: 8px !important;
-    color: #e0e0e0 !important;
-    transition: border-color 0.3s ease !important;
-}
-.compact-upload.horizontal:hover {
-    border-color: #ff8787 !important;
-}
-.compact-upload.horizontal button {
-    padding: 4px 10px !important;
-    font-size: 0.8rem !important;
-}
-.gr-tab {
-    background: rgba(46, 26, 71, 0.7) !important;
-    border-radius: 8px 8px 0 0 !important;
-    padding: 0.5rem 1rem !important;
-    margin: 0 2px !important;
-    color: #e0e0e0 !important;
-    border: 2px solid #ff6b6b !important;
-    font-size: 1rem !important;
-    transition: all 0.3s ease !important;
-}
-.gr-tab-selected {
-    background: #ff6b6b !important;
-    color: #fff !important;
-    border: 2px solid #ff8787 !important;
-    box-shadow: 0 2px 8px rgba(255, 107, 107, 0.5) !important;
-}
-.compact-grid {
-    gap: 0.5rem !important;
-    max-height: 40vh;
-    overflow-y: auto;
-    padding: 1rem;
-    background: rgba(46, 26, 71, 0.7) !important;
-    border-radius: 10px;
-    border: 2px solid #ff6b6b !important;
-    width: 100%;
 }
 .compact-dropdown {
     padding: 8px 12px !important;
     border-radius: 8px !important;
-    border: 2px solid #ff6b6b !important;
-    background: rgba(46, 26, 71, 0.7) !important;
-    color: #e0e0e0 !important;
+    border: 2px solid #ff6b6b !important; /* Match previous style */
+    background: rgba(46, 26, 71, 0.7) !important; /* Match previous style */
+    color: #e0e0e0 !important; /* Match previous style */
     width: 100%;
     font-size: 1rem !important;
     transition: border-color 0.3s ease, box-shadow 0.3s ease !important;
@@ -323,7 +239,7 @@ button:hover {
     z-index: 100; /* Base z-index for dropdown */
 }
 .compact-dropdown:hover {
-    border-color: #ff8787 !important;
+    border-color: #ff8787 !important; /* Lighter shade for hover */
     box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4) !important;
 }
 .compact-dropdown select, .compact-dropdown .gr-dropdown {
@@ -338,20 +254,19 @@ button:hover {
     -moz-appearance: none !important;
 }
 .compact-dropdown .gr-dropdown-menu {
-    background: rgba(46, 26, 71, 0.95) !important;
-    border: 2px solid #ff6b6b !important;
+    background: rgba(46, 26, 71, 0.95) !important; /* Match previous style */
+    border: 2px solid #ff6b6b !important; /* Match previous style */
     border-radius: 8px !important;
     color: #e0e0e0 !important;
     max-height: 300px !important;
     overflow-y: auto !important;
-    z-index: 300 !important; /* Increased z-index to ensure it stays above other elements */
+    z-index: 300 !important; /* Ensure it stays above other elements */
     width: 100% !important;
     opacity: 1 !important;
     visibility: visible !important;
     position: absolute !important;
     top: 100% !important;
     left: 0 !important;
-    /* Add hover persistence */
     pointer-events: auto !important;
 }
 .compact-dropdown:hover .gr-dropdown-menu {
@@ -363,59 +278,47 @@ button:hover {
     background: transparent !important;
 }
 .compact-dropdown .gr-dropdown-menu option:hover {
-    background: rgba(255, 107, 107, 0.3) !important;
+    background: rgba(255, 107, 107, 0.3) !important; /* Match hover effect */
 }
-.gr-slider input[type="range"] {
-    -webkit-appearance: none !important;
-    width: 100% !important;
-    height: 6px !important;
-    background: #ff6b6b !important;
-    border-radius: 3px !important;
-    outline: none !important;
+#custom-progress {
+    margin-top: 10px;
+    padding: 10px;
+    background: rgba(128, 0, 0, 0.3);
+    border-radius: 8px;
+    border: 1px solid #ff4040;
 }
-.gr-slider input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none !important;
-    width: 16px !important;
-    height: 16px !important;
-    background: #fff !important;
-    border: 2px solid #ff6b6b !important;
-    border-radius: 50% !important;
-    cursor: pointer !important;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
+#progress-bar {
+    height: 20px;
+    background: linear-gradient(to right, #6e8efb, #ff4040);
+    border-radius: 5px;
+    transition: width 0.5s ease-in-out;
+    max-width: 100% !important;
 }
-.gr-slider input[type="range"]::-moz-range-thumb {
-    width: 16px !important;
-    height: 16px !important;
-    background: #fff !important;
-    border: 2px solid #ff6b6b !important;
-    border-radius: 50% !important;
-    cursor: pointer !important;
-    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2) !important;
+.gr-accordion {
+    background: rgba(128, 0, 0, 0.5) !important;
+    border-radius: 10px !important;
+    border: 1px solid #ff4040 !important;
 }
-@media (max-width: 768px) {
-    #app-container {
-        max-width: 100%;
-        padding: 0.5rem;
-    }
-    .header-text {
-        font-size: 1.5rem;
-        padding: 2rem 0 0.5rem;
-    }
-    .logo-img {
-        width: 60px;
-    }
-    .compact-upload.horizontal {
-        max-width: 100% !important;
-    }
-    .compact-grid {
-        max-height: 30vh;
-    }
-    .footer {
-        max-width: 100%;
-    }
-    .compact-dropdown .gr-dropdown-menu {
-        max-height: 200px !important;
-    }
+.footer {
+    text-align: center;
+    padding: 20px;
+    color: #ff4040;
+    font-size: 14px;
+    margin-top: 40px;
+    background: rgba(128, 0, 0, 0.3);
+    border-top: 1px solid #ff4040;
+}
+#log-accordion {
+    max-height: 400px;
+    overflow-y: auto;
+    background: rgba(0, 0, 0, 0.7) !important;
+    padding: 10px;
+    border-radius: 8px;
+}
+@keyframes text-glow {
+    0% { text-shadow: 0 0 5px rgba(192, 192, 192, 0); }
+    50% { text-shadow: 0 0 15px rgba(192, 192, 192, 1); }
+    100% { text-shadow: 0 0 5px rgba(192, 192, 192, 0); }
 }
 """