|
|
|
|
|
<!DOCTYPE html> |
|
|
<html lang="fr"> |
|
|
<head> |
|
|
<meta charset="utf-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Tampia - IA d'Analyse Vocale</title> |
|
|
<link href="style.css" rel="stylesheet" type="text/css" /> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.10.0/dist/tf.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/tone@14.7.77/build/Tone.js"></script> |
|
|
</head> |
|
|
<body> |
|
|
<div class="container"> |
|
|
<header class="header"> |
|
|
<div class="neko-ears">🐱</div> |
|
|
<h1 class="title">✨ Tampia ✨</h1> |
|
|
<p class="subtitle">Votre IA spécialisée en rythme et justesse vocale</p> |
|
|
</header> |
|
|
|
|
|
<div class="upload-section"> |
|
|
<div class="upload-group"> |
|
|
<label for="vocal-file" class="upload-label"> |
|
|
<div class="upload-box vocal-box"> |
|
|
|
|
|
<div class="documentation-section"> |
|
|
<h3>📖 Comment utiliser Tampia ?</h3> |
|
|
<div class="doc-content"> |
|
|
<div class="doc-step"> |
|
|
<span class="step-number">1</span> |
|
|
<div> |
|
|
<strong>Préparez vos fichiers audio :</strong> |
|
|
<ul> |
|
|
<li>🎤 <strong>Audio vocal :</strong> Votre voix seule (format MP3, WAV, OGG)</li> |
|
|
<li>🎵 <strong>Audio instrumental :</strong> L'accompagnement musical sans voix</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="doc-step"> |
|
|
<span class="step-number">2</span> |
|
|
<div> |
|
|
<strong>Configurez les paramètres :</strong> |
|
|
<ul> |
|
|
<li>🎹 <strong>Gamme :</strong> Choisissez la tonalité de votre chanson</li> |
|
|
<li>⏱️ <strong>Tempo :</strong> Le nombre de battements par minute (BPM)</li> |
|
|
<li>🎼 <strong>Signature :</strong> La mesure de votre morceau (ex: 4/4 pour pop/rock)</li> |
|
|
</ul> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="doc-step"> |
|
|
<span class="step-number">3</span> |
|
|
<div> |
|
|
<strong>Comprenez les résultats :</strong> |
|
|
<div class="legend"> |
|
|
<div class="legend-item"> |
|
|
<span class="marker-example rhythm-good">🟢</span> |
|
|
<span>Rythme <strong>calé</strong> (bien synchronisé)</span> |
|
|
</div> |
|
|
<div class="legend-item"> |
|
|
<span class="marker-example rhythm-bad">🔴</span> |
|
|
<span>Rythme <strong>décalé</strong> (en retard/avance)</span> |
|
|
</div> |
|
|
<div class="legend-item"> |
|
|
<span class="marker-example pitch-good">J</span> |
|
|
<span>Note <strong>juste</strong> (bonne hauteur)</span> |
|
|
</div> |
|
|
<div class="legend-item"> |
|
|
<span class="marker-example pitch-bad">F</span> |
|
|
<span>Note <strong>fausse</strong> (hauteur incorrecte)</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<span class="upload-icon">🎤</span> |
|
|
<span class="upload-text">Audio Vocal</span> |
|
|
<input type="file" id="vocal-file" accept="audio/*" hidden> |
|
|
</div> |
|
|
</label> |
|
|
<span id="vocal-name" class="file-name"></span> |
|
|
</div> |
|
|
|
|
|
<div class="upload-group"> |
|
|
<label for="instrumental-file" class="upload-label"> |
|
|
<div class="upload-box instrumental-box"> |
|
|
<span class="upload-icon">🎵</span> |
|
|
<span class="upload-text">Audio Instrumental</span> |
|
|
<input type="file" id="instrumental-file" accept="audio/*" hidden> |
|
|
</div> |
|
|
</label> |
|
|
<span id="instrumental-name" class="file-name"></span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="settings-section"> |
|
|
<h3>Paramètres d'analyse</h3> |
|
|
|
|
|
<div class="setting-group"> |
|
|
<label for="scale-select">Gamme cible :</label> |
|
|
<select id="scale-select" class="pink-select"> |
|
|
<optgroup label="Gammes Majeures"> |
|
|
<option value="C">Do majeur</option> |
|
|
<option value="Db">Ré♭ majeur</option> |
|
|
<option value="D">Ré majeur</option> |
|
|
<option value="Eb">Mi♭ majeur</option> |
|
|
<option value="E">Mi majeur</option> |
|
|
<option value="F">Fa majeur</option> |
|
|
<option value="Gb">Sol♭ majeur</option> |
|
|
<option value="G">Sol majeur</option> |
|
|
<option value="Ab">La♭ majeur</option> |
|
|
<option value="A">La majeur</option> |
|
|
<option value="Bb">Si♭ majeur</option> |
|
|
<option value="B">Si majeur</option> |
|
|
</optgroup> |
|
|
<optgroup label="Gammes Mineures"> |
|
|
<option value="Cm">Do mineur</option> |
|
|
<option value="Dbm">Ré♭ mineur</option> |
|
|
<option value="Dm">Ré mineur</option> |
|
|
<option value="Ebm">Mi♭ mineur</option> |
|
|
<option value="Em">Mi mineur</option> |
|
|
<option value="Fm">Fa mineur</option> |
|
|
<option value="Gbm">Sol♭ mineur</option> |
|
|
<option value="Gm">Sol mineur</option> |
|
|
<option value="Abm">La♭ mineur</option> |
|
|
<option value="Am">La mineur</option> |
|
|
<option value="Bbm">Si♭ mineur</option> |
|
|
<option value="Bm">Si mineur</option> |
|
|
</optgroup> |
|
|
<optgroup label="Modes"> |
|
|
<option value="C_dorian">Do dorien</option> |
|
|
<option value="C_phrygian">Do phrygien</option> |
|
|
<option value="C_lydian">Do lydien</option> |
|
|
<option value="C_mixolydian">Do mixolydien</option> |
|
|
<option value="C_pentatonic">Do pentatonique</option> |
|
|
<option value="C_blues">Do blues</option> |
|
|
</optgroup> |
|
|
</select> |
|
|
</div> |
|
|
|
|
|
<div class="setting-group"> |
|
|
<label for="tempo-input">Tempo (BPM) :</label> |
|
|
<input type="number" id="tempo-input" min="40" max="300" value="120" class="pink-input"> |
|
|
</div> |
|
|
|
|
|
<div class="setting-group"> |
|
|
<label for="time-signature">Signature rythmique :</label> |
|
|
<select id="time-signature" class="pink-select"> |
|
|
<optgroup label="Signatures Simples"> |
|
|
<option value="4/4">4/4 (Rock, Pop)</option> |
|
|
<option value="3/4">3/4 (Valse)</option> |
|
|
<option value="2/4">2/4 (Marche)</option> |
|
|
<option value="2/2">2/2 (Alla breve)</option> |
|
|
</optgroup> |
|
|
<optgroup label="Signatures Composées"> |
|
|
<option value="6/8">6/8 (Ballade)</option> |
|
|
<option value="9/8">9/8 (Triple ternaire)</option> |
|
|
<option value="12/8">12/8 (Blues lent)</option> |
|
|
</optgroup> |
|
|
<optgroup label="Signatures Complexes"> |
|
|
<option value="5/4">5/4 (Prog rock)</option> |
|
|
<option value="7/4">7/4 (Odd time)</option> |
|
|
<option value="7/8">7/8 (Folk balkanique)</option> |
|
|
<option value="5/8">5/8 (Asymétrique)</option> |
|
|
</optgroup> |
|
|
</select> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<button id="analyze-btn" class="analyze-button" disabled> |
|
|
<span class="neko-icon">🐾</span> |
|
|
Analyser les décalages |
|
|
</button> |
|
|
|
|
|
<div id="loading" class="loading hidden"> |
|
|
<div class="neko-loading">🐱</div> |
|
|
<p>Tampia analyse votre performance...</p> |
|
|
</div> |
|
|
|
|
|
<div id="results" class="results hidden"> |
|
|
<h3>Résultats d'analyse</h3> |
|
|
<div id="duration-info" class="duration-info"></div> |
|
|
<div id="timeline" class="timeline"></div> |
|
|
<div id="advice" class="advice"></div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script src="script.js"></script> |
|
|
</body> |
|
|
</html> |
|
|
|
