Create a image editor with prompt with ai like gimini and deep seek

README.md

@@ -1,10 +1,13 @@
 ---
-title: Pixelwizard Ai Studio
-emoji: 🦀
-colorFrom: green
-colorTo: yellow
+title: PixelWizard AI Studio ✨
+colorFrom: blue
+colorTo: blue
+emoji: 🐳
 sdk: static
 pinned: false
+tags:
+  - deepsite-v3
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# Welcome to your new DeepSite project!
+This project was created with [DeepSite](https://huggingface.co/deepsite).

components/ai-prompt.js

@@ -0,0 +1,66 @@
+class CustomAiPrompt extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .prompt-card {
+                    background: linear-gradient(145deg, #f0fdf4, #ecfccb);
+                    border: 1px solid #d9f99d;
+                }
+                .generate-btn {
+                    transition: all 0.2s ease;
+                    box-shadow: 0 4px 6px -1px rgba(132, 204, 22, 0.3);
+                }
+                .generate-btn:hover {
+                    transform: translateY(-2px);
+                    box-shadow: 0 10px 15px -3px rgba(132, 204, 22, 0.4);
+                }
+            </style>
+            <div class="prompt-card rounded-xl p-5 mb-4">
+                <h3 class="text-lg font-semibold mb-3 text-gray-800">Describe your vision</h3>
+                <textarea 
+                    class="prompt-textarea w-full p-3 border border-gray-300 rounded-lg mb-3" 
+                    rows="4" 
+                    placeholder="A futuristic cityscape at sunset with flying cars..."></textarea>
+                
+                <div class="flex justify-between items-center">
+                    <div class="flex space-x-2">
+                        <span class="text-xs px-2 py-1 bg-lime-100 text-lime-800 rounded-full">4K</span>
+                        <span class="text-xs px-2 py-1 bg-lime-100 text-lime-800 rounded-full">Photorealistic</span>
+                        <button class="text-xs text-gray-500 hover:text-lime-500">
+                            <i data-feather="plus" class="w-3 h-3"></i>
+                        </button>
+                    </div>
+                    
+                    <button class="generate-btn px-4 py-2 bg-lime-500 text-white rounded-full font-medium flex items-center">
+                        <i data-feather="zap" class="mr-2"></i>
+                        Generate
+                    </button>
+                </div>
+            </div>
+            
+            <div class="bg-gray-50 rounded-xl p-4">
+                <div class="flex items-center justify-between mb-3">
+                    <h4 class="font-medium text-gray-700">Quick Prompts</h4>
+                    <button class="text-sm text-lime-500 hover:text-lime-600">See all</button>
+                </div>
+                
+                <div class="grid grid-cols-2 gap-2">
+                    <button class="text-left text-sm px-3 py-2 bg-white hover:bg-lime-50 rounded-lg border border-gray-200">
+                        Cyberpunk portrait
+                    </button>
+                    <button class="text-left text-sm px-3 py-2 bg-white hover:bg-lime-50 rounded-lg border border-gray-200">
+                        Fantasy landscape
+                    </button>
+                    <button class="text-left text-sm px-3 py-2 bg-white hover:bg-lime-50 rounded-lg border border-gray-200">
+                        Minimalist logo
+                    </button>
+                    <button class="text-left text-sm px-3 py-2 bg-white hover:bg-lime-50 rounded-lg border border-gray-200">
+                        Anime character
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-ai-prompt', CustomAiPrompt);

components/editor-toolbar.js

@@ -0,0 +1,48 @@
+class CustomEditorToolbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .tool-btn {
+                    transition: all 0.2s ease;
+                }
+                .tool-btn:hover {
+                    transform: translateY(-2px);
+                    background-color: rgba(255,255,255,0.2);
+                }
+            </style>
+            <div class="flex items-center justify-between">
+                <div class="flex space-x-2">
+                    <button id="upload-btn" class="tool-btn px-3 py-2 rounded-md flex items-center">
+                        <i data-feather="upload" class="mr-2"></i>
+                        Upload
+                    </button>
+                    <button class="tool-btn px-3 py-2 rounded-md flex items-center">
+                        <i data-feather="camera" class="mr-2"></i>
+                        Capture
+                    </button>
+                    <button class="tool-btn px-3 py-2 rounded-md flex items-center">
+                        <i data-feather="download" class="mr-2"></i>
+                        Export
+                    </button>
+                </div>
+                
+                <div class="flex space-x-2">
+                    <button class="tool-btn p-2 rounded-md">
+                        <i data-feather="crop"></i>
+                    </button>
+                    <button class="tool-btn p-2 rounded-md">
+                        <i data-feather="sliders"></i>
+                    </button>
+                    <button class="tool-btn p-2 rounded-md">
+                        <i data-feather="edit"></i>
+                    </button>
+                    <button class="tool-btn p-2 rounded-md">
+                        <i data-feather="type"></i>
+                    </button>
+                </div>
+            </div>
+        `;
+    }
+}
+customElements.define('custom-editor-toolbar', CustomEditorToolbar);

components/navbar.js

@@ -0,0 +1,53 @@
+class CustomNavbar extends HTMLElement {
+    connectedCallback() {
+        this.attachShadow({ mode: 'open' });
+        this.shadowRoot.innerHTML = `
+            <style>
+                .nav-link:hover {
+                    color: #84cc16;
+                }
+                .nav-link {
+                    transition: all 0.2s ease;
+                }
+            </style>
+            <nav class="bg-white shadow-sm">
+                <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+                    <div class="flex items-center space-x-2">
+                        <i data-feather="image" class="text-lime-500"></i>
+                        <span class="text-xl font-bold text-gray-800">PixelWizard</span>
+                    </div>
+                    
+                    <div class="hidden md:flex space-x-6">
+                        <a href="#" class="nav-link text-gray-600 hover:text-lime-500 font-medium flex items-center">
+                            <i data-feather="home" class="mr-1"></i>
+                            Home
+                        </a>
+                        <a href="#" class="nav-link text-gray-600 hover:text-lime-500 font-medium flex items-center">
+                            <i data-feather="image" class="mr-1"></i>
+                            Editor
+                        </a>
+                        <a href="#" class="nav-link text-gray-600 hover:text-lime-500 font-medium flex items-center">
+                            <i data-feather="zap" class="mr-1"></i>
+                            AI Tools
+                        </a>
+                        <a href="#" class="nav-link text-gray-600 hover:text-lime-500 font-medium flex items-center">
+                            <i data-feather="book" class="mr-1"></i>
+                            Tutorials
+                        </a>
+                    </div>
+                    
+                    <div class="flex items-center space-x-4">
+                        <button class="px-4 py-2 rounded-full bg-lime-500 text-white hover:bg-lime-600 transition flex items-center">
+                            <i data-feather="user" class="mr-2"></i>
+                            Sign In
+                        </button>
+                        <button class="md:hidden">
+                            <i data-feather="menu"></i>
+                        </button>
+                    </div>
+                </div>
+            </nav>
+        `;
+    }
+}
+customElements.define('custom-navbar', CustomNavbar);

index.html

@@ -1,19 +1,75 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="en" class="scroll-smooth">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>PixelWizard AI Studio - AI-Powered Image Editor</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="components/navbar.js"></script>
+    <script src="components/editor-toolbar.js"></script>
+    <script src="components/ai-prompt.js"></script>
+    <script>
+        tailwind.config = {
+            theme: {
+                extend: {
+                    colors: {
+                        lime: {
+                            500: '#84cc16',
+                            600: '#65a30d',
+                            400: '#a3e635',
+                        }
+                    }
+                }
+            }
+        }
+    </script>
+</head>
+<body class="bg-gray-100 font-sans">
+    <custom-navbar></custom-navbar>
+    
+    <main class="container mx-auto px-4 py-8">
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-8">
+            <!-- Editor Canvas -->
+            <div class="lg:col-span-2 bg-white rounded-xl shadow-lg overflow-hidden">
+                <div class="editor-toolbar bg-lime-500 p-4 text-white">
+                    <custom-editor-toolbar></custom-editor-toolbar>
+                </div>
+                <div class="p-4">
+                    <div id="editor-canvas" class="w-full h-96 bg-gray-200 rounded-lg flex items-center justify-center">
+                        <p class="text-gray-500">Upload or generate an image to start editing</p>
+                    </div>
+                </div>
+            </div>
+
+            <!-- AI Prompt Section -->
+            <div class="bg-white rounded-xl shadow-lg p-6">
+                <h2 class="text-2xl font-bold text-gray-800 mb-6 flex items-center">
+                    <i data-feather="zap" class="mr-2 text-lime-500"></i>
+                    AI Magic Wand
+                </h2>
+                
+                <custom-ai-prompt></custom-ai-prompt>
+
+                <div class="mt-6">
+                    <h3 class="text-lg font-semibold mb-3 text-gray-700">Recent Generations</h3>
+                    <div class="grid grid-cols-2 gap-3">
+                        <div class="bg-gray-100 rounded-lg h-24"></div>
+                        <div class="bg-gray-100 rounded-lg h-24"></div>
+                        <div class="bg-gray-100 rounded-lg h-24"></div>
+                        <div class="bg-gray-100 rounded-lg h-24"></div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </main>
+
+    <script>
+        feather.replace();
+    </script>
+    <script src="script.js"></script>
+<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
+</body>
+</html>

script.js

@@ -0,0 +1,47 @@
+document.addEventListener('DOMContentLoaded', () => {
+    // Initialize editor functionality
+    const editorCanvas = document.getElementById('editor-canvas');
+    
+    // Drag and drop functionality
+    editorCanvas.addEventListener('dragover', (e) => {
+        e.preventDefault();
+        editorCanvas.classList.add('border-lime-500', 'bg-lime-50');
+    });
+
+    editorCanvas.addEventListener('dragleave', () => {
+        editorCanvas.classList.remove('border-lime-500', 'bg-lime-50');
+    });
+
+    editorCanvas.addEventListener('drop', (e) => {
+        e.preventDefault();
+        editorCanvas.classList.remove('border-lime-500', 'bg-lime-50');
+        
+        // Handle dropped files
+        const file = e.dataTransfer.files[0];
+        if (file && file.type.match('image.*')) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                editorCanvas.innerHTML = `<img src="${event.target.result}" class="max-h-full max-w-full object-contain">`;
+            };
+            reader.readAsDataURL(file);
+        }
+    });
+
+    // File input handler
+    document.getElementById('upload-btn')?.addEventListener('click', () => {
+        const input = document.createElement('input');
+        input.type = 'file';
+        input.accept = 'image/*';
+        input.onchange = (e) => {
+            const file = e.target.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (event) => {
+                    editorCanvas.innerHTML = `<img src="${event.target.result}" class="max-h-full max-w-full object-contain">`;
+                };
+                reader.readAsDataURL(file);
+            }
+        };
+        input.click();
+    });
+});

style.css

@@ -1,28 +1,25 @@
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
+
 body {
-	padding: 2rem;
-	font-family: -apple-system, BlinkMacSystemFont, "Arial", sans-serif;
+    font-family: 'Inter', sans-serif;
 }
 
-h1 {
-	font-size: 16px;
-	margin-top: 0;
+#editor-canvas {
+    min-height: 400px;
+    border: 2px dashed #d1d5db;
+    transition: all 0.3s ease;
 }
 
-p {
-	color: rgb(107, 114, 128);
-	font-size: 15px;
-	margin-bottom: 10px;
-	margin-top: 5px;
+#editor-canvas:hover {
+    border-color: #84cc16;
 }
 
-.card {
-	max-width: 620px;
-	margin: 0 auto;
-	padding: 16px;
-	border: 1px solid lightgray;
-	border-radius: 16px;
+.prompt-textarea {
+    resize: none;
+    transition: all 0.2s ease;
 }
 
-.card p:last-child {
-	margin-bottom: 0;
-}
+.prompt-textarea:focus {
+    outline: none;
+    box-shadow: 0 0 0 2px rgba(132, 204, 22, 0.5);
+}