Create index.html

index.html

@@ -0,0 +1,330 @@
+import React, { useState } from 'react';
+import { Video, Upload, Loader2, Download, Settings } from 'lucide-react';
+
+const VideoGenerator = () => {
+  const [mode, setMode] = useState('text-to-video');
+  const [prompt, setPrompt] = useState('');
+  const [imageFile, setImageFile] = useState(null);
+  const [imagePreview, setImagePreview] = useState('');
+  const [aspectRatio, setAspectRatio] = useState('16:9');
+  const [seed, setSeed] = useState(42);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [videoUrl, setVideoUrl] = useState('');
+  const [error, setError] = useState('');
+  const [apiKey, setApiKey] = useState('');
+  const [showApiKeyInput, setShowApiKeyInput] = useState(false);
+
+  const aspectRatioOptions = [
+    { value: '16:9', label: '16:9', description: '(YouTube, 일반 동영상)' },
+    { value: '4:3', label: '4:3', description: '(전통적인 TV 형식)' },
+    { value: '1:1', label: '1:1', description: '(Instagram 피드)' },
+    { value: '3:4', label: '3:4', description: '(Instagram 포트레이트)' },
+    { value: '9:16', label: '9:16', description: '(Instagram 릴스, TikTok)' },
+    { value: '21:9', label: '21:9', description: '(시네마틱 와이드)' },
+    { value: '9:21', label: '9:21', description: '(울트라 세로형)' }
+  ];
+
+  const handleImageUpload = (e) => {
+    const file = e.target.files[0];
+    if (file) {
+      setImageFile(file);
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        setImagePreview(reader.result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const generateVideo = async () => {
+    if (!prompt.trim()) {
+      setError('프롬프트를 입력해주세요.');
+      return;
+    }
+
+    if (mode === 'image-to-video' && !imageFile) {
+      setError('이미지를 업로드해주세요.');
+      return;
+    }
+
+    setIsGenerating(true);
+    setError('');
+    setVideoUrl('');
+
+    try {
+      // API 키 가져오기
+      const token = apiKey || process.env.RAPI_TOKEN;
+      
+      if (!token) {
+        throw new Error('Replicate API 토큰이 필요합니다. 설정에서 API 키를 입력해주세요.');
+      }
+
+      // Python 코드를 실행할 수 없으므로, 실제 구현에서는 백엔드 서버가 필요합니다
+      const pythonCode = `
+import os
+import replicate
+
+# API 토큰 설정
+os.environ["REPLICATE_API_TOKEN"] = "${token}"
+
+input = {
+    "prompt": "${prompt}",
+    "duration": 5,
+    "resolution": "480p",
+    "aspect_ratio": "${aspectRatio}",
+    "seed": ${seed}${mode === 'image-to-video' ? ',\n    "image": "' + imagePreview + '"' : ''}
+}
+
+output = replicate.run(
+    "bytedance/seedance-1-lite",
+    input=input
+)
+
+# 비디오 URL 반환
+print(output)
+      `;
+
+      // 실제 구현에서는 백엔드 API를 호출해야 합니다
+      console.log('생성할 Python 코드:', pythonCode);
+      
+      // 데모를 위한 가짜 응답
+      setTimeout(() => {
+        setVideoUrl('https://example.com/generated-video.mp4');
+        setIsGenerating(false);
+      }, 3000);
+
+    } catch (err) {
+      setError(err.message);
+      setIsGenerating(false);
+    }
+  };
+
+  return (
+    <div className="min-h-screen bg-gray-900 text-white p-8">
+      <div className="max-w-4xl mx-auto">
+        <h1 className="text-4xl font-bold mb-8 text-center">AI Video Generator</h1>
+        
+        {/* API 키 설정 */}
+        <div className="mb-6">
+          <button
+            onClick={() => setShowApiKeyInput(!showApiKeyInput)}
+            className="flex items-center gap-2 text-gray-400 hover:text-white transition-colors"
+          >
+            <Settings size={20} />
+            API 설정
+          </button>
+          
+          {showApiKeyInput && (
+            <div className="mt-2">
+              <input
+                type="password"
+                placeholder="Replicate API 토큰 입력 (선택사항)"
+                value={apiKey}
+                onChange={(e) => setApiKey(e.target.value)}
+                className="w-full p-2 bg-gray-800 rounded border border-gray-700 focus:border-blue-500 outline-none"
+              />
+              <p className="text-xs text-gray-500 mt-1">
+                환경변수 RAPI_TOKEN이 설정되어 있지 않은 경우 여기에 입력하세요.
+              </p>
+            </div>
+          )}
+        </div>
+
+        {/* 모드 선택 */}
+        <div className="mb-8">
+          <h2 className="text-xl font-semibold mb-4">생성 모드 선택</h2>
+          <div className="grid grid-cols-2 gap-4">
+            <button
+              onClick={() => setMode('text-to-video')}
+              className={`p-4 rounded-lg border-2 transition-all ${
+                mode === 'text-to-video'
+                  ? 'border-blue-500 bg-blue-500/20'
+                  : 'border-gray-700 hover:border-gray-600'
+              }`}
+            >
+              <Video className="mb-2" size={32} />
+              <h3 className="font-semibold">텍스�� to 비디오</h3>
+              <p className="text-sm text-gray-400">텍스트 설명으로 비디오 생성</p>
+            </button>
+            
+            <button
+              onClick={() => setMode('image-to-video')}
+              className={`p-4 rounded-lg border-2 transition-all ${
+                mode === 'image-to-video'
+                  ? 'border-blue-500 bg-blue-500/20'
+                  : 'border-gray-700 hover:border-gray-600'
+              }`}
+            >
+              <Upload className="mb-2" size={32} />
+              <h3 className="font-semibold">이미지 to 비디오</h3>
+              <p className="text-sm text-gray-400">이미지를 움직이는 비디오로 변환</p>
+            </button>
+          </div>
+        </div>
+
+        {/* 이미지 업로드 (이미지 to 비디오 모드) */}
+        {mode === 'image-to-video' && (
+          <div className="mb-6">
+            <h2 className="text-xl font-semibold mb-4">이미지 업로드</h2>
+            <div className="border-2 border-dashed border-gray-700 rounded-lg p-8 text-center">
+              {imagePreview ? (
+                <div className="space-y-4">
+                  <img src={imagePreview} alt="Preview" className="max-h-64 mx-auto rounded" />
+                  <button
+                    onClick={() => {
+                      setImageFile(null);
+                      setImagePreview('');
+                    }}
+                    className="text-red-400 hover:text-red-300"
+                  >
+                    이미지 제거
+                  </button>
+                </div>
+              ) : (
+                <>
+                  <Upload size={48} className="mx-auto mb-4 text-gray-600" />
+                  <input
+                    type="file"
+                    accept="image/*"
+                    onChange={handleImageUpload}
+                    className="hidden"
+                    id="image-upload"
+                  />
+                  <label
+                    htmlFor="image-upload"
+                    className="cursor-pointer text-blue-400 hover:text-blue-300"
+                  >
+                    이미지 선택
+                  </label>
+                </>
+              )}
+            </div>
+          </div>
+        )}
+
+        {/* 프롬프트 입력 */}
+        <div className="mb-6">
+          <h2 className="text-xl font-semibold mb-4">
+            {mode === 'text-to-video' ? '비디오 설명' : '영상 생성 프롬프트'}
+          </h2>
+          <textarea
+            value={prompt}
+            onChange={(e) => setPrompt(e.target.value)}
+            placeholder={
+              mode === 'text-to-video'
+                ? "생성할 비디오를 설명해주세요. 예: The sun rises slowly between tall buildings..."
+                : "이미지를 어떻게 움직이게 할지 설명해주세요. 예: Camera slowly zooms in while clouds move..."
+            }
+            className="w-full h-32 p-4 bg-gray-800 rounded-lg border border-gray-700 focus:border-blue-500 outline-none resize-none"
+          />
+        </div>
+
+        {/* 설정 옵션 */}
+        <div className="mb-8 space-y-4">
+          <h2 className="text-xl font-semibold mb-4">설정</h2>
+          
+          {/* 화면 비율 선택 */}
+          <div>
+            <label className="block text-sm font-medium mb-2">화면 비율</label>
+            <div className="grid grid-cols-2 md:grid-cols-3 gap-3">
+              {aspectRatioOptions.map((option) => (
+                <button
+                  key={option.value}
+                  onClick={() => setAspectRatio(option.value)}
+                  className={`p-3 rounded border transition-all ${
+                    aspectRatio === option.value
+                      ? 'border-blue-500 bg-blue-500/20'
+                      : 'border-gray-700 hover:border-gray-600'
+                  }`}
+                >
+                  <div className="font-semibold">{option.label}</div>
+                  <div className="text-xs text-gray-400">{option.description}</div>
+                </button>
+              ))}
+            </div>
+          </div>
+
+          {/* Seed 설정 */}
+          <div>
+            <label className="block text-sm font-medium mb-2">Seed (랜덤 시드)</label>
+            <input
+              type="number"
+              value={seed}
+              onChange={(e) => setSeed(parseInt(e.target.value) || 0)}
+              className="w-full p-2 bg-gray-800 rounded border border-gray-700 focus:border-blue-500 outline-none"
+            />
+            <p className="text-xs text-gray-500 mt-1">동일한 시드값으로 동일한 결과를 재현할 수 있습니다.</p>
+          </div>
+
+          {/* 고정 설정 표시 */}
+          <div className="text-sm text-gray-400">
+            <p>• 해상도: 480p (고정)</p>
+            <p>• 재생 시간: 5초 (고정)</p>
+          </div>
+        </div>
+
+        {/* 에러 메시지 */}
+        {error && (
+          <div className="mb-4 p-4 bg-red-500/20 border border-red-500 rounded-lg text-red-400">
+            {error}
+          </div>
+        )}
+
+        {/* 생성 버튼 */}
+        <button
+          onClick={generateVideo}
+          disabled={isGenerating}
+          className="w-full py-4 bg-blue-600 hover:bg-blue-700 disabled:bg-gray-700 rounded-lg font-semibold transition-colors flex items-center justify-center gap-2"
+        >
+          {isGenerating ? (
+            <>
+              <Loader2 className="animate-spin" size={20} />
+              비디오 생성 중...
+            </>
+          ) : (
+            <>
+              <Video size={20} />
+              비디오 생성
+            </>
+          )}
+        </button>
+
+        {/* 결과 표시 */}
+        {videoUrl && (
+          <div className="mt-8 p-6 bg-gray-800 rounded-lg">
+            <h3 className="text-xl font-semibold mb-4">생성된 비디오</h3>
+            <video
+              src={videoUrl}
+              controls
+              className="w-full rounded mb-4"
+            />
+            <a
+              href={videoUrl}
+              download="generated-video.mp4"
+              className="inline-flex items-center gap-2 px-4 py-2 bg-green-600 hover:bg-green-700 rounded transition-colors"
+            >
+              <Download size={20} />
+              비디오 다운로드
+            </a>
+          </div>
+        )}
+
+        {/* 구현 노트 */}
+        <div className="mt-12 p-4 bg-yellow-500/10 border border-yellow-500/30 rounded-lg">
+          <h4 className="font-semibold text-yellow-400 mb-2">구현 노트</h4>
+          <p className="text-sm text-gray-300">
+            이 인터페이스는 데모용입니다. 실제로 작동하려면:
+          </p>
+          <ul className="text-sm text-gray-300 mt-2 list-disc list-inside space-y-1">
+            <li>백엔드 서버에서 Replicate API를 호출해야 합니다</li>
+            <li>환경변수 RAPI_TOKEN을 설정하거나 API 키를 입력해야 합니다</li>
+            <li>bytedance/seedance-1-lite 모델을 사용합니다</li>
+            <li>생성된 비디오는 서버에서 처리 후 다운로드 가능합니다</li>
+          </ul>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default VideoGenerator;