Update app.py

app.py

@@ -100,313 +100,10 @@ HF_IMAGE_TOKEN = bool(os.getenv("HF_READ_TOKEN"))
 HF_VIDEO_TOKEN = bool(os.getenv("HF_READ_TOKEN") or os.getenv("HF_TOKEN"))
 HF_TEXTGEN_TOKEN = bool(os.getenv("HF_READ_TOKEN") or os.getenv("HF_TOKEN"))
 
-# CSS copied from prior app.py to preserve exact look-and-feel
-CSS_STYLES = """
-    /* Style only the top-level app title to avoid affecting headings elsewhere */
-    .app-title {
-        text-align: center;
-        /* Ensure main title appears first, then our two subtitle lines */
-        display: grid;
-        justify-items: center;
-    }
-    .app-title::after {
-        grid-row: 2;
-        content: "General purpose tools useful for any agent.";
-        display: block;
-        font-size: 1rem;
-        font-weight: 400;
-        opacity: 0.9;
-        margin-top: 2px;
-        white-space: pre-wrap;
-    }
-
-    /* Sidebar Container */
-    .app-sidebar {
-        background-color: rgba(255, 255, 255, 0.02) !important;
-        border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
-    }
-    @media (prefers-color-scheme: light) {
-        .app-sidebar {
-            background-color: rgba(0, 0, 0, 0.02) !important;
-            border-right: 1px solid rgba(0, 0, 0, 0.08) !important;
-        }
-    }
-
-    /* Historical safeguard: if any h1 appears inside tabs, don't attach pseudo content */
-    .gradio-container [role=\"tabpanel\"] h1::before,
-    .gradio-container [role=\"tabpanel\"] h1::after {
-        content: none !important;
-    }
-
-    /* Information accordion - modern info cards */
-    .info-accordion { 
-        margin: 8px 0 2px;
-    }
-    .info-grid {
-        display: grid;
-        gap: 12px;
-        /* Force a 2x2 layout on medium+ screens */
-        grid-template-columns: repeat(2, minmax(0, 1fr));
-        align-items: stretch;
-    }
-    /* On narrow screens, stack into a single column */
-    @media (max-width: 800px) {
-        .info-grid {
-            grid-template-columns: 1fr;
-        }
-    }
-    .info-card {
-        display: flex;
-        gap: 14px;
-        padding: 14px 16px;
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03));
-        border-radius: 12px;
-        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
-        position: relative;
-        overflow: hidden;
-        backdrop-filter: blur(2px);
-    }
-    .info-card::before {
-        content: "";
-        position: absolute;
-        inset: 0;
-        border-radius: 12px;
-        pointer-events: none;
-        background: linear-gradient(90deg, rgba(99,102,241,0.06), rgba(59,130,246,0.05));
-    }
-    .info-card__icon {
-        font-size: 24px;
-        flex: 0 0 28px;
-        line-height: 1;
-        filter: saturate(1.1);
-    }
-    .info-card__body {
-        min-width: 0;
-    }
-    .info-card__body h3 {
-        margin: 0 0 6px;
-        font-size: 1.05rem;
-    }
-    .info-card__body p {
-        margin: 6px 0;
-        opacity: 0.95;
-    }
-    /* Readable code blocks inside info cards */
-    .info-card pre {
-        margin: 8px 0;
-        padding: 10px 12px;
-        background: rgba(20, 20, 30, 0.55);
-        border: 1px solid rgba(255, 255, 255, 0.08);
-        border-radius: 10px;
-        overflow-x: auto;
-        white-space: pre;
-    }
-    .info-card code {
-        font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
-        font-size: 0.95em;
-    }
-    .info-card pre code {
-        display: block;
-    }
-    .info-card p {
-        word-wrap: break-word;
-        overflow-wrap: break-word;
-    }
-    .info-card p code {
-        word-break: break-all;
-    }
-    .info-list {
-        margin: 6px 0 0 18px;
-        padding: 0;
-    }
-    .info-hint {
-        margin-top: 8px;
-        font-size: 0.9em;
-        opacity: 0.9;
-    }
-
-    /* Light theme adjustments */
-    @media (prefers-color-scheme: light) {
-        .info-card {
-            border-color: rgba(0, 0, 0, 0.08);
-            background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.9));
-        }
-        .info-card::before {
-            background: linear-gradient(90deg, rgba(99,102,241,0.08), rgba(59,130,246,0.06));
-        }
-        .info-card pre {
-            background: rgba(245, 246, 250, 0.95);
-            border-color: rgba(0, 0, 0, 0.08);
-        }
-    }
-
-    /* Sidebar Navigation - styled like the previous tabs */
-    .sidebar-nav {
-        background: transparent !important;
-        border: none !important;
-        padding: 0 !important;
-    }
-    .sidebar-nav .form {
-        gap: 8px !important;
-        display: flex !important;
-        flex-direction: column !important;
-        border: none !important;
-        background: transparent !important;
-    }
-    .sidebar-nav label {
-        display: flex !important;
-        align-items: center !important;
-        padding: 10px 12px !important;
-        border-radius: 10px !important;
-        border: 1px solid rgba(255, 255, 255, 0.08) !important;
-        background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.03)) !important;
-        transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease !important;
-        cursor: pointer !important;
-        margin-bottom: 0 !important;
-        width: 100% !important;
-        justify-content: flex-start !important;
-        text-align: left !important;
-    }
-    .sidebar-nav label:hover {
-        border-color: rgba(99,102,241,0.28) !important;
-        background: linear-gradient(180deg, rgba(99,102,241,0.10), rgba(59,130,246,0.08)) !important;
-    }
-    /* Selected state - Gradio adds 'selected' class to the label in some versions, or we check input:checked */
-    .sidebar-nav label.selected {
-        border-color: rgba(99,102,241,0.35) !important;
-        box-shadow: inset 0 0 0 1px rgba(99,102,241,0.25), 0 1px 2px rgba(0,0,0,0.25) !important;
-        background: linear-gradient(180deg, rgba(99,102,241,0.18), rgba(59,130,246,0.14)) !important;
-        color: rgba(255, 255, 255, 0.95) !important;
-    }
-    
-    /* Light theme adjustments for sidebar */
-    @media (prefers-color-scheme: light) {
-        .sidebar-nav label {
-            border-color: rgba(0, 0, 0, 0.08) !important;
-            background: linear-gradient(180deg, rgba(255,255,255,0.95), rgba(255,255,255,0.90)) !important;
-            color: rgba(0, 0, 0, 0.85) !important;
-        }
-        .sidebar-nav label:hover {
-            border-color: rgba(99,102,241,0.25) !important;
-            background: linear-gradient(180deg, rgba(99,102,241,0.08), rgba(59,130,246,0.06)) !important;
-        }
-        .sidebar-nav label.selected {
-            border-color: rgba(99,102,241,0.35) !important;
-            background: linear-gradient(180deg, rgba(99,102,241,0.16), rgba(59,130,246,0.12)) !important;
-            color: rgba(0, 0, 0, 0.85) !important;
-        }
-    }
-
-    /* Hide scrollbars/arrows that can appear on the description block in some browsers */
-    article.prose, .prose, .gr-prose {
-        overflow: visible !important;
-        max-height: none !important;
-        -ms-overflow-style: none !important; /* IE/Edge */
-        scrollbar-width: none !important;    /* Firefox */
-    }
-    article.prose::-webkit-scrollbar,
-    .prose::-webkit-scrollbar,
-    .gr-prose::-webkit-scrollbar {
-        display: none !important;            /* Chrome/Safari */
-    }
-
-    /* Fix for white background on single-line inputs in dark mode */
-    .gradio-container input[type="text"], 
-    .gradio-container input[type="password"], 
-    .gradio-container input[type="number"], 
-    .gradio-container input[type="email"] {
-        background-color: var(--input-background-fill) !important;
-        color: var(--body-text-color) !important;
-    }
-
-    /* Custom glossy purple styling for primary action buttons */
-    .gradio-container button.primary {
-        border: 1px solid rgba(99, 102, 241, 0.35) !important;
-        background: linear-gradient(180deg, rgba(99, 102, 241, 0.25), rgba(59, 130, 246, 0.20)) !important;
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 2px 4px rgba(0, 0, 0, 0.15) !important;
-        color: rgba(255, 255, 255, 0.95) !important;
-        transition: background .2s ease, border-color .2s ease, box-shadow .2s ease, transform .06s ease !important;
-    }
-    .gradio-container button.primary:hover {
-        border-color: rgba(99, 102, 241, 0.5) !important;
-        background: linear-gradient(180deg, rgba(99, 102, 241, 0.35), rgba(59, 130, 246, 0.28)) !important;
-        box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.15), 0 3px 6px rgba(0, 0, 0, 0.2) !important;
-    }
-    .gradio-container button.primary:active {
-        transform: scale(0.98) !important;
-        box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2), 0 1px 2px rgba(0, 0, 0, 0.1) !important;
-    }
-    @media (prefers-color-scheme: light) {
-        .gradio-container button.primary {
-            border-color: rgba(99, 102, 241, 0.4) !important;
-            background: linear-gradient(180deg, rgba(99, 102, 241, 0.85), rgba(79, 70, 229, 0.75)) !important;
-            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25), 0 2px 4px rgba(0, 0, 0, 0.12) !important;
-            color: rgba(255, 255, 255, 0.98) !important;
-        }
-        .gradio-container button.primary:hover {
-            background: linear-gradient(180deg, rgba(99, 102, 241, 0.95), rgba(79, 70, 229, 0.85)) !important;
-            box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.3), 0 3px 6px rgba(0, 0, 0, 0.15) !important;
-        }
-    }
-
-    /* Hide the actual tabs since we use the sidebar to control them */
-    .hidden-tabs .tab-nav,
-    .hidden-tabs [role="tablist"] {
-        display: none !important;
-    }
-    /* Hide the entire first row of the tabs container (contains tab buttons + overflow) */
-    .hidden-tabs > div:first-child {
-        display: none !important;
-    }
-    /* Ensure audio component buttons remain visible - they're inside tab panels, not the first row */
-    .hidden-tabs [role="tabpanel"] button {
-        display: inline-flex !important;
-    }
-
-    /* Custom scrollbar styling */
-    * {
-        scrollbar-width: thin;
-        scrollbar-color: rgba(61, 212, 159, 0.4) rgba(255, 255, 255, 0.05);
-    }
-    *::-webkit-scrollbar {
-        width: 8px;
-        height: 8px;
-    }
-    *::-webkit-scrollbar-track {
-        background: rgba(255, 255, 255, 0.05);
-        border-radius: 4px;
-    }
-    *::-webkit-scrollbar-thumb {
-        background: linear-gradient(180deg, rgba(61, 212, 159, 0.5), rgba(17, 186, 136, 0.4));
-        border-radius: 4px;
-        border: 1px solid rgba(119, 247, 209, 0.2);
-    }
-    *::-webkit-scrollbar-thumb:hover {
-        background: linear-gradient(180deg, rgba(85, 250, 192, 0.7), rgba(65, 184, 131, 0.6));
-    }
-    *::-webkit-scrollbar-corner {
-        background: rgba(255, 255, 255, 0.05);
-    }
-    @media (prefers-color-scheme: light) {
-        * {
-            scrollbar-color: rgba(61, 212, 159, 0.4) rgba(0, 0, 0, 0.05);
-        }
-        *::-webkit-scrollbar-track {
-            background: rgba(0, 0, 0, 0.05);
-        }
-        *::-webkit-scrollbar-thumb {
-            background: linear-gradient(180deg, rgba(61, 212, 159, 0.5), rgba(17, 186, 136, 0.4));
-            border-color: rgba(0, 0, 0, 0.1);
-        }
-        *::-webkit-scrollbar-thumb:hover {
-            background: linear-gradient(180deg, rgba(85, 250, 192, 0.7), rgba(65, 184, 131, 0.6));
-        }
-        *::-webkit-scrollbar-corner {
-            background: rgba(0, 0, 0, 0.05);
-        }
-    }
-"""
+# Load CSS from external file
+_css_path = os.path.join(os.path.dirname(__file__), "styles.css")
+with open(_css_path, "r", encoding="utf-8") as _css_file:
+    CSS_STYLES = _css_file.read()
 
 # Build each tab interface using modular builders
 fetch_interface = build_fetch_interface()