A privacy-first, zero-upload client-side web application and CLI toolkit to inject authentic camera EXIF metadata, standardize QuickTime container atoms, and batch-rename Ray-Ban Meta Smart Glasses photos and videos.
- Overview
- System Architecture & Processing Pipeline
- Key Features
- Device Presets & Specifications
- Project Directory Structure
- Core Modules Breakdown
- Getting Started
- Usage Guide
- Privacy & Security Guarantee
- Tech Stack
- Contributing
- License
Captures from Ray-Ban Meta Smart Glasses (and legacy Ray-Ban Stories) often lose their authentic device signatures, EXIF tags, and standardized naming structures when shared across messaging apps, transferred through cloud sync tools, or converted across formats.
MetaLens restores and standardizes your smart glasses captures by:
- Injecting authentic EXIF/IPTC/XMP camera metadata into photos (
.jpg,.jpeg). - Rebuilding QuickTime container MP4/MOV atoms for videos (
.mp4,.mov). - Batch-renaming raw files using timestamp-based or custom prefix schemes.
- Scrubbing sensitive tracking information (GPS coordinates, Apple MakerNotes, serial numbers) for privacy.
- Operating 100% client-side in your browser — zero files are ever uploaded to a remote server.
The entire pipeline runs entirely inside the user's browser runtime using HTML5 File APIs, Canvas rendering, binary EXIF parsing (piexifjs), and ZIP packaging (jszip):
flowchart TD
A[Drag & Drop Raw Media / Photos / Videos] --> B[File Queue & Validation]
B --> C{Select Metadata Preset}
C -->|Ray-Ban Meta Gen 2| D[Meta AI Profile]
C -->|Ray-Ban Stories Gen 1| E[Facebook View Profile]
C -->|Meta AI Multimodal| F[Llama Vision Profile]
C -->|Privacy Clean| G[Zero Traces Scrub Profile]
C -->|Custom Config| H[User Custom Tags]
D & E & F & G & H --> I[Engine Processing]
subgraph Browser Client Engine
I --> J[Image Pipeline: piexifjs & Canvas EXIF Writer]
I --> K[Video Pipeline: QuickTime Atom Rebuilder & Worker]
I --> L[Pattern Renamer: Pattern Token Engine]
end
J & K & L --> M[Live Metadata Inspector & Preview]
M --> N[Batch Processor]
N --> O[Individual File Download]
N --> P[Bundle into Structured ZIP Archive]
-
Camera Make & Model: Authentic tags (
Meta AI,Ray-Ban Meta Smart Glasses 2,Ray-Ban Stories). -
Software Signatures:
Meta View 202.0.0,Facebook View 42.0,Llama Vision 3.2. -
Optical Specs: Focal length, aperture values (
$f/2.2$ ), lens specifications, and orientation matrices. - Custom Tag Editor: Modify Artist, Copyright, Image Description, and User Comments manually.
- Built-in naming tokens:
{PREFIX}— Custom text (e.g.,META,RAYBAN,STREET){YYYYMMDD}— Year, Month, Day capture timestamps{HHMMSS}— Hours, Minutes, Seconds timestamps{INDEX}— Sequential counter (001,002,003...){ORIGINAL}— Preserve original source filename
- Instant live preview of resolved filenames before processing.
- GPS Stripping: Automatically removes precise latitude, longitude, and altitude EXIF coordinates.
- Apple Metadata Removal: Clears iOS-specific MakerNotes, RunTime identifiers, and device UUIDs.
- Lens & Serial Scrubbing: Neutralizes device serials while preserving authentic photo styling.
- Process hundreds of images simultaneously.
- Real-time progress bar and success indicators.
- Instant single ZIP download containing all standardized media.
| Preset Name | Camera Make | Camera Model | Software Tag | Target Aspect / Res | Default Privacy |
|---|---|---|---|---|---|
| Ray-Ban Meta (Gen 2) | Meta AI |
Ray-Ban Meta Smart Glasses 2 |
Meta View 202.0.0 |
3024 × 4032 (3:4) | Strip GPS & Apple Tags |
| Ray-Ban Stories (Gen 1) | Meta |
Ray-Ban Stories |
Facebook View 42.0 |
2592 × 2592 (1:1) | Strip GPS & Apple Tags |
| Meta AI Multimodal Vision | Meta AI |
Meta AI Multimodal Assistant |
Llama Vision 3.2 |
3024 × 4032 (3:4) | Strip GPS & Apple Tags |
| Privacy Clean (Shield) | Generic Camera |
Standard Capture Device |
None | Original Resolution | Strip All Identifiers |
| Custom Configuration | User Defined | User Defined | User Defined | User Controlled | Configurable |
MetaLens/
├── .github/ # GitHub workflows and repository config
├── public/ # Static web assets
│ ├── favicon.svg # MetaLens vector icon
│ └── icons.svg # SVG sprite library
├── src/ # Application source code
│ ├── assets/ # App images, logos, and UI graphics
│ │ ├── hero.png # Hero glasses visualization
│ │ └── react.svg
│ ├── components/ # React UI components
│ │ ├── BatchActions.tsx # Process All / Download ZIP action bar
│ │ ├── DarkShowcaseSection.tsx # Feature showcase & visual breakdowns
│ │ ├── DropZone.tsx # Drag-and-drop media ingestion zone
│ │ ├── EcosystemSection.tsx # Meta ecosystem integration highlights
│ │ ├── Footer.tsx # App footer and links
│ │ ├── Header.tsx # Top navigation & quick actions
│ │ ├── HeroSection.tsx # Hero intro with interactive demo loader
│ │ ├── MediaCard.tsx # Individual queue item card & controls
│ │ ├── MediaQueue.tsx # Batch queue list container
│ │ ├── MetadataConfig.tsx # Custom metadata settings modal
│ │ ├── MetadataModal.tsx # Raw EXIF / tag inspection dialog
│ │ ├── PresetShowcaseSection.tsx # Preset selector cards
│ │ ├── PrivacyBannerSection.tsx # Privacy assurance banner
│ │ ├── SpecsSection.tsx # Ray-Ban Meta optical specifications table
│ │ └── Toast.tsx # System notifications & alerts
│ ├── engine/ # Core tagging and binary manipulation engines
│ │ ├── imageTagger.ts # Image EXIF/IPTC injector & canvas processor
│ │ ├── metadataPresets.ts # Preset configuration profiles
│ │ ├── videoTagger.ts # QuickTime MP4/MOV container rebuilder
│ │ └── videoWorker.ts # Background web worker for video manipulation
│ ├── hooks/ # Custom React state hooks
│ │ └── useMediaQueue.ts # Media queue management, batch state & filters
│ ├── types/ # TypeScript interfaces and type definitions
│ │ └── meta.ts # MediaItem, PresetConfig, and EXIF types
│ ├── utils/ # Utility helper functions
│ │ ├── confetti.ts # Celebration canvas confetti triggers
│ │ ├── fileUtils.ts # Formatters, byte helpers, pattern generator
│ │ └── zipUtils.ts # JSZip batch compression & download helper
│ ├── App.css # Component-level custom animations
│ ├── App.tsx # Main application orchestrator
│ ├── index.css # Tailwind base design tokens & glassmorphic themes
│ └── main.tsx # Vite React entry point
├── Convertir.command # macOS one-click droplet conversion script
├── convert_windows.bat # Windows batch execution runner
├── metaspin.py # Standalone Python CLI for atom rewriting & tagging
├── index.html # Main HTML5 document template
├── package.json # Dependencies and build scripts
├── postcss.config.js # PostCSS configuration
├── tailwind.config.js # Tailwind theme & color token definitions
├── tsconfig.json # TypeScript root compiler configuration
└── vite.config.ts # Vite bundler configuration
Handles binary EXIF data extraction, payload serialization, and embedding into JPEG images via piexifjs. Converts canvas data URLs to Uint8Array blobs with custom 0th, Exif, GPS, and 1st IFD tables.
Parses and reconstructs QuickTime container atoms (moov, trak, mdia, minf, stbl, udta, meta). Injects handler types (Core Media Video, Core Media Audio), camera metadata, and ensures cross-platform player compatibility.
The central state hub for managing user uploads, progress tracking, sequential or parallel processing, pattern name resolution, preset changes, and error handling.
Packages processed blobs into a compressed .zip archive on the fly using JSZip, streaming output directly to the browser's download manager without disk overhead.
- Node.js: v18.0.0 or higher
- npm or yarn / pnpm
git clone https://github.com/abbibo/MetaLens-.git
cd MetaLens-npm installnpm run devOpen http://localhost:5173 in your browser.
npm run buildThe optimized bundle will be created in the dist/ directory, ready to deploy to GitHub Pages, Vercel, Netlify, or Cloudflare Pages.
If you prefer processing videos or photos via command-line interface:
# Requires Python 3.8+
python metaspin.py input_video.mp4 output_tagged.mov- Double-click
Convertir.command. - Drag and drop your files directly into the terminal window.
- Double-click
convert_windows.bat. - Follow the prompt to process files in your working directory.
- Import Files: Drag and drop photos (
.jpg,.jpeg,.png,.webp) or video files into the upload zone, or click "Load Demo Photo" to test immediately. - Choose Preset: Select one of the authentic device presets (Ray-Ban Meta Gen 2, Stories, AI Vision, or Privacy Clean).
- Configure Renaming: Set your desired pattern (e.g.,
META_{YYYYMMDD}_{HHMMSS}). - Inspect Metadata: Click on any card in the queue to inspect original vs. injected EXIF tags.
- Process & Export: Click "Process All" and download individual files or export everything into a unified ZIP archive.
- Zero Remote Uploads: No server-side API or backend database is used. All processing happens in local browser memory.
- Zero Telemetry: No third-party analytics trackers, cookies, or user telemetry.
- Works Completely Offline: Once loaded, MetaLens can run without an active internet connection.
- UI Framework: React 19, TypeScript
- Bundler & Tooling: Vite 8, Oxlint, PostCSS
- Styling: Tailwind CSS, Lucide React icons
- Binary & Media Engines: PiexifJS, JSZip, HTML5 Canvas API
- CLI & Scripting: Python 3 (
struct,json,subprocess), Shell / Batch
Contributions, issues, and feature requests are welcome!
- Fork the Project (
https://github.com/abbibo/MetaLens-/fork) - Create your Feature Branch (
git checkout -b feature/AmazingFeature) - Commit your Changes (
git commit -m 'Add some AmazingFeature') - Push to the Branch (
git push origin feature/AmazingFeature) - Open a Pull Request
Distributed under the MIT License. See LICENSE for more information.