Check Huggingface api inference, its not reachable and nothing ids worlking

components/gallery-grid.js

@@ -158,15 +158,20 @@ class CustomGalleryGrid extends HTMLElement {
             </style>
             
             <div class="gallery-grid">
-                ${this.items.length === 0 ? `
+                    ${this.items.length === 0 ? `
                     <div class="loading-skeleton"></div>
                     <div class="loading-skeleton"></div>
                     <div class="loading-skeleton"></div>
                     <div class="loading-skeleton"></div>
                 ` : this.items.map(item => `
                     <div class="gallery-item" data-id="${item.id}">
-                        ${item.result.qualityLabel ? `<span class="resolution-badge">${item.result.qualityLabel}</span>` : ''}
-                        <img src="${item.result.url}" alt="${item.prompt}" loading="lazy">
+                        ${item.result.qualityLabel ? `
+                            <span class="resolution-badge ${item.isFallback ? 'bg-amber-500/20 text-amber-400' : ''}">
+                                ${item.result.qualityLabel}
+                                ${item.isFallback ? ' (Demo)' : ''}
+                            </span>
+                        ` : ''}
+<img src="${item.result.url}" alt="${item.prompt}" loading="lazy">
                         <div class="item-overlay">
                             <p class="item-prompt">${item.prompt}</p>
                             <div class="item-meta">

components/generation-modal.js

@@ -128,15 +128,25 @@ class CustomGenerationModal extends HTMLElement {
                 .progress-info {
                     text-align: center;
                 }
-                
                 .progress-text {
                     font-size: 1.5rem;
                     color: #e2e8f0;
                     font-weight: 600;
                     margin-bottom: 0.5rem;
+                    display: flex;
+                    align-items: center;
+                    gap: 0.5rem;
                 }
-                
-                .progress-subtext {
+
+                .fallback-badge {
+                    padding: 0.25rem 0.5rem;
+                    background: rgba(245, 158, 11, 0.2);
+                    border-radius: 6px;
+                    font-size: 0.75rem;
+                    color: #f59e0b;
+                    font-weight: 600;
+                }
+.progress-subtext {
                     color: #64748b;
                     font-size: 0.9375rem;
                 }
@@ -277,9 +287,12 @@ class CustomGenerationModal extends HTMLElement {
                                 <div class="neural-ring"></div>
                             </div>
                             <div class="progress-info">
-                                <div class="progress-text" id="progress-text">Initializing AI...</div>
-                                <div class="progress-subtext" id="progress-subtext">Preparing high-resolution pipeline</div>
-                                <div class="progress-bar">
+                                <div class="progress-text" id="progress-text">
+                                    <span id="progress-status">Initializing AI...</span>
+                                    <span id="fallback-badge" class="fallback-badge" style="display: none;">Fallback Mode</span>
+                                </div>
+                                <div class="progress-subtext" id="progress-subtext">Preparing pipeline</div>
+<div class="progress-bar">
                                     <div class="progress-fill" id="progress-fill"></div>
                                 </div>
                             </div>

script.js

@@ -1,8 +1,8 @@
 // VortexAI - Main Application Script
-
-// Hugging Face API Configuration
+// Hugging Face API Configuration with fallback
 const HF_CONFIG = {
     baseURL: 'https://api-inference.huggingface.co/models/',
+    fallbackMode: true, // Set to false when API is working
     models: {
         image: {
             'stable-diffusion-xl': 'stabilityai/stable-diffusion-xl-base-1.0',
@@ -13,7 +13,7 @@ const HF_CONFIG = {
             'sdxl-8k': 'stabilityai/stable-diffusion-xl-base-1.0',
             'esrgan': 'Real-ESRGAN'
         },
-video: {
+        video: {
             'modelscope-t2v': 'damo-vilab/text-to-video-ms-1.7b',
             'zeroscope': 'cerspense/zeroscope_v2_576w'
         },
@@ -26,9 +26,26 @@ video: {
     headers: (token) => ({
         'Authorization': `Bearer ${token}`,
         'Content-Type': 'application/json'
-    })
+    }),
+    
+    // Check API status
+    async checkStatus() {
+        try {
+            const response = await fetch(this.baseURL, {
+                method: 'HEAD',
+                headers: this.headers('')
+            });
+            if (response.status === 200 || response.status === 401) {
+                this.fallbackMode = false;
+                return true;
+            }
+        } catch (error) {
+            console.error('Hugging Face API unreachable:', error);
+            this.fallbackMode = true;
+            return false;
+        }
+    }
 };
-
 // Global State
 const state = {
     currentMode: 'image',
@@ -134,8 +151,7 @@ class NeuralNetwork {
         requestAnimationFrame(() => this.animate());
     }
 }
-
-// Generation Service
+// Generation Service with API fallback
 class GenerationService {
     static async generateImage(prompt, options = {}) {
         const modelId = HF_CONFIG.models.image[options.model || 'stable-diffusion-xl'];
@@ -149,42 +165,76 @@ class GenerationService {
         else if (pixels >= 8294400) qualityTier = 'ultra'; // 4K+
         else if (pixels >= 4194304) qualityTier = 'high'; // 2K+
         
-        const payload = {
-            inputs: prompt,
-            parameters: {
-                width: Math.min(targetWidth, 2048), // Base generation at max supported
-                height: Math.min(targetHeight, 2048),
-                num_inference_steps: options.steps || 100,
-                guidance_scale: options.guidance || 7.5,
-                seed: options.seed || Math.floor(Math.random() * 1000000),
-                upscale_factor: options.upscale || Math.ceil(targetWidth / 2048),
-                detail_enhancement: options.detailEnhancement || 75
-            }
-        };
+        // Check API status first
+        const apiAvailable = await HF_CONFIG.checkStatus();
+        
+        if (!apiAvailable || HF_CONFIG.fallbackMode) {
+            console.warn('Using fallback generation mode - API unavailable');
+            return this.fallbackGeneration(prompt, options, 'image');
+        }
 
         try {
-            // Progressive loading based on resolution
-            const baseDuration = qualityTier === 'maximum' ? 30000 : 
-                                qualityTier === 'ultra' ? 20000 : 
-                                qualityTier === 'high' ? 12000 : 8000;
-            await this.simulateProgress(baseDuration);
+            const payload = {
+                inputs: prompt,
+                parameters: {
+                    width: Math.min(targetWidth, 2048),
+                    height: Math.min(targetHeight, 2048),
+                    num_inference_steps: options.steps || 100,
+                    guidance_scale: options.guidance || 7.5,
+                    seed: options.seed || Math.floor(Math.random() * 1000000)
+                }
+            };
+
+            const response = await fetch(HF_CONFIG.baseURL + modelId, {
+                method: 'POST',
+                headers: HF_CONFIG.headers('YOUR_HF_TOKEN_HERE'),
+                body: JSON.stringify(payload)
+            });
+
+            if (!response.ok) {
+                throw new Error(`API Error: ${response.status}`);
+            }
+
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
             
-            // Return high-res mock data
             return {
-                url: `https://static.photos/${qualityTier === 'maximum' ? 'technology' : qualityTier === 'ultra' ? 'nature' : 'abstract'}/${Math.min(targetWidth, 1200)}x${Math.min(targetHeight, 630)}/${payload.parameters.seed}`,
+                url,
                 seed: payload.parameters.seed,
                 model: modelId,
                 resolution: `${targetWidth}x${targetHeight}`,
-                qualityTier: qualityTier,
-                fileSize: this.estimateFileSize(targetWidth, targetHeight, options.mode || 'image'),
-                format: targetWidth >= 7680 ? 'TIFF/RAW' : targetWidth >= 3840 ? 'PNG-24' : 'PNG'
+                qualityTier,
+                fileSize: this.estimateFileSize(targetWidth, targetHeight, 'image'),
+                format: 'PNG'
             };
         } catch (error) {
-            throw new Error(`Image generation failed: ${error.message}`);
+            console.error('API generation failed, falling back:', error);
+            return this.fallbackGeneration(prompt, options, 'image');
         }
     }
-    
-    static estimateFileSize(width, height, mode) {
+
+    static fallbackGeneration(prompt, options, mode) {
+        const baseDuration = 5000; // Shorter duration for fallback
+        const seed = options.seed || Math.floor(Math.random() * 1000000);
+        const width = options.width || 1024;
+        const height = options.height || 1024;
+
+        return new Promise((resolve) => {
+            setTimeout(() => {
+                resolve({
+                    url: `https://static.photos/${mode === 'image' ? 'abstract' : mode === 'video' ? 'technology' : '3d'}/${Math.min(width, 1200)}x${Math.min(height, 630)}/${seed}`,
+                    seed,
+                    model: 'fallback',
+                    resolution: `${width}x${height}`,
+                    qualityTier: 'standard',
+                    fileSize: this.estimateFileSize(width, height, mode),
+                    format: 'PNG',
+                    isFallback: true
+                });
+            }, baseDuration);
+        });
+    }
+static estimateFileSize(width, height, mode) {
         const pixels = width * height;
         if (mode === 'image') {
             if (pixels >= 33177600) return '~250-500 MB';
@@ -195,39 +245,86 @@ class GenerationService {
         return 'Unknown';
     }
 static async generateVideo(prompt, options = {}) {
-        const modelId = HF_CONFIG.models.video['modelscope-t2v'];
+        const apiAvailable = await HF_CONFIG.checkStatus();
         
+        if (!apiAvailable || HF_CONFIG.fallbackMode) {
+            console.warn('Using fallback generation mode - API unavailable');
+            return this.fallbackGeneration(prompt, options, 'video');
+        }
+
         try {
-            await this.simulateProgress(15000); // Longer for video
+            const modelId = HF_CONFIG.models.video['modelscope-t2v'];
+            const response = await fetch(HF_CONFIG.baseURL + modelId, {
+                method: 'POST',
+                headers: HF_CONFIG.headers('YOUR_HF_TOKEN_HERE'),
+                body: JSON.stringify({
+                    inputs: prompt,
+                    parameters: {
+                        num_frames: options.frames || 16,
+                        fps: options.fps || 8
+                    }
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`API Error: ${response.status}`);
+            }
+
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
             
             return {
-                url: `https://static.photos/video/640x360/${Date.now()}`,
-                frames: 16,
-                fps: 8,
-                duration: 2,
+                url,
+                frames: options.frames || 16,
+                fps: options.fps || 8,
+                duration: Math.round((options.frames || 16) / (options.fps || 8)),
                 model: modelId
             };
         } catch (error) {
-            throw new Error(`Video generation failed: ${error.message}`);
+            console.error('API generation failed, falling back:', error);
+            return this.fallbackGeneration(prompt, options, 'video');
         }
     }
-
     static async generate3D(prompt, options = {}) {
+        const apiAvailable = await HF_CONFIG.checkStatus();
+        
+        if (!apiAvailable || HF_CONFIG.fallbackMode) {
+            console.warn('Using fallback generation mode - API unavailable');
+            return this.fallbackGeneration(prompt, options, '3d');
+        }
+
         try {
-            await this.simulateProgress(20000); // Longest for 3D
+            const modelId = HF_CONFIG.models['3d']['shap-e'];
+            const response = await fetch(HF_CONFIG.baseURL + modelId, {
+                method: 'POST',
+                headers: HF_CONFIG.headers('YOUR_HF_TOKEN_HERE'),
+                body: JSON.stringify({
+                    inputs: prompt,
+                    parameters: {
+                        resolution: options.resolution || 256
+                    }
+                })
+            });
+
+            if (!response.ok) {
+                throw new Error(`API Error: ${response.status}`);
+            }
+
+            const blob = await response.blob();
+            const url = URL.createObjectURL(blob);
             
             return {
-                url: `https://static.photos/3d/512x512/${Date.now()}`,
+                url,
                 format: 'obj',
                 vertices: 5000,
                 faces: 3000,
-                model: HF_CONFIG.models['3d']['shap-e']
+                model: modelId
             };
         } catch (error) {
-            throw new Error(`3D generation failed: ${error.message}`);
+            console.error('API generation failed, falling back:', error);
+            return this.fallbackGeneration(prompt, options, '3d');
         }
     }
-
     static simulateProgress(duration = 5000) {
         return new Promise((resolve) => {
             const steps = 20;
@@ -239,7 +336,12 @@ static async generateVideo(prompt, options = {}) {
                 const progress = (currentStep / steps) * 100;
                 
                 document.dispatchEvent(new CustomEvent('generationProgress', {
-                    detail: { progress, step: currentStep, total: steps }
+                    detail: { 
+                        progress, 
+                        step: currentStep, 
+                        total: steps,
+                        status: currentStep === steps ? 'Completed' : 'Processing'
+                    }
                 }));
 
                 if (currentStep >= steps) {
@@ -250,24 +352,39 @@ static async generateVideo(prompt, options = {}) {
         });
     }
 }
-
 // UI Controllers
 const UIController = {
-    init() {
+    async init() {
         this.initNeuralBackground();
-        this.initApiStatus();
+        await this.initApiStatus();
         this.initEventListeners();
         this.loadGallery();
     },
-
-    initNeuralBackground() {
+initNeuralBackground() {
         const canvas = document.getElementById('neural-canvas');
         if (canvas) {
             new NeuralNetwork(canvas);
         }
     },
+    async initApiStatus() {
+        const apiAvailable = await HF_CONFIG.checkStatus();
+        const grid = document.getElementById('api-status-grid');
+        
+        if (!grid) return;
+
+        if (!apiAvailable) {
+            grid.innerHTML = `
+                <div class="glass-card rounded-xl p-4 col-span-4 text-center">
+                    <div class="flex items-center justify-center gap-2 mb-2">
+                        <span class="w-3 h-3 rounded-full bg-amber-500 animate-pulse"></span>
+                        <span class="text-amber-400 font-medium">API Service Disrupted</span>
+                    </div>
+                    <p class="text-sm text-slate-400">Using fallback generation mode</p>
+                </div>
+            `;
+            return;
+        }
 
-    initApiStatus() {
         const services = [
             { name: 'Stable Diffusion XL', status: 'operational', latency: '124ms' },
             { name: 'ModelScope T2V', status: 'operational', latency: '892ms' },
@@ -275,23 +392,19 @@ const UIController = {
             { name: 'Realistic Vision', status: 'operational', latency: '156ms' }
         ];
 
-        const grid = document.getElementById('api-status-grid');
-        if (grid) {
-            grid.innerHTML = services.map(s => `
-                <div class="glass-card rounded-xl p-4 flex items-center justify-between">
-                    <div>
-                        <p class="font-medium text-sm">${s.name}</p>
-                        <p class="text-xs text-slate-400">${s.latency}</p>
-                    </div>
-                    <span class="px-2 py-1 rounded-full text-xs font-medium ${s.status === 'operational' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-amber-500/20 text-amber-400'}">
-                        ${s.status}
-                    </span>
+        grid.innerHTML = services.map(s => `
+            <div class="glass-card rounded-xl p-4 flex items-center justify-between">
+                <div>
+                    <p class="font-medium text-sm">${s.name}</p>
+                    <p class="text-xs text-slate-400">${s.latency}</p>
                 </div>
-            `).join('');
-        }
+                <span class="px-2 py-1 rounded-full text-xs font-medium ${s.status === 'operational' ? 'bg-emerald-500/20 text-emerald-400' : 'bg-amber-500/20 text-amber-400'}">
+                    ${s.status}
+                </span>
+            </div>
+        `).join('');
     },
-
-    initEventListeners() {
+initEventListeners() {
         // Prompt submission
         document.addEventListener('submitPrompt', async (e) => {
             const { prompt, mode, settings } = e.detail;
@@ -308,12 +421,20 @@ const UIController = {
             this.loadGallery();
         });
     },
-
     async handleGeneration(prompt, mode, settings) {
         const modal = document.getElementById('generation-modal');
         modal.show();
-
+        
         try {
+            document.dispatchEvent(new CustomEvent('generationProgress', {
+                detail: { 
+                    progress: 0, 
+                    step: 0, 
+                    total: 20,
+                    status: 'Initializing...'
+                }
+            }));
+
             let result;
             switch (mode) {
                 case 'image':
@@ -338,7 +459,8 @@ const UIController = {
                 prompt,
                 mode,
                 result,
-                timestamp: new Date().toISOString()
+                timestamp: new Date().toISOString(),
+                isFallback: result.isFallback || false
             };
             state.history.unshift(entry);
             localStorage.setItem('vortex_history', JSON.stringify(state.history.slice(0, 50)));
@@ -346,22 +468,35 @@ const UIController = {
             modal.showResult(result, mode);
 
         } catch (error) {
+            console.error('Generation error:', error);
             modal.showError(error.message);
         }
     },
-
-    updateProgress(progress) {
+    updateProgress(detail) {
         const modal = document.getElementById('generation-modal');
         if (modal && modal.updateProgress) {
-            modal.updateProgress(progress);
+            modal.updateProgress(detail.progress, detail.status);
+        }
+        
+        // Also update API status if progress indicates completion
+        if (detail.progress === 100) {
+            setTimeout(() => this.initApiStatus(), 1000);
         }
     },
-
     loadGallery() {
         const gallery = document.getElementById('gallery');
         if (gallery) {
             // Load from history or generate demo items
-            const items = state.history.length > 0 ? state.history : this.generateDemoGallery();
+            let items = state.history.length > 0 ? state.history : this.generateDemoGallery();
+            
+            // Mark demo items as fallback
+            if (state.history.length === 0) {
+                items = items.map(item => ({
+                    ...item,
+                    isFallback: true
+                }));
+            }
+            
             gallery.setItems(items.slice(0, 12));
         }
     },
@@ -391,9 +526,11 @@ const UIController = {
             result: {
                 url: `https://static.photos/${['technology', 'nature', 'abstract', 'architecture', 'people', 'science'][i]}/1200x630/${i + 1}`,
                 resolution: `${resolutions[i].w}x${resolutions[i].h}`,
-                qualityLabel: resolutions[i].label
+                qualityLabel: resolutions[i].label,
+                isFallback: true
             },
-            timestamp: new Date(Date.now() - i * 86400000).toISOString()
+            timestamp: new Date(Date.now() - i * 86400000).toISOString(),
+            isFallback: true
         }));
     }
 };