Hugging Face's logo

Spaces:
Lasur123
/
pixelweave-ai-text-to-image-alchemy-studio
Running

App Files Community
pixelweave-ai-text-to-image-alchemy-studio
File size: 8,988 Bytes 
5d90d05
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
 
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ShadowWeave AI | Pixel Alchemy Studio</title>
    <link rel="stylesheet" href="style.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
    <script src="https://unpkg.com/feather-icons"></script>
    <script>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            500: '#8b5cf6',
                            600: '#7c3aed',
                        },
                        secondary: {
                            500: '#1e293b',
                            600: '#0f172a',
                        }
                    }
                }
            }
        }
    </script>
</head>
<body class="bg-secondary-600 text-gray-100 min-h-screen">
    <custom-navbar></custom-navbar>
    
    <main class="container mx-auto px-4 py-8">
        <!-- Hero Section -->
        <section class="flex flex-col md:flex-row items-center justify-between gap-8 mb-16">
            <div class="md:w-1/2 space-y-6">
                <h1 class="text-5xl font-bold bg-gradient-to-r from-primary-500 to-purple-400 bg-clip-text text-transparent">
                    Weave Your Digital Dreams
                </h1>
                <p class="text-xl text-gray-300">
                    Transform ideas into stunning visuals with our AI-powered pixel alchemy. No skills required - just imagination.
                </p>
                <div class="flex gap-4">
                    <a href="#generate" class="bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-lg font-medium transition-all flex items-center gap-2">
                        <i data-feather="sparkles"></i> Start Creating
                    </a>
                    <a href="#gallery" class="border border-primary-500 text-primary-500 hover:bg-primary-500/10 px-6 py-3 rounded-lg font-medium transition-all">
                        Explore Gallery
                    </a>
                </div>
            </div>
            <div class="md:w-1/2">
                <img src="http://static.photos/technology/1024x576/42" alt="AI Generated Art" class="rounded-xl shadow-2xl border border-gray-700">
            </div>
        </section>

        <!-- Generation Section -->
        <section id="generate" class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-center">Pixel Alchemy Studio</h2>
            
            <div class="bg-secondary-500 rounded-xl p-6 shadow-lg">
                <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
                    <!-- Prompt Input -->
                    <div class="lg:col-span-2 space-y-4">
                        <div>
                            <label class="block text-sm font-medium mb-2">Your Creative Vision</label>
                            <textarea class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-4 focus:ring-2 focus:ring-primary-500 focus:border-transparent" rows="4" placeholder="Describe what you want to create..."></textarea>
                        </div>
                        
                        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
                            <div>
                                <label class="block text-sm font-medium mb-2">Style</label>
                                <select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2">
                                    <option>Anime</option>
                                    <option>Cyberpunk</option>
                                    <option>3D Render</option>
                                    <option>Pixel Art</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-2">Model</label>
                                <select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2">
                                    <option value="stabilityai/stable-diffusion-xl-base-1.0">Stable Diffusion</option>
                                    <option value="lykon/dreamshaper-8">DreamShaper</option>
                                    <option value="cagliostrolab/animagine-xl-3.0">Anime</option>
                                    <option value="DGSpitzer/Cyberpunk-Anime-Diffusion">Cyberpunk</option>
                                </select>
                            </div>
<div>
                                <label class="block text-sm font-medium mb-2">Quality</label>
                                <select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2">
                                    <option>Standard</option>
                                    <option>HD</option>
                                    <option selected>Premium</option>
                                </select>
                            </div>
                            <div>
                                <label class="block text-sm font-medium mb-2">Aspect</label>
                                <select class="w-full bg-secondary-600 border border-gray-700 rounded-lg p-2">
                                    <option>Square</option>
                                    <option>Portrait</option>
                                    <option>Landscape</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Preview & Generate -->
                    <div class="space-y-4">
                        <div class="aspect-square bg-secondary-700 rounded-lg border-2 border-dashed border-gray-600 flex items-center justify-center">
                            <div class="text-center p-4">
                                <i data-feather="image" class="w-12 h-12 mx-auto text-gray-500 mb-2"></i>
                                <p class="text-gray-400">Your creation will appear here</p>
                            </div>
                        </div>
                        <button class="w-full bg-primary-500 hover:bg-primary-600 text-white py-3 rounded-lg font-medium transition-all flex items-center justify-center gap-2">
                            <i data-feather="zap"></i> Generate Magic
                        </button>
                        <div class="text-xs text-gray-400 text-center">
                            <p>By generating, you agree to our Terms of Service</p>
                            <p class="mt-1">Premium generations: 5 remaining</p>
                        </div>
                    </div>
                </div>
            </div>
        </section>

        <!-- Model Showcase -->
        <section class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-center">Alchemy Models</h2>
            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6">
                <div class="bg-secondary-500 rounded-xl overflow-hidden shadow-lg hover:shadow-xl transition-all">
                    <img src="http://static.photos/abstract/640x360/1" alt="Dream Model" class="w-full h-48 object-cover">
                    <div class="p-4">
                        <h3 class="font-bold text-lg mb-2">Dream Weaver</h3>
                        <p class="text-gray-300 text-sm">Ethereal beauty with a touch of darkness</p>
                        <div class="mt-4 flex justify-between items-center">
                            <span class="text-primary-500 font-medium">Free</span>
                            <button class="text-xs bg-primary-500/20 text-primary-500 px-3 py-1 rounded-full">Select</button>
                        </div>
                    </div>
                </div>
                <!-- Repeat similar blocks for other models -->
            </div>
        </section>

        <!-- Gallery Section -->
        <section id="gallery" class="mb-16">
            <h2 class="text-3xl font-bold mb-8 text-center">Pixel Gallery</h2>
            <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">
                <img src="http://static.photos/abstract/320x240/2" alt="Gallery item" class="rounded-lg hover:scale-105 transition-transform cursor-pointer">
                <!-- Repeat similar img tags for gallery items -->
            </div>
        </section>
    </main>

    <custom-footer></custom-footer>
    <script src="components/navbar.js"></script>
    <script src="components/footer.js"></script>
    <script src="components/toast.js"></script>
    <script src="script.js"></script>
<script>feather.replace();</script>
<script src="https://huggingface.co/deepsite/deepsite-badge.js"></script>
</body>
</html>