app.py

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()