Update app.py

app.py

@@ -2,7 +2,7 @@ import gradio as gr
 import os
 # Define the CSS once to avoid duplication (rest of CSS remains the same)
 CSS_STYLES = """
-    .gradio-container footer { display: none !important; }
+.gradio-container footer { display: none !important; }
     .logo-container{ display: inline-flex; justify-content: center; align-items: center; column-gap: 12px;}
     .logo-container .cyphertech { max-width:8rem; width:100%; height: auto; object-fit: contain; }
     .logo-container .seperator:after{ font-size: 3.5em; content: "|"; color: #fff; font-weight: 500; font-family: auto; }
@@ -21,7 +21,7 @@ CSS_STYLES = """
         width: 100%;
         height: 100%;
         background: linear-gradient(135deg, #001a2d 0%, #002a4d 100%);
-        z-index: 31474836470 !important;        
+        z-index: 3147483647;        
         display: flex;
         justify-content: center;
         align-items: center;
@@ -232,6 +232,7 @@ CSS_STYLES = """
         background-color: #ddd;
         color: #333;
     }
+
     /* Help button styling */
     .help-button-container {
         position: fixed;
@@ -239,6 +240,7 @@ CSS_STYLES = """
         left: 20px;
         z-index: 1000;
     }
+
     .help-button {
         background-color: #0071bb !important;
         color: white !important;
@@ -254,11 +256,13 @@ CSS_STYLES = """
         justify-content: center !important;
         transition: all 0.3s ease;
     }
+
     .help-button:hover {
         background-color: #005a94;
         transform: scale(1.05);
         box-shadow: 0 6px 12px rgba(0,0,0,0.3);
     }
+
     .footer{ width:100%; margin: 10px 0; background-color: initial; color: #fff; text-align: center; font-size: 1rem; font-style=bold; }
     .footer a{ color: #fff !important }
     .footer {
@@ -268,10 +272,12 @@ CSS_STYLES = """
     border-top: 1px solid #2a2a2a;
     color: #a0a0a0;
 }
+
 .footer a {
     color: #a0a0a0 !important;
     text-decoration: none;
 }
+
 .footer a:hover {
     color: #ffffff !important;
 }
@@ -279,10 +285,13 @@ CSS_STYLES = """
     .primary-button { background-color: #0071bb !important; }
      button.primary { background-color: #0071bb !important; }
     .gradio-button.primary { background-color: #0071bb !important; }
+
+
     /* Improved slider styling */
     .slider_input_container {
       --slider-color: #0071bb !important;
     }
+
     /* Target all slider thumbs */
     input[type=range]::-webkit-slider-thumb {
         background: #0071bb !important;
@@ -296,23 +305,28 @@ CSS_STYLES = """
         background: #0071bb !important;
         border-color: #0071bb !important;
     }
+
     /* Fix for slider track fill */
     .gradio-slider .svelte-1cl284s {
         background-color: #0071bb !important;
     }
+
     /* Target Gradio's slider elements more specifically */
     .gradio-slider [data-testid="slider-handle"] {
         background-color: #0071bb !important;
     }
+
     .gradio-slider [data-testid="slider-track-filled"],
     .gradio-slider .track-fill,
     .gradio-slider .track-progress {
         background-color: #0071bb !important;
     }
+
     /* Target the slider track */
     .gradio-slider [data-testid="slider-track"] {
         background-color: #ddd !important;
     }
+
     /* Target any element with slider-related class names */
     div[class*="slider"] div[class*="filled"],
     div[class*="slider"] div[class*="progress"],
@@ -320,19 +334,24 @@ CSS_STYLES = """
     div[class*="slider"] div[class*="track-progress"] {
         background-color: #0071bb !important;
     }
+
     /* Change focus outline color */
     *:focus-visible { outline-color: #0071bb !important; }
+
     /* Change checkbox and radio button colors */
     input[type="checkbox"]:checked, input[type="radio"]:checked {
         background-color: #0071bb !important;
         border-color: #0071bb !important;
     }
+
     /* Change progress bar color */
     progress::-webkit-progress-value { background-color: #0071bb !important; }
     progress::-moz-progress-bar { background-color: #0071bb !important; }
     progress { color: #0071bb !important; }
+
     /* Change link color */
     a { color: #0071bb !important; }
+
     /* Change selection color */
     ::selection { background-color: #0071bb33 !important; }
     @media(max-width: 500px){
@@ -343,18 +362,22 @@ CSS_STYLES = """
     #huggingface-space-header{
     display: none !important;
     }
+
     /* Scrollbar styling for welcome dialog */
     #welcome-banner-text > div:nth-child(2)::-webkit-scrollbar {
         width: 8px;
     }
+
     #welcome-banner-text > div:nth-child(2)::-webkit-scrollbar-track {
         background: rgba(255,255,255,0.1);
         border-radius: 4px;
     }
+
     #welcome-banner-text > div:nth-child(2)::-webkit-scrollbar-thumb {
         background: rgba(255,255,255,0.3);
         border-radius: 4px;
     }
+
     #welcome-banner-text > div:nth-child(2)::-webkit-scrollbar-thumb:hover {
         background: rgba(255,255,255,0.5);
     }