Update app.py

app.py

@@ -111,105 +111,100 @@ def process_images(image_paths, session_id):
             thumb_path = os.path.join(thumbs_folder, f"thumb_{i + 1}.png")
             create_thumbnail(img_path, thumb_path)
             
-            # Add interactive content to specific pages as examples
+            # Add interactive content as simple text overlays to avoid compatibility issues
             html_content = ""
-            items = []
             
             if i == 0:  # First image example with HTML content
                 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;">Image Gallery</h2>
-                    <p style="color: #666;">This is the first image in your gallery.</p>
-                    <a href="#" data-page="2" style="color: blue; text-decoration: underline;">Next Image</a>
+                    <div style="color: #333; font-size: 18px; font-weight: bold;">이미지 갤러리</div>
+                    <div style="color: #666; margin-top: 5px;">갤러리의 첫 번째 이미지입니다.</div>
+                </div>
+                """
+            elif i == 1:  # Second image
+                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>
                 </div>
                 """
-            elif i == 1:  # Second image with video example (if available)
-                items = [
-                    {
-                        "type": "link", 
-                        "x": 50, 
-                        "y": 50, 
-                        "width": 200, 
-                        "height": 50, 
-                        "page": 1,
-                        "title": "Previous image"
-                    }
-                ]
-                
-                # Example of adding a YouTube video if it's the second image
-                if len(image_paths) > 1:
-                    html_content = """
-                    <iframe class="flipbook-page-item" 
-                           src="https://www.youtube.com/embed/dQw4w9WgXcQ" 
-                           style="top:200px;left:50px;width:300px;height:200px;" 
-                           frameborder="0" 
-                           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" 
-                           allowfullscreen="">
-                    </iframe>
-                    """
             
-            # Add page info with interactive content
-            pages_info.append({
-                "src": os.path.join("output", session_id, f"image_{i + 1}.png"),
-                "thumb": os.path.join("thumbs", session_id, f"thumb_{i + 1}.png"),
-                "title": f"Image {i + 1}",
-                "htmlContent": html_content if html_content else None,
-                "items": items if items else None
-            })
+            # 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("\\", "/"),
+                "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}")
+            
         except Exception as e:
             print(f"Error processing image {img_path}: {e}")
     
     return pages_info
 
-def create_flipbook_from_pdf(pdf_file, view_mode="webgl", skin="light"):
+def create_flipbook_from_pdf(pdf_file, view_mode="2d", skin="light"):
     """Create a flipbook from uploaded PDF."""
     try:
         session_id = str(uuid.uuid4())
         pages_info = []
+        debug_info = ""
         
         if pdf_file is not None:
             # In Gradio, pdf_file is a file path string, not the actual content
             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"
         else:
-            return """<div style="color: red; padding: 20px;">Please upload a PDF file.</div>"""
+            return """<div style="color: red; padding: 20px;">PDF 파일을 업로드해주세요.</div>""", "No file uploaded"
         
         if not pages_info:
-            return """<div style="color: red; padding: 20px;">Failed to process the uploaded PDF. Please try again.</div>"""
+            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)
-        return flipbook_html
+        debug_info += f"HTML generated with view mode: {view_mode}, skin: {skin}\n"
+        return flipbook_html, debug_info
     
     except Exception as e:
-        print(f"Error creating flipbook from PDF: {e}")
-        return f"""<div style="color: red; padding: 20px;">An error occurred: {str(e)}</div>"""
+        error_msg = f"Error creating flipbook from PDF: {e}"
+        print(error_msg)
+        return f"""<div style="color: red; padding: 20px;">오류가 발생했습니다: {str(e)}</div>""", error_msg
 
-def create_flipbook_from_images(images, view_mode="webgl", skin="light"):
+def create_flipbook_from_images(images, view_mode="2d", skin="light"):
     """Create a flipbook from uploaded images."""
     try:
         session_id = str(uuid.uuid4())
         pages_info = []
+        debug_info = ""
         
         if images is not None and len(images) > 0:
             # Process images using file paths
             image_paths = [img.name for img in images]
+            debug_info += f"Image paths: {image_paths}\n"
+            
             pages_info = process_images(image_paths, session_id)
+            debug_info += f"Number of images processed: {len(pages_info)}\n"
         else:
-            return """<div style="color: red; padding: 20px;">Please upload at least one image.</div>"""
+            return """<div style="color: red; padding: 20px;">최소 한 개 이상의 이미지를 업로드해주세요.</div>""", "No images uploaded"
         
         if not pages_info:
-            return """<div style="color: red; padding: 20px;">Failed to process the uploaded images. Please try again.</div>"""
+            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)
-        return flipbook_html
+        debug_info += f"HTML generated with view mode: {view_mode}, skin: {skin}\n"
+        return flipbook_html, debug_info
     
     except Exception as e:
-        print(f"Error creating flipbook from images: {e}")
-        return f"""<div style="color: red; padding: 20px;">An error occurred: {str(e)}</div>"""
+        error_msg = f"Error creating flipbook from images: {e}"
+        print(error_msg)
+        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."""
@@ -228,149 +223,175 @@ def generate_flipbook_html(pages_info, session_id, view_mode, skin):
     
     # HTML template with embedded CSS and JavaScript
     html = f"""
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>3D Flipbook</title>
-        <style>
-            #flipbook-container {{
-                width: 100%;
-                height: 600px;
-                margin: 0 auto;
-                position: relative;
-            }}
-            body, html {{
-                margin: 0;
-                padding: 0;
-                height: 100%;
-                overflow: hidden;
-            }}
-        </style>
-        <link rel="stylesheet" type="text/css" href="flipbook.css">
-    </head>
-    <body>
-        <div id="{flipbook_id}" class="flipbook-container"></div>
-        
-        <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>
+    <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>
-            // Initialize flipbook when page loads
-            document.addEventListener('DOMContentLoaded', function() {{
-                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_id}');
-                new FlipBook(container, options);
+            // Function to load scripts sequentially
+            function loadScript(src, callback) {{
+                let script = document.createElement('script');
+                script.src = src;
+                script.onload = callback;
+                document.head.appendChild(script);
+            }}
+            
+            // 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);
+            }}
+            
+            // 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);
+                                }}
+                            }});
+                        }});
+                    }});
+                }});
             }});
         </script>
-    </body>
-    </html>
+    </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>
     """
     return html
 
+# Define the Gradio interface
 with gr.Blocks(title="3D Flipbook Viewer") as demo:
     gr.Markdown("# 3D Flipbook Viewer")
     gr.Markdown("""
-    ## Create interactive 3D flipbooks from PDFs or images
+    ## 3D 플립북 뷰어
     
-    Upload a PDF file or multiple images to generate an interactive flipbook with page-turning effects.
+    PDF 파일이나 여러 이미지를 업로드하여 인터랙티브 3D 플립북을 만들 수 있습니다.
     
-    ### Interactive Features:
-    - The created flipbook includes interactive elements on the first pages
-    - Navigate using the toolbar or by dragging page corners
-    - Use the thumbnails view for quick navigation
-    - Toggle fullscreen for better viewing experience
+    ### 특징:
+    - 페이지 넘김 효과와 함께 인터랙티브한 기능 제공
+    - 첫 페이지에는 예시로 인터랙티브 요소가 포함됨
+    - 툴바를 사용하거나 페이지 모서리를 드래그하여 탐색
+    - 썸네일 보기로 빠른 탐색 가능
+    - 전체 화면으로 전환하여 더 나은 보기 경험
     """)
     
     with gr.Tabs():
-        with gr.TabItem("PDF Upload"):
-            pdf_file = gr.File(label="Upload PDF", file_types=[".pdf"])
+        with gr.TabItem("PDF 업로드"):
+            pdf_file = gr.File(label="PDF 파일 업로드", file_types=[".pdf"])
             
-            with gr.Accordion("Advanced Settings", open=False):
-                pdf_view_mode = gr.Dropdown(
+            with gr.Accordion("고급 설정", open=False):
+                pdf_view_mode = gr.Radio(
                     choices=["webgl", "3d", "2d", "swipe"], 
-                    value="webgl", 
-                    label="View Mode"
+                    value="2d",  # Changed default to 2d for better compatibility
+                    label="뷰 모드",
+                    info="WebGL: 최고 품질, 2D: 가장 안정적, 3D: 중간, Swipe: 모바일용"
                 )
-                pdf_skin = gr.Dropdown(
+                pdf_skin = gr.Radio(
                     choices=["light", "dark", "gradient"], 
                     value="light", 
-                    label="Skin"
+                    label="스킨",
+                    info="light: 밝은 테마, dark: 어두운 테마, gradient: 그라데이션 테마"
                 )
                 
-            pdf_create_btn = gr.Button("Create Flipbook from PDF", variant="primary")
-            pdf_output = gr.HTML(label="Flipbook Output")
+            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
+                outputs=[pdf_output, pdf_debug]
             )
             
-        with gr.TabItem("Image Upload"):
-            images = gr.File(label="Upload Images", file_types=["image"], file_count="multiple")
+        with gr.TabItem("이미지 업로드"):
+            images = gr.File(label="이미지 파일 업로드", file_types=["image"], file_count="multiple")
             
-            with gr.Accordion("Advanced Settings", open=False):
-                img_view_mode = gr.Dropdown(
+            with gr.Accordion("고급 설정", open=False):
+                img_view_mode = gr.Radio(
                     choices=["webgl", "3d", "2d", "swipe"], 
-                    value="webgl", 
-                    label="View Mode"
+                    value="2d",  # Changed default to 2d for better compatibility
+                    label="뷰 모드",
+                    info="WebGL: 최고 품질, 2D: 가장 안정적, 3D: 중간, Swipe: 모바일용"
                 )
-                img_skin = gr.Dropdown(
+                img_skin = gr.Radio(
                     choices=["light", "dark", "gradient"], 
                     value="light", 
-                    label="Skin"
+                    label="스킨",
+                    info="light: 밝은 테마, dark: 어두운 테마, gradient: 그라데이션 테마"
                 )
                 
-            img_create_btn = gr.Button("Create Flipbook from Images", variant="primary")
-            img_output = gr.HTML(label="Flipbook Output")
+            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
+                outputs=[img_output, img_debug]
             )
     
     gr.Markdown("""
-    ### Usage Instructions:
-    1. Select the tab for your content type (PDF or images)
-    2. Upload your file(s)
-    3. Adjust view mode and skin in Advanced Settings (optional)
-    4. Click the Create Flipbook button
-    5. Interact with your flipbook in the output area
+    ### 사용법:
+    1. 컨텐츠 유형에 따라 탭을 선택하세요 (PDF 또는 이미지)
+    2. 파일을 업로드하세요
+    3. 필요에 따라 고급 설정에서 뷰 모드와 스킨을 조정하세요
+    4. 플립북 만들기 버튼을 클릭하세요
+    5. 출력 영역에서 플립북과 상호작용하세요
     
-    ### Notes:
-    - The first pages contain interactive elements and links as examples
-    - For best results, use PDFs with clear text and images
-    - Supported image formats: JPG, PNG, GIF, etc.
+    ### 참고:
+    - 처음 페이지에는 예시로 인터랙티브 요소와 링크가 포함되어 있습니다
+    - 최상의 결과를 위해 선명한 텍스트와 이미지가 있는 PDF를 사용하세요
+    - 지원되는 이미지 형식: JPG, PNG, GIF 등
+    - 플립북이 보이지 않는 경우, 2D 모드를 선택하고 다시 시도해보세요
     """)