Upload 12 files

.gitattributes

@@ -33,3 +33,10 @@ saved_model/**/* 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
+examples/boar.jpg filter=lfs diff=lfs merge=lfs -text
+examples/crow.jpg filter=lfs diff=lfs merge=lfs -text
+examples/dragonfly.jpg filter=lfs diff=lfs merge=lfs -text
+examples/macque.jpg filter=lfs diff=lfs merge=lfs -text
+examples/otter.jpg filter=lfs diff=lfs merge=lfs -text
+examples/parrot.jpg filter=lfs diff=lfs merge=lfs -text
+examples/squirrel.jpg filter=lfs diff=lfs merge=lfs -text

app.py

@@ -0,0 +1,301 @@
+import os
+import base64
+import json
+from typing import Optional, Tuple
+
+import gradio as gr
+import numpy as np
+from open_clip import create_model_and_transforms, get_tokenizer
+from PIL import Image
+import requests
+import torch
+
+from logging_config import logger
+from helpers import l2_normalize, encode_image
+
+# Set your API Gateway URL below.
+API_GATEWAY_URL = os.getenv(
+    "API_GATEWAY_URL",
+    ""
+)
+
+API_GATEWAY_API_KEY = os.getenv(
+    "API_GATEWAY_API_KEY",
+    ""
+)
+
+MODEL_NAME = os.getenv(
+    "MODEL_NAME",
+    "hf-hub:imageomics/bioclip"
+)
+
+# Load BioCLIP Model from Hugging Face
+logger.info("Loading model from Hugging Face...")
+model, _, preprocess = create_model_and_transforms(MODEL_NAME)
+device = torch.device("cuda:0" if torch.cuda.is_available() else "cpu")
+tokenizer = get_tokenizer(MODEL_NAME)
+model = model.to(device)
+logger.info(f"Model loaded on device successfully: {device}")
+
+# Gradio App Function
+def app_function(uploaded_image: Optional[np.ndarray]) -> Tuple[str, Optional[str], Optional[str], str]:
+    """Main function for the Gradio app.
+    
+    Processes the uploaded image, performs semantic search, and returns a summary, species information, and HTML output.
+
+    Args:
+        uploaded_image (Optional[np.ndarray]): Uploaded image as a NumPy array.
+    
+    Returns:
+        Tuple[str, Optional[str], Optional[str], str]: Summary, proposed scientific name, proposed common name, and HTML output.
+    """
+    if uploaded_image is None:
+        logger.error("app_function: No image uploaded.")
+        return "No image uploaded", None, None, ""
+    
+    try:
+        image = Image.fromarray(uploaded_image)
+    except Exception as e:
+        logger.exception("app_function: Error processing image. Check if a valid image array is provided. Exception: %s", e)
+        return f"Error processing image: {e}", None, None, ""
+    
+    try:
+        query_embedding = np.array(encode_image(image=image, preprocess=preprocess, model=model, device=device))
+        query_embedding = l2_normalize(query_embedding).tolist()
+        logger.info("app_function: Image encoded successfully. Embedding length: %d", len(query_embedding))
+    except Exception as e:
+        logger.exception("app_function: Error encoding image. Uploaded image shape: %s. Exception: %s", getattr(uploaded_image, 'shape', 'N/A'), e)
+        return f"Error encoding image: {e}", None, None, ""
+    
+    payload = {"query_embedding": query_embedding}
+    headers = {"x-api-key": API_GATEWAY_API_KEY}
+    logger.info("app_function: Calling API Gateway with payload (embedding sample: %s...)", query_embedding[:5])
+
+    # Print the query embedding for debugging
+    # print(query_embedding)
+
+    try:
+        response = requests.post(API_GATEWAY_URL, json=payload, headers=headers)
+        logger.info("app_function: API Gateway responded with status code %d", response.status_code)
+    except Exception as e:
+        logger.exception("app_function: Exception during API Gateway call with payload: %s. Exception: %s", payload, e)
+        return f"Error calling API: {e}", None, None, ""
+    
+    if response.status_code != 200:
+        logger.error("app_function: API Gateway returned error %d - %s", response.status_code, response.text)
+        return f"API error: {response.status_code} - {response.text}", None, None, ""
+    
+    try:
+        body = response.json()
+        logger.info("app_function: Successfully parsed API Gateway response as JSON.")
+
+        # Print the response for debugging
+        # print(response.text)
+        # print(response.status_code)
+
+        # If body is a string with a list, try to load it
+        if isinstance(body, str):
+            try:
+                results = json.loads(body)
+            except Exception:
+                results = body
+        else:
+            results = body
+    except Exception as e:
+        logger.exception("app_function: Error decoding API Gateway response. Exception: %s", e)
+        return f"Error decoding response: {e}", None, None, ""
+
+    urls = []
+    image_urls = []
+    scientific_names = []
+    common_names = []
+    similarity_scores = []
+    
+    for res in results:
+        urls.append(res.get("url", ""))
+        image_urls.append(res.get("image_url", ""))
+        scientific_names.append(res.get("scientific_name", "N/A"))
+        common_names.append(res.get("common_name", "N/A"))
+        similarity_scores.append(res.get("similarity", 0))
+    
+    proposed_scientific = scientific_names[0]
+    proposed_common = common_names[0]
+    summary = "Found top 5 similar wildlife images."
+    
+    # Build HTML output for the 5 boxes in horizontal arrangement.
+    boxes_html = "<div style='display: flex; justify-content: space-around; flex-wrap: nowrap;'>"
+    for url, image_url, sci, com, similarity_score in zip(urls, image_urls, scientific_names, common_names, similarity_scores):
+        try:
+            r = requests.get(image_url, timeout=5)
+            if r.status_code == 200:
+                encoded_img = base64.b64encode(r.content).decode("utf-8")
+                # Wrap the image in a container to keep it within fixed dimensions.
+                img_tag = f"""
+                    <div style="width:200px; height:150px; overflow:hidden; display:flex; align-items:center; justify-content:center;">
+                        <img src='data:image/jpeg;base64,{encoded_img}' style='max-width:100%; max-height:100%; object-fit: contain;'/>
+                    </div>
+                    """
+            else:
+                img_tag = """
+                    <div style="width:200px; height:150px; background:#eee; display:flex; align-items:center; justify-content:center;">
+                        Error loading image
+                    </div>
+                    """
+        except Exception as e:
+            logger.exception("app_function: Error loading image from URL: %s. Exception: %s", image_url, e)
+            img_tag = """
+                    <div style="width:200px; height:150px; background:#eee; display:flex; align-items:center; justify-content:center;">
+                        Error loading image
+                    </div>
+                    """
+        
+        box = f"""
+            <div style='text-align: center; margin: 10px; flex: 1; border: 1px solid #ccc; min-height: 250px; display: flex; flex-direction: column; align-items: center; justify-content: center;'>
+                {img_tag}
+                <div style='font-size: 12px; margin-top: 5px;'>
+                    <div><a href="{url}" target="_blank">View on iNaturalist</a></div>
+                    <div>Scientific: {sci}</div>
+                    <div>Common: {com}</div>
+                    <div>Similarity: {similarity_score:.2f}</div>
+                </div>
+            </div>
+        """
+        boxes_html += box
+    boxes_html += "</div>"    
+
+    logger.info("app_function: Results processed and returned to Gradio interface successfully.")
+    return summary, proposed_scientific, proposed_common, boxes_html
+
+# Gradio Interface Using Blocks Layout
+with gr.Blocks(title="Wildlife Semantic Search with BioCLIP") as demo:
+    # Custom CSS to fix the display size of the uploaded image.
+    gr.HTML(
+        """
+        <style>
+            /* Force the uploaded image to fit within 300x300px while preserving aspect ratio */
+            #fixedImage img {
+                object-fit: contain;
+                width: 300px;
+                height: 300px;
+            }
+            /* Style the logo to remove whitespace */
+            .logo-image {
+                object-fit: cover;
+                object-position: center;
+                width: 100%;
+                height: 100%;
+                display: block;
+                margin: 0;
+                padding: 0;
+            }
+            /* Custom style for the submit button */
+            .submit-button {
+                background: linear-gradient(90deg, green 0%, green 70%, orange 100%) !important;
+                color: white !important;
+                font-weight: bold !important;
+            }
+        </style>
+        """
+    )
+    
+    # Row 1: Logo and Description in two columns.
+    with gr.Row(variant="panel"):
+        with gr.Column(scale=1):
+            gr.Image("logo/logo.jpg", elem_classes=["logo-image"], show_label=False)
+        with gr.Column(scale=30):
+            gr.Markdown(
+                """
+                ### Welcome to Ecologist – Singapore's AI-powered biodiversity explorer!
+
+                **Ecologist** identifies wildlife species found in Singapore from an uploaded photo. 
+                
+                Powered by multimodal image retrieval and visual encoding with [BioCLIP](https://huggingface.co/imageomics/bioclip), the system extracts features from the image and matches them against a specialized database of Singapore's diverse flora and fauna.
+                
+                Both scientific and common names are provided within seconds, along with visually similar images that offer context about Singapore's rich natural heritage.
+                
+                Ecologist is a step towards celebrating and preserving the island country’s unique wildlife through AI.
+                """
+            )
+
+    # Row 2: Image Upload with a fixed display container.
+    with gr.Row(variant="panel"):
+        with gr.Column():
+            image_input = gr.Image(type="numpy", label="Upload Wildlife Image", elem_id="fixedImage")
+    
+    # Row 3: Submit Button.
+    submit_button = gr.Button("Submit", elem_classes=["submit-button"])
+
+    with gr.Row(variant="panel"):
+        with gr.Column():
+            gr.Examples(
+                examples=[
+                    ["examples/boar.jpg"],
+                    ["examples/crow.jpg"],
+                    ["examples/dragonfly.jpg"],
+                    ["examples/macque.jpg"],
+                    ["examples/otter.jpg"],
+                    ["examples/parrot.jpg"],
+                    ["examples/squirrel.jpg"],
+                ],
+                inputs=image_input,
+                outputs=None,
+                label="Example Wildlife Images",
+            )
+
+    # Row 4: Proposed Species Output.
+    with gr.Row(variant="panel"):
+        with gr.Column():
+            gr.Markdown("## Identified Species")
+
+    with gr.Row(variant="panel"):
+        with gr.Column():
+            proposed_scientific_output = gr.Textbox(label="Scientific Name", placeholder="No name yet")
+        with gr.Column():
+            proposed_common_output = gr.Textbox(label="Common Name", placeholder="No name yet")
+    
+    # Row 5: Pre-populated placeholder for 5 columns with borders.
+    with gr.Row(variant="panel"):
+        with gr.Column():
+            gr.Markdown("## Most Similar Wildlife Images from Database")
+
+    placeholder_boxes = "<div style='display: flex; justify-content: space-around; flex-wrap: nowrap;'>"
+    for _ in range(5):
+        placeholder_boxes += """
+            <div style='text-align: center; margin: 10px; flex: 1; border: 1px solid #ccc; min-height: 250px; display: flex; align-items: center; justify-content: center;'>
+                No image yet
+            </div>
+        """
+    placeholder_boxes += "</div>"
+
+    with gr.Row(variant="panel"):
+        with gr.Column():
+            html_output = gr.HTML(value=placeholder_boxes, container=True)
+
+    with gr.Row(variant="panel"):
+        with gr.Column():
+            gr.Markdown(
+                """
+                **Disclaimer:**  
+                Not intended for commercial use, no user data is stored or used for training purposes, and all retrieval data is sourced from [iNaturalist](https://inaturalist.org/). Results may vary depending on the input image. 
+                
+                **References:**  
+                This project is inspired by the work on [Biome](https://huggingface.co/spaces/govtech/Biome) from GovTech Singapore.  
+                
+                **Acknowledgments:**  
+                Gratitude to [Dylan Chan](https://www.pexels.com/@dylan-chan-2880813/), [Jesper](https://www.pexels.com/@jesper-425001880/), [Mark Baldovino](https://www.pexels.com/@odlab2/), [Sane Noor](https://www.pexels.com/@norsan/), [Soumen Chakraborty](https://www.pexels.com/@soumen-chakraborty-363019169/), [Tony Wu](https://www.pexels.com/@tonywuphotography/) and [Zett Foto](https://www.pexels.com/@zett-foto-194587/) for their wildlife images in [Pexels](https://www.pexels.com/).
+                """
+                )
+    
+    # Wrapping the function to only forward the necessary outputs.
+    def wrapper(uploaded_image):
+        summary, proposed_scientific, proposed_common, boxes_html = app_function(uploaded_image)
+
+        # Print the summary for debugging
+        # print(summary)
+
+        return proposed_scientific, proposed_common, boxes_html
+
+    submit_button.click(fn=wrapper, inputs=image_input, outputs=[proposed_scientific_output, proposed_common_output, html_output])
+
+if __name__ == "__main__":
+    demo.launch()

logging_config.py

@@ -0,0 +1,14 @@
+import logging
+
+# Configure logging
+logging.basicConfig(
+    level=logging.INFO,  # Set the default logging level
+    format="%(asctime)s - %(levelname)s - %(message)s",
+    handlers=[
+        logging.StreamHandler(),  # Log to the console
+        logging.FileHandler("app.log", mode="a")  # Log to a file
+    ]
+)
+
+# Create a logger instance
+logger = logging.getLogger(__name__)

requirements.txt

@@ -0,0 +1,4 @@
+open-clip-torch==2.30.0
+torch==2.6.0
+gradio==5.15.0
+requests==2.31.0