Delete index.html

index.html

@@ -1,330 +0,0 @@
-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;