Spaces:

zama1
/

harmonygen

Running

App Files Files Community

zama1 commited on Apr 10

Commit

8a4d64b

verified ·

1 Parent(s): 449d393

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Harmonygen
-emoji: 🔥
-colorFrom: yellow
-colorTo: indigo
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: harmonygen
+emoji: 🐳
+colorFrom: blue
+colorTo: red
 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,636 @@
-<!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>HarmonyGen - Multilingual Chord Progression Generator</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/[email protected]/build/Tone.js"></script>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Montserrat:wght@400;500;600;700&display=swap');
+        body {
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
+            min-height: 100vh;
+            color: #e2e8f0;
+        }
+        .chord-card {
+            transition: all 0.3s ease;
+            transform-style: preserve-3d;
+        }
+        .chord-card:hover {
+            transform: translateY(-5px) scale(1.03);
+            box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3);
+        }
+        .chord-playing {
+            animation: pulse 1s infinite;
+            box-shadow: 0 0 0 5px rgba(74, 222, 128, 0.5);
+        }
+        @keyframes pulse {
+            0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.7); }
+            70% { box-shadow: 0 0 0 10px rgba(74, 222, 128, 0); }
+            100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); }
+        }
+        .language-selector {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+        }
+        .genre-selector {
+            scrollbar-width: thin;
+            scrollbar-color: #4f46e5 #1e293b;
+        }
+        .genre-selector::-webkit-scrollbar {
+            height: 8px;
+        }
+        .genre-selector::-webkit-scrollbar-track {
+            background: #1e293b;
+            border-radius: 10px;
+        }
+        .genre-selector::-webkit-scrollbar-thumb {
+            background-color: #4f46e5;
+            border-radius: 10px;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Header with Language Selector -->
+    <header class="py-4 px-6 flex justify-between items-center border-b border-gray-700">
+        <div class="flex items-center space-x-2">
+            <i class="fas fa-music text-indigo-500 text-2xl"></i>
+            <h1 class="text-xl font-bold bg-gradient-to-r from-indigo-400 to-purple-500 bg-clip-text text-transparent">HarmonyGen</h1>
+        </div>
+        <div class="relative">
+            <select id="language-selector" class="language-selector px-4 py-2 rounded-full text-sm font-medium border border-gray-600 appearance-none focus:outline-none focus:ring-2 focus:ring-indigo-500">
+                <option value="en">English</option>
+                <option value="fr">Français</option>
+                <option value="es">Español</option>
+                <option value="de">Deutsch</option>
+                <option value="it">Italiano</option>
+                <option value="ja">日本語</option>
+            </select>
+            <i class="fas fa-chevron-down absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none"></i>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="flex-1 container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <div class="text-center mb-10">
+                <h2 id="main-title" class="text-3xl md:text-4xl font-bold mb-3">Generate Beautiful Chord Progressions</h2>
+                <p id="main-subtitle" class="text-gray-400 max-w-2xl mx-auto">Create harmonic sequences with one click. Perfect for songwriting and music theory practice.</p>
+            </div>
+            <!-- Genre Selector -->
+            <div class="mb-8">
+                <h3 id="genre-label" class="text-lg font-semibold mb-3">Select Music Style</h3>
+                <div class="genre-selector flex space-x-3 pb-2 overflow-x-auto">
+                    <button data-genre="pop" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-indigo-900 text-indigo-100 hover:bg-indigo-700 transition">Pop</button>
+                    <button data-genre="rock" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-gray-700 hover:bg-gray-600 transition">Rock</button>
+                    <button data-genre="jazz" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-amber-900 hover:bg-amber-800 transition">Jazz</button>
+                    <button data-genre="blues" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-blue-900 hover:bg-blue-800 transition">Blues</button>
+                    <button data-genre="classical" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-purple-900 hover:bg-purple-800 transition">Classical</button>
+                    <button data-genre="electronic" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-pink-900 hover:bg-pink-800 transition">Electronic</button>
+                    <button data-genre="flamenco" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-red-900 hover:bg-red-800 transition">Flamenco</button>
+                    <button data-genre="reggae" class="genre-btn flex-shrink-0 px-4 py-2 rounded-full bg-green-900 hover:bg-green-800 transition">Reggae</button>
+                </div>
+            </div>
+            <!-- Key Selector -->
+            <div class="mb-8">
+                <h3 id="key-label" class="text-lg font-semibold mb-3">Select Key</h3>
+                <div class="grid grid-cols-4 sm:grid-cols-7 gap-3">
+                    <button data-key="C" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">C</button>
+                    <button data-key="D" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">D</button>
+                    <button data-key="E" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">E</button>
+                    <button data-key="F" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">F</button>
+                    <button data-key="G" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">G</button>
+                    <button data-key="A" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">A</button>
+                    <button data-key="B" class="key-btn px-4 py-2 rounded bg-gray-700 hover:bg-gray-600 transition">B</button>
+                </div>
+            </div>
+            <!-- Generate Button -->
+            <div class="text-center mb-10">
+                <button id="generate-btn" class="px-8 py-3 rounded-full bg-gradient-to-r from-indigo-500 to-purple-600 hover:from-indigo-600 hover:to-purple-700 text-white font-semibold shadow-lg transition transform hover:scale-105">
+                    <i class="fas fa-magic mr-2"></i>
+                    <span id="generate-text">Generate Progression</span>
+                </button>
+            </div>
+            <!-- Results Section -->
+            <div id="results-section" class="hidden">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 id="progression-label" class="text-xl font-semibold">Your Chord Progression</h3>
+                    <button id="play-btn" class="px-4 py-2 rounded bg-green-600 hover:bg-green-700 text-white flex items-center">
+                        <i class="fas fa-play mr-2"></i>
+                        <span id="play-text">Play</span>
+                    </button>
+                </div>
+                <div id="chord-container" class="grid grid-cols-2 sm:grid-cols-4 gap-4 mb-8">
+                    <!-- Chord cards will be inserted here -->
+                </div>
+                <div class="flex flex-wrap justify-center gap-3">
+                    <button id="save-btn" class="px-4 py-2 rounded bg-indigo-600 hover:bg-indigo-700 text-white flex items-center">
+                        <i class="fas fa-save mr-2"></i>
+                        <span id="save-text">Save</span>
+                    </button>
+                    <button id="share-btn" class="px-4 py-2 rounded bg-blue-600 hover:bg-blue-700 text-white flex items-center">
+                        <i class="fas fa-share-alt mr-2"></i>
+                        <span id="share-text">Share</span>
+                    </button>
+                    <button id="export-midi-btn" class="px-4 py-2 rounded bg-purple-600 hover:bg-purple-700 text-white flex items-center">
+                        <i class="fas fa-file-export mr-2"></i>
+                        <span id="export-text">Export MIDI</span>
+                    </button>
+                </div>
+            </div>
+            <!-- Music Theory Tips -->
+            <div id="theory-tips" class="mt-12 p-6 bg-gray-800 rounded-lg hidden">
+                <h3 id="tips-title" class="text-xl font-semibold mb-3">Music Theory Insight</h3>
+                <p id="tips-content" class="text-gray-300">This progression uses a classic I-V-vi-IV pattern which is very common in pop music. The movement from the tonic (I) to dominant (V) creates tension that resolves back to the tonic.</p>
+            </div>
+        </div>
+    </main>
+    <!-- Footer -->
+    <footer class="py-6 px-4 border-t border-gray-700 text-center text-gray-400 text-sm">
+        <p id="footer-text">© 2023 HarmonyGen - All rights reserved | Made with <i class="fas fa-heart text-red-500"></i> for music lovers</p>
+    </footer>
+    <script>
+        // Internationalization data
+        const translations = {
+            en: {
+                title: "Generate Beautiful Chord Progressions",
+                subtitle: "Create harmonic sequences with one click. Perfect for songwriting and music theory practice.",
+                genreLabel: "Select Music Style",
+                keyLabel: "Select Key",
+                generateText: "Generate Progression",
+                progressionLabel: "Your Chord Progression",
+                playText: "Play",
+                saveText: "Save",
+                shareText: "Share",
+                exportText: "Export MIDI",
+                tipsTitle: "Music Theory Insight",
+                tipsContent: "This progression uses a classic I-V-vi-IV pattern which is very common in pop music. The movement from the tonic (I) to dominant (V) creates tension that resolves back to the tonic.",
+                footer: "© 2023 HarmonyGen - All rights reserved | Made with ♥ for music lovers"
+            },
+            fr: {
+                title: "Générez de Belles Progressions d'Accords",
+                subtitle: "Créez des séquences harmoniques en un clic. Parfait pour l'écriture de chansons et la pratique de la théorie musicale.",
+                genreLabel: "Sélectionnez le Style Musical",
+                keyLabel: "Sélectionnez la Tonale",
+                generateText: "Générer une Progression",
+                progressionLabel: "Votre Progression d'Accords",
+                playText: "Jouer",
+                saveText: "Enregistrer",
+                shareText: "Partager",
+                exportText: "Exporter MIDI",
+                tipsTitle: "Conseil de Théorie Musicale",
+                tipsContent: "Cette progression utilise un motif classique I-V-vi-IV très courant dans la musique pop. Le mouvement de la tonique (I) à la dominante (V) crée une tension qui se résout vers la tonique.",
+                footer: "© 2023 HarmonyGen - Tous droits réservés | Fait avec ♥ pour les amoureux de la musique"
+            },
+            es: {
+                title: "Genera Hermosas Progresiones de Acordes",
+                subtitle: "Crea secuencias armónicas con un clic. Perfecto para componer canciones y practicar teoría musical.",
+                genreLabel: "Selecciona Estilo Musical",
+                keyLabel: "Selecciona Tonalidad",
+                generateText: "Generar Progresión",
+                progressionLabel: "Tu Progresión de Acordes",
+                playText: "Reproducir",
+                saveText: "Guardar",
+                shareText: "Compartir",
+                exportText: "Exportar MIDI",
+                tipsTitle: "Consejo de Teoría Musical",
+                tipsContent: "Esta progresión utiliza un patrón clásico I-V-vi-IV muy común en la música pop. El movimiento de la tónica (I) a la dominante (V) crea tensión que se resuelve hacia la tónica.",
+                footer: "© 2023 HarmonyGen - Todos los derechos reservados | Hecho con ♥ para amantes de la música"
+            },
+            de: {
+                title: "Erzeuge Schöne Akkordfolgen",
+                subtitle: "Erstelle harmonische Sequenzen mit einem Klick. Perfekt für Songwriting und Musiktheorie-Übungen.",
+                genreLabel: "Musikstil auswählen",
+                keyLabel: "Tonart auswählen",
+                generateText: "Akkordfolge generieren",
+                progressionLabel: "Deine Akkordfolge",
+                playText: "Abspielen",
+                saveText: "Speichern",
+                shareText: "Teilen",
+                exportText: "MIDI exportieren",
+                tipsTitle: "Musiktheorie-Tipp",
+                tipsContent: "Diese Folge verwendet ein klassisches I-V-vi-IV-Muster, das in der Popmusik sehr verbreitet ist. Die Bewegung von der Tonika (I) zur Dominante (V) erzeugt Spannung, die sich zur Tonika auflöst.",
+                footer: "© 2023 HarmonyGen - Alle Rechte vorbehalten | Mit ♥ für Musikliebhaber gemacht"
+            },
+            it: {
+                title: "Genera Belle Progressioni di Accordi",
+                subtitle: "Crea sequenze armoniche con un clic. Perfetto per scrivere canzoni e praticare la teoria musicale.",
+                genreLabel: "Seleziona Stile Musicale",
+                keyLabel: "Seleziona Tonalità",
+                generateText: "Genera Progressione",
+                progressionLabel: "La Tua Progressione di Accordi",
+                playText: "Riproduci",
+                saveText: "Salva",
+                shareText: "Condividi",
+                exportText: "Esporta MIDI",
+                tipsTitle: "Consiglio di Teoria Musicale",
+                tipsContent: "Questa progressione utilizza un classico pattern I-V-vi-IV molto comune nella musica pop. Il movimento dalla tonica (I) alla dominante (V) crea tensione che si risolve verso la tonica.",
+                footer: "© 2023 HarmonyGen - Tutti i diritti riservati | Fatto con ♥ per gli amanti della musica"
+            },
+            ja: {
+                title: "美しいコード進行を生成",
+                subtitle: "ワンクリックでハーモニックなコード進行を作成。作曲や音楽理論の練習に最適です。",
+                genreLabel: "音楽スタイルを選択",
+                keyLabel: "キーを選択",
+                generateText: "コード進行を生成",
+                progressionLabel: "あなたのコード進行",
+                playText: "再生",
+                saveText: "保存",
+                shareText: "共有",
+                exportText: "MIDIエクスポート",
+                tipsTitle: "音楽理論のヒント",
+                tipsContent: "この進行は、ポップミュージックで非常に一般的な古典的なI-V-vi-IVパターンを使用しています。トニック（I）からドミナント（V）への動きは、トニックに解決する緊張感を作り出します。",
+                footer: "© 2023 HarmonyGen - 全著作権所有 | 音楽愛好家のために♥で作られました"
+            }
+        };
+        // Chord translations
+        const chordTranslations = {
+            en: {
+                C: "C", G: "G", Am: "Am", F: "F", Em: "Em", Dm: "Dm", Bb: "Bb",
+                D: "D", A: "A", E: "E", B: "B", Fm: "Fm", Cm: "Cm", Gm: "Gm",
+                D7: "D7", G7: "G7", C7: "C7", A7: "A7", E7: "E7", B7: "B7"
+            },
+            fr: {
+                C: "Do", G: "Sol", Am: "Lam", F: "Fa", Em: "Mim", Dm: "Rém", Bb: "Sib",
+                D: "Ré", A: "La", E: "Mi", B: "Si", Fm: "Fam", Cm: "Dom", Gm: "Solm",
+                D7: "Ré7", G7: "Sol7", C7: "Do7", A7: "La7", E7: "Mi7", B7: "Si7"
+            },
+            es: {
+                C: "Do", G: "Sol", Am: "Lam", F: "Fa", Em: "Mim", Dm: "Rem", Bb: "Sib",
+                D: "Re", A: "La", E: "Mi", B: "Si", Fm: "Fam", Cm: "Dom", Gm: "Solm",
+                D7: "Re7", G7: "Sol7", C7: "Do7", A7: "La7", E7: "Mi7", B7: "Si7"
+            },
+            de: {
+                C: "C", G: "G", Am: "Am", F: "F", Em: "Em", Dm: "Dm", Bb: "B",
+                D: "D", A: "A", E: "E", B: "H", Fm: "Fm", Cm: "Cm", Gm: "Gm",
+                D7: "D7", G7: "G7", C7: "C7", A7: "A7", E7: "E7", B7: "H7"
+            },
+            it: {
+                C: "Do", G: "Sol", Am: "Lam", F: "Fa", Em: "Mim", Dm: "Rem", Bb: "Sib",
+                D: "Re", A: "La", E: "Mi", B: "Si", Fm: "Fam", Cm: "Dom", Gm: "Solm",
+                D7: "Re7", G7: "Sol7", C7: "Do7", A7: "La7", E7: "Mi7", B7: "Si7"
+            },
+            ja: {
+                C: "C", G: "G", Am: "Am", F: "F", Em: "Em", Dm: "Dm", Bb: "B♭",
+                D: "D", A: "A", E: "E", B: "B", Fm: "Fm", Cm: "Cm", Gm: "Gm",
+                D7: "D7", G7: "G7", C7: "C7", A7: "A7", E7: "E7", B7: "B7"
+            }
+        };
+        // Common chord progressions by genre
+        const progressions = {
+            pop: ["C", "G", "Am", "F"],
+            rock: ["E", "B", "C#m", "A"],
+            jazz: ["Dm7", "G7", "Cmaj7", "A7"],
+            blues: ["C7", "F7", "G7", "C7"],
+            classical: ["C", "G", "Am", "Em", "F", "C", "F", "G"],
+            electronic: ["Cm", "Bb", "Ab", "Eb"],
+            flamenco: ["Am", "G", "F", "E"],
+            reggae: ["A", "D", "E", "A"]
+        };
+        // Music theory tips by genre
+        const theoryTips = {
+            pop: {
+                en: "This I-V-vi-IV progression is the most common in pop music, found in countless hit songs. The movement from the tonic (I) to dominant (V) creates tension that resolves satisfyingly.",
+                fr: "Cette progression I-V-vi-IV est la plus courante dans la musique pop, présente dans d'innombrables tubes. Le mouvement de la tonique (I) à la dominante (V) crée une tension qui se résout de manière satisfaisante.",
+                es: "Esta progresión I-V-vi-IV es la más común en la música pop, presente en innumerables éxitos. El movimiento de la tónica (I) a la dominante (V) crea tensión que se resuelve de manera satisfactoria.",
+                de: "Diese I-V-vi-IV-Folge ist die häufigste in der Popmusik und findet sich in unzähligen Hits. Die Bewegung von der Tonika (I) zur Dominante (V) erzeugt Spannung, die sich befriedigend auflöst.",
+                it: "Questa progressione I-V-vi-IV è la più comune nella musica pop, presente in innumerevoli canzoni di successo. Il movimento dalla tonica (I) alla dominante (V) crea tensione che si risolve in modo soddisfacente.",
+                ja: "このI-V-vi-IV進行はポップミュージックで最も一般的で、無数のヒット曲に見られます。トニック（I）からドミナント（V）への動きは、満足のいく解決をもたらす緊張感を作り出します。"
+            },
+            rock: {
+                en: "This powerful progression uses the classic rock formula with strong root movements. The V-IV-I pattern creates a driving energy perfect for anthemic rock songs.",
+                fr: "Cette progression puissante utilise la formule rock classique avec des mouvements de basse forts. Le motif V-IV-I crée une énergie entraînante parfaite pour les chansons rock hymne.",
+                es: "Esta progresión poderosa utiliza la fórmula clásica del rock con fuertes movimientos de raíz. El patrón V-IV-I crea una energía impulsora perfecta para canciones de rock himno.",
+                de: "Diese kraftvolle Folge verwendet die klassische Rockformel mit starken Grundtonbewegungen. Das V-IV-I-Muster erzeugt eine treibende Energie, die perfekt für hymnische Rocksongs ist.",
+                it: "Questa potente progressione utilizza la classica formula rock con forti movimenti di radice. Il pattern V-IV-I crea un'energia trainante perfetta per le canzoni rock inno.",
+                ja: "この力強い進行は、強力なルートムーブメントを備えたクラシックなロックの公式を使用しています。V-IV-Iパターンは、アンセミックなロックソングに最適な推進力のあるエネルギーを作り出します。"
+            },
+            jazz: {
+                en: "This ii-V-I progression with added 7ths is the backbone of jazz harmony. The chromatic movement and extended chords create rich harmonic color.",
+                fr: "Cette progression ii-V-I avec des 7èmes ajoutées est l'épine dorsale de l'harmonie jazz. Le mouvement chromatique et les accords étendus créent une riche couleur harmonique.",
+                es: "Esta progresión ii-V-I con séptimas añadidas es la columna vertebral de la armonía jazz. El movimiento cromático y los acordes extendidos crean un rico color armónico.",
+                de: "Diese ii-V-I-Folge mit hinzugefügten Septimen ist das Rückgrat der Jazzharmonik. Die chromatische Bewegung und die erweiterten Akkorde erzeugen eine reiche harmonische Farbe.",
+                it: "Questa progressione ii-V-I con settime aggiunte è la spina dorsale dell'armonia jazz. Il movimento cromatico e gli accordi estesi creano un ricco colore armonico.",
+                ja: "7thを加えたこのii-V-I進行は、ジャズハーモニーのバックボーンです。半音階の動きと拡張されたコードは、豊かなハーモニックカラーを作り出します。"
+            }
+            // More genre tips can be added here
+        };
+        // Current state
+        let currentLanguage = 'en';
+        let currentGenre = 'pop';
+        let currentKey = 'C';
+        let currentChords = [];
+        let isPlaying = false;
+        let synth;
+        // DOM elements
+        const languageSelector = document.getElementById('language-selector');
+        const genreButtons = document.querySelectorAll('.genre-btn');
+        const keyButtons = document.querySelectorAll('.key-btn');
+        const generateBtn = document.getElementById('generate-btn');
+        const playBtn = document.getElementById('play-btn');
+        const resultsSection = document.getElementById('results-section');
+        const chordContainer = document.getElementById('chord-container');
+        const theoryTipsSection = document.getElementById('theory-tips');
+        // Initialize Tone.js
+        function initAudio() {
+            synth = new Tone.PolySynth(Tone.Synth).toDestination();
+            synth.volume.value = -10;
+        }
+        // Translate the UI
+        function translateUI(lang) {
+            const translation = translations[lang];
+            document.getElementById('main-title').textContent = translation.title;
+            document.getElementById('main-subtitle').textContent = translation.subtitle;
+            document.getElementById('genre-label').textContent = translation.genreLabel;
+            document.getElementById('key-label').textContent = translation.keyLabel;
+            document.getElementById('generate-text').textContent = translation.generateText;
+            document.getElementById('progression-label').textContent = translation.progressionLabel;
+            document.getElementById('play-text').textContent = translation.playText;
+            document.getElementById('save-text').textContent = translation.saveText;
+            document.getElementById('share-text').textContent = translation.shareText;
+            document.getElementById('export-text').textContent = translation.exportText;
+            document.getElementById('tips-title').textContent = translation.tipsTitle;
+            document.getElementById('tips-content').textContent = translation.tipsContent;
+            document.getElementById('footer-text').innerHTML = translation.footer;
+            // Update chord names if we have a progression displayed
+            if (currentChords.length > 0) {
+                renderChords(currentChords);
+            }
+        }
+        // Generate a chord progression
+        function generateProgression() {
+            const baseProgression = progressions[currentGenre];
+            // Transpose to selected key
+            const keyIndex = ['C', 'D', 'E', 'F', 'G', 'A', 'B'].indexOf(currentKey);
+            const transposedChords = baseProgression.map(chord => {
+                return transposeChord(chord, keyIndex);
+            });
+            currentChords = transposedChords;
+            renderChords(transposedChords);
+            // Show results section
+            resultsSection.classList.remove('hidden');
+            // Show music theory tips if available
+            if (theoryTips[currentGenre] && theoryTips[currentGenre][currentLanguage]) {
+                document.getElementById('tips-content').textContent = theoryTips[currentGenre][currentLanguage];
+                theoryTipsSection.classList.remove('hidden');
+            } else {
+                theoryTipsSection.classList.add('hidden');
+            }
+            // Scroll to results
+            resultsSection.scrollIntoView({ behavior: 'smooth' });
+        }
+        // Transpose a chord to a new key
+        function transposeChord(chord, semitones) {
+            const notes = ['C', 'C#', 'D', 'D#', 'E', 'F', 'F#', 'G', 'G#', 'A', 'A#', 'B'];
+            const flats = ['C', 'Db', 'D', 'Eb', 'E', 'F', 'Gb', 'G', 'Ab', 'A', 'Bb', 'B'];
+            // Extract root note and quality
+            let root = chord.match(/^[A-G][#b]?/)[0];
+            const quality = chord.slice(root.length);
+            // Find current index
+            let currentIndex = notes.indexOf(root);
+            if (currentIndex === -1) currentIndex = flats.indexOf(root);
+            // Calculate new index
+            let newIndex = (currentIndex + semitones) % 12;
+            if (newIndex < 0) newIndex += 12;
+            // Get new root (prefer sharps for simplicity)
+            const newRoot = notes[newIndex];
+            return newRoot + quality;
+        }
+        // Render chords to the UI
+        function renderChords(chords) {
+            chordContainer.innerHTML = '';
+            chords.forEach((chord, index) => {
+                const chordCard = document.createElement('div');
+                chordCard.className = 'chord-card bg-gray-800 rounded-lg p-6 text-center border border-gray-700';
+                // Get translated chord name
+                const translatedChord = chordTranslations[currentLanguage][chord.replace(/[0-9]/g, '')] || chord;
+                chordCard.innerHTML = `
+                    <div class="text-5xl font-bold mb-2 text-indigo-400">${translatedChord}</div>
+                    <div class="text-sm text-gray-400">${getRomanNumeral(chord, currentKey)}</div>
+                    <button data-index="${index}" class="mt-4 px-3 py-1 rounded bg-gray-700 hover:bg-gray-600 text-sm play-chord-btn">
+                        <i class="fas fa-volume-up mr-1"></i>
+                        <span>${translations[currentLanguage].playText || 'Play'}</span>
+                    </button>
+                `;
+                chordContainer.appendChild(chordCard);
+            });
+            // Add event listeners to chord play buttons
+            document.querySelectorAll('.play-chord-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    const index = parseInt(this.getAttribute('data-index'));
+                    playChord(currentChords[index]);
+                    // Add visual feedback
+                    const chordCard = this.closest('.chord-card');
+                    chordCard.classList.add('chord-playing');
+                    setTimeout(() => {
+                        chordCard.classList.remove('chord-playing');
+                    }, 1000);
+                });
+            });
+        }
+        // Get Roman numeral for a chord
+        function getRomanNumeral(chord, key) {
+            const root = chord.match(/^[A-G][#b]?/)[0];
+            const scale = ['C', 'D', 'E', 'F', 'G', 'A', 'B'];
+            const keyIndex = scale.indexOf(key[0]);
+            const rootIndex = scale.indexOf(root[0]);
+            let distance = (rootIndex - keyIndex + 7) % 7;
+            const numerals = ['I', 'II', 'III', 'IV', 'V', 'VI', 'VII'];
+            return numerals[distance];
+        }
+        // Play a single chord
+        function playChord(chord) {
+            if (!synth) initAudio();
+            // Parse chord to get notes
+            const notes = getChordNotes(chord);
+            // Play the chord
+            synth.triggerAttackRelease(notes, "2n");
+        }
+        // Play the entire progression
+        function playProgression() {
+            if (isPlaying) {
+                // Stop playback
+                Tone.Transport.cancel();
+                isPlaying = false;
+                playBtn.innerHTML = `<i class="fas fa-play mr-2"></i><span>${translations[currentLanguage].playText || 'Play'}</span>`;
+                return;
+            }
+            if (!synth) initAudio();
+            isPlaying = true;
+            playBtn.innerHTML = `<i class="fas fa-stop mr-2"></i><span>${translations[currentLanguage].playText || 'Stop'}</span>`;
+            // Start Tone.js transport
+            Tone.start();
+            Tone.Transport.cancel();
+            Tone.Transport.bpm.value = 90;
+            let time = 0;
+            currentChords.forEach((chord, i) => {
+                const notes = getChordNotes(chord);
+                // Play chord
+                Tone.Transport.schedule(time => {
+                    synth.triggerAttackRelease(notes, "2n", time);
+                    // Highlight the playing chord
+                    const chordCards = document.querySelectorAll('.chord-card');
+                    chordCards.forEach(card => card.classList.remove('chord-playing'));
+                    chordCards[i].classList.add('chord-playing');
+                }, time);
+                time += 1; // 1 measure per chord
+            });
+            // Stop highlighting when done
+            Tone.Transport.schedule(time => {
+                document.querySelectorAll('.chord-card').forEach(card => {
+                    card.classList.remove('chord-playing');
+                });
+                isPlaying = false;
+                playBtn.innerHTML = `<i class="fas fa-play mr-2"></i><span>${translations[currentLanguage].playText || 'Play'}</span>`;
+            }, time);
+            Tone.Transport.start();
+        }
+        // Get notes for a chord
+        function getChordNotes(chord) {
+            const chordMap = {
+                'C': ['C4', 'E4', 'G4'],
+                'Cm': ['C4', 'Eb4', 'G4'],
+                'C7': ['C4', 'E4', 'G4', 'Bb4'],
+                'D': ['D4', 'F#4', 'A4'],
+                'Dm': ['D4', 'F4', 'A4'],
+                'D7': ['D4', 'F#4', 'A4', 'C5'],
+                'E': ['E4', 'G#4', 'B4'],
+                'Em': ['E4', 'G4', 'B4'],
+                'E7': ['E4', 'G#4', 'B4', 'D5'],
+                'F': ['F4', 'A4', 'C5'],
+                'Fm': ['F4', 'Ab4', 'C5'],
+                'F7': ['F4', 'A4', 'C5', 'Eb5'],
+                'G': ['G4', 'B4', 'D5'],
+                'Gm': ['G4', 'Bb4', 'D5'],
+                'G7': ['G4', 'B4', 'D5', 'F5'],
+                'A': ['A4', 'C#5', 'E5'],
+                'Am': ['A4', 'C5', 'E5'],
+                'A7': ['A4', 'C#5', 'E5', 'G5'],
+                'B': ['B4', 'D#5', 'F#5'],
+                'Bm': ['B4', 'D5', 'F#5'],
+                'B7': ['B4', 'D#5', 'F#5', 'A5'],
+                'Bb': ['Bb4', 'D5', 'F5'],
+                'C#m': ['C#4', 'E4', 'G#4'],
+                'F#m': ['F#4', 'A4', 'C#5']
+            };
+            return chordMap[chord] || ['C4', 'E4', 'G4']; // Default to C major if chord not found
+        }
+        // Event listeners
+        languageSelector.addEventListener('change', function() {
+            currentLanguage = this.value;
+            translateUI(currentLanguage);
+        });
+        genreButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                // Update active genre button
+                genreButtons.forEach(b => {
+                    b.classList.remove('bg-indigo-700', 'text-indigo-100');
+                    const genreClass = {
+                        pop: 'bg-indigo-900',
+                        rock: 'bg-gray-700',
+                        jazz: 'bg-amber-900',
+                        blues: 'bg-blue-900',
+                        classical: 'bg-purple-900',
+                        electronic: 'bg-pink-900',
+                        flamenco: 'bg-red-900',
+                        reggae: 'bg-green-900'
+                    }[b.dataset.genre];
+                    b.classList.add(genreClass);
+                });
+                this.classList.remove('bg-indigo-900', 'bg-gray-700', 'bg-amber-900', 'bg-blue-900', 'bg-purple-900', 'bg-pink-900', 'bg-red-900', 'bg-green-900');
+                this.classList.add('bg-indigo-700', 'text-indigo-100');
+                currentGenre = this.dataset.genre;
+            });
+        });
+        keyButtons.forEach(btn => {
+            btn.addEventListener('click', function() {
+                keyButtons.forEach(b => b.classList.remove('bg-indigo-600', 'text-white'));
+                this.classList.add('bg-indigo-600', 'text-white');
+                currentKey = this.dataset.key;
+            });
+        });
+        generateBtn.addEventListener('click', generateProgression);
+        playBtn.addEventListener('click', playProgression);
+        // Initialize
+        translateUI(currentLanguage);
+        genreButtons[0].click(); // Select first genre by default
+        keyButtons[0].click(); // Select first key by default
+    </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=zama1/harmonygen" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>