Improved UI

app.py

@@ -1,6 +1,7 @@
 import gradio as gr
 import json
 import os
+from datetime import datetime
 
 # File to store model data
 MODEL_FILE = "models.json"
@@ -17,21 +18,43 @@ def save_models(models):
     with open(MODEL_FILE, "w") as f:
         json.dump(models, f, indent=4)
 
-# Function to display all models
-def display_models():
+# Helper function to calculate time differences between releases
+def calculate_time_difference(models):
+    for i in range(1, len(models)):
+        prev_date = datetime.strptime(models[i - 1]['dateOfRelease'], "%Y-%m-%d")
+        curr_date = datetime.strptime(models[i]['dateOfRelease'], "%Y-%m-%d")
+        models[i]['time_difference'] = (curr_date - prev_date).days
+    return models
+
+# Function to display all models with optional filters
+def display_models(developer=None, use_case=None, year_range=None):
     models = load_models()
     if not models:
         return "No models have been added yet."
+
+    # Apply filters if provided
+    if developer:
+        models = [m for m in models if m.get('developer') == developer]
+    if use_case:
+        models = [m for m in models if m.get('use_case') == use_case]
+    if year_range:
+        start_year, end_year = year_range
+        models = [m for m in models if start_year <= int(m['dateOfRelease'][:4]) <= end_year]
+
     models = sorted(models, key=lambda x: x['dateOfRelease'])  # Sort by release date
-    output = ""  # Prepare HTML output for timeline
+    models = calculate_time_difference(models)  # Calculate time differences
+
+    output = "<div style='display: flex; flex-direction: column; align-items: flex-start; gap: 20px;'>"
     for model in models:
-        output += "<div style='border: 1px solid #ccc; border-radius: 10px; padding: 10px; margin: 10px;'>"
-        output += f"<h3>{model['name']} ({model['dateOfRelease']})</h3>"
+        time_gap = model.get('time_difference', 0) * 2  # Scale time gap for visualization
+        output += f"<div style='margin-top: {time_gap}px; border: 1px solid #ccc; border-radius: 10px; padding: 10px; width: 90%; background: linear-gradient(135deg, #f9f9f9, #e9e9e9); box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.1);'>"
+        output += f"<h3 style='color: #2d89ef;'>{model['name']} ({model['dateOfRelease']})</h3>"
         output += f"<p><strong>Description:</strong> {model['description']}</p>"
         output += f"<p><strong>Developer:</strong> {model.get('developer', 'Unknown')}</p>"
         output += f"<p><strong>Use Case:</strong> {model.get('use_case', 'General')}</p>"
         output += f"<p><strong>Impact:</strong> {model.get('impact', 'Not specified')}</p>"
         output += "</div>"
+    output += "</div>"
     return output
 
 # Function to add a new model
@@ -65,13 +88,35 @@ def edit_model(index, name, description, dateOfRelease, developer, use_case, imp
     return "Model updated successfully!", display_models()
 
 # Gradio interface
-with gr.Blocks() as app:
+with gr.Blocks(css="""
+    body {
+        font-family: 'Arial', sans-serif;
+        background-color: #f4f4f4;
+        margin: 0;
+        padding: 0;
+    }
+    .gradio-container {
+        width: 80%;
+        margin: auto;
+        padding: 20px;
+    }
+""") as app:
     gr.Markdown("# AI Timeline\n\nVisualize the development of AI models through an interactive timeline.")
 
     with gr.Tab("View Timeline"):
-        view_button = gr.Button("Refresh Timeline")
-        view_output = gr.HTML(display_models())
-        view_button.click(display_models, outputs=view_output)
+        with gr.Row():
+            developer_filter = gr.Dropdown(label="Filter by Developer", choices=["All"] + list(set([m['developer'] for m in load_models()])), value="All")
+            use_case_filter = gr.Dropdown(label="Filter by Use Case", choices=["All"] + list(set([m['use_case'] for m in load_models()])), value="All")
+            year_range_filter = gr.Slider(label="Filter by Year Range", minimum=2000, maximum=2025, value=(2000, 2025), step=1)
+        filter_button = gr.Button("Apply Filters")
+        view_output = gr.HTML()
+
+        def apply_filters(developer, use_case, year_range):
+            dev = None if developer == "All" else developer
+            use = None if use_case == "All" else use_case
+            return display_models(developer=dev, use_case=use, year_range=year_range)
+
+        filter_button.click(apply_filters, inputs=[developer_filter, use_case_filter, year_range_filter], outputs=view_output)
 
     with gr.Tab("Add Model"):
         with gr.Row():
@@ -107,4 +152,4 @@ with gr.Blocks() as app:
         )
 
 # Run the app
-app.launch()
+app.launch()