Spaces:
Sleeping
Sleeping
| # Premium Cinematic Styling Rules (CineMind AI) | |
| NAVBAR_HTML = """ | |
| <div class="sticky-nav"> | |
| <div class="nav-logo">🎬 CineMind AI</div> | |
| <div class="nav-links"> | |
| <a href="#home">Home</a> | |
| <a href="#explore">Explore</a> | |
| <a href="#trending">Trending</a> | |
| <a href="#statistics">Statistics</a> | |
| </div> | |
| <div class="nav-status-badge"> | |
| <span class="status-dot"></span> Dataset Loaded | |
| </div> | |
| </div> | |
| """ | |
| FOOTER_HTML = """ | |
| <div class="footer-container"> | |
| <p>© 2026 CineMind AI. Designed for Hugging Face Spaces. Production-Grade DeepFM Discovery Platform.</p> | |
| </div> | |
| """ | |
| CUSTOM_CSS = """ | |
| @import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap'); | |
| /* Smooth Scrolling & Globals */ | |
| html { | |
| scroll-behavior: smooth; | |
| } | |
| :root { | |
| --bg-color: #0B0F19; | |
| --surface-color: #111827; | |
| --card-color: #1A2234; | |
| --accent-color: #6366F1; | |
| --accent-hover: #7C83FF; | |
| --text-primary: #FFFFFF; | |
| --text-secondary: #B6BECF; | |
| --text-muted: #7A8595; | |
| --success-color: #22C55E; | |
| --font-family: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; | |
| --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); | |
| --shadow-md: 0 8px 16px rgba(0, 0, 0, 0.3); | |
| --shadow-lg: 0 16px 32px rgba(0, 0, 0, 0.5); | |
| --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| --transition-fast: all 0.15s ease; | |
| } | |
| body, .gradio-container { | |
| background-color: var(--bg-color) !important; | |
| font-family: var(--font-family) !important; | |
| color: var(--text-primary) !important; | |
| } | |
| h1, h2, h3, h4, h5, h6 { | |
| font-family: var(--font-family) !important; | |
| font-weight: 700 !important; | |
| color: var(--text-primary) !important; | |
| letter-spacing: -0.02em; | |
| } | |
| /* Hide default borders and cards from gradio layout */ | |
| .gradio-container .block, | |
| .gradio-container .form, | |
| .gradio-container .group { | |
| border: none !important; | |
| box-shadow: none !important; | |
| background: transparent !important; | |
| } | |
| /* Sticky Navbar Styles */ | |
| .sticky-nav { | |
| position: fixed; | |
| top: 0; | |
| left: 0; | |
| right: 0; | |
| height: 70px; | |
| background: rgba(11, 15, 25, 0.9); | |
| backdrop-filter: blur(10px); | |
| -webkit-backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.05); | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 0 40px; | |
| z-index: 9999; | |
| } | |
| /* Push page content down due to fixed navbar */ | |
| .gradio-container { | |
| padding-top: 70px !important; | |
| } | |
| .nav-logo { | |
| font-size: 22px; | |
| font-weight: 800; | |
| color: var(--text-primary); | |
| letter-spacing: -0.03em; | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 32px; | |
| } | |
| .nav-links a { | |
| color: var(--text-secondary); | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 15px; | |
| transition: var(--transition-fast); | |
| } | |
| .nav-links a:hover { | |
| color: var(--accent-color); | |
| } | |
| .nav-status-badge { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: var(--success-color); | |
| font-size: 13px; | |
| font-weight: 700; | |
| padding: 6px 12px; | |
| border-radius: 20px; | |
| display: flex; | |
| align-items: center; | |
| gap: 8px; | |
| } | |
| .status-dot { | |
| width: 8px; | |
| height: 8px; | |
| background-color: var(--success-color); | |
| border-radius: 50%; | |
| box-shadow: 0 0 8px var(--success-color); | |
| display: inline-block; | |
| } | |
| /* Hidden TextBox style to support DOM selection bindings */ | |
| .hidden-textbox { | |
| display: none !important; | |
| } | |
| /* Hero Section */ | |
| .hero-container { | |
| position: relative; | |
| background: linear-gradient(180deg, rgba(26, 34, 52, 0.5) 0%, rgba(11, 15, 25, 1) 100%), | |
| url('https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?q=80&w=1200&auto=format&fit=crop') center/cover no-repeat; | |
| border-radius: 20px; | |
| padding: 100px 60px 60px 60px; | |
| margin-top: 20px; | |
| margin-bottom: 40px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-lg); | |
| display: flex; | |
| flex-direction: column; | |
| min-height: 400px; | |
| justify-content: center; | |
| } | |
| .hero-subtitle { | |
| color: var(--accent-color); | |
| font-size: 14px; | |
| font-weight: 800; | |
| text-transform: uppercase; | |
| letter-spacing: 0.2em; | |
| margin-bottom: 16px; | |
| } | |
| .hero-title { | |
| font-size: 54px; | |
| font-weight: 800; | |
| line-height: 1.1; | |
| margin-bottom: 20px; | |
| max-width: 700px; | |
| text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6); | |
| } | |
| .hero-description { | |
| color: var(--text-secondary); | |
| font-size: 18px; | |
| max-width: 600px; | |
| line-height: 1.6; | |
| margin-bottom: 30px; | |
| text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); | |
| } | |
| .hero-buttons { | |
| display: flex; | |
| gap: 16px; | |
| } | |
| .hero-buttons a.btn { | |
| display: inline-block; | |
| text-decoration: none; | |
| font-weight: 600; | |
| font-size: 15px; | |
| border-radius: 8px; | |
| padding: 14px 28px; | |
| transition: var(--transition-smooth); | |
| text-align: center; | |
| } | |
| .hero-buttons a.btn.primary { | |
| background: var(--accent-color); | |
| color: var(--text-primary); | |
| } | |
| .hero-buttons a.btn.primary:hover { | |
| background: var(--accent-hover); | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); | |
| } | |
| .hero-buttons a.btn.secondary { | |
| background-color: var(--surface-color); | |
| color: var(--text-primary); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| } | |
| .hero-buttons a.btn.secondary:hover { | |
| background-color: var(--card-color); | |
| border-color: rgba(255, 255, 255, 0.15); | |
| } | |
| /* Scroll Anchors */ | |
| .section-anchor { | |
| scroll-margin-top: 100px; | |
| } | |
| /* Input Components (Dropdown, Slider, Search) Styling */ | |
| .gradio-container select, | |
| .gradio-container input[type="text"], | |
| .gradio-container input[type="number"], | |
| .gradio-container textarea { | |
| background-color: var(--surface-color) !important; | |
| border: 1px solid rgba(255, 255, 255, 0.05) !important; | |
| border-radius: 8px !important; | |
| color: var(--text-primary) !important; | |
| font-family: var(--font-family) !important; | |
| padding: 12px 16px !important; | |
| transition: var(--transition-fast); | |
| } | |
| .gradio-container select:focus, | |
| .gradio-container input[type="text"]:focus, | |
| .gradio-container input[type="number"]:focus { | |
| border-color: var(--accent-color) !important; | |
| outline: none !important; | |
| box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2) !important; | |
| } | |
| /* Slider Customization */ | |
| .gradio-container input[type="range"] { | |
| accent-color: var(--accent-color) !important; | |
| } | |
| /* Labels */ | |
| .gradio-container label span { | |
| color: var(--text-secondary) !important; | |
| font-size: 14px !important; | |
| font-weight: 500 !important; | |
| text-transform: none !important; | |
| margin-bottom: 8px !important; | |
| letter-spacing: 0.02em; | |
| } | |
| /* Filter Section Styling */ | |
| .filter-row { | |
| display: flex; | |
| gap: 20px; | |
| background-color: var(--surface-color); | |
| padding: 24px; | |
| border-radius: 12px; | |
| margin-bottom: 30px; | |
| align-items: flex-end; | |
| } | |
| @media (max-width: 992px) { | |
| .filter-row { | |
| flex-direction: column; | |
| align-items: stretch; | |
| } | |
| } | |
| /* Content Layout Grid */ | |
| .content-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); | |
| gap: 28px; | |
| padding: 10px 0; | |
| margin-bottom: 24px; | |
| } | |
| /* Premium Glassmorphic Movie Cards */ | |
| .movie-card { | |
| background: rgba(26, 34, 52, 0.45) !important; | |
| backdrop-filter: blur(12px); | |
| -webkit-backdrop-filter: blur(12px); | |
| border-radius: 14px; | |
| overflow: hidden; | |
| box-shadow: var(--shadow-sm); | |
| transition: var(--transition-smooth); | |
| display: flex; | |
| flex-direction: column; | |
| position: relative; | |
| height: 390px; | |
| border: 1px solid rgba(255, 255, 255, 0.05) !important; | |
| cursor: pointer; | |
| text-decoration: none; | |
| } | |
| .movie-card:hover { | |
| transform: translateY(-8px) scale(1.02); | |
| box-shadow: 0 16px 36px rgba(99, 102, 241, 0.25); | |
| border-color: rgba(99, 102, 241, 0.4) !important; | |
| } | |
| /* Movie Poster Area & Image elements */ | |
| .movie-poster-container { | |
| height: 240px; | |
| width: 100%; | |
| position: relative; | |
| overflow: hidden; | |
| background: linear-gradient(135deg, #1f2836 0%, #121620 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .movie-poster { | |
| width: 100%; | |
| height: 100%; | |
| object-fit: cover; | |
| transition: var(--transition-smooth); | |
| } | |
| .movie-card:hover .movie-poster { | |
| transform: scale(1.08); | |
| } | |
| .movie-poster-container::after { | |
| content: ""; | |
| position: absolute; | |
| bottom: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 50px; | |
| background: linear-gradient(180deg, transparent 0%, rgba(17, 24, 39, 0.95) 100%); | |
| pointer-events: none; | |
| } | |
| /* Movie Details Section */ | |
| .movie-details { | |
| padding: 18px; | |
| display: flex; | |
| flex-direction: column; | |
| flex-grow: 1; | |
| justify-content: space-between; | |
| } | |
| .movie-title { | |
| font-size: 16px; | |
| font-weight: 600; | |
| color: var(--text-primary); | |
| margin: 0 0 6px 0; | |
| line-height: 1.3; | |
| overflow: hidden; | |
| text-overflow: ellipsis; | |
| display: -webkit-box; | |
| -webkit-line-clamp: 2; | |
| -webkit-box-orient: vertical; | |
| } | |
| .movie-year { | |
| font-size: 13px; | |
| color: var(--text-secondary); | |
| margin-bottom: 4px; | |
| } | |
| .movie-meta-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-top: 8px; | |
| } | |
| .badge-id { | |
| font-size: 11px; | |
| color: var(--text-muted); | |
| background: rgba(255, 255, 255, 0.05); | |
| padding: 2px 6px; | |
| border-radius: 4px; | |
| } | |
| .rating-badge { | |
| color: #FFAD1F; | |
| font-size: 13px; | |
| font-weight: 600; | |
| display: flex; | |
| align-items: center; | |
| gap: 4px; | |
| } | |
| .votes-badge { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| } | |
| /* Details Panel Styling */ | |
| .details-panel { | |
| background-color: var(--surface-color); | |
| padding: 30px; | |
| border-radius: 16px; | |
| box-shadow: var(--shadow-md); | |
| margin-bottom: 40px; | |
| border: 1px solid rgba(255, 255, 255, 0.03); | |
| } | |
| .details-header { | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08); | |
| padding-bottom: 16px; | |
| margin-bottom: 20px; | |
| } | |
| .details-title-row { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: flex-start; | |
| gap: 20px; | |
| } | |
| .details-movie-title { | |
| font-size: 32px; | |
| font-weight: 800; | |
| color: var(--text-primary); | |
| margin: 0; | |
| letter-spacing: -0.02em; | |
| } | |
| .details-movie-year { | |
| font-size: 18px; | |
| color: var(--text-secondary); | |
| margin-top: 4px; | |
| } | |
| .details-id-badge { | |
| background-color: var(--card-color); | |
| border: 1px solid rgba(255, 255, 255, 0.08); | |
| color: var(--accent-color); | |
| font-weight: 700; | |
| font-size: 13px; | |
| padding: 6px 12px; | |
| border-radius: 6px; | |
| } | |
| .rating-progress-container { | |
| margin: 20px 0; | |
| } | |
| .rating-progress-bar { | |
| height: 8px; | |
| background-color: var(--card-color); | |
| border-radius: 4px; | |
| overflow: hidden; | |
| margin-top: 8px; | |
| } | |
| .rating-progress-fill { | |
| height: 100%; | |
| background: linear-gradient(90deg, var(--accent-color) 0%, #FFAD1F 100%); | |
| border-radius: 4px; | |
| transition: width 0.6s cubic-bezier(0.25, 0.8, 0.25, 1); | |
| } | |
| .details-stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(3, 1fr); | |
| gap: 16px; | |
| margin-top: 24px; | |
| } | |
| .details-stat-card { | |
| background-color: var(--card-color); | |
| padding: 16px; | |
| border-radius: 10px; | |
| border: 1px solid rgba(255, 255, 255, 0.02); | |
| } | |
| .details-stat-label { | |
| font-size: 12px; | |
| color: var(--text-muted); | |
| text-transform: uppercase; | |
| letter-spacing: 0.05em; | |
| margin-bottom: 4px; | |
| } | |
| .details-stat-value { | |
| font-size: 20px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| } | |
| /* Data Quality Check Badge Rules */ | |
| .data-quality-grid { | |
| display: flex; | |
| gap: 12px; | |
| margin-top: 16px; | |
| flex-wrap: wrap; | |
| } | |
| .quality-badge { | |
| font-size: 12px; | |
| font-weight: 600; | |
| padding: 4px 10px; | |
| border-radius: 6px; | |
| display: flex; | |
| align-items: center; | |
| gap: 6px; | |
| } | |
| .quality-good { | |
| background: rgba(34, 197, 94, 0.1); | |
| color: var(--success-color); | |
| } | |
| .quality-warning { | |
| background: rgba(255, 173, 31, 0.1); | |
| color: #FFAD1F; | |
| } | |
| /* Statistics Dashboard KPI Cards */ | |
| .stats-dashboard { | |
| background-color: var(--surface-color); | |
| padding: 30px; | |
| border-radius: 16px; | |
| margin-bottom: 40px; | |
| } | |
| .stats-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); | |
| gap: 20px; | |
| margin-bottom: 30px; | |
| } | |
| .stat-item { | |
| background-color: var(--card-color); | |
| padding: 24px 20px; | |
| border-radius: 12px; | |
| text-align: center; | |
| border: 1px solid rgba(255, 255, 255, 0.02); | |
| } | |
| .stat-value { | |
| font-size: 28px; | |
| font-weight: 800; | |
| color: var(--text-primary); | |
| margin-bottom: 6px; | |
| letter-spacing: -0.01em; | |
| } | |
| .stat-value.accent { | |
| color: var(--accent-color); | |
| } | |
| .stat-label { | |
| font-size: 12px; | |
| color: var(--text-secondary); | |
| text-transform: uppercase; | |
| letter-spacing: 0.08em; | |
| } | |
| /* Button System Overrides */ | |
| .gradio-container button.primary, | |
| .gradio-container button.primary-btn { | |
| background: var(--accent-color) !important; | |
| color: var(--text-primary) !important; | |
| font-family: var(--font-family) !important; | |
| font-weight: 600 !important; | |
| font-size: 15px !important; | |
| border: none !important; | |
| border-radius: 8px !important; | |
| padding: 12px 24px !important; | |
| box-shadow: var(--shadow-sm) !important; | |
| transition: var(--transition-smooth) !important; | |
| cursor: pointer !important; | |
| } | |
| .gradio-container button.primary:hover, | |
| .gradio-container button.primary-btn:hover { | |
| background: var(--accent-hover) !important; | |
| transform: translateY(-2px) !important; | |
| box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4) !important; | |
| } | |
| .gradio-container button.secondary { | |
| background-color: var(--surface-color) !important; | |
| color: var(--text-primary) !important; | |
| font-family: var(--font-family) !important; | |
| font-weight: 600 !important; | |
| font-size: 15px !important; | |
| border: 1px solid rgba(255, 255, 255, 0.08) !important; | |
| border-radius: 8px !important; | |
| padding: 12px 24px !important; | |
| transition: var(--transition-smooth) !important; | |
| cursor: pointer !important; | |
| } | |
| .gradio-container button.secondary:hover { | |
| background-color: var(--card-color) !important; | |
| border-color: rgba(255, 255, 255, 0.15) !important; | |
| } | |
| /* Section Header Styles */ | |
| .section-header { | |
| margin-bottom: 24px; | |
| } | |
| .section-title { | |
| font-size: 28px; | |
| font-weight: 700; | |
| color: var(--text-primary); | |
| margin-bottom: 6px; | |
| letter-spacing: -0.02em; | |
| } | |
| .section-desc { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| } | |
| /* Empty State Styling */ | |
| .empty-state { | |
| text-align: center; | |
| padding: 60px 40px; | |
| background-color: var(--surface-color); | |
| border-radius: 12px; | |
| border: 2px dashed rgba(255, 255, 255, 0.05); | |
| margin: 20px 0; | |
| } | |
| .empty-icon { | |
| font-size: 48px; | |
| margin-bottom: 16px; | |
| opacity: 0.5; | |
| } | |
| .empty-title { | |
| font-size: 20px; | |
| font-weight: 700; | |
| margin-bottom: 8px; | |
| } | |
| .empty-desc { | |
| color: var(--text-secondary); | |
| font-size: 14px; | |
| max-width: 400px; | |
| margin: 0 auto; | |
| } | |
| /* Pagination Row */ | |
| .pagination-container { | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| gap: 16px; | |
| margin-top: 20px; | |
| } | |
| .page-indicator { | |
| font-size: 14px; | |
| color: var(--text-secondary); | |
| font-weight: 600; | |
| } | |
| /* Footer Container Styling */ | |
| .footer-container { | |
| text-align: center; | |
| padding: 40px 0 60px 0; | |
| border-top: 1px solid rgba(255, 255, 255, 0.05); | |
| margin-top: 60px; | |
| color: var(--text-muted); | |
| font-size: 14px; | |
| } | |
| /* Tab Navigation Override */ | |
| .tabs { | |
| background: transparent !important; | |
| border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important; | |
| margin-bottom: 30px !important; | |
| } | |
| .tab-nav, .tab-container { | |
| display: flex !important; | |
| gap: 24px !important; | |
| } | |
| .tab-nav button, .tab-container button { | |
| background: transparent !important; | |
| border: none !important; | |
| border-bottom: 2px solid transparent !important; | |
| color: #FFFFFF !important; | |
| font-family: var(--font-family) !important; | |
| font-size: 16px !important; | |
| font-weight: 600 !important; | |
| padding: 12px 4px !important; | |
| border-radius: 0 !important; | |
| transition: var(--transition-fast) !important; | |
| box-shadow: none !important; | |
| } | |
| .tab-nav button:not(.selected), .tab-container button:not(.selected) { | |
| color: #FFFFFF !important; | |
| } | |
| .tab-nav button:hover, .tab-container button:hover { | |
| color: #FFFFFF !important; | |
| opacity: 0.85; | |
| } | |
| .tab-nav button.selected, .tab-container button.selected { | |
| color: var(--accent-color) !important; | |
| border-bottom: 2px solid var(--accent-color) !important; | |
| font-weight: 700 !important; | |
| } | |
| """ | |