Update pages/01_See_How_It_Works.py

pages/01_See_How_It_Works.py

@@ -1,324 +1,251 @@
-import streamlit as st
-import os
-from PIL import Image
-import torch
-from manga_translator.translator import MangaTextDetector
-import tempfile
-import cv2
-import io
-import numpy as np
-from PIL import ImageDraw, ImageFont
-
-# Set page config for wider layout and title
-st.set_page_config(
-    page_title="Process Details - Manga Translator",
-    page_icon="🔍",
-    layout="wide"
-)
-
-# Custom CSS to match main page exactly
-st.markdown("""
-    <style>
-    /* Reset container styles */
-    .block-container {
-        padding: 2rem 1rem !important;
-        max-width: none;
-    }
-    
-    /* Main content area */
-    .main .block-container {
-        padding-left: calc(250px + 1rem) !important;
-    }
-    
-    /* Sidebar styling */
-    section[data-testid="stSidebar"] {
-        width: 250px !important;
-        background-color: rgb(240, 242, 246) !important;
-        position: fixed !important;
-        left: 0 !important;
-        top: 0 !important;
-        height: 100vh !important;
-    }
-    
-    /* Header styling */
-    h1 {
-        font-weight: 700 !important;
-        color: rgb(49, 51, 63) !important;
-        margin-bottom: 0.5rem !important;
-        font-size: 2.25rem !important;
-        text-align: left !important;
-    }
-    
-    /* Subheader styling */
-    .subheader {
-        color: rgb(49, 51, 63);
-        font-size: 1rem;
-        margin-bottom: 2rem;
-    }
-    
-    /* Upload section styling */
-    .stUploadButton {
-        background-color: white !important;
-        border: 1px solid rgb(224, 224, 224) !important;
-        border-radius: 0.5rem !important;
-        padding: 1rem !important;
-    }
-    
-    /* Button styling */
-    .stButton button {
-        background-color: rgb(255, 75, 75);
-        color: white;
-        border: none;
-        padding: 0.5rem 1rem;
-        border-radius: 0.25rem;
-    }
-    
-    /* Process section styling */
-    .process-section {
-        margin-top: 2rem;
-        padding: 1.5rem;
-        background-color: white;
-        border-radius: 0.5rem;
-    }
-    
-    /* Step headers */
-    .step-header {
-        font-size: 1.5rem;
-        color: rgb(49, 51, 63);
-        margin: 1.5rem 0 1rem 0;
-        padding-bottom: 0.5rem;
-        border-bottom: 1px solid rgb(224, 224, 224);
-    }
-    
-    /* Hide default menu text */
-    .css-17lntkn {
-        display: none;
-    }
-    .css-pkbazv {
-        display: none;
-    }
-    </style>
-""", unsafe_allow_html=True)
-
-# Initialize session state for storing processed results
-if 'processed_results' not in st.session_state:
-    st.session_state.processed_results = {}
-
-# Create temp directory if needed
-temp_dir = tempfile.mkdtemp()
-
-# Header - now left-aligned like main page
-st.title("See How It Works")
-st.markdown('<div class="subheader">Explore the step-by-step translation process!</div>', unsafe_allow_html=True)
-
-def get_font(size):
-    """Get font with proper error handling"""
-    try:
-        return ImageFont.truetype('font/CC Wild Words Roman.ttf', size)
-    except:
-        try:
-            # Fallback to Arial if available
-            return ImageFont.truetype('arial.ttf', size)
-        except:
-            return ImageFont.load_default()
-
-def calculate_font_size(text, max_width, max_height):
-    """Calculate optimal font size based on text and box dimensions"""
-    # Base size calculations
-    min_size = 12
-    max_size = min(60, int(max_height * 0.8))
-    
-    # Content-specific adjustments
-    if any(c in text for c in '!?！？'):  # Emphasis characters
-        min_size = 16
-        max_size = min(max_size, int(max_height * 0.9))
-    elif text.isupper():
-        max_size = min(max_size, int(max_height * 0.7))
-    elif len(text.split()) <= 2:
-        min_size = 16
-    
-    # Calculate based on text length and area
-    char_count = len(text)
-    area = max_width * max_height
-    chars_per_area = char_count / (area + 1)
-    
-    # Adjust size based on density
-    size_factor = 1.0
-    if chars_per_area > 0.01:
-        size_factor = 0.8
-    elif chars_per_area < 0.005:
-        size_factor = 1.2
-    
-    initial_size = int(min(max_width / (char_count * 0.6), max_height * 0.8) * size_factor)
-    return max(min_size, min(initial_size, max_size))
-
-def process_detailed_image(uploaded_file):
-    """Process image and store detailed results in session state."""
-    if uploaded_file.name not in st.session_state.processed_results:
-        try:
-            detector = MangaTextDetector('best.pt')
-            
-            # Save temporary file
-            temp_path = os.path.join(temp_dir, uploaded_file.name)
-            with open(temp_path, "wb") as f:
-                f.write(uploaded_file.getbuffer())
-            
-            # Process image
-            image, detections, result_image, processed_regions, translated_image = detector.process_image(temp_path)
-            
-            # Store all results in session state
-            st.session_state.processed_results[uploaded_file.name] = {
-                'image': image,
-                'detections': detections,
-                'result_image': result_image,
-                'processed_regions': processed_regions,
-                'translated_image': translated_image
-            }
-            
-            # Clean up temp file
-            try:
-                os.remove(temp_path)
-            except:
-                pass
-            
-            return True
-        except Exception as e:
-            st.error(f"❌ Error: {str(e)}")
-            return False
-    return True
-
-# File uploader with clean styling
-uploaded_files = st.file_uploader(
-    "Choose manga pages", 
-    type=['jpg', 'jpeg', 'png'], 
-    accept_multiple_files=True,
-    help="Upload manga pages to see the detailed translation process"
-)
-
-if uploaded_files:
-    # Process images
-    with st.spinner("Processing your manga pages..."):
-        for uploaded_file in uploaded_files:
-            if process_detailed_image(uploaded_file):
-                results = st.session_state.processed_results[uploaded_file.name]
-                
-                st.markdown('<div class="process-section">', unsafe_allow_html=True)
-                st.markdown(f"### 📝 Processing: {uploaded_file.name}")
-                
-                # 1. Original Image
-                st.markdown('<div class="step-header">1️⃣ Original Image</div>', unsafe_allow_html=True)
-                st.image(
-                    cv2.cvtColor(results['image'], cv2.COLOR_BGR2RGB),
-                    caption="Original Image",
-                    use_column_width=True
-                )
-                
-                # 2. Text Detection
-                st.markdown('<div class="step-header">2️⃣ Text Detection</div>', unsafe_allow_html=True)
-                st.write("Detected text regions and speech bubbles are highlighted:")
-                st.image(
-                    cv2.cvtColor(results['result_image'], cv2.COLOR_BGR2RGB),
-                    caption="Detected Regions",
-                    use_column_width=True
-                )
-                
-                # 3. Detected Text Regions
-                st.markdown('<div class="step-header">3️⃣ Detected Text Regions</div>', unsafe_allow_html=True)
-                if results['processed_regions'] and results['processed_regions']['text_regions']:
-                    for i, region in enumerate(results['processed_regions']['text_regions'], 1):
-                        with st.expander(f"Region {i}"):
-                            col1, col2 = st.columns(2)
-                            with col1:
-                                x1, y1, x2, y2 = region['coords']
-                                region_img = results['image'][y1:y2, x1:x2]
-                                st.image(
-                                    cv2.cvtColor(region_img, cv2.COLOR_BGR2RGB),
-                                    caption=f"Region {i}"
-                                )
-                                
-                                # Add region statistics
-                                st.markdown(
-                                    f'<div class="region-stats">'
-                                    f'Region Size: {x2-x1}x{y2-y1} pixels<br>'
-                                    f'Type: {region["type"].capitalize()}<br>'
-                                    f'Text Length: {len(region["text"])} chars'
-                                    f'</div>',
-                                    unsafe_allow_html=True
-                                )
-                            
-                            with col2:
-                                st.markdown("**Japanese Text:**")
-                                st.code(region['text'])
-                                if 'translation' in region:
-                                    st.markdown("**English Translation:**")
-                                    st.code(region['translation'])
-                                    
-                                    # Show text preview with improved rendering
-                                    preview_height = 100
-                                    preview_width = 400
-                                    preview_img = np.ones((preview_height, preview_width, 3), dtype=np.uint8) * 255
-                                    preview_img = cv2.cvtColor(preview_img, cv2.COLOR_BGR2RGB)
-                                    pil_img = Image.fromarray(preview_img)
-                                    draw = ImageDraw.Draw(pil_img)
-                                    
-                                    # Calculate font size based on text and preview dimensions
-                                    text = region['translation']
-                                    font_size = calculate_font_size(text, preview_width * 0.9, preview_height * 0.8)
-                                    font = get_font(font_size)
-                                    
-                                    # Center text
-                                    bbox = draw.textbbox((0, 0), text, font=font)
-                                    text_width = bbox[2] - bbox[0]
-                                    text_height = bbox[3] - bbox[1]
-                                    x = (preview_width - text_width) // 2
-                                    y = (preview_height - text_height) // 2
-                                    
-                                    # Draw with improved outline
-                                    outline_width = max(1, min(3, int(font_size / 20)))
-                                    for dx in range(-outline_width, outline_width + 1):
-                                        for dy in range(-outline_width, outline_width + 1):
-                                            if dx == 0 and dy == 0:
-                                                continue
-                                            draw.text((x + dx, y + dy), text, 
-                                                    font=font, fill=(255, 255, 255))
-                                    
-                                    draw.text((x, y), text, font=font, fill=(0, 0, 0))
-                                    st.image(pil_img, caption="Text Preview", use_column_width=True)
-                else:
-                    st.warning("No text regions detected in this image.")
-                
-                # 4. Final Translation
-                st.markdown('<div class="step-header">4️⃣ Final Translation</div>', unsafe_allow_html=True)
-                if results['translated_image'] is not None:
-                    st.image(
-                        cv2.cvtColor(results['translated_image'], cv2.COLOR_BGR2RGB),
-                        caption="Final Translated Image",
-                        use_column_width=True
-                    )
-                    
-                    # Download button with improved styling
-                    st.markdown('<div class="download-btn">', unsafe_allow_html=True)
-                    translated_bytes = cv2.imencode('.png', results['translated_image'])[1].tobytes()
-                    st.download_button(
-                        label="⬇️ Download Translated Image",
-                        data=translated_bytes,
-                        file_name=f"translated_{uploaded_file.name}",
-                        mime="image/png"
-                    )
-                    st.markdown('</div>', unsafe_allow_html=True)
-                else:
-                    st.warning("Translation could not be completed.")
-                
-                st.markdown('</div>', unsafe_allow_html=True)
-                st.markdown("---")
-
-else:
-    st.info("👆 Upload a manga page to see the detailed translation process!")
-    
-    st.subheader("What You'll See")
-    st.write("""
-    1. **Original Image**: Your uploaded manga page
-    2. **Text Detection**: View detected text regions and bubbles
-    3. **Detected Text**: See each text region with its translation
-    4. **Final Translation**: The complete translated image
-    """) 
+import streamlit as st
+import os
+from PIL import Image
+import torch
+from manga_translator.translator import MangaTextDetector
+import tempfile
+import cv2
+import io
+import numpy as np
+from PIL import ImageDraw, ImageFont
+
+# Set page config for wider layout and title
+st.set_page_config(
+    page_title="Process Details - Manga Translator",
+    page_icon="🔍",
+    layout="wide"
+)
+
+# Custom CSS for consistent layout with main page
+st.markdown("""
+    <style>
+        body {
+            background: linear-gradient(135deg, #a18cd1 0%, #fbc2eb 100%) !important;
+        }
+        .main .block-container {
+            max-width: 900px;
+            margin: 0 auto;
+            padding-top: 2rem;
+            padding-bottom: 2rem;
+        }
+        .centered-box {
+            background: white;
+            border-radius: 16px;
+            box-shadow: 0 4px 32px rgba(0,0,0,0.08);
+            padding: 2rem;
+            margin-bottom: 2rem;
+        }
+        .stButton>button {
+            width: 100%;
+        }
+        .stAlert {
+            background-color: rgb(255, 251, 235);
+            border: none;
+            padding: 1rem;
+            margin: 1rem 0;
+        }
+        .download-btn {
+            text-align: center;
+            padding: 1rem;
+        }
+        .region-info {
+            border: 1px solid #e0e0e0;
+            padding: 1rem;
+            border-radius: 5px;
+            margin: 0.5rem 0;
+        }
+        .region-stats {
+            font-size: 0.9em;
+            color: #666;
+            margin-top: 0.5rem;
+        }
+        /* Remove custom sidebar width, use Streamlit default */
+        /* If you want to force 250px, uncomment below: */
+        /*
+        [data-testid="stSidebar"][aria-expanded="true"] {
+            min-width: 250px;
+            max-width: 250px;
+        }
+        [data-testid="stSidebar"][aria-expanded="false"] {
+            margin-left: -250px;
+        }
+        */
+    </style>
+""", unsafe_allow_html=True)
+
+# Main centered box for all content
+st.markdown('<div class="centered-box">', unsafe_allow_html=True)
+
+st.title("See How It Works")
+st.write("Explore the step-by-step translation process!")
+
+def get_font(size):
+    """Get font with proper error handling"""
+    try:
+        return ImageFont.truetype('font/CC Wild Words Roman.ttf', size)
+    except:
+        try:
+            # Fallback to Arial if available
+            return ImageFont.truetype('arial.ttf', size)
+        except:
+            return ImageFont.load_default()
+
+def calculate_font_size(text, max_width, max_height):
+    """Calculate optimal font size based on text and box dimensions"""
+    min_size = 12
+    max_size = min(60, int(max_height * 0.8))
+    if any(c in text for c in '!?！？'):
+        min_size = 16
+        max_size = min(max_size, int(max_height * 0.9))
+    elif text.isupper():
+        max_size = min(max_size, int(max_height * 0.7))
+    elif len(text.split()) <= 2:
+        min_size = 16
+    char_count = len(text)
+    area = max_width * max_height
+    chars_per_area = char_count / (area + 1)
+    size_factor = 1.0
+    if chars_per_area > 0.01:
+        size_factor = 0.8
+    elif chars_per_area < 0.005:
+        size_factor = 1.2
+    initial_size = int(min(max_width / (char_count * 0.6), max_height * 0.8) * size_factor)
+    return max(min_size, min(initial_size, max_size))
+
+def process_detailed_image(uploaded_file):
+    """Process image and store detailed results in session state."""
+    if uploaded_file.name not in st.session_state:
+        st.session_state.processed_results = {}
+    if uploaded_file.name not in st.session_state.processed_results:
+        try:
+            detector = MangaTextDetector('best.pt')
+            temp_path = os.path.join(tempfile.mkdtemp(), uploaded_file.name)
+            with open(temp_path, "wb") as f:
+                f.write(uploaded_file.getbuffer())
+            image, detections, result_image, processed_regions, translated_image = detector.process_image(temp_path)
+            st.session_state.processed_results[uploaded_file.name] = {
+                'image': image,
+                'detections': detections,
+                'result_image': result_image,
+                'processed_regions': processed_regions,
+                'translated_image': translated_image
+            }
+            try:
+                os.remove(temp_path)
+            except:
+                pass
+            return True
+        except Exception as e:
+            st.error(f"❌ Error: {str(e)}")
+            return False
+    return True
+
+uploaded_files = st.file_uploader(
+    "Choose manga pages", 
+    type=['jpg', 'jpeg', 'png'], 
+    accept_multiple_files=True,
+    help="Upload manga pages to see the detailed translation process"
+)
+
+if uploaded_files:
+    with st.spinner("Processing your manga pages..."):
+        for uploaded_file in uploaded_files:
+            if process_detailed_image(uploaded_file):
+                results = st.session_state.processed_results[uploaded_file.name]
+                st.header(f"📝 Processing: {uploaded_file.name}")
+                st.subheader("1️⃣ Original Image")
+                st.image(
+                    cv2.cvtColor(results['image'], cv2.COLOR_BGR2RGB),
+                    caption="Original Image",
+                    use_column_width=True
+                )
+                st.subheader("2️⃣ Text Detection")
+                st.write("Detected text regions and speech bubbles are highlighted:")
+                st.image(
+                    cv2.cvtColor(results['result_image'], cv2.COLOR_BGR2RGB),
+                    caption="Detected Regions",
+                    use_column_width=True
+                )
+                st.subheader("3️⃣ Detected Text Regions")
+                if results['processed_regions'] and results['processed_regions']['text_regions']:
+                    for i, region in enumerate(results['processed_regions']['text_regions'], 1):
+                        with st.expander(f"Region {i}"):
+                            col1, col2 = st.columns(2)
+                            with col1:
+                                x1, y1, x2, y2 = region['coords']
+                                region_img = results['image'][y1:y2, x1:x2]
+                                st.image(
+                                    cv2.cvtColor(region_img, cv2.COLOR_BGR2RGB),
+                                    caption=f"Region {i}"
+                                )
+                                region_width = x2 - x1
+                                region_height = y2 - y1
+                                st.markdown(
+                                    f'<div class="region-stats">'
+                                    f'Region Size: {region_width}x{region_height} pixels<br>'
+                                    f'Type: {region["type"].capitalize()}<br>'
+                                    f'Text Length: {len(region["text"])} chars'
+                                    f'</div>',
+                                    unsafe_allow_html=True
+                                )
+                            with col2:
+                                st.markdown("**Japanese Text:**")
+                                st.code(region['text'])
+                                if 'translation' in region:
+                                    st.markdown("**English Translation:**")
+                                    st.code(region['translation'])
+                                    preview_height = 100
+                                    preview_width = 400
+                                    preview_img = np.ones((preview_height, preview_width, 3), dtype=np.uint8) * 255
+                                    preview_img = cv2.cvtColor(preview_img, cv2.COLOR_BGR2RGB)
+                                    pil_img = Image.fromarray(preview_img)
+                                    draw = ImageDraw.Draw(pil_img)
+                                    text = region['translation']
+                                    font_size = calculate_font_size(text, preview_width * 0.9, preview_height * 0.8)
+                                    font = get_font(font_size)
+                                    bbox = draw.textbbox((0, 0), text, font=font)
+                                    text_width = bbox[2] - bbox[0]
+                                    text_height = bbox[3] - bbox[1]
+                                    x = (preview_width - text_width) // 2
+                                    y = (preview_height - text_height) // 2
+                                    outline_width = max(1, min(3, int(font_size / 20)))
+                                    for dx in range(-outline_width, outline_width + 1):
+                                        for dy in range(-outline_width, outline_width + 1):
+                                            if dx == 0 and dy == 0:
+                                                continue
+                                            draw.text((x + dx, y + dy), text, 
+                                                    font=font, fill=(255, 255, 255))
+                                    draw.text((x, y), text, font=font, fill=(0, 0, 0))
+                                    st.image(pil_img, caption="Text Preview", use_column_width=True)
+                else:
+                    st.warning("No text regions detected in this image.")
+                st.subheader("4️⃣ Final Translation")
+                if results['translated_image'] is not None:
+                    st.image(
+                        cv2.cvtColor(results['translated_image'], cv2.COLOR_BGR2RGB),
+                        caption="Final Translated Image",
+                        use_column_width=True
+                    )
+                    st.markdown('<div class="download-btn">', unsafe_allow_html=True)
+                    translated_bytes = cv2.imencode('.png', results['translated_image'])[1].tobytes()
+                    st.download_button(
+                        label="⬇️ Download Translated Image",
+                        data=translated_bytes,
+                        file_name=f"translated_{uploaded_file.name}",
+                        mime="image/png"
+                    )
+                    st.markdown('</div>', unsafe_allow_html=True)
+                else:
+                    st.warning("Translation could not be completed.")
+                st.markdown("---")
+else:
+    st.info("👆 Upload a manga page to see the detailed translation process!")
+    st.subheader("What You'll See")
+    st.write("""
+    1. **Original Image**: Your uploaded manga page
+    2. **Text Detection**: View detected text regions and bubbles
+    3. **Detected Text**: See each text region with its translation
+    4. **Final Translation**: The complete translated image
+    """)
+
+st.markdown('</div>', unsafe_allow_html=True)