← Back to Experience

Datara AI

Hierarchical Dataset Management & Visualization Platform

React.js Flask Azure Blob Cosmos DB OpenCV

Designed and built a full-stack data management platform for computer vision workflows. The system enables users to upload, organize, and visualize large-scale image datasets hierarchically (Category > Brand > Dataset), providing a seamless interface for managing assets stored in Azure Blob Storage and indexed in Cosmos DB.

Core Key Features

1. Hierarchical Data Explorer

  • Dynamic Navigation: Implemented a file-system-like browser that allows users to traverse deep directory structures (e.g., automotive/bmw/frontGrille).
  • Hybrid View System: Automatically switches between a "Folder Grid" view for navigation and an "Image Grid" view for leaf-level dataset inspection.
  • Breadcrumb Navigation: Interactive breadcrumbs for quick traversal back up the hierarchy.
  • Lazy Loading & Infinite Scroll: Optimized performance for viewing folders with thousands of images using virtualization.

2. Dual-Mode Upload Pipeline

  • Video Processing: Built a pipeline that accepts Google Drive video links, automatically downloads them, extracts frames at specified intervals (FPS), and uploads them as a new dataset.
  • Folder Ingestion: Implemented a "Folder Upload" feature that ingests entire folders of images from Google Drive, flattens the directory structure, and automatically standardizes filenames.
  • Automated Metadata Indexing: Every upload automatically generates metadata records in Azure Cosmos DB (timestamps, resolution, file paths, tags).

3. Advanced UI/UX

  • Modern Dark Interface: Designed a premium, dark-themed UI using Tailwind CSS, featuring glassmorphism effects and hover interactions.
  • Metadata Overlay: Interactive sidebar and image overlays that display critical asset information (UUIDs, dimensions, tags).
  • Filtering & Tagging: Built systems to filter datasets by custom tags and date ranges.

Tech Stack

Frontend

  • React.js (Vite): Core framework for a fast, responsive SPA.
  • Tailwind CSS: Utility-first styling for rapid custom design.
  • Lucide React: Consistent and clean iconography.
  • React Router: Handling nested routing for navigation.

Backend & Cloud

  • Python (Flask): REST API server handling data requests.
  • Azure Blob Storage: Scalable object storage for raw images.
  • Azure Cosmos DB: NoSQL database for querying metadata.
  • OpenCV & FFmpeg: Background scripts for media processing.
← Back to Experience