Update app.py

app.py

@@ -1,11 +1,9 @@
 import os
 import gradio as gr
 import shutil
-import tempfile
 import uuid
 from pathlib import Path
 import json
-import base64
 from PIL import Image
 import fitz  # PyMuPDF for PDF handling
 
@@ -14,7 +12,7 @@ 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(OUTPUT_DIR, "html")
+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]:
@@ -66,18 +64,14 @@ def process_pdf(pdf_path, session_id):
                 </div>
                 """
             
-            # Get relative web paths for the HTML file
-            rel_image_path = os.path.relpath(image_path, HTML_DIR).replace("\\", "/")
-            rel_thumb_path = os.path.relpath(thumb_path, HTML_DIR).replace("\\", "/")
-            
-            # Add page info with interactive content
+            # Add page info with web-accessible paths
             pages_info.append({
-                "src": rel_image_path,
-                "thumb": rel_thumb_path,
+                "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}: {rel_image_path}")
+            print(f"Processed PDF page {page_num+1}: {image_path}")
         
         return pages_info
     except Exception as e:
@@ -121,20 +115,14 @@ def process_images(image_paths, session_id):
                 </div>
                 """
             
-            # Get relative web paths for the HTML file
-            rel_image_path = os.path.relpath(dest_path, HTML_DIR).replace("\\", "/")
-            rel_thumb_path = os.path.relpath(thumb_path, HTML_DIR).replace("\\", "/")
-            
-            # Create a simpler page structure to avoid potential compatibility issues
-            page_info = {
-                "src": rel_image_path,
-                "thumb": rel_thumb_path,
+            # 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
-            }
-            
-            pages_info.append(page_info)
-            print(f"Processed image {i+1}: {rel_image_path}")
+            })
+            print(f"Processed image {i+1}: {dest_path}")
             
         except Exception as e:
             print(f"Error processing image {img_path}: {e}")
@@ -153,20 +141,28 @@ def create_flipbook_from_pdf(pdf_file, view_mode="2d", skin="light"):
             pdf_path = pdf_file.name  # Get the file path
             debug_info += f"PDF path: {pdf_path}\n"
             
-            # Process PDF using the file path directly
-            pages_info = process_pdf(pdf_path, session_id)
-            debug_info += f"Number of pages processed: {len(pages_info)}\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"
-        
-        if not pages_info:
-            return """<div style="color: red; padding: 20px;">PDF 파일 처리 중 오류가 발생했습니다. 다시 시도해주세요.</div>""", "No pages 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 PDF: {e}"
@@ -205,7 +201,7 @@ def create_flipbook_from_images(images, view_mode="2d", skin="light"):
         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 iframe HTML."""
+    """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:
@@ -228,7 +224,7 @@ def generate_flipbook_html(pages_info, session_id, view_mode, skin):
         <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">
+        <link rel="stylesheet" type="text/css" href="../flipbook.css">
         <style>
             body, html {{
                 margin: 0;
@@ -265,11 +261,11 @@ def generate_flipbook_html(pages_info, session_id, view_mode, skin):
                 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>
+        <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>
@@ -333,13 +329,16 @@ def generate_flipbook_html(pages_info, session_id, view_mode, skin):
     with open(html_path, 'w', encoding='utf-8') as f:
         f.write(html_content)
     
-    # Return iframe HTML to embed in Gradio
-    iframe_height = 700
-    iframe_html = f"""
-    <div style="width:100%; height:{iframe_height}px; border:1px solid #ddd; border-radius:5px; overflow:hidden;">
-        <iframe src="file/{html_path}" width="100%" height="100%" frameborder="0" allowfullscreen></iframe>
+    # 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:15px; padding:15px; background-color:#f5f5f5; border-radius:5px; line-height:1.5;">
+    
+    <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>
@@ -347,12 +346,25 @@ def generate_flipbook_html(pages_info, session_id, view_mode, skin):
             <li>전체화면 버튼을 클릭하여 더 큰 화면으로 볼 수 있습니다.</li>
         </ul>
         <div style="margin-top:10px; padding:10px; background-color:#e8f4fd; border-left:4px solid #2196F3; border-radius:2px;">
-            <strong>참고:</strong> 플립북이 보이지 않는 경우 <a href="{html_path}" target="_blank">여기를 클릭</a>하여 새 창에서 열어보세요.
+            <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 iframe_html
+    return link_html
 
 # Define the Gradio interface
 with gr.Blocks(title="3D Flipbook Viewer") as demo:
@@ -445,4 +457,4 @@ with gr.Blocks(title="3D Flipbook Viewer") as demo:
     
 # Launch the app
 if __name__ == "__main__":
-    demo.launch(share=True)  # Set share=True to create a public link
+    demo.launch()  # Remove share=True as it's not supported in Spaces