timeline difference previous release don't work

app.py

@@ -2,218 +2,342 @@ import gradio as gr
 import json
 import os
 from datetime import datetime
+from typing import Dict, List, Optional, Union
+from dataclasses import dataclass
+from pathlib import Path
 
-# File to store model data
-MODEL_FILE = "models.json"
-
-# Load existing data or create a new file if it doesn't exist
-def load_models():
-    if os.path.exists(MODEL_FILE):
-        with open(MODEL_FILE, "r") as f:
-            return json.load(f)
-    return []
-
-# Save data to the JSON file
-def save_models(models):
-    with open(MODEL_FILE, "w") as f:
-        json.dump(models, f, indent=4)
-
-# 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'], 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 i, model in enumerate(models):
-        time_gap = model.get('time_difference', 0) * 2  # Scale time gap for visualization
+# Type definitions and data structures
+@dataclass
+class AIModel:
+    name: str
+    description: str
+    date_of_release: str
+    developer: str
+    use_case: str
+    impact: str
+    time_difference: Optional[int] = None
+
+    def to_dict(self) -> Dict:
+        return {
+            "name": self.name,
+            "description": self.description,
+            "dateOfRelease": self.date_of_release,
+            "developer": self.developer,
+            "use_case": self.use_case,
+            "impact": self.impact,
+            "time_difference": self.time_difference
+        }
+
+    @classmethod
+    def from_dict(cls, data: Dict) -> 'AIModel':
+        return cls(
+            name=data.get('name', ''),
+            description=data.get('description', ''),
+            date_of_release=data.get('dateOfRelease', ''),
+            developer=data.get('developer', ''),
+            use_case=data.get('use_case', ''),
+            impact=data.get('impact', ''),
+            time_difference=data.get('time_difference')
+        )
+
+class ModelRepository:
+    def __init__(self, file_path: str = "models.json"):
+        self.file_path = Path(file_path)
+        self.models: List[AIModel] = []
+        self.load_models()
+
+    def load_models(self) -> None:
+        if self.file_path.exists():
+            try:
+                with open(self.file_path, "r") as f:
+                    data = json.load(f)
+                self.models = [AIModel.from_dict(model_data) for model_data in data]
+            except json.JSONDecodeError:
+                print(f"Error reading {self.file_path}. Starting with empty model list.")
+                self.models = []
+        else:
+            self.models = []
+
+    def save_models(self) -> None:
+        with open(self.file_path, "w") as f:
+            json.dump([model.to_dict() for model in self.models], f, indent=4)
+
+    def add_model(self, model: AIModel) -> None:
+        self.models.append(model)
+        self.calculate_time_differences()
+        self.save_models()
+
+    def update_model(self, index: int, model: AIModel) -> bool:
+        if 0 <= index < len(self.models):
+            self.models[index] = model
+            self.calculate_time_differences()
+            self.save_models()
+            return True
+        return False
+
+    def get_filtered_models(
+        self,
+        developer: Optional[str] = None,
+        use_case: Optional[str] = None
+    ) -> List[AIModel]:
+        filtered_models = self.models.copy()
+
+        if developer and developer != "All":
+            filtered_models = [m for m in filtered_models if m.developer == developer]
+        
+        if use_case and use_case != "All":
+            filtered_models = [m for m in filtered_models if m.use_case == use_case]
+
+        return sorted(filtered_models, key=lambda x: x.date_of_release, reverse=True)
+
+    def calculate_time_differences(self) -> None:
+        # Sort by date in ascending order
+        sorted_models = sorted(self.models, key=lambda x: x.date_of_release)
         
-        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
+        # Reset all time differences
+        for model in sorted_models:
+            model.time_difference = None
         
-        # 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>"
+        # Calculate time differences starting from the most recent
+        for i in range(len(sorted_models)-1, 0, -1):
+            curr_date = datetime.strptime(sorted_models[i].date_of_release, "%Y-%m-%d")
+            prev_date = datetime.strptime(sorted_models[i-1].date_of_release, "%Y-%m-%d")
+            sorted_models[i].time_difference = (curr_date - prev_date).days
 
+    def get_unique_developers(self) -> List[str]:
+        return sorted(list(set(model.developer for model in self.models)))
 
-    output += "</div>"
-    return output
-
-
-# Function to add a new model
-def add_model(name, description, dateOfRelease, developer, use_case, impact):
-    models = load_models()
-    models.append({
-        "name": name,
-        "description": description,
-        "dateOfRelease": dateOfRelease,
-        "developer": developer,
-        "use_case": use_case,
-        "impact": impact
-    })
-    save_models(models)
-    return "Model added successfully!", display_models()
-
-# Function to edit an existing model
-def edit_model(index, name, description, dateOfRelease, developer, use_case, impact):
-    models = load_models()
-    if index < 1 or index > len(models):
-        return "Invalid index. Please provide a valid model number.", display_models()
-    models[index - 1] = {
-        "name": name,
-        "description": description,
-        "dateOfRelease": dateOfRelease,
-        "developer": developer,
-        "use_case": use_case,
-        "impact": impact
-    }
-    save_models(models)
-    return "Model updated successfully!", display_models()
+    def get_unique_use_cases(self) -> List[str]:
+        return sorted(list(set(model.use_case for model in self.models)))
+
+class UIRenderer:
+    @staticmethod
+    def render_model_card(model: AIModel) -> str:
+        return f"""
+        <div class='ai-card'>
+            <h3>{model.name} ({model.date_of_release})</h3>
+            <p><strong>Description:</strong> {model.description}</p>
+            <p><strong>Developer:</strong> {model.developer}</p>
+            <p><strong>Use Case:</strong> {model.use_case}</p>
+            <p><strong>Impact:</strong> {model.impact}</p>
+        </div>
+        """
+
+    @staticmethod
+    def render_time_difference(days: int) -> str:
+        if days <= 0:
+            return ""
+        gap_height = days * 2  # Scale the gap based on days
+        return f"""
+        <div class='time-difference' style='margin: {gap_height}px 0;'>
+            <div class='time-line'></div>
+            <div class='time-text'>{days} days between releases</div>
+        </div>
+        """
+
+    @staticmethod
+    def render_timeline(models: List[AIModel]) -> str:
+        output = "<div class='timeline-container'>"
+        
+        for model in models:  # models are already sorted in reverse order
+            if model.time_difference:  # Check if there's a time difference
+                output += UIRenderer.render_time_difference(model.time_difference)
+            output += UIRenderer.render_model_card(model)
 
-# Get the current month
-def get_current_month():
-    return datetime.now().strftime("%B %Y")
+        output += "</div>"
+        return output
 
-# Gradio interface
-with gr.Blocks(css="""
+def create_ui(repository: ModelRepository) -> gr.Blocks:
+    css = """
     body {
         font-family: 'Arial', sans-serif;
-        background-color: #121212;  /* Dark background color */
-        color: white;  /* White text color for better contrast */
+        background-color: #121212;
+        color: white;
         margin: 0;
         padding: 0;
     }
+    .timeline-container {
+        display: flex;
+        flex-direction: column;
+        gap: 1.5rem;
+        padding: 1rem;
+    }
+    .ai-card {
+        background: linear-gradient(145deg, #2b2b2b, #333);
+        border-radius: 1rem;
+        padding: 1.5rem;
+        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+        border: 1px solid rgba(255, 255, 255, 0.1);
+        transition: transform 0.2s, box-shadow 0.2s;
+    }
+    .ai-card:hover {
+        transform: translateY(-2px);
+        box-shadow: 0 6px 8px rgba(0, 0, 0, 0.2);
+    }
+    .ai-card h3 {
+        color: #60a5fa;
+        margin: 0 0 1rem 0;
+        font-size: 1.25rem;
+    }
+    .ai-card p {
+        color: #e5e7eb;
+        margin: 0.5rem 0;
+        line-height: 1.5;
+    }
+    .ai-card strong {
+        color: #93c5fd;
+    }
     .gradio-container {
         width: 80%;
         margin: auto;
         padding: 20px;
     }
     .gradio-markdown {
-        color: white;  /* Ensure markdown text is white */
+        color: white;
     }
     .gr-button {
-        background-color: #333;  /* Dark button background */
-        color: white;  /* White button text */
+        background-color: #333;
+        color: white;
     }
     .gr-button:hover {
-        background-color: #555;  /* Lighter shade on hover */
+        background-color: #555;
     }
     .gr-dropdown, .gr-textbox {
-        background-color: #333;  /* Dark input fields */
-        color: white;  /* White text */
-        border: 1px solid #555;  /* Lighter border */
+        background-color: #333;
+        color: white;
+        border: 1px solid #555;
     }
-
-    /* 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 */
+    .time-difference {
+        text-align: center;
+        color: #9ca3af;
+        font-style: italic;
+        position: relative;
+        padding: 20px 0;
     }
-
-    .ai-card h3 {
-        color: #2d89ef;  /* Blue color for card titles */
+    .time-line {
+        position: absolute;
+        left: 50%;
+        top: 0;
+        bottom: 0;
+        width: 2px;
+        background: linear-gradient(to bottom, transparent, #555, transparent);
     }
-
-    .ai-card p {
-        color: #ccc;  /* Lighter text color for card description */
+    .time-text {
+        background-color: #1a1a1a;
+        padding: 5px 15px;
+        border-radius: 15px;
+        display: inline-block;
+        position: relative;
+        z-index: 1;
     }
+    """
 
-    .ai-card strong {
-        color: #bbb;  /* Lighter color for strong text */
-    }
+    with gr.Blocks(css=css) as app:
+        gr.Markdown("# AI Timeline\n\nVisualize the development of AI models through an interactive timeline.")
+        
+        with gr.Tab("View Timeline"):
+            with gr.Row():
+                developer_filter = gr.Dropdown(
+                    label="Filter by Developer",
+                    choices=["All"] + repository.get_unique_developers(),
+                    value="All"
+                )
+                use_case_filter = gr.Dropdown(
+                    label="Filter by Use Case",
+                    choices=["All"] + repository.get_unique_use_cases(),
+                    value="All"
+                )
+            
+            filter_button = gr.Button("Apply Filters", variant="primary")
+            timeline_output = gr.HTML()
 
-""") 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():
-            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():
-            name_input = gr.Textbox(label="Model Name", placeholder="Enter model name")
-            year_input = gr.Textbox(label="Publication Date", placeholder="Enter date of publication (YYYY-MM-DD)")
-        description_input = gr.Textbox(label="Description", placeholder="Enter a short description")
-        developer_input = gr.Textbox(label="Developer", placeholder="Enter the developer or organization")
-        use_case_input = gr.Textbox(label="Use Case", placeholder="Enter the primary use case")
-        impact_input = gr.Textbox(label="Impact", placeholder="Enter the model's impact")
-        add_button = gr.Button("Add Model")
-        add_output = gr.Markdown()
-        add_button.click(
-            add_model,
-            inputs=[name_input, description_input, year_input, developer_input, use_case_input, impact_input],
-            outputs=[add_output, view_output]
-        )
+            def update_timeline(developer: str, use_case: str) -> str:
+                filtered_models = repository.get_filtered_models(developer, use_case)
+                return UIRenderer.render_timeline(filtered_models)
 
-    with gr.Tab("Edit Model"):
-        edit_index = gr.Number(label="Model Number", precision=0)
-        with gr.Row():
-            edit_name = gr.Textbox(label="New Model Name", placeholder="Enter new model name")
-            edit_year = gr.Textbox(label="New Publication Date", placeholder="Enter new date of publication (YYYY-MM-DD)")
-        edit_description = gr.Textbox(label="New Description", placeholder="Enter new description")
-        edit_developer = gr.Textbox(label="New Developer", placeholder="Enter new developer or organization")
-        edit_use_case = gr.Textbox(label="New Use Case", placeholder="Enter new primary use case")
-        edit_impact = gr.Textbox(label="New Impact", placeholder="Enter new impact")
-        edit_button = gr.Button("Edit Model")
-        edit_output = gr.Markdown()
-        edit_button.click(
-            edit_model,
-            inputs=[edit_index, edit_name, edit_description, edit_year, edit_developer, edit_use_case, edit_impact],
-            outputs=[edit_output, view_output]
-        )
+            filter_button.click(
+                update_timeline,
+                inputs=[developer_filter, use_case_filter],
+                outputs=[timeline_output]
+            )
+
+        with gr.Tab("Add Model"):
+            with gr.Row():
+                name_input = gr.Textbox(label="Model Name", placeholder="Enter model name")
+                date_input = gr.Textbox(label="Release Date (YYYY-MM-DD)", placeholder="Enter date of release")
+            description_input = gr.Textbox(label="Description", placeholder="Enter a short description", lines=3)
+            with gr.Row():
+                developer_input = gr.Textbox(label="Developer", placeholder="Enter the developer or organization")
+                use_case_input = gr.Textbox(label="Use Case", placeholder="Enter the primary use case")
+            impact_input = gr.Textbox(label="Impact", placeholder="Enter the model's impact", lines=2)
+            
+            add_button = gr.Button("Add Model", variant="primary")
+            add_output = gr.Markdown()
+
+            def add_new_model(name, description, date, developer, use_case, impact):
+                try:
+                    datetime.strptime(date, "%Y-%m-%d")
+                    model = AIModel(
+                        name=name,
+                        description=description,
+                        date_of_release=date,
+                        developer=developer,
+                        use_case=use_case,
+                        impact=impact
+                    )
+                    repository.add_model(model)
+                    return "Model added successfully!", UIRenderer.render_timeline(repository.get_filtered_models())
+                except ValueError:
+                    return "Error: Invalid date format. Please use YYYY-MM-DD", ""
+
+            add_button.click(
+                add_new_model,
+                inputs=[name_input, description_input, date_input,
+                        developer_input, use_case_input, impact_input],
+                outputs=[add_output, timeline_output]
+            )
+
+        with gr.Tab("Edit Model"):
+            edit_index = gr.Number(label="Model Number", precision=0)
+            with gr.Row():
+                edit_name = gr.Textbox(label="New Model Name", placeholder="Enter new model name")
+                edit_date = gr.Textbox(label="New Release Date", placeholder="Enter new date (YYYY-MM-DD)")
+            edit_description = gr.Textbox(label="New Description", placeholder="Enter new description", lines=3)
+            with gr.Row():
+                edit_developer = gr.Textbox(label="New Developer", placeholder="Enter new developer")
+                edit_use_case = gr.Textbox(label="New Use Case", placeholder="Enter new use case")
+            edit_impact = gr.Textbox(label="New Impact", placeholder="Enter new impact", lines=2)
+            
+            edit_button = gr.Button("Edit Model", variant="primary")
+            edit_output = gr.Markdown()
+
+            def edit_existing_model(index, name, description, date, developer, use_case, impact):
+                try:
+                    datetime.strptime(date, "%Y-%m-%d")
+                    model = AIModel(
+                        name=name,
+                        description=description,
+                        date_of_release=date,
+                        developer=developer,
+                        use_case=use_case,
+                        impact=impact
+                    )
+                    if repository.update_model(int(index) - 1, model):
+                        return "Model updated successfully!", UIRenderer.render_timeline(repository.get_filtered_models())
+                    return "Error: Invalid model number", ""
+                except ValueError:
+                    return "Error: Invalid date format. Please use YYYY-MM-DD", ""
+
+            edit_button.click(
+                edit_existing_model,
+                inputs=[edit_index, edit_name, edit_description, edit_date,
+                       edit_developer, edit_use_case, edit_impact],
+                outputs=[edit_output, timeline_output]
+            )
+
+    return app
 
-# Run the app
-app.launch()
+if __name__ == "__main__":
+    repository = ModelRepository()
+    app = create_ui(repository)
+    app.launch()