Add professional, light-themed dashboard

.gitattributes

@@ -33,3 +33,5 @@ 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
+docs/gradio/images/red_fish_2.png filter=lfs diff=lfs merge=lfs -text
+docs/gradio/images/red_fish.png filter=lfs diff=lfs merge=lfs -text

Dockerfile

@@ -67,6 +67,10 @@ COPY --chown=user --from=model-builder /models $HOME/app/models
 # Copy the application code
 COPY --chown=user ./app app
 
+# Copy templates and static files for dashboard
+COPY --chown=user ./templates templates
+COPY --chown=user ./static static
+
 # Create necessary directories
 RUN mkdir -p $HOME/.cache/huggingface $HOME/.cache/torch
 

app/main.py

@@ -8,7 +8,9 @@ import asyncio
 from contextlib import asynccontextmanager
 from fastapi import FastAPI, HTTPException, Request
 from fastapi.middleware.cors import CORSMiddleware
-from fastapi.responses import JSONResponse
+from fastapi.responses import JSONResponse, HTMLResponse
+from fastapi.staticfiles import StaticFiles
+from fastapi.templating import Jinja2Templates
 import uvicorn
 
 from app.core.config import settings
@@ -57,6 +59,10 @@ app = FastAPI(
     lifespan=lifespan
 )
 
+# Mount static files and templates (for dashboard)
+app.mount("/static", StaticFiles(directory="static"), name="static")
+templates = Jinja2Templates(directory="templates")
+
 # Add CORS middleware
 app.add_middleware(
     CORSMiddleware,
@@ -86,18 +92,31 @@ async def global_exception_handler(request: Request, exc: Exception):
 app.include_router(api_router, prefix=settings.API_V1_STR)
 
 
-# Root endpoint
-@app.get("/", tags=["Root"])
-async def root():
+# Dashboard endpoint (new web interface)
+@app.get("/", response_class=HTMLResponse, tags=["Dashboard"])
+async def dashboard(request: Request):
+    """
+    Main dashboard for marine species identification.
+    Provides a web interface for testing the API.
+    """
+    return templates.TemplateResponse("dashboard.html", {
+        "request": request,
+        "active_tab": "dashboard"
+    })
+
+# API root endpoint (moved to /api for clarity)
+@app.get("/api", tags=["Root"])
+async def api_root():
     """
-    Root endpoint providing basic API information.
+    API root endpoint providing basic API information.
     """
     return {
         "message": "Marine Species Identification API",
         "version": settings.VERSION,
         "docs": "/docs",
         "health": f"{settings.API_V1_STR}/health",
-        "api_info": f"{settings.API_V1_STR}/info"
+        "api_info": f"{settings.API_V1_STR}/info",
+        "dashboard": "/"
     }
 
 

docs/dev/HF-MODELS.md

@@ -0,0 +1,55 @@
+Here is an example of a dockerfile of a fastapi app that uses my self hosted model
+
+# Dockerfile for Sema Translation API on HuggingFace Spaces
+# Multi-stage build to handle model downloading with proper permissions
+
+# Stage 1: Download models as root
+FROM python:3.10-slim AS model-builder
+
+# Install huggingface_hub for downloading models
+RUN pip install huggingface_hub
+
+# Download models from sematech/sema-utils
+RUN python -c "\
+from huggingface_hub import hf_hub_download; \
+hf_hub_download('sematech/sema-utils', 'spm.model'); \
+hf_hub_download('sematech/sema-utils', 'lid218e.bin'); \
+hf_hub_download('sematech/sema-utils', 'translation_models/sematrans-3.3B/model.bin'); \
+hf_hub_download('sematech/sema-utils', 'translation_models/sematrans-3.3B/config.json'); \
+hf_hub_download('sematech/sema-utils', 'translation_models/sematrans-3.3B/shared_vocabulary.txt')"
+
+# Stage 2: Build the application
+FROM python:3.10-slim
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+# Switch to the "user" user
+USER user
+# Set home to the user's home directory
+ENV HOME=/home/user \
+    PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Set environment variables for HuggingFace
+ENV HF_HUB_OFFLINE=1
+ENV TRANSFORMERS_NO_ADVISORY_WARNINGS=1
+
+# Copy the requirements file and install dependencies
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade pip
+RUN pip install --no-cache-dir --user -r requirements.txt
+
+# Copy the downloaded models from the builder stage
+COPY --chown=user --from=model-builder /root/.cache/huggingface $HOME/.cache/huggingface
+
+# Copy the application code
+COPY --chown=user ./app app
+
+# Expose port 7860 (HuggingFace Spaces standard)
+EXPOSE 7860
+
+# Tell uvicorn to run on port 7860, which is the standard for HF Spaces
+# Use 0.0.0.0 to make it accessible from outside the container
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

docs/dev/HF-QUICKSTART.md

@@ -0,0 +1,117 @@
+🐳 Get started with your Docker Space!
+Your new Space has been created, follow these steps to get started (or read the full documentation)
+
+Start by cloning this repo by using:
+
+Use an access token as git password/credential
+
+
+# When prompted for a password, use an access token with write permissions.
+# Generate one from your settings: https://huggingface.co/settings/tokens
+git clone https://huggingface.co/spaces/seamo-ai/fishapi
+
+# Make sure hf CLI is installed: pip install -U "huggingface_hub[cli]"
+hf download seamo-ai/fishapi --repo-type=space
+Let's create a simple Python app using FastAPI:
+
+requirements.txt
+
+
+fastapi
+uvicorn[standard]
+Hint You can also create the requirements file file directly in your browser.
+app.py
+
+
+from fastapi import FastAPI
+
+app = FastAPI()
+
+@app.get("/")
+def greet_json():
+    return {"Hello": "World!"}
+Hint You can also create the app file file directly in your browser.
+Create your Dockerfile:
+
+
+# Read the doc: https://huggingface.co/docs/hub/spaces-sdks-docker
+# you will also find guides on how best to write your Dockerfile
+
+FROM python:3.9
+
+RUN useradd -m -u 1000 user
+USER user
+ENV PATH="/home/user/.local/bin:$PATH"
+
+WORKDIR /app
+
+COPY --chown=user ./requirements.txt requirements.txt
+RUN pip install --no-cache-dir --upgrade -r requirements.txt
+
+COPY --chown=user . /app
+CMD ["uvicorn", "app:app", "--host", "0.0.0.0", "--port", "7860"]
+Hint Alternatively, you can create the Dockerfile file directly in your browser.
+Then commit and push:
+
+
+git add requirements.txt app.py Dockerfile
+git commit -m "Add application file"
+git push
+Finally, your Space should be running on this page after a few moments!
+
+App port
+
+Your Docker Space needs to listen on port 7860.
+
+Personalize your Space
+
+Make your Space stand out by customizing its emoji, colors, and description by editing metadata in its README.md file.
+
+Documentation
+
+Read the full documentation for Docker Spaces [here](https://huggingface.co/docs/hub/spaces-sdks-docker).
+
+
+Seamo Model card
+seamo-ai/marina-species-v1 
+
+License:
+apache-2.0
+Model card
+Files and versions
+Community
+Settings
+Getting started with your model
+Complete model information
+Add metadata and complete your model card to make your model more discoverable.
+
+
+Push your model files
+Upload your model weights to this repository.
+
+CLI
+Python
+Git
+HTTPS
+SSH
+
+
+brew install huggingface-cli
+
+
+hf auth login
+
+
+hf upload seamo-ai/marina-species-v1 .
+You can also upload directly from the website using the File Uploader.
+
+Preparing a significant release? Consult our guide to improve your model page and extend its impact and reach.
+Downloads last month
+-
+
+Downloads are not tracked for this model.
+How to track
+Inference Providers
+NEW
+This model isn't deployed by any Inference Provider.
+

docs/gradio/Dockerfile

@@ -0,0 +1,10 @@
+FROM python:3.7
+
+RUN apt-get update \
+    && apt-get install ffmpeg libsm6 libxext6 -y
+
+RUN pip install yolov5 tator gradio
+
+COPY . ./
+
+CMD [ "python", "-u", "./tator_inference.py" ]

docs/gradio/README.md

@@ -0,0 +1,16 @@
+---
+title: Seamore
+emoji: 🐟
+colorFrom: blue
+colorTo: indigo
+sdk: gradio
+sdk_version: 3.47.1
+app_file: app.py
+pinned: false
+---
+
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+
+This is a gradio app for the yolo 5 model that identifies fish species.
+

docs/gradio/app.py

@@ -0,0 +1,31 @@
+import glob
+import gradio as gr
+from inference import *
+from PIL import Image
+
+
+def gradio_app(image_path):
+    """A function that send the file to the inference pipeline, and filters
+    some predictions before outputting to gradio interface."""
+
+    predictions = run_inference(image_path)
+
+    out_img = Image.fromarray(predictions.render()[0])
+
+    return out_img
+
+
+Title = "Marine Life Identification"
+description = (
+    ""
+)
+
+examples = glob.glob("images/*.png")
+
+gr.Interface(gradio_app,
+             inputs=[gr.inputs.Image(type="filepath")],
+             outputs=gr.outputs.Image(type="pil"),
+             enable_queue=True,
+             title=Title,
+             description=description,
+             examples=examples).launch()

docs/gradio/inference.py

@@ -0,0 +1,69 @@
+import cv2
+import glob
+import numpy as np
+import torch
+import yolov5
+from typing import Dict, Tuple, Union, List, Optional
+
+
+# -----------------------------------------------------------------------------
+# Configs
+# -----------------------------------------------------------------------------
+
+model_path = "models/mbari-mb-benthic-33k.pt"
+
+
+# -----------------------------------------------------------------------------
+# YOLOv5 class
+# -----------------------------------------------------------------------------
+
+class YOLO:
+    """Wrapper class for loading and running YOLO model"""
+
+    def __init__(self, model_path: str, device: Optional[str] = None):
+
+        # load model
+        self.model = yolov5.load(model_path, device=device)
+
+    def __call__(
+            self,
+            img: Union[str, np.ndarray],
+            conf_threshold: float = 0.25,
+            iou_threshold: float = 0.45,
+            image_size: int = 720,
+            classes: Optional[List[int]] = None) -> torch.Tensor:
+        self.model.conf = conf_threshold
+        self.model.iou = iou_threshold
+
+        if classes is not None:
+            self.model.classes = classes
+
+        # pylint: disable=not-callable
+        detections = self.model(img, size=image_size)
+
+        return detections
+
+
+def run_inference(image_path):
+    """Helper function to execute the inference."""
+
+    predictions = model(image_path)
+
+    return predictions
+
+
+# -----------------------------------------------------------------------------
+# Model Creation
+# -----------------------------------------------------------------------------
+model = YOLO(model_path, device='cpu')
+
+if __name__ == "__main__":
+
+    # For demo purposes: run through a couple of test
+    # images and then output the predictions in a folder.
+    test_images = glob.glob("images/*.png")
+
+    for test_image in test_images:
+        predictions = run_inference(test_image)
+
+    print("Done.")

docs/gradio/mbari-mb-benthic-33k.names

@@ -0,0 +1,691 @@
+Anoplopoma fimbria
+Crossaster
+Myxoderma sacculatum
+Sebastolobus
+Neptunea-Buccinum Complex
+Ceriantharia
+Merluccius productus
+Pannychia moseleyi
+Octopus rubescens
+Actiniaria
+Solasteridae
+Antimora microlepis
+Macrouridae
+Heteropolypus ritteri
+Liponema brevicorne
+Ophiuroidea
+Octocorallia
+Porifera
+Brisingida
+Chorilia longipes
+Asteroidea
+equipment
+Metridium farcimen
+Embassichthys bathybius
+Funiculina
+Strongylocentrotus fragilis
+Chionoecetes tanneri
+Actinostoloidea
+Myxoderma platyacanthum
+Gastropoda
+Umbellula
+Psolus squamatus
+Hexactinellida
+Swiftia simplex
+Galatheidae
+Coryphaenoides
+Dosidicus gigas
+Microstomus pacificus
+Sebastolobus alascanus
+Farrea
+Poralia rufescens
+Acanthoptilum
+Isosicyonis
+Paragorgia arborea
+Pannychia sp. 2
+Bothrocara brunneum
+Hormathiidae
+Lycenchelys
+Pteraster
+Paragorgia
+Sebastes
+Bathyraja abyssicola
+Eptatretus
+Lycenchelys crotalinus
+Pennatulacea
+Pandalidae
+Tunicata
+Actinernus
+Asbestopluma rickettsi
+Apostichopus leukothele
+Stylasterias forreri
+Sebastes elongatus
+Sebastomus complex
+Parastenella
+Bathyraja trachura
+Laqueus californicus
+Eutonina indicans
+Keratoisis
+Apristurus
+Mysida
+Tritonia tetraquetra
+Mediaster aequalis
+Anthoptilum grandiflorum
+Virgulariidae
+Vesicomyidae
+Sebastolobus altivelis
+Neptunea
+Rathbunaster californicus
+Bathyraja kincaidii
+Scyliorhinidae
+Lycodapus
+Paralomis
+Isididae
+Crinoidea
+Acanthogorgia
+Swiftia
+Enteroctopus dofleini
+Pagurus tanneri
+Mediaster
+Pyrosoma atlanticum
+Nanomia bijuga
+Lycodes diapterus
+Pectinidae
+Asbestopluma
+Isidella
+Hippasteria
+Osedax
+Corallimorphus
+Florometra serratissima
+Scotoplanes
+Asteronyx
+Swiftia kofoidi
+Pandalus
+Pennatula phosphorea
+Ascidiacea
+Laminariales
+Doryteuthis opalescens
+Sebastidae
+Bathyraja
+Paelopatides confundens
+Suction Sampler
+Lycodes cortezianus
+Pandalus platyceros
+Lumpenus sagitta
+Pandalopsis ampla
+Hydrolagus colliei
+Bathyraja spinosissima
+Solaster hypothrissus
+Hyalonema (Corynonema) populiferum
+Holothuroidea
+Apostichopus
+Synallactidae
+Caridea
+Lithodidae
+Tonrometra
+Stomphia didemon
+Solmissus
+Euphausia
+Lycodapus fierasfer
+Munidopsis depressa
+Cataetyx
+Sebastes diploproa
+Pleurobranchaea californica
+Paguroidea
+Lycodes
+Heterochone calyx
+Isidella tentaculum
+Psathyrometra fragilis
+Sebastes melanostomus
+trash
+Xeneretmus latifrons
+Bathyraja microtrachys
+Bathybembix
+Pyrosoma detritus
+Luidia foliolata
+Lycodes pacificus
+Munida
+Beringraja rhina
+Lophaster
+Gersemia juliepackardae
+Paralomis multispina
+Stomphia
+Primnoidae
+Funiculina-Halipteris complex
+Pleuronectiformes
+Sibogagorgia cauliflora
+Sebastes chlorostictus
+Sebastes zacentrus
+Sebastes babcocki
+Solaster
+Akoya platinum
+Opisthoteuthis sp. A
+Lepidisis
+Branchiocerianthus
+Antedonidae
+Gorgonocephalus eucnemis
+Staurocalyptus
+Glyptocephalus zachirus
+Phyllospadix-Zostera detritus
+Careproctus melanurus
+Amphipoda
+LRJ complex
+Careproctus
+Benthopecten
+Squalus suckleyi
+Eopsetta jordani
+Eusergestes similis
+Sabellida
+Brachyura
+Serpulidae
+Lyopsetta exilis
+Mycale
+Poraniopsis inflata
+Eualus macrophthalmus
+Chonelasma
+Acanthascinae
+Rajiformes
+Corallimorphus pilatus
+Zoarcidae
+Aegina
+medusa carcass
+Neogastropoda
+Pleuronectidae
+Calyptogena
+Pleuronectinae
+Hymenaster
+Munidopsis
+Swiftia sim
+Munnopsidae
+Lobata
+Pannychia
+Lithodes couesi
+Myctophidae
+Thrissacanthias penicillatus
+geology
+Dofleinia
+Asthenactis fisheri
+Cydippida
+Harriotta raleighana
+Metacarcinus magister
+Gobiidae
+Albatrossia pectoralis
+Lampocteis cruentiventer
+Buccinidae
+Alcyonacea
+Ophiacanthidae
+Careproctus kamikawai
+Stylatula
+Paragorgiidae
+Majidae
+Megalodicopia hians
+Moridae
+Ptilosarcus gurneyi
+Isopoda
+Asbestopluma monticola
+Octopoda
+Bivalvia
+Desmophyllum dianthus
+Fungiacyathus (Bathyactis) marenzelleri
+Peniagone
+Elpidia
+Scotoplanes globosa
+Teuthoidea
+Peniagone gracilis
+Oneirophanta mutabilis complex
+Nanomia bijuga nectosome
+fishing-debris
+Peniagone papillata
+Synallactidae gen. et sp. indet.
+Sebastes rufus
+Hydrolagus cf. trolli
+Psychropotes sp. 2
+Tjalfiella
+Poeobius meseres
+Bathochordaeus stygius inner filter
+Bathochordaeus stygius outer filter
+Hydrozoa
+Cnemidocarpa
+Hyalonema
+Malacostraca
+Iosactis vagabunda
+Abyssocucumis abyssorum
+Peniagone vitrea
+Ophiodon elongatus
+Parastichopus leukothele
+Cystechinus loveni
+Ceramaster
+Hexacorallia
+Octopus californicus
+Neolithodes diomedeae
+Benthocodon pedunculata
+Styelidae
+Physiculus rastrelliger
+Laetmogone
+Sebastes saxicola
+Bathochordaeus
+Cladorhizidae
+Peribolaster biserialis
+Muusoctopus robustus
+Hydrolagus melanophasma
+Beroe forskalii
+Sebastes flavidus
+Nemichthyidae
+Poraniopsis
+Sebastes brevispinis
+Sebastes rubrivinctus
+Octopodidae
+Paraliparis sp. 2
+Pythonaster
+Synallactes
+Sebastes ensifer
+Sebastes miniatus
+Hyalonema (Oonema) bianchoratum
+Anomura
+Echinocrepis rostrata
+Prayidae
+Physonectae nectosome
+Physonectae
+Sebastes paucispinis
+Sebastes head
+Hirudinea
+Urticina
+Astropecten
+Leptogorgia
+Galatheoidea
+Beroe cucumis
+Bolocera
+Fariometra parvula
+Neptunea-Buccinum Complex eggcase
+Graneledone boreopacifica
+Polynoidae
+Psamminidae
+Psychrolutes phrictus
+Sergestes similis
+Calycophorae nectosome
+Beroe
+Thenea muricata
+Gonatus
+Henricia
+Nudibranchia
+Sebastes aurora
+Zoantharia
+Clavularia
+Terebratulina complex
+Macrourinae
+Ptychogastria
+Delectopecten
+Phacellophora camtschatica
+Siboglinidae
+Gorgoniidae
+eggcase
+Sibogagorgia
+Comatulida
+Diogenidae
+eggs
+Apolemia
+Midwater Respirometry System
+Pycnogonida
+Calliostoma
+Sebastes aleutianus-melanostictus complex
+Brachiopoda
+Medusae
+Lamellibrachia
+Bathyphellia australis
+Ophiuridae
+Lycodes brevipes
+Atolla
+Plectobranchus evides
+Asteriidae
+Farrea occa
+Agonidae
+Bathymetrinae
+Decapoda
+Corallium
+Halipteris californica
+Dipsacaster
+Chonelasmatinae sp. 2
+shell
+Phyllospadix detritus
+Spectrunculus grandis
+shell fragment
+Paralomis verrilli
+Hydrolagus
+Actinopterygii
+Parmaturus xaniurus
+whale carcass
+Pterasteridae arm
+Annelida
+Lyrocteis
+Echiura
+Vanhoeffenura pulchra
+Bolinopsis infundibulum
+Colossendeidae
+Bathochordaeus stygius
+Sebastes jordani
+Platyctenida
+Saxipendium implicatum
+TorquaratoridaeB sp. 2
+Pachycara bulbiceps
+Hydractiniidae
+Psamminidae sp. 2
+Tjalfiellidae
+Myxoderma
+Hyocrinidae
+Chondrocladia
+Cystocrepis setigera
+Munidopsis kensmithi
+Radiozoa
+Chaetognatha
+Siphonophorae
+Chrysogorgia
+Pseudostichopus mollis
+Benthothuria
+Bolocera kensmithi
+Sebastes semicinctus
+Galiteuthis phyllura
+Octopodinae
+Serrivomer
+Demospongiae
+Latrunculia (Latrunculia) austini
+Dromalia alexandri
+Scleractinia
+Plesionika
+bacterial mat
+Chondrocladia (Symmetrocladia) lyra
+Neoloricata
+asteroid feeding depression
+Bathyalcyon robustum
+Bathypterois
+Distichoptilum
+Paraliparis cephalus
+Sebastes serranoides
+Goniasteridae
+ledge
+Tromikosoma panamense
+Ctenophora
+Docosaccus maculatus
+sinker
+Lophaster furcilliger
+Sebastes cortezi
+Culeolus
+Mysidacea
+Bathydorus laevis pseudospinosus
+Alepocephalus tenebrosus
+Echinoidea
+Heterozonias alternatus
+Smithsonius dorothea
+Heterocarpus sp. 2
+Eucryphycus californicus
+Polychaeta tube
+Cirroteuthis
+Tergivelum baldwinae
+Tiburonia granrojo
+Liparidae
+Riftia pachyptila
+Hydroidolina
+Plexauridae
+Bathylagidae
+Lepidion
+Sclerothamnopsis
+Careproctus ovigerus
+Psychropotes depressa
+Icelinus filamentosus
+Chrysogorgia monticola
+wood
+Bathochordaeus inner filter
+Sebastes entomelas
+Anthozoa
+Bathypterois pectinatus
+Cladorhiza kensmithi
+Aporocidaris milleri
+Ischnomesidae
+Staurocalyptus solidus
+Anthoptilum lithophilum
+Atolla wyvillei
+Erenna richardi
+Hyalonematidae
+Pleurobranchaea
+Sergestidae
+Thermarces cerberus
+Pennatula
+Moloha faxoni
+Munida quadrispina
+Lophiiformes
+Benthoctopus
+Strongylocentrotus
+kelp
+Nanomia nectosome
+Sicyonis
+Chrysogorgia pinnata
+Forskalia formosa
+Sebastes ruberrimus
+Sebastes levis
+Praya dubia nectosome
+Praya dubia
+Pleuronectiformes 3
+Chuniphyes multidentata
+Dictyocalyx
+Zaniolepis frenata
+Octopus
+Forcipulatacea
+Eretmichthys pinnatus
+Dibranchus hystrix
+Coelorinchus spilonotus
+Pseudobathylagus
+Benthodytes
+Alternatipathes
+Lillipathes
+Protoptilum sp. 2
+Hastigerinella digitata
+Bargmannia elongata
+Bargmannia elongata nectosome
+Psychronaetes
+Bathysaurus mollis
+Lycodinae
+Euplectellidae
+Pasiphaea
+Bathysiphon
+Beroe abyssicola
+Tomopteris
+Polychaeta
+Articulata
+Apostichopus californicus
+Kophobelemnon
+Bolinopsis
+Euryalida
+Pennatulidae
+Gastroptychus
+molt
+Corallimorphus denhartogi
+Neptunea eggcase
+Octacnemidae sp. 2
+Xeneretmus
+Dibranchus spinosus
+Epizoanthus stellaris
+Pennatulacea sp. 2
+Sebastes borealis
+Aeolidiidae
+Mitrocoma cellularia
+Tromikosoma
+Icichthys lockingtoni
+Solmissus incisa
+Sebastes pinniger
+Enteropneusta
+Sebastes auriculatus
+Megalodicopia
+Asthenactis papyraceus
+Sebastes miniatus-pinniger complex
+Asthenactis
+test
+Icelinus
+Parantipathes
+Sebastes macdonaldi
+Sebastes mystinus
+Physiculus nematopus-rastrelliger complex
+Sebastes rosenblatti
+Bathochordaeus sinker
+Distichoptilum gracile
+kelp holdfast
+Rhinochimaeridae
+Echinocrepis setigera
+Sebastes caurinus
+Egregia menziesii
+Myriothelidae
+coiled fecal cast
+Cystechinus giganteus
+Bathochordaeus mcnutti inner filter
+Bathochordaeus mcnutti
+Cladorhiza
+Cirripedia
+Swiftia kol
+Phyllochaetopterus gigas
+Hymenaster koehleri
+sinker outer filter
+Allocentrotus fragilis
+Luciobrotula sp. A
+Opisthoteuthis
+Haliscera bigelowi
+Scotoplanes clarki
+Lyssacinosida sp. 2
+larvacean outer filter
+Ophichthus frontalis
+Calyptrophora
+Provannidae
+Marine organism
+Farrea truncata complex
+Actinoscyphia
+Exocoelactis
+Kophobelemnidae
+Lychnagalma nectosome
+Lychnagalma
+Caenogastropoda
+Zoroasteridae
+Bathochordaeus outer filter
+Vanhoeffenura
+Stylasterias
+Calycophorae
+Vitreosalpa gemini
+Anguilliformes
+Calocarides quinqueseriatus
+Fungiacyathus
+Candelabridae sp. 2
+Tergivelum sp. A
+Mesochordaeus erythrocephalus
+Monothalamea
+Paradiopatra
+Munida bapensis
+Sebastes crameri-melanostomus complex
+Asterozoa
+Patiria miniata
+Ophidiiformes
+Salpida
+Coelorinchus scaphopsis
+Tomopteris nisseni
+Camptoplites sp. A
+Psychropotidae
+Paxillosida
+Dendronotus patricki
+Oneirophanta
+Lensia conoidea nectosome
+Lensia conoidea
+Glyphocrangon vicaria
+Dipsacaster eximius
+Bathydorus
+Bathycrinidae
+Sebastolobus head
+Doryteuthis (Amerigo) opalescens eggs
+Sebastes crameri
+Thetys vagina
+Sebastes ovalis
+Lycodapus mandibularis
+Sebastolobus tail
+Sebastes goodei
+Pseudobathylagus milleri
+Narcomedusa
+Chiroteuthis calyx
+Heterobranchia
+Octacnemidae
+inner filter
+Pentametrocrinus paucispinulus
+Beroe gracilis
+Schizopathidae
+Dytaster gilberti
+Physiculus sp. 2
+Octopodidae tentacle
+Mysidae
+Antipatharia
+Lychnagalma utricularia nectosome
+Lychnagalma utricularia
+Ridgeia
+Actinauge verrillii
+Oikopleuridae outer filter
+Fecampiid eggcase
+Chilara taylori
+Acesta
+Caulophacus
+Parophrys vetulus
+Dibranchus sp. A
+Holothuria (Vaneyothuria) zacae
+Prayidae nectosome
+Acanthephyra
+Bathycrinus complanatus
+Munnopsis
+Alcyoniidae
+Microstomus bathybius
+Theudoidea
+Hydromedusae
+Protoptilum
+Bathyphellia
+Euplokamidae
+Microstomus pacificus sole
+Hormiphora californensis
+Leptocephalus-3
+Verum proximum
+Lepidopsetta bilineata
+Corolla spectabilis
+Haliscera conica
+Brisaster
+Oikopleura outer filter
+Paulasterias mcclaini
+Sicyonis careyi
+Iosactis
+Oikopleuridae inner filter
+Chromista
+Mola mola
+Melanostigma pammelas
+Scrippsia pacifica
+larvacean house
+Sebastes phillipsi
+Peinaleopolynoe orphanae
+Cnidaria
+salp detritus
+Atolla vanhoeffeni
+Appendicularia outer filter
+Appendicularia inner filter
+Sebastes simulator
+Acharax
+Plesionika sp. A
+Mediaster tenellus
+Eutonina
+Octopoteuthis deletron
+Crustacea
+Psathyrometra
+Patellogastropoda
+Sebastes cortezi tail
+Yoda sp. A
+Lophiodes caulinaris
+Ptilosarcus
+Gnathophis cinctus
+Munidopsis sp. 2
+salp chain
+Oikopleuridae
+Vogtia
+Rossellidae
+detrital aggregate
+Sebastes maliger
+Tuscaretta
+Chaunacops coloratus
+Pleurobrachiidae
+Tenebrincola cukri
+Amblyraja hyperborea

docs/gradio/mbari-mb-benthic-33k_stats.txt

@@ -0,0 +1,691 @@
+339 Anoplopoma fimbria
+320 Crossaster
+27 Myxoderma sacculatum
+5114 Sebastolobus
+252 Neptunea-Buccinum Complex
+264 Ceriantharia
+6291 Merluccius productus
+2554 Pannychia moseleyi
+1751 Octopus rubescens
+3316 Actiniaria
+186 Solasteridae
+479 Antimora microlepis
+131 Macrouridae
+1408 Heteropolypus ritteri
+621 Liponema brevicorne
+3706 Ophiuroidea
+289 Octocorallia
+2575 Porifera
+413 Brisingida
+209 Chorilia longipes
+2803 Asteroidea
+235 equipment
+594 Metridium farcimen
+744 Embassichthys bathybius
+3848 Funiculina
+8631 Strongylocentrotus fragilis
+2790 Chionoecetes tanneri
+151 Actinostoloidea
+120 Myxoderma platyacanthum
+811 Gastropoda
+1723 Umbellula
+3965 Psolus squamatus
+786 Hexactinellida
+743 Swiftia simplex
+287 Galatheidae
+411 Coryphaenoides
+50 Dosidicus gigas
+1214 Microstomus pacificus
+65 Sebastolobus alascanus
+907 Farrea
+54 Poralia rufescens
+757 Acanthoptilum
+812 Isosicyonis
+3546 Paragorgia arborea
+25 Pannychia sp. 2
+14 Bothrocara brunneum
+409 Hormathiidae
+621 Lycenchelys
+488 Pteraster
+484 Paragorgia
+1368 Sebastes
+199 Bathyraja abyssicola
+403 Eptatretus
+86 Lycenchelys crotalinus
+788 Pennatulacea
+92 Pandalidae
+584 Tunicata
+803 Actinernus
+293 Asbestopluma rickettsi
+525 Apostichopus leukothele
+214 Stylasterias forreri
+44 Sebastes elongatus
+74 Sebastomus complex
+215 Parastenella
+504 Bathyraja trachura
+300 Laqueus californicus
+2 Eutonina indicans
+3829 Keratoisis
+8 Apristurus
+66 Mysida
+68 Tritonia tetraquetra
+284 Mediaster aequalis
+41 Anthoptilum grandiflorum
+22 Virgulariidae
+766 Vesicomyidae
+136 Sebastolobus altivelis
+246 Neptunea
+3181 Rathbunaster californicus
+424 Bathyraja kincaidii
+6 Scyliorhinidae
+15 Lycodapus
+160 Paralomis
+1426 Isididae
+160 Crinoidea
+31 Acanthogorgia
+301 Swiftia
+57 Enteroctopus dofleini
+39 Pagurus tanneri
+119 Mediaster
+28 Pyrosoma atlanticum
+1098 Nanomia bijuga
+359 Lycodes diapterus
+31 Pectinidae
+340 Asbestopluma
+263 Isidella
+301 Hippasteria
+34 Osedax
+152 Corallimorphus
+373 Florometra serratissima
+602 Scotoplanes
+415 Asteronyx
+418 Swiftia kofoidi
+29 Pandalus
+46 Pennatula phosphorea
+24 Ascidiacea
+12 Laminariales
+117 Doryteuthis opalescens
+5 Sebastidae
+43 Bathyraja
+590 Paelopatides confundens
+329 Suction Sampler
+270 Lycodes cortezianus
+337 Pandalus platyceros
+6 Lumpenus sagitta
+570 Pandalopsis ampla
+167 Hydrolagus colliei
+207 Bathyraja spinosissima
+62 Solaster hypothrissus
+36 Hyalonema (Corynonema) populiferum
+465 Holothuroidea
+56 Apostichopus
+167 Synallactidae
+209 Caridea
+72 Lithodidae
+1 Tonrometra
+26 Stomphia didemon
+50 Solmissus
+54 Euphausia
+59 Lycodapus fierasfer
+8 Munidopsis depressa
+3 Cataetyx
+520 Sebastes diploproa
+37 Pleurobranchaea californica
+80 Paguroidea
+49 Lycodes
+418 Heterochone calyx
+135 Isidella tentaculum
+500 Psathyrometra fragilis
+162 Sebastes melanostomus
+118 trash
+33 Xeneretmus latifrons
+157 Bathyraja microtrachys
+31 Bathybembix
+253 Pyrosoma detritus
+107 Luidia foliolata
+34 Lycodes pacificus
+55 Munida
+86 Beringraja rhina
+153 Lophaster
+2373 Gersemia juliepackardae
+128 Paralomis multispina
+21 Stomphia
+14 Primnoidae
+267 Funiculina-Halipteris complex
+684 Pleuronectiformes
+63 Sibogagorgia cauliflora
+17 Sebastes chlorostictus
+18 Sebastes zacentrus
+43 Sebastes babcocki
+67 Solaster
+50 Akoya platinum
+11 Opisthoteuthis sp. A
+50 Lepidisis
+2 Branchiocerianthus
+81 Antedonidae
+31 Gorgonocephalus eucnemis
+492 Staurocalyptus
+56 Glyptocephalus zachirus
+21 Phyllospadix-Zostera detritus
+53 Careproctus melanurus
+12 Amphipoda
+625 LRJ complex
+26 Careproctus
+24 Benthopecten
+7 Squalus suckleyi
+31 Eopsetta jordani
+81 Eusergestes similis
+32 Sabellida
+6 Brachyura
+275 Serpulidae
+22 Lyopsetta exilis
+107 Mycale
+33 Poraniopsis inflata
+23 Eualus macrophthalmus
+12 Chonelasma
+163 Acanthascinae
+21 Rajiformes
+115 Corallimorphus pilatus
+19 Zoarcidae
+41 Aegina
+1 medusa carcass
+3 Neogastropoda
+10 Pleuronectidae
+7 Calyptogena
+10 Pleuronectinae
+296 Hymenaster
+202 Munidopsis
+14 Swiftia sim
+54 Munnopsidae
+7 Lobata
+138 Pannychia
+8 Lithodes couesi
+4 Myctophidae
+7 Thrissacanthias penicillatus
+34 geology
+8 Dofleinia
+141 Asthenactis fisheri
+15 Cydippida
+4 Harriotta raleighana
+11 Metacarcinus magister
+2 Gobiidae
+5 Albatrossia pectoralis
+6 Lampocteis cruentiventer
+21 Buccinidae
+53 Alcyonacea
+58 Ophiacanthidae
+5 Careproctus kamikawai
+4 Stylatula
+72 Paragorgiidae
+12 Majidae
+21 Megalodicopia hians
+2 Moridae
+13 Ptilosarcus gurneyi
+23 Isopoda
+214 Asbestopluma monticola
+9 Octopoda
+54 Bivalvia
+17 Desmophyllum dianthus
+41 Fungiacyathus (Bathyactis) marenzelleri
+3760 Peniagone
+822 Elpidia
+1706 Scotoplanes globosa
+32 Teuthoidea
+551 Peniagone gracilis
+158 Oneirophanta mutabilis complex
+337 Nanomia bijuga nectosome
+6 fishing-debris
+231 Peniagone papillata
+184 Synallactidae gen. et sp. indet.
+18 Sebastes rufus
+109 Hydrolagus cf. trolli
+96 Psychropotes sp. 2
+255 Tjalfiella
+24 Poeobius meseres
+34 Bathochordaeus stygius inner filter
+31 Bathochordaeus stygius outer filter
+17 Hydrozoa
+57 Cnemidocarpa
+29 Hyalonema
+21 Malacostraca
+17 Iosactis vagabunda
+499 Abyssocucumis abyssorum
+811 Peniagone vitrea
+18 Ophiodon elongatus
+10 Parastichopus leukothele
+124 Cystechinus loveni
+13 Ceramaster
+51 Hexacorallia
+163 Octopus californicus
+17 Neolithodes diomedeae
+381 Benthocodon pedunculata
+4 Styelidae
+9 Physiculus rastrelliger
+25 Laetmogone
+40 Sebastes saxicola
+11 Bathochordaeus
+62 Cladorhizidae
+8 Peribolaster biserialis
+144 Muusoctopus robustus
+43 Hydrolagus melanophasma
+8 Beroe forskalii
+15 Sebastes flavidus
+3 Nemichthyidae
+22 Poraniopsis
+12 Sebastes brevispinis
+16 Sebastes rubrivinctus
+32 Octopodidae
+1 Paraliparis sp. 2
+33 Pythonaster
+74 Synallactes
+6 Sebastes ensifer
+19 Sebastes miniatus
+40 Hyalonema (Oonema) bianchoratum
+2 Anomura
+92 Echinocrepis rostrata
+8 Prayidae
+2 Physonectae nectosome
+2 Physonectae
+9 Sebastes paucispinis
+1 Sebastes head
+45 Hirudinea
+2 Urticina
+2 Astropecten
+30 Leptogorgia
+51 Galatheoidea
+5 Beroe cucumis
+28 Bolocera
+14 Fariometra parvula
+5 Neptunea-Buccinum Complex eggcase
+51 Graneledone boreopacifica
+7 Polynoidae
+55 Psamminidae
+29 Psychrolutes phrictus
+2 Sergestes similis
+2 Calycophorae nectosome
+40 Beroe
+37 Thenea muricata
+17 Gonatus
+18 Henricia
+1 Nudibranchia
+66 Sebastes aurora
+681 Zoantharia
+112 Clavularia
+33 Terebratulina complex
+4 Macrourinae
+34 Ptychogastria
+21 Delectopecten
+20 Phacellophora camtschatica
+10 Siboglinidae
+6 Gorgoniidae
+132 eggcase
+60 Sibogagorgia
+106 Comatulida
+3 Diogenidae
+2 eggs
+12 Apolemia
+7 Midwater Respirometry System
+15 Pycnogonida
+25 Calliostoma
+14 Sebastes aleutianus-melanostictus complex
+57 Brachiopoda
+8 Medusae
+31 Lamellibrachia
+28 Bathyphellia australis
+6 Ophiuridae
+8 Lycodes brevipes
+13 Atolla
+4 Plectobranchus evides
+3 Asteriidae
+84 Farrea occa
+7 Agonidae
+9 Bathymetrinae
+7 Decapoda
+17 Corallium
+87 Halipteris californica
+8 Dipsacaster
+2 Chonelasmatinae sp. 2
+29 shell
+3 Phyllospadix detritus
+1 Spectrunculus grandis
+18 shell fragment
+9 Paralomis verrilli
+5 Hydrolagus
+21 Actinopterygii
+26 Parmaturus xaniurus
+3 whale carcass
+1 Pterasteridae arm
+5 Annelida
+2 Lyrocteis
+14 Echiura
+11 Vanhoeffenura pulchra
+14 Bolinopsis infundibulum
+31 Colossendeidae
+18 Bathochordaeus stygius
+44 Sebastes jordani
+3 Platyctenida
+2 Saxipendium implicatum
+2 TorquaratoridaeB sp. 2
+28 Pachycara bulbiceps
+10 Hydractiniidae
+47 Psamminidae sp. 2
+1 Tjalfiellidae
+62 Myxoderma
+5 Hyocrinidae
+3 Chondrocladia
+78 Cystocrepis setigera
+19 Munidopsis kensmithi
+2 Radiozoa
+22 Chaetognatha
+14 Siphonophorae
+36 Chrysogorgia
+13 Pseudostichopus mollis
+10 Benthothuria
+21 Bolocera kensmithi
+11 Sebastes semicinctus
+1 Galiteuthis phyllura
+2 Octopodinae
+2 Serrivomer
+8 Demospongiae
+6 Latrunculia (Latrunculia) austini
+15 Dromalia alexandri
+82 Scleractinia
+16 Plesionika
+27 bacterial mat
+2 Chondrocladia (Symmetrocladia) lyra
+13 Neoloricata
+2 asteroid feeding depression
+8 Bathyalcyon robustum
+2 Bathypterois
+2 Distichoptilum
+2 Paraliparis cephalus
+9 Sebastes serranoides
+12 Goniasteridae
+3 ledge
+21 Tromikosoma panamense
+10 Ctenophora
+7 Docosaccus maculatus
+2 sinker
+20 Lophaster furcilliger
+46 Sebastes cortezi
+8 Culeolus
+4 Mysidacea
+64 Bathydorus laevis pseudospinosus
+2 Alepocephalus tenebrosus
+12 Echinoidea
+13 Heterozonias alternatus
+19 Smithsonius dorothea
+2 Heterocarpus sp. 2
+2 Eucryphycus californicus
+104 Polychaeta tube
+4 Cirroteuthis
+20 Tergivelum baldwinae
+2 Tiburonia granrojo
+7 Liparidae
+19 Riftia pachyptila
+2 Hydroidolina
+9 Plexauridae
+5 Bathylagidae
+4 Lepidion
+7 Sclerothamnopsis
+1 Careproctus ovigerus
+3 Psychropotes depressa
+11 Icelinus filamentosus
+24 Chrysogorgia monticola
+3 wood
+13 Bathochordaeus inner filter
+15 Sebastes entomelas
+11 Anthozoa
+6 Bathypterois pectinatus
+20 Cladorhiza kensmithi
+15 Aporocidaris milleri
+6 Ischnomesidae
+9 Staurocalyptus solidus
+18 Anthoptilum lithophilum
+5 Atolla wyvillei
+6 Erenna richardi
+4 Hyalonematidae
+1 Pleurobranchaea
+3 Sergestidae
+6 Thermarces cerberus
+43 Pennatula
+3 Moloha faxoni
+5 Munida quadrispina
+2 Lophiiformes
+11 Benthoctopus
+60 Strongylocentrotus
+2 kelp
+5 Nanomia nectosome
+10 Sicyonis
+17 Chrysogorgia pinnata
+4 Forskalia formosa
+39 Sebastes ruberrimus
+10 Sebastes levis
+14 Praya dubia nectosome
+17 Praya dubia
+2 Pleuronectiformes 3
+3 Chuniphyes multidentata
+1 Dictyocalyx
+1 Zaniolepis frenata
+4 Octopus
+6 Forcipulatacea
+2 Eretmichthys pinnatus
+2 Dibranchus hystrix
+1 Coelorinchus spilonotus
+2 Pseudobathylagus
+6 Benthodytes
+6 Alternatipathes
+10 Lillipathes
+46 Protoptilum sp. 2
+5 Hastigerinella digitata
+8 Bargmannia elongata
+7 Bargmannia elongata nectosome
+8 Psychronaetes
+6 Bathysaurus mollis
+12 Lycodinae
+3 Euplectellidae
+6 Pasiphaea
+23 Bathysiphon
+4 Beroe abyssicola
+11 Tomopteris
+8 Polychaeta
+5 Articulata
+3 Apostichopus californicus
+23 Kophobelemnon
+6 Bolinopsis
+3 Euryalida
+2 Pennatulidae
+2 Gastroptychus
+3 molt
+2 Corallimorphus denhartogi
+8 Neptunea eggcase
+11 Octacnemidae sp. 2
+5 Xeneretmus
+3 Dibranchus spinosus
+30 Epizoanthus stellaris
+4 Pennatulacea sp. 2
+2 Sebastes borealis
+2 Aeolidiidae
+43 Mitrocoma cellularia
+3 Tromikosoma
+1 Icichthys lockingtoni
+6 Solmissus incisa
+13 Sebastes pinniger
+5 Enteropneusta
+5 Sebastes auriculatus
+6 Megalodicopia
+10 Asthenactis papyraceus
+4 Sebastes miniatus-pinniger complex
+8 Asthenactis
+3 test
+3 Icelinus
+1 Parantipathes
+13 Sebastes macdonaldi
+4 Sebastes mystinus
+5 Physiculus nematopus-rastrelliger complex
+1 Sebastes rosenblatti
+16 Bathochordaeus sinker
+3 Distichoptilum gracile
+1 kelp holdfast
+1 Rhinochimaeridae
+3 Echinocrepis setigera
+9 Sebastes caurinus
+2 Egregia menziesii
+1 Myriothelidae
+5 coiled fecal cast
+1 Cystechinus giganteus
+8 Bathochordaeus mcnutti inner filter
+8 Bathochordaeus mcnutti
+1 Cladorhiza
+6 Cirripedia
+2 Swiftia kol
+4 Phyllochaetopterus gigas
+10 Hymenaster koehleri
+3 sinker outer filter
+11 Allocentrotus fragilis
+2 Luciobrotula sp. A
+1 Opisthoteuthis
+1 Haliscera bigelowi
+12 Scotoplanes clarki
+2 Lyssacinosida sp. 2
+2 larvacean outer filter
+1 Ophichthus frontalis
+3 Calyptrophora
+6 Provannidae
+3 Marine organism
+3 Farrea truncata complex
+3 Actinoscyphia
+5 Exocoelactis
+12 Kophobelemnidae
+1 Lychnagalma nectosome
+1 Lychnagalma
+8 Caenogastropoda
+5 Zoroasteridae
+13 Bathochordaeus outer filter
+3 Vanhoeffenura
+2 Stylasterias
+4 Calycophorae
+4 Vitreosalpa gemini
+2 Anguilliformes
+1 Calocarides quinqueseriatus
+1 Fungiacyathus
+3 Candelabridae sp. 2
+2 Tergivelum sp. A
+1 Mesochordaeus erythrocephalus
+1 Monothalamea
+4 Paradiopatra
+2 Munida bapensis
+8 Sebastes crameri-melanostomus complex
+1 Asterozoa
+6 Patiria miniata
+1 Ophidiiformes
+3 Salpida
+2 Coelorinchus scaphopsis
+2 Tomopteris nisseni
+2 Camptoplites sp. A
+2 Psychropotidae
+1 Paxillosida
+2 Dendronotus patricki
+4 Oneirophanta
+1 Lensia conoidea nectosome
+2 Lensia conoidea
+4 Glyphocrangon vicaria
+3 Dipsacaster eximius
+3 Bathydorus
+4 Bathycrinidae
+4 Sebastolobus head
+1 Doryteuthis (Amerigo) opalescens eggs
+5 Sebastes crameri
+1 Thetys vagina
+5 Sebastes ovalis
+1 Lycodapus mandibularis
+1 Sebastolobus tail
+7 Sebastes goodei
+1 Pseudobathylagus milleri
+1 Narcomedusa
+2 Chiroteuthis calyx
+1 Heterobranchia
+1 Octacnemidae
+1 inner filter
+1 Pentametrocrinus paucispinulus
+2 Beroe gracilis
+1 Schizopathidae
+2 Dytaster gilberti
+3 Physiculus sp. 2
+1 Octopodidae tentacle
+5 Mysidae
+1 Antipatharia
+2 Lychnagalma utricularia nectosome
+2 Lychnagalma utricularia
+1 Ridgeia
+1 Actinauge verrillii
+1 Oikopleuridae outer filter
+1 Fecampiid eggcase
+2 Chilara taylori
+1 Acesta
+3 Caulophacus
+2 Parophrys vetulus
+1 Dibranchus sp. A
+1 Holothuria (Vaneyothuria) zacae
+2 Prayidae nectosome
+1 Acanthephyra
+1 Bathycrinus complanatus
+1 Munnopsis
+1 Alcyoniidae
+1 Microstomus bathybius
+1 Theudoidea
+4 Hydromedusae
+1 Protoptilum
+2 Bathyphellia
+1 Euplokamidae
+1 Microstomus pacificus sole
+3 Hormiphora californensis
+1 Leptocephalus-3
+2 Verum proximum
+1 Lepidopsetta bilineata
+1 Corolla spectabilis
+1 Haliscera conica
+18 Brisaster
+2 Oikopleura outer filter
+1 Paulasterias mcclaini
+1 Sicyonis careyi
+2 Iosactis
+1 Oikopleuridae inner filter
+1 Chromista
+1 Mola mola
+1 Melanostigma pammelas
+1 Scrippsia pacifica
+1 larvacean house
+4 Sebastes phillipsi
+1 Peinaleopolynoe orphanae
+3 Cnidaria
+1 salp detritus
+5 Atolla vanhoeffeni
+1 Appendicularia outer filter
+1 Appendicularia inner filter
+2 Sebastes simulator
+1 Acharax
+2 Plesionika sp. A
+1 Mediaster tenellus
+1 Eutonina
+2 Octopoteuthis deletron
+1 Crustacea
+2 Psathyrometra
+2 Patellogastropoda
+1 Sebastes cortezi tail
+2 Yoda sp. A
+1 Lophiodes caulinaris
+1 Ptilosarcus
+1 Gnathophis cinctus
+4 Munidopsis sp. 2
+2 salp chain
+1 Oikopleuridae
+1 Vogtia
+2 Rossellidae
+3 detrital aggregate
+1 Sebastes maliger
+1 Tuscaretta
+1 Chaunacops coloratus
+1 Pleurobrachiidae
+1 Tenebrincola cukri
+1 Amblyraja hyperborea

docs/gradio/requirements.txt

@@ -0,0 +1,2 @@
+tator
+yolov5==6.2.3

docs/gradio/tator_inference.py

@@ -0,0 +1,100 @@
+import os
+import logging
+from tempfile import TemporaryFile
+
+import cv2
+import numpy as np
+from PIL import Image
+
+import tator
+import inference
+
+
+logger = logging.getLogger(__name__)
+logger.setLevel(logging.INFO)
+
+# Read environment variables that are provided from TATOR
+host = os.getenv('HOST')
+token = os.getenv('TOKEN')
+project_id = int(os.getenv('PROJECT_ID'))
+media_ids = [int(id_) for id_ in os.getenv('MEDIA_IDS').split(',')]
+frames_per_inference = int(os.getenv('FRAMES_PER_INFERENCE', 30))
+
+# Set up the TATOR API.
+api = tator.get_api(host, token)
+
+# Iterate through each video.
+for media_id in media_ids:
+
+    # Download video.
+    media = api.get_media(media_id)
+    logger.info(f"Downloading {media.name}...")
+    out_path = f"/tmp/{media.name}"
+    for progress in tator.util.download_media(api, media, out_path):
+        logger.info(f"Download progress: {progress}%")
+
+    # Do inference on each video.
+    logger.info(f"Doing inference on {media.name}...")
+    localizations = []
+    vid = cv2.VideoCapture(out_path)
+    frame_number = 0
+
+    # Read *every* frame from the video, break when at the end.
+    while True:
+        ret, frame = vid.read()
+        if not ret:
+            break
+
+        # Create a temporary file, access the image data, save data to file.
+        framefile = TemporaryFile(suffix='.jpg')
+        im = Image.fromarray(frame)
+        im.save(framefile)
+
+        # For every N frames, make a prediction; append prediction results
+        # to a list, increase the frame count.
+        if frame_number % frames_per_inference == 0:
+
+            spec = {}
+
+            # Predictions contains all information inside pandas dataframe
+            predictions = inference.run_inference(framefile)
+
+            for i, r in predictions.pandas().xyxy[0].iterrows:
+
+                spec['media_id'] = media_id
+                spec['type'] = None # Unsure, docs not specific
+                spec['frame'] = frame_number
+
+                x, y, x2, y2 = r['xmin'], r['ymin'], r['xmax'], r['ymax']
+                w, h = x2 - x, y2 - y
+
+                spec['x'] = x
+                spec['y'] = y
+                spec['width'] = w
+                spec['height'] = h
+                spec['class_category'] = r['name']
+                spec['confidence'] = r['confidence']
+
+                localizations.append(spec)
+
+        frame_number += 1
+
+    # End interaction with video properly.
+    vid.release()
+
+    logger.info(f"Uploading object detections on {media.name}...")
+
+    # Create the localizations in the video.
+    num_created = 0
+    for response in tator.util.chunked_create(api.create_localization_list,
+                                              project_id,
+                                              localization_spec=localizations):
+        num_created += len(response.id)
+
+    # Output pretty logging information.
+    logger.info(f"Successfully created {num_created} localizations on "
+                f"{media.name}!")
+
+    logger.info("-------------------------------------------------")
+
+logger.info(f"Completed inference on {len(media_ids)} files.")

requirements.txt

@@ -21,6 +21,9 @@ huggingface-hub==0.19.4
 python-multipart==0.0.6
 aiofiles==23.2.1
 
+# Templates and Static Files (for dashboard)
+jinja2==3.1.2
+
 # Performance monitoring and optimization
 psutil==5.9.6
 

static/css/dashboard.css

@@ -0,0 +1,356 @@
+/* Dashboard-specific styles */
+
+.dashboard {
+  max-width: 1400px;
+  margin: 0 auto;
+}
+
+/* Page Header */
+.page-header {
+  text-align: center;
+  margin-bottom: var(--spacing-xl);
+}
+
+.page-description {
+  font-size: 1.125rem;
+  color: var(--gray-600);
+  max-width: 600px;
+  margin: 0 auto;
+  line-height: 1.6;
+}
+
+/* Status Banner */
+.status-banner {
+  background: white;
+  border: 1px solid var(--gray-200);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-md);
+  margin-bottom: var(--spacing-xl);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-shadow: var(--shadow-sm);
+}
+
+.status-indicator {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.status-dot {
+  width: 12px;
+  height: 12px;
+  border-radius: 50%;
+  background: var(--gray-400);
+  animation: pulse 2s infinite;
+}
+
+.status-dot.healthy {
+  background: var(--success-green);
+}
+
+.status-dot.error {
+  background: var(--error-red);
+}
+
+.status-text {
+  font-weight: 500;
+  color: var(--gray-700);
+}
+
+.model-info {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 1; }
+  50% { opacity: 0.5; }
+}
+
+/* Dashboard Grid */
+.dashboard-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr 1fr;
+  gap: var(--spacing-xl);
+  margin-bottom: var(--spacing-2xl);
+}
+
+.panel {
+  min-height: 600px;
+}
+
+/* Upload Area */
+.upload-area {
+  border: 2px dashed var(--gray-300);
+  border-radius: var(--radius-lg);
+  padding: var(--spacing-2xl);
+  text-align: center;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  margin-bottom: var(--spacing-lg);
+  min-height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.upload-area:hover {
+  border-color: var(--primary-blue);
+  background-color: var(--gray-50);
+}
+
+.upload-area.dragover {
+  border-color: var(--primary-blue);
+  background-color: #eff6ff;
+  transform: scale(1.02);
+}
+
+.upload-area.has-image {
+  border-style: solid;
+  border-color: var(--success-green);
+  background-color: var(--gray-50);
+  padding: var(--spacing-md);
+}
+
+.upload-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.upload-icon {
+  font-size: 3rem;
+  color: var(--gray-400);
+}
+
+.upload-primary {
+  font-size: 1.125rem;
+  font-weight: 500;
+  color: var(--gray-700);
+  margin: 0;
+}
+
+.upload-secondary {
+  font-size: 0.875rem;
+  color: var(--gray-500);
+  margin: 0;
+}
+
+/* Settings Section */
+.settings-section {
+  margin-bottom: var(--spacing-lg);
+  padding-top: var(--spacing-lg);
+  border-top: 1px solid var(--gray-200);
+}
+
+.settings-section h4 {
+  margin-bottom: var(--spacing-md);
+  color: var(--gray-700);
+}
+
+.settings-grid {
+  display: grid;
+  gap: var(--spacing-md);
+}
+
+.setting-item label {
+  display: block;
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--gray-700);
+  margin-bottom: var(--spacing-xs);
+}
+
+.slider-container {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-md);
+}
+
+.slider-container input[type="range"] {
+  flex: 1;
+  height: 6px;
+  border-radius: 3px;
+  background: var(--gray-200);
+  outline: none;
+  -webkit-appearance: none;
+}
+
+.slider-container input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-blue);
+  cursor: pointer;
+  box-shadow: var(--shadow-sm);
+}
+
+.slider-container input[type="range"]::-moz-range-thumb {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background: var(--primary-blue);
+  cursor: pointer;
+  border: none;
+  box-shadow: var(--shadow-sm);
+}
+
+.slider-value {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--primary-blue);
+  min-width: 40px;
+  text-align: right;
+}
+
+/* Button Styles */
+.btn-full {
+  width: 100%;
+}
+
+/* Image Containers */
+.image-container {
+  border: 1px solid var(--gray-200);
+  border-radius: var(--radius-md);
+  overflow: hidden;
+  min-height: 250px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--gray-50);
+}
+
+.image-container img {
+  max-width: 100%;
+  max-height: 100%;
+  object-fit: contain;
+}
+
+.image-placeholder {
+  text-align: center;
+  color: var(--gray-400);
+}
+
+.placeholder-icon {
+  font-size: 2rem;
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Results Sections */
+.annotated-section,
+.metadata-section,
+.species-section {
+  margin-bottom: var(--spacing-lg);
+}
+
+.annotated-section h4,
+.metadata-section h4,
+.species-section h4 {
+  margin-bottom: var(--spacing-md);
+  color: var(--gray-700);
+  font-size: 1rem;
+  font-weight: 600;
+}
+
+/* Metadata Grid */
+.metadata-grid {
+  display: grid;
+  gap: var(--spacing-sm);
+}
+
+.metadata-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-sm);
+  background: var(--gray-50);
+  border-radius: var(--radius-sm);
+}
+
+.metadata-label {
+  font-size: 0.875rem;
+  color: var(--gray-600);
+}
+
+.metadata-value {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--gray-900);
+}
+
+/* Species List */
+.species-list {
+  display: grid;
+  gap: var(--spacing-sm);
+  max-height: 300px;
+  overflow-y: auto;
+}
+
+.species-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: var(--spacing-sm);
+  background: white;
+  border: 1px solid var(--gray-200);
+  border-radius: var(--radius-sm);
+  transition: all 0.2s ease;
+}
+
+.species-item:hover {
+  border-color: var(--primary-blue);
+  box-shadow: var(--shadow-sm);
+}
+
+.species-name {
+  font-size: 0.875rem;
+  font-weight: 500;
+  color: var(--gray-900);
+}
+
+.species-confidence {
+  font-size: 0.875rem;
+  font-weight: 600;
+  color: var(--primary-blue);
+}
+
+/* Responsive Design */
+@media (max-width: 1024px) {
+  .dashboard-grid {
+    grid-template-columns: 1fr;
+    gap: var(--spacing-lg);
+  }
+  
+  .status-banner {
+    flex-direction: column;
+    gap: var(--spacing-sm);
+    text-align: center;
+  }
+}
+
+@media (max-width: 768px) {
+  .upload-area {
+    padding: var(--spacing-lg);
+    min-height: 150px;
+  }
+  
+  .upload-icon {
+    font-size: 2rem;
+  }
+  
+  .upload-primary {
+    font-size: 1rem;
+  }
+  
+  .settings-grid {
+    gap: var(--spacing-sm);
+  }
+  
+  .image-container {
+    min-height: 200px;
+  }
+}

static/css/main.css

@@ -0,0 +1,275 @@
+/* Marine Species API - Main Stylesheet */
+
+:root {
+  /* Color Palette */
+  --primary-blue: #2563eb;
+  --success-green: #059669;
+  --error-red: #dc2626;
+  --warning-yellow: #d97706;
+  
+  /* Grays */
+  --gray-50: #f9fafb;
+  --gray-100: #f3f4f6;
+  --gray-200: #e5e7eb;
+  --gray-300: #d1d5db;
+  --gray-400: #9ca3af;
+  --gray-500: #6b7280;
+  --gray-600: #4b5563;
+  --gray-700: #374151;
+  --gray-800: #1f2937;
+  --gray-900: #111827;
+  
+  /* Spacing */
+  --spacing-xs: 0.25rem;
+  --spacing-sm: 0.5rem;
+  --spacing-md: 1rem;
+  --spacing-lg: 1.5rem;
+  --spacing-xl: 2rem;
+  --spacing-2xl: 3rem;
+  
+  /* Border Radius */
+  --radius-sm: 6px;
+  --radius-md: 8px;
+  --radius-lg: 12px;
+  --radius-xl: 16px;
+  
+  /* Shadows */
+  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
+  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+}
+
+/* Reset and Base Styles */
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
+  font-size: 1rem;
+  line-height: 1.5;
+  color: var(--gray-900);
+  background-color: var(--gray-50);
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Container */
+.container {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 var(--spacing-md);
+}
+
+/* Header */
+.header {
+  background: white;
+  border-bottom: 1px solid var(--gray-200);
+  position: sticky;
+  top: 0;
+  z-index: 100;
+}
+
+.header .container {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: var(--spacing-md);
+}
+
+.nav-brand {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-sm);
+}
+
+.nav-icon {
+  font-size: 1.5rem;
+}
+
+.nav-title {
+  font-size: 1.25rem;
+  font-weight: 600;
+  color: var(--gray-900);
+}
+
+.nav-tabs {
+  display: flex;
+  gap: var(--spacing-lg);
+}
+
+.nav-tab {
+  padding: var(--spacing-sm) var(--spacing-md);
+  text-decoration: none;
+  color: var(--gray-600);
+  font-weight: 500;
+  border-radius: var(--radius-md);
+  transition: all 0.2s ease;
+}
+
+.nav-tab:hover {
+  color: var(--primary-blue);
+  background-color: var(--gray-100);
+}
+
+.nav-tab.active {
+  color: var(--primary-blue);
+  background-color: var(--gray-100);
+}
+
+/* Main Content */
+.main {
+  flex: 1;
+  padding: var(--spacing-xl) 0;
+}
+
+/* Footer */
+.footer {
+  background: white;
+  border-top: 1px solid var(--gray-200);
+  padding: var(--spacing-lg) 0;
+  margin-top: auto;
+}
+
+.footer p {
+  text-align: center;
+  color: var(--gray-500);
+  font-size: 0.875rem;
+}
+
+/* Typography */
+h1 {
+  font-size: 2rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin-bottom: var(--spacing-lg);
+}
+
+h2 {
+  font-size: 1.5rem;
+  font-weight: 500;
+  color: var(--gray-900);
+  margin-bottom: var(--spacing-md);
+}
+
+h3 {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: var(--gray-900);
+  margin-bottom: var(--spacing-sm);
+}
+
+/* Cards */
+.card {
+  background: white;
+  border: 1px solid var(--gray-200);
+  border-radius: var(--radius-lg);
+  box-shadow: var(--shadow-sm);
+  overflow: hidden;
+}
+
+.card-header {
+  padding: var(--spacing-lg);
+  border-bottom: 1px solid var(--gray-200);
+  background: var(--gray-50);
+}
+
+.card-body {
+  padding: var(--spacing-lg);
+}
+
+.card-title {
+  font-size: 1.125rem;
+  font-weight: 600;
+  color: var(--gray-900);
+  margin: 0;
+}
+
+/* Buttons */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--spacing-sm);
+  padding: 12px 24px;
+  font-size: 1rem;
+  font-weight: 500;
+  text-decoration: none;
+  border: none;
+  border-radius: var(--radius-md);
+  cursor: pointer;
+  transition: all 0.2s ease;
+  min-height: 44px;
+}
+
+.btn-primary {
+  background: var(--primary-blue);
+  color: white;
+}
+
+.btn-primary:hover {
+  background: #1d4ed8;
+  transform: translateY(-1px);
+  box-shadow: var(--shadow-md);
+}
+
+.btn-primary:disabled {
+  background: var(--gray-300);
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.btn-secondary {
+  background: white;
+  color: var(--gray-700);
+  border: 1px solid var(--gray-300);
+}
+
+.btn-secondary:hover {
+  background: var(--gray-50);
+  border-color: var(--gray-400);
+}
+
+/* Loading Spinner */
+.spinner {
+  width: 20px;
+  height: 20px;
+  border: 2px solid transparent;
+  border-top: 2px solid currentColor;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Responsive Design */
+@media (max-width: 768px) {
+  .container {
+    padding: 0 var(--spacing-sm);
+  }
+  
+  .header .container {
+    flex-direction: column;
+    gap: var(--spacing-md);
+  }
+  
+  .nav-tabs {
+    gap: var(--spacing-md);
+  }
+  
+  h1 {
+    font-size: 1.75rem;
+  }
+  
+  .main {
+    padding: var(--spacing-lg) 0;
+  }
+}

static/js/dashboard.js

@@ -0,0 +1,250 @@
+// Dashboard functionality for Marine Species API
+
+class MarineDashboard {
+    constructor() {
+        this.currentImage = null;
+        this.currentImageFile = null;
+        this.isProcessing = false;
+        
+        this.initializeElements();
+        this.bindEvents();
+        this.checkAPIStatus();
+    }
+
+    initializeElements() {
+        // Upload elements
+        this.uploadArea = document.getElementById('uploadArea');
+        this.fileInput = document.getElementById('fileInput');
+        this.identifyBtn = document.getElementById('identifyBtn');
+        
+        // Settings elements
+        this.confidenceSlider = document.getElementById('confidenceSlider');
+        this.confidenceValue = document.getElementById('confidenceValue');
+        this.iouSlider = document.getElementById('iouSlider');
+        this.iouValue = document.getElementById('iouValue');
+        
+        // Display elements
+        this.originalImageContainer = document.getElementById('originalImageContainer');
+        this.annotatedImageContainer = document.getElementById('annotatedImageContainer');
+        
+        // Results elements
+        this.metadataSection = document.getElementById('metadataSection');
+        this.speciesSection = document.getElementById('speciesSection');
+        this.processingTime = document.getElementById('processingTime');
+        this.speciesCount = document.getElementById('speciesCount');
+        this.imageSize = document.getElementById('imageSize');
+        this.speciesList = document.getElementById('speciesList');
+        
+        // Status elements
+        this.statusDot = document.getElementById('statusDot');
+        this.statusText = document.getElementById('statusText');
+        this.modelInfo = document.getElementById('modelInfo');
+    }
+
+    bindEvents() {
+        // Upload area events
+        this.uploadArea.addEventListener('click', () => this.fileInput.click());
+        this.uploadArea.addEventListener('dragover', this.handleDragOver.bind(this));
+        this.uploadArea.addEventListener('dragleave', this.handleDragLeave.bind(this));
+        this.uploadArea.addEventListener('drop', this.handleDrop.bind(this));
+        
+        // File input change
+        this.fileInput.addEventListener('change', this.handleFileSelect.bind(this));
+        
+        // Settings sliders
+        this.confidenceSlider.addEventListener('input', this.updateConfidenceValue.bind(this));
+        this.iouSlider.addEventListener('input', this.updateIouValue.bind(this));
+        
+        // Identify button
+        this.identifyBtn.addEventListener('click', this.identifySpecies.bind(this));
+    }
+
+    // API Status Check
+    async checkAPIStatus() {
+        try {
+            const response = await fetch('/api/v1/health');
+            const data = await response.json();
+            
+            if (data.model_loaded) {
+                this.statusDot.className = 'status-dot healthy';
+                this.statusText.textContent = 'API Ready';
+                
+                if (data.model_info) {
+                    this.modelInfo.textContent = `Model: ${data.model_info.model_name} (${data.model_info.total_classes} species)`;
+                }
+            } else {
+                this.statusDot.className = 'status-dot error';
+                this.statusText.textContent = 'Model Loading...';
+                this.modelInfo.textContent = 'Please wait while the model loads';
+            }
+        } catch (error) {
+            this.statusDot.className = 'status-dot error';
+            this.statusText.textContent = 'API Unavailable';
+            this.modelInfo.textContent = 'Unable to connect to API';
+            console.error('API status check failed:', error);
+        }
+    }
+
+    // Drag and Drop Handlers
+    handleDragOver(e) {
+        e.preventDefault();
+        this.uploadArea.classList.add('dragover');
+    }
+
+    handleDragLeave(e) {
+        e.preventDefault();
+        this.uploadArea.classList.remove('dragover');
+    }
+
+    handleDrop(e) {
+        e.preventDefault();
+        this.uploadArea.classList.remove('dragover');
+        
+        const files = e.dataTransfer.files;
+        if (files.length > 0) {
+            this.processFile(files[0]);
+        }
+    }
+
+    // File Selection Handler
+    handleFileSelect(e) {
+        const file = e.target.files[0];
+        if (file) {
+            this.processFile(file);
+        }
+    }
+
+    // Process Selected File
+    processFile(file) {
+        // Validate file type
+        if (!file.type.startsWith('image/')) {
+            window.MarineAPI.utils.showNotification('Please select an image file', 'error');
+            return;
+        }
+
+        // Validate file size (10MB limit)
+        if (file.size > 10 * 1024 * 1024) {
+            window.MarineAPI.utils.showNotification('File size must be less than 10MB', 'error');
+            return;
+        }
+
+        this.currentImageFile = file;
+        this.displayOriginalImage(file);
+        this.identifyBtn.disabled = false;
+        
+        // Update upload area
+        this.uploadArea.classList.add('has-image');
+        this.uploadArea.innerHTML = `
+            <div class="upload-content">
+                <div class="upload-icon">✅</div>
+                <div class="upload-text">
+                    <p class="upload-primary">${file.name}</p>
+                    <p class="upload-secondary">${window.MarineAPI.utils.formatFileSize(file.size)}</p>
+                </div>
+            </div>
+        `;
+    }
+
+    // Display Original Image
+    displayOriginalImage(file) {
+        const reader = new FileReader();
+        reader.onload = (e) => {
+            this.currentImage = e.target.result;
+            this.originalImageContainer.innerHTML = `
+                <img src="${e.target.result}" alt="Original image" />
+            `;
+        };
+        reader.readAsDataURL(file);
+    }
+
+    // Settings Handlers
+    updateConfidenceValue() {
+        this.confidenceValue.textContent = `${this.confidenceSlider.value}%`;
+    }
+
+    updateIouValue() {
+        this.iouValue.textContent = `${this.iouSlider.value}%`;
+    }
+
+    // Main Identification Function
+    async identifySpecies() {
+        if (!this.currentImage || this.isProcessing) return;
+
+        this.isProcessing = true;
+        window.MarineAPI.utils.setLoading(this.identifyBtn, true);
+
+        try {
+            // Prepare request data
+            const requestData = {
+                image: this.currentImage.split(',')[1], // Remove data:image/jpeg;base64, prefix
+                confidence_threshold: this.confidenceSlider.value / 100,
+                iou_threshold: this.iouSlider.value / 100,
+                image_size: 640,
+                return_annotated_image: true
+            };
+
+            // Make API request
+            const response = await fetch('/api/v1/detect', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/json',
+                },
+                body: JSON.stringify(requestData)
+            });
+
+            if (!response.ok) {
+                throw new Error(`API request failed: ${response.status}`);
+            }
+
+            const result = await response.json();
+            this.displayResults(result);
+            window.MarineAPI.utils.showNotification('Species identification completed!', 'success');
+
+        } catch (error) {
+            console.error('Identification failed:', error);
+            window.MarineAPI.utils.showNotification('Identification failed. Please try again.', 'error');
+        } finally {
+            this.isProcessing = false;
+            window.MarineAPI.utils.setLoading(this.identifyBtn, false);
+        }
+    }
+
+    // Display Results
+    displayResults(result) {
+        const { detections, annotated_image, processing_time, image_dimensions } = result;
+
+        // Display annotated image
+        if (annotated_image) {
+            this.annotatedImageContainer.innerHTML = `
+                <img src="data:image/jpeg;base64,${annotated_image}" alt="Annotated results" />
+            `;
+        }
+
+        // Update metadata
+        this.processingTime.textContent = `${processing_time.toFixed(3)}s`;
+        this.speciesCount.textContent = detections.length;
+        this.imageSize.textContent = `${image_dimensions.width}×${image_dimensions.height}`;
+
+        // Show metadata section
+        this.metadataSection.style.display = 'block';
+
+        // Display species list
+        if (detections.length > 0) {
+            this.speciesList.innerHTML = detections.map(detection => `
+                <div class="species-item">
+                    <span class="species-name">${detection.class_name}</span>
+                    <span class="species-confidence">${(detection.confidence * 100).toFixed(1)}%</span>
+                </div>
+            `).join('');
+            this.speciesSection.style.display = 'block';
+        } else {
+            this.speciesList.innerHTML = '<p class="no-detections">No marine species detected. Try adjusting the confidence threshold.</p>';
+            this.speciesSection.style.display = 'block';
+        }
+    }
+}
+
+// Initialize dashboard when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    new MarineDashboard();
+});

static/js/main.js

@@ -0,0 +1,90 @@
+// Marine Species API - Main JavaScript
+
+// Global state
+window.MarineAPI = {
+    baseURL: window.location.origin,
+    currentImage: null,
+    isProcessing: false
+};
+
+// Utility functions
+const utils = {
+    // Show/hide loading state
+    setLoading: (element, isLoading) => {
+        if (isLoading) {
+            element.disabled = true;
+            element.innerHTML = '<span class="spinner"></span> Processing...';
+        } else {
+            element.disabled = false;
+            element.innerHTML = element.dataset.originalText || 'Identify Marine Life';
+        }
+    },
+
+    // Format file size
+    formatFileSize: (bytes) => {
+        if (bytes === 0) return '0 Bytes';
+        const k = 1024;
+        const sizes = ['Bytes', 'KB', 'MB', 'GB'];
+        const i = Math.floor(Math.log(bytes) / Math.log(k));
+        return parseFloat((bytes / Math.pow(k, i)).toFixed(2)) + ' ' + sizes[i];
+    },
+
+    // Show notification
+    showNotification: (message, type = 'info') => {
+        // Simple notification system
+        const notification = document.createElement('div');
+        notification.className = `notification notification-${type}`;
+        notification.textContent = message;
+        
+        // Style the notification
+        Object.assign(notification.style, {
+            position: 'fixed',
+            top: '20px',
+            right: '20px',
+            padding: '12px 20px',
+            borderRadius: '8px',
+            color: 'white',
+            fontWeight: '500',
+            zIndex: '1000',
+            transform: 'translateX(100%)',
+            transition: 'transform 0.3s ease'
+        });
+
+        // Set background color based on type
+        const colors = {
+            success: '#059669',
+            error: '#dc2626',
+            warning: '#d97706',
+            info: '#2563eb'
+        };
+        notification.style.backgroundColor = colors[type] || colors.info;
+
+        document.body.appendChild(notification);
+
+        // Animate in
+        setTimeout(() => {
+            notification.style.transform = 'translateX(0)';
+        }, 100);
+
+        // Remove after 5 seconds
+        setTimeout(() => {
+            notification.style.transform = 'translateX(100%)';
+            setTimeout(() => {
+                document.body.removeChild(notification);
+            }, 300);
+        }, 5000);
+    }
+};
+
+// Initialize when DOM is loaded
+document.addEventListener('DOMContentLoaded', () => {
+    console.log('🐟 Marine Species API Dashboard Loaded');
+    
+    // Store original button text for loading states
+    document.querySelectorAll('.btn').forEach(btn => {
+        btn.dataset.originalText = btn.textContent;
+    });
+});
+
+// Export utils for use in other scripts
+window.MarineAPI.utils = utils;

templates/base.html

@@ -0,0 +1,59 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{% block title %}Marine Species Identification API{% endblock %}</title>
+    
+    <!-- Inter Font -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&display=swap" rel="stylesheet">
+    
+    <!-- Custom CSS -->
+    <link rel="stylesheet" href="{{ url_for('static', path='/css/main.css') }}">
+    
+    {% block extra_css %}{% endblock %}
+</head>
+<body>
+    <!-- Navigation Header -->
+    <header class="header">
+        <div class="container">
+            <div class="nav-brand">
+                <span class="nav-icon">🐟</span>
+                <span class="nav-title">Marine Species API</span>
+            </div>
+            
+            <nav class="nav-tabs">
+                <a href="/" class="nav-tab {% if active_tab == 'dashboard' %}active{% endif %}">
+                    Dashboard
+                </a>
+                <a href="/docs" class="nav-tab {% if active_tab == 'docs' %}active{% endif %}">
+                    API Docs
+                </a>
+                <a href="/api/v1/info" class="nav-tab" target="_blank">
+                    API Info
+                </a>
+            </nav>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="main">
+        <div class="container">
+            {% block content %}{% endblock %}
+        </div>
+    </main>
+
+    <!-- Footer -->
+    <footer class="footer">
+        <div class="container">
+            <p>&copy; 2025 Marine Species Identification API. Powered by YOLOv5.</p>
+        </div>
+    </footer>
+
+    <!-- JavaScript -->
+    <script src="{{ url_for('static', path='/js/main.js') }}"></script>
+    {% block extra_js %}{% endblock %}
+</body>
+</html>

templates/dashboard.html

@@ -0,0 +1,149 @@
+{% extends "base.html" %}
+
+{% block title %}Dashboard - Marine Species Identification API{% endblock %}
+
+{% block extra_css %}
+<link rel="stylesheet" href="{{ url_for('static', path='/css/dashboard.css') }}">
+{% endblock %}
+
+{% block content %}
+<div class="dashboard">
+    <!-- Page Header -->
+    <div class="page-header">
+        <h1>🌊 Marine Species Identification</h1>
+        <p class="page-description">
+            Upload an image to identify marine species using our advanced YOLOv5 model. 
+            Supports 691+ species including fish, corals, sea stars, and more.
+        </p>
+    </div>
+
+    <!-- API Status Banner -->
+    <div class="status-banner" id="statusBanner">
+        <div class="status-indicator">
+            <span class="status-dot" id="statusDot"></span>
+            <span class="status-text" id="statusText">Checking API status...</span>
+        </div>
+        <div class="model-info" id="modelInfo"></div>
+    </div>
+
+    <!-- Main Dashboard Grid -->
+    <div class="dashboard-grid">
+        <!-- Input Panel -->
+        <div class="panel input-panel">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">📤 Upload Image</h3>
+                </div>
+                <div class="card-body">
+                    <!-- Upload Area -->
+                    <div class="upload-area" id="uploadArea">
+                        <div class="upload-content">
+                            <div class="upload-icon">📷</div>
+                            <div class="upload-text">
+                                <p class="upload-primary">Drag image here or click to browse</p>
+                                <p class="upload-secondary">PNG, JPG, JPEG up to 10MB</p>
+                            </div>
+                        </div>
+                        <input type="file" id="fileInput" accept="image/*" hidden>
+                    </div>
+
+                    <!-- Settings -->
+                    <div class="settings-section">
+                        <h4>⚙️ Detection Settings</h4>
+                        <div class="settings-grid">
+                            <div class="setting-item">
+                                <label for="confidenceSlider">Confidence Threshold</label>
+                                <div class="slider-container">
+                                    <input type="range" id="confidenceSlider" min="0" max="100" value="25">
+                                    <span class="slider-value" id="confidenceValue">25%</span>
+                                </div>
+                            </div>
+                            <div class="setting-item">
+                                <label for="iouSlider">IoU Threshold</label>
+                                <div class="slider-container">
+                                    <input type="range" id="iouSlider" min="0" max="100" value="45">
+                                    <span class="slider-value" id="iouValue">45%</span>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Action Button -->
+                    <button class="btn btn-primary btn-full" id="identifyBtn" disabled>
+                        🔍 Identify Marine Life
+                    </button>
+                </div>
+            </div>
+        </div>
+
+        <!-- Original Image Panel -->
+        <div class="panel image-panel">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">🖼️ Original Image</h3>
+                </div>
+                <div class="card-body">
+                    <div class="image-container" id="originalImageContainer">
+                        <div class="image-placeholder">
+                            <div class="placeholder-icon">🖼️</div>
+                            <p>Upload an image to see it here</p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <!-- Results Panel -->
+        <div class="panel results-panel">
+            <div class="card">
+                <div class="card-header">
+                    <h3 class="card-title">🎯 Detection Results</h3>
+                </div>
+                <div class="card-body">
+                    <!-- Annotated Image -->
+                    <div class="annotated-section">
+                        <h4>Annotated Image</h4>
+                        <div class="image-container" id="annotatedImageContainer">
+                            <div class="image-placeholder">
+                                <div class="placeholder-icon">🔍</div>
+                                <p>Annotated results will appear here</p>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Detection Metadata -->
+                    <div class="metadata-section" id="metadataSection" style="display: none;">
+                        <h4>Detection Summary</h4>
+                        <div class="metadata-grid">
+                            <div class="metadata-item">
+                                <span class="metadata-label">Processing Time</span>
+                                <span class="metadata-value" id="processingTime">-</span>
+                            </div>
+                            <div class="metadata-item">
+                                <span class="metadata-label">Species Found</span>
+                                <span class="metadata-value" id="speciesCount">-</span>
+                            </div>
+                            <div class="metadata-item">
+                                <span class="metadata-label">Image Size</span>
+                                <span class="metadata-value" id="imageSize">-</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Species List -->
+                    <div class="species-section" id="speciesSection" style="display: none;">
+                        <h4>Detected Species</h4>
+                        <div class="species-list" id="speciesList">
+                            <!-- Species items will be populated here -->
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+{% endblock %}
+
+{% block extra_js %}
+<script src="{{ url_for('static', path='/js/dashboard.js') }}"></script>
+{% endblock %}