Upload app.py

app.py

@@ -0,0 +1,258 @@
+import streamlit as st
+import torch
+from transformers import TrOCRProcessor, VisionEncoderDecoderModel
+from PIL import Image, UnidentifiedImageError
+import time
+import io
+import platform
+import sys
+import cv2
+import numpy as np
+
+# --- 1. SYSTEM CONFIG & STATE INITIALIZATION ---
+st.set_page_config(page_title="Handwriting Analysis", layout="wide", initial_sidebar_state="collapsed")
+
+if 'debug_log' not in st.session_state:
+    st.session_state.debug_log = [f"[{time.strftime('%H:%M:%S')}] === SYSTEM BOOT ({platform.system()} | Python {sys.version.split()[0]}) ==="]
+if 'img_buffer' not in st.session_state:
+    st.session_state.img_buffer = None
+
+def log(msg):
+    st.session_state.debug_log.append(f"[{time.strftime('%H:%M:%S')}] {msg}")
+
+# Custom CSS
+st.markdown("""
+    <style>
+    @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;500;700&family=Manrope:wght@300;400;600&display=swap');
+    @import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:wght,FILL@100..700,0..1&display=swap');
+
+    .stApp { background-color: #0c0e12; color: #f6f6fc; font-family: 'Manrope', sans-serif; }
+    .block-container { padding-top: 1rem !important; padding-bottom: 0rem !important; max-width: 95% !important; }
+    
+    .hero-title { font-family: 'Space Grotesk'; font-size: clamp(34px, 4vw, 60px); font-weight: 300; line-height: 0.9; margin-bottom: 25px; }
+    .hero-accent { color: #8ff5ff; font-weight: 700; font-style: italic; text-shadow: 0 0 20px rgba(143, 245, 255, 0.4); }
+    .strike { text-decoration: line-through; color: #46484d; opacity: 0.4; }
+
+    .uploader-wrapper { position: relative; width: 100%; max-width: 400px; margin: 0 auto; }
+    .ingest-card { height: 250px; background: #171a1f; border: 1px solid rgba(143, 245, 255, 0.1); border-radius: 4px; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; }
+    .dashed-border { border: 1px dashed rgba(143, 245, 255, 0.15); border-radius: 2px; padding: 15px; margin-bottom: 12px; }
+    .system-label { position: absolute; font-family: 'Space Grotesk'; font-size: 7px; letter-spacing: 2px; color: rgba(143, 245, 255, 0.2); top: 10px; left: 10px; text-transform: uppercase; }
+    .cyan-btn { background-color: #8ff5ff; color: #003f43; font-family: 'Space Grotesk'; font-weight: 700; text-transform: uppercase; padding: 8px 25px; border-radius: 2px; font-size: 10px; letter-spacing: 1px; }
+
+    div[data-testid="stFileUploader"] { margin-top: -250px !important; height: 250px !important; opacity: 0.01 !important; z-index: 99 !important; cursor: pointer !important; }
+    div[data-testid="stFileUploader"] section { height: 100% !important; padding: 0 !important; }
+
+    .stat-card { background: #000; padding: 15px; border-radius: 2px; text-align: center; }
+    .stat-val { color: #8ff5ff; font-size: 24px; font-weight: 700; font-family: 'Space Grotesk'; }
+    .stat-lbl { font-size: 9px; color: #46484d; text-transform: uppercase; letter-spacing: 1.5px; }
+    
+    .output-box { border-left: 3px solid #8ff5ff; background: #171a1f; padding: 20px; font-family: 'Space Grotesk'; font-size: clamp(16px, 1.5vw, 20px); color: #f6f6fc; margin-top: 15px; line-height: 1.5; min-height: 100px; white-space: pre-wrap; }
+    
+    .stButton>button { background-color: transparent !important; border: 1px solid #8ff5ff !important; color: #8ff5ff !important; width: 100%; border-radius: 2px; font-family: 'Space Grotesk'; text-transform: uppercase; font-size: 10px; margin-top: 10px; transition: 0.3s; }
+    .stButton>button:hover { background-color: #8ff5ff !important; color: #000 !important; }
+
+    .debug-terminal { font-family: 'Courier New', monospace; font-size: 11px; color: #4CC9F0; background: #0a0a0c; padding: 15px; border: 1px solid #333; height: 200px; overflow-y: auto; margin-top: 50px; }
+
+    div[data-baseweb="select"] > div { background-color: #171a1f !important; border: 1px solid rgba(143, 245, 255, 0.2) !important; border-radius: 2px !important; -webkit-font-smoothing: antialiased; }
+    div[data-baseweb="select"] * { font-family: 'Space Grotesk', sans-serif !important; color: #f6f6fc !important; font-size: 12px !important; }
+    ul[role="listbox"] { background-color: #171a1f !important; border: 1px solid rgba(143, 245, 255, 0.2) !important; }
+    li[role="option"] { background-color: transparent !important; }
+    li[role="option"]:hover { background-color: rgba(143, 245, 255, 0.1) !important; color: #8ff5ff !important; }
+    
+    [data-testid="stHeader"], footer, .stFileUploader label, [data-testid="stTickBarMin"] { visibility: hidden; display: none; }
+    </style>
+""", unsafe_allow_html=True)
+
+# --- 2. ENGINE LOGIC & OPEN CV SEGMENTATION ---
+@st.cache_resource
+def load_engine():
+    local_path = "./final_handwriting_model"
+    cloud_path = "Hypernova823/ReadAI"
+    
+    # Auto-detect environment: Use local if available, otherwise pull from cloud
+    import os
+    if os.path.exists(local_path):
+        path = local_path
+        log(f"ENGINE STATUS: Found local directory. Loading {path}...")
+    else:
+        path = cloud_path
+        log(f"ENGINE STATUS: Local folder not found. Pulling from cloud: {path}...")
+
+    device = "cuda" if torch.cuda.is_available() else "cpu"
+    try:
+        proc = TrOCRProcessor.from_pretrained(path)
+        model = VisionEncoderDecoderModel.from_pretrained(path).to(device)
+        return proc, model, device
+    except Exception as e:
+        log(f"ENGINE CRASH: {e}")
+        return None, None, None
+
+def segment_handwriting(pil_image):
+    """Optimized OpenCV line extraction for full documents."""
+    # Convert PIL to cv2 (numpy array in BGR)
+    img_cv = np.array(pil_image.convert('RGB'))[:, :, ::-1].copy()
+    gray = cv2.cvtColor(img_cv, cv2.COLOR_BGR2GRAY)
+    
+    # Adaptive thresholding handles varying page illumination beautifully
+    blur = cv2.GaussianBlur(gray, (7,7), 0)
+    thresh = cv2.adaptiveThreshold(blur, 255, cv2.ADAPTIVE_THRESH_GAUSSIAN_C, cv2.THRESH_BINARY_INV, 21, 10)
+    
+    # Morphological Dilation: Smear text horizontally into thick lines
+    kernel = cv2.getStructuringElement(cv2.MORPH_RECT, (60, 5)) 
+    dilated = cv2.dilate(thresh, kernel, iterations=1)
+    
+    # Find contours of those lines
+    contours, _ = cv2.findContours(dilated, cv2.RETR_EXTERNAL, cv2.CHAIN_APPROX_SIMPLE)
+    
+    # Filter noise and extract bounding boxes
+    boxes = [cv2.boundingRect(c) for c in contours]
+    boxes = [b for b in boxes if b[2] > 50 and b[3] > 15] # Width > 50, Height > 15
+    boxes.sort(key=lambda b: b[1]) # Sort top to bottom
+    
+    lines = []
+    for x, y, w, h in boxes:
+        # Add a 15px padding margin (TrOCR crashes/hallucinates if text touches edges)
+        pad_x, pad_y = 15, 15
+        x1 = max(0, x - pad_x)
+        y1 = max(0, y - pad_y)
+        x2 = min(img_cv.shape[1], x + w + pad_x)
+        y2 = min(img_cv.shape[0], y + h + pad_y)
+        
+        lines.append(pil_image.crop((x1, y1, x2, y2)))
+        
+    return lines if lines else [pil_image] # Fallback to whole image if no lines found
+
+def render_tts_button(text, voice_choice, speed, volume):
+    safe_text = text.replace("'", "\\'").replace('\n', ' ')
+    html_code = f"""
+    <div style="padding: 2px;">
+        <button onclick="playTTS()" style="box-sizing: border-box; background-color: transparent; border: 1px solid #8ff5ff; color: #8ff5ff; width: 100%; border-radius: 2px; font-family: 'Space Grotesk', sans-serif; text-transform: uppercase; font-size: 10px; padding: 12px 0; cursor: pointer; transition: 0.3s;" onmouseover="this.style.backgroundColor='#8ff5ff'; this.style.color='#000';" onmouseout="this.style.backgroundColor='transparent'; this.style.color='#8ff5ff';"><span style="vertical-align: middle;">Generate Audio Readout</span></button>
+    </div>
+    <script>
+    var systemVoices = [];
+    function loadVoices() {{ systemVoices = window.speechSynthesis.getVoices(); }}
+    window.speechSynthesis.onvoiceschanged = loadVoices; loadVoices();
+    function playTTS() {{
+        window.speechSynthesis.cancel();
+        var msg = new SpeechSynthesisUtterance('{safe_text}');
+        msg.rate = {speed}; msg.volume = {volume};
+        var targetVoice = '{voice_choice}';
+        var selectedVoice = null;
+        if (targetVoice === 'Aria (Neural)') {{ selectedVoice = systemVoices.find(v => v.name.toLowerCase().includes('female') || v.name.toLowerCase().includes('zira') || v.name.toLowerCase().includes('aria') || v.name.toLowerCase().includes('samantha')); }} 
+        else {{ selectedVoice = systemVoices.find(v => v.name.toLowerCase().includes('male') || v.name.toLowerCase().includes('david') || v.name.toLowerCase().includes('julian') || v.name.toLowerCase().includes('mark')); }}
+        if (selectedVoice) {{ msg.voice = selectedVoice; }}
+        window.speechSynthesis.speak(msg);
+    }}
+    </script>
+    """
+    st.components.v1.html(html_code, height=70)
+
+# --- 3. UI LAYOUT ---
+st.markdown(f"""
+    <div class="hero-title">
+        <div class="strike">Handwronging</div>
+        <div class="hero-accent">Handwriting</div>
+    </div>
+""", unsafe_allow_html=True)
+
+left, right = st.columns([1, 1], gap="large")
+
+with left:
+    if st.session_state.img_buffer is None:
+        st.markdown('<div class="uploader-wrapper">', unsafe_allow_html=True)
+        st.markdown("""
+            <div class="ingest-card">
+                <div class="system-label">SYSTEM_READY</div>
+                <div class="dashed-border"><span class="material-symbols-outlined" style="font-size:28px; color:#8ff5ff; font-variation-settings:'FILL' 1;">add_a_photo</span></div>
+                <div style="font-family:Space Grotesk; font-weight:500; font-size:16px; margin-bottom:4px; color:#fff;">Initialize Data Input</div>
+                <div style="color:#46484d; font-size:10px; margin-bottom:15px;">Drag file here or select from directory</div>
+                <div class="cyan-btn">Browse Local Storage</div>
+            </div>
+        """, unsafe_allow_html=True)
+        img_file = st.file_uploader(" ", type=["jpg", "png", "jpeg", "jfif", "webp"], label_visibility="collapsed")
+        st.markdown('</div>', unsafe_allow_html=True)
+        
+        if img_file:
+            raw_bytes = img_file.getvalue()
+            if len(raw_bytes) > 0:
+                st.session_state.img_buffer = raw_bytes
+                st.rerun()
+            else:
+                st.error("Upload failed: 0 bytes received.")
+    else:
+        try:
+            processed_image = Image.open(io.BytesIO(st.session_state.img_buffer)).convert("RGB")
+            st.image(processed_image, width=300, caption="Source Input")
+            if st.button("UPLOAD ANOTHER PHOTO"):
+                st.session_state.img_buffer = None
+                st.rerun()
+        except Exception as e:
+            st.error(f"Image Error: {e}")
+            if st.button("RESET SYSTEM"):
+                st.session_state.img_buffer = None
+                st.rerun()
+
+with right:
+    if st.session_state.img_buffer is not None:
+        proc, model, dev = load_engine()
+        if model:
+            # We initialize placeholders so we can update the UI line-by-line
+            stats_placeholder = st.empty()
+            text_placeholder = st.empty()
+            
+            # Start Segmentation
+            eval_image = Image.open(io.BytesIO(st.session_state.img_buffer)).convert("RGB")
+            line_images = segment_handwriting(eval_image)
+            
+            # Inference Loop
+            full_transcription = ""
+            total_confidence = 0
+            t_start = time.perf_counter()
+            
+            with st.spinner(f"Extracting {len(line_images)} lines..."):
+                for idx, line_img in enumerate(line_images):
+                    try:
+                        pix = proc(line_img, return_tensors="pt").pixel_values.to(dev)
+                        out = model.generate(pix, return_dict_in_generate=True, output_scores=True)
+                        pred = proc.batch_decode(out.sequences, skip_special_tokens=True)[0]
+                        
+                        probs = torch.stack(out.scores, dim=1).softmax(-1)
+                        total_confidence += float(torch.max(probs, dim=-1).values.mean().cpu().item()) * 100
+                        
+                        full_transcription += pred + "\n"
+                        
+                        # Live UI Update
+                        text_placeholder.markdown(f'<div class="output-box">{full_transcription}</div>', unsafe_allow_html=True)
+                    except Exception as e:
+                        log(f"Line {idx} failed: {e}")
+            
+            total_latency = time.perf_counter() - t_start
+            avg_conf = total_confidence / len(line_images) if line_images else 0
+            log(f"INFERENCE COMPLETE: {len(line_images)} lines in {total_latency:.2f}s")
+
+            with stats_placeholder.container():
+                s1, s2 = st.columns(2)
+                with s1: st.markdown(f'<div class="stat-card"><div class="stat-val">{avg_conf:.1f}%</div><div class="stat-lbl">Avg Confidence</div></div>', unsafe_allow_html=True)
+                with s2: st.markdown(f'<div class="stat-card"><div class="stat-val">{total_latency:.2f}s</div><div class="stat-lbl">Total Latency</div></div>', unsafe_allow_html=True)
+
+            st.markdown('<div style="margin-top:15px; font-size:9px; color:#46484d; text-transform:uppercase; letter-spacing:2px; font-weight:700;">Audio Synthesis (TTS)</div>', unsafe_allow_html=True)
+            c1, c2, c3 = st.columns(3)
+            with c1: voice = st.selectbox("Vocal Profile", ["Aria (Neural)", "Julian (Natural)"], label_visibility="collapsed")
+            with c2: speed = st.slider("Playback Rate", min_value=0.5, max_value=2.0, value=1.0, step=0.1)
+            with c3: volume = st.slider("Volume Level", min_value=0.1, max_value=1.0, value=1.0, step=0.1)
+
+            render_tts_button(full_transcription, voice, speed, volume)
+
+            # Optional: Show the segmented lines for debugging/cool factor
+            with st.expander(f"View {len(line_images)} Segmented Lines"):
+                for i, l_img in enumerate(line_images):
+                    st.image(l_img, caption=f"Line {i+1}")
+        else:
+            st.warning("Model directory not found.")
+
+# --- 4. PERSISTENT DIAGNOSTICS ---
+log_html = "<div class='debug-terminal'>"
+for entry in st.session_state.debug_log:
+    log_html += f"<div>{entry}</div>"
+log_html += "</div>"
+st.markdown(log_html, unsafe_allow_html=True)