Update app.py

app.py

@@ -1,29 +1,102 @@
 import gradio as gr
 
 css = """
-/* Container styles */
+/* Modern theme with cool effects */
+:root {
+    --primary-black: #000000;
+    --primary-white: #ffffff;
+    --gray-100: #f7f7f7;
+    --gray-200: #e5e5e5;
+    --gray-300: #d4d4d4;
+    --gray-400: #a3a3a3;
+    --gray-800: #262626;
+    --gray-900: #171717;
+}
+
+* {
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+body {
+    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    background-color: var(--primary-black);
+    color: var(--primary-white);
+}
+
+/* Glassmorphism Header */
+.header {
+    background: rgba(23, 23, 23, 0.8);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+    padding: 1.5rem 2rem;
+    position: sticky;
+    top: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+}
+
+.logo-container {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+}
+
+.logo {
+    width: 45px;
+    height: 45px;
+    filter: drop-shadow(0 0 10px rgba(255, 255, 255, 0.3));
+    transition: transform 0.3s ease;
+}
+
+.logo:hover {
+    transform: scale(1.1);
+}
+
+.header-title {
+    color: var(--primary-white);
+    font-size: 28px;
+    font-weight: 600;
+    text-shadow: 0 0 10px rgba(255, 255, 255, 0.2);
+}
+
+/* Main container with cool gradient */
 .container {
-    max-width: 1200px;
+    max-width: 1400px;
     margin: 0 auto;
-    padding: 20px;
+    padding: 2rem;
+    background: linear-gradient(
+        135deg,
+        rgba(38, 38, 38, 0.9) 0%,
+        rgba(23, 23, 23, 0.9) 100%
+    );
+}
+
+/* Modern Iframe container */
+.main-content {
+    background: var(--gray-900);
+    border-radius: 20px;
+    box-shadow: 0 0 30px rgba(0, 0, 0, 0.5);
+    margin: 2rem 0;
+    overflow: hidden;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: transform 0.3s ease;
 }
 
-/* Header styles */
-h1, h2, h3 {
-    font-family: 'Arial', sans-serif;
-    color: #2d3748;
+.main-content:hover {
+    transform: translateY(-5px);
 }
 
-/* Iframe container styles */
 .iframe-container {
     position: relative;
     width: 100%;
     height: 0;
-    padding-bottom: 75%;
-    background: #f7fafc;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    overflow: hidden;
+    padding-bottom: 65%;
+    background: var(--gray-900);
 }
 
 .iframe-container iframe {
@@ -33,139 +106,173 @@ h1, h2, h3 {
     width: 100%;
     height: 100%;
     border: none;
-    border-radius: 12px;
+    border-radius: 20px;
 }
 
-/* Card styles */
-.card {
-    background: linear-gradient(145deg, #1a365d, #2d4a8c);
-    color: white;
-    padding: 20px;
-    margin: 10px 0;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    transition: transform 0.2s ease, box-shadow 0.2s ease;
+/* Modern Navigation Grid */
+.nav-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+    margin-top: 2rem;
 }
 
-.card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+/* Sleek Navigation Cards */
+.nav-card {
+    background: rgba(38, 38, 38, 0.5);
+    backdrop-filter: blur(10px);
+    -webkit-backdrop-filter: blur(10px);
+    border-radius: 15px;
+    padding: 1.5rem;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    transition: all 0.3s ease;
+    position: relative;
+    overflow: hidden;
 }
 
-.card a {
-    color: white;
-    text-decoration: none;
-    font-weight: bold;
-    font-size: 1.1em;
-    display: block;
-    padding: 10px;
+.nav-card::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: linear-gradient(
+        45deg,
+        transparent 0%,
+        rgba(255, 255, 255, 0.05) 50%,
+        transparent 100%
+    );
+    transform: translateX(-100%);
+    transition: transform 0.6s ease;
 }
 
-.card a:hover {
-    text-decoration: underline;
+.nav-card:hover {
+    transform: translateY(-5px) scale(1.02);
+    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
+    background: rgba(38, 38, 38, 0.8);
 }
 
-/* Fallback link styles */
-.fallback-link {
-    margin-top: 20px;
-    padding: 15px;
-    background-color: #f8f9fa;
-    border-radius: 8px;
-    border: 1px solid #e2e8f0;
+.nav-card:hover::before {
+    transform: translateX(100%);
 }
 
-.fallback-link a {
-    color: #4a5568;
+.nav-card a {
+    color: var(--primary-white);
     text-decoration: none;
     font-weight: 500;
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.8rem;
+    position: relative;
 }
 
-.fallback-link a:hover {
-    color: #2b6cb0;
+.nav-card a::after {
+    content: '→';
+    position: absolute;
+    right: 0;
+    opacity: 0;
+    transform: translateX(-10px);
+    transition: all 0.3s ease;
 }
 
-/* Icon styles */
-.icon {
-    width: 50px;
-    height: 50px;
-    margin-bottom: 20px;
+.nav-card:hover a::after {
+    opacity: 1;
+    transform: translateX(0);
 }
 
-/* Layout styles */
-.column {
-    padding: 10px;
+/* Hide Gradio elements */
+footer, .gradio-container {
+    display: none !important;
 }
 
-.row {
-    display: flex;
-    align-items: stretch;
-    margin: -10px;
+/* Cool loading animation */
+@keyframes pulse {
+    0% { opacity: 0.5; }
+    50% { opacity: 1; }
+    100% { opacity: 0.5; }
 }
 
-/* Responsive design */
-@media (max-width: 768px) {
-    .row {
-        flex-direction: column;
-    }
-    
-    .column {
-        width: 100%;
-    }
-    
-    .iframe-container {
-        padding-bottom: 100%;
-    }
+.loading {
+    animation: pulse 1.5s infinite;
+}
+
+/* Modern scrollbar */
+::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+}
+
+::-webkit-scrollbar-track {
+    background: var(--gray-900);
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--gray-400);
+    border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--gray-300);
 }
 """
 
-with gr.Blocks(css=css) as demo:
-    with gr.Row(elem_classes=["container"]):
-        gr.Image("https://raw.githubusercontent.com/noumanjavaid96/ai-as-an-api/refs/heads/master/image%20(39).png", 
-                elem_classes=["icon"])
-        gr.Markdown("# Centurion Complete Demo", elem_classes=["header"])
+with gr.Blocks(css=css, title="Centurion Analysis Platform") as demo:
+    # Modern Header
+    with gr.Row(elem_classes=["header"]):
+        with gr.Column(elem_classes=["logo-container"]):
+            gr.Image(
+                "https://raw.githubusercontent.com/noumanjavaid96/ai-as-an-api/refs/heads/master/image%20(39).png",
+                elem_classes=["logo"],
+                show_label=False,
+                container=False
+            )
+            gr.Markdown("Centurion Analysis", elem_classes=["header-title"])
     
-    with gr.Row(elem_classes=["row"]):
-        with gr.Column(elem_classes=["column"]):
-            gr.Markdown("### Featured Tools", elem_classes=["section-title"])
+    # Main Content
+    with gr.Row(elem_classes=["container"]):
+        with gr.Column(elem_classes=["main-content"]):
             gr.HTML('''
-                <div class="card">
+                <div class="iframe-container">
+                    <iframe src="https://noumanjavaid-centii.hf.space"></iframe>
+                </div>
+            ''')
+        
+        # Navigation Cards
+        with gr.Row(elem_classes=["nav-grid"]):
+            gr.HTML('''
+                <div class="nav-card">
                     <a href="https://noumanjavaid-new-space.hf.space" target="_blank">
                         🔍 DeepFake Detection
                     </a>
                 </div>
-                <div class="card">
+                
+                <div class="nav-card">
                     <a href="https://noumanjavaid-centurionv2.hf.space" target="_blank">
-                        📄 Image and Document Diff Checker
+                        📄 Document Analysis
                     </a>
                 </div>
-            ''')
-        
-        with gr.Column(scale=2, elem_classes=["column"]):
-            gr.HTML('''
-                <div class="iframe-container">
-                    <iframe src="https://noumanjavaid-centii.hf.space"></iframe>
-                </div>
-            ''')
-        
-        with gr.Column(elem_classes=["column"]):
-            gr.Markdown("### Additional Tools", elem_classes=["section-title"])
-            gr.HTML('''
-                <div class="card">
+                
+                <div class="nav-card">
                     <a href="https://noumanjavaid-watermark-demo-video.hf.space" target="_blank">
                         🎥 Video Watermarking
                     </a>
                 </div>
-                <div class="card">
-                    <a href="https://space4.hf.space" target="_blank">
-                        🚧 UNDER CONSTRUCTION
+                
+                <div class="nav-card">
+                    <a href="https://noumanjavaid-centii.hf.space" target="_blank">
+                        🔐 Image Authentication
                     </a>
                 </div>
             ''')
-    
-    with gr.Row(elem_classes=["fallback-link"]):
-        gr.Markdown("""
-            ℹ️ If the Deepfake Detector is not loading, please [click here](https://noumanjavaid-new-space.hf.space) to access it directly.
-        """)
 
 if __name__ == "__main__":
-    demo.launch(show_error=True)
+    demo.launch(
+        show_error=True,
+        show_api=False,
+        show_tips=False,
+        height=800,
+        analytics_enabled=False,
+        enable_queue=False
+    )