Make it actually generate an image and display it after I give it a prompt
Browse files
README.md
CHANGED
|
@@ -1,10 +1,13 @@
|
|
| 1 |
---
|
| 2 |
-
title:
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
|
|
|
|
|
|
| 8 |
---
|
| 9 |
|
| 10 |
-
|
|
|
|
|
|
| 1 |
---
|
| 2 |
+
title: PixelPrompt Magic Wand 🪄
|
| 3 |
+
colorFrom: pink
|
| 4 |
+
colorTo: purple
|
| 5 |
+
emoji: 🐳
|
| 6 |
sdk: static
|
| 7 |
pinned: false
|
| 8 |
+
tags:
|
| 9 |
+
- deepsite-v3
|
| 10 |
---
|
| 11 |
|
| 12 |
+
# Welcome to your new DeepSite project!
|
| 13 |
+
This project was created with [DeepSite](https://huggingface.co/deepsite).
|
index.html
CHANGED
|
@@ -1,19 +1,103 @@
|
|
| 1 |
-
<!
|
| 2 |
-
<html>
|
| 3 |
-
|
| 4 |
-
|
| 5 |
-
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
|
| 9 |
-
|
| 10 |
-
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
|
| 15 |
-
|
| 16 |
-
|
| 17 |
-
|
| 18 |
-
|
| 19 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en" class="dark">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>PixelPrompt | AI Image Generator</title>
|
| 7 |
+
<link rel="stylesheet" href="style.css">
|
| 8 |
+
<script src="https://cdn.tailwindcss.com"></script>
|
| 9 |
+
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
|
| 10 |
+
<script src="https://unpkg.com/feather-icons"></script>
|
| 11 |
+
<script>
|
| 12 |
+
tailwind.config = {
|
| 13 |
+
darkMode: 'class',
|
| 14 |
+
theme: {
|
| 15 |
+
extend: {
|
| 16 |
+
colors: {
|
| 17 |
+
primary: '#8b5cf6',
|
| 18 |
+
secondary: '#ec4899'
|
| 19 |
+
}
|
| 20 |
+
}
|
| 21 |
+
}
|
| 22 |
+
}
|
| 23 |
+
</script>
|
| 24 |
+
</head>
|
| 25 |
+
<body class="bg-gray-900 min-h-screen text-gray-200">
|
| 26 |
+
<main class="container mx-auto px-4 py-12 max-w-4xl">
|
| 27 |
+
<div class="text-center mb-12">
|
| 28 |
+
<h1 class="text-4xl md:text-5xl font-bold mb-2 bg-gradient-to-r from-primary to-secondary bg-clip-text text-transparent">PixelPrompt</h1>
|
| 29 |
+
<p class="text-lg text-gray-400">Turn your imagination into stunning visuals with AI</p>
|
| 30 |
+
<div class="w-20 h-1 bg-gradient-to-r from-primary to-secondary mx-auto mt-4 rounded-full"></div>
|
| 31 |
+
</div>
|
| 32 |
+
|
| 33 |
+
<div class="bg-gray-800 rounded-xl shadow-lg p-6 mb-8">
|
| 34 |
+
<form id="imageForm" class="space-y-4">
|
| 35 |
+
<div>
|
| 36 |
+
<label for="prompt" class="block text-sm font-medium mb-2">Describe your image</label>
|
| 37 |
+
<div class="relative">
|
| 38 |
+
<textarea id="prompt" rows="3" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg focus:ring-2 focus:ring-primary focus:border-transparent" placeholder="A magical forest with glowing mushrooms at night..." required></textarea>
|
| 39 |
+
</div>
|
| 40 |
+
</div>
|
| 41 |
+
|
| 42 |
+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
| 43 |
+
<div>
|
| 44 |
+
<label for="style" class="block text-sm font-medium mb-2">Style</label>
|
| 45 |
+
<select id="style" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg">
|
| 46 |
+
<option value="fantasy">Fantasy</option>
|
| 47 |
+
<option value="realistic">Realistic</option>
|
| 48 |
+
<option value="abstract">Abstract</option>
|
| 49 |
+
<option value="minimal">Minimal</option>
|
| 50 |
+
</select>
|
| 51 |
+
</div>
|
| 52 |
+
<div>
|
| 53 |
+
<label for="size" class="block text-sm font-medium mb-2">Size</label>
|
| 54 |
+
<select id="size" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg">
|
| 55 |
+
<option value="512x512">Medium (512x512)</option>
|
| 56 |
+
<option value="256x256">Small (256x256)</option>
|
| 57 |
+
<option value="1024x1024">Large (1024x1024)</option>
|
| 58 |
+
</select>
|
| 59 |
+
</div>
|
| 60 |
+
<div>
|
| 61 |
+
<label for="count" class="block text-sm font-medium mb-2">Quantity</label>
|
| 62 |
+
<select id="count" class="w-full px-4 py-3 bg-gray-700 border border-gray-600 rounded-lg">
|
| 63 |
+
<option value="1">1 Image</option>
|
| 64 |
+
<option value="2">2 Images</option>
|
| 65 |
+
<option value="4">4 Images</option>
|
| 66 |
+
</select>
|
| 67 |
+
</div>
|
| 68 |
+
</div>
|
| 69 |
+
|
| 70 |
+
<button type="submit" class="w-full py-3 px-4 bg-gradient-to-r from-primary to-secondary hover:from-primary-600 hover:to-secondary-600 text-white font-medium rounded-lg transition-all duration-200 flex items-center justify-center gap-2">
|
| 71 |
+
<i data-feather="wand" class="w-5 h-5"></i>
|
| 72 |
+
Generate Magic
|
| 73 |
+
</button>
|
| 74 |
+
</form>
|
| 75 |
+
</div>
|
| 76 |
+
|
| 77 |
+
<div id="results" class="space-y-8">
|
| 78 |
+
<div id="loading" class="hidden text-center py-12">
|
| 79 |
+
<div class="inline-block animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-primary"></div>
|
| 80 |
+
<p class="mt-4 text-gray-400">Conjuring your image from the digital ether...</p>
|
| 81 |
+
</div>
|
| 82 |
+
|
| 83 |
+
<div id="generatedImages" class="grid grid-cols-1 md:grid-cols-2 gap-6 items-start"></div>
|
| 84 |
+
|
| 85 |
+
<div id="error" class="hidden bg-red-900/30 border border-red-700 rounded-xl p-4 text-center">
|
| 86 |
+
<h3 class="text-lg font-medium text-red-300 flex items-center justify-center gap-2">
|
| 87 |
+
<i data-feather="alert-triangle" class="w-5 h-5"></i>
|
| 88 |
+
Spell Failed!
|
| 89 |
+
</h3>
|
| 90 |
+
<p class="mt-2 text-red-200" id="errorMessage">Our magical servers are currently overwhelmed. Please try again later.</p>
|
| 91 |
+
</div>
|
| 92 |
+
</div>
|
| 93 |
+
</main>
|
| 94 |
+
|
| 95 |
+
<footer class="mt-16 pb-8 text-center text-gray-500 text-sm">
|
| 96 |
+
<p>Created with magic and a touch of AI ✨</p>
|
| 97 |
+
</footer>
|
| 98 |
+
|
| 99 |
+
<script src="script.js"></script>
|
| 100 |
+
<script>feather.replace();</script>
|
| 101 |
+
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
|
| 102 |
+
</body>
|
| 103 |
+
</html>
|
script.js
ADDED
|
@@ -0,0 +1,56 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
document.addEventListener('DOMContentLoaded', function() {
|
| 2 |
+
const form = document.getElementById('imageForm');
|
| 3 |
+
const loading = document.getElementById('loading');
|
| 4 |
+
const generatedImages = document.getElementById('generatedImages');
|
| 5 |
+
const errorDiv = document.getElementById('error');
|
| 6 |
+
|
| 7 |
+
// Using a mock API for demonstration - in a real app, you'd use Stable Diffusion API or similar
|
| 8 |
+
form.addEventListener('submit', async function(e) {
|
| 9 |
+
e.preventDefault();
|
| 10 |
+
|
| 11 |
+
// Show loading state
|
| 12 |
+
loading.classList.remove('hidden');
|
| 13 |
+
generatedImages.innerHTML = '';
|
| 14 |
+
errorDiv.classList.add('hidden');
|
| 15 |
+
|
| 16 |
+
const prompt = document.getElementById('prompt').value;
|
| 17 |
+
const style = document.getElementById('style').value;
|
| 18 |
+
const size = document.getElementById('size').value;
|
| 19 |
+
const count = parseInt(document.getElementById('count').value);
|
| 20 |
+
|
| 21 |
+
try {
|
| 22 |
+
// In a real implementation, you would call your backend API here
|
| 23 |
+
// This is just a mock implementation that returns placeholder images
|
| 24 |
+
|
| 25 |
+
// Simulate API delay
|
| 26 |
+
await new Promise(resolve => setTimeout(resolve, 2000));
|
| 27 |
+
|
| 28 |
+
// Random chance to show error (for demo purposes)
|
| 29 |
+
if (Math.random() < 0.1) {
|
| 30 |
+
throw new Error('AI servers are overloaded. Please try again.');
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
// Clear previous results
|
| 34 |
+
generatedImages.innerHTML = '';
|
| 35 |
+
|
| 36 |
+
// Generate mock results
|
| 37 |
+
for (let i = 0; i < count; i++) {
|
| 38 |
+
const imageContainer = document.createElement('div');
|
| 39 |
+
imageContainer.className = 'bg-gray-800 rounded-xl overflow-hidden shadow-lg card-glow';
|
| 40 |
+
|
| 41 |
+
// Generate a placeholder image based on prompt and style
|
| 42 |
+
const categories = ['abstract', 'fantasy', 'nature', 'technology'];
|
| 43 |
+
const category = style === 'fantasy' ? 'fantasy' :
|
| 44 |
+
style === 'realistic' ? 'nature' :
|
| 45 |
+
style === 'abstract' ? 'abstract' : 'minimal';
|
| 46 |
+
|
| 47 |
+
const sizes = {
|
| 48 |
+
'256x256': '256x256',
|
| 49 |
+
'512x512': '640x360',
|
| 50 |
+
'1024x1024': '1024x576'
|
| 51 |
+
};
|
| 52 |
+
|
| 53 |
+
const imgUrl = `http://static.photos/${category}/${sizes[size] || '640x360'}/${Math.floor(Math.random() * 1000)}`;
|
| 54 |
+
|
| 55 |
+
imageContainer.innerHTML = `
|
| 56 |
+
<div class="aspect-square bg
|
style.css
CHANGED
|
@@ -1,28 +1,40 @@
|
|
| 1 |
-
|
| 2 |
-
|
| 3 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
| 4 |
}
|
| 5 |
|
| 6 |
-
|
| 7 |
-
|
| 8 |
-
margin-top: 0;
|
| 9 |
}
|
| 10 |
|
| 11 |
-
|
| 12 |
-
|
| 13 |
-
|
| 14 |
-
margin-bottom: 10px;
|
| 15 |
-
margin-top: 5px;
|
| 16 |
}
|
| 17 |
|
| 18 |
-
.card {
|
| 19 |
-
|
| 20 |
-
margin: 0 auto;
|
| 21 |
-
padding: 16px;
|
| 22 |
-
border: 1px solid lightgray;
|
| 23 |
-
border-radius: 16px;
|
| 24 |
}
|
| 25 |
|
| 26 |
-
|
| 27 |
-
|
|
|
|
|
|
|
| 28 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
@keyframes pulse {
|
| 2 |
+
0%, 100% {
|
| 3 |
+
opacity: 1;
|
| 4 |
+
}
|
| 5 |
+
50% {
|
| 6 |
+
opacity: 0.5;
|
| 7 |
+
}
|
| 8 |
}
|
| 9 |
|
| 10 |
+
.animate-pulse {
|
| 11 |
+
animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
|
|
| 12 |
}
|
| 13 |
|
| 14 |
+
/* Fancy card glow effect */
|
| 15 |
+
.card-glow {
|
| 16 |
+
transition: box-shadow 0.3s ease;
|
|
|
|
|
|
|
| 17 |
}
|
| 18 |
|
| 19 |
+
.card-glow:hover {
|
| 20 |
+
box-shadow: 0 0 20px rgba(139, 92, 246, 0.3);
|
|
|
|
|
|
|
|
|
|
|
|
|
| 21 |
}
|
| 22 |
|
| 23 |
+
/* Custom scrollbar */
|
| 24 |
+
::-webkit-scrollbar {
|
| 25 |
+
width: 8px;
|
| 26 |
+
height: 8px;
|
| 27 |
}
|
| 28 |
+
|
| 29 |
+
::-webkit-scrollbar-track {
|
| 30 |
+
background: #1a1a1a;
|
| 31 |
+
}
|
| 32 |
+
|
| 33 |
+
::-webkit-scrollbar-thumb {
|
| 34 |
+
background: #4b5563;
|
| 35 |
+
border-radius: 4px;
|
| 36 |
+
}
|
| 37 |
+
|
| 38 |
+
::-webkit-scrollbar-thumb:hover {
|
| 39 |
+
background: #6b7280;
|
| 40 |
+
}
|