push changes

app.py

@@ -487,6 +487,13 @@ class TransformersTimelineParser:
             with open(file_path, "r", encoding="utf-8") as f:
                 content = f.read()
 
+            # Extract model name from file path (always available)
+            model_name = os.path.basename(file_path).replace(".md", "")
+
+            # Initialize default values
+            release_date = None
+            transformers_date = None
+
             # Focus on the end of the sentence - the Transformers addition date is what matters most
             pattern = (
                 r"\*This model was released on (.+?) and added to Hugging Face Transformers on (\d{4}-\d{2}-\d{2})\.\*"
@@ -494,7 +501,6 @@ class TransformersTimelineParser:
             match = re.search(pattern, content)
 
             if match:
-                model_name = os.path.basename(file_path).replace(".md", "")
                 release_date = match.group(1).strip()
                 transformers_date = match.group(2)
 
@@ -514,6 +520,12 @@ class TransformersTimelineParser:
                     except ValueError:
                         # Keep the original value even if it's not a valid date
                         pass
+            else:
+                # No release date pattern found - warn and skip (ignore auto.md intentionally)
+                base = os.path.basename(file_path)
+                if base != "auto.md":
+                    print(f"⚠️  Warning: No release/addition dates found in {file_path}; skipping.")
+                return None
 
             # Get modality information
             modality = self.get_model_modality(model_name)
@@ -1115,9 +1127,9 @@ def create_timeline_template():
 
         .modality-checkbox input[type="checkbox"] {
             appearance: none;
-            width: 14px;
-            height: 14px;
-            border: 2px solid currentColor;
+            width: 16px;
+            height: 16px;
+            border: 2px solid var(--modality-color, #8B5CF6);
             border-radius: 4px;
             position: relative;
             margin: 0;
@@ -1127,28 +1139,22 @@ def create_timeline_template():
         }
 
         .modality-checkbox input[type="checkbox"]:checked {
-            background: currentColor;
-            border-color: currentColor;
+            background: var(--modality-color, #8B5CF6);
+            border-color: var(--modality-color, #8B5CF6);
         }
 
         .modality-checkbox input[type="checkbox"]:checked::after {
             content: '✓';
             position: absolute;
-            top: 1px;
-            left: 3px;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
             color: white;
-            font-size: 12px;
+            font-size: 10px;
             font-weight: bold;
             line-height: 1;
         }
 
-        .modality-color-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            flex-shrink: 0;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-        }
 
         .modality-checkbox label {
             cursor: pointer;
@@ -1163,12 +1169,13 @@ def create_timeline_template():
             align-items: center;
             gap: 0.3rem;
             padding: 0.3rem 0.5rem;
-            border-radius: 8px;
-            font-size: 0.65rem;
-            cursor: pointer;
             background: rgba(255, 255, 255, 0.9);
             border: 1px solid rgba(0, 0, 0, 0.1);
+            border-radius: 8px;
+            cursor: pointer;
             transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+            font-size: 0.65rem;
+            font-weight: 500;
             position: relative;
             overflow: hidden;
         }
@@ -1183,7 +1190,6 @@ def create_timeline_template():
             background: currentColor;
             opacity: 0;
             transition: opacity 0.3s ease;
-            z-index: -1;
         }
 
         .task-checkbox:hover {
@@ -1197,19 +1203,20 @@ def create_timeline_template():
         }
 
         .task-checkbox.checked {
+            background: rgba(255, 255, 255, 0.95);
             border-color: currentColor;
             box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
         }
 
         .task-checkbox.checked::before {
-            opacity: 0.1;
+            opacity: 0.08;
         }
 
         .task-checkbox input[type="checkbox"] {
             appearance: none;
-            width: 14px;
-            height: 14px;
-            border: 2px solid currentColor;
+            width: 16px;
+            height: 16px;
+            border: 2px solid var(--task-color, #6366f1);
             border-radius: 4px;
             background: white;
             cursor: pointer;
@@ -1218,8 +1225,8 @@ def create_timeline_template():
         }
 
         .task-checkbox input[type="checkbox"]:checked {
-            background: currentColor;
-            border-color: currentColor;
+            background: var(--task-color, #6366f1);
+            border-color: var(--task-color, #6366f1);
         }
 
         .task-checkbox input[type="checkbox"]:checked::after {
@@ -1229,16 +1236,11 @@ def create_timeline_template():
             left: 50%;
             transform: translate(-50%, -50%);
             color: white;
-            font-size: 12px;
+            font-size: 10px;
             font-weight: bold;
+            line-height: 1;
         }
 
-        .task-color-dot {
-            width: 8px;
-            height: 8px;
-            border-radius: 50%;
-            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
-        }
 
         .task-checkbox label {
             cursor: pointer;
@@ -1249,7 +1251,7 @@ def create_timeline_template():
 
         .modality-checkbox input[type="checkbox"]:not(:checked) {
             background: white;
-            border-color: currentColor;
+            border-color: var(--modality-color, #8B5CF6);
         }
 
         .btn {
@@ -1954,8 +1956,8 @@ def create_timeline_template():
     </div>
 
     <div class="controls-wrapper">
-        <div class="controls" id="filtersPanel">
-            <button id="toggleFilters" class="controls-toggle" type="button" aria-label="Toggle filters" onclick="toggleFilters()">▾</button>
+        <div class="controls collapsed" id="filtersPanel">
+            <button id="toggleFilters" class="controls-toggle" type="button" aria-label="Toggle filters" onclick="toggleFilters()">▸</button>
         <div class="input-group modality-group">
             <label>Modalities</label>
             <div class="modality-filters" id="modalityFilters">
@@ -1963,10 +1965,10 @@ def create_timeline_template():
             </div>
             <div class="modality-buttons">
                 <button class="btn btn-primary btn-small" onclick="checkAllModalities()">
-                    ✅ Check All
+                    Check All
                 </button>
                 <button class="btn btn-secondary btn-small" onclick="clearAllModalities()">
-                    ❌ Clear All
+                    Clear All
                 </button>
             </div>
         </div>
@@ -1977,10 +1979,10 @@ def create_timeline_template():
             </div>
             <div class="task-buttons">
                 <button class="btn btn-primary btn-small" onclick="checkAllTasks()">
-                    ✅ Check All
+                    Check All
                 </button>
                 <button class="btn btn-secondary btn-small" onclick="clearAllTasks()">
-                    ❌ Clear All
+                    Clear All
                 </button>
             </div>
         </div>
@@ -2771,10 +2773,12 @@ def create_timeline_template():
                     const checkboxContainer = document.createElement('div');
                     checkboxContainer.className = 'task-checkbox';
                     checkboxContainer.style.color = task.color;
+                    checkboxContainer.style.setProperty('--task-color', task.color);
 
                     const checkbox = document.createElement('input');
                     checkbox.type = 'checkbox';
                     checkbox.value = task.key;
+                    checkbox.id = `task-${task.key}`;
                     checkbox.checked = false; // Start with all tasks unchecked
                     checkbox.addEventListener('click', (e) => {
                         e.stopPropagation();
@@ -2787,27 +2791,23 @@ def create_timeline_template():
                         loadTimeline();
                     });
 
-                    const colorDot = document.createElement('div');
-                    colorDot.className = 'task-color-dot';
-                    colorDot.style.backgroundColor = task.color;
-
                     const label = document.createElement('label');
+                    label.htmlFor = `task-${task.key}`;
                     label.textContent = task.name;
-                    label.addEventListener('click', (e) => {
-                        e.preventDefault();
-                        checkbox.checked = !checkbox.checked;
-                        if (checkbox.checked) {
-                            checkboxContainer.classList.add('checked');
-                        } else {
-                            checkboxContainer.classList.remove('checked');
+
+                    checkboxContainer.appendChild(checkbox);
+                    checkboxContainer.appendChild(label);
+
+                    // Add click handler with auto-refresh
+                    checkboxContainer.addEventListener('click', (e) => {
+                        if (e.target.type !== 'checkbox') {
+                            checkbox.checked = !checkbox.checked;
                         }
-                        // Auto-refresh timeline
+                        checkboxContainer.classList.toggle('checked', checkbox.checked);
+                        // Auto-refresh timeline when task filter changes
                         loadTimeline();
                     });
 
-                    checkboxContainer.appendChild(checkbox);
-                    checkboxContainer.appendChild(colorDot);
-                    checkboxContainer.appendChild(label);
                     taskFilters.appendChild(checkboxContainer);
                 });
 
@@ -2900,6 +2900,7 @@ def create_timeline_template():
                     const checkboxContainer = document.createElement('div');
                     checkboxContainer.className = 'modality-checkbox';
                     checkboxContainer.style.color = modality.color;
+                    checkboxContainer.style.setProperty('--modality-color', modality.color);
 
                     const checkbox = document.createElement('input');
                     checkbox.type = 'checkbox';
@@ -2907,16 +2908,11 @@ def create_timeline_template():
                     checkbox.id = `modality-${modality.key}`;
                     checkbox.checked = true; // All modalities selected by default
 
-                    const colorDot = document.createElement('div');
-                    colorDot.className = 'modality-color-dot';
-                    colorDot.style.backgroundColor = modality.color;
-
                     const label = document.createElement('label');
                     label.htmlFor = `modality-${modality.key}`;
                     label.textContent = modality.name;
 
                     checkboxContainer.appendChild(checkbox);
-                    checkboxContainer.appendChild(colorDot);
                     checkboxContainer.appendChild(label);
 
                     // Add click handler with auto-refresh