Update app.py

app.py

@@ -15,162 +15,99 @@ logger = logging.getLogger(__name__)
 
 # CSS Configuration
 css = """
-* {
-    margin: 0;
-    padding: 0;
-    box-sizing: border-box;
-}
+/* General styles */
 body {
-    background-color: #ffffff;
-    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
+    font-family: sans-serif; /* Use a modern font */
 }
+
 .header {
-    background: #00000;
-    border-bottom: 1px solid #e5e5e5;
-    padding: 1.5rem 2rem;
-    display: flex;
-    align-items: center;
-    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
-    margin-bottom: 2rem;
+    background-color: #f0f0f0; 
+    padding: 15px 25px;         
+    display: flex;             
+    align-items: center;        
+    border-bottom: 2px solid #ddd; 
 }
+
 .logo {
-    width: 100px;
-    height: 45px;
-    margin-right: 0px;
-    transition: transform 0.3s ease;
-}
-.logo:hover {
-    transform: scale(1.05);
-}
-.header-title {
-    color: #000000;
-    font-size: 24px;
-    font-weight: 600;
+    max-height: 70px; 
+    margin-right: 25px;
 }
+
 .container {
-    max-width: 1400px;
-    margin: 0 auto;
-    padding: 0 2rem;
+    padding: 25px; 
 }
+
 .main-content {
-    background: #00000;
-    border-radius: 12px;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    margin-bottom: 2rem;
-    overflow: hidden;
-    border: 1px solid #e5e5e5;
+    border: 1px solid #ddd;
+    border-radius: 8px;   
+    overflow: hidden;     
+    margin-bottom: 20px; /* Add some spacing below the iframe */
 }
+
 .iframe-container {
+    padding-bottom: 56.25%; /* Maintain aspect ratio */
     position: relative;
     width: 100%;
-    height: 0;
-    padding-bottom: 65%;
+    height: 0; 
 }
+
 .iframe-container iframe {
     position: absolute;
     top: 0;
     left: 0;
-    width: 1000px;
-    height: 1000px;
+    width: 100%;
+    height: 100%;
     border: none;
 }
+
 .nav-grid {
     display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(1000px, 1fr));
-    gap: 1.5rem;
-    margin: 2rem 0;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); /* Adjusted minmax */
+    gap: 20px; 
+    padding: 0 25px; /* Match container padding */
 }
+
 .nav-card {
-    background: #ffffff;
-    border: 10px solid #e5e5e5;
-    border-radius: 10px;
-    padding: 1.5rem;
-    transition: all 0.3s ease;
+    background-color: white;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    padding: 25px;       /* Increased padding */
+    display: flex;          
+    align-items: center;    
+    text-decoration: none; /* Remove underline from links */
+    color: #333;          /* Darker text color */
+    transition: transform 0.2s ease-in-out, box-shadow 0.2s ease-in-out; /* Combined transitions */
 }
+
 .nav-card:hover {
-    transform: translateY(-5px);
-    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
-    border-color: #000000;
-}
-.nav-card a {
-    color: #000000;
-    text-decoration: none;
-    font-weight: 500;
-    font-size: 1.1rem;
-    display: flex;
-    align-items: center;
-    gap: 0.8rem;
-}
-.nav-card a::after {
-    content: '→';
-    margin-left: auto;
-    opacity: 0;
-    transition: opacity 0.3s ease;
-}
-.nav-card:hover a::after {
-    opacity: 1;
+    transform: translateY(-5px); 
+    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 }
-/* Hide Gradio elements */
-footer {
-    display: none !important;
-}
-.gradio-container {
-    margin: 0 !important;
-    padding: 0 !important;
+
+.nav-card i {
+    font-size: 2.5em;     /* Larger icons */
+    margin-right: 15px;
+    color: #4285f4;     /* Google blue for icons (optional) */
 }
-@media (max-width: 768px) {
-    .nav-grid {
-        grid-template-columns: 1fr;
-    }
-    
-    .header {
-        padding: 1rem;
-    }
-    
-    .container {
-        padding: 0 1rem;
-    }
+
+.nav-card span {
+    font-size: 1.4em;       /* Larger text */
+    font-weight: 500;      
 }
+
 """
 
 # Navigation cards configuration
 NAVIGATION_CARDS = [
-    {
-        "icon": "🔍",
-        "title": "DeepFake Detection",
-        "url": "https://noumanjavaid-new-space.hf.space"
-    },
-    {
-        "icon": "📄",
-        "title": "Document Analysis",
-        "url": "https://noumanjavaid-centurionv2.hf.space"
-    },
-    {
-        "icon": "🎥",
-        "title": "Video Watermarking",
-        "url": "https://noumanjavaid-watermark-demo-video.hf.space"
-    },
-    {
-        "icon": "🔐",
-        "title": "Image Authentication",
-        "url": "https://noumanjavaid-centii.hf.space"
-    }
+    {"icon": "🔍", "title": "DeepFake Detection", "url": "https://noumanjavaid-new-space.hf.space"},
+    {"icon": "📄", "title": "Document Analysis", "url": "https://noumanjavaid-centurionv2.hf.space"},
+    {"icon": "🎥", "title": "Video Watermarking", "url": "https://noumanjavaid-watermark-demo-video.hf.space"},
+    {"icon": "🔐", "title": "Image Authentication", "url": "https://noumanjavaid-centii.hf.space"},
+    {"icon": "🖼️", "title": "Image Comparison", "url": "https://another-example.com"} # Added example
 ]
 
-def create_navigation_cards():
-    return "".join([
-        f'''
-        <div class="nav-card">
-            <a href="{card['url']}" target="_blank" rel="noopener noreferrer">
-                {card['icon']} {card['title']}
-            </a>
-        </div>
-        ''' for card in NAVIGATION_CARDS
-    ])
-
 def create_interface():
-    with gr.Blocks(css=css, title="Centurion Analysis Platform") as demo:
-        # Header
+    with gr.Blocks(css=css, title="Centurion") as demo:
         with gr.Row(elem_classes=["header"]):
             gr.Image(
                 "https://raw.githubusercontent.com/noumanjavaid96/ai-as-an-api/refs/heads/master/image%20(39).png",
@@ -178,44 +115,49 @@ def create_interface():
                 show_label=False,
                 container=False
             )
-            gr.Markdown("## Centurion ")
-        
-        # Main content
+            gr.Markdown("<h2 style='margin:0;'>Centurion</h2>") # Improved title style
+
         with gr.Row(elem_classes=["container"]):
             with gr.Column(elem_classes=["main-content"]):
-                gr.HTML('''
-                .iframe-container {
-    position: relative;
-    width: 100%;
-    height: 100;
-    padding-bottom: 53.33%; /* 450 / 850 * 100 */
-}
-.iframe-container iframe {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    border: 10px;
-}
-
+                gr.HTML(
+                    """
                     <div class="iframe-container">
-                        <iframe 
-                            src="https://noumanjavaid-centii.hf.space"
+                        <iframe
+                            src="https://noumanjavaid-centii.hf.space"  /* Set initial iframe URL */
                             title="Centurion Main Platform"
-                        ></iframe>
+                            id="main-iframe"  /* Add id for targeting with JavaScript */
+                       ></iframe>
                     </div>
-                ''')
-            
-            # Navigation grid
+                    """
+                )  # Close HTML string properly
+
             with gr.Row(elem_classes=["nav-grid"]):
-                gr.HTML(create_navigation_cards())
-    
+                for card in NAVIGATION_CARDS:
+                    gr.HTML(f"""
+                        <a href="{card['url']}" onclick="updateIframe('{card['url']}'); return false;" class="nav-card"> {/* Add return false */}
+                            <i>{card['icon']}</i> <span>{card['title']}</span>
+                        </a>
+                    """)
+
+
     return demo
 
+
+
+# JavaScript function to update iframe source
+
+js = """
+function updateIframe(url) {
+    document.getElementById('main-iframe').src = url;
+}
+"""
+
 if __name__ == "__main__":
     demo = create_interface()
+    demo.launch(show_error=False, show_api=False, _js=js)
+
     demo.launch(
         show_error=False,
         show_api=False,
+        _js=js  # Include JavaScript for updating the iframe
     )