app.py

#!/usr/bin/env python3
# -*- coding: utf-8 -*-
"""
3D Flipbook Viewer (Gradio) – 최종 수정 버전
최종 수정: 2025-05-18

- f-string 구문에서 JS의 { }를 {{ }}로 이스케이프 처리
- Python 3.9 이하 호환(typing.Optional, typing.List)
- Gradio가 생성한 임시 파일 → temp/uploads 폴더로 복사 후 처리
- /public 폴더에 최종 HTML 생성 (정적 서빙 별도 설정 필요)
"""

import os
import shutil
import uuid
import json
import logging
import traceback
from pathlib import Path
from typing import Optional, List, Dict

import gradio as gr
from PIL import Image
import fitz  # PyMuPDF

# ────────────────────────────
# 로깅 설정
# ────────────────────────────
logging.basicConfig(
    level=logging.INFO,
    format="%(asctime)s [%(levelname)s] %(message)s",
    filename="app.log",
    filemode="a",
)
logging.info("🚀 Flipbook app started")

# ────────────────────────────
# 폴더 경로 설정
# ────────────────────────────
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")

# 폴더 생성
for d in [TEMP_DIR, UPLOAD_DIR, OUTPUT_DIR, THUMBS_DIR, HTML_DIR]:
    os.makedirs(d, exist_ok=True)

# ────────────────────────────
# 유틸 함수: 이미지 썸네일
# ────────────────────────────
def create_thumbnail(src: str, dst: str, size=(300, 300)) -> Optional[str]:
    """원본 이미지를 썸네일로 저장 (이미지 열기 실패 시 None 리턴)"""
    try:
        with Image.open(src) as im:
            im.thumbnail(size, Image.LANCZOS)
            im.save(dst)
        return dst
    except Exception as e:
        logging.error("Thumbnail error: %s", e)
        return None

# ────────────────────────────
# PDF 처리 함수: PDF → 이미지
# ────────────────────────────
def process_pdf(pdf_path: str, session_id: str) -> List[Dict]:
    """PDF 파일을 페이지 별 PNG로 변환하고, 페이지 정보 리스트 반환"""
    pages_info = []
    out_dir    = os.path.join(OUTPUT_DIR, session_id)
    th_dir     = os.path.join(THUMBS_DIR, session_id)
    os.makedirs(out_dir, exist_ok=True)
    os.makedirs(th_dir,  exist_ok=True)

    try:
        pdf_doc = fitz.open(pdf_path)
        for idx, page in enumerate(pdf_doc):
            # 해상도(1.5배 정도) - 필요시 조절
            mat = fitz.Matrix(1.5, 1.5)
            pix = page.get_pixmap(matrix=mat)
            img_path = os.path.join(out_dir, f"page_{idx+1}.png")
            pix.save(img_path)

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

            # 첫 페이지 예시로 오버레이 HTML
            html_overlay = (
                """
                <div style="position:absolute;top:50px;left:50px;
                            background:rgba(255,255,255,.7);padding:10px;
                            border-radius:5px;">
                    <div style="font-size:18px;font-weight:bold;color:#333;">
                        인터랙티브 플립북 예제
                    </div>
                    <div style="margin-top:5px;color:#666;">
                        이 페이지는 인터랙티브 컨텐츠 기능을 보여줍니다.
                    </div>
                </div>
                """
                if idx == 0 else None
            )

            pages_info.append(
                {
                    "src":   f"./temp/output/{session_id}/page_{idx+1}.png",
                    "thumb": f"./temp/output/thumbs/{session_id}/thumb_{idx+1}.png",
                    "title": f"페이지 {idx+1}",
                    "htmlContent": html_overlay,
                }
            )
            logging.info("PDF page %d → %s", idx + 1, img_path)
        return pages_info

    except Exception as e:
        logging.error("process_pdf() failed: %s", e)
        return []

# ────────────────────────────
# 이미지 처리 함수
# ────────────────────────────
def process_images(img_paths: List[str], session_id: str) -> List[Dict]:
    """이미지들을 temp/output으로 복사, 썸네일 생성, 페이지 정보 반환"""
    pages_info = []
    out_dir = os.path.join(OUTPUT_DIR, session_id)
    th_dir  = os.path.join(THUMBS_DIR, session_id)
    os.makedirs(out_dir, exist_ok=True)
    os.makedirs(th_dir,  exist_ok=True)

    for i, src in enumerate(img_paths):
        try:
            dst = os.path.join(out_dir, f"image_{i+1}.png")
            shutil.copy(src, dst)

            thumb = os.path.join(th_dir, f"thumb_{i+1}.png")
            create_thumbnail(dst, thumb)

            # 페이지별 오버레이 예시
            if i == 0:
                html_overlay = """
                <div style="position:absolute;top:50px;left:50px;
                            background:rgba(255,255,255,.7);padding:10px;
                            border-radius:5px;">
                    <div style="font-size:18px;font-weight:bold;color:#333;">
                        이미지 갤러리
                    </div>
                    <div style="margin-top:5px;color:#666;">
                        갤러리의 첫 번째 이미지입니다.
                    </div>
                </div>
                """
            elif i == 1:
                html_overlay = """
                <div style="position:absolute;top:50px;left:50px;
                            background:rgba(255,255,255,.7);padding:10px;
                            border-radius:5px;">
                    <div style="font-size:18px;font-weight:bold;color:#333;">
                        두 번째 이미지
                    </div>
                    <div style="margin-top:5px;color:#666;">
                        페이지 모서리를 드래그해 넘겨보세요.
                    </div>
                </div>
                """
            else:
                html_overlay = 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_overlay,
                }
            )
            logging.info("Image %d copied → %s", i + 1, dst)

        except Exception as e:
            logging.error("process_images() error (%s): %s", src, e)

    return pages_info

# ────────────────────────────
# 플립북 HTML 생성
# ────────────────────────────
def generate_flipbook_html(
    pages_info: List[Dict],
    session_id: str,
    view_mode: str,
    skin: str
) -> str:
    """
    3D Flipbook 용 HTML 파일 생성 후, HTML 링크(버튼) 블록을 반환
    - f-string 안에서 JS의 { }는 {{ }}로 이스케이프
    """
    # htmlContent=None 제거
    for p in pages_info:
        if p.get("htmlContent") is None:
            p.pop("htmlContent", None)

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

    html = f"""
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>3D Flipbook</title>

<!-- 3D Flipbook 관련 CSS/JS -->
<link rel="stylesheet" href="/public/libs/flipbook/css/flipbook.style.css">
<script src="/public/libs/flipbook/js/flipbook.min.js"></script>
<script src="/public/libs/flipbook/js/flipbook.webgl.min.js"></script>

<style>
  html,body{{margin:0;height:100%;overflow:hidden}}
  #flipbook-container{{position:absolute;inset:0}}
  .loading{{position:absolute;top:50%;left:50%;
            transform:translate(-50%,-50%);text-align:center;font-family:sans-serif}}
  .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(0)}}100%{{transform:rotate(360deg)}}}}
</style>
</head>
<body>
<div id="flipbook-container"></div>
<div id="loading" class="loading">
  <div class="spinner"></div>
  <div>플립북 로딩 중...</div>
</div>

<script>
document.addEventListener('DOMContentLoaded', () => {{
  const hide = () => {{
    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,
      thumbnailsOnStart: true,
      btnThumbs: {{ enabled: true }},
      btnPrint: {{ enabled: true }},
      btnDownloadPages: {{ enabled: true }},
      btnDownloadPdf: {{ enabled: true }},
      btnShare: {{ enabled: true }},
      btnSound: {{ enabled: true }},
      btnExpand: {{ enabled: true }}
    }};
    new FlipBook(document.getElementById('flipbook-container'), options);
    setTimeout(hide, 1000);
  }} catch(e) {{
    console.error(e);
    alert('플립북 초기화 오류:' + e.message);
  }}
}});
</script>
</body>
</html>
"""

    Path(html_path).write_text(html, encoding="utf-8")
    public_url = f"/public/flipbooks/{html_file}"

    # 사용자에게 돌려줄 HTML 블록
    return f"""
<div style="text-align:center;padding:20px;background:#f9f9f9;border-radius:5px">
  <h2 style="margin:0;color:#333">플립북이 준비되었습니다!</h2>
  <p style="margin:15px 0">버튼을 눌러 새 창에서 확인하세요.</p>
  <a href="{public_url}" target="_blank"
     style="display:inline-block;background:#4caf50;color:#fff;
            padding:12px 24px;border-radius:4px;font-weight:bold;font-size:16px">
     플립북 열기
  </a>
</div>
"""

# ────────────────────────────
# PDF 업로드 콜백
# ────────────────────────────
def create_flipbook_from_pdf(
    pdf_file: Optional[gr.File],
    view_mode: str = "2d",
    skin: str = "light"
):
    session_id = str(uuid.uuid4())
    debug: List[str] = []

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

    try:
        # Gradio 임시 경로
        uploaded_temp_path = pdf_file.name

        # temp/uploads 폴더에 복사
        filename_only = os.path.basename(uploaded_temp_path)
        pdf_path = os.path.join(UPLOAD_DIR, filename_only)
        shutil.copyfile(uploaded_temp_path, pdf_path)

        debug.append(f"Copied PDF to: {pdf_path}")

        # PDF 처리
        pages_info = process_pdf(pdf_path, session_id)
        debug.append(f"Extracted pages: {len(pages_info)}")

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

        # 플립북 HTML
        html_block = generate_flipbook_html(pages_info, session_id, view_mode, skin)
        return html_block, "\n".join(debug)

    except Exception as e:
        tb = traceback.format_exc()
        logging.error(tb)
        debug.extend(["❌ ERROR ↓↓↓", tb])
        return (
            f"<div style='color:red;padding:20px;'>오류: {e}</div>",
            "\n".join(debug),
        )

# ────────────────────────────
# 이미지 업로드 콜백
# ────────────────────────────
def create_flipbook_from_images(
    images: Optional[List[gr.File]],
    view_mode: str = "2d",
    skin: str = "light"
):
    session_id = str(uuid.uuid4())
    debug: List[str] = []

    if not images:
        return (
            "<div style='color:red;padding:20px;'>이미지를 하나 이상 업로드하세요.</div>",
            "No images",
        )

    try:
        # 임시 이미지 경로들
        img_paths = []
        for fobj in images:
            uploaded_temp_path = fobj.name
            filename_only = os.path.basename(uploaded_temp_path)
            local_img_path = os.path.join(UPLOAD_DIR, filename_only)
            shutil.copyfile(uploaded_temp_path, local_img_path)
            img_paths.append(local_img_path)

        debug.append(f"Images: {img_paths}")

        # 이미지 처리
        pages_info = process_images(img_paths, session_id)
        debug.append(f"Processed: {len(pages_info)}")

        if not pages_info:
            raise RuntimeError("이미지 처리 실패")

        # 플립북 HTML
        html_block = generate_flipbook_html(pages_info, session_id, view_mode, skin)
        return html_block, "\n".join(debug)

    except Exception as e:
        tb = traceback.format_exc()
        logging.error(tb)
        debug.extend(["❌ ERROR ↓↓↓", tb])
        return (
            f"<div style='color:red;padding:20px;'>오류: {e}</div>",
            "\n".join(debug),
        )

# ────────────────────────────
# Gradio UI
# ────────────────────────────
with gr.Blocks(title="3D Flipbook Viewer") as demo:
    gr.Markdown("# 3D Flipbook Viewer\nPDF 또는 이미지를 업로드해 인터랙티브 플립북을 만드세요.")

    with gr.Tabs():
        # PDF 탭
        with gr.TabItem("PDF 업로드"):
            pdf_file = gr.File(label="PDF 파일", file_types=[".pdf"])
            with gr.Accordion("고급 설정", open=False):
                pdf_view = gr.Radio(["webgl", "3d", "2d", "swipe"], value="2d", label="뷰 모드")
                pdf_skin = gr.Radio(["light", "dark", "gradient"], value="light", label="스킨")
            pdf_btn   = gr.Button("PDF → 플립북", variant="primary")
            pdf_out   = gr.HTML()
            pdf_dbg   = gr.Textbox(label="디버그", lines=10)

            pdf_btn.click(
                create_flipbook_from_pdf,
                inputs=[pdf_file, pdf_view, pdf_skin],
                outputs=[pdf_out, pdf_dbg],
            )

        # 이미지 탭
        with gr.TabItem("이미지 업로드"):
            imgs = gr.File(label="이미지 파일들", file_types=["image"], file_count="multiple")
            with gr.Accordion("고급 설정", open=False):
                img_view = gr.Radio(["webgl", "3d", "2d", "swipe"], value="2d", label="뷰 모드")
                img_skin = gr.Radio(["light", "dark", "gradient"], value="light", label="스킨")
            img_btn = gr.Button("이미지 → 플립북", variant="primary")
            img_out = gr.HTML()
            img_dbg = gr.Textbox(label="디버그", lines=10)

            img_btn.click(
                create_flipbook_from_images,
                inputs=[imgs, img_view, img_skin],
                outputs=[img_out, img_dbg],
            )

    gr.Markdown(
        "### 사용법\n"
        "1. PDF 또는 이미지 탭을 선택하고 파일을 업로드합니다.\n"
        "2. 필요하면 뷰 모드/스킨을 바꿉니다.\n"
        "3. ‘플립북’ 버튼을 누르면 결과가 아래 뜹니다."
    )

# ────────────────────────────
# 실행
# ────────────────────────────
if __name__ == "__main__":
    # share=True 등 옵션을 넣어 배포/공유 가능
    demo.launch(debug=True)