Initial Commit

.dockerignore

@@ -0,0 +1,4 @@
+__pycache__
+*.pyc
+.env
+.git

.gitattributes

@@ -1,35 +0,0 @@
-*.7z filter=lfs diff=lfs merge=lfs -text
-*.arrow filter=lfs diff=lfs merge=lfs -text
-*.bin filter=lfs diff=lfs merge=lfs -text
-*.bz2 filter=lfs diff=lfs merge=lfs -text
-*.ckpt filter=lfs diff=lfs merge=lfs -text
-*.ftz filter=lfs diff=lfs merge=lfs -text
-*.gz filter=lfs diff=lfs merge=lfs -text
-*.h5 filter=lfs diff=lfs merge=lfs -text
-*.joblib filter=lfs diff=lfs merge=lfs -text
-*.lfs.* filter=lfs diff=lfs merge=lfs -text
-*.mlmodel filter=lfs diff=lfs merge=lfs -text
-*.model filter=lfs diff=lfs merge=lfs -text
-*.msgpack filter=lfs diff=lfs merge=lfs -text
-*.npy filter=lfs diff=lfs merge=lfs -text
-*.npz filter=lfs diff=lfs merge=lfs -text
-*.onnx filter=lfs diff=lfs merge=lfs -text
-*.ot filter=lfs diff=lfs merge=lfs -text
-*.parquet filter=lfs diff=lfs merge=lfs -text
-*.pb filter=lfs diff=lfs merge=lfs -text
-*.pickle filter=lfs diff=lfs merge=lfs -text
-*.pkl filter=lfs diff=lfs merge=lfs -text
-*.pt filter=lfs diff=lfs merge=lfs -text
-*.pth filter=lfs diff=lfs merge=lfs -text
-*.rar filter=lfs diff=lfs merge=lfs -text
-*.safetensors filter=lfs diff=lfs merge=lfs -text
-saved_model/**/* filter=lfs diff=lfs merge=lfs -text
-*.tar.* filter=lfs diff=lfs merge=lfs -text
-*.tar filter=lfs diff=lfs merge=lfs -text
-*.tflite filter=lfs diff=lfs merge=lfs -text
-*.tgz filter=lfs diff=lfs merge=lfs -text
-*.wasm filter=lfs diff=lfs merge=lfs -text
-*.xz filter=lfs diff=lfs merge=lfs -text
-*.zip filter=lfs diff=lfs merge=lfs -text
-*.zst filter=lfs diff=lfs merge=lfs -text
-*tfevents* filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -1,20 +1,14 @@
-FROM python:3.13.5-slim
+FROM python:3.11-slim
 
 WORKDIR /app
 
-RUN apt-get update && apt-get install -y \
-    build-essential \
-    curl \
-    git \
-    && rm -rf /var/lib/apt/lists/*
+# Install python dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
 
-COPY requirements.txt ./
-COPY src/ ./src/
-
-RUN pip3 install -r requirements.txt
+# Copy all frontend code
+COPY . .
 
 EXPOSE 8501
 
-HEALTHCHECK CMD curl --fail http://localhost:8501/_stcore/health
-
-ENTRYPOINT ["streamlit", "run", "src/streamlit_app.py", "--server.port=8501", "--server.address=0.0.0.0"]
+CMD ["streamlit", "run", "app.py", "--server.port=8501", "--server.address=0.0.0.0"]

api_client.py

@@ -0,0 +1,29 @@
+import requests
+import os
+
+#BACKEND_URL = "http://localhost:8000"
+BACKEND_URL = os.getenv("BACKEND_URL", "https://your-username-pokemon-backend.hf.space")
+
+
+def predict(image_bytes: bytes, filename: str) -> dict:
+    try:
+        response = requests.post(
+            f"{BACKEND_URL}/predict",
+            files={"file": (filename, image_bytes, "image/png")}
+        )
+        response.raise_for_status()
+        return response.json()
+    except requests.exceptions.ConnectionError:
+        return {"error": "Could not connect to backend. Make sure it is running."}
+    except requests.exceptions.HTTPError as e:
+        return {"error": f"Backend error: {e}"}
+    except Exception as e:
+        return {"error": f"Unexpected error: {e}"}
+
+
+def health_check() -> bool:
+    try:
+        response = requests.get(f"{BACKEND_URL}/health", timeout=3)
+        return response.status_code == 200
+    except:
+        return False

app.py

@@ -0,0 +1,70 @@
+import streamlit as st
+from PIL import Image
+import io
+
+from api_client import predict, health_check
+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
+
+# --------------------------------
+# ----- PAGE CONFIG --------------
+# --------------------------------
+
+st.set_page_config(
+    page_title="Pokemon Card Image Processor",
+    page_icon="🃏",
+    layout="wide"
+)
+
+
+
+# --------------------------------
+# ----- HEADER -------------------
+# --------------------------------
+
+st.title("🃏 Pokemon Card Image Processor")
+st.caption("Upload a Pokémon card image to extract its data and find similar cards.")
+
+
+
+# --------------------------------
+# ----- BACKEND STATUS -----------
+# --------------------------------
+
+if not health_check():
+    st.error("⚠️ Backend is not running. Start it with: uvicorn app.main:app --reload")
+    st.stop()
+
+
+
+# --------------------------------
+# ----- UPLOAD -------------------
+# --------------------------------
+
+uploaded_file = render_upload_section()
+
+if uploaded_file:
+    image_bytes = uploaded_file.read()
+    image = Image.open(io.BytesIO(image_bytes))
+
+    col1, col2 = st.columns([1, 2])
+
+    with col1:
+        st.subheader("Uploaded Card")
+        st.image(image, use_column_width=True)
+
+    with col2:
+        with st.spinner("Analyzing card..."):
+            result = predict(image_bytes, uploaded_file.name)
+
+        if "error" in result:
+            st.error(result["error"])
+        else:
+            render_card_data(result)
+
+    st.divider()
+    st.subheader("Similar Cards")
+
+    if "error" not in result:
+        render_similarity_grid(result.get("similar_cards", []))

components/display_structured_data.py

@@ -0,0 +1,24 @@
+import streamlit as st
+
+def render_card_data(result: dict):
+    st.subheader("Extracted Card Data")
+
+    col1, col2 = st.columns(2)
+
+    with col1:
+        st.metric("Name", result.get("name") or "Not detected")
+        st.metric("HP", result.get("hp") or "Not detected")
+
+    with col2:
+        types = result.get("types")
+        st.metric("Types", ", ".join(types) if types else "Not detected")
+
+    # Moves
+    moves = result.get("moves")
+    if moves:
+        st.markdown("**Moves**")
+        for move in moves:
+            with st.expander(f"{move.get('name')} — {move.get('damage', '?')} damage"):
+                st.write(move.get("text") or "No description available.")
+    else:
+        st.metric("Moves", "Not detected")

components/similarity_grid.py

@@ -0,0 +1,29 @@
+import streamlit as st
+import requests
+from PIL import Image
+import io
+
+def render_similarity_grid(similar_cards: list):
+    if not similar_cards:
+        st.info("No similar cards found.")
+        return
+
+    cols = st.columns(len(similar_cards))
+
+    for col, card in zip(cols, similar_cards):
+        with col:
+            # Load and display card image
+            image_url = card.get("image_url")
+            if image_url:
+                try:
+                    response = requests.get(image_url, timeout=5)
+                    image = Image.open(io.BytesIO(response.content))
+                    st.image(image, use_column_width=True)
+                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)}")

components/upload_section.py

@@ -0,0 +1,9 @@
+import streamlit as st
+
+def render_upload_section():
+    uploaded_file = st.file_uploader(
+        "Upload a Pokémon card image",
+        type=["png", "jpg", "jpeg"],
+        help="Supported formats: PNG, JPG, JPEG"
+    )
+    return uploaded_file

requirements.txt

@@ -1,3 +1,4 @@
-altair
-pandas
-streamlit
+streamlit
+requests
+pillow
+os

src/streamlit_app.py

@@ -1,40 +0,0 @@
-import altair as alt
-import numpy as np
-import pandas as pd
-import streamlit as st
-
-"""
-# Welcome to Streamlit!
-
-Edit `/streamlit_app.py` to customize this app to your heart's desire :heart:.
-If you have any questions, checkout our [documentation](https://docs.streamlit.io) and [community
-forums](https://discuss.streamlit.io).
-
-In the meantime, below is an example of what you can do with just a few lines of code:
-"""
-
-num_points = st.slider("Number of points in spiral", 1, 10000, 1100)
-num_turns = st.slider("Number of turns in spiral", 1, 300, 31)
-
-indices = np.linspace(0, 1, num_points)
-theta = 2 * np.pi * num_turns * indices
-radius = indices
-
-x = radius * np.cos(theta)
-y = radius * np.sin(theta)
-
-df = pd.DataFrame({
-    "x": x,
-    "y": y,
-    "idx": indices,
-    "rand": np.random.randn(num_points),
-})
-
-st.altair_chart(alt.Chart(df, height=700, width=700)
-    .mark_point(filled=True)
-    .encode(
-        x=alt.X("x", axis=None),
-        y=alt.Y("y", axis=None),
-        color=alt.Color("idx", legend=None, scale=alt.Scale()),
-        size=alt.Size("rand", legend=None, scale=alt.Scale(range=[1, 150])),
-    ))