Upload 01_See_How_It_Works.py

pages/01_See_How_It_Works.py

@@ -0,0 +1,324 @@
+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
+    """)