Update app.py

app.py

@@ -1,437 +1,260 @@
 import gradio as gr
-import numpy as np
-from PIL import Image, ImageDraw, ImageFont
-from gradio_client import Client, handle_file
-import random
-import tempfile
-import os
-import logging
-import torch
-from diffusers import AutoencoderKL, TCDScheduler
-from diffusers.models.model_loading_utils import load_state_dict
-from huggingface_hub import hf_hub_download
-from pathlib import Path
-import torchaudio
-from einops import rearrange
-from scipy.io import wavfile
-from transformers import pipeline
-import cv2
+import time
 
-# 환경 변수 설정으로 torch.load 체크 우회 (임시 해결책)
-os.environ["TRANSFORMERS_ALLOW_UNSAFE_DESERIALIZATION"] = "1"
-
-# Spaces GPU - Hugging Face Spaces compatibility
-try:
-    import spaces
-    SPACES_GPU_AVAILABLE = True
-except ImportError:
-    SPACES_GPU_AVAILABLE = False
-    # GPU 데코레이터가 없을 때를 위한 더미 데코레이터
-    class spaces:
-        @staticmethod
-        def GPU(duration=None):
-            def decorator(func):
-                return func
-            return decorator
-
-# API URLs
-TEXT2IMG_API_URL = "http://211.233.58.201:7896"
-VIDEO_API_URL = "http://211.233.58.201:7875"
-
-# 로깅 설정
-logging.basicConfig(level=logging.INFO)
-
-# Image size presets
-IMAGE_PRESETS = {
-    "Custom": {"width": 1024, "height": 1024},
-    "1:1 Square": {"width": 1024, "height": 1024},
-    "4:3 Standard": {"width": 1024, "height": 768},
-    "16:9 Widescreen": {"width": 1024, "height": 576},
-    "9:16 Portrait": {"width": 576, "height": 1024},
-    "6:19 Ultra Tall": {"width": 324, "height": 1024},
-    "Instagram Square": {"width": 1080, "height": 1080},
-    "Instagram Story": {"width": 1080, "height": 1920},
-    "Instagram Landscape": {"width": 1080, "height": 566},
-    "Facebook Cover": {"width": 820, "height": 312},
-    "Twitter Header": {"width": 1500, "height": 500},
-    "YouTube Thumbnail": {"width": 1280, "height": 720},
-    "LinkedIn Banner": {"width": 1584, "height": 396},
+# CSS for styling
+css = """
+.link-box {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 10px;
+    padding: 20px;
+    text-align: center;
+    color: white;
+    margin: 20px 0;
 }
 
-def update_dimensions(preset):
-    if preset in IMAGE_PRESETS:
-        return IMAGE_PRESETS[preset]["width"], IMAGE_PRESETS[preset]["height"]
-    return 1024, 1024
-
-# Dummy GPU function for Hugging Face Spaces
-@spaces.GPU(duration=60)
-def dummy_gpu_function():
-    """This function exists to satisfy Hugging Face Spaces GPU requirement"""
-    import torch
-    if torch.cuda.is_available():
-        # Simple GPU operation
-        x = torch.randn(1, 3, 224, 224).cuda()
-        return x.cpu().numpy()
-    return None
-
-# Initialize dummy GPU function on startup if on Spaces
-if SPACES_GPU_AVAILABLE:
-    try:
-        dummy_gpu_function()
-    except:
-        pass
-
-def add_watermark_to_video(input_video_path, output_video_path, watermark_text="Ginigen.com"):
-    """Add watermark to video in the bottom-right corner"""
-    try:
-        # Open video
-        cap = cv2.VideoCapture(input_video_path)
-        fps = int(cap.get(cv2.CAP_PROP_FPS))
-        width = int(cap.get(cv2.CAP_PROP_FRAME_WIDTH))
-        height = int(cap.get(cv2.CAP_PROP_FRAME_HEIGHT))
-        
-        # Video writer
-        fourcc = cv2.VideoWriter_fourcc(*'mp4v')
-        out = cv2.VideoWriter(output_video_path, fourcc, fps, (width, height))
-        
-        # Watermark settings
-        font = cv2.FONT_HERSHEY_SIMPLEX
-        font_scale = min(width, height) / 500  # Scale based on video size
-        font_thickness = max(1, int(font_scale * 2))
-        
-        # Get text size
-        (text_width, text_height), baseline = cv2.getTextSize(
-            watermark_text, font, font_scale, font_thickness
-        )
-        
-        # Position in bottom-right corner with padding
-        padding = 20
-        text_x = width - text_width - padding
-        text_y = height - padding
-        
-        while True:
-            ret, frame = cap.read()
-            if not ret:
-                break
-            
-            # Add semi-transparent background for better visibility
-            overlay = frame.copy()
-            cv2.rectangle(overlay, 
-                         (text_x - 10, text_y - text_height - 10),
-                         (text_x + text_width + 10, text_y + 10),
-                         (0, 0, 0), -1)
-            frame = cv2.addWeighted(frame, 0.7, overlay, 0.3, 0)
-            
-            # Add watermark text
-            cv2.putText(frame, watermark_text, (text_x, text_y), 
-                       font, font_scale, (255, 255, 255), font_thickness, cv2.LINE_AA)
-            
-            out.write(frame)
-        
-        cap.release()
-        out.release()
-        cv2.destroyAllWindows()
-        
-        return True
-    except Exception as e:
-        logging.error(f"Watermark error: {str(e)}")
-        return False
-
-@spaces.GPU(duration=60)
-def generate_text_to_image(prompt, width, height, guidance, inference_steps, seed):
-    if not prompt:
-        return None, "Please enter a prompt"
-    
-    try:
-        client = Client(TEXT2IMG_API_URL)
-        if seed == -1:
-            seed = random.randint(0, 9999999)
-            
-        result = client.predict(
-            prompt=prompt,
-            width=int(width),
-            height=int(height),
-            guidance=float(guidance),
-            inference_steps=int(inference_steps),
-            seed=int(seed),
-            do_img2img=False,
-            init_image=None,
-            image2image_strength=0.8,
-            resize_img=True,
-            api_name="/generate_image"
-        )
-        return result[0], f"Seed used: {result[1]}"
-    except Exception as e:
-        logging.error(f"Image generation error: {str(e)}")
-        return None, f"Error: {str(e)}"
+.link-box a {
+    color: #ffd700;
+    font-weight: bold;
+    font-size: 1.2em;
+    text-decoration: none;
+}
 
-@spaces.GPU(duration=60)
-def generate_video_from_image(image, prompt="", length=4.0):
-    if image is None:
-        return None
-    
-    try:
-        # 이미지 저장
-        with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as fp:
-            temp_path = fp.name
-            Image.fromarray(image).save(temp_path)
-        
-        # API 호출
-        client = Client(VIDEO_API_URL)
-        result = client.predict(
-            input_image=handle_file(temp_path),
-            prompt=prompt if prompt else "Generate natural motion",
-            n_prompt="",
-            seed=random.randint(0, 9999999),
-            use_teacache=True,
-            video_length=float(length),
-            api_name="/process"
-        )
-        
-        os.unlink(temp_path)
-        
-        if result and len(result) > 0:
-            video_dict = result[0]
-            video_path = video_dict.get("video") if isinstance(video_dict, dict) else None
-            
-            if video_path:
-                # Add watermark
-                watermarked_path = tempfile.NamedTemporaryFile(suffix=".mp4", delete=False).name
-                if add_watermark_to_video(video_path, watermarked_path):
-                    return watermarked_path
-                else:
-                    return video_path
-            
-    except Exception as e:
-        logging.error(f"Video generation error: {str(e)}")
-        return None
+.link-box a:hover {
+    text-decoration: underline;
+}
 
-# CSS with gradient background
-css = """
-:root {
-    --primary-color: #f8c3cd;
-    --secondary-color: #b3e5fc;
-    --background-color: #f5f5f7;
-    --card-background: #ffffff;
-    --text-color: #424242;
-    --accent-color: #ffb6c1;
-    --success-color: #c8e6c9;
-    --warning-color: #fff9c4;
-    --shadow-color: rgba(0, 0, 0, 0.1);
-    --border-radius: 12px;
+.popup-style {
+    background: #fff3cd;
+    border: 2px solid #ffc107;
+    border-radius: 8px;
+    padding: 15px;
+    margin: 10px 0;
 }
 
-body, .gradio-container {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 25%, #f093fb 50%, #4facfe 75%, #00f2fe 100%) !important;
-    background-size: 400% 400% !important;
-    animation: gradientAnimation 15s ease infinite !important;
+.important-link {
+    background: #d1ecf1;
+    border: 2px solid #17a2b8;
+    border-radius: 8px;
+    padding: 20px;
+    text-align: center;
+    animation: pulse 2s infinite;
 }
 
-@keyframes gradientAnimation {
+@keyframes pulse {
     0% {
-        background-position: 0% 50%;
+        box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.7);
     }
-    50% {
-        background-position: 100% 50%;
+    70% {
+        box-shadow: 0 0 0 10px rgba(23, 162, 184, 0);
     }
     100% {
-        background-position: 0% 50%;
+        box-shadow: 0 0 0 0 rgba(23, 162, 184, 0);
     }
 }
 
-.gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-    padding: 20px !important;
-}
-
-.panel-box {
-    border-radius: var(--border-radius) !important;
-    box-shadow: 0 8px 16px var(--shadow-color) !important;
-    background-color: var(--card-background) !important;
-    padding: 20px !important;
-    margin-bottom: 20px !important;
-    backdrop-filter: blur(10px) !important;
-    background-color: rgba(255, 255, 255, 0.95) !important;
-}
-
-#generate-btn, #video-btn {
-    background: linear-gradient(135deg, #ff9a9e, #fad0c4) !important;
-    font-size: 1.1rem !important;
-    padding: 12px 24px !important;
-    margin-top: 10px !important;
-    width: 100% !important;
-    border: none !important;
-    color: white !important;
-    font-weight: bold !important;
-    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
-    transition: all 0.3s ease !important;
-}
-
-#generate-btn:hover, #video-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
-}
-
-.main-content {
-    min-height: 700px !important;
+.modal-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, 0.7);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1000;
 }
 
-h1 {
-    background: linear-gradient(135deg, #667eea, #764ba2) !important;
-    -webkit-background-clip: text !important;
-    -webkit-text-fill-color: transparent !important;
-    text-align: center !important;
-    font-size: 2.5rem !important;
-    margin-bottom: 30px !important;
-    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1) !important;
-}
-
-.gr-form {
-    background: rgba(255, 255, 255, 0.1) !important;
-    border-radius: 8px !important;
-}
-
-.gr-box {
-    border-radius: 8px !important;
-}
-
-.gr-padded {
-    padding: 15px !important;
+.modal-content {
+    background: white;
+    padding: 30px;
+    border-radius: 10px;
+    max-width: 500px;
+    text-align: center;
 }
 """
 
-# Gradio Interface
-demo = gr.Blocks(css=css, title="CINE VID Generation")
+def show_link_notification():
+    """버튼 클릭 시 링크 안내 메시지를 표시"""
+    return gr.update(visible=True)
+
+def hide_notification():
+    """알림 숨기기"""
+    return gr.update(visible=False)
 
-with demo:
-    gr.Markdown("# 🎨 FLUX VIDEO Generation")
+# Gradio 앱 생성
+with gr.Blocks(css=css, title="Link Guide Examples") as demo:
+    gr.Markdown("# 🔗 Gradio 링크 안내 예제")
+    
+    # 방법 1: Markdown을 사용한 링크
+    gr.Markdown("""
+    ## 방법 1: Markdown 링크
+    
+    👉 **중요 공지**: [여기를 클릭하여 공식 웹사이트를 방문하세요](https://www.example.com)
     
-    # Version update notice
+    ⚡ **특별 이벤트**: [지금 바로 참여하기](https://www.example.com/event) - 선착순 100명!
+    """)
+    
+    # 방법 2: HTML을 사용한 스타일링된 링크
+    gr.HTML("""
+    <div class="link-box">
+        <h3>🎁 특별 혜택 안내</h3>
+        <p>아래 링크를 클릭하여 특별 혜택을 받으세요!</p>
+        <a href="https://www.example.com" target="_blank">✨ 특별 혜택 받기 ✨</a>
+    </div>
+    """)
+    
+    # 방법 3: 중요 알림 스타일
     gr.HTML("""
-    <div style='background: linear-gradient(135deg, #ff6b6b, #4ecdc4); 
-                padding: 20px; 
-                border-radius: 10px; 
-                margin-bottom: 20px; 
-                text-align: center; 
-                box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-                animation: pulse 2s infinite;'>
-        <h3 style='color: white; margin-bottom: 10px; font-size: 1.5em;'>
-            🎉 Latest Version Update! 🎉
-        </h3>
-        <p style='color: white; margin-bottom: 15px; font-size: 1.1em;'>
-            Please click the following link to access the latest version:
-        </p>
-        <a href='https://huggingface.co/spaces/ginigen/Flux-VIDEO' 
-           target='_blank' 
-           style='display: inline-block; 
-                  padding: 12px 30px; 
-                  background: white; 
-                  color: #333; 
-                  text-decoration: none; 
-                  border-radius: 25px; 
-                  font-weight: bold; 
-                  font-size: 1.1em;
-                  transition: all 0.3s ease;
-                  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);'>
-            ✨ Go to Latest Version ✨
+    <div class="important-link">
+        <h3>⚠️ 필수 확인 사항</h3>
+        <p>서비스 이용을 위해 반드시 아래 링크를 확인해주세요:</p>
+        <a href="https://www.example.com/terms" target="_blank" style="font-size: 1.2em; color: #007bff;">
+            📋 이용약관 확인하기
         </a>
     </div>
+    """)
     
-    <style>
-    @keyframes pulse {
-        0% {
-            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0.7);
-        }
-        70% {
-            box-shadow: 0 0 0 20px rgba(255, 255, 255, 0);
-        }
-        100% {
-            box-shadow: 0 0 0 0 rgba(255, 255, 255, 0);
-        }
-    }
+    # 방법 4: 버튼 클릭 시 링크 안내
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("### 방법 4: 버튼 클릭으로 링크 안내")
+            show_link_btn = gr.Button("🔗 중요 링크 보기", variant="primary")
+            
+            link_notification = gr.HTML(
+                """
+                <div class="popup-style">
+                    <h4>📢 중요 안내</h4>
+                    <p>아래 링크를 클릭하여 추가 정보를 확인하세요:</p>
+                    <ul>
+                        <li><a href="https://www.example.com/guide" target="_blank">📖 사용 가이드</a></li>
+                        <li><a href="https://www.example.com/faq" target="_blank">❓ 자주 묻는 질문</a></li>
+                        <li><a href="https://www.example.com/contact" target="_blank">📞 문의하기</a></li>
+                    </ul>
+                </div>
+                """,
+                visible=False
+            )
+            
+            close_btn = gr.Button("닫기", visible=False)
     
-    div[style*="Latest Version Update"] a:hover {
-        transform: translateY(-2px);
-        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
-        background: #f0f0f0;
-    }
-    </style>
+    # 방법 5: 자동 팝업 스타일 (페이지 로드 시 표시)
+    gr.HTML("""
+    <script>
+    // 페이지 로드 후 3초 뒤에 알림 표시
+    setTimeout(function() {
+        // 실제로는 모달 창을 띄우거나 알림을 표시할 수 있습니다
+        console.log("링크 클릭 안내: https://www.example.com");
+    }, 3000);
+    </script>
     """)
     
-    # Single tab layout without tabs
-    with gr.Row(equal_height=True, elem_classes="main-content"):
-        # Input column
-        with gr.Column(scale=1):
-            with gr.Group(elem_classes="panel-box"):
-                gr.Markdown("### 📝 Image Generation Settings")
-                
-                prompt = gr.Textbox(
-                    label="Prompt (Korean/English supported)",
-                    placeholder="Describe the image you want to generate...",
-                    lines=3
-                )
-                
-                size_preset = gr.Dropdown(
-                    choices=list(IMAGE_PRESETS.keys()),
-                    value="1:1 Square",
-                    label="Size Preset"
-                )
-                
-                with gr.Row():
-                    width = gr.Slider(256, 2048, 1024, step=64, label="Width")
-                    height = gr.Slider(256, 2048, 1024, step=64, label="Height")
-                
-                with gr.Row():
-                    guidance = gr.Slider(1.0, 20.0, 3.5, step=0.1, label="Guidance Scale")
-                    steps = gr.Slider(1, 50, 30, step=1, label="Steps")
-                
-                seed = gr.Number(label="Seed (-1=random)", value=-1)
-                
-                generate_btn = gr.Button("🎨 Generate Image", variant="primary", elem_id="generate-btn")
-                
-            with gr.Group(elem_classes="panel-box"):
-                gr.Markdown("### 🎬 Video Generation Settings")
-                
-                video_prompt = gr.Textbox(
-                    label="(Optional) Video Prompt (Enter in English)",
-                    placeholder="Describe the motion for the video... (Leave empty for default motion)",
-                    lines=2
-                )
-                
-                video_length = gr.Slider(
-                    minimum=1, 
-                    maximum=4, 
-                    value=2, 
-                    step=0.5, 
-                    label="Video Length (seconds)",
-                    info="Choose between 1 to 4 seconds(Full version supports up to 60 seconds)"
-                )
-                
-                video_btn = gr.Button("🎬 Convert to Video", variant="secondary", elem_id="video-btn")
-        
-        # Output column
-        with gr.Column(scale=1):
-            with gr.Group(elem_classes="panel-box"):
-                gr.Markdown("### 🖼️ Generation Results")
+    # 방법 6: Info 메시지로 링크 안내
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("### 방법 5: 작업 완료 후 링크 안내")
+            
+            def process_and_show_link(text):
+                # 어떤 처리를 수행
+                time.sleep(1)  # 처리 시뮬레이션
                 
-                output_image = gr.Image(label="Generated Image", type="numpy")
-                output_seed = gr.Textbox(label="Seed Information")
-                output_video = gr.Video(label="Generated Video")
+                # 처리 완료 후 링크 안내
+                result = f"처리 완료: {text}"
+                link_msg = """
+                <div style='background: #d4edda; border: 1px solid #c3e6cb; 
+                            border-radius: 5px; padding: 15px; margin-top: 10px;'>
+                    <strong>✅ 작업이 완료되었습니다!</strong><br>
+                    결과를 확인하려면 <a href='https://www.example.com/results' 
+                    target='_blank' style='color: #155724; font-weight: bold;'>
+                    여기를 클릭</a>하세요.
+                </div>
+                """
+                return result, link_msg
+            
+            input_text = gr.Textbox(label="텍스트 입력", placeholder="처리할 텍스트를 입력하세요")
+            process_btn = gr.Button("처리하기", variant="primary")
+            output_text = gr.Textbox(label="처리 결과")
+            link_message = gr.HTML()
     
-    # Event connections
-    size_preset.change(update_dimensions, [size_preset], [width, height])
+    # 방법 7: 조건부 링크 표시
+    with gr.Row():
+        with gr.Column():
+            gr.Markdown("### 방법 6: 조건부 링크 안내")
+            
+            def check_and_show_link(agree):
+                if agree:
+                    return """
+                    <div style='background: #cfe2ff; border: 1px solid #6ea8fe; 
+                                border-radius: 5px; padding: 15px;'>
+                        <strong>감사합니다!</strong><br>
+                        이제 <a href='https://www.example.com/start' target='_blank' 
+                        style='color: #084298; font-weight: bold;'>시작하기</a> 
+                        링크를 클릭하여 진행하세요.
+                    </div>
+                    """
+                else:
+                    return """
+                    <div style='background: #f8d7da; border: 1px solid #f5c2c7; 
+                                border-radius: 5px; padding: 15px;'>
+                        동의하지 않으셨습니다. 서비스를 이용하려면 약관에 동의해주세요.
+                    </div>
+                    """
+            
+            agree_checkbox = gr.Checkbox(label="이용약관에 동의합니다")
+            conditional_link = gr.HTML()
+    
+    # 이벤트 연결
+    show_link_btn.click(
+        lambda: (gr.update(visible=True), gr.update(visible=True)),
+        outputs=[link_notification, close_btn]
+    )
     
-    generate_btn.click(
-        generate_text_to_image,
-        [prompt, width, height, guidance, steps, seed],
-        [output_image, output_seed]
+    close_btn.click(
+        lambda: (gr.update(visible=False), gr.update(visible=False)),
+        outputs=[link_notification, close_btn]
     )
     
-    video_btn.click(
-        lambda img, v_prompt, length: generate_video_from_image(img, v_prompt, length) if img is not None else None,
-        [output_image, video_prompt, video_length],
-        [output_video]
+    process_btn.click(
+        process_and_show_link,
+        inputs=[input_text],
+        outputs=[output_text, link_message]
     )
+    
+    agree_checkbox.change(
+        check_and_show_link,
+        inputs=[agree_checkbox],
+        outputs=[conditional_link]
+    )
+    
+    # 추가 예제: 모달 스타일 팝업
+    gr.HTML("""
+    <div id="modal" style="display: none;" class="modal-overlay">
+        <div class="modal-content">
+            <h2>🎉 환영합니다!</h2>
+            <p>더 많은 기능을 사용하려면 아래 링크를 방문하세요:</p>
+            <a href="https://www.example.com/premium" target="_blank" 
+               style="display: inline-block; padding: 10px 20px; 
+                      background: #007bff; color: white; 
+                      text-decoration: none; border-radius: 5px;">
+                프리미엄 가입하기
+            </a>
+            <br><br>
+            <button onclick="document.getElementById('modal').style.display='none'" 
+                    style="padding: 5px 15px; cursor: pointer;">
+                닫기
+            </button>
+        </div>
+    </div>
+    
+    <script>
+    // 모달 표시 함수
+    function showModal() {
+        document.getElementById('modal').style.display = 'flex';
+    }
+    
+    // 원하는 시점에 showModal() 호출
+    // 예: setTimeout(showModal, 5000); // 5초 후 표시
+    </script>
+    """)
 
 demo.launch()