Hugging Face's logo

Spaces:
Mccscs2
/
dreamforge-ai-studio
Running

App Files Community
dreamforge-ai-studio
File size: 7,304 Bytes
9a826b6
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
<!DOCTYPE html>
<html lang="en" class="dark">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Dream Machine - Uncensored AI Generation</title>
    <link rel="icon" type="image/x-icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🎬</text></svg>">
    <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>
        tailwind.config = {
            darkMode: 'class',
            theme: {
                extend: {
                    colors: {
                        primary: {
                            50: '#f5f3ff',
                            100: '#ede9fe',
                            200: '#ddd6fe',
                            300: '#c4b5fd',
                            400: '#a78bfa',
                            500: '#8b5cf6',
                            600: '#7c3aed',
                            700: '#6d28d9',
                            800: '#5b21b6',
                            900: '#4c1d95',
                            950: '#2e1065',
                        },
                        secondary: {
                            50: '#ecfeff',
                            100: '#cffafe',
                            200: '#a5f3fc',
                            300: '#67e8f9',
                            400: '#22d3ee',
                            500: '#06b6d4',
                            600: '#0891b2',
                            700: '#0e7490',
                            800: '#155e75',
                            900: '#164e63',
                            950: '#083344',
                        }
                    },
                    animation: {
                        'pulse-slow': 'pulse 3s cubic-bezier(0.4, 0, 0.6, 1) infinite',
                        'glow': 'glow 2s ease-in-out infinite alternate',
                        'float': 'float 6s ease-in-out infinite',
                        'shimmer': 'shimmer 2s linear infinite',
                    },
                    keyframes: {
                        glow: {
                            '0%': { boxShadow: '0 0 5px rgba(139, 92, 246, 0.5), 0 0 20px rgba(139, 92, 246, 0.3)' },
                            '100%': { boxShadow: '0 0 20px rgba(139, 92, 246, 0.8), 0 0 40px rgba(139, 92, 246, 0.5)' }
                        },
                        float: {
                            '0%, 100%': { transform: 'translateY(0)' },
                            '50%': { transform: 'translateY(-20px)' },
                        },
                        shimmer: {
                            '0%': { backgroundPosition: '-1000px 0' },
                            '100%': { backgroundPosition: '1000px 0' }
                        }
                    }
                }
            }
        }
    </script>
    <script src="components/navbar.js"></script>
    <script src="components/generator-panel.js"></script>
    <script src="components/gallery-grid.js"></script>
</head>
<body class="bg-slate-950 text-slate-100 font-sans antialiased selection:bg-primary-500 selection:text-white overflow-x-hidden">

    <app-navbar></app-navbar>

    <script>
        // Ensure Feather icons work in shadow DOM
        window.featherIcons = feather;
    </script>
<main class="relative min-h-screen pt-20 pb-12 px-4 sm:px-6 lg:px-8">
        <!-- Background Effects -->
        <div class="fixed inset-0 pointer-events-none overflow-hidden">
            <div class="absolute top-0 left-1/4 w-96 h-96 bg-primary-600/20 rounded-full blur-3xl animate-float"></div>
            <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-secondary-600/20 rounded-full blur-3xl animate-float" style="animation-delay: -3s;"></div>
            <div class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-[800px] h-[800px] bg-gradient-radial from-primary-900/30 to-transparent rounded-full blur-3xl"></div>
        </div>

        <div class="relative max-w-7xl mx-auto">
            <!-- Hero Section -->
            <div class="text-center mb-12 space-y-4">
                <h1 class="text-5xl md:text-7xl font-black tracking-tight bg-gradient-to-r from-primary-400 via-secondary-400 to-primary-400 bg-clip-text text-transparent animate-pulse-slow">
                    Uncensored Dream Machine
                </h1>
                <p class="text-lg md:text-xl text-slate-400 max-w-2xl mx-auto">
                    Text to Image to Video. No filters. No restrictions. Pure creative freedom.
                </p>
                <div class="flex items-center justify-center gap-4 text-sm text-slate-500">
                    <span class="flex items-center gap-1"><i data-feather="cpu" class="w-4 h-4"></i> AI-Powered</span>
                    <span class="w-1 h-1 bg-slate-600 rounded-full"></span>
                    <span class="flex items-center gap-1"><i data-feather="zap" class="w-4 h-4"></i> Real-time Generation</span>
                    <span class="w-1 h-1 bg-slate-600 rounded-full"></span>
                    <span class="flex items-center gap-1"><i data-feather="shield-off" class="w-4 h-4"></i> Zero Moderation</span>
                </div>
            </div>

            <!-- Main Interface -->
            <div class="grid lg:grid-cols-12 gap-8">
                <!-- Left Panel: Controls -->
                <div class="lg:col-span-4 space-y-6">
                    <generator-controls></generator-controls>
                    
                    <!-- Quick Tips -->
                    <div class="glass-card p-6 rounded-2xl border border-slate-700/50">
                        <h3 class="text-sm font-semibold text-slate-300 mb-3 flex items-center gap-2">
                            <i data-feather="sparkles" class="w-4 h-4 text-secondary-400"></i>
                            Pro Tips
                        </h3>
                        <ul class="space-y-2 text-xs text-slate-400">
                            <li class="flex gap-2"><span class="text-primary-400">•</span> Be specific with lighting and camera angles</li>
                            <li class="flex gap-2"><span class="text-primary-400">•</span> Use "8k, photorealistic, highly detailed" for best results</li>
                            <li class="flex gap-2"><span class="text-primary-400">•</span> Negative prompts help remove unwanted elements</li>
                            <li class="flex gap-2"><span class="text-primary-400">•</span> For video, describe motion in your prompt</li>
                        </ul>
                    </div>
                </div>

                <!-- Center/Right: Preview & Gallery -->
                <div class="lg:col-span-8 space-y-6">
                    <generator-preview></generator-preview>
                    <gallery-grid></gallery-grid>
                </div>
            </div>
        </div>
    </main>

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