Update app.py

app.py

@@ -53,11 +53,38 @@ 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 page info
+            # Add interactive content to first page as an example
+            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>
+                """
+            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"
+                    }
+                ]
+            
+            # 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}"
+                "title": f"Page {page_num + 1}",
+                "htmlContent": html_content if html_content else None,
+                "items": items if items else None
             })
         
         return pages_info
@@ -84,11 +111,50 @@ 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 page info
+            # Add interactive content to specific pages as examples
+            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>
+                """
+            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"Page {i + 1}"
+                "title": f"Image {i + 1}",
+                "htmlContent": html_content if html_content else None,
+                "items": items if items else None
             })
         except Exception as e:
             print(f"Error processing image {img_path}: {e}")
@@ -102,12 +168,10 @@ def create_flipbook_from_pdf(pdf_file, view_mode="webgl", skin="light"):
         pages_info = []
         
         if pdf_file is not None:
-            # Save PDF to temp directory
-            pdf_path = os.path.join(UPLOAD_DIR, f"{session_id}.pdf")
-            with open(pdf_path, "wb") as f:
-                f.write(pdf_file)
-                
-            # Process PDF
+            # In Gradio, pdf_file is a file path string, not the actual content
+            pdf_path = pdf_file.name  # Get the file path
+            
+            # Process PDF using the file path directly
             pages_info = process_pdf(pdf_path, session_id)
         else:
             return """<div style="color: red; padding: 20px;">Please upload a PDF file.</div>"""
@@ -130,8 +194,9 @@ def create_flipbook_from_images(images, view_mode="webgl", skin="light"):
         pages_info = []
         
         if images is not None and len(images) > 0:
-            # Process images
-            pages_info = process_images(images, session_id)
+            # Process images using file paths
+            image_paths = [img.name for img in images]
+            pages_info = process_images(image_paths, session_id)
         else:
             return """<div style="color: red; padding: 20px;">Please upload at least one image.</div>"""
         
@@ -148,6 +213,13 @@ def create_flipbook_from_images(images, view_mode="webgl", skin="light"):
 
 def generate_flipbook_html(pages_info, session_id, view_mode, skin):
     """Generate HTML for the flipbook."""
+    # 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:
+            del page["htmlContent"]
+        if "items" in page and page["items"] is None:
+            del page["items"]
+    
     # Convert pages_info to JSON for JavaScript
     pages_json = json.dumps(pages_info)
     
@@ -198,12 +270,19 @@ def generate_flipbook_html(pages_info, session_id, view_mode, skin):
                     singlePageMode: false,
                     singlePageModeIfMobile: true,
                     pageFlipDuration: 1,
-                    sound: false,
+                    sound: true,
+                    backgroundMusic: false,
                     thumbnailsOnStart: true,
                     btnThumbs: {{ enabled: true }},
-                    btnPrint: {{ enabled: false }},
-                    btnDownloadPages: {{ enabled: false }},
-                    btnDownloadPdf: {{ enabled: false }}
+                    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}');
@@ -215,10 +294,19 @@ def generate_flipbook_html(pages_info, session_id, view_mode, skin):
     """
     return html
 
-# Define the Gradio interface
 with gr.Blocks(title="3D Flipbook Viewer") as demo:
     gr.Markdown("# 3D Flipbook Viewer")
-    gr.Markdown("Upload a PDF file or multiple images to create an interactive 3D flipbook.")
+    gr.Markdown("""
+    ## Create interactive 3D flipbooks from PDFs or images
+    
+    Upload a PDF file or multiple images to generate an interactive flipbook with page-turning effects.
+    
+    ### 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"):
@@ -236,7 +324,7 @@ with gr.Blocks(title="3D Flipbook Viewer") as demo:
                     label="Skin"
                 )
                 
-            pdf_create_btn = gr.Button("Create Flipbook from PDF")
+            pdf_create_btn = gr.Button("Create Flipbook from PDF", variant="primary")
             pdf_output = gr.HTML(label="Flipbook Output")
             
             # Set up PDF event handler
@@ -261,7 +349,7 @@ with gr.Blocks(title="3D Flipbook Viewer") as demo:
                     label="Skin"
                 )
                 
-            img_create_btn = gr.Button("Create Flipbook from Images")
+            img_create_btn = gr.Button("Create Flipbook from Images", variant="primary")
             img_output = gr.HTML(label="Flipbook Output")
             
             # Set up image event handler
@@ -271,6 +359,21 @@ with gr.Blocks(title="3D Flipbook Viewer") as demo:
                 outputs=img_output
             )
     
+    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
+    
+    ### 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.
+    """)
+
+    
 # Launch the app
 if __name__ == "__main__":
     demo.launch()