feat: Estudio Musical para criacao de cantigas personalizadas

public/index.html

@@ -99,6 +99,14 @@
           </svg>
           <span>Modelos de Relatório</span>
         </button>
+
+        <!-- Botão: Estúdio Musical -->
+        <button class="btn-observacoes" id="sidebarBtnEstudio" style="border-color: #a855f7; color: #a855f7; background: rgba(168, 85, 247, 0.05);">
+          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor">
+            <path stroke-linecap="round" stroke-linejoin="round" d="M9 19V6l12-3v13M9 10l12-3M9 14l12-3" />
+          </svg>
+          <span>Estúdio Musical</span>
+        </button>
       </div>
 
       <!-- Divisor -->
@@ -210,10 +218,10 @@
               <div class="card-title">Planejamento Mind Lab</div>
               <div class="card-desc">Atividades lúdicas para desenvolvimento de habilidades socioemocionais.</div>
             </div>
-            <div class="suggestion-card" data-prompt="Crie uma música pedagógica infantil alegre e animada sobre animais e sons da fazenda.">
-              <div class="card-icon">🎵</div>
-              <div class="card-title">Criar Música / Cantiga</div>
-              <div class="card-desc">Gere músicas divertidas com melodia e letra educativa.</div>
+            <div class="suggestion-card" id="welcomeCardEstudio" style="border-color: rgba(168, 85, 247, 0.25); background: rgba(168, 85, 247, 0.02);">
+              <div class="card-icon">🎹</div>
+              <div class="card-title" style="color: #c084fc;">Estúdio Musical</div>
+              <div class="card-desc">Gere músicas cantadas personalizadas com voz, ritmo e duração.</div>
             </div>
             <div class="suggestion-card" data-prompt="Crie um planejamento pedagógico de artes alinhado à BNCC para o campo 'Traços, sons, cores e formas'.">
               <div class="card-icon">🎨</div>
@@ -637,10 +645,93 @@
               Escolha uma criança e um modelo de relatório para começar.
             </div>
           </div>
+  <!-- Modal: Estúdio Musical (Criação de música cantada com MiniMax) -->
+  <div id="estudioMusicalModal" class="settings-modal" style="display: none;">
+    <div class="settings-modal-content" style="max-width: 600px; width: 95%; max-height: 90vh; display: flex; flex-direction: column;">
+      <div class="settings-modal-header" style="background: var(--bg-secondary); border-bottom: 1px solid var(--border-light);">
+        <h3 style="display: flex; align-items: center; gap: 8px; font-family: 'Outfit', sans-serif;">🎵 Estúdio Musical Camila AI</h3>
+        <button id="btnCloseEstudioModal" class="btn-close-modal" style="background: none; border: none; color: var(--text-secondary); cursor: pointer; font-size: 1.5rem;">&times;</button>
+      </div>
+      <div class="settings-modal-body" style="padding: 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 18px; flex: 1;">
+        
+        <!-- VOZ -->
+        <div class="settings-group">
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">1. Escolha a Voz do Canto</label>
+          <div class="music-option-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px;">
+            <button type="button" class="btn-music-option active" data-voice="mulher">👩 Mulher</button>
+            <button type="button" class="btn-music-option" data-voice="homem">👨 Homem</button>
+            <button type="button" class="btn-music-option" data-voice="crianca">🧒 Criança</button>
+          </div>
         </div>
+
+        <!-- RITMO -->
+        <div class="settings-group">
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">2. Escolha o Ritmo da Cantiga</label>
+          <div class="music-option-grid" style="display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px; margin-top: 4px;">
+            <button type="button" class="btn-music-rhythm active" data-rhythm="roda">⭕ Cantiga de Roda</button>
+            <button type="button" class="btn-music-rhythm" data-rhythm="pop">⚡ Pop Infantil</button>
+            <button type="button" class="btn-music-rhythm" data-rhythm="ninar">🌙 Canção de Ninar</button>
+            <button type="button" class="btn-music-rhythm" data-rhythm="acustico">🎸 Alegre Acústico</button>
+            <button type="button" class="btn-music-rhythm" data-rhythm="marcha">🥁 Marcha Rítmica</button>
+          </div>
+        </div>
+
+        <!-- DURAÇÃO -->
+        <div class="settings-group">
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">3. Escolha a Duração da Música</label>
+          <div class="music-option-grid" style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 4px;">
+            <button type="button" class="btn-music-duration active" data-duration="30s">⏱️ 30 segundos</button>
+            <button type="button" class="btn-music-duration" data-duration="1min">⏱️ 1 minuto</button>
+            <button type="button" class="btn-music-duration" data-duration="2min">⏱️ 2 minutos</button>
+          </div>
+        </div>
+
+        <!-- TEMA -->
+        <div class="settings-group">
+          <label style="color: var(--text-secondary); font-size: 0.82rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">4. Digite o Tema da Música</label>
+          <textarea id="musicTemaInput" placeholder="Ex: Higiene pessoal, lavar as mãos antes de comer, os sons dos animais da fazenda..." class="obs-input" style="width: 100%; min-height: 80px; padding: 10px; resize: vertical; margin-top: 4px; line-height: 1.4;"></textarea>
+        </div>
+
+        <!-- BOTÃO GERAR E STATUS -->
+        <div style="display: flex; flex-direction: column; gap: 10px; margin-top: 8px;">
+          <button id="btnGenerateStudioMusic" style="background: linear-gradient(135deg, #a855f7 0%, #7c3aed 100%); color: white; border: none; padding: 12px; border-radius: 8px; font-weight: 600; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 8px; transition: opacity 0.2s; box-shadow: 0 4px 12px rgba(124, 58, 237, 0.25);">
+            <span>🎵 Gerar Canção Personalizada</span>
+          </button>
+          <div id="musicGenerateLoader" style="display: none; align-items: center; justify-content: center; gap: 10px; color: var(--text-secondary); font-size: 0.9rem; padding: 10px; background: rgba(255, 255, 255, 0.02); border-radius: 8px;">
+            <div class="record-spinner" style="width: 20px; height: 20px; border-width: 2px;"></div>
+            <span id="musicLoaderText">Compondo a letra e gravando os vocais...</span>
+          </div>
+        </div>
+
+        <!-- ÁREA DE RESULTADO (INICIALMENTE OCULTA) -->
+        <div id="musicResultArea" style="display: none; border-top: 1px solid var(--border-light); padding-top: 16px; flex-direction: column; gap: 14px;">
+          <h4 style="margin: 0; color: var(--text-primary); font-size: 1rem; display: flex; align-items: center; gap: 6px;">✨ Sua Canção Está Pronta!</h4>
+          
+          <!-- Player de Áudio e Download MP3 -->
+          <div style="background: var(--bg-secondary); padding: 14px; border-radius: 12px; display: flex; flex-direction: column; gap: 12px; border: 1px solid var(--border-light);">
+            <audio id="musicStudioAudioPlayer" controls style="width: 100%;"></audio>
+            <a id="musicStudioDownloadBtn" href="#" download="cantiga_pedagogica.mp3" class="btn-save-settings" style="display: flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; font-size: 0.9rem; padding: 10px; background: linear-gradient(135deg, var(--brand-green) 0%, #0a5f49 100%);">
+              📥 Baixar Música (MP3)
+            </a>
+          </div>
+
+          <!-- Letra Transcrita -->
+          <div style="display: flex; flex-direction: column; gap: 8px;">
+            <div style="display: flex; justify-content: space-between; align-items: center;">
+              <label style="color: var(--text-secondary); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px;">Letra da Música</label>
+              <div style="display: flex; gap: 8px;">
+                <button id="btnCopyMusicLyrics" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;">📋 Copiar Letra</button>
+                <button id="btnDownloadMusicLyrics" style="background: none; border: 1px solid var(--border-light); color: var(--text-secondary); padding: 5px 10px; border-radius: 6px; font-size: 0.75rem; cursor: pointer; transition: all 0.2s;">💾 Baixar Letra (TXT)</button>
+              </div>
+            </div>
+            <pre id="musicStudioLyricsArea" style="background: var(--bg-secondary); padding: 14px; border-radius: 10px; max-height: 180px; overflow-y: auto; font-family: inherit; font-size: 0.92rem; line-height: 1.6; white-space: pre-wrap; border: 1px solid var(--border-light); color: var(--text-primary); margin: 0; box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);"></pre>
+          </div>
+        </div>
+
       </div>
     </div>
   </div>
+</div>
 
   <!-- Bibliotecas externas para renderizar markdown e blocos de código -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/marked/12.0.1/marked.min.js"></script>