Add Civitai metadata fetching functionality for checkpoints

- Implement fetchCivitai API method to retrieve metadata from Civitai.
- Enhance CheckpointsControls to include fetch from Civitai functionality.
- Update PageControls to register fetch from Civitai event listener for both LoRAs and Checkpoints.

static/js/api/checkpointApi.js

@@ -249,4 +249,82 @@ async function _uploadPreview(filePath, file) {
         console.error('Error updating preview:', error);
         showToast(`Failed to update preview: ${error.message}`, 'error');
     }
+}
+
+// Fetch metadata from Civitai for checkpoints
+export async function fetchCivitai() {
+    let ws = null;
+    
+    await state.loadingManager.showWithProgress(async (loading) => {
+        try {
+            const wsProtocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://';
+            const ws = new WebSocket(`${wsProtocol}${window.location.host}/ws/fetch-progress`);
+            
+            const operationComplete = new Promise((resolve, reject) => {
+                ws.onmessage = (event) => {
+                    const data = JSON.parse(event.data);
+                    
+                    switch(data.status) {
+                        case 'started':
+                            loading.setStatus('Starting metadata fetch...');
+                            break;
+                            
+                        case 'processing':
+                            const percent = ((data.processed / data.total) * 100).toFixed(1);
+                            loading.setProgress(percent);
+                            loading.setStatus(
+                                `Processing (${data.processed}/${data.total}) ${data.current_name}`
+                            );
+                            break;
+                            
+                        case 'completed':
+                            loading.setProgress(100);
+                            loading.setStatus(
+                                `Completed: Updated ${data.success} of ${data.processed} checkpoints`
+                            );
+                            resolve();
+                            break;
+                            
+                        case 'error':
+                            reject(new Error(data.error));
+                            break;
+                    }
+                };
+                
+                ws.onerror = (error) => {
+                    reject(new Error('WebSocket error: ' + error.message));
+                };
+            });
+            
+            await new Promise((resolve, reject) => {
+                ws.onopen = resolve;
+                ws.onerror = reject;
+            });
+            
+            const response = await fetch('/api/checkpoints/fetch-all-civitai', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/json' },
+                body: JSON.stringify({ model_type: 'checkpoint' }) // Specify we're fetching checkpoint metadata
+            });
+            
+            if (!response.ok) {
+                throw new Error('Failed to fetch metadata');
+            }
+            
+            await operationComplete;
+            
+            await resetAndReload();
+            
+        } catch (error) {
+            console.error('Error fetching metadata:', error);
+            showToast('Failed to fetch metadata: ' + error.message, 'error');
+        } finally {
+            if (ws) {
+                ws.close();
+            }
+        }
+    }, {
+        initialMessage: 'Connecting...',
+        completionMessage: 'Metadata update complete'
+    });
 }

static/js/components/controls/CheckpointsControls.js

@@ -1,6 +1,6 @@
 // CheckpointsControls.js - Specific implementation for the Checkpoints page
 import { PageControls } from './PageControls.js';
-import { loadMoreCheckpoints, resetAndReload, refreshCheckpoints } from '../../api/checkpointApi.js';
+import { loadMoreCheckpoints, resetAndReload, refreshCheckpoints, fetchCivitai } from '../../api/checkpointApi.js';
 import { showToast } from '../../utils/uiHelpers.js';
 
 /**
@@ -33,6 +33,11 @@ export class CheckpointsControls extends PageControls {
                 return await refreshCheckpoints();
             },
             
+            // Add fetch from Civitai functionality for checkpoints
+            fetchFromCivitai: async () => {
+                return await fetchCivitai();
+            },
+            
             // No clearCustomFilter implementation is needed for checkpoints
             // as custom filters are currently only used for LoRAs
             clearCustomFilter: async () => {

static/js/components/controls/PageControls.js

@@ -97,20 +97,20 @@ export class PageControls {
      * Initialize page-specific event listeners
      */
     initPageSpecificListeners() {
+        // Fetch from Civitai button - available for both loras and checkpoints
+        const fetchButton = document.querySelector('[data-action="fetch"]');
+        if (fetchButton) {
+            fetchButton.addEventListener('click', () => this.fetchFromCivitai());
+        }
+        
         if (this.pageType === 'loras') {
-            // Fetch from Civitai button
-            const fetchButton = document.querySelector('[data-action="fetch"]');
-            if (fetchButton) {
-                fetchButton.addEventListener('click', () => this.fetchFromCivitai());
-            }
-            
-            // Download button
+            // Download button - LoRAs only
             const downloadButton = document.querySelector('[data-action="download"]');
             if (downloadButton) {
                 downloadButton.addEventListener('click', () => this.showDownloadModal());
             }
             
-            // Bulk operations button
+            // Bulk operations button - LoRAs only
             const bulkButton = document.querySelector('[data-action="bulk"]');
             if (bulkButton) {
                 bulkButton.addEventListener('click', () => this.toggleBulkMode());
@@ -332,11 +332,11 @@ export class PageControls {
     }
     
     /**
-     * Fetch metadata from Civitai (LoRAs only)
+     * Fetch metadata from Civitai (available for both LoRAs and Checkpoints)
      */
     async fetchFromCivitai() {
-        if (this.pageType !== 'loras' || !this.api) {
-            console.error('Fetch from Civitai is only available for LoRAs');
+        if (!this.api) {
+            console.error('API methods not registered');
             return;
         }