app.py

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

# ────────────────────────────────
# Logging 설정
# ────────────────────────────────
logging.basicConfig(
    level=logging.INFO,
    format="%(asctime)s [%(levelname)s] %(message)s",
    filename="app.log",  # 실행 디렉터리에 app.log 파일 저장
    filemode="a",
)
logging.info("🚀 Flipbook app started")

# 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:
        logging.error("Error creating thumbnail: %s", 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:
        pdf_document = fitz.open(pdf_path)

        for page_num, page in enumerate(pdf_document):
            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)

            thumb_path = os.path.join(thumbs_folder, f"thumb_{page_num + 1}.png")
            create_thumbnail(image_path, thumb_path)

            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>
            """ if page_num == 0 else None

            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,
            })
            logging.info("Processed PDF page %d: %s", page_num + 1, image_path)

        return pages_info
    except Exception as e:
        logging.error("Error processing PDF: %s", 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:
            dest_path = os.path.join(output_folder, f"image_{i + 1}.png")
            shutil.copy(img_path, dest_path)

            thumb_path = os.path.join(thumbs_folder, f"thumb_{i + 1}.png")
            create_thumbnail(img_path, thumb_path)

            if i == 0:
                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:
                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>
                """
            else:
                html_content = None

            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,
            })
            logging.info("Processed image %d: %s", i + 1, dest_path)

        except Exception as e:
            logging.error("Error processing image %s: %s", img_path, e)

    return pages_info


def create_flipbook_from_pdf(pdf_file, view_mode="2d", skin="light"):
    """Create a flipbook from an uploaded PDF."""
    session_id = str(uuid.uuid4())
    debug_info = []

    if not pdf_file:
        return (
            "<div style='color:red;padding:20px;'>PDF 파일을 업로드해주세요.</div>",
            "No file uploaded",
        )

    try:
        pdf_path = pdf_file.name
        debug_info.append(f"PDF path: {pdf_path}")

        # 1) PDF → 이미지
        pages_info = process_pdf(pdf_path, session_id)
        debug_info.append(f"Number of pages: {len(pages_info)}")

        if not pages_info:
            raise RuntimeError("PDF 처리 결과가 비어 있습니다.")

        # 2) HTML 생성
        iframe_html = generate_flipbook_html(pages_info, session_id, view_mode, skin)
        return iframe_html, "\n".join(debug_info)

    except Exception as e:
        tb = traceback.format_exc()
        logging.error(tb)
        debug_info.append("❌ ERROR ↓↓↓")
        debug_info.append(tb)
        return (
            f"<div style='color:red;padding:20px;'>오류가 발생했습니다: {e}</div>",
            "\n".join(debug_info),
        )


def create_flipbook_from_images(images, view_mode="2d", skin="light"):
    """Create a flipbook from uploaded images."""
    session_id = str(uuid.uuid4())
    debug_info = []

    if not images:
        return (
            "<div style='color:red;padding:20px;'>최소 한 개 이상의 이미지를 업로드해주세요.</div>",
            "No images uploaded",
        )

    try:
        image_paths = [img.name for img in images]
        debug_info.append(f"Image paths: {image_paths}")

        pages_info = process_images(image_paths, session_id)
        debug_info.append(f"Number of images processed: {len(pages_info)}")

        if not pages_info:
            raise RuntimeError("이미지 처리 결과가 비어 있습니다.")

        iframe_html = generate_flipbook_html(pages_info, session_id, view_mode, skin)
        return iframe_html, "\n".join(debug_info)

    except Exception as e:
        tb = traceback.format_exc()
        logging.error(tb)
        debug_info.append("❌ ERROR ↓↓↓")
        debug_info.append(tb)
        return (
            f"<div style='color:red;padding:20px;'>오류가 발생했습니다: {e}</div>",
            "\n".join(debug_info),
        )


def generate_flipbook_html(pages_info, session_id, view_mode, skin):
    """Generate a standalone HTML file for the flipbook and return link HTML."""
    for page in pages_info:
        if page.get("htmlContent") is None:
            page.pop("htmlContent", None)
        if page.get("items") is None:
            page.pop("items", None)

    pages_json = json.dumps(pages_info)
    html_filename = f"flipbook_{session_id}.html"
    html_path = os.path.join(HTML_DIR, html_filename)

    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 () {{
                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) {{
                        new FlipBook(container, options);
                        setTimeout(hideLoading, 1000);
                    }} 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>
    """

    with open(html_path, "w", encoding="utf-8") as f:
        f.write(html_content)

    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

    <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