app.py

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;
    }
    /* Hide Gradio scroll-to-bottom button/icon */
    .scroll-to-bottom, .scroll-button, .scroll-btn,
    button[aria-label*="scroll" i], button[aria-label*="Scroll" i],
    button[title*="scroll" i], .chatbot > button, .chatbot > div > button {
        display: none !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        z-index: -100 !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 {
        width: 100%;
        height: auto;
        max-width: 275px;
        object-fit: contain;
        opacity: 0;
        animation: fadeInLogo 1s ease-in-out forwards;
        object-fit: contain;
    }
    
    .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",
    neutral_hue="slate",
).set(
    loader_color="#0071bb",  # Your specific blue color for loader
    button_primary_background_fill="#0071bb",
    button_primary_background_fill_hover="#005a94",
    button_primary_text_color="white",
    slider_color="#0071bb",
    checkbox_background_color_selected="#0071bb",
    checkbox_border_color_selected="#0071bb",
)
token = os.environ["TOKEN"]
model=os.environ["MODEL"]
loaded_demo = gr.load(model, src="spaces", token=token)
with gr.Blocks(fill_height=True,css=CSS_STYLES,theme=custom_theme,js="""
() => {
    document.title ='AskCyph™ Chat - Cypher Tech Inc.';
    const link = document.querySelector("link[rel~='icon']") || document.createElement('link');
    link.type = 'image/svg+xml';
    link.rel = 'icon';
    link.href = 'https://cms.cypherchat.app/uploads/favicon_8bc904ca6b.svg';
    document.getElementsByTagName('head')[0].appendChild(link);
}
""",) as demo:
    loaded_demo.render()
demo.launch(show_api=False, show_error=False, quiet=True, debug=False)