Update app.py

app.py

@@ -1,427 +1,417 @@
+#!/usr/bin/env python3
+# -*- coding: utf-8 -*-
+"""
+3D Flipbook Viewer (Gradio) – 전체 소스
+최종 수정: 2025-05-18
+"""
+
+# ────────────────────────────
+# 기본 모듈
+# ────────────────────────────
 import os
-import gradio as gr
 import shutil
 import uuid
-from pathlib import Path
 import json
 import logging
 import traceback
+from pathlib import Path
+
+# 외부 라이브러리
+import gradio as gr
 from PIL import Image
-import fitz  # PyMuPDF for PDF handling
+import fitz            # PyMuPDF
 
-# ────────────────────────────────
-# Logging 설정
-# ────────────────────────────────
+# ────────────────────────────
+# 로깅 설정
+# ────────────────────────────
 logging.basicConfig(
-    level=logging.INFO,
+    level=logging.INFO,                       # 필요하면 DEBUG
     format="%(asctime)s [%(levelname)s] %(message)s",
-    filename="app.log",  # 실행 디렉터리에 app.log 파일 저장
+    filename="app.log",                       # 동일 디렉터리에 로그 파일 생성
     filemode="a",
 )
 logging.info("🚀 Flipbook app started")
 
-# Constants
-TEMP_DIR = "temp"
+# ────────────────────────────
+# 상수 / 경로
+# ────────────────────────────
+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)
+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(image_path, output_path, size=(300, 300)):
-    """Create a thumbnail from an image."""
+# ────────────────────────────
+# 유틸 함수
+# ────────────────────────────
+def create_thumbnail(src: str, dst: str, size=(300, 300)) -> str | None:
+    """원본 이미지를 썸네일로 저장"""
     try:
-        with Image.open(image_path) as img:
-            img.thumbnail(size, Image.LANCZOS)
-            img.save(output_path)
-        return output_path
+        with Image.open(src) as im:
+            im.thumbnail(size, Image.LANCZOS)
+            im.save(dst)
+        return dst
     except Exception as e:
-        logging.error("Error creating thumbnail: %s", e)
+        logging.error("Thumbnail error: %s", e)
         return None
 
 
-def process_pdf(pdf_path, session_id):
-    """Extract pages from a PDF and save as images with thumbnails."""
+# ────────────────────────────
+# PDF → 이미지
+# ────────────────────────────
+def process_pdf(pdf_path: str, session_id: str) -> list[dict]:
     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)
+    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_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)
+        pdf_doc = fitz.open(pdf_path)
+        for idx, page in enumerate(pdf_doc):
+            pix = page.get_pixmap(matrix=fitz.Matrix(2, 2))   # 2× 해상도
+            img_path = os.path.join(out_dir, f"page_{idx+1}.png")
+            pix.save(img_path)
 
-            thumb_path = os.path.join(thumbs_folder, f"thumb_{page_num + 1}.png")
-            create_thumbnail(image_path, thumb_path)
+            thumb_path = os.path.join(th_dir, f"thumb_{idx+1}.png")
+            create_thumbnail(img_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>
+            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 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)
+                """
+                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("Error processing PDF: %s", e)
+        logging.error("process_pdf() failed: %s", e)
         return []
 
 
-def process_images(image_paths, session_id):
-    """Process uploaded images and create thumbnails."""
+# ────────────────────────────
+# 이미지 업로드 처리
+# ────────────────────────────
+def process_images(img_paths: list[str], session_id: str) -> list[dict]:
     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)
+    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, img_path in enumerate(image_paths):
+    for i, src in enumerate(img_paths):
         try:
-            dest_path = os.path.join(output_folder, f"image_{i + 1}.png")
-            shutil.copy(img_path, dest_path)
+            dst = os.path.join(out_dir, f"image_{i+1}.png")
+            shutil.copy(src, dst)
 
-            thumb_path = os.path.join(thumbs_folder, f"thumb_{i + 1}.png")
-            create_thumbnail(img_path, thumb_path)
+            thumb = os.path.join(th_dir, f"thumb_{i+1}.png")
+            create_thumbnail(src, thumb)
 
             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>
+                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_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>
+                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_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)
+                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("Error processing image %s: %s", img_path, e)
+            logging.error("process_images() error (%s): %s", src, e)
 
     return pages_info
 
 
-def create_flipbook_from_pdf(pdf_file, view_mode="2d", skin="light"):
-    """Create a flipbook from an uploaded PDF."""
+# ────────────────────────────
+# 플립북 HTML 생성
+# ────────────────────────────
+def generate_flipbook_html(
+    pages_info: list[dict], session_id: str, view_mode: str, skin: str
+) -> str:
+    # None 값은 JSON 직렬화 전에 제거
+    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>
+
+<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}"
+
+    # 사용자에게 돌려줄 링크 덩어리
+    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: gr.File | None, view_mode="2d", skin="light"
+):
     session_id = str(uuid.uuid4())
-    debug_info = []
+    debug: list[str] = []
 
     if not pdf_file:
         return (
-            "<div style='color:red;padding:20px;'>PDF 파일을 업로드해주세요.</div>",
-            "No file uploaded",
+            "<div style='color:red;padding:20px;'>PDF 파일을 업로드하세요.</div>",
+            "No file",
         )
 
     try:
         pdf_path = pdf_file.name
-        debug_info.append(f"PDF path: {pdf_path}")
+        debug.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)}")
+        debug.append(f"Extracted 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)
+        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_info.append("❌ ERROR ↓↓↓")
-        debug_info.append(tb)
+        debug.extend(["❌ ERROR ↓↓↓", tb])
         return (
-            f"<div style='color:red;padding:20px;'>오류가 발생했습니다: {e}</div>",
-            "\n".join(debug_info),
+            f"<div style='color:red;padding:20px;'>오류: {e}</div>",
+            "\n".join(debug),
         )
 
 
-def create_flipbook_from_images(images, view_mode="2d", skin="light"):
-    """Create a flipbook from uploaded images."""
+# ────────────────────────────
+# 콜백: 이미지 업로드
+# ────────────────────────────
+def create_flipbook_from_images(
+    images: list[gr.File] | None, view_mode="2d", skin="light"
+):
     session_id = str(uuid.uuid4())
-    debug_info = []
+    debug: list[str] = []
 
     if not images:
         return (
-            "<div style='color:red;padding:20px;'>최소 한 개 이상의 이미지를 업로드해주세요.</div>",
-            "No images uploaded",
+            "<div style='color:red;padding:20px;'>이미지를 하나 이상 업로드하세요.</div>",
+            "No images",
         )
 
     try:
-        image_paths = [img.name for img in images]
-        debug_info.append(f"Image paths: {image_paths}")
+        img_paths = [f.name for f in images]
+        debug.append(f"Images: {img_paths}")
 
-        pages_info = process_images(image_paths, session_id)
-        debug_info.append(f"Number of images processed: {len(pages_info)}")
+        pages_info = process_images(img_paths, session_id)
+        debug.append(f"Processed: {len(pages_info)}")
 
         if not pages_info:
-            raise RuntimeError("이미지 처리 결과가 비어 있습니다.")
+            raise RuntimeError("이미지 처리 실패")
 
-        iframe_html = generate_flipbook_html(pages_info, session_id, view_mode, skin)
-        return iframe_html, "\n".join(debug_info)
+        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_info.append("❌ ERROR ↓↓↓")
-        debug_info.append(tb)
+        debug.extend(["❌ ERROR ↓↓↓", tb])
         return (
-            f"<div style='color:red;padding:20px;'>오류가 발생했습니다: {e}</div>",
-            "\n".join(debug_info),
+            f"<div style='color:red;padding:20px;'>오류: {e}</div>",
+            "\n".join(debug),
         )
 
 
-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
+# ────────────────────────────
+# Gradio UI
+# ────────────────────────────
 with gr.Blocks(title="3D Flipbook Viewer") as demo:
-    gr.Markdown("# 3D Flipbook Viewer")
-    gr.Markdown("""
-    ## 3D 플립북 뷰어
-    
-    PDF 파일이나 여러 이미지를 업로드하여 인터랙티브 3D 플립북을 만들 수 있습니다.
-    
-    ### 특징:
-    - 페이지 넘김 효과와 함께 인터랙티브한 기능 제공
-    - 첫 페이지에는 예시로 인터랙티브 요소가 포함됨
-    - 툴바를 사용하거나 페이지 모서리를 드래그하여 탐색
-    - 썸네일 보기로 빠른 탐색 가능
-    - 전체 화면으로 전환하여 더 나은 보기 경험
-    """)
-    
+    gr.Markdown("# 3D Flipbook Viewer\nPDF 또는 이미지를 업로드해 인터랙티브 플립북을 만드세요.")
+
     with gr.Tabs():
+        # PDF 탭
         with gr.TabItem("PDF 업로드"):
-            pdf_file = gr.File(label="PDF 파일 업로드", file_types=[".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
+                pdf_view = gr.Radio(
+                    ["webgl", "3d", "2d", "swipe"],
+                    value="2d",
                     label="뷰 모드",
-                    info="WebGL: 최고 품질, 2D: 가장 안정적, 3D: 중간, Swipe: 모바일용"
                 )
                 pdf_skin = gr.Radio(
-                    choices=["light", "dark", "gradient"], 
-                    value="light", 
+                    ["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]
+            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("이미지 업로드"):
-            images = gr.File(label="이미지 파일 업로드", file_types=["image"], file_count="multiple")
-            
+            imgs = 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
+                img_view = gr.Radio(
+                    ["webgl", "3d", "2d", "swipe"],
+                    value="2d",
                     label="뷰 모드",
-                    info="WebGL: 최고 품질, 2D: 가장 안정적, 3D: 중간, Swipe: 모바일용"
                 )
                 img_skin = gr.Radio(
-                    choices=["light", "dark", "gradient"], 
-                    value="light", 
+                    ["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]
+            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("""
-    ### 사용법:
-    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
+
+    gr.Markdown(
+        "### 사용법\n"
+        "1. PDF 또는 이미지 탭을 선택하고 파일을 업로드합니다.\n"
+        "2. 필요하면 뷰 모드/스킨을 바꿉니다.\n"
+        "3. ‘플립북’ 버튼을 누르면 결과가 아래 뜹니다."
+    )
+
+# ────────────────────────────
+# 실행
+# ────────────────────────────
+if __name__ == \"__main__\":
+    demo.launch(debug=True)   # share=True 필요 시 추가