Update app.py

app.py

@@ -1,436 +1,113 @@
-#!/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
+# app.py
+#
+# Hugging Face Spaces  ➜  Build type: "FastAPI" (Python)
+# 실행 시 http://<space-url>/ 로 접속하면 FlipBook UI가 표시됩니다.
 
-    except Exception as e:
-        logging.error("process_pdf() failed: %s", e)
-        return []
+from fastapi import FastAPI
+from fastapi.responses import HTMLResponse
+from fastapi.staticfiles import StaticFiles
+import pathlib
 
-# ────────────────────────────
-# 이미지 처리 함수
-# ────────────────────────────
-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)
+BASE = pathlib.Path(__file__).parent
 
-    for i, src in enumerate(img_paths):
-        try:
-            dst = os.path.join(out_dir, f"image_{i+1}.png")
-            shutil.copy(src, dst)
+app = FastAPI()
 
-            thumb = os.path.join(th_dir, f"thumb_{i+1}.png")
-            create_thumbnail(dst, thumb)
+# ── 1. 같은 폴더의 정적 파일(js / css / img / mp3 등)을  /static  경로로 서빙
+app.mount("/static", StaticFiles(directory=BASE), name="static")
 
-            # 페이지별 오버레이 예시
-            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"""
+# ── 2. index.html 소스 (script/link 경로만 /static/ 로 바꿈)
+INDEX_HTML = """
 <!DOCTYPE html>
 <html lang="ko">
 <head>
 <meta charset="UTF-8">
-<meta name="viewport" content="width=device-width,initial-scale=1">
-<title>3D Flipbook</title>
+<title>FlipBook – 업로드 + 내장 사운드</title>
+
+<link rel="stylesheet" href="/static/flipbook.css">
 
-<!-- 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>
+<!-- 필수 JS 순서 -->
+<script src="/static/three.js"></script>
+<script src="/static/iscroll.js"></script>
+<script src="/static/mark.js"></script>
+<script src="/static/mod3d.js"></script>
+
+<script src="/static/flipbook.js"></script>
+<script src="/static/flipbook.book3.js"></script>
+<script src="/static/flipbook.scroll.js"></script>
+<script src="/static/flipbook.swipe.js"></script>
+<script src="/static/flipbook.webgl.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)}}}}
+ body{margin:0;font-family:sans-serif;background:#f4f4f4}
+ h1{text-align:center;margin:24px 0}
+ #viewer{width:900px;height:600px;margin:0 auto 40px;background:#fff;border:1px solid #ccc}
+ .upload-wrapper{display:flex;justify-content:center}
+ #uploadBtn{
+   all:unset;width:44px;height:44px;line-height:44px;text-align:center;
+   font-size:26px;border-radius:50%;cursor:pointer;
+   background:#ffb84d;color:#fff;box-shadow:0 2px 4px rgba(0,0,0,.2);transition:.2s;
+ }
+ #uploadBtn:hover{transform:translateY(-2px);box-shadow:0 4px 8px rgba(0,0,0,.25)}
+ #fileInput{display:none}
 </style>
 </head>
 <body>
-<div id="flipbook-container"></div>
-<div id="loading" class="loading">
-  <div class="spinner"></div>
-  <div>플립북 로딩 중...</div>
+
+<h1>Real3D FlipBook – 이미지 업로드 + 사운드 ✨</h1>
+
+<div id="viewer"></div>
+
+<div class="upload-wrapper">
+  <button id="uploadBtn" title="이미지 업로드">📷</button>
+  <input id="fileInput" type="file" accept="image/*" multiple />
 </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);
-  }}
-}});
+let book=null;
+const holder=document.getElementById('viewer');
+
+document.getElementById('uploadBtn').onclick=()=>document.getElementById('fileInput').click();
+
+document.getElementById('fileInput').onchange=e=>{
+  if(!e.target.files.length) return;
+  const files=[...e.target.files];
+  const pages=[];
+  let done=0;
+  files.forEach((f,i)=>{
+    const rd=new FileReader();
+    rd.onload=ev=>{
+      pages[i]={src:ev.target.result,thumb:ev.target.result};
+      if(++done===files.length) createBook(pages);
+    };
+    rd.readAsDataURL(f);
+  });
+};
+
+function createBook(pages){
+  if(book){ book.destroy(); holder.innerHTML=''; }
+
+  book=new FlipBook(holder,{
+    pages,
+    viewMode:'webgl',
+    autoSize:true,
+    flipDuration:800,
+    backgroundColor:'#ffffff',
+
+    sound:true,
+    assets:{
+      flipMp3:'/static/turnPage2.mp3',
+      hardFlipMp3:'/static/turnPage2.mp3'
+    },
+
+    controlsProps:{enableFullscreen:true,thumbnails:true}
+  });
+}
 </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)
+# ── 3. 라우터:  GET /  →  index.html 반환
+@app.get("/", response_class=HTMLResponse)
+async def root():
+    return INDEX_HTML