Added OCR region drawing tab to visualize what the OCR is looking at

api_client.py

@@ -3,6 +3,8 @@ import os
 import requests
 import base64
 import streamlit as st
+import io
+from PIL import Image
 
 #BACKEND_URL = "http://localhost:8000"
 BACKEND_URL = os.getenv("BACKEND_URL", "https://dcorcoran-pokemon-card-image-processor-api.hf.space")
@@ -55,3 +57,29 @@ def get_all_cards(limit: int = 100) -> list:
         return response.json()
     except Exception as e:
         raise  
+
+
+def visualize_regions(image_bytes: bytes, filename: str) -> Image.Image | None:
+    try:
+        response = requests.post(
+            f"{BACKEND_URL}/visualize",
+            files={"file": (filename, image_bytes, "image/jpeg")},
+            timeout=30
+        )
+        response.raise_for_status()
+
+        # Decode the returned PNG bytes into a Pillow Image
+        return Image.open(io.BytesIO(response.content))
+
+    except requests.exceptions.HTTPError as http_err:
+        st.error(f"Visualization failed (HTTP {response.status_code}): {http_err}")
+        return None
+    except requests.exceptions.ConnectionError as conn_err:
+        st.error(f"Connection error during visualization: {conn_err}")
+        return None
+    except requests.exceptions.Timeout:
+        st.error("Visualization request timed out.")
+        return None
+    except Exception as e:
+        st.error(f"Unexpected error during visualization: {e}")
+        return None

app.py

@@ -4,7 +4,7 @@ import io
 import requests
 import os
 
-from api_client import predict, health_check, get_all_cards
+from api_client import predict, health_check, get_all_cards, visualize_regions
 from components.upload_section import render_upload_section
 from components.display_structured_data import render_card_data
 from components.similarity_grid import render_similarity_grid
@@ -42,7 +42,7 @@ if not health_check():
 # ----- UPLOAD -------------------
 # --------------------------------
 
-tab1, tab2 = st.tabs(["Upload Pokemon Card", "Card Database"])
+tab1, tab2, tab3 = st.tabs(["Upload Pokemon Card", "Card Database", "OCR Card Visualizer"])
 
 
 with tab1:
@@ -62,7 +62,7 @@ with tab1:
 
         with col2:
             with st.spinner("Analyzing card..."):
-                result = predict(image_bytes, uploaded_file.name)
+                result = predict(image_bytes, uploaded_file.name) 
 
             # Check if there was an error in the predict endpoint
             if "error_type" in result:
@@ -107,4 +107,41 @@ with tab2:
                         st.markdown("🃏")
                     st.caption(card.get("name", "Unknown"))
     else:
-        st.info("No cards to display.")
+        st.info("No cards to display.")
+
+with tab3:
+    # Tab header and description
+    st.header("OCR Region Visualizer")
+    st.caption("Upload a card to see exactly which regions the OCR is scanning.")
+
+    # Reuse the shared upload component to accept a card image
+    vis_file = render_upload_section()
+
+    if vis_file:
+        # Read the uploaded file bytes and decode into a Pillow Image for local display
+        image_bytes = vis_file.read()
+        image = Image.open(io.BytesIO(image_bytes)).convert("RGB")
+
+        # Split the view into two side-by-side columns: original vs. annotated
+        col1, col2 = st.columns(2)
+
+        # Display the unmodified card image on the left
+        with col1:
+            st.subheader("Original")
+            st.image(image, use_container_width=True)
+
+        # Display the modified card image on the right
+        with col2:
+            st.subheader("OCR Regions")
+            annotated = visualize_regions(image_bytes, vis_file.name)
+            if annotated:
+                st.image(annotated, use_container_width=True)
+
+        st.divider()
+
+        # Color legend mapping each box color to its corresponding OCR region
+        st.markdown("**Legend**")
+        cols = st.columns(3)
+        cols[0].markdown("🔴 **Name**")
+        cols[1].markdown("🔵 **HP**")
+        cols[2].markdown("🟢 **Moves**")