dza

app.py

@@ -41,22 +41,38 @@ def display_models(developer=None, use_case=None, year_range=None):
         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
-    models = calculate_time_difference(models)  # Calculate time differences
+    models = sorted(models, key=lambda x: x['dateOfRelease'], reverse=True)  # Sort by release date
+    
+    # Calculate time differences before using them
+    models = calculate_time_difference(models)  # Ensure time differences are calculated here
 
     output = "<div style='display: flex; flex-direction: column; align-items: flex-start; gap: 20px;'>"
-    for model in models:
+    for i, model in enumerate(models):
         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);'>"
+        
+        if i < len(models) - 1:  # To show time difference text only between cards, not after the last one
+            # Safely access the time difference and display it
+            time_diff = model.get('time_difference', None)
+            if time_diff is not None:
+                time_diff_text = f"<div style='color: #ccc; font-style: italic;'>"
+                time_diff_text += f"{time_diff} days between releases</div>"
+                output += time_diff_text
+        
+        # Add the model card with the time gap applied between models
+        # output += f"<div class='ai-card' style='margin-top: {time_gap}px;'>"
+        output += f"<div class='ai-card'>"
         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
 def add_model(name, description, dateOfRelease, developer, use_case, impact):
     models = load_models()
@@ -87,6 +103,10 @@ def edit_model(index, name, description, dateOfRelease, developer, use_case, imp
     save_models(models)
     return "Model updated successfully!", display_models()
 
+# Get the current month
+def get_current_month():
+    return datetime.now().strftime("%B %Y")
+
 # Gradio interface
 with gr.Blocks(css="""
     body {
@@ -116,8 +136,36 @@ with gr.Blocks(css="""
         color: white;  /* White text */
         border: 1px solid #555;  /* Lighter border */
     }
+
+    /* Styling for the AI cards */
+    .ai-card {
+        background-color: #2b2b2b;  /* Dark background for cards */
+        color: white;  /* White text on cards */
+        border-radius: 10px;
+        padding: 15px;
+        margin: 10px 0;
+        border: 1px solid #444;  /* Lighter border for card separation */
+        box-shadow: 0px 2px 8px rgba(0, 0, 0, 0.5);  /* Shadow effect */
+    }
+
+    .ai-card h3 {
+        color: #2d89ef;  /* Blue color for card titles */
+    }
+
+    .ai-card p {
+        color: #ccc;  /* Lighter text color for card description */
+    }
+
+    .ai-card strong {
+        color: #bbb;  /* Lighter color for strong text */
+    }
+
 """) as app:
     gr.Markdown("# AI Timeline\n\nVisualize the development of AI models through an interactive timeline.")
+    current_month = get_current_month()  # Get the current month
+
+    # Display current month in the interface
+    gr.Markdown(f"## Current Month: {current_month}")
 
     with gr.Tab("View Timeline"):
         with gr.Row():

models.json

@@ -134,13 +134,6 @@
         "developer": "Google AI",
         "use_case": "Assisting developers with code generation from diverse inputs.",
         "impact": "Improved coding efficiency by leveraging multimodal AI capabilities."
-    },{
-        "name": "GPT-4",
-        "description": "A large language model developed by OpenAI, capable of understanding and generating human-like text.",
-        "dateOfRelease": "2023-03-14",
-        "developer": "OpenAI",
-        "use_case": "Natural language understanding and generation",
-        "impact": "Advanced the capabilities of AI in understanding and generating human language."
     },
     {
         "name": "DALL·E 2",
@@ -150,14 +143,6 @@
         "use_case": "Text-to-image generation",
         "impact": "Enabled the creation of detailed images from textual prompts, bridging language and visual art."
     },
-    {
-        "name": "Stable Diffusion",
-        "description": "An open-source text-to-image model that generates detailed images based on textual input.",
-        "dateOfRelease": "2022-08-22",
-        "developer": "Stability AI",
-        "use_case": "Text-to-image generation",
-        "impact": "Provided accessible tools for image generation, fostering innovation in digital art and design."
-    },
     {
         "name": "Gemini 1.0 Ultra",
         "description": "A multimodal AI model capable of handling text, images, audio, video, and code.",