bird gallery now live

app.py

@@ -5,15 +5,20 @@ import os
 import numpy as np
 import pandas as pd
 from typing import Iterable
+from styling import js, seafoam, css, DESCRIPTION
 
 import gradio as gr
 from gradio.themes.base import Base
 from gradio.themes.utils import colors, fonts, sizes
 import requests
 import torch
+import shutil
 import librosa
 import torch.nn.functional as F
 
+# Image gallery 
+from fetch_img import download_images, scientific_to_species_code
+
 # Import the necessary functions from the voj package
 from audio_class_predictor import predict_class
 from bird_ast_model import birdast_preprocess, birdast_inference
@@ -106,16 +111,6 @@ def run_inference_with_model(audio_clip, sr, model_name):
 
     return results
 
-
-
-def load_markdown_from_url(url):
-    response = requests.get(url)
-    response.raise_for_status()
-    return response.text
-
-markdown_url = 'https://github.com/AmroAbdrabo/amroa/raw/main/img/desc.md'
-markdown_content = load_markdown_from_url(markdown_url)
-
 def predict(audio, start, end, model_name="BirdAST_Seq"):
     
     raw_sr, audio_array = audio
@@ -156,103 +151,13 @@ def predict(audio, start, end, model_name="BirdAST_Seq"):
     # run inference with model
     print(f"Running inference with model: {model_name}")
     species_class = run_inference_with_model(audio_array, DEFUALT_SR, model_name)
-
-    return audio_class, species_class, fig_waveform, fig_spectrogram
-
-
-
-
-DESCRIPTION = markdown_content
-
-css = """
-#gradio-animation {
-    font-size: 2em;
-    font-weight: bold;
-    text-align: center;
-    margin-bottom: 20px;
-}
-
-.logo-container img {
-    width: 14%;  /* Adjust width as necessary */
-    display: block;
-    margin: auto;
-}
-
-.number-input {
-    height: 100%;
-    padding-bottom: 60px; /* Adust the value as needed for more or less space */
-}
-.full-height {
-    height: 100%;
-}
-.column-container {
-    height: 100%; 
-} 
-"""
-
+    print("Species is ", species_class[0][0].strip().replace("_", " "))
+    images = prepare_images(species_class[0][0].strip().replace("_", " "))
+    if len(images) == 0:
+        images.append(("noimg.png", "No image"))
+    return audio_class, species_class, fig_waveform, fig_spectrogram, images
 
 
-class Seafoam(Base):
-    def __init__(
-        self,
-        *,
-        primary_hue: colors.Color | str = colors.emerald,
-        secondary_hue: colors.Color | str = colors.blue,
-        neutral_hue: colors.Color | str = colors.gray,
-        spacing_size: sizes.Size | str = sizes.spacing_md,
-        radius_size: sizes.Size | str = sizes.radius_md,
-        text_size: sizes.Size | str = sizes.text_lg,
-        font: fonts.Font
-        | str
-        | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("Quicksand"),
-            "ui-sans-serif",
-            "sans-serif",
-        ),
-        font_mono: fonts.Font
-        | str
-        | Iterable[fonts.Font | str] = (
-            fonts.GoogleFont("IBM Plex Mono"),
-            "ui-monospace",
-            "monospace",
-        ),
-    ):
-        super().__init__(
-            primary_hue=primary_hue,
-            secondary_hue=secondary_hue,
-            neutral_hue=neutral_hue,
-            spacing_size=spacing_size,
-            radius_size=radius_size,
-            text_size=text_size,
-            font=font,
-            font_mono=font_mono,
-        )
-
-
-seafoam = Seafoam()
-
-
-js = """
-function createGradioAnimation() {
-    var container = document.getElementById('gradio-animation');
-    var text = 'Voice of Jungle';
-    for (var i = 0; i < text.length; i++) {
-        (function(i){
-            setTimeout(function(){
-                var letter = document.createElement('span');
-                letter.style.opacity = '0';
-                letter.style.transition = 'opacity 0.5s';
-                letter.innerText = text[i];
-                container.appendChild(letter);
-                setTimeout(function() {
-                    letter.style.opacity = '1';
-                }, 50);
-            }, i * 250);
-        })(i);
-    }
-}
-"""
-
 REFERENCES = """
 # Appendix
 
@@ -307,6 +212,49 @@ def handle_model_selection(model_name, download_status):
     return download_status
 
 
+# Image generation
+def prepare_images(scientific_name: str):
+    # Get species code
+    scode = scientific_to_species_code(scientific_name)
+    if not scode:
+        return []
+    
+    # Clear folder assets' images
+    for filename in os.listdir(ASSET_DIR):
+        # Construct full file path
+        file_path = os.path.join(ASSET_DIR, filename)
+        # Check if the file is a .jpg, .jpeg, or .png
+        if file_path.lower().endswith(('.jpg', '.jpeg', '.png')):
+            # If yes, delete the file
+            os.remove(file_path)
+            print(f"Deleted: {file_path}")
+    
+    # Save images to assets
+    download_images(f"https://ebird.org/species/{scode}")
+
+    # Return array of local image paths
+    nsplit = scientific_name.split(" ")
+    abbreviate_name = nsplit[0][0] + "." + " " + nsplit[1] 
+    images = []
+    for img_file in os.listdir("./assets"):
+        if img_file.lower().endswith(('.png', '.jpg', '.jpeg')):
+            images.append((os.path.join("./assets", img_file),  abbreviate_name))
+
+    return images
+
+
+sp_and_cl = """<div align="center">
+<b> <h2> Class and Species Prediction </h2> </b>
+</div>"""
+
+sig_prop = """<div align="center">
+<b> <h2> Signal Visualization </h2> </b>
+</div>"""
+
+imgs = """<div align="center">
+<b> <h2> Bird Gallery </h2> </b>
+</div>"""
+
 with gr.Blocks(theme = seafoam, css = css, js = js) as demo:
     
     gr.Markdown('<div class="logo-container"><img src="https://i.ibb.co/vcG9kr0/vojlogo.jpg" width="50px" alt="vojlogo"></div>')
@@ -317,7 +265,6 @@ with gr.Blocks(theme = seafoam, css = css, js = js) as demo:
     model_names = ['BirdAST', 'BirdAST_Seq'] #, 'EfficientNet']
     model_dropdown = gr.Dropdown(label="Choose a model", choices=model_names)
     download_status = gr.Textbox(label="Model Status", lines=3, value='', interactive=False) # Non-interactive textbox for status
-
     model_dropdown.change(handle_model_selection, inputs=[model_dropdown, download_status], outputs=download_status)
 
     
@@ -328,14 +275,22 @@ with gr.Blocks(theme = seafoam, css = css, js = js) as demo:
         with gr.Column():
             audio_input = gr.Audio(label="Input Audio", elem_classes="full-height")
   
-    with gr.Row():
-        raw_class_output = gr.Dataframe(headers=["Class", "Score [%]"], row_count=10, label="Class Prediction")
-        species_output = gr.Dataframe(headers=["Class", "Score [%]"], row_count=10, label="Species Prediction")
-        
-    with gr.Row():
-        waveform_output = gr.Plot(label="Waveform")
-        spectrogram_output = gr.Plot(label="Spectrogram")
+    gr.Markdown(sp_and_cl)
+    with gr.Column():
+        with gr.Row():
+            raw_class_output = gr.Dataframe(headers=["Class", "Score [%]"], row_count=10, label="Class Prediction")
+            species_output = gr.Dataframe(headers=["Class", "Score [%]"], row_count=10, label="Species Prediction")
+            
+    gr.Markdown(sig_prop)
+    with gr.Column():
+        with gr.Row():
+            waveform_output = gr.Plot(label="Waveform")
+            spectrogram_output = gr.Plot(label="Spectrogram")
+        gr.Markdown(imgs)
+        gallery = gallery = gr.Gallery(label="Species Images", show_label=False, elem_id="gallery",columns=[3], rows=[1], object_fit="contain", height="auto")
     
+    gr.Button("Predict").click(predict, [audio_input, start_time_input, end_time_input, model_dropdown], [raw_class_output, species_output, waveform_output, spectrogram_output, gallery])
+
     gr.Examples(
         examples=[
             ["XC226833-Chestnut-belted_20Chat-Tyrant_20A_2010989.mp3", 0, 10],
@@ -344,8 +299,6 @@ with gr.Blocks(theme = seafoam, css = css, js = js) as demo:
         ],
         inputs=[audio_input, start_time_input, end_time_input]
     )
-    
-    gr.Button("Predict").click(predict, [audio_input, start_time_input, end_time_input, model_dropdown], [raw_class_output, species_output, waveform_output, spectrogram_output])
 
     gr.Markdown(REFERENCES)
 

fetch_img.py

@@ -22,8 +22,11 @@ bird_df = pd.read_csv("ebird_taxonomy_v2023.csv")
 
 
 def scientific_to_species_code(scientific_name: str):
-    scode = bird_df.loc[bird_df['SCI_NAME'] == scientific_name]['SPECIES_CODE']
-    return scode.array[0]
+    scode = bird_df[bird_df['SCI_NAME'].str.contains(scientific_name, na=False)]['SPECIES_CODE']
+    if not scode.array:
+        return []
+    else:
+        return scode.array[0]
 
 # Gets taxonomical info on bird. (Is not actually used)
 def get_bird_info(species_code : str):
@@ -33,7 +36,7 @@ def get_bird_info(species_code : str):
     data = response.content
     return data
 
-def download_images(url, folder_path='assets'):
+def download_images(url, folder_path='./assets'):
     # Create a folder to save images if it doesn't exist
     if not os.path.exists(folder_path):
         os.makedirs(folder_path)

requirements.txt

@@ -6,6 +6,7 @@ requests
 timm
 pandas
 torch
+shutil
 librosa
 noisereduce
 torchaudio

styling.py

@@ -0,0 +1,139 @@
+import warnings
+warnings.filterwarnings("ignore")
+
+import os
+import numpy as np
+import pandas as pd
+from typing import Iterable
+
+import gradio as gr
+from gradio.themes.base import Base
+from gradio.themes.utils import colors, fonts, sizes
+import requests
+import torch
+import shutil
+import librosa
+import torch.nn.functional as F
+
+# Image gallery 
+from fetch_img import download_images, scientific_to_species_code
+
+# Import the necessary functions from the voj package
+from audio_class_predictor import predict_class
+from bird_ast_model import birdast_preprocess, birdast_inference
+from bird_ast_seq_model import birdast_seq_preprocess, birdast_seq_inference
+
+from utils import plot_wave, plot_mel, download_model, bandpass_filter
+
+
+def load_markdown_from_url(url):
+    response = requests.get(url)
+    response.raise_for_status()
+    return response.text
+
+
+markdown_url = 'https://github.com/AmroAbdrabo/amroa/raw/main/img/desc.md'
+markdown_content = load_markdown_from_url(markdown_url)
+
+DESCRIPTION = markdown_content
+
+# CSS properties for the logo and inputs
+css = """
+#gradio-animation {
+    font-size: 2em;
+    font-weight: bold;
+    text-align: center;
+    margin-bottom: 20px;
+}
+#gallery {
+    align: center;
+    margin: auto;
+}
+.gr-gallery-item img {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+.logo-container img {
+    width: 14%;  /* Adjust width as necessary */
+    display: block;
+    margin: auto;
+}
+.number-input {
+    height: 100%;
+    padding-bottom: 60px; /* Adust the value as needed for more or less space */
+}
+.full-height {
+    height: 100%;
+}
+.column-container {
+    height: 100%; 
+} 
+.section-divider {
+    align: center;
+    font-size: 100% !important;
+    color: blue !important;
+}
+"""
+
+# Seafoam is the theme
+class Seafoam(Base):
+    def __init__(
+        self,
+        *,
+        primary_hue: colors.Color | str = colors.emerald,
+        secondary_hue: colors.Color | str = colors.blue,
+        neutral_hue: colors.Color | str = colors.gray,
+        spacing_size: sizes.Size | str = sizes.spacing_md,
+        radius_size: sizes.Size | str = sizes.radius_md,
+        text_size: sizes.Size | str = sizes.text_lg,
+        font: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("Poppins"),
+            "ui-sans-serif",
+            "sans-serif",
+        ),
+        font_mono: fonts.Font
+        | str
+        | Iterable[fonts.Font | str] = (
+            fonts.GoogleFont("IBM Plex Mono"),
+            "ui-monospace",
+            "monospace",
+        ),
+    ):
+        super().__init__(
+            primary_hue=primary_hue,
+            secondary_hue=secondary_hue,
+            neutral_hue=neutral_hue,
+            spacing_size=spacing_size,
+            radius_size=radius_size,
+            text_size=text_size,
+            font=font,
+            font_mono=font_mono,
+        )
+
+
+seafoam = Seafoam()
+
+# Typeletter animation
+js = """
+function createGradioAnimation() {
+    var container = document.getElementById('gradio-animation');
+    var text = 'Voice of Jungle';
+    for (var i = 0; i < text.length; i++) {
+        (function(i){
+            setTimeout(function(){
+                var letter = document.createElement('span');
+                letter.style.opacity = '0';
+                letter.style.transition = 'opacity 0.5s';
+                letter.innerText = text[i];
+                container.appendChild(letter);
+                setTimeout(function() {
+                    letter.style.opacity = '1';
+                }, 50);
+            }, i * 250);
+        })(i);
+    }
+}
+"""