Update app.py

app.py

@@ -1,60 +1,171 @@
-# This is a simple Gradio app that embeds an iframe to display an external Hugging Face Space.
-# It also includes a fallback link in case the Deepfake Detector doesn't work.
-# Additionally, it adds cards on the left and right to include links to more spaces.
-
 import gradio as gr
 
-# Define the CSS to embed the iframe and style the cards
 css = """
+/* Container styles */
+.container {
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 20px;
+}
+
+/* Header styles */
+h1, h2, h3 {
+    font-family: 'Arial', sans-serif;
+    color: #2d3748;
+}
+
+/* Iframe container styles */
 .iframe-container {
     position: relative;
     width: 100%;
     height: 0;
-    padding-bottom: 53.33%; /* 450 / 850 * 100 */
+    padding-bottom: 75%;
+    background: #f7fafc;
+    border-radius: 12px;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    overflow: hidden;
 }
+
 .iframe-container iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
-    border: 10px;
+    border: none;
+    border-radius: 12px;
 }
+
+/* Card styles */
 .card {
-    background-color: #f0f0f0;
+    background: linear-gradient(145deg, #1a365d, #2d4a8c);
+    color: white;
     padding: 20px;
-    margin: 10px;
-    border-radius: 10px;
-    text-align: center;
+    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;
+}
+
+.card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+}
+
+.card a {
+    color: white;
+    text-decoration: none;
+    font-weight: bold;
+    font-size: 1.1em;
+    display: block;
+    padding: 10px;
+}
+
+.card a:hover {
+    text-decoration: underline;
+}
+
+/* Fallback link styles */
+.fallback-link {
+    margin-top: 20px;
+    padding: 15px;
+    background-color: #f8f9fa;
+    border-radius: 8px;
+    border: 1px solid #e2e8f0;
+}
+
+.fallback-link a {
+    color: #4a5568;
+    text-decoration: none;
+    font-weight: 500;
+}
+
+.fallback-link a:hover {
+    color: #2b6cb0;
+}
+
+/* Icon styles */
+.icon {
+    width: 50px;
+    height: 50px;
+    margin-bottom: 20px;
+}
+
+/* Layout styles */
+.column {
+    padding: 10px;
+}
+
+.row {
+    display: flex;
+    align-items: stretch;
+    margin: -10px;
+}
+
+/* Responsive design */
+@media (max-width: 768px) {
+    .row {
+        flex-direction: column;
+    }
+    
+    .column {
+        width: 100%;
+    }
+    
+    .iframe-container {
+        padding-bottom: 100%;
+    }
 }
 """
 
-# Create a Gradio Blocks app
 with gr.Blocks(css=css) as demo:
-    # Add a Markdown component to provide some context
-    gr.Markdown("## Centurion Complete 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"])
     
-    # Add a Row to contain the cards and the iframe
-    with gr.Row():
-        # Add a card on the left
-        with gr.Column():
-            gr.Markdown("### More Spaces")
-            gr.HTML('<div class="card"><a href="https://noumanjavaid-new-space.hf.space" target="_blank">DeepFake Detection</a></div>')
-            gr.HTML('<div class="card"><a href="https://noumanjavaid-centurionv2.hf.space" target="_blank">Image and Document Diff Checker</a></div>')
+    with gr.Row(elem_classes=["row"]):
+        with gr.Column(elem_classes=["column"]):
+            gr.Markdown("### Featured Tools", elem_classes=["section-title"])
+            gr.HTML('''
+                <div class="card">
+                    <a href="https://noumanjavaid-new-space.hf.space" target="_blank">
+                        🔍 DeepFake Detection
+                    </a>
+                </div>
+                <div class="card">
+                    <a href="https://noumanjavaid-centurionv2.hf.space" target="_blank">
+                        📄 Image and Document Diff Checker
+                    </a>
+                </div>
+            ''')
         
-        # Add a Column to contain the iframe
-        with gr.Column():
-            # Add a HTML component to embed the iframe
-            gr.HTML('<div class="iframe-container"><iframe src="https://noumanjavaid-centii.hf.space"></iframe></div>')
+        with gr.Column(scale=2, elem_classes=["column"]):
+            gr.HTML('''
+                <div class="iframe-container">
+                    <iframe src="https://noumanjavaid-centii.hf.space"></iframe>
+                </div>
+            ''')
         
-        # Add a card on the right
-        with gr.Column():
-            gr.Markdown("### More Spaces")
-            gr.HTML('<div class="card"><a href="https://noumanjavaid-watermark-demo-video.hf.space" target="_blank">Space 3</a></div>')
-            gr.HTML('<div class="card"><a href="https://space4.hf.space" target="_blank">Space 4</a></div>')
+        with gr.Column(elem_classes=["column"]):
+            gr.Markdown("### Additional Tools", elem_classes=["section-title"])
+            gr.HTML('''
+                <div class="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
+                    </a>
+                </div>
+            ''')
     
-    # Add a Markdown component to provide a fallback link
-    gr.Markdown("If the Deepfake Detector doesn't work, please use the following link: [Deepfake Detector](https://noumanjavaid-new-space.hf.space)")
+    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.
+        """)
 
-# Launch the app
-demo.launch(show_error=True)
+if __name__ == "__main__":
+    demo.launch(show_error=True)