Update app.py

app.py

@@ -5,6 +5,7 @@ import tempfile
 import uuid
 from pathlib import Path
 import json
+import base64
 from PIL import Image
 import fitz  # PyMuPDF for PDF handling
 
@@ -13,9 +14,10 @@ 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")
 
 # Ensure directories exist
-for dir_path in [TEMP_DIR, UPLOAD_DIR, OUTPUT_DIR, THUMBS_DIR]:
+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)):
@@ -53,39 +55,29 @@ def process_pdf(pdf_path, session_id):
             thumb_path = os.path.join(thumbs_folder, f"thumb_{page_num + 1}.png")
             create_thumbnail(image_path, thumb_path)
             
-            # Add interactive content to first page as an example
+            # Add simple interactive content to first page
             html_content = ""
-            items = []
             
             if page_num == 0:  # First page example
                 html_content = """
                 <div style="position: absolute; top: 50px; left: 50px; background-color: rgba(255,255,255,0.7); padding: 10px; border-radius: 5px;">
-                    <h2 style="color: #333;">Interactive Flipbook Example</h2>
-                    <p style="color: #666;">This page demonstrates interactive content capabilities.</p>
-                    <a href="#" data-page="2" style="color: blue; text-decoration: underline;">Go to page 2</a>
+                    <div style="color: #333; font-size: 18px; font-weight: bold;">인터랙티브 플립북 예제</div>
+                    <div style="color: #666; margin-top: 5px;">이 페이지는 인터랙티브 컨텐츠 기능을 보여줍니다.</div>
                 </div>
                 """
-            elif page_num == 1:  # Second page example with items
-                items = [
-                    {
-                        "type": "link", 
-                        "x": 50, 
-                        "y": 50, 
-                        "width": 200, 
-                        "height": 50, 
-                        "page": 1,
-                        "title": "Back to first page"
-                    }
-                ]
+            
+            # 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
             pages_info.append({
-                "src": os.path.join("output", session_id, f"page_{page_num + 1}.png"),
-                "thumb": os.path.join("thumbs", session_id, f"thumb_{page_num + 1}.png"),
-                "title": f"Page {page_num + 1}",
-                "htmlContent": html_content if html_content else None,
-                "items": items if items else None
+                "src": rel_image_path,
+                "thumb": rel_thumb_path,
+                "title": f"페이지 {page_num + 1}",
+                "htmlContent": html_content if html_content else None
             })
+            print(f"Processed PDF page {page_num+1}: {rel_image_path}")
         
         return pages_info
     except Exception as e:
@@ -129,16 +121,20 @@ 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": dest_path.replace("\\", "/"),  # Ensure forward slashes for web paths
-                "thumb": thumb_path.replace("\\", "/"),
+                "src": rel_image_path,
+                "thumb": rel_thumb_path,
                 "title": f"이미지 {i + 1}",
                 "htmlContent": html_content if html_content else None
             }
             
             pages_info.append(page_info)
-            print(f"Processed image {i+1}: {dest_path}")
+            print(f"Processed image {i+1}: {rel_image_path}")
             
         except Exception as e:
             print(f"Error processing image {img_path}: {e}")
@@ -166,10 +162,11 @@ def create_flipbook_from_pdf(pdf_file, view_mode="2d", skin="light"):
         if not pages_info:
             return """<div style="color: red; padding: 20px;">PDF 파일 처리 중 오류가 발생했습니다. 다시 시도해주세요.</div>""", "No pages processed"
         
-        # Create and return HTML for the flipbook
-        flipbook_html = generate_flipbook_html(pages_info, session_id, view_mode, skin)
-        debug_info += f"HTML generated with view mode: {view_mode}, skin: {skin}\n"
-        return flipbook_html, debug_info
+        # 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}"
@@ -196,10 +193,11 @@ def create_flipbook_from_images(images, view_mode="2d", skin="light"):
         if not pages_info:
             return """<div style="color: red; padding: 20px;">이미지 처리 중 오류가 발생했습니다. 다시 시도해주세요.</div>""", "No images processed"
         
-        # Create and return HTML for the flipbook
-        flipbook_html = generate_flipbook_html(pages_info, session_id, view_mode, skin)
-        debug_info += f"HTML generated with view mode: {view_mode}, skin: {skin}\n"
-        return flipbook_html, debug_info
+        # 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 images: {e}"
@@ -207,7 +205,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 HTML for the flipbook."""
+    """Generate a standalone HTML file for the flipbook and return iframe 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:
@@ -218,93 +216,143 @@ def generate_flipbook_html(pages_info, session_id, view_mode, skin):
     # Convert pages_info to JSON for JavaScript
     pages_json = json.dumps(pages_info)
     
-    # Create a custom ID for this flipbook
-    flipbook_id = f"flipbook_{session_id}"
+    # Create a unique filename for this session
+    html_filename = f"flipbook_{session_id}.html"
+    html_path = os.path.join(HTML_DIR, html_filename)
     
-    # HTML template with embedded CSS and JavaScript
-    html = f"""
-    <div style="height:700px; width:100%; position:relative; overflow:hidden; border:1px solid #ccc;">
-        <div id="{flipbook_id}" style="width:100%; height:100%;"></div>
-        
-        <script>
-            // Function to load scripts sequentially
-            function loadScript(src, callback) {{
-                let script = document.createElement('script');
-                script.src = src;
-                script.onload = callback;
-                document.head.appendChild(script);
+    # Create the full HTML file content
+    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;
             }}
-            
-            // Function to add CSS
-            function loadCSS(href) {{
-                let link = document.createElement('link');
-                link.rel = 'stylesheet';
-                link.type = 'text/css';
-                link.href = href;
-                document.head.appendChild(link);
+            #flipbook-container {{
+                width: 100%;
+                height: 100%;
+                position: absolute;
+                top: 0;
+                left: 0;
             }}
-            
-            // Load CSS first
-            loadCSS('flipbook.css');
-            
-            // Load scripts in sequence
-            loadScript('flipbook.js', function() {{
-                loadScript('flipbook.webgl.js', function() {{
-                    loadScript('flipbook.swipe.js', function() {{
-                        loadScript('flipbook.scroll.js', function() {{
-                            loadScript('flipbook.book3.js', function() {{
-                                // All scripts loaded, now initialize flipbook
-                                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
-                                }};
-                                
-                                try {{
-                                    const container = document.getElementById('{flipbook_id}');
-                                    if (container) {{
-                                        console.log("Container found, initializing flipbook");
-                                        new FlipBook(container, options);
-                                    }} else {{
-                                        console.error("Container not found: #{flipbook_id}");
-                                    }}
-                                }} catch (error) {{
-                                    console.error("Error initializing flipbook:", error);
-                                }}
-                            }});
-                        }});
-                    }});
-                }});
+            .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() {{
+                // Hide loading when everything is ready
+                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) {{
+                        console.log('Initializing flipbook...');
+                        new FlipBook(container, options);
+                        setTimeout(hideLoading, 1000);  // Give it time to render
+                    }} 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>
+    """
+    
+    # Write the HTML file
+    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>
     </div>
-    <div style="margin-top:20px; padding:10px; background-color:#f5f5f5; border-radius:5px;">
-        <p><strong>참고:</strong> 플립북이 보이지 않는 경우:</p>
-        <ol>
-            <li>페이지를 새로고침하세요.</li>
-            <li>다른 뷰 모드를 선택해보세요 (웹GL 대신 2D 또는 3D).</li>
-            <li>브라우저 콘솔에서 오류 메시지를 확인하세요.</li>
-        </ol>
+    <div style="margin-top:15px; 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> 플립북이 보이지 않는 경우 <a href="{html_path}" target="_blank">여기를 클릭</a>하여 새 창에서 열어보세요.
+        </div>
     </div>
     """
-    return html
+    
+    return iframe_html
 
 # Define the Gradio interface
 with gr.Blocks(title="3D Flipbook Viewer") as demo:
@@ -397,4 +445,4 @@ with gr.Blocks(title="3D Flipbook Viewer") as demo:
     
 # Launch the app
 if __name__ == "__main__":
-    demo.launch()
+    demo.launch(share=True)  # Set share=True to create a public link