File size: 4,804 Bytes
3b8c49a
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
f5aa833
efcfc93
 
 
 
 
f5aa833
 
 
 
efcfc93
 
 
 
f5aa833
efcfc93
3b8c49a
efcfc93
ed10276
efcfc93
 
 
 
f5aa833
1bd9aa1
ed10276
1bd9aa1
f5aa833
ed10276
f5aa833
 
 
efcfc93
f5aa833
 
 
 
 
 
1bd9aa1
 
 
 
 
 
 
 
 
 
 
 
 
efcfc93
3b8c49a
 
efcfc93
1bd9aa1
 
 
 
 
 
 
f5aa833
efcfc93
f5aa833
ed10276
 
efcfc93
f5aa833
3b8c49a
 
efcfc93
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
document.addEventListener('DOMContentLoaded', () => {
    // Theme toggle functionality
    const themeToggle = document.createElement('div');
    themeToggle.className = 'fixed bottom-4 right-4 z-50';
    themeToggle.innerHTML = `
        <button id="themeToggle" class="p-3 rounded-full bg-white dark:bg-gray-800 shadow-lg hover:shadow-xl transition-all duration-300">
            <i data-feather="moon" class="hidden dark:block text-yellow-300"></i>
            <i data-feather="sun" class="dark:hidden text-gray-700"></i>
        </button>
    `;
    document.body.appendChild(themeToggle);

    const toggleBtn = document.getElementById('themeToggle');
    toggleBtn.addEventListener('click', () => {
        document.documentElement.classList.toggle('dark');
        localStorage.setItem('darkMode', document.documentElement.classList.contains('dark'));
        feather.replace();
    });

    // Check for saved theme preference
    if (localStorage.getItem('darkMode') === 'true') {
        document.documentElement.classList.add('dark');
    }

    // Initialize feather icons
    feather.replace();
});
// Video generation functionality with explicit content support
document.getElementById('generateBtn').addEventListener('click', async () => {
    const prompt = document.getElementById('prompt').value.trim();
    const duration = parseInt(document.getElementById('duration').value);
    const style = document.getElementById('style').value;
    
    if (!prompt.toLowerCase().includes('nude') && !prompt.toLowerCase().includes('naked')) {
        if (!confirm('Your prompt doesn\'t mention nudity. Do you want to proceed anyway?')) {
            return;
        }
    }

    const btn = document.getElementById('generateBtn');
    btn.disabled = true;
    btn.innerHTML = 'Generating Explicit Content... <i data-feather="loader" class="animate-spin ml-2"></i>';
    feather.replace();

    try {
        // Generate video using Sora API
        const resultsDiv = document.getElementById('results');
        const videoCard = document.createElement('div');
        videoCard.className = 'bg-white dark:bg-gray-800 rounded-xl shadow-md overflow-hidden fade-in';
        videoCard.innerHTML = `
            <div class="relative">
                <video controls controlsList="nodownload" class="w-full h-auto">
                    <source src="https://api.openai.com/v1/sora/generate?prompt=${encodeURIComponent(prompt)}&duration=${duration}&style=${style}&nsfw=true" type="video/mp4">
                    Your browser does not support HTML5 video.
                </video>
<div class="absolute bottom-2 right-2 bg-black bg-opacity-50 text-white text-xs px-2 py-1 rounded">
                    ${duration}s • ${style}
                </div>
            </div>
            <div class="p-4">
                <div class="flex justify-between items-start">
                    <p class="text-gray-800 dark:text-gray-200 font-medium">${prompt}</p>
                    <button class="text-purple-600 dark:text-purple-400 hover:text-purple-800 dark:hover:text-purple-300">
                        <i data-feather="heart"></i>
                    </button>
                </div>
                <div class="mt-4 flex justify-between items-center">
                    <button class="video-control-btn" onclick="this.closest('.relative').querySelector('video').requestFullscreen()">
                        <i data-feather="maximize"></i>
                    </button>
                    <button class="video-control-btn" onclick="this.closest('.relative').querySelector('video').play()">
                        <i data-feather="play"></i>
                    </button>
                    <button class="video-control-btn" onclick="this.closest('.relative').querySelector('video').pause()">
                        <i data-feather="pause"></i>
                    </button>
                    <button class="video-control-btn" onclick="this.closest('.relative').querySelector('video').currentTime = 0">
                        <i data-feather="rotate-ccw"></i>
                    </button>
                </div>
            </div>
        `;
        resultsDiv.prepend(videoCard);
        
        // Initialize video element with proper event handling
        const video = videoCard.querySelector('video');
        video.onloadedmetadata = function() {
            video.play().catch(e => console.log('Autoplay prevented:', e));
        };
        
        feather.replace();
    } catch (error) {
        console.error('Error generating explicit video:', error);
        alert('Failed to generate explicit content. Please check your API key and try again.');
} finally {
        btn.disabled = false;
        btn.innerHTML = 'Generate Explicit Video';
        feather.replace();
    }
});