Edited frontend layout

app.py

@@ -42,35 +42,19 @@ st.caption("Upload a Pokémon card image to extract its data and find similar ca
 # ----- UPLOAD -------------------
 # --------------------------------
 
-uploaded_file = st.file_uploader(
-    "Upload a Pokémon card image",
-    type=["png", "jpg", "jpeg"],
-    key="card_uploader"
-)
-
-st.write("Uploaded file object:", uploaded_file)
-
-if uploaded_file is not None:
-    st.write("File detected")
-    st.write(uploaded_file.name)
+uploaded_file = render_upload_section()
 
+# Check if file was uploaded
 if uploaded_file:
+    # Reading Pokemon Card
     image_bytes = uploaded_file.read()
-    st.caption("Reading card...")
-
     image = Image.open(io.BytesIO(image_bytes))
 
-    st.caption("Successfully uploaded card")
-
+    # Separate page into two columns
     col1, col2 = st.columns([1, 2])
 
-    st.caption("Made 3 columns")
-
     with col1:
-        st.subheader("Uploaded Card")
-        st.image(image, use_column_width=True)
-
-        st.caption("Showing card")
+        st.image(image, width="content")
 
     with col2:
         with st.spinner("Analyzing card..."):

components/display_structured_data.py

@@ -1,24 +1,35 @@
 import streamlit as st
 
 def render_card_data(result: dict):
+    # Header for the uploaded card data
     st.subheader("Extracted Card Data")
 
+    # Create two columns
     col1, col2 = st.columns(2)
 
+    # Column one filled with name and HP
     with col1:
         st.metric("Name", result.get("name") or "Not detected")
         st.metric("HP", result.get("hp") or "Not detected")
 
+    # Column two filled with Pokemon types
     with col2:
         types = result.get("types")
         st.metric("Types", ", ".join(types) if types else "Not detected")
 
-    # Moves
+    # Display moves below above columns
     moves = result.get("moves")
+
+    # Check if moves category exists
     if moves:
         st.markdown("**Moves**")
+
+        # Loop through all resulting moves
         for move in moves:
+            # Write the move name, dmaage done and text
             with st.expander(f"{move.get('name')} — {move.get('damage', '?')} damage"):
                 st.write(move.get("text") or "No description available.")
+                
+    # Placeholder if no moves detected
     else:
         st.metric("Moves", "Not detected")

components/similarity_grid.py

@@ -4,26 +4,35 @@ from PIL import Image
 import io
 
 def render_similarity_grid(similar_cards: list):
+    # Check if there are no similar cards returned
     if not similar_cards:
         st.info("No similar cards found.")
         return
 
+    # Create however many columns as there are cards
     cols = st.columns(len(similar_cards))
 
+    # Loop through list of similar cards
     for col, card in zip(cols, similar_cards):
         with col:
             # Load and display card image
             image_url = card.get("image_url")
+
+            # Check if the card image url exists
             if image_url:
+                # Attempt to get the image url and render the image
                 try:
                     response = requests.get(image_url, timeout=5)
                     image = Image.open(io.BytesIO(response.content))
-                    st.image(image, use_column_width=True)
+                    st.image(image, width="content")
+
+                    # Write error message if image is unavailable
                 except:
                     st.write("Image unavailable")
 
-            st.markdown(f"**{card.get('name')}**")
-            st.caption(f"Set: {card.get('set') or 'Unknown'}")
-            st.caption(f"Types: {', '.join(card.get('types') or [])}")
-            st.caption(f"Rarity: {card.get('rarity') or 'Unknown'}")
-            st.caption(f"Score: {round(card.get('score', 0), 3)}")
+            # Display the card's name, ser, types, rarity, and similarity score
+            st.header(f"**{card.get('name')}**")
+            st.subheader(f"Set: {card.get('set') or 'Unknown'}")
+            st.subheader(f"Types: {', '.join(card.get('types') or [])}")
+            st.subheader(f"Rarity: {card.get('rarity') or 'Unknown'}")
+            st.subheader(f"Similarity Score: {round(card.get('score', 0), 3)}")