Update app.py

app.py

@@ -1,260 +1,135 @@
 import gradio as gr
-import time
 
-# CSS for styling
+# Simple CSS for styling
 css = """
-.link-box {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-    border-radius: 10px;
-    padding: 20px;
+.main-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 40px 20px;
     text-align: center;
+}
+
+.redirect-box {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20px;
+    padding: 60px 40px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    margin: 20px auto;
+}
+
+.redirect-box h1 {
     color: white;
-    margin: 20px 0;
+    font-size: 2.5em;
+    margin-bottom: 20px;
 }
 
-.link-box a {
-    color: #ffd700;
-    font-weight: bold;
-    font-size: 1.2em;
-    text-decoration: none;
+.redirect-box p {
+    color: white;
+    font-size: 1.3em;
+    margin-bottom: 30px;
+    opacity: 0.95;
 }
 
-.link-box a:hover {
-    text-decoration: underline;
+.redirect-link {
+    display: inline-block;
+    background: white;
+    color: #667eea;
+    padding: 15px 40px;
+    border-radius: 30px;
+    text-decoration: none;
+    font-size: 1.2em;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
 }
 
-.popup-style {
-    background: #fff3cd;
-    border: 2px solid #ffc107;
-    border-radius: 8px;
-    padding: 15px;
-    margin: 10px 0;
+.redirect-link:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
 }
+"""
 
-.important-link {
-    background: #d1ecf1;
-    border: 2px solid #17a2b8;
-    border-radius: 8px;
-    padding: 20px;
+# Create Gradio app
+with gr.Blocks(css=css, title="Redirect to FLUX VIDEO") as demo:
+    gr.HTML("""
+    <div class="main-container">
+        <div class="redirect-box">
+            <h1>🎨 Welcome to FLUX VIDEO Generation</h1>
+            <p>Please visit our latest version for the best experience</p>
+            <a href="https://huggingface.co/spaces/ginigen/Flux-VIDEO" 
+               target="_blank" 
+               class="redirect-link">
+                Go to FLUX VIDEO →
+            </a>
+        </div>
+    </div>
+    """)
+
+demo.launch()import gradio as gr
+
+# Simple CSS for styling
+css = """
+.main-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 40px 20px;
     text-align: center;
-    animation: pulse 2s infinite;
 }
 
-@keyframes pulse {
-    0% {
-        box-shadow: 0 0 0 0 rgba(23, 162, 184, 0.7);
-    }
-    70% {
-        box-shadow: 0 0 0 10px rgba(23, 162, 184, 0);
-    }
-    100% {
-        box-shadow: 0 0 0 0 rgba(23, 162, 184, 0);
-    }
+.redirect-box {
+    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    border-radius: 20px;
+    padding: 60px 40px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
+    margin: 20px auto;
 }
 
-.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;
+.redirect-box h1 {
+    color: white;
+    font-size: 2.5em;
+    margin-bottom: 20px;
 }
 
-.modal-content {
-    background: white;
-    padding: 30px;
-    border-radius: 10px;
-    max-width: 500px;
-    text-align: center;
+.redirect-box p {
+    color: white;
+    font-size: 1.3em;
+    margin-bottom: 30px;
+    opacity: 0.95;
 }
-"""
 
-def show_link_notification():
-    """버튼 클릭 시 링크 안내 메시지를 표시"""
-    return gr.update(visible=True)
+.redirect-link {
+    display: inline-block;
+    background: white;
+    color: #667eea;
+    padding: 15px 40px;
+    border-radius: 30px;
+    text-decoration: none;
+    font-size: 1.2em;
+    font-weight: bold;
+    transition: all 0.3s ease;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
+}
 
-def hide_notification():
-    """알림 숨기기"""
-    return gr.update(visible=False)
+.redirect-link:hover {
+    transform: translateY(-3px);
+    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
+}
+"""
 
-# 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)
-    
-    ⚡ **특별 이벤트**: [지금 바로 참여하기](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 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>
-    """)
-    
-    # 방법 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)
-    
-    # 방법 5: 자동 팝업 스타일 (페이지 로드 시 표시)
-    gr.HTML("""
-    <script>
-    // 페이지 로드 후 3초 뒤에 알림 표시
-    setTimeout(function() {
-        // 실제로는 모달 창을 띄우거나 알림을 표시할 수 있습니다
-        console.log("링크 클릭 안내: https://www.example.com");
-    }, 3000);
-    </script>
-    """)
-    
-    # 방법 6: Info 메시지로 링크 안내
-    with gr.Row():
-        with gr.Column():
-            gr.Markdown("### 방법 5: 작업 완료 후 링크 안내")
-            
-            def process_and_show_link(text):
-                # 어떤 처리를 수행
-                time.sleep(1)  # 처리 시뮬레이션
-                
-                # 처리 완료 후 링크 안내
-                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()
-    
-    # 방법 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]
-    )
-    
-    close_btn.click(
-        lambda: (gr.update(visible=False), gr.update(visible=False)),
-        outputs=[link_notification, close_btn]
-    )
-    
-    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]
-    )
-    
-    # 추가 예제: 모달 스타일 팝업
+# Create Gradio app
+with gr.Blocks(css=css, title="Redirect to FLUX VIDEO") as demo:
     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;">
-                프리미엄 가입하기
+    <div class="main-container">
+        <div class="redirect-box">
+            <h1>🎨 Welcome to FLUX VIDEO Generation</h1>
+            <p>Please visit our latest version for the best experience</p>
+            <a href="https://huggingface.co/spaces/ginigen/Flux-VIDEO" 
+               target="_blank" 
+               class="redirect-link">
+                Go to FLUX VIDEO →
             </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()