Update app.py

app.py

@@ -1,411 +1,144 @@
 import gradio as gr
 import os
-css="""
-:root {
-    --askcyph-bg: #0A0E1B;
-    --askcyph-secondary-bg: #101826;
-    --askcyph-card-bg: #1A2332;
-    --askcyph-border: #2A3F5F;
-    --askcyph-text: #E8EAED;
-    --askcyph-text-secondary: #9CA3AF;
-    --askcyph-accent: #0071bb;
-    --askcyph-accent-hover: #005a94;
-    --askcyph-accent-glow: rgba(0, 113, 187, 0.3);
-    --askcyph-success: #10B981;
-    --askcyph-error: #EF4444;
-    --askcyph-gradient: linear-gradient(135deg, #0071bb 0%, #0080FF 100%);
-    --askcyph-button-gradient: linear-gradient(135deg, #0071bb 0%, #005a94 100%);
-    
-    /* Override Gradio's primary colors */
-    --primary-50: #e6f3ff !important;
-    --primary-100: #b3daff !important;
-    --primary-200: #80c1ff !important;
-    --primary-300: #4da8ff !important;
-    --primary-400: #1a8fff !important;
-    --primary-500: #0071bb !important;
-    --primary-600: #005a94 !important;
-    --primary-700: #004470 !important;
-    --primary-800: #002d4d !important;
-    --primary-900: #001729 !important;
-    --primary-950: #000b14 !important;
-}
-/* Force Gradio to use our color scheme */
-.gradio-container {
-    --color-accent: #0071bb !important;
-    --color-accent-soft: #0071bb20 !important;
-    --slider-color: #0071bb !important;
-    --primary-600: #0071bb !important;
-    --primary-700: #005a94 !important;
-    background-color: var(--askcyph-bg) !important;
-    color: var(--askcyph-text) !important;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif !important;
-}
-/* Override default styles */
-#col-container {
-    margin: 0 auto;
-    max-width: 1200px;
-    background-color: transparent !important;
-}
-/* Header styling */
-.header-section {
-    background: linear-gradient(180deg, rgba(26, 35, 50, 0.8) 0%, rgba(10, 14, 27, 0.9) 100%);
-    padding: 2.5rem 0;
-    margin-bottom: 2rem;
-    border-bottom: 2px solid var(--askcyph-accent);
-    text-align: center;
-    position: relative;
-    overflow: hidden;
-}
-.header-section::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 2px;
-    background: var(--askcyph-gradient);
-    animation: glow 3s ease-in-out infinite;
-}
-@keyframes glow {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 1; }
-}
-.logo-container {
-    display: inline-flex;
-    justify-content: center;
-    align-items: center;
-    column-gap: 12px;
-    margin-bottom: 1rem;
-}
-.logo-container .cyphertech {
-    max-width: 8rem;
-    width: 100%;
-    height: auto;
-    object-fit: contain;
-    filter: brightness(1.1);
-}
-.logo-container .seperator:after {
-    font-size: 3.5em;
-    content: "|";
-    color: var(--askcyph-accent);
-    font-weight: 300;
-    opacity: 0.5;
-}
-.logo-container .askcyph {
-    max-width: 13rem;
-    width: 100%;
-    height: auto;
-    object-fit: contain;
-    filter: brightness(1.1);
-}
-/* Card styling */
-.generation-card {
-    background-color: var(--askcyph-card-bg);
-    border: 1px solid var(--askcyph-border);
-    border-radius: 16px;
-    padding: 2rem;
-    margin-bottom: 1.5rem;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.08);
-    position: relative;
-    overflow: hidden;
-}
-.generation-card::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    height: 1px;
-    background: linear-gradient(90deg, transparent, var(--askcyph-accent), transparent);
-    opacity: 0.5;
-}
-/* Tab styling */
-.tabs {
-    margin-bottom: 1.5rem !important;
-}
-button[role="tab"] {
-    background-color: transparent !important;
-    color: var(--askcyph-text-secondary) !important;
-    border: none !important;
-    border-bottom: 3px solid transparent !important;
-    padding: 1rem 1.5rem !important;
-    font-weight: 600 !important;
-    font-size: 0.95rem !important;
-    transition: all 0.3s ease !important;
-    position: relative !important;
-}
-button[role="tab"]:hover {
-    color: var(--askcyph-text) !important;
-    background-color: rgba(0, 113, 187, 0.05) !important;
-}
-button[role="tab"][aria-selected="true"] {
-    color: var(--askcyph-accent) !important;
-    border-bottom-color: var(--askcyph-accent) !important;
-    background-color: rgba(0, 113, 187, 0.1) !important;
-}
-/* Input fields */
-.gr-text-input, .gr-number-input, textarea {
-    background-color: rgba(16, 24, 38, 0.8) !important;
-    border: 1px solid var(--askcyph-border) !important;
-    color: var(--askcyph-text) !important;
-    border-radius: 12px !important;
-    padding: 0.75rem 1rem !important;
-    transition: all 0.3s ease !important;
-}
-.gr-text-input:focus, .gr-number-input:focus, textarea:focus {
-    border-color: var(--askcyph-accent) !important;
-    box-shadow: 0 0 0 3px var(--askcyph-accent-glow) !important;
-    background-color: rgba(16, 24, 38, 1) !important;
-}
-/* Button styling - Primary */
-.gr-button.primary, .gr-button[variant="primary"] {
-    background: var(--askcyph-gradient) !important;
-    color: white !important;
-    border: none !important;
-    border-radius: 12px !important;
-    padding: 1rem 2rem !important;
-    font-weight: 700 !important;
-    font-size: 1rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.5px !important;
-    transition: all 0.3s ease !important;
-    position: relative !important;
-    overflow: hidden !important;
-    box-shadow: 0 4px 15px rgba(0, 113, 187, 0.3) !important;
-}
-.gr-button.primary:hover, .gr-button[variant="primary"]:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(0, 113, 187, 0.4) !important;
-    background: linear-gradient(135deg, #005a94 0%, #004470 100%) !important;
-}
-.gr-button.primary:active, .gr-button[variant="primary"]:active {
-    transform: translateY(0) !important;
-}
-/* Secondary buttons */
-.gr-button:not(.primary):not([variant="primary"]) {
-    background-color: rgba(42, 63, 95, 0.5) !important;
-    color: var(--askcyph-text) !important;
-    border: 1px solid var(--askcyph-border) !important;
-    border-radius: 10px !important;
-    padding: 0.75rem 1.5rem !important;
-    font-weight: 600 !important;
-    transition: all 0.3s ease !important;
-}
-.gr-button:not(.primary):not([variant="primary"]):hover {
-    background-color: rgba(42, 63, 95, 0.8) !important;
-    border-color: var(--askcyph-accent) !important;
-    color: var(--askcyph-accent) !important;
-}
-/* COMPREHENSIVE SLIDER FIXES */
-/* Reset all slider elements */
-input[type="range"] {
-    -webkit-appearance: none !important;
-    appearance: none !important;
-    background: transparent !important;
-    cursor: pointer !important;
-    width: 100% !important;
-}
-/* Slider track - all browsers */
-input[type="range"]::-webkit-slider-runnable-track {
-    background: #2A3F5F !important;
-    height: 4px !important;
-    border-radius: 2px !important;
-}
-input[type="range"]::-moz-range-track {
-    background: #2A3F5F !important;
-    height: 4px !important;
-    border-radius: 2px !important;
-}
-input[type="range"]::-ms-track {
-    background: #2A3F5F !important;
-    height: 4px !important;
-    border-radius: 2px !important;
-    border-color: transparent !important;
-    color: transparent !important;
-}
-/* Slider thumb - all browsers */
-input[type="range"]::-webkit-slider-thumb {
-    -webkit-appearance: none !important;
-    appearance: none !important;
-    background: #0071bb !important;
-    border: 2px solid #0A0E1B !important;
-    height: 16px !important;
-    width: 16px !important;
-    border-radius: 50% !important;
-    cursor: pointer !important;
-    margin-top: -6px !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
-}
-input[type="range"]::-moz-range-thumb {
-    background: #0071bb !important;
-    border: 2px solid #0A0E1B !important;
-    height: 16px !important;
-    width: 16px !important;
-    border-radius: 50% !important;
-    cursor: pointer !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
-}
-input[type="range"]::-ms-thumb {
-    background: #0071bb !important;
-    border: 2px solid #0A0E1B !important;
-    height: 16px !important;
-    width: 16px !important;
-    border-radius: 50% !important;
-    cursor: pointer !important;
-    box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
-}
-/* Override Gradio's orange slider styles */
-.svelte-1cl284s {
-    background-color: #0071bb !important;
-}
-/* Target any element that might have orange color */
-[style*="255, 126, 0"],
-[style*="251, 146, 60"],
-[style*="rgb(255, 126, 0)"],
-[style*="rgb(251, 146, 60)"],
-[style*="#ff7e00"],
-[style*="#fb923c"],
-[style*="orange"] {
-    background-color: #0071bb !important;
-    background: #0071bb !important;
-}
-/* Force override for Gradio's internal slider components */
-button, .gr-slider span[data-testid="slider-thumb"] {
-    background-color: #0071bb !important;
-}
-.primary .gr-slider span[style*="background"] {
-    background-color: #0071bb !important;
-}
-/* Target slider progress/fill elements */
-div[class*="slider"] span[style*="width"],
-div[class*="range"] span[style*="width"] {
-    background-color: #0071bb !important;
-}
-/* Nuclear option for any remaining orange elements */
-* {
-    --tw-gradient-from: #0071bb !important;
-    --tw-gradient-to: #005a94 !important;
-    --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to) !important;
-}
-/* Checkbox styling */
-.gr-checkbox {
-    display: flex !important;
-    align-items: center !important;
-    gap: 0.75rem !important;
-}
-.gr-checkbox input[type="checkbox"] {
-    width: 20px !important;
-    height: 20px !important;
-    background-color: var(--askcyph-secondary-bg) !important;
-    border: 2px solid var(--askcyph-border) !important;
-    border-radius: 6px !important;
-    transition: all 0.3s ease !important;
-}
-.gr-checkbox input[type="checkbox"]:checked {
-    background: var(--askcyph-gradient) !important;
-    border-color: var(--askcyph-accent) !important;
-}
-/* Accordion styling */
-.gr-accordion {
-    background-color: rgba(26, 35, 50, 0.5) !important;
-    border: 1px solid var(--askcyph-border) !important;
-    border-radius: 12px !important;
-    margin-top: 1rem !important;
-}
-.gr-accordion button {
-    background-color: transparent !important;
-    color: var(--askcyph-text) !important;
-    font-weight: 600 !important;
-    padding: 1rem !important;
-}
-.gr-accordion button:hover {
-    color: var(--askcyph-accent) !important;
-}
-/* Labels */
-label {
-    color: var(--askcyph-text) !important;
-    font-weight: 600 !important;
-    font-size: 0.9rem !important;
-    text-transform: uppercase !important;
-    letter-spacing: 0.5px !important;
-    margin-bottom: 0.5rem !important;
-}
-/* Video/Image containers */
-.gr-video, .gr-image {
-    background-color: rgba(16, 24, 38, 0.6) !important;
-    border: 2px solid var(--askcyph-border) !important;
-    border-radius: 12px !important;
-    overflow: hidden !important;
-    position: relative !important;
-}
-.gr-video::before, .gr-image::before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    background: linear-gradient(135deg, transparent 0%, rgba(0, 113, 187, 0.1) 100%);
-    pointer-events: none;
-}
-/* Output video special styling */
-#col-container > div > div:nth-child(2) .gr-video {
-    border-color: var(--askcyph-accent) !important;
-    box-shadow: 0 0 20px rgba(0, 113, 187, 0.2) !important;
-}
-/* Hide default Gradio branding */
-footer {
-    display: none !important;
-}
-/* Custom footer */
-.custom-footer {
-    margin-top: 3rem;
-    padding: 2rem 0;
-    border-top: 1px solid var(--askcyph-border);
-    text-align: center;
-    color: var(--askcyph-text-secondary);
-    font-size: 0.85rem;
-    background: linear-gradient(180deg, transparent 0%, rgba(10, 14, 27, 0.5) 100%);
-}
-.custom-footer a {
-    color: var(--askcyph-accent);
-    text-decoration: none;
-    font-weight: 600;
-    transition: all 0.3s ease;
-}
-.custom-footer a:hover {
-    color: var(--askcyph-accent-hover);
-    text-shadow: 0 0 10px var(--askcyph-accent-glow);
-}
-/* Loading animation */
-.gr-button.primary:disabled {
-    background: linear-gradient(135deg, #666 0%, #888 100%) !important;
-    cursor: not-allowed !important;
-    animation: pulse 2s infinite !important;
-}
-@keyframes pulse {
-    0%, 100% { opacity: 0.6; }
-    50% { opacity: 1; }
-}
-/* Responsive */
-@media (max-width: 768px) {
-    .header-section {
-        padding: 1.5rem 0;
+css = """
+    :root {
+        --bg-primary: #0a0a0a;
+        --bg-secondary: #141414;
+        --bg-card: #1a1a1a;
+        --bg-hover: #252525;
+        --border-color: #2a2a2a;
+        --text-primary: #ffffff;
+        --text-secondary: #a0a0a0;
+        --accent-blue: #3b82f6;
+        --gradient: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
     }
-    
-    .generation-card {
-        padding: 1.5rem;
+    /* Only change colors, not spacing */
+    .gradio-container {
+        background: var(--bg-primary) !important;
+        color: var(--text-primary) !important;
+        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
     }
-    
-    .gr-button.primary, .gr-button[variant="primary"] {
-        padding: 0.75rem 1.5rem !important;
-        font-size: 0.9rem !important;
+    /* Header styling */
+    .header-container {
+        text-align: center;
+        padding: 3rem 0 2rem;
+        background: var(--bg-primary);
     }
-}
- #huggingface-space-header{
-     display:none !important;
-}
-"""
+    .logo-wrapper {
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        gap: 2rem;
+        margin-bottom: 2rem;
+    }
+    .logo-divider {
+        width: 1px;
+        height: 40px;
+        background: var(--border-color);
+    }
+    .main-title {
+        font-size: 2rem;
+        font-weight: 400;
+        margin-bottom: 0.5rem;
+        color: var(--text-primary);
+    }
+    .subtitle {
+        color: var(--text-secondary);
+        font-size: 1rem;
+    }
+    /* Input styling */
+    .gr-input, .gr-textarea, textarea, input[type="text"], input[type="number"] {
+        background: var(--bg-secondary) !important;
+        border: 1px solid var(--border-color) !important;
+        color: var(--text-primary) !important;
+        border-radius: 8px !important;
+    }
+    .gr-input:focus, .gr-textarea:focus, textarea:focus, input:focus {
+        border-color: var(--accent-blue) !important;
+        outline: none !important;
+        background: var(--bg-hover) !important;
+    }
+    /* Button styling */
+    .primary-btn, .gr-button-primary {
+        background: var(--gradient) !important;
+        color: white !important;
+        border: none !important;
+        border-radius: 8px !important;
+        font-weight: 600 !important;
+        transition: all 0.2s ease !important;
+    }
+    .primary-btn:hover, .gr-button-primary:hover {
+        transform: translateY(-1px) !important;
+        box-shadow: 0 8px 16px rgba(59, 130, 246, 0.3) !important;
+    }
+    .secondary-btn {
+        background: transparent !important;
+        color: var(--accent-blue) !important;
+        border: 1px solid var(--accent-blue) !important;
+        border-radius: 8px !important;
+        transition: all 0.2s ease !important;
+    }
+    .secondary-btn:hover {
+        background: var(--accent-blue) !important;
+        color: white !important;
+    }
+    /* Tab styling */
+    button[role="tab"] {
+        background: transparent !important;
+        color: var(--text-secondary) !important;
+        border: none !important;
+        border-radius: 8px !important;
+        font-weight: 500 !important;
+        transition: all 0.2s ease !important;
+    }
+    button[role="tab"]:hover {
+        background: var(--bg-hover) !important;
+        color: var(--text-primary) !important;
+    }
+    button[role="tab"][aria-selected="true"] {
+        background: var(--accent-blue) !important;
+        color: white !important;
+    }
+    /* Card backgrounds */
+    .gr-group {
+        background: var(--bg-card) !important;
+        border: 1px solid var(--border-color) !important;
+        border-radius: 12px !important;
+    }
+    /* Slider styling */
+    input[type="range"]::-webkit-slider-track {
+        background: var(--bg-secondary) !important;
+        height: 6px !important;
+        border-radius: 3px !important;
+        border: 1px solid var(--border-color) !important;
+    }
+    input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none !important;
+        background: var(--accent-blue) !important;
+        width: 18px !important;
+        height: 18px !important;
+        border-radius: 50% !important;
+        cursor: pointer !important;
+    }
+    /* Info message */
+    .info-message {
+        background: rgba(59, 130, 246, 0.1);
+        border: 1px solid var(--accent-blue);
+        border-radius: 8px;
+        padding: 1rem;
+        margin: 1rem 0;
+        color: var(--text-primary);
+    }
+    /* Footer */
+    .footer {
+        text-align: center;
+        padding: 3rem 0 2rem;
+        margin-top: 4rem;
+        border-top: 1px solid var(--border-color);
+        color: var(--text-secondary);
+    }
+    footer { display: none !important; }
+    """
 
 token = os.environ["TOKEN"]
 model=os.environ["MODEL"]