style: create layout

app.py

@@ -1,60 +1,201 @@
 import gradio as gr
 import os
+from datetime import datetime
 
 # Organization details
-ORG_NAME = "Your Organization Name"
+ORG_NAME = "Narrative I/O"
 DESCRIPTION = """
-Your organization's detailed description goes here. You can include information about:
-- Your mission and goals
-- Areas of focus
-- Notable projects or achievements
-- Contact information
+Narrative I/O is at the forefront of data transformation and enrichment. We specialize in:
+
+• Building scalable data enrichment pipelines
+• Developing cutting-edge machine learning models
+• Creating efficient data processing solutions
+• Enabling businesses to leverage their data assets effectively
+
+Our platform combines advanced ML capabilities with robust data processing to deliver 
+actionable insights and enhanced data quality for our clients.
 """
-LOGO_PATH = "path_to_your_logo.png"  # Add your logo file to the repository
-THEME_COLOR = "#ff7f50"  # Customize the theme color
 
-# Create custom CSS for styling
+# News/Announcements
+ANNOUNCEMENTS = [
+    {
+        "date": "2024-03-15",
+        "title": "New Model Release",
+        "content": "Introducing our latest data enrichment model for enhanced entity resolution."
+    },
+    {
+        "date": "2024-02-28",
+        "title": "Dataset Publication",
+        "content": "Released a new benchmark dataset for entity matching evaluation."
+    }
+]
+
+# Public Models
+PUBLIC_MODELS = [
+    {
+        "name": "entity-matcher-v1",
+        "description": "High-performance entity matching model",
+        "link": "https://huggingface.co/Narrative-IO/entity-matcher-v1"
+    },
+    {
+        "name": "data-enrichment-v2",
+        "description": "Advanced data enrichment pipeline",
+        "link": "https://huggingface.co/Narrative-IO/data-enrichment-v2"
+    }
+]
+
+# Public Datasets
+PUBLIC_DATASETS = [
+    {
+        "name": "entity-matching-benchmark",
+        "description": "Large-scale entity matching benchmark dataset",
+        "link": "https://huggingface.co/datasets/Narrative-IO/entity-matching-benchmark"
+    },
+    {
+        "name": "data-quality-samples",
+        "description": "Sample datasets for data quality assessment",
+        "link": "https://huggingface.co/datasets/Narrative-IO/data-quality-samples"
+    }
+]
+
+# Demo configurations
+DEMOS = [
+    {
+        "title": "Entity Matching Demo",
+        "description": "Try our entity matching model with your own data",
+        "function": lambda x, y: f"Similarity score: {0.85}"  # Placeholder function
+    },
+    {
+        "title": "Data Quality Assessment",
+        "description": "Check your data quality metrics",
+        "function": lambda x: {"completeness": 0.95, "accuracy": 0.92}  # Placeholder function
+    }
+]
+
+# Custom CSS for styling
 custom_css = """
-.org-card {
-    border-radius: 15px;
+.container {
+    gap: 1rem;
+}
+.card {
+    border-radius: 10px;
     padding: 20px;
     background: white;
     box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    margin-bottom: 1rem;
+}
+.main-card {
+    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
 }
-.org-title {
-    font-size: 24px;
+.title {
+    font-size: 20px;
     font-weight: bold;
-    margin-bottom: 15px;
-    color: var(--theme-color);
+    margin-bottom: 10px;
+    color: #2d3748;
 }
-.org-description {
+.subtitle {
     font-size: 16px;
-    line-height: 1.6;
-    color: #333;
+    color: #4a5568;
+    margin-bottom: 15px;
+}
+.news-item {
+    padding: 10px 0;
+    border-bottom: 1px solid #e2e8f0;
+}
+.news-date {
+    font-size: 14px;
+    color: #718096;
+}
+.model-item, .dataset-item {
+    padding: 10px;
+    margin: 5px 0;
+    background: #f7fafc;
+    border-radius: 5px;
 }
 """
 
-def create_organization_card():
-    """
-    Creates and returns the organization card interface
-    """
+def format_date(date_str):
+    date = datetime.strptime(date_str, "%Y-%m-%d")
+    return date.strftime("%B %d, %Y")
+
+def create_organization_page():
+    """Creates the organization page with multiple cards and demos"""
     with gr.Blocks(css=custom_css) as interface:
-        with gr.Column(elem_classes="org-card"):
-            if os.path.exists(LOGO_PATH):
-                gr.Image(value=LOGO_PATH, shape=(200, 200), show_label=False)
-            
-            gr.Markdown(f"<div class='org-title'>{ORG_NAME}</div>", show_label=False)
-            gr.Markdown(DESCRIPTION, elem_classes="org-description", show_label=False)
-            
-            with gr.Row():
-                gr.Button("Visit Website", link="https://your-website.com")
-                gr.Button("GitHub", link="https://github.com/your-organization")
-                gr.Button("Twitter", link="https://twitter.com/your-handle")
+        with gr.Row(elem_classes="container"):
+            # Left section (2/3 width)
+            with gr.Column(scale=2):
+                # Main organization card
+                with gr.Column(elem_classes="card main-card"):
+                    gr.Markdown(f"# {ORG_NAME}")
+                    gr.Markdown(DESCRIPTION)
+                    with gr.Row():
+                        gr.Button("Website", link="https://narrative.io")
+                        gr.Button("GitHub", link="https://github.com/narrative-io")
+                        gr.Button("Twitter", link="https://twitter.com/narrative_io")
+                
+                # News and Announcements
+                with gr.Column(elem_classes="card"):
+                    gr.Markdown("## Latest News & Announcements")
+                    for announcement in ANNOUNCEMENTS:
+                        with gr.Row(elem_classes="news-item"):
+                            gr.Markdown(f"""
+                            **{announcement['title']}**  
+                            <span class="news-date">{format_date(announcement['date'])}</span>  
+                            {announcement['content']}
+                            """)
+                
+                # Interactive Demos
+                with gr.Column(elem_classes="card"):
+                    gr.Markdown("## Interactive Demos")
+                    for demo in DEMOS:
+                        with gr.Column(elem_classes="demo-item"):
+                            gr.Markdown(f"### {demo['title']}")
+                            gr.Markdown(demo['description'])
+                            if demo['title'] == "Entity Matching Demo":
+                                with gr.Row():
+                                    text1 = gr.Textbox(label="Entity 1")
+                                    text2 = gr.Textbox(label="Entity 2")
+                                    gr.Button("Compare").click(
+                                        demo['function'], 
+                                        inputs=[text1, text2], 
+                                        outputs=gr.Textbox(label="Result")
+                                    )
+                            elif demo['title'] == "Data Quality Assessment":
+                                file_input = gr.File(label="Upload your data")
+                                gr.Button("Analyze").click(
+                                    demo['function'],
+                                    inputs=[file_input],
+                                    outputs=gr.JSON(label="Quality Metrics")
+                                )
+
+            # Right section (1/3 width)
+            with gr.Column(scale=1):
+                # Public Models card
+                with gr.Column(elem_classes="card"):
+                    gr.Markdown("## Public Models")
+                    for model in PUBLIC_MODELS:
+                        with gr.Row(elem_classes="model-item"):
+                            gr.Markdown(f"""
+                            **{model['name']}**  
+                            {model['description']}  
+                            [View Model]({model['link']})
+                            """)
+                
+                # Public Datasets card
+                with gr.Column(elem_classes="card"):
+                    gr.Markdown("## Public Datasets")
+                    for dataset in PUBLIC_DATASETS:
+                        with gr.Row(elem_classes="dataset-item"):
+                            gr.Markdown(f"""
+                            **{dataset['name']}**  
+                            {dataset['description']}  
+                            [View Dataset]({dataset['link']})
+                            """)
 
     return interface
 
 # Create and launch the interface
-demo = create_organization_card()
+demo = create_organization_page()
 
 # Launch the app
 if __name__ == "__main__":