Update app.py

app.py

@@ -1,5 +1,364 @@
 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; }
+    .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; }
+    .logo-container .askcyph { max-width: 13rem; width:100%; height: auto; object-fit: contain; }
+    
+    /* Fix for keeping focus on input */
+    .chat-interface textarea {
+        caret-color: auto !important;
+    }
+    
+    /* Loader Styles */
+    #page-loader {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: linear-gradient(135deg, #001a2d 0%, #002a4d 100%);
+        z-index: 3147483647;        
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        transition: opacity 0.5s ease-out;
+    }
+    
+    #page-loader.hide {
+        opacity: 0 !important;
+        pointer-events: none !important;
+    }
+    
+    #page-loader.remove {
+        display: none !important;
+    }
+    
+    .loader-content {
+        text-align: center;
+    }
+    
+    .loader-logo {
+        max-width: 200px;
+        opacity: 0;
+        animation: fadeInLogo 1s ease-in-out forwards;
+    }
+    
+    .spinner-container {
+        margin-top: 30px;
+        position: relative;
+        width: 80px;
+        height: 80px;
+        margin-left: auto;
+        margin-right: auto;
+    }
+    
+    .spinner {
+        width: 80px;
+        height: 80px;
+        border: 4px solid rgba(255, 255, 255, 0.1);
+        border-top-color: #0071bb;
+        border-radius: 50%;
+        animation: spin 1s linear infinite;
+    }
+    
+    .spinner-inner {
+        position: absolute;
+        top: 10px;
+        left: 10px;
+        width: 60px;
+        height: 60px;
+        border: 3px solid transparent;
+        border-top-color: #00a8ff;
+        border-radius: 50%;
+        animation: spin 0.7s linear infinite reverse;
+    }
+    
+    .loading-text {
+        margin-top: 20px;
+        color: #fff;
+        font-size: 18px;
+        font-weight: 300;
+        opacity: 0;
+        animation: fadeInText 1s ease-in-out 0.5s forwards;
+    }
+    
+    .loading-dots {
+        display: inline-block;
+        width: 20px;
+        text-align: left;
+    }
+    
+    .loading-dots::after {
+        content: '.';
+        animation: dots 1.5s steps(4, end) infinite;
+    }
+    
+    @keyframes spin {
+        0% { transform: rotate(0deg); }
+        100% { transform: rotate(360deg); }
+    }
+    
+    @keyframes fadeInLogo {
+        0% { 
+            opacity: 0; 
+            transform: translateY(-20px);
+        }
+        100% { 
+            opacity: 1; 
+            transform: translateY(0);
+        }
+    }
+    
+    @keyframes fadeInText {
+        0% { opacity: 0; }
+        100% { opacity: 1; }
+    }
+    
+    @keyframes dots {
+        0%, 20% { content: '.'; }
+        40% { content: '..'; }
+        60% { content: '...'; }
+        80%, 100% { content: ''; }
+    }
+    
+    .progress-bar {
+        width: 200px;
+        height: 4px;
+        background: rgba(255, 255, 255, 0.1);
+        border-radius: 2px;
+        margin: 20px auto;
+        overflow: hidden;
+        opacity: 0;
+        animation: fadeInText 1s ease-in-out 0.8s forwards;
+    }
+    
+    .progress-fill {
+        height: 100%;
+        background: linear-gradient(90deg, #0071bb 0%, #00a8ff 100%);
+        border-radius: 2px;
+        width: 0%;
+        animation: progressAnimation 4.5s ease-out forwards;
+    }
+    
+    @keyframes progressAnimation {
+        0% { width: 0%; }
+        20% { width: 25%; }
+        40% { width: 45%; }
+        60% { width: 65%; }
+        80% { width: 85%; }
+        100% { width: 100%; }
+    }
+    
+    
+    #welcome-banner-overlay {
+        display: none;
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background-color: rgba(0,0,0,0.5);
+        z-index: 1999;
+    }
+    #welcome-banner-text {
+        display: none;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        max-width: 800px;
+        width: 80%;
+        height: 73vh;
+        z-index: 2000;
+        background-color: rgba(0,113,187,0.6);
+        box-shadow: 0 10px 25px rgba(0,0,0,0.2);
+        border-radius: 8px;
+        border-left: 4px solid #0071bb;
+        flex-direction: column;
+        padding: 15px;
+    }
+    #welcome-banner-header {
+        padding-bottom: 10px;
+        border-bottom: 1px solid rgba(255,255,255,0.2);
+    }
+    #welcome-banner-content {
+        overflow-y: auto;
+        padding: 0 15px;
+        flex-grow: 1;
+        max-height: calc(70vh - 100px);
+    }
+    #welcome-banner-footer {
+        padding-top: 10px;
+        margin-top: 10px;
+        border-top: 1px solid rgba(255,255,255,0.2);
+        text-align: right;
+    }
+    #ok-banner {
+        padding: 8px 20px;
+        background-color: transparent;
+        color: white;
+        border: 1px solid white;
+        border-radius: 4px;
+        cursor: pointer;
+        font-weight: bold;
+        transition: all 0.2s ease;
+    }
+    #ok-banner:hover {
+        background-color: rgba(255,255,255,0.1);
+    }
+    #close-banner {
+        position: absolute;
+        top: 10px;
+        right: 10px;
+        cursor: pointer;
+        font-weight: bold;
+        font-size: 20px;
+        color: #666;
+        z-index: 10;
+        width: 30px;
+        height: 30px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background-color: #f0f0f0;
+        transition: all 0.2s ease;
+    }
+    #close-banner:hover {
+        background-color: #ddd;
+        color: #333;
+    }
+    /* Help button styling */
+    .help-button-container {
+        position: fixed;
+        bottom: 50px;
+        left: 20px;
+        z-index: 1000;
+    }
+    .help-button {
+        background-color: #0071bb !important;
+        color: white !important;
+        border: none;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        font-size: 24px !important;
+        cursor: pointer;
+        box-shadow: 0 4px 8px rgba(0,0,0,0.2) !important;
+        display: flex !important;
+        align-items: center !important;
+        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 {
+    text-align: center;
+    padding: 3rem 0 2rem;
+    margin-top: 4rem;
+    border-top: 1px solid #2a2a2a;
+    color: #a0a0a0;
+}
+.footer a {
+    color: #a0a0a0 !important;
+    text-decoration: none;
+}
+.footer a:hover {
+    color: #ffffff !important;
+}
+    /* Change orange button and slider color to #0071bb */
+    .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;
+        border-color: #0071bb !important;
+    }
+    input[type=range]::-moz-range-thumb {
+        background: #0071bb !important;
+        border-color: #0071bb !important;
+    }
+    input[type=range]::-ms-thumb {
+        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"],
+    div[class*="slider"] div[class*="track-fill"],
+    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){
+     #welcome-banner-text {
+        max-width: 90%;
+     }
+    }
+    #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);
+    }
+"""
 custom_theme = gr.themes.Default(
     primary_hue="blue",  # This changes the primary color to blue
     secondary_hue="blue",
@@ -16,6 +375,6 @@ custom_theme = gr.themes.Default(
 token = os.environ["TOKEN"]
 model=os.environ["MODEL"]
 loaded_demo = gr.load(model, src="spaces", token=token)
-with gr.Blocks(fill_height=True,theme=custom_theme) as demo:
+with gr.Blocks(fill_height=True,css=CSS_STYLES,theme=custom_theme) as demo:
     loaded_demo.render()
 demo.launch(show_api=False, show_error=False, quiet=True, debug=False)