HyClickAI/prompt.html at main · K1mc4n/HyClickAI · GitHub

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
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Generator Prompt Video AI</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        .form-label {
            @apply block mb-2 text-sm font-medium text-gray-300;
        }
        .form-input {
            @apply bg-gray-800 border-gray-700 text-white text-sm rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 block w-full p-3 transition-all duration-200;
        }
        .form-select {
             @apply bg-gray-800 border-gray-700 text-white text-sm rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-purple-500 block w-full p-3 transition-all duration-200;
        }
    </style>
</head>
<body class="bg-gray-900 text-white">

    <div class="container mx-auto max-w-3xl p-4 sm:p-8">

        <header class="text-center mb-8">
            <h1 class="text-3xl sm:text-4xl font-bold text-transparent bg-clip-text bg-gradient-to-r from-purple-400 to-indigo-500">
                Generator Prompt Video AI
            </h1>
            <p class="text-gray-400 mt-2">Buat prompt yang sempurna untuk Google Veo atau model AI video lainnya.</p>
        </header>

        <main class="bg-gray-800/50 p-6 sm:p-8 rounded-2xl shadow-2xl border border-gray-700">
            <div class="space-y-6">
                <!-- Bagian 1: Subjek & Aksi -->
                <div>
                    <label for="subject" class="form-label">1. Subjek Utama</label>
                    <input type="text" id="subject" class="form-input" placeholder="Contoh: seekor kucing oranye gemuk">
                </div>
                <div>
                    <label for="action" class="form-label">2. Aksi / Kegiatan</label>
                    <input type="text" id="action" class="form-input" placeholder="Contoh: sedang tidur siang di atas tumpukan buku">
                </div>

                <!-- Bagian 2: Latar & Lingkungan -->
                <div>
                    <label for="setting" class="form-label">3. Latar / Lingkungan</label>
                    <input type="text" id="setting" class="form-input" placeholder="Contoh: di perpustakaan yang nyaman dengan sinar matahari dari jendela">
                </div>

                <!-- Bagian 3: Gaya Visual -->
                <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="visual-style" class="form-label">4. Gaya Visual</label>
                        <select id="visual-style" class="form-select">
                            <option value="video sinematik">Video Sinematik</option>
                            <option value="hyperrealistic">Hyperrealistic</option>
                            <option value="rekaman dokumenter alam">Dokumenter Alam</option>
                            <option value="gaya anime Ghibli">Gaya Anime Ghibli</option>
                            <option value="pixel art">Pixel Art</option>
                            <option value="stop-motion claymation">Stop-motion Claymation</option>
                            <option value="rekaman drone">Rekaman Drone</option>
                             <option value="video hitam putih">Video Hitam Putih</option>
                        </select>
                    </div>
                    <div>
                        <label for="camera-shot" class="form-label">5. Sudut Kamera & Komposisi</label>
                        <select id="camera-shot" class="form-select">
                            <option value="wide angle shot">Wide Angle Shot</option>
                            <option value="close-up shot">Close-up Shot</option>
                            <option value="medium shot">Medium Shot</option>
                            <option value="slow-motion">Slow-motion</option>
                            <option value="time-lapse">Time-lapse</option>
                            <option value="first-person view (FPV)">First-person View (FPV)</option>
                            <option value="low angle shot">Low Angle Shot</option>
                        </select>
                    </div>
                </div>

                <!-- Bagian 4: Pencahayaan & Kualitas -->
                 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
                    <div>
                        <label for="lighting" class="form-label">6. Pencahayaan</label>
                        <select id="lighting" class="form-select">
                            <option value="cahaya natural">Cahaya Natural</option>
                            <option value="golden hour (sore hari)">Golden Hour</option>
                            <option value="pencahayaan neon">Pencahayaan Neon</option>
                            <option value="cahaya pagi yang lembut">Cahaya Pagi Lembut</option>
                            <option value="pencahayaan dramatis">Pencahayaan Dramatis</option>
                        </select>
                    </div>
                     <div>
                        <label for="quality" class="form-label">7. Kualitas Video</label>
                        <select id="quality" class="form-select">
                            <option value="sangat detail, 8K, UHD">Sangat Detail, 8K, UHD</option>
                            <option value="photorealistic">Photorealistic</option>
                            <option value="kualitas 4K">Kualitas 4K</option>
                            <option value="kualitas vintage">Kualitas Vintage</option>
                        </select>
                    </div>
                </div>

                <!-- Bagian 5: Audio -->
                <div>
                    <label for="audio" class="form-label">8. Deskripsi Suara (Sangat Penting)</label>
                    <textarea id="audio" rows="4" class="form-input" placeholder="Jelaskan efek suara, musik, dan suasana. Contoh: suara dengkuran kucing yang pelan, gemerisik halaman buku dibalik, musik lofi yang menenangkan."></textarea>
                </div>

                <!-- Tombol Generate -->
                <div class="pt-4">
                    <button id="generate-btn" class="w-full bg-gradient-to-r from-purple-600 to-indigo-600 hover:opacity-90 text-white font-bold py-3 px-4 rounded-lg text-lg transition-opacity">
                        Hasilkan Prompt
                    </button>
                </div>
            </div>

            <!-- Hasil Prompt -->
            <div id="result-container" class="mt-10 hidden">
                <h2 class="text-xl font-semibold mb-4 text-gray-200">✅ Prompt Anda Telah Siap:</h2>
                <div class="bg-gray-900 p-4 rounded-lg border border-dashed border-gray-600 relative">
                    <p id="result-text" class="text-gray-300"></p>
                    <button id="copy-btn" class="absolute top-2 right-2 bg-gray-700 hover:bg-gray-600 text-gray-300 text-xs font-semibold py-1 px-3 rounded-md transition-colors">
                        Salin Teks
                    </button>
                </div>
            </div>
        </main>
    </div>

    <script>
        // Mendapatkan referensi ke elemen-elemen HTML
        const subjectEl = document.getElementById('subject');
        const actionEl = document.getElementById('action');
        const settingEl = document.getElementById('setting');
        const visualStyleEl = document.getElementById('visual-style');
        const cameraShotEl = document.getElementById('camera-shot');
        const lightingEl = document.getElementById('lighting');
        const qualityEl = document.getElementById('quality');
        const audioEl = document.getElementById('audio');

        const generateBtn = document.getElementById('generate-btn');
        const resultContainer = document.getElementById('result-container');
        const resultTextEl = document.getElementById('result-text');
        const copyBtn = document.getElementById('copy-btn');

        // Event listener untuk tombol "Hasilkan Prompt"
        generateBtn.addEventListener('click', () => {
            // Mengambil nilai dari setiap input
            const subject = subjectEl.value.trim();
            const action = actionEl.value.trim();
            const setting = settingEl.value.trim();
            const visualStyle = visualStyleEl.value;
            const cameraShot = cameraShotEl.value;
            const lighting = lightingEl.value;
            const quality = qualityEl.value;
            const audio = audioEl.value.trim();

            // Validasi sederhana: pastikan subjek diisi
            if (!subject) {
                alert('Harap isi bagian "Subjek Utama" terlebih dahulu.');
                return;
            }

            // Menyusun prompt akhir
            let promptParts = [
                `${subject} ${action} ${setting}.`,
                `Gaya visual: ${visualStyle}, ${cameraShot}, ${lighting}, ${quality}.`
            ];

            if (audio) {
                promptParts.push(`Audio: ${audio}.`);
            }

            const finalPrompt = promptParts.join(' ');

            // Menampilkan hasil
            resultTextEl.innerText = finalPrompt;
            resultContainer.classList.remove('hidden');
        });

        // Event listener untuk tombol "Salin Teks"
        copyBtn.addEventListener('click', () => {
            const textToCopy = resultTextEl.innerText;

            // Menggunakan metode yang lebih kompatibel untuk menyalin ke clipboard
            const tempTextArea = document.createElement('textarea');
            tempTextArea.value = textToCopy;
            document.body.appendChild(tempTextArea);
            tempTextArea.select();
            document.execCommand('copy');
            document.body.removeChild(tempTextArea);

            // Memberikan feedback visual kepada pengguna
            copyBtn.innerText = 'Disalin!';
            setTimeout(() => {
                copyBtn.innerText = 'Salin Teks';
            }, 2000);
        });
    </script>
</body>
</html>