AI-powered conversational platform for exploring oceanographic data through natural language. Dive deep into the ARGO float network with DeepBlue.

DeepBlue democratizes access to ocean data by letting scientists, students, and policymakers explore the global ARGO float network through simple conversations — no complex databases or specialized tools required.

Instead of wrestling with raw oceanographic datasets, users can ask questions like "What are the temperature profiles in the Indian Ocean?" and get instant AI-powered insights, visualizations, and real-time data.

• 🤖 AI Chat Interface — Conversational access to ocean data powered by Google Gemini 2.0 Flash
• 🗺️ Interactive World Map — Click any ocean location to view ARGO float positions and real-time alerts
• 📊 Data Visualizations — Temperature-depth profiles, float trajectories, and time-series charts via Recharts
• 🎙️ Voice Input — Speak your queries using the Web Speech API; hear AI responses via Speech Synthesis
• 📁 File Upload — Upload your own oceanographic datasets (.csv, .nc, .json, .txt)
• 🔔 Location Alerts — Real-time weather and ocean condition alerts for any selected region
• 🌗 Dark / Light Mode — Full theme support via next-themes
• 📱 Responsive Design — Mobile-friendly across all screen sizes

ocean-ai-talk/
├── public/                      # Static assets
├── src/
│   ├── assets/                  # Images
│   ├── components/
│   │   ├── ui/                  # shadcn/ui base components
│   │   ├── Header.tsx           # Navigation header
│   │   ├── InteractiveWorldMap.tsx  # Leaflet map with ARGO floats
│   │   ├── LocationAlerts.tsx   # Ocean/weather alerts by region
│   │   ├── ThemeProvider.tsx    # Dark/light mode provider
│   │   ├── VoiceInput.tsx       # Web Speech API integration
│   │   └── VoiceInputNew.tsx    # Updated voice component
│   ├── data/
│   │   └── argo-trajectories-demo.json  # Sample ARGO float data
│   ├── hooks/
│   │   ├── use-mobile.tsx       # Responsive hook
│   │   └── use-toast.ts         # Toast notification hook
│   ├── integrations/
│   │   └── supabase/            # Supabase client + types
│   ├── lib/
│   │   └── utils.ts             # Utility functions
│   ├── pages/
│   │   ├── Home.tsx             # Landing page
│   │   ├── Chat.tsx             # AI chat interface
│   │   ├── Dashboard.tsx        # Data dashboard + map
│   │   ├── Upload.tsx           # File upload page
│   │   ├── About.tsx            # About page
│   │   └── NotFound.tsx         # 404 page
│   ├── App.tsx                  # Root component with routing
│   ├── main.tsx                 # Entry point
│   └── index.css                # Global styles
├── supabase/
│   └── functions/
│       └── chat-ai/
│           └── index.ts         # Gemini AI edge function
├── .env                         # Environment variables (DO NOT COMMIT)
├── .gitignore
├── package.json
├── tailwind.config.ts
├── tsconfig.json
└── vite.config.ts

• Node.js v18 or higher
• npm (comes with Node.js)
• A Supabase account
• A Google Gemini API key

git clone https://github.com/your-username/deepblue-ocean-ai.git
cd deepblue-ocean-ai

npm install

Create a .env file in the root directory (or update the existing one):

VITE_SUPABASE_URL=your_supabase_project_url
VITE_SUPABASE_ANON_KEY=your_supabase_anon_key

Get these from your Supabase dashboard → Project Settings → API.

npx supabase secrets set GEMINI_API_KEY=your_gemini_api_key

npm run dev

Open http://localhost:5173 in your browser.

1. User types or speaks a query (e.g., "Show me temperature data for the Pacific Ocean")
2. The query is sent to a Supabase Edge Function (/functions/chat-ai)
3. The Edge Function calls Google Gemini 2.0 Flash with an oceanographic context prompt
4. The AI response is returned with optional metadata (float ID, coordinates, data points, time range)
5. If metadata is present, interactive Recharts visualizations are rendered inside a Dialog modal
6. The response is formatted from markdown to HTML via a custom AIResponseFormatter component

The ARGO program is a global network of over 3,800 autonomous profiling floats that measure:

• 🌡️ Temperature — Accuracy ±0.002°C
• 🧂 Salinity — Precision ±0.01 PSU
• 📏 Pressure — Down to 2000m depth

Floats surface every 10 days to transmit data, providing the most comprehensive real-time view of the upper ocean ever assembled. DeepBlue integrates with this network to make this critical climate data conversationally accessible.

⚠️ Never commit your .env file. It is already listed in .gitignore.

The project is configured for Vercel deployment with a vercel.json at the root.

# Install Vercel CLI
npm install -g vercel

# Deploy
vercel

Add your VITE_SUPABASE_URL and VITE_SUPABASE_ANON_KEY as environment variables in the Vercel dashboard.

1. Fork the repository
2. Create a new branch: git checkout -b feature/your-feature-name
3. Make your changes and commit: git commit -m "Add your feature"
4. Push to your branch: git push origin feature/your-feature-name
5. Open a Pull Request

This project is private and not licensed for public distribution.

Built with ❤️ by Team DeepOcean