MAKE EVERYTHING FUNCTIONAL USE OPEN HUGGING FACE MODELS FOR THE IMAGE TO IMAGE

components/image-processor.js

@@ -0,0 +1,347 @@
+```javascript
+class ImageProcessor extends HTMLElement {
+    constructor() {
+        super();
+        this.selectedModel = 'prompthero/openjourney';
+        this.uploadedImage = null;
+    }
+
+    connectedCallback() {
+        this.render();
+        this.attachEventListeners();
+    }
+
+    render() {
+        this.innerHTML = `
+            <style>
+                .processor-container {
+                    max-width: 1200px;
+                    margin: 0 auto;
+                    padding: 20px;
+                }
+                .model-selector {
+                    display: flex;
+                    gap: 15px;
+                    margin-bottom: 30px;
+                    flex-wrap: wrap;
+                }
+                .model-option {
+                    padding: 15px;
+                    border: 2px solid #e5e7eb;
+                    border-radius: 8px;
+                    cursor: pointer;
+                    flex: 1;
+                    min-width: 200px;
+                    text-align: center;
+                    transition: all 0.3s;
+                }
+                .model-option:hover {
+                    border-color: #3b82f6;
+                }
+                .model-option.active {
+                    border-color: #3b82f6;
+                    background-color: #dbeafe;
+                }
+                .upload-area {
+                    border: 2px dashed #d1d5db;
+                    border-radius: 8px;
+                    padding: 40px;
+                    text-align: center;
+                    margin-bottom: 30px;
+                    position: relative;
+                }
+                .upload-area.drag-over {
+                    border-color: #3b82f6;
+                    background-color: #eff6ff;
+                }
+                .preview-container {
+                    display: flex;
+                    gap: 30px;
+                    flex-wrap: wrap;
+                }
+                .image-preview {
+                    flex: 1;
+                    min-width: 300px;
+                }
+                .preview-image {
+                    max-width: 100%;
+                    max-height: 400px;
+                    display: block;
+                    margin: 0 auto;
+                    border-radius: 8px;
+                }
+                .controls {
+                    margin: 20px 0;
+                }
+                .prompt-input {
+                    width: 100%;
+                    padding: 12px;
+                    border: 1px solid #d1d5db;
+                    border-radius: 6px;
+                    margin-bottom: 15px;
+                }
+                .process-btn {
+                    background-color: #10b981;
+                    color: white;
+                    border: none;
+                    padding: 12px 24px;
+                    border-radius: 6px;
+                    cursor: pointer;
+                    font-weight: bold;
+                    width: 100%;
+                }
+                .process-btn:hover:not(:disabled) {
+                    background-color: #059669;
+                }
+                .process-btn:disabled {
+                    background-color: #9ca3af;
+                    cursor: not-allowed;
+                }
+                .result-container {
+                    position: relative;
+                    min-height: 400px;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                }
+                .processing-overlay {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background-color: rgba(255, 255, 255, 0.8);
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    z-index: 10;
+                }
+                .spinner {
+                    border: 4px solid #f3f3f3;
+                    border-top: 4px solid #3b82f6;
+                    border-radius: 50%;
+                    width: 40px;
+                    height: 40px;
+                    animation: spin 1s linear infinite;
+                    margin-bottom: 15px;
+                }
+                @keyframes spin {
+                    0% { transform: rotate(0deg); }
+                    100% { transform: rotate(360deg); }
+                }
+                .action-buttons {
+                    display: flex;
+                    gap: 15px;
+                    margin-top: 20px;
+                }
+                .action-btn {
+                    flex: 1;
+                    padding: 12px;
+                    border: none;
+                    border-radius: 6px;
+                    font-weight: bold;
+                    cursor: pointer;
+                }
+                .download-btn {
+                    background-color: #3b82f6;
+                    color: white;
+                }
+                .save-btn {
+                    background-color: #ef4444;
+                    color: white;
+                }
+                .action-btn:disabled {
+                    background-color: #9ca3af;
+                    cursor: not-allowed;
+                }
+            </style>
+            <div class="processor-container">
+                <h2>AI Image Processor</h2>
+                
+                <div class="model-selector">
+                    <div class="model-option active" data-model="prompthero/openjourney">
+                        <h3>Artistic Style Transfer</h3>
+                        <p>Apply artistic styles to your images</p>
+                    </div>
+                    <div class="model-option" data-model="stabilityai/stable-diffusion-x4-upscaler">
+                        <h3>Super Resolution</h3>
+                        <p>Enhance image resolution and details</p>
+                    </div>
+                    <div class="model-option" data-model="lllyasviel/sd-controlnet-canny">
+                        <h3>Edge Enhancement</h3>
+                        <p>Transform images using edge detection</p>
+                    </div>
+                </div>
+                
+                <div class="upload-area" id="drop-zone">
+                    <p>Drag & drop your image here or click to browse</p>
+                    <input type="file" id="file-input" accept="image/*" style="display: none;">
+                    <button id="browse-btn">Select Image</button>
+                    <img id="preview" class="preview-image" style="display: none; margin-top: 20px;">
+                </div>
+                
+                <div class="preview-container">
+                    <div class="image-preview">
+                        <h3>Input Image</h3>
+                        <div id="input-preview" class="result-container">
+                            <p>No image selected</p>
+                        </div>
+                    </div>
+                    
+                    <div class="image-preview">
+                        <h3>Processed Result</h3>
+                        <div id="output-preview" class="result-container">
+                            <p>Processed image will appear here</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+
+    attachEventListeners() {
+        // Model selection
+        const modelOptions = this.querySelectorAll('.model-option');
+        modelOptions.forEach(option => {
+            option.addEventListener('click', (e) => {
+                modelOptions.forEach(opt => opt.classList.remove('active'));
+                e.currentTarget.classList.add('active');
+                this.selectedModel = e.currentTarget.dataset.model;
+            });
+        });
+
+        // File upload
+        const dropZone = this.querySelector('#drop-zone');
+        const fileInput = this.querySelector('#file-input');
+        const browseBtn = this.querySelector('#browse-btn');
+        const preview = this.querySelector('#preview');
+
+        browseBtn.addEventListener('click', () => fileInput.click());
+
+        fileInput.addEventListener('change', (e) => {
+            if (e.target.files.length) {
+                this.handleFile(e.target.files[0]);
+            }
+        });
+
+        // Drag and drop events
+        dropZone.addEventListener('dragover', (e) => {
+            e.preventDefault();
+            dropZone.classList.add('drag-over');
+        });
+
+        dropZone.addEventListener('dragleave', () => {
+            dropZone.classList.remove('drag-over');
+        });
+
+        dropZone.addEventListener('drop', (e) => {
+            e.preventDefault();
+            dropZone.classList.remove('drag-over');
+            if (e.dataTransfer.files.length) {
+                this.handleFile(e.dataTransfer.files[0]);
+            }
+        });
+    }
+
+    handleFile(file) {
+        if (!file.type.match('image.*')) {
+            alert('Please select an image file');
+            return;
+        }
+
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            this.uploadedImage = e.target.result;
+            this.updatePreview();
+        };
+        reader.readAsDataURL(file);
+    }
+
+    updatePreview() {
+        const inputPreview = this.querySelector('#input-preview');
+        inputPreview.innerHTML = `<img src="${this.uploadedImage}" class="preview-image">`;
+    }
+
+    async processImage(prompt) {
+        if (!this.uploadedImage) {
+            alert('Please upload an image first');
+            return;
+        }
+
+        const outputPreview = this.querySelector('#output-preview');
+        outputPreview.innerHTML = `
+            <div class="processing-overlay">
+                <div class="spinner"></div>
+                <p>Processing image...</p>
+            </div>
+            <img src="${this.uploadedImage}" class="preview-image" style="opacity: 0.3;">
+        `;
+
+        try {
+            // Convert base64 to blob
+            const imageData = this.uploadedImage.split(',')[1];
+            const byteString = atob(imageData);
+            const mimeString = this.uploadedImage.split(',')[0].split(':')[1].split(';')[0];
+            const ab = new ArrayBuffer(byteString.length);
+            const ia = new Uint8Array(ab);
+            
+            for (let i = 0; i < byteString.length; i++) {
+                ia[i] = byteString.charCodeAt(i);
+            }
+            
+            const blob = new Blob([ab], {type: mimeString});
+            
+            // Prepare form data
+            const formData = new FormData();
+            formData.append('inputs', prompt);
+            formData.append('image', blob, 'input.png');
+            
+            // Call Hugging Face API
+            const response = await fetch(
+                `https://api-inference.huggingface.co/models/${this.selectedModel}`,
+                {
+                    headers: {
+                        'Authorization': 'Bearer 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'
+                    },
+                    method: 'POST',
+                    body: formData
+                }
+            );
+            
+            if (!response.ok) {
+                throw new Error(`API error: ${response.status}`);
+            }
+            
+            const blobResult = await response.blob();
+            const imageUrl = URL.createObjectURL(blobResult);
+            
+            // Display result
+            outputPreview.innerHTML = `
+                <img src="${imageUrl}" class="preview-image">
+                <div class="action-buttons">
+                    <button class="action-btn download-btn" onclick="this.downloadImage('${imageUrl}')">Download</button>
+                    <button class="action-btn save-btn">Save to Gallery</button>
+                </div>
+            `;
+        } catch (error) {
+            console.error('Error processing image:', error);
+            outputPreview.innerHTML = `
+                <p>Error processing image. Please try again.</p>
+                <img src="${this.uploadedImage}" class="preview-image" style="opacity: 0.3;">
+            `;
+        }
+    }
+
+    downloadImage(url) {
+        const link = document.createElement('a');
+        link.href = url;
+        link.download = 'processed-image.png';
+        document.body.appendChild(link);
+        link.click();
+        document.body.removeChild(link);
+    }
+}
+
+customElements.define('image-processor', ImageProcessor);
+>>>>>>> REPLACE

components/navbar.js

@@ -83,7 +83,6 @@ class CustomNavbar extends HTMLElement {
                 <button class="mobile-menu-btn">
                     <i data-feather="menu"></i>
                 </button>
-                
                 <ul class="nav-links">
                     <li><a href="index.html"><i data-feather="home"></i> Home</a></li>
                     <li><a href="gallery.html"><i data-feather="grid"></i> Gallery</a></li>
@@ -91,8 +90,7 @@ class CustomNavbar extends HTMLElement {
                     <li><a href="marketplace.html"><i data-feather="shopping-bag"></i> Marketplace</a></li>
                     <li><a href="about.html"><i data-feather="info"></i> About</a></li>
                 </ul>
-                
-                <div class="user-actions">
+<div class="user-actions">
                     <button id="darkModeToggle" class="dark-mode-toggle">
                         <i data-feather="moon"></i>
                     </button>

gallery.html

@@ -30,6 +30,165 @@
                         <option>Portrait</option>
                         <option>Landscape</option>
                         <option>Concept Art</option>
-                        <option>Digital Painting</option{"ok":false,"message":"Request timeout: The AI model took too long to respond. Please try again with a simpler prompt or try a different model."}
+                        <option>Digital Painting</option>
+                    </select>
+                    <i data-feather="chevron-down" class="absolute right-3 top-2.5 text-gray-400"></i>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Gallery Grid -->
+        <div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-6">
+            <!-- Gallery Item 1 -->
+            <div class="gallery-item bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+                <div class="h-64 overflow-hidden">
+                    <img src="http://static.photos/abstract/640x360/201" alt="AI Artwork" class="w-full h-full object-cover">
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-gray-900 dark:text-white mb-1">Digital Dreams</h3>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">By AI Artist Pro</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-accent-blue font-bold">$120</span>
+                        <button class="bg-accent-blue hover:bg-blue-600 text-white py-1 px-3 rounded-full text-sm transition-colors">
+                            <i data-feather="heart" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Gallery Item 2 -->
+            <div class="gallery-item bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+                <div class="h-64 overflow-hidden">
+                    <img src="http://static.photos/nature/640x360/202" alt="AI Artwork" class="w-full h-full object-cover">
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-gray-900 dark:text-white mb-1">Forest Awakening</h3>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">By NatureGPT</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-accent-blue font-bold">$95</span>
+                        <button class="bg-accent-blue hover:bg-blue-600 text-white py-1 px-3 rounded-full text-sm transition-colors">
+                            <i data-feather="heart" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Gallery Item 3 -->
+            <div class="gallery-item bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+                <div class="h-64 overflow-hidden">
+                    <img src="http://static.photos/people/640x360/203" alt="AI Artwork" class="w-full h-full object-cover">
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-gray-900 dark:text-white mb-1">Urban Portrait</h3>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">By CityScape AI</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-accent-blue font-bold">$150</span>
+                        <button class="bg-accent-blue hover:bg-blue-600 text-white py-1 px-3 rounded-full text-sm transition-colors">
+                            <i data-feather="heart" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Gallery Item 4 -->
+            <div class="gallery-item bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+                <div class="h-64 overflow-hidden">
+                    <img src="http://static.photos/technology/640x360/204" alt="AI Artwork" class="w-full h-full object-cover">
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-gray-900 dark:text-white mb-1">Cybernetic Vision</h3>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">By TechArtist</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-accent-blue font-bold">$200</span>
+                        <button class="bg-accent-blue hover:bg-blue-600 text-white py-1 px-3 rounded-full text-sm transition-colors">
+                            <i data-feather="heart" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Gallery Item 5 -->
+            <div class="gallery-item bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+                <div class="h-64 overflow-hidden">
+                    <img src="http://static.photos/abstract/640x360/205" alt="AI Artwork" class="w-full h-full object-cover">
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-gray-900 dark:text-white mb-1">Geometric Harmony</h3>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">By ShapeShifter AI</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-accent-blue font-bold">$85</span>
+                        <button class="bg-accent-blue hover:bg-blue-600 text-white py-1 px-3 rounded-full text-sm transition-colors">
+                            <i data-feather="heart" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Gallery Item 6 -->
+            <div class="gallery-item bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+                <div class="h-64 overflow-hidden">
+                    <img src="http://static.photos/minimal/640x360/206" alt="AI Artwork" class="w-full h-full object-cover">
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-gray-900 dark:text-white mb-1">Minimal Essence</h3>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">By SimpleAI</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-accent-blue font-bold">$75</span>
+                        <button class="bg-accent-blue hover:bg-blue-600 text-white py-1 px-3 rounded-full text-sm transition-colors">
+                            <i data-feather="heart" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Gallery Item 7 -->
+            <div class="gallery-item bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+                <div class="h-64 overflow-hidden">
+                    <img src="http://static.photos/abstract/640x360/207" alt="AI Artwork" class="w-full h-full object-cover">
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-gray-900 dark:text-white mb-1">Color Explosion</h3>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">By PaletteMaster</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-accent-blue font-bold">$110</span>
+                        <button class="bg-accent-blue hover:bg-blue-600 text-white py-1 px-3 rounded-full text-sm transition-colors">
+                            <i data-feather="heart" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+            
+            <!-- Gallery Item 8 -->
+            <div class="gallery-item bg-white dark:bg-gray-800 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all duration-300 transform hover:-translate-y-1">
+                <div class="h-64 overflow-hidden">
+                    <img src="http://static.photos/nature/640x360/208" alt="AI Artwork" class="w-full h-full object-cover">
+                </div>
+                <div class="p-4">
+                    <h3 class="font-bold text-gray-900 dark:text-white mb-1">Mountain Majesty</h3>
+                    <p class="text-gray-600 dark:text-gray-300 text-sm mb-3">By LandscapePro</p>
+                    <div class="flex justify-between items-center">
+                        <span class="text-accent-blue font-bold">$130</span>
+                        <button class="bg-accent-blue hover:bg-blue-600 text-white py-1 px-3 rounded-full text-sm transition-colors">
+                            <i data-feather="heart" class="w-4 h-4"></i>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        
+        <!-- Load More Button -->
+        <div class="text-center mt-12">
+            <button class="bg-accent-blue hover:bg-blue-600 text-white font-bold py-3 px-8 rounded-full transition-colors">
+                Load More
+            </button>
+        </div>
+    </main>
+
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script>
+        feather.replace();
+    </script>
 </body>
-</html>
+</html>

index.html

@@ -56,8 +56,7 @@
                 </div>
             </div>
         </section>
-
-        <!-- Featured Section -->
+<!-- Featured Section -->
         <section class="mb-16">
             <h2 class="text-3xl font-bold text-gray-900 dark:text-white mb-8 text-center">Featured Creations</h2>
             <div class="grid grid-cols-1 md:grid-cols-3 gap-6">