OceanVue

OceanVue classifies underwater ship-noise recordings (.wav) by ship type using a fastai deep learning model trained on a four-class dataset, and visualizes the result as a waveform, spectrogram, and mel spectrogram alongside the prediction breakdown. It also includes user auth and a dashboard, backed by Firebase.

Structure

This is a monorepo with two independent apps:

ocean-vue/
├── frontend/   React app (UI, auth, dashboards) — see frontend/README.md
└── backend/    Flask API (audio classification)  — see backend/README.md

Each has its own dependencies, .env configuration, and README — set both up independently and run them side by side for local development.

Quick start

# 1. Backend (Flask API on http://localhost:8088)
cd backend
python3 -m venv venv && source venv/bin/activate
pip install -r requirements.txt
cp .env.example .env
python app.py

# 2. Frontend (React app on http://localhost:3000), in a second terminal
cd frontend
npm install
cp .env.example .env   # fill in your Firebase project config
npm start

See backend/README.md and frontend/README.md for full configuration details, available scripts, and the API reference.

Running with Docker

Both apps can run in containers instead, via Docker Compose:

cp backend/.env.example backend/.env
cp frontend/.env.example frontend/.env   # fill in your Firebase project config

docker compose up --build

This starts the backend on http://localhost:8088 and the frontend on http://localhost:3000. Source code is bind-mounted into both containers, so edits on your machine take effect without rebuilding (the frontend hot-reloads; the backend needs a restart: docker compose restart backend).

Requires Docker Desktop (or another Docker Engine) running locally.

Tech stack

• Frontend: React, React Router, Tailwind CSS + shadcn/ui (Radix primitives) + lucide-react, Firebase (Auth/Firestore), Plotly + Recharts
• Backend: Flask, fastai/PyTorch, torchaudio, librosa

Configuration & secrets

Neither app ships with real credentials committed to the repo. Copy each .env.example to .env and fill in your own values:

• frontend/.env — Firebase project config + backend API URL
• backend/.env — server host/port, CORS origins, model location

.env files are gitignored; only the .env.example templates are tracked.

Notes on the model file

backend/model/model_final is a trained fastai model (~100MB) checked into the repo directly. If you're extending this project, consider moving large model artifacts to Git LFS or external storage (e.g. cloud storage, a model registry, or GitHub Releases) instead of committing them directly.