🎸 Guitariz Studio

The Open-Source Digital Workbench for Modern Musicians

AI-powered chord detection · Stem isolation · Interactive theory tools · All in one place.

🌐 Live Demo · 🐛 Report Bug · ✨ Request Feature

Guitariz Studio is a full-stack, professional-grade music platform that bridges the gap between traditional music theory and modern AI. It brings together AI-powered source separation, real-time chord recognition, interactive instrument simulations, and gamified ear training—all within a single, beautifully crafted web application.

Whether you're a songwriter dissecting harmonies, a student mastering intervals, a producer isolating stems, or a developer pushing the boundaries of music tech—Guitariz is built for you.

🎯 Try it now → guitariz.studio

Guitariz uses a hybrid architecture to balance interactive client-side performance with heavy server-side AI computation.

graph TD
    subgraph Client ["🖥️ Client — React / Vite"]
        UI["Glassmorphism UI<br/>(Tailwind + Framer Motion)"]
        State["TanStack Query + Context API"]
        AudioEngine["Web Audio API Engine"]
        Proxy["Vite CORS Proxy Middleware"]

        UI --> State --> AudioEngine
        AudioEngine --> Proxy
    end

    subgraph Server ["🧠 AI Service — Python / FastAPI"]
        API["FastAPI + WebSocket Server"]
        Demucs["Meta Demucs<br/>(Source Separation)"]
        Madmom["Madmom HMM<br/>(Chord Recognition)"]
        Librosa["Librosa<br/>(Feature Extraction)"]

        API --> Demucs
        API --> Madmom
        API --> Librosa
    end

    UI <-->|"REST / WebSocket<br/>(JSON + Audio Blobs)"| API
    Proxy <-->|"Fetch"| External["External APIs"]

    style Client fill:#0d1117,stroke:#30363d,color:#c9d1d9
    style Server fill:#0d1117,stroke:#30363d,color:#c9d1d9

guitariz/
├── src/
│   ├── components/          # Reusable UI components (Fretboard, Piano, Tuner, etc.)
│   │   ├── ui/              # shadcn/ui primitives (Button, Dialog, Toast, etc.)
│   │   ├── chord-ai/        # Chord AI feature components
│   │   ├── ear-training/    # Ear Training game components
│   │   ├── fretboard/       # Fretboard + 3D view components
│   │   └── piano/           # Virtual Piano components
│   ├── hooks/               # Custom React hooks (audio, WebSocket, PWA, etc.)
│   ├── lib/                 # Core logic — harmonic analysis, audio processing
│   ├── pages/               # Route-level page components
│   └── main.tsx             # Application entrypoint
├── backend/
│   ├── main.py              # FastAPI server + REST endpoints
│   ├── analysis.py          # Audio feature extraction pipeline
│   ├── chord_madmom.py      # Madmom-based chord recognition
│   ├── websocket_chords.py  # Real-time WebSocket chord streaming
│   ├── youtube.py           # YouTube audio download utilities
│   ├── Dockerfile           # Container build for AI service
│   └── requirements.txt     # Python dependencies
├── .github/
│   ├── workflows/ci.yml     # GitHub Actions CI pipeline
│   └── ISSUE_TEMPLATE/      # Bug report & feature request templates
├── public/                  # Static assets, PWA manifest, sitemap
├── vite.config.ts           # Vite config with custom CORS proxy
├── tailwind.config.ts       # Tailwind CSS theme configuration
└── package.json             # Project metadata & scripts

git clone https://github.com/Guitariz/Guitariz.git
cd guitariz
npm install

cp .env.example .env.local

Edit .env.local with your backend URL if running AI features locally.

npm run dev

The app will be available at http://localhost:5173.

Required only for Chord AI, Stem Separator, and Vocal Splitter features.

cd backend

# Create and activate a virtual environment
python -m venv .venv

# Windows
.venv\Scripts\activate
# macOS / Linux
source .venv/bin/activate

# Install dependencies
pip install -r requirements.txt

# Start the FastAPI server
python main.py

Note: First launch will download the Demucs model (~300 MB). Subsequent starts are instant.

Contributions are what make the open-source community such an incredible place to learn, inspire, and create. Any contributions you make are greatly appreciated.

Please read the Contributing Guide and our Code of Conduct before getting started.

1. Fork the repository
2. Create your feature branch    →  git checkout -b feature/amazing-feature
3. Commit your changes           →  git commit -m 'feat: add amazing feature'
4. Push to the branch            →  git push origin feature/amazing-feature
5. Open a Pull Request

Looking for a place to start? Check out issues tagged good first issue or help wanted.

• Real-time YouTube audio chord analysis
• MIDI export from Chord AI detections
• Collaborative jam rooms via WebRTC
• Mobile-native app (React Native / Capacitor)
• Additional instrument support (Ukulele, Bass tablature)
• User accounts with progress tracking

See the open issues for a full list of proposed features and known issues.

Guitariz Studio stands on the shoulders of giants in the Music Information Retrieval (MIR) community. Special thanks to the authors of these pivotal libraries:

• Meta Demucs — State-of-the-art deep learning source separation powering our Stem Separator.
• Madmom — High-performance Hidden Markov Model implementations for chord recognition.
• Librosa — The backbone of server-side audio analysis and feature extraction.
• Tonal.js — Comprehensive music theory library for client-side harmonic analysis.
• shadcn/ui — Beautiful, accessible component primitives built on Radix UI.

Distributed under the MIT License. See LICENSE for more information.