영상 스타일과 음악 스타일을 좀 더 세분화 해줘 - Follow Up Deployment

index.html

@@ -6,6 +6,10 @@
     <title>Veo3 영상 제작 스튜디오</title>
     <script src="https://cdn.tailwindcss.com"></script>
     <script src="https://unpkg.com/lucide@latest/dist/umd/lucide.js"></script>
+    <script src="https://apis.google.com/js/api.js"></script>
+    <script>
+      window.GOOGLE_API_KEY = "AIzaSyBt2gdFwXehWeYlcNetW89f5JHnQVXuhwI";
+    </script>
     <style>
         @keyframes float {
             0%, 100% { transform: translateY(0px); }
@@ -94,12 +98,23 @@
                 </div>
                 
                 <div>
-                    <label class="block text-sm font-medium mb-2">스타일 선택</label>
+                    <label class="block text-sm font-medium mb-2">영상 스타일</label>
                     <select class="w-full px-3 py-2 bg-gray-800 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500">
-                        <option>영화적</option>
+                        <option>영화적(시네마틱)</option>
                         <option>다큐멘터리</option>
-                        <option>광고</option>
-                        <option>교육</option>
+                        <option>광고(광고홍보)</option>
+                        <option>교육(강의형)</option>
+                        <option>브이로그</option>
+                        <option>리뷰/언박싱</option>
+                        <option>게임 스트리밍</option>
+                        <option>셀프 인터뷰</option>
+                        <option>모션그래픽</option>
+                        <option>3D 애니메이션</option>
+                        <option>2D 카툰/일러스트</option>
+                        <option>브랜드 필름</option>
+                        <option>프로모션 뮤직비디오</option>
+                        <option>스톱모션</option>
+                        <option>타임랩스/하이퍼랩스</option>
                     </select>
                 </div>
                 
@@ -141,10 +156,25 @@
                     <label class="block text-sm font-medium mb-2">음악 스타일</label>
                     <select class="w-full px-3 py-2 bg-gray-800 rounded-lg">
                         <option>에픽 오케스트라</option>
-                        <option>일렉트로닉</option>
-                        <option>재즈</option>
-                        <option>팝</option>
-                        <option>힙합</option>
+                        <option>시네마틱 트레일러</option>
+                        <option>로파이 힙합</option>
+                        <option>퓨처 베이스</option>
+                        <option>하우스/테크노</option>
+                        <option>드럼앤베이스</option>
+                        <option>트랩/EDM</option>
+                        <option>재즈 피아노</option>
+                        <option>어쿠스틱 팝</option>
+                        <option>인디록</option>
+                        <option>발라드(감성)</option>
+                        <option>국악 크로스오버</option>
+                        <option>어린이 동요</option>
+                        <option>성악/클래식</option>
+                        <option>카페 재즈</option>
+                        <option>레트로 신스웨이브</option>
+                        <option>8비트 게임음악</option>
+                        <option>뉴에이지 명상</option>
+                        <option>펑크/소울</option>
+                        <option>월드뮤직(아프리카/라틴)</option>
                     </select>
                 </div>
                 
@@ -238,25 +268,81 @@
         // Lucide 아이콘 초기화
         lucide.createIcons();
 
-        // 진행률 시뮬레이션
+        // 실제 진행률
         let progress = 0;
         const progressBar = document.getElementById('progressBar');
         const progressText = document.getElementById('progressText');
-        
-        function simulateProgress() {
-            const interval = setInterval(() => {
-                progress += Math.random() * 10;
-                if (progress >= 100) {
-                    progress = 100;
-                    clearInterval(interval);
+
+        // Veo API로 실제 영상 생성
+        async function generateVideo(prompt) {
+            const requestBody = {
+                instances: [{
+                    prompt: prompt
+                }],
+                parameters: {
+                    aspectRatio: "16:9",
+                    durationSeconds: 8
+                }
+            };
+
+            const res = await fetch(
+                `https://generativelanguage.googleapis.com/v1beta/videos:generate?key=${API_KEY}`,
+                {
+                    method: "POST",
+                    headers: { "Content-Type": "application/json" },
+                    body: JSON.stringify(requestBody)
+                }
+            );
+            const data = await res.json();
+            return data.name; // operation name
+        }
+
+        async function getOperationStatus(name) {
+            const res = await fetch(
+                `https://generativelanguage.googleapis.com/v1beta/${name}?key=${API_KEY}`
+            );
+            return await res.json();
+        }
+
+        async function pollUntilDone(name) {
+            progress = 0;
+            const check = setInterval(async () => {
+                const op = await getOperationStatus(name);
+                const state = op.done ? 100 : Math.min(op.metadata?.video?.videoProgressPercent || progress + 5, 95);
+                progress = state;
+                progressBar.style.width = progress + '%';
+                progressText.textContent = Math.floor(progress) + '%';
+
+                if (op.done) {
+                    clearInterval(check);
+                    progressBar.style.width = '100%';
+                    progressText.textContent = '100%';
+
+                    const videoUri = op.response?.video?.videoUri;
+                    if (videoUri) {
+                        document.querySelector('.aspect-video').innerHTML =
+                            `<video class="w-full h-full rounded-lg" controls src="${videoUri}"></video>`;
+                    }
                     setTimeout(() => {
                         document.getElementById('modal').classList.remove('hidden');
                         document.getElementById('modal').classList.add('flex');
                     }, 500);
                 }
-                progressBar.style.width = progress + '%';
-                progressText.textContent = Math.floor(progress) + '%';
-            }, 500);
+            }, 2000);
+        }
+
+        async function handleGenerate() {
+            const prompt = document.querySelector('textarea').value.trim();
+            if (!prompt) {
+                alert('프롬프트를 입력하세요!');
+                return;
+            }
+            try {
+                const operationName = await generateVideo(prompt);
+                await pollUntilDone(operationName);
+            } catch (e) {
+                alert('영상 생성 실패: ' + e.message);
+            }
         }
 
         // 드래그 앤 드롭
@@ -281,7 +367,7 @@
         });
 
         // AI 생성 버튼 클릭
-        document.querySelector('button').addEventListener('click', simulateProgress);
+        document.querySelector('button').addEventListener('click', handleGenerate);
 
         // 모달 닫기
         function closeModal() {