|
|
""" |
|
|
Generate image files for each comic page at 800x1080 resolution |
|
|
Simple version that creates HTML canvases instead of actual image files |
|
|
""" |
|
|
|
|
|
import os |
|
|
import json |
|
|
from typing import List, Dict |
|
|
|
|
|
class PageImageGenerator: |
|
|
"""Generate page images as HTML canvases that can be saved""" |
|
|
|
|
|
def __init__(self, output_dir: str = "output/page_images"): |
|
|
self.output_dir = output_dir |
|
|
self.page_size = (800, 1080) |
|
|
|
|
|
def generate_page_images(self, pages_data: List[Dict], frames_dir: str) -> List[str]: |
|
|
"""Generate HTML pages that render as images""" |
|
|
os.makedirs(self.output_dir, exist_ok=True) |
|
|
generated_files = [] |
|
|
|
|
|
|
|
|
for i, page in enumerate(pages_data): |
|
|
filename = f"page_{i+1:03d}.html" |
|
|
filepath = os.path.join(self.output_dir, filename) |
|
|
self._create_page_html(page, frames_dir, i + 1, filepath) |
|
|
generated_files.append(filepath) |
|
|
print(f"📄 Generated page {i+1}/{len(pages_data)}: {filename}") |
|
|
|
|
|
|
|
|
self._create_gallery_html(len(pages_data)) |
|
|
|
|
|
return generated_files |
|
|
|
|
|
def _create_page_html(self, page: Dict, frames_dir: str, page_num: int, output_path: str): |
|
|
"""Create HTML that renders a comic page at 800x1080""" |
|
|
|
|
|
panels_html = "" |
|
|
panels = page.get('panels', []) |
|
|
|
|
|
for idx, panel in enumerate(panels[:4]): |
|
|
if panel.get('image'): |
|
|
img_path = f"../../frames/final/{panel['image']}" |
|
|
bubble_html = "" |
|
|
|
|
|
if panel.get('speech_bubble'): |
|
|
bubble = panel['speech_bubble'] |
|
|
bubble_html = f""" |
|
|
<div class="speech-bubble" style="left: {bubble.get('x', 50)}%; top: {bubble.get('y', 20)}%;"> |
|
|
{bubble.get('text', '')} |
|
|
</div> |
|
|
""" |
|
|
|
|
|
panels_html += f""" |
|
|
<div class="panel panel-{idx+1}"> |
|
|
<img src="{img_path}" alt="Panel {idx+1}"> |
|
|
{bubble_html} |
|
|
</div> |
|
|
""" |
|
|
|
|
|
html_content = f""" |
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Comic Page {page_num}</title> |
|
|
<style> |
|
|
body {{ |
|
|
margin: 0; |
|
|
padding: 0; |
|
|
background: #f0f0f0; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
min-height: 100vh; |
|
|
}} |
|
|
|
|
|
.page-container {{ |
|
|
width: 800px; |
|
|
height: 1080px; |
|
|
background: white; |
|
|
position: relative; |
|
|
box-shadow: 0 0 20px rgba(0,0,0,0.3); |
|
|
}} |
|
|
|
|
|
.comic-grid {{ |
|
|
display: grid; |
|
|
grid-template-columns: 1fr 1fr; |
|
|
grid-template-rows: 1fr 1fr; |
|
|
gap: 10px; |
|
|
padding: 20px; |
|
|
height: calc(100% - 60px); |
|
|
}} |
|
|
|
|
|
.panel {{ |
|
|
border: 3px solid black; |
|
|
overflow: hidden; |
|
|
position: relative; |
|
|
background: white; |
|
|
}} |
|
|
|
|
|
.panel img {{ |
|
|
width: 100%; |
|
|
height: 100%; |
|
|
object-fit: contain; |
|
|
background: #000; |
|
|
}} |
|
|
|
|
|
.speech-bubble {{ |
|
|
position: absolute; |
|
|
background: white; |
|
|
border: 2px solid black; |
|
|
border-radius: 15px; |
|
|
padding: 10px 15px; |
|
|
max-width: 60%; |
|
|
transform: translate(-50%, -50%); |
|
|
text-align: center; |
|
|
font-family: Arial, sans-serif; |
|
|
font-size: 14px; |
|
|
font-weight: bold; |
|
|
}} |
|
|
|
|
|
.page-number {{ |
|
|
text-align: center; |
|
|
padding: 10px; |
|
|
color: #666; |
|
|
font-family: Arial, sans-serif; |
|
|
}} |
|
|
|
|
|
.download-btn {{ |
|
|
position: fixed; |
|
|
top: 20px; |
|
|
right: 20px; |
|
|
padding: 10px 20px; |
|
|
background: #4CAF50; |
|
|
color: white; |
|
|
border: none; |
|
|
border-radius: 5px; |
|
|
cursor: pointer; |
|
|
font-weight: bold; |
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.3); |
|
|
}} |
|
|
|
|
|
.download-btn:hover {{ |
|
|
background: #45a049; |
|
|
}} |
|
|
|
|
|
@media print {{ |
|
|
/* Remove all margins and UI elements */ |
|
|
* {{ |
|
|
-webkit-print-color-adjust: exact !important; |
|
|
print-color-adjust: exact !important; |
|
|
color-adjust: exact !important; |
|
|
}} |
|
|
|
|
|
body {{ |
|
|
margin: 0 !important; |
|
|
padding: 0 !important; |
|
|
background: white !important; |
|
|
}} |
|
|
|
|
|
.download-btn {{ |
|
|
display: none !important; |
|
|
}} |
|
|
|
|
|
/* Set exact page size for printing */ |
|
|
@page {{ |
|
|
/* 800x1080 pixels = 8.33x11.25 inches at 96 DPI */ |
|
|
/* For better print quality, we'll use 150 DPI */ |
|
|
size: 5.33in 7.2in; /* 800px/150dpi x 1080px/150dpi */ |
|
|
margin: 0; |
|
|
}} |
|
|
|
|
|
/* Alternative page sizes you can use: */ |
|
|
/* @page {{ size: A5 portrait; margin: 0; }} */ /* Close to 800x1080 ratio */ |
|
|
/* @page {{ size: 8.5in 11in; margin: 0.5in; }} */ /* US Letter with margins */ |
|
|
|
|
|
.page-container {{ |
|
|
box-shadow: none !important; |
|
|
/* Exact pixel dimensions */ |
|
|
width: 800px !important; |
|
|
height: 1080px !important; |
|
|
max-width: 800px !important; |
|
|
max-height: 1080px !important; |
|
|
/* Center on page */ |
|
|
margin: 0 auto !important; |
|
|
padding: 0 !important; |
|
|
/* Ensure it fits on one page */ |
|
|
page-break-inside: avoid !important; |
|
|
page-break-after: avoid !important; |
|
|
}} |
|
|
|
|
|
/* Ensure grid maintains proportions */ |
|
|
.comic-grid {{ |
|
|
width: 100% !important; |
|
|
height: calc(100% - 40px) !important; |
|
|
}} |
|
|
|
|
|
/* Force panel borders to print */ |
|
|
.panel {{ |
|
|
border: 3px solid black !important; |
|
|
-webkit-print-color-adjust: exact !important; |
|
|
}} |
|
|
}} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="page-container" id="comic-page"> |
|
|
<div class="comic-grid"> |
|
|
{panels_html} |
|
|
</div> |
|
|
<div class="page-number">Page {page_num}</div> |
|
|
</div> |
|
|
|
|
|
<button class="download-btn" onclick="downloadAsImage()"> |
|
|
📥 Download as Image |
|
|
</button> |
|
|
|
|
|
<script> |
|
|
function downloadAsImage() {{ |
|
|
// Show print instructions |
|
|
alert('🖨️ Print Settings for 800x1080 Image:\\n\\n' + |
|
|
'1. Paper Size: "A5" or "5.33 x 7.2 inches"\\n' + |
|
|
'2. Orientation: Portrait\\n' + |
|
|
'3. Margins: None (0)\\n' + |
|
|
'4. Scale: 100% or "Actual size"\\n' + |
|
|
'5. Destination: "Save as PDF" for digital\\n' + |
|
|
'\\nThe page will print at exactly 800x1080 pixels!'); |
|
|
|
|
|
// Trigger print dialog |
|
|
window.print(); |
|
|
}} |
|
|
|
|
|
// Auto-size to fit screen while maintaining aspect ratio |
|
|
function resizePage() {{ |
|
|
const container = document.querySelector('.page-container'); |
|
|
const maxWidth = window.innerWidth - 40; |
|
|
const maxHeight = window.innerHeight - 40; |
|
|
const scale = Math.min(maxWidth / 800, maxHeight / 1080, 1); |
|
|
|
|
|
if (scale < 1) {{ |
|
|
container.style.transform = `scale(${{scale}})`; |
|
|
container.style.transformOrigin = 'center center'; |
|
|
}} |
|
|
}} |
|
|
|
|
|
window.addEventListener('resize', resizePage); |
|
|
resizePage(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
|
|
|
with open(output_path, 'w', encoding='utf-8') as f: |
|
|
f.write(html_content) |
|
|
|
|
|
def _create_gallery_html(self, num_pages: int): |
|
|
"""Create gallery index HTML""" |
|
|
|
|
|
page_links = "" |
|
|
for i in range(num_pages): |
|
|
page_num = i + 1 |
|
|
filename = f"page_{page_num:03d}.html" |
|
|
page_links += f""" |
|
|
<div class="page-card"> |
|
|
<a href="{filename}" target="_blank"> |
|
|
<div class="page-preview"> |
|
|
<div class="page-number-large">{page_num}</div> |
|
|
<div class="page-label">Page {page_num}</div> |
|
|
</div> |
|
|
</a> |
|
|
<div class="page-actions"> |
|
|
<a href="{filename}" target="_blank">🔍 View</a> |
|
|
<a href="{filename}" download>📥 Download HTML</a> |
|
|
</div> |
|
|
</div> |
|
|
""" |
|
|
|
|
|
html_content = f""" |
|
|
<!DOCTYPE html> |
|
|
<html> |
|
|
<head> |
|
|
<title>Comic Page Images Gallery</title> |
|
|
<style> |
|
|
body {{ |
|
|
font-family: Arial, sans-serif; |
|
|
margin: 0; |
|
|
padding: 20px; |
|
|
background: #f0f0f0; |
|
|
}} |
|
|
|
|
|
.header {{ |
|
|
text-align: center; |
|
|
margin-bottom: 30px; |
|
|
background: white; |
|
|
padding: 30px; |
|
|
border-radius: 10px; |
|
|
box-shadow: 0 2px 10px rgba(0,0,0,0.1); |
|
|
}} |
|
|
|
|
|
.header h1 {{ |
|
|
margin: 0 0 10px 0; |
|
|
color: #333; |
|
|
}} |
|
|
|
|
|
.header p {{ |
|
|
color: #666; |
|
|
margin: 5px 0; |
|
|
}} |
|
|
|
|
|
.instructions {{ |
|
|
background: #e3f2fd; |
|
|
padding: 15px; |
|
|
border-radius: 5px; |
|
|
margin: 20px 0; |
|
|
text-align: left; |
|
|
max-width: 600px; |
|
|
margin-left: auto; |
|
|
margin-right: auto; |
|
|
}} |
|
|
|
|
|
.gallery {{ |
|
|
display: grid; |
|
|
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); |
|
|
gap: 20px; |
|
|
max-width: 1200px; |
|
|
margin: 0 auto; |
|
|
}} |
|
|
|
|
|
.page-card {{ |
|
|
background: white; |
|
|
border-radius: 8px; |
|
|
overflow: hidden; |
|
|
box-shadow: 0 2px 8px rgba(0,0,0,0.1); |
|
|
transition: transform 0.2s; |
|
|
}} |
|
|
|
|
|
.page-card:hover {{ |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 4px 12px rgba(0,0,0,0.2); |
|
|
}} |
|
|
|
|
|
.page-preview {{ |
|
|
height: 270px; |
|
|
background: #f5f5f5; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
justify-content: center; |
|
|
align-items: center; |
|
|
cursor: pointer; |
|
|
position: relative; |
|
|
overflow: hidden; |
|
|
}} |
|
|
|
|
|
.page-preview::before {{ |
|
|
content: ""; |
|
|
position: absolute; |
|
|
inset: 10px; |
|
|
border: 3px solid #ddd; |
|
|
border-radius: 5px; |
|
|
}} |
|
|
|
|
|
.page-number-large {{ |
|
|
font-size: 48px; |
|
|
font-weight: bold; |
|
|
color: #666; |
|
|
margin-bottom: 10px; |
|
|
}} |
|
|
|
|
|
.page-label {{ |
|
|
color: #888; |
|
|
font-size: 14px; |
|
|
}} |
|
|
|
|
|
.page-actions {{ |
|
|
padding: 10px; |
|
|
text-align: center; |
|
|
background: #fafafa; |
|
|
border-top: 1px solid #eee; |
|
|
}} |
|
|
|
|
|
.page-actions a {{ |
|
|
margin: 0 5px; |
|
|
color: #2196F3; |
|
|
text-decoration: none; |
|
|
font-size: 14px; |
|
|
}} |
|
|
|
|
|
.page-actions a:hover {{ |
|
|
text-decoration: underline; |
|
|
}} |
|
|
|
|
|
.export-section {{ |
|
|
text-align: center; |
|
|
margin: 30px 0; |
|
|
}} |
|
|
|
|
|
.export-btn {{ |
|
|
display: inline-block; |
|
|
padding: 12px 24px; |
|
|
background: #4CAF50; |
|
|
color: white; |
|
|
text-decoration: none; |
|
|
border-radius: 5px; |
|
|
font-weight: bold; |
|
|
margin: 0 10px; |
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.2); |
|
|
}} |
|
|
|
|
|
.export-btn:hover {{ |
|
|
background: #45a049; |
|
|
transform: translateY(-2px); |
|
|
box-shadow: 0 4px 8px rgba(0,0,0,0.3); |
|
|
}} |
|
|
</style> |
|
|
</head> |
|
|
<body> |
|
|
<div class="header"> |
|
|
<h1>📚 Comic Page Images</h1> |
|
|
<p>All pages rendered at 800x1080 resolution</p> |
|
|
<p>{num_pages} pages generated</p> |
|
|
|
|
|
<div class="instructions"> |
|
|
<strong>💡 How to save as images:</strong> |
|
|
<ol> |
|
|
<li>Click on any page to view it</li> |
|
|
<li>Click "Download as Image" button</li> |
|
|
<li>In print dialog: Select "Save as PDF"</li> |
|
|
<li>Or take a screenshot (better quality)</li> |
|
|
</ol> |
|
|
</div> |
|
|
|
|
|
<div class="export-section"> |
|
|
<a href="#" class="export-btn" onclick="openAll(); return false;"> |
|
|
📂 Open All Pages |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="gallery"> |
|
|
{page_links} |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
function openAll() {{ |
|
|
if (confirm('This will open {num_pages} new tabs. Continue?')) {{ |
|
|
for (let i = 1; i <= {num_pages}; i++) {{ |
|
|
const filename = `page_${{String(i).padStart(3, '0')}}.html`; |
|
|
window.open(filename, '_blank'); |
|
|
}} |
|
|
}} |
|
|
}} |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
""" |
|
|
|
|
|
index_path = os.path.join(self.output_dir, 'index.html') |
|
|
with open(index_path, 'w', encoding='utf-8') as f: |
|
|
f.write(html_content) |
|
|
|
|
|
print(f"📋 Page gallery created: {index_path}") |
|
|
|
|
|
def generate_page_images_from_json(json_path: str, frames_dir: str, output_dir: str = None): |
|
|
"""Standalone function to generate page images from pages.json""" |
|
|
if not os.path.exists(json_path): |
|
|
print(f"❌ Pages JSON not found: {json_path}") |
|
|
return [] |
|
|
|
|
|
|
|
|
with open(json_path, 'r') as f: |
|
|
pages_data = json.load(f) |
|
|
|
|
|
|
|
|
generator = PageImageGenerator(output_dir or "output/page_images") |
|
|
|
|
|
|
|
|
return generator.generate_page_images(pages_data, frames_dir) |
