Spaces:

Hitekno
/

kordflow

Running

App Files Files Community

Hitekno commited on Aug 8, 2025

Commit

7f5bdfe

verified ·

1 Parent(s): 00054f5

== Updated 08/08/2025 == Enable the playback/editing and other functions for generated chord charts located in "My Library". Make the BPM number directly enterable after double-clicking on it. If the user enters a title in the progression description, update the display of the [Progression Title] field. Add (and enable the function after implementation) a [Play] button in a transport bar for the chord chart in the [Generated Progression] field. Strictly respect the number of bars corresponding to the user's request or recording. Play the corresponding chord (with a piano sound) when the user clicks on it. In the [My Library] menu, display the metronome set to the indicated values of the loaded progression. Also display a drop-down submenu to choose the output instrument from a list of General Midi instruments. In the comments in the [Analysis Notes] panel, take into account the actual chords entered by the user where applicable. When playing the generated progression, ALWAYS use chord inversions like a pianist! When referring to user-entered chords in the description, the term "Time Signature" refers to the unit of time per measure! For example, "Duration of each fret in the chord grid: 4 beats" is preferably written as "Time Signature: 4/4". In the description, chords are separated by commas, while chord grid squares are separated by slashes. In the [Tonal Analysis] panel, chords should sound when the corresponding bubbles are clicked! Also display the [Instrument Selection] submenu in the [Generated Progression] panel. When the [Edit/Lock] menu of the [Generated Progression] is enabled for chord modification, also make the time signature (4 beats, etc.) editable. Make the time signature adjustable, and modify the duration of each chord accordingly to adapt to the new time signature entered by the user. Start AND synchronize the metronome with the playback trigger of the loaded progression grid. Ask the AI what the chord inversion is, and apply this technique to the chord generation of the current progression! Add and enable all necessary MIDI functions for connecting and playing progressions via any connected or available MIDI interface, and ensure that the choice of MIDI interfaces is available at all times. - Initial Deployment

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +692 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Kordflow
-emoji: 🏢
-colorFrom: gray
-colorTo: purple
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: kordflow
+emoji: 🐳
+colorFrom: green
+colorTo: green
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,692 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>KordFlow - Music Chord Progression Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        .progress-bar {
+            height: 6px;
+            transition: width 0.1s linear;
+        }
+        .chord-cell {
+            min-height: 60px;
+        }
+        .metronome-input {
+            width: 50px;
+            text-align: center;
+        }
+        .menu-slide {
+            transition: transform 0.5s ease-in-out;
+        }
+        .beat-emphasis {
+            animation: pulse 0.3s;
+        }
+        @keyframes pulse {
+            0% { transform: scale(1); }
+            50% { transform: scale(1.2); }
+            100% { transform: scale(1); }
+        }
+    </style>
+</head>
+<body class="bg-gray-900 text-white font-sans">
+    <div class="container mx-auto px-4 py-6 max-w-6xl">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-8">
+            <h1 class="text-3xl font-bold text-purple-400">KordFlow</h1>
+            <div class="flex items-center space-x-4">
+                <button id="language-btn" class="p-2 rounded-full bg-gray-800 hover:bg-gray-700 transition">
+                    <i class="fas fa-globe text-xl"></i>
+                </button>
+                <div id="language-menu" class="hidden absolute mt-10 right-4 bg-gray-800 rounded shadow-lg z-10">
+                    <button class="block w-full text-left px-4 py-2 hover:bg-gray-700">English</button>
+                    <button class="block w-full text-left px-4 py-2 hover:bg-gray-700">Français</button>
+                    <button class="block w-full text-left px-4 py-2 hover:bg-gray-700">Español</button>
+                </div>
+                <button class="px-4 py-2 bg-purple-600 rounded hover:bg-purple-500 transition">Help</button>
+            </div>
+        </header>
+        <!-- Main Content -->
+        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
+            <!-- Left Panel - Controls -->
+            <div class="lg:col-span-1 bg-gray-800 rounded-lg p-6">
+                <div class="flex justify-between mb-6">
+                    <button id="load-btn" class="px-4 py-2 bg-blue-600 rounded hover:bg-blue-500 transition w-1/2 mr-2">
+                        <i class="fas fa-folder-open mr-2"></i>Load
+                    </button>
+                    <button id="save-btn" class="px-4 py-2 bg-green-600 rounded hover:bg-green-500 transition w-1/2 ml-2">
+                        <i class="fas fa-save mr-2"></i>Save
+                    </button>
+                </div>
+                <div class="mb-6">
+                    <h2 class="text-xl font-semibold mb-3">Audio Input</h2>
+                    <div class="flex space-x-2 mb-3">
+                        <button id="record-btn" class="flex-1 px-4 py-2 bg-red-600 rounded hover:bg-red-500 transition">
+                            <i class="fas fa-microphone mr-2"></i>Record
+                        </button>
+                        <button id="import-btn" class="flex-1 px-4 py-2 bg-yellow-600 rounded hover:bg-yellow-500 transition">
+                            <i class="fas fa-file-audio mr-2"></i>Import
+                        </button>
+                    </div>
+                    <div class="progress-container bg-gray-700 rounded-full h-2 mb-2">
+                        <div id="progress-bar" class="progress-bar bg-purple-500 rounded-full w-0"></div>
+                    </div>
+                    <div class="flex justify-between text-sm text-gray-400">
+                        <span id="time-elapsed">0:00</span>
+                        <span id="time-total">0:00</span>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h2 class="text-xl font-semibold mb-3">Metronome</h2>
+                    <div class="flex items-center mb-3">
+                        <button id="metronome-toggle" class="px-4 py-2 bg-gray-700 rounded-l hover:bg-gray-600 transition">
+                            <i class="fas fa-play"></i>
+                        </button>
+                        <div class="flex-1 bg-gray-700 px-4 py-2 text-center">
+                            <span id="bpm-display" class="font-mono">120</span>
+                            <input id="bpm-input" type="number" min="40" max="300" value="120"
+                                   class="hidden metronome-input bg-gray-800 text-white border border-gray-600 rounded">
+                            <span> BPM</span>
+                        </div>
+                        <button id="bpm-decrease" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 transition">
+                            <i class="fas fa-minus"></i>
+                        </button>
+                        <button id="bpm-increase" class="px-4 py-2 bg-gray-700 rounded-r hover:bg-gray-600 transition">
+                            <i class="fas fa-plus"></i>
+                        </button>
+                    </div>
+                    <div class="flex items-center">
+                        <span class="mr-2">Volume:</span>
+                        <input id="metronome-volume" type="range" min="0" max="100" value="50" class="flex-1">
+                    </div>
+                    <div class="mt-2 flex justify-center space-x-2">
+                        <div id="beat-1" class="w-4 h-4 bg-purple-500 rounded-full"></div>
+                        <div id="beat-2" class="w-4 h-4 bg-gray-600 rounded-full"></div>
+                        <div id="beat-3" class="w-4 h-4 bg-gray-600 rounded-full"></div>
+                        <div id="beat-4" class="w-4 h-4 bg-gray-600 rounded-full"></div>
+                    </div>
+                </div>
+                <div class="mb-6">
+                    <h2 class="text-xl font-semibold mb-3">MIDI Settings</h2>
+                    <select id="midi-input" class="w-full bg-gray-700 rounded px-4 py-2 mb-2">
+                        <option value="">No MIDI Input</option>
+                    </select>
+                    <select id="midi-output" class="w-full bg-gray-700 rounded px-4 py-2">
+                        <option value="">No MIDI Output</option>
+                    </select>
+                </div>
+                <div>
+                    <h2 class="text-xl font-semibold mb-3">Practice Mode</h2>
+                    <button id="practice-mode-btn" class="w-full px-4 py-2 bg-gray-700 rounded hover:bg-gray-600 transition">
+                        <i class="fas fa-guitar mr-2"></i>Enable Practice Mode
+                    </button>
+                </div>
+            </div>
+            <!-- Center Panel - Chord Grid -->
+            <div class="lg:col-span-2 bg-gray-800 rounded-lg p-6">
+                <div class="flex justify-between items-center mb-6">
+                    <div>
+                        <h2 class="text-xl font-semibold">Chord Progression</h2>
+                        <input id="progression-title" type="text" placeholder="Progression Title"
+                               class="bg-transparent border-b border-gray-600 focus:border-purple-500 outline-none">
+                    </div>
+                    <div class="flex space-x-2">
+                        <button id="analyze-btn" class="px-4 py-2 bg-blue-600 rounded hover:bg-blue-500 transition">
+                            <i class="fas fa-search mr-2"></i>Analyze
+                        </button>
+                        <div class="flex items-center bg-gray-700 rounded">
+                            <button id="play-btn" class="px-4 py-2 bg-green-600 rounded-l hover:bg-green-500 transition">
+                                <i class="fas fa-play mr-2"></i>Play
+                            </button>
+                            <button id="stop-btn" class="px-4 py-2 hover:bg-gray-600 transition">
+                                <i class="fas fa-stop"></i>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+                <div class="grid grid-cols-4 gap-2 mb-4">
+                    <div class="text-center font-semibold">Measure 1</div>
+                    <div class="text-center font-semibold">Measure 2</div>
+                    <div class="text-center font-semibold">Measure 3</div>
+                    <div class="text-center font-semibold">Measure 4</div>
+                </div>
+                <div class="grid grid-cols-4 gap-2">
+                    <div class="chord-cell bg-gray-700 rounded p-3 flex items-center justify-center cursor-pointer hover:bg-gray-600 transition">
+                        <span class="text-xl">C</span>
+                    </div>
+                    <div class="chord-cell bg-gray-700 rounded p-3 flex items-center justify-center cursor-pointer hover:bg-gray-600 transition">
+                        <span class="text-xl">G</span>
+                    </div>
+                    <div class="chord-cell bg-gray-700 rounded p-3 flex items-center justify-center cursor-pointer hover:bg-gray-600 transition">
+                        <span class="text-xl">Am</span>
+                    </div>
+                    <div class="chord-cell bg-gray-700 rounded p-3 flex items-center justify-center cursor-pointer hover:bg-gray-600 transition">
+                        <span class="text-xl">F</span>
+                    </div>
+                </div>
+                <div class="mt-6">
+                    <div class="flex items-center mb-2">
+                        <h3 class="text-lg font-semibold mr-4">Detected Key: <span class="text-purple-400">C Major</span></h3>
+                        <select id="instrument-select" class="bg-gray-700 rounded px-3 py-1">
+                            <option value="0">Acoustic Piano</option>
+                            <option value="24">Acoustic Guitar</option>
+                            <option value="33">Electric Bass</option>
+                            <option value="48">String Ensemble</option>
+                        </select>
+                    </div>
+                    <div class="flex items-center">
+                        <h3 class="text-lg font-semibold mr-4">Detected Tempo: <span class="text-purple-400">120 BPM</span></h3>
+                        <div class="flex items-center">
+                            <span class="mr-2">Time Signature:</span>
+                            <input id="time-signature" type="text" value="4/4"
+                                   class="w-16 bg-gray-700 rounded px-2 py-1 text-center">
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Menu Slides -->
+        <div class="mt-8 bg-gray-800 rounded-lg overflow-hidden">
+            <div id="menu-slides-container" class="relative h-64 overflow-hidden">
+                <div id="menu-slide-1" class="menu-slide absolute inset-0 p-6">
+                    <h2 class="text-2xl font-bold mb-4 text-purple-400">Sing Your Song</h2>
+                    <p class="mb-4">With KordFlow, you can easily start creating your music. Simply sing your favorite song into the microphone or import an audio file. The app analyzes your voice or audio track to identify the chords that match your melody.</p>
+                    <p>This intuitive feature allows you to quickly and efficiently transform your musical ideas into a chord progression. Whether you're a beginner or an experienced musician, this easy step opens the door to limitless creativity. Unleash your musical passion and start singing!</p>
+                    <div class="absolute bottom-4 right-4 text-gray-400">1 / 4</div>
+                </div>
+                <div id="menu-slide-2" class="menu-slide absolute inset-0 p-6 transform translate-x-full">
+                    <h2 class="text-2xl font-bold mb-4 text-purple-400">Audio Track Analysis</h2>
+                    <p class="mb-4">Once you've recorded your voice or imported your audio file, KordFlow uses advanced analysis technology to detect the key and tempo of your song. Using this analysis, the app automatically generates a chord progression that perfectly matches your performance.</p>
+                    <p>This allows you to focus on creating without worrying about technical details. Enjoy a user-friendly interface that guides you through every step of the process. With KordFlow, transform your inspiration into a complete musical composition in no time!</p>
+                    <div class="absolute bottom-4 right-4 text-gray-400">2 / 4</div>
+                </div>
+                <div id="menu-slide-3" class="menu-slide absolute inset-0 p-6 transform translate-x-full">
+                    <h2 class="text-2xl font-bold mb-4 text-purple-400">Synchronized Chord Progression</h2>
+                    <p class="mb-4">Once KordFlow has generated your chord progression, you can listen to it in sync with your performance. This feature allows you to play your instrument while following the melody you sang.</p>
+                    <p>Synchronized playback helps you feel the rhythm and adjust your performance in real time. You can also modify the chords if you want to explore different options. This flexibility gives you complete control over your musical composition.</p>
+                    <div class="absolute bottom-4 right-4 text-gray-400">3 / 4</div>
+                </div>
+                <div id="menu-slide-4" class="menu-slide absolute inset-0 p-6 transform translate-x-full">
+                    <h2 class="text-2xl font-bold mb-4 text-purple-400">Saving and Sharing</h2>
+                    <p class="mb-4">Once you're satisfied with your chord progression, KordFlow allows you to save your work in WAV format. You can also save your projects to return to later or share your creations with other musicians.</p>
+                    <p>The saving feature simplifies the process of managing your compositions, allowing you to keep track of your musical development. Whether you're creating an album or simply experimenting with new ideas, KordFlow gives you the tools you need.</p>
+                    <div class="absolute bottom-4 right-4 text-gray-400">4 / 4</div>
+                </div>
+            </div>
+            <div class="flex justify-center p-4 bg-gray-700">
+                <button id="prev-slide" class="px-4 py-2 mx-1 rounded hover:bg-gray-600 transition">
+                    <i class="fas fa-chevron-left"></i>
+                </button>
+                <button class="slide-dot px-2 py-1 mx-1 rounded-full bg-purple-500 w-3 h-3" data-slide="0"></button>
+                <button class="slide-dot px-2 py-1 mx-1 rounded-full bg-gray-500 w-3 h-3" data-slide="1"></button>
+                <button class="slide-dot px-2 py-1 mx-1 rounded-full bg-gray-500 w-3 h-3" data-slide="2"></button>
+                <button class="slide-dot px-2 py-1 mx-1 rounded-full bg-gray-500 w-3 h-3" data-slide="3"></button>
+                <button id="next-slide" class="px-4 py-2 mx-1 rounded hover:bg-gray-600 transition">
+                    <i class="fas fa-chevron-right"></i>
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Language selector
+        const languageBtn = document.getElementById('language-btn');
+        const languageMenu = document.getElementById('language-menu');
+        languageBtn.addEventListener('click', () => {
+            languageMenu.classList.toggle('hidden');
+        });
+        // Close language menu when clicking elsewhere
+        document.addEventListener('click', (e) => {
+            if (!languageBtn.contains(e.target) && !languageMenu.contains(e.target)) {
+                languageMenu.classList.add('hidden');
+            }
+        });
+        // Menu slides navigation
+        const slides = document.querySelectorAll('.menu-slide');
+        const dots = document.querySelectorAll('.slide-dot');
+        const prevBtn = document.getElementById('prev-slide');
+        const nextBtn = document.getElementById('next-slide');
+        let currentSlide = 0;
+        function showSlide(index) {
+            slides.forEach((slide, i) => {
+                slide.style.transform = `translateX(${100 * (i - index)}%)`;
+            });
+            dots.forEach((dot, i) => {
+                dot.classList.toggle('bg-purple-500', i === index);
+                dot.classList.toggle('bg-gray-500', i !== index);
+            });
+            currentSlide = index;
+        }
+        dots.forEach(dot => {
+            dot.addEventListener('click', () => {
+                showSlide(parseInt(dot.dataset.slide));
+            });
+        });
+        prevBtn.addEventListener('click', () => {
+            showSlide((currentSlide - 1 + slides.length) % slides.length);
+        });
+        nextBtn.addEventListener('click', () => {
+            showSlide((currentSlide + 1) % slides.length);
+        });
+        // Initialize first slide
+        showSlide(0);
+        // Metronome functionality
+        const metronomeToggle = document.getElementById('metronome-toggle');
+        const bpmDisplay = document.getElementById('bpm-display');
+        const bpmInput = document.getElementById('bpm-input');
+        const bpmIncrease = document.getElementById('bpm-increase');
+        const bpmDecrease = document.getElementById('bpm-decrease');
+        const metronomeVolume = document.getElementById('metronome-volume');
+        const beatElements = [
+            document.getElementById('beat-1'),
+            document.getElementById('beat-2'),
+            document.getElementById('beat-3'),
+            document.getElementById('beat-4')
+        ];
+        let bpm = 120;
+        let metronomeInterval;
+        let currentBeat = 0;
+        let isMetronomeRunning = false;
+        let audioContext;
+        let gainNode;
+        let oscillator;
+        // Initialize audio context on user interaction
+        function initAudioContext() {
+            if (!audioContext) {
+                audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                gainNode = audioContext.createGain();
+                gainNode.connect(audioContext.destination);
+                gainNode.gain.value = metronomeVolume.value / 100;
+            }
+        }
+        function playMetronomeBeat(beatIndex) {
+            if (!audioContext) initAudioContext();
+            // Stop any existing sound
+            if (oscillator) {
+                oscillator.stop();
+            }
+            oscillator = audioContext.createOscillator();
+            oscillator.connect(gainNode);
+            // Different frequencies for different beats
+            if (beatIndex === 0) {
+                oscillator.frequency.value = 880; // First beat (higher pitch)
+            } else {
+                oscillator.frequency.value = 440; // Other beats
+            }
+            oscillator.start();
+            oscillator.stop(audioContext.currentTime + 0.05);
+            // Visual feedback
+            beatElements.forEach((el, i) => {
+                if (i === beatIndex) {
+                    el.classList.add('beat-emphasis');
+                    setTimeout(() => el.classList.remove('beat-emphasis'), 300);
+                }
+            });
+        }
+        function startMetronome() {
+            if (metronomeInterval) clearInterval(metronomeInterval);
+            const interval = 60000 / bpm; // Convert BPM to milliseconds
+            metronomeInterval = setInterval(() => {
+                playMetronomeBeat(currentBeat);
+                currentBeat = (currentBeat + 1) % 4;
+            }, interval);
+            isMetronomeRunning = true;
+            metronomeToggle.innerHTML = '<i class="fas fa-stop"></i>';
+        }
+        function stopMetronome() {
+            clearInterval(metronomeInterval);
+            metronomeInterval = null;
+            isMetronomeRunning = false;
+            metronomeToggle.innerHTML = '<i class="fas fa-play"></i>';
+        }
+        metronomeToggle.addEventListener('click', () => {
+            initAudioContext();
+            if (isMetronomeRunning) {
+                stopMetronome();
+            } else {
+                startMetronome();
+            }
+        });
+        bpmDisplay.addEventListener('dblclick', () => {
+            bpmDisplay.classList.add('hidden');
+            bpmInput.classList.remove('hidden');
+            bpmInput.focus();
+            bpmInput.select();
+        });
+        bpmInput.addEventListener('blur', () => {
+            updateBpm(parseInt(bpmInput.value));
+            bpmInput.classList.add('hidden');
+            bpmDisplay.classList.remove('hidden');
+        });
+        bpmInput.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+                updateBpm(parseInt(bpmInput.value));
+                bpmInput.classList.add('hidden');
+                bpmDisplay.classList.remove('hidden');
+            }
+        });
+        bpmIncrease.addEventListener('click', () => {
+            updateBpm(bpm + 1);
+        });
+        bpmDecrease.addEventListener('click', () => {
+            updateBpm(bpm - 1);
+        });
+        function updateBpm(newBpm) {
+            if (newBpm < 40) newBpm = 40;
+            if (newBpm > 300) newBpm = 300;
+            bpm = newBpm;
+            bpmDisplay.textContent = bpm;
+            bpmInput.value = bpm;
+            if (isMetronomeRunning) {
+                stopMetronome();
+                startMetronome();
+            }
+        }
+        metronomeVolume.addEventListener('input', () => {
+            if (gainNode) {
+                gainNode.gain.value = metronomeVolume.value / 100;
+            }
+        });
+        // Chord cell editing
+        const chordCells = document.querySelectorAll('.chord-cell');
+        const commonChords = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B',
+                             'Cm', 'C#m', 'Dm', 'D#m', 'Em', 'Fm', 'F#m', 'Gm', 'G#m', 'Am', 'A#m', 'Bm'];
+        chordCells.forEach(cell => {
+            cell.addEventListener('click', () => {
+                const currentChord = cell.textContent.trim();
+                const input = document.createElement('input');
+                input.type = 'text';
+                input.value = currentChord;
+                input.className = 'w-16 text-center bg-gray-800 text-white border border-purple-500 rounded px-2 py-1';
+                input.list = 'chord-suggestions';
+                // Create datalist for suggestions
+                const datalist = document.createElement('datalist');
+                datalist.id = 'chord-suggestions';
+                commonChords.forEach(chord => {
+                    const option = document.createElement('option');
+                    option.value = chord;
+                    datalist.appendChild(option);
+                });
+                cell.innerHTML = '';
+                cell.appendChild(input);
+                cell.appendChild(datalist);
+                input.focus();
+                input.addEventListener('blur', () => {
+                    const newChord = input.value.trim();
+                    cell.innerHTML = `<span class="text-xl">${newChord || currentChord}</span>`;
+                });
+                input.addEventListener('keypress', (e) => {
+                    if (e.key === 'Enter') {
+                        const newChord = input.value.trim();
+                        cell.innerHTML = `<span class="text-xl">${newChord || currentChord}</span>`;
+                    }
+                });
+            });
+        });
+        // MIDI setup
+        let midiAccess;
+        let midiInput;
+        let midiOutput;
+        async function setupMIDI() {
+            try {
+                midiAccess = await navigator.requestMIDIAccess();
+                updateMIDIDevices();
+                midiAccess.onstatechange = updateMIDIDevices;
+            } catch (e) {
+                console.error("MIDI not supported", e);
+            }
+        }
+        function updateMIDIDevices() {
+            const inputSelect = document.getElementById('midi-input');
+            const outputSelect = document.getElementById('midi-output');
+            // Clear existing options
+            inputSelect.innerHTML = '<option value="">No MIDI Input</option>';
+            outputSelect.innerHTML = '<option value="">No MIDI Output</option>';
+            // Add available inputs
+            midiAccess.inputs.forEach(input => {
+                const option = document.createElement('option');
+                option.value = input.id;
+                option.textContent = input.name;
+                inputSelect.appendChild(option);
+            });
+            // Add available outputs
+            midiAccess.outputs.forEach(output => {
+                const option = document.createElement('option');
+                option.value = output.id;
+                option.textContent = output.name;
+                outputSelect.appendChild(option);
+            });
+        }
+        document.getElementById('midi-input').addEventListener('change', (e) => {
+            midiInput = midiAccess.inputs.get(e.target.value);
+            if (midiInput) {
+                midiInput.onmidimessage = handleMIDIMessage;
+            }
+        });
+        document.getElementById('midi-output').addEventListener('change', (e) => {
+            midiOutput = midiAccess.outputs.get(e.target.value);
+        });
+        function handleMIDIMessage(message) {
+            // Handle incoming MIDI messages
+            console.log('MIDI message:', message.data);
+        }
+        // Initialize MIDI
+        if (navigator.requestMIDIAccess) {
+            setupMIDI();
+        }
+        // Progression title handling
+        document.getElementById('progression-title').addEventListener('input', (e) => {
+            // Save title to progression data
+            console.log('Progression title updated:', e.target.value);
+        });
+        // Time signature handling
+        document.getElementById('time-signature').addEventListener('change', (e) => {
+            const [beats, noteValue] = e.target.value.split('/').map(Number);
+            if (beats && noteValue) {
+                // Update progression timing
+                console.log('Time signature changed to:', beats, noteValue);
+            } else {
+                e.target.value = '4/4'; // Reset if invalid
+            }
+        });
+        // Instrument selection
+        document.getElementById('instrument-select').addEventListener('change', (e) => {
+            const program = parseInt(e.target.value);
+            if (midiOutput) {
+                // Send program change to MIDI
+                midiOutput.send([0xC0, program]);
+            }
+            console.log('Instrument changed to:', program);
+        });
+        // Chord playback with inversions
+        function playChordWithInversion(chord, duration = 1) {
+            if (!audioContext) initAudioContext();
+            // This is a simplified version - in practice you'd want to:
+            // 1. Parse the chord (e.g. "C" or "Am7")
+            // 2. Determine the notes in the chord
+            // 3. Apply inversion (rotate the notes)
+            // 4. Play the notes
+            // For now just play a simple triad
+            const notes = getChordNotes(chord);
+            playNotes(notes, duration);
+        }
+        function getChordNotes(chord) {
+            // Simplified chord mapping - in practice use a proper chord library
+            const rootNotes = {
+                'C': 60, 'C#': 61, 'D': 62, 'D#': 63,
+                'E': 64, 'F': 65, 'F#': 66, 'G': 67,
+                'G#': 68, 'A': 69, 'A#': 70, 'B': 71
+            };
+            const root = chord.replace(/m|M|7|sus|dim|aug/g, '');
+            const third = chord.includes('m') ? 3 : 4;
+            return [
+                rootNotes[root] || 60,
+                (rootNotes[root] || 60) + third,
+                (rootNotes[root] || 60) + 7
+            ];
+        }
+        function playNotes(notes, duration) {
+            const now = audioContext.currentTime;
+            notes.forEach((note, i) => {
+                const osc = audioContext.createOscillator();
+                const gain = audioContext.createGain();
+                osc.connect(gain);
+                gain.connect(audioContext.destination);
+                osc.frequency.value = 440 * Math.pow(2, (note - 69) / 12);
+                gain.gain.value = 0.3;
+                osc.start(now);
+                osc.stop(now + duration);
+                // Add slight envelope
+                gain.gain.setValueAtTime(0.3, now);
+                gain.gain.exponentialRampToValueAtTime(0.001, now + duration);
+            });
+        }
+        // Update chord cell click to play chord
+        chordCells.forEach(cell => {
+            cell.addEventListener('click', (e) => {
+                if (e.target.tagName !== 'INPUT') { // Don't play when editing
+                    const chord = cell.textContent.trim();
+                    if (chord) playChordWithInversion(chord, 0.5);
+                }
+            });
+        });
+        // Simulate recording progress
+        const recordBtn = document.getElementById('record-btn');
+        const progressBar = document.getElementById('progress-bar');
+        const timeElapsed = document.getElementById('time-elapsed');
+        const timeTotal = document.getElementById('time-total');
+        recordBtn.addEventListener('click', () => {
+            if (recordBtn.textContent.includes('Record')) {
+                recordBtn.innerHTML = '<i class="fas fa-stop mr-2"></i>Stop';
+                recordBtn.classList.remove('bg-red-600');
+                recordBtn.classList.add('bg-red-700');
+                // Simulate recording progress
+                let progress = 0;
+                const duration = 30; // 30 seconds
+                timeTotal.textContent = '0:30';
+                const interval = setInterval(() => {
+                    progress += 1;
+                    const percentage = (progress / duration) * 100;
+                    progressBar.style.width = `${percentage}%`;
+                    // Update time display
+                    const seconds = progress % 60;
+                    const minutes = Math.floor(progress / 60);
+                    timeElapsed.textContent = `${minutes}:${seconds < 10 ? '0' + seconds : seconds}`;
+                    if (progress >= duration) {
+                        clearInterval(interval);
+                        recordBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i>Record';
+                        recordBtn.classList.add('bg-red-600');
+                        recordBtn.classList.remove('bg-red-700');
+                    }
+                }, 1000);
+                // Stop recording if button clicked again
+                recordBtn.onclick = function() {
+                    clearInterval(interval);
+                    recordBtn.innerHTML = '<i class="fas fa-microphone mr-2"></i>Record';
+                    recordBtn.classList.add('bg-red-600');
+                    recordBtn.classList.remove('bg-red-700');
+                    recordBtn.onclick = arguments.callee;
+                };
+            }
+        });
+        // Practice mode toggle
+        const practiceModeBtn = document.getElementById('practice-mode-btn');
+        practiceModeBtn.addEventListener('click', () => {
+            if (practiceModeBtn.textContent.includes('Enable')) {
+                practiceModeBtn.innerHTML = '<i class="fas fa-guitar mr-2"></i>Disable Practice Mode';
+                practiceModeBtn.classList.remove('bg-gray-700');
+                practiceModeBtn.classList.add('bg-purple-600');
+            } else {
+                practiceModeBtn.innerHTML = '<i class="fas fa-guitar mr-2"></i>Enable Practice Mode';
+                practiceModeBtn.classList.add('bg-gray-700');
+                practiceModeBtn.classList.remove('bg-purple-600');
+            }
+        });
+    </script>
+<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Hitekno/kordflow" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>