app.py

import os
import gradio as gr
import shutil
import uuid
from pathlib import Path
import json
from PIL import Image
import fitz  # PyMuPDF for PDF handling

# Constants
TEMP_DIR = "temp"
UPLOAD_DIR = os.path.join(TEMP_DIR, "uploads")
OUTPUT_DIR = os.path.join(TEMP_DIR, "output")
THUMBS_DIR = os.path.join(OUTPUT_DIR, "thumbs")
HTML_DIR = os.path.join("public", "flipbooks")  # Directory accessible via web

# Ensure directories exist
for dir_path in [TEMP_DIR, UPLOAD_DIR, OUTPUT_DIR, THUMBS_DIR, HTML_DIR]:
    os.makedirs(dir_path, exist_ok=True)

def create_thumbnail(image_path, output_path, size=(300, 300)):
    """Create a thumbnail from an image."""
    try:
        with Image.open(image_path) as img:
            img.thumbnail(size, Image.LANCZOS)
            img.save(output_path)
        return output_path
    except Exception as e:
        print(f"Error creating thumbnail: {e}")
        return None

def process_pdf(pdf_path, session_id):
    """Extract pages from a PDF and save as images with thumbnails."""
    pages_info = []
    output_folder = os.path.join(OUTPUT_DIR, session_id)
    thumbs_folder = os.path.join(THUMBS_DIR, session_id)
    
    os.makedirs(output_folder, exist_ok=True)
    os.makedirs(thumbs_folder, exist_ok=True)
    
    try:
        # Open the PDF
        pdf_document = fitz.open(pdf_path)
        
        # Process each page
        for page_num, page in enumerate(pdf_document):
            # Render page to an image with a higher resolution
            pix = page.get_pixmap(matrix=fitz.Matrix(2, 2))
            image_path = os.path.join(output_folder, f"page_{page_num + 1}.png")
            pix.save(image_path)
            
            # Create thumbnail
            thumb_path = os.path.join(thumbs_folder, f"thumb_{page_num + 1}.png")
            create_thumbnail(image_path, thumb_path)
            
            # Add simple interactive content to first page
            html_content = ""
            
            if page_num == 0:  # First page example
                html_content = """
                <div style="position: absolute; top: 50px; left: 50px; background-color: rgba(255,255,255,0.7); padding: 10px; border-radius: 5px;">
                    <div style="color: #333; font-size: 18px; font-weight: bold;">인터랙티브 플립북 예제</div>
                    <div style="color: #666; margin-top: 5px;">이 페이지는 인터랙티브 컨텐츠 기능을 보여줍니다.</div>
                </div>
                """
            
            # Add page info with web-accessible paths
            pages_info.append({
                "src": f"./temp/output/{session_id}/page_{page_num + 1}.png",
                "thumb": f"./temp/output/thumbs/{session_id}/thumb_{page_num + 1}.png",
                "title": f"페이지 {page_num + 1}",
                "htmlContent": html_content if html_content else None
            })
            print(f"Processed PDF page {page_num+1}: {image_path}")
        
        return pages_info
    except Exception as e:
        print(f"Error processing PDF: {e}")
        return []

def process_images(image_paths, session_id):
    """Process uploaded images and create thumbnails."""
    pages_info = []
    output_folder = os.path.join(OUTPUT_DIR, session_id)
    thumbs_folder = os.path.join(THUMBS_DIR, session_id)
    
    os.makedirs(output_folder, exist_ok=True)
    os.makedirs(thumbs_folder, exist_ok=True)
    
    for i, img_path in enumerate(image_paths):
        try:
            # Copy original image to output folder
            dest_path = os.path.join(output_folder, f"image_{i + 1}.png")
            shutil.copy(img_path, dest_path)
            
            # Create thumbnail
            thumb_path = os.path.join(thumbs_folder, f"thumb_{i + 1}.png")
            create_thumbnail(img_path, thumb_path)
            
            # Add interactive content as simple text overlays to avoid compatibility issues
            html_content = ""
            
            if i == 0:  # First image example with HTML content
                html_content = """
                <div style="position: absolute; top: 50px; left: 50px; background-color: rgba(255,255,255,0.7); padding: 10px; border-radius: 5px;">
                    <div style="color: #333; font-size: 18px; font-weight: bold;">이미지 갤러리</div>
                    <div style="color: #666; margin-top: 5px;">갤러리의 첫 번째 이미지입니다.</div>
                </div>
                """
            elif i == 1:  # Second image
                html_content = """
                <div style="position: absolute; top: 50px; left: 50px; background-color: rgba(255,255,255,0.7); padding: 10px; border-radius: 5px;">
                    <div style="color: #333; font-size: 18px; font-weight: bold;">두 번째 이미지</div>
                    <div style="color: #666; margin-top: 5px;">페이지를 넘기거나 모서리를 드래그하여 이미지를 탐색할 수 있습니다.</div>
                </div>
                """
            
            # Add page info with web-accessible paths
            pages_info.append({
                "src": f"./temp/output/{session_id}/image_{i + 1}.png",
                "thumb": f"./temp/output/thumbs/{session_id}/thumb_{i + 1}.png",
                "title": f"이미지 {i + 1}",
                "htmlContent": html_content if html_content else None
            })
            print(f"Processed image {i+1}: {dest_path}")
            
        except Exception as e:
            print(f"Error processing image {img_path}: {e}")
    
    return pages_info

def create_flipbook_from_pdf(pdf_file, view_mode="2d", skin="light"):
    """Create a flipbook from uploaded PDF."""
    try:
        session_id = str(uuid.uuid4())
        pages_info = []
        debug_info = ""
        
        if pdf_file is not None:
            # In Gradio, pdf_file is a file path string, not the actual content
            pdf_path = pdf_file.name  # Get the file path
            debug_info += f"PDF path: {pdf_path}\n"
            
            # Copy the PDF file to a location accessible by the public URL
            pdf_public_path = os.path.join(HTML_DIR, f"pdf_{session_id}.pdf")
            shutil.copy(pdf_path, pdf_public_path)
            
            # Create a simple HTML page with direct PDF loading
            html_filename = f"flipbook_{session_id}.html"
            html_path = os.path.join(HTML_DIR, html_filename)
            
            # Create HTML content that uses CDN resources
            html_content = create_flipbook_html_page(f"pdf_{session_id}.pdf", session_id, view_mode, skin)
            
            # Write the HTML file
            with open(html_path, 'w', encoding='utf-8') as f:
                f.write(html_content)
            
            # Generate link to the HTML file
            public_url = f"/public/flipbooks/{html_filename}"
            flipbook_link = generate_flipbook_link(public_url, session_id, view_mode, skin)
            
            return flipbook_link, debug_info
        else:
            return """<div style="color: red; padding: 20px;">PDF 파일을 업로드해주세요.</div>""", "No file uploaded"
    
    except Exception as e:
        error_msg = f"Error creating flipbook from PDF: {e}"
        print(error_msg)
        return f"""<div style="color: red; padding: 20px;">오류가 발생했습니다: {str(e)}</div>""", error_msg

def create_flipbook_from_images(images, view_mode="2d", skin="light"):
    """Create a flipbook from uploaded images."""
    try:
        session_id = str(uuid.uuid4())
        pages_info = []
        debug_info = ""
        
        if images is not None and len(images) > 0:
            # Process images using file paths
            image_paths = [img.name for img in images]
            debug_info += f"Image paths: {image_paths}\n"
            
            pages_info = process_images(image_paths, session_id)
            debug_info += f"Number of images processed: {len(pages_info)}\n"
        else:
            return """<div style="color: red; padding: 20px;">최소 한 개 이상의 이미지를 업로드해주세요.</div>""", "No images uploaded"
        
        if not pages_info:
            return """<div style="color: red; padding: 20px;">이미지 처리 중 오류가 발생했습니다. 다시 시도해주세요.</div>""", "No images processed"
        
        # Generate HTML file and return iframe HTML
        iframe_html = generate_flipbook_html(pages_info, session_id, view_mode, skin)
        debug_info += f"HTML file generated with view mode: {view_mode}, skin: {skin}\n"
        
        return iframe_html, debug_info
    
    except Exception as e:
        error_msg = f"Error creating flipbook from images: {e}"
        print(error_msg)
        return f"""<div style="color: red; padding: 20px;">오류가 발생했습니다: {str(e)}</div>""", error_msg

def generate_flipbook_html(pages_info, session_id, view_mode, skin):
    """Generate a standalone HTML file for the flipbook and return link HTML."""
    # Clean up pages_info to remove None values for JSON serialization
    for page in pages_info:
        if "htmlContent" in page and page["htmlContent"] is None:
            del page["htmlContent"]
        if "items" in page and page["items"] is None:
            del page["items"]
    
    # Convert pages_info to JSON for JavaScript
    pages_json = json.dumps(pages_info)
    
    # Create a unique filename for this session
    html_filename = f"flipbook_{session_id}.html"
    html_path = os.path.join(HTML_DIR, html_filename)
    
    # Create the full HTML file content
    html_content = f"""
    <!DOCTYPE html>
    <html lang="ko">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>3D 플립북</title>
        <link rel="stylesheet" type="text/css" href="../flipbook.css">
        <style>
            body, html {{
                margin: 0;
                padding: 0;
                height: 100%;
                overflow: hidden;
            }}
            #flipbook-container {{
                width: 100%;
                height: 100%;
                position: absolute;
                top: 0;
                left: 0;
            }}
            .loading {{
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                text-align: center;
                font-family: Arial, sans-serif;
            }}
            .loading .spinner {{
                width: 50px;
                height: 50px;
                border: 5px solid #f3f3f3;
                border-top: 5px solid #3498db;
                border-radius: 50%;
                animation: spin 1s linear infinite;
                margin: 0 auto 20px;
            }}
            @keyframes spin {{
                0% {{ transform: rotate(0deg); }}
                100% {{ transform: rotate(360deg); }}
            }}
        </style>
        <script src="../flipbook.js"></script>
        <script src="../flipbook.webgl.js"></script>
        <script src="../flipbook.swipe.js"></script>
        <script src="../flipbook.scroll.js"></script>
        <script src="../flipbook.book3.js"></script>
    </head>
    <body>
        <div id="flipbook-container"></div>
        <div id="loading" class="loading">
            <div class="spinner"></div>
            <div>플립북 로딩 중...</div>
        </div>
        
        <script>
            document.addEventListener('DOMContentLoaded', function() {{
                // Hide loading when everything is ready
                function hideLoading() {{
                    document.getElementById('loading').style.display = 'none';
                }}
                
                try {{
                    const options = {{
                        pages: {pages_json},
                        viewMode: '{view_mode}',
                        skin: '{skin}',
                        responsiveView: true,
                        singlePageMode: false,
                        singlePageModeIfMobile: true,
                        pageFlipDuration: 1,
                        sound: true,
                        backgroundMusic: false,
                        thumbnailsOnStart: true,
                        btnThumbs: {{ enabled: true }},
                        btnPrint: {{ enabled: true }},
                        btnDownloadPages: {{ enabled: true }},
                        btnDownloadPdf: {{ enabled: true }},
                        btnShare: {{ enabled: true }},
                        btnSound: {{ enabled: true }},
                        btnExpand: {{ enabled: true }},
                        rightToLeft: false,
                        autoplayOnStart: false,
                        autoplayInterval: 3000
                    }};
                    
                    const container = document.getElementById('flipbook-container');
                    if (container) {{
                        console.log('Initializing flipbook...');
                        new FlipBook(container, options);
                        setTimeout(hideLoading, 1000);  // Give it time to render
                    }} else {{
                        console.error('Flipbook container not found');
                        alert('오류: 플립북 컨테이너를 찾을 수 없습니다.');
                    }}
                }} catch (error) {{
                    console.error('Error initializing flipbook:', error);
                    alert('플립북 초기화 중 오류가 발생했습니다: ' + error.message);
                    document.getElementById('loading').innerHTML = '<div>오류가 발생했습니다.</div>';
                }}
            }});
        </script>
    </body>
    </html>
    """
    
    # Write the HTML file
    with open(html_path, 'w', encoding='utf-8') as f:
        f.write(html_content)
    
    # Return HTML with a direct link to open the flipbook in a new tab
    public_url = f"/public/flipbooks/{html_filename}"
    link_html = f"""
    <div style="text-align:center; padding:20px; background-color:#f9f9f9; border-radius:5px; margin-bottom:20px;">
        <h2 style="margin-top:0; color:#333;">플립북이 준비되었습니다!</h2>
        <p style="margin-bottom:20px;">아래 버튼을 클릭하여 플립북을 새 창에서 열어보세요.</p>
        <a href="{public_url}" target="_blank" style="display:inline-block; background-color:#4CAF50; color:white; padding:12px 24px; text-decoration:none; border-radius:4px; font-weight:bold; font-size:16px;">플립북 열기</a>
    </div>
    
    <div style="margin-top:20px; padding:15px; background-color:#f5f5f5; border-radius:5px; line-height:1.5;">
        <h3 style="margin-top:0; color:#333;">사용 팁:</h3>
        <ul style="margin:10px 0; padding-left:20px;">
            <li>페이지 모서리를 드래그하여 넘길 수 있습니다.</li>
            <li>하단 툴바의 아이콘을 사용하여 다양한 기능을 활용하세요.</li>
            <li>전체화면 버튼을 클릭하여 더 큰 화면으로 볼 수 있습니다.</li>
        </ul>
        <div style="margin-top:10px; padding:10px; background-color:#e8f4fd; border-left:4px solid #2196F3; border-radius:2px;">
            <strong>참고:</strong> 플립북은 2D 모드에서 가장 안정적으로 작동합니다.
        </div>
    </div>
    
    <div style="margin-top:15px; background-color:#f5f5f5; border-radius:5px; padding:10px;">
        <details>
            <summary style="cursor:pointer; color:#2196F3; font-weight:bold;">기술적 세부사항 (개발자용)</summary>
            <div style="margin-top:10px;">
                <p>세션 ID: {session_id}</p>
                <p>HTML 파일 경로: {html_path}</p>
                <p>페이지 수: {len(pages_info)}</p>
                <p>뷰 모드: {view_mode}</p>
                <p>스킨: {skin}</p>
            </div>
        </details>
    </div>
    """
    
    return link_html

# Define the Gradio interface
with gr.Blocks(title="3D Flipbook Viewer") as demo:
    gr.Markdown("# 3D Flipbook Viewer")
    gr.Markdown("""
    ## 3D 플립북 뷰어
    
    PDF 파일이나 여러 이미지를 업로드하여 인터랙티브 3D 플립북을 만들 수 있습니다.
    
    ### 특징:
    - 페이지 넘김 효과와 함께 인터랙티브한 기능 제공
    - 첫 페이지에는 예시로 인터랙티브 요소가 포함됨
    - 툴바를 사용하거나 페이지 모서리를 드래그하여 탐색
    - 썸네일 보기로 빠른 탐색 가능
    - 전체 화면으로 전환하여 더 나은 보기 경험
    """)
    
    with gr.Tabs():
        with gr.TabItem("PDF 업로드"):
            pdf_file = gr.File(label="PDF 파일 업로드", file_types=[".pdf"])
            
            with gr.Accordion("고급 설정", open=False):
                pdf_view_mode = gr.Radio(
                    choices=["webgl", "3d", "2d", "swipe"], 
                    value="2d",  # Changed default to 2d for better compatibility
                    label="뷰 모드",
                    info="WebGL: 최고 품질, 2D: 가장 안정적, 3D: 중간, Swipe: 모바일용"
                )
                pdf_skin = gr.Radio(
                    choices=["light", "dark", "gradient"], 
                    value="light", 
                    label="스킨",
                    info="light: 밝은 테마, dark: 어두운 테마, gradient: 그라데이션 테마"
                )
                
            pdf_create_btn = gr.Button("PDF에서 플립북 만들기", variant="primary", size="lg")
            pdf_debug = gr.Textbox(label="디버그 정보", visible=False)
            pdf_output = gr.HTML(label="플립북 결과물")
            
            # Set up PDF event handler
            pdf_create_btn.click(
                fn=create_flipbook_from_pdf, 
                inputs=[pdf_file, pdf_view_mode, pdf_skin], 
                outputs=[pdf_output, pdf_debug]
            )
            
        with gr.TabItem("이미지 업로드"):
            images = gr.File(label="이미지 파일 업로드", file_types=["image"], file_count="multiple")
            
            with gr.Accordion("고급 설정", open=False):
                img_view_mode = gr.Radio(
                    choices=["webgl", "3d", "2d", "swipe"], 
                    value="2d",  # Changed default to 2d for better compatibility
                    label="뷰 모드",
                    info="WebGL: 최고 품질, 2D: 가장 안정적, 3D: 중간, Swipe: 모바일용"
                )
                img_skin = gr.Radio(
                    choices=["light", "dark", "gradient"], 
                    value="light", 
                    label="스킨",
                    info="light: 밝은 테마, dark: 어두운 테마, gradient: 그라데이션 테마"
                )
                
            img_create_btn = gr.Button("이미지에서 플립북 만들기", variant="primary", size="lg")
            img_debug = gr.Textbox(label="디버그 정보", visible=False)
            img_output = gr.HTML(label="플립북 결과물")
            
            # Set up image event handler
            img_create_btn.click(
                fn=create_flipbook_from_images, 
                inputs=[images, img_view_mode, img_skin], 
                outputs=[img_output, img_debug]
            )
    
    gr.Markdown("""
    ### 사용법:
    1. 컨텐츠 유형에 따라 탭을 선택하세요 (PDF 또는 이미지)
    2. 파일을 업로드하세요
    3. 필요에 따라 고급 설정에서 뷰 모드와 스킨을 조정하세요
    4. 플립북 만들기 버튼을 클릭하세요
    5. 출력 영역에서 플립북과 상호작용하세요
    
    ### 참고:
    - 처음 페이지에는 예시로 인터랙티브 요소와 링크가 포함되어 있습니다
    - 최상의 결과를 위해 선명한 텍스트와 이미지가 있는 PDF를 사용하세요
    - 지원되는 이미지 형식: JPG, PNG, GIF 등
    - 플립북이 보이지 않는 경우, 2D 모드를 선택하고 다시 시도해보세요
    """)

    
# Launch the app
if __name__ == "__main__":
    demo.launch()  # Remove share=True as it's not supported in Spaces