Teste de filtros de projetos
Deploy / Deploy (push) Successful in 1m23s Details

This commit is contained in:
JotaChina 2025-12-13 21:52:23 -03:00
parent 32bf1c40cf
commit fc6f447be4
1 changed files with 29 additions and 27 deletions

View File

@ -348,10 +348,9 @@ document.addEventListener('DOMContentLoaded', () => {
}
function enrichCards(data) {
// 1. Cria um mapa para busca rápida (O(N))
// 1. Cria um mapa para busca rápida
const mapDados = {};
data.forEach(item => {
// Mapeia tanto pelo nome do arquivo quanto pelo título do projeto
const keyArquivo = normalizarChaveJS(item.arquivo.replace('.wav','').replace('.mp3',''));
mapDados[keyArquivo] = item;
@ -363,41 +362,42 @@ document.addEventListener('DOMContentLoaded', () => {
cards.forEach(card => {
const cardKey = normalizarChaveJS(card.dataset.title);
// 2. Busca instantânea (O(1))
const info = mapDados[cardKey]; // <--- A variável foi definida aqui como 'info'
// 2. Busca instantânea
const info = mapDados[cardKey];
if (info) {
// 1. Salvar Metadados nos atributos HTML
// --- 1. Metadados para Filtros ---
card.dataset.genre = (info.analise_ia && info.analise_ia.genero_macro) ? info.analise_ia.genero_macro : "Unknown";
card.dataset.intensity = (info.analise_tecnica && info.analise_tecnica.intensidade_db) ? parseFloat(info.analise_tecnica.intensidade_db) : 0;
card.dataset.bpm_real = (info.analise_tecnica && info.analise_tecnica.bpm) ? parseFloat(info.analise_tecnica.bpm) : 0;
// 2. Injetar Etiquetas Visuais no Card
const bpmContainer = card.querySelector('.bpm-container');
// CORREÇÃO AQUI: Verificamos se 'info' tem complexidade antes de tentar ler, para não quebrar o código
// --- 2. Lógica das Estrelas ---
let numeroEstrelas = 0;
if (info.analise_tecnica.complexidade && info.analise_tecnica.complexidade.estrelas) {
// Verifica se existe o objeto complexidade e o valor estrelas
if (info.analise_tecnica && info.analise_tecnica.complexidade && info.analise_tecnica.complexidade.estrelas) {
numeroEstrelas = info.analise_tecnica.complexidade.estrelas;
}
// Agora usamos a variável correta e o valor seguro
const estrelasHTML = gerarEstrelas(numeroEstrelas);
// --- 3. Injeção Visual (HTML) ---
const bpmContainer = card.querySelector('.bpm-container');
// Se achou o container do BPM, insere as novas tags logo após
if (bpmContainer) {
// Cria container para as novas tags
const iaTagsDiv = document.createElement('div');
iaTagsDiv.className = "tags is-centered mt-1 mb-3";
iaTagsDiv.style.opacity = "0.9";
iaTagsDiv.style.flexDirection = "column"; // Organiza em linhas (estrelas em cima, tags em baixo)
let htmlFinal = '';
// A) Adiciona as Estrelas
htmlFinal += `<div class="mb-1" style="font-size: 0.8rem;">${estrelasHTML}</div>`;
// CRIAÇÃO DO HTML FINAL
let tagsHtml = '';
// Container para as tags (Genero + Tom)
htmlFinal += '<div class="tags is-centered">';
// 1. INJETAR AS ESTRELAS (Esta é a parte que faltava)
// Adicionamos uma verificação: só mostra se tiver estrelas > 0 ou se você quiser mostrar as vazias
tagsHtml += `<div style="width: 100%; margin-bottom: 4px;">${estrelasHTML}</div>`;
// 2. Tag de Gênero IA
// B) Tag de Gênero IA
if (info.analise_ia.genero_macro && info.analise_ia.genero_macro !== "Unknown") {
const genero = info.analise_ia.genero_macro;
let colorClass = 'is-primary';
@ -405,25 +405,27 @@ document.addEventListener('DOMContentLoaded', () => {
if(genero === 'Hip Hop') colorClass = 'is-warning';
if(genero === 'Rock') colorClass = 'is-danger';
tagsHtml += `<span class="tag ${colorClass} is-light is-rounded" style="font-size: 0.65rem; border: 1px solid transparent;" title="Gênero detectado por IA">
htmlFinal += `<span class="tag ${colorClass} is-light is-rounded mr-1" style="font-size: 0.65rem;" title="Gênero IA">
🤖 ${genero}
</span>`;
}
// Tag de Tom (Musical Key)
if (info.analise_tecnica.tom && info.analise_tecnica.escala) {
// C) Tag de Tom (Musical Key)
if (info.analise_tecnica.tom) {
const nota = info.analise_tecnica.tom;
const escala = info.analise_tecnica.escala === 'minor' ? 'm' : ''; // 'm' para menor, nada para maior
tagsHtml += `<span class="tag is-white is-rounded" style="font-size: 0.65rem; border: 1px solid #ddd; color: #555;">
const escala = info.analise_tecnica.escala === 'minor' ? 'm' : '';
htmlFinal += `<span class="tag is-white is-rounded" style="font-size: 0.65rem; border: 1px solid #ddd; color: #555;">
🎹 ${nota}${escala}
</span>`;
}
htmlFinal += '</div>'; // Fecha container tags
iaTagsDiv.innerHTML = tagsHtml;
iaTagsDiv.innerHTML = htmlFinal;
bpmContainer.appendChild(iaTagsDiv);
}
} else {
// Se não achou dados, marca como desconhecido para filtros
// Se não achou dados
card.dataset.genre = "Outros";
card.dataset.intensity = -1;
}