Teste de filtros de projetos

index.md

@@ -5,6 +5,7 @@ title: MMPSearch
 
 <div class="publication">
   <div class="tabs is-centered is-boxed is-medium mb-6">
+  <br>
     {% include sidebar.html %}
   </div>
 </div>

pages/projetos.md

@@ -20,13 +20,51 @@ permalink: /projetos/
       <div style="width: 60px; height: 4px; background-color: #3273dc; margin: 1rem auto; border-radius: 2px;"></div>
     </div>
 
-    <div class="columns is-multiline">
+    <div class="box has-background-white-ter mb-6" style="border: 1px solid #dbdbdb;">
+      <div class="columns is-vcentered">
+        <div class="column is-narrow">
+          <span class="icon-text has-text-weight-bold has-text-grey">
+            <span class="icon"><i class="fa-solid fa-robot"></i></span>
+            <span>Filtro IA:</span>
+          </span>
+        </div>
+        
+        <div class="column">
+          <div class="buttons" id="genre-filters">
+            <button class="button is-small is-rounded is-active is-info" data-genre="all">Todos</button>
+            </div>
+        </div>
+
+        <div class="column is-narrow">
+           <div class="field has-addons">
+             <div class="control">
+               <a class="button is-static is-small is-rounded">
+                 <i class="fa-solid fa-sort"></i>
+               </a>
+             </div>
+             <div class="control">
+               <div class="select is-small is-rounded">
+                <select id="sort-select">
+                  <option value="default">Ordem Padrão</option>
+                  <option value="intensity_desc">🔥 Mais Intensos (dB)</option>
+                  <option value="intensity_asc">❄️ Mais Calmos (dB)</option>
+                  <option value="bpm_desc">⚡ BPM (Rápido)</option>
+                  <option value="bpm_asc">🐢 BPM (Lento)</option>
+                </select>
+              </div>
+             </div>
+           </div>
+        </div>
+      </div>
+    </div>
+    <div class="columns is-multiline" id="projects-container">
       {% assign project_pages = site.pages | where_exp: "page", "page.path contains 'projetos/'" | sort: "title" %}
       {% for page in project_pages %}
         {% if page.url != '/projetos/' %}
-          <div class="column is-12-mobile is-6-tablet is-4-desktop is-3-widescreen">
+          <div class="column is-12-mobile is-6-tablet is-4-desktop is-3-widescreen project-column">
 
             <div class="card project-card"
+                 data-title="{{ page.title | escape }}"
                  style="height: 100%; background-color: #f0f8ff; border: 1px solid #cfe8fc; border-radius: 12px; display: flex; flex-direction: column; position: relative;">
 
               <a href="{{ page.url | relative_url }}" style="text-decoration: none; flex: 1; display: flex; flex-direction: column;">
@@ -43,15 +81,15 @@ permalink: /projetos/
                     </p>
 
                     {% if page.bpm %}
-                      <div class="mb-3">
+                      <div class="mb-3 bpm-container">
                           <span class="tag is-dark is-rounded is-light" style="font-size: 0.7rem; font-weight: bold; border: 1px solid #ccc;">
                               🎵 {{ page.bpm }} BPM
                           </span>
                       </div>
                     {% else %}
-                      <div class="mb-3" style="height: 24px;"></div>
+                      <div class="mb-3 bpm-container" style="min-height: 24px;"></div>
                     {% endif %}
-
+                    
                     <div style="flex: 1;"></div>
 
                     {% if page.tags %}
@@ -204,10 +242,26 @@ permalink: /projetos/
       border-color: #3273dc !important;
       transform: translateY(-1px);
   }
+  /* Estilo para os botões de filtro */
+  #genre-filters .button {
+      margin-bottom: 0.5rem;
+      transition: all 0.2s;
+  }
+  #genre-filters .button:not(.is-active) {
+      background-color: white;
+      border-color: #dbdbdb;
+      color: #363636;
+  }
+  #genre-filters .button.is-active {
+      box-shadow: 0 2px 4px rgba(0,0,0,0.2);
+  }
 </style>
 
 <script>
 document.addEventListener('DOMContentLoaded', () => {
+  // ===============================================
+  // 1. CONFIGURAÇÃO E MODAL (Existente)
+  // ===============================================
   const modal = document.getElementById('preview-modal');
   const iframe = document.getElementById('preview-iframe');
   const modalTitle = document.getElementById('modal-title');
@@ -234,31 +288,199 @@ document.addEventListener('DOMContentLoaded', () => {
   document.querySelectorAll('.js-open-modal').forEach(btn => {
     btn.addEventListener('click', (e) => {
       e.preventDefault();
-      const url = btn.dataset.targetUrl;
+      openModal(btn.dataset.targetUrl, btn.dataset.modalTitle, btn.dataset.fullBtnText, btn.dataset.fullBtnLink);
-      const title = btn.dataset.modalTitle;
-      const btnText = btn.dataset.fullBtnText;
-      const btnLink = btn.dataset.fullBtnLink;
-      openModal(url, title, btnText, btnLink);
     });
   });
 
-  // Tenta esconder o menu dentro do iframe para não duplicar
+  closeButtons.forEach(el => el.addEventListener('click', closeModal));
-  iframe.addEventListener('load', () => {
+  document.addEventListener('keydown', (e) => { if (e.key === "Escape") closeModal(); });
-    try {
+
-        const iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
+  // ===============================================
-        const style = iframeDoc.createElement('style');
+  // 2. LÓGICA DE INTEGRAÇÃO COM IA (Novo)
-        style.textContent = `
+  // ===============================================
-            .tabs, .navbar, .sidebar-wrapper, .main-header { display: none !important; } 
+  
-            .publication { padding-top: 0 !important; }
+  // URL para o JSON que você gerou com o Python. Ajuste se necessário.
-            body { background-color: #fff !important; }
+  const JSON_URL = '/saida_analises/db_final_completo.json';
-        `;
+
-        iframeDoc.head.appendChild(style);
+  const cards = document.querySelectorAll('.project-card');
-    } catch(e) { }
+  const genreContainer = document.getElementById('genre-filters');
+  const sortSelect = document.getElementById('sort-select');
+  const projectsContainer = document.getElementById('projects-container');
+
+  // Inicializa a carga de dados
+  fetch(JSON_URL)
+    .then(response => {
+        if (!response.ok) throw new Error("JSON não encontrado: " + response.statusText);
+        return response.json();
+    })
+    .then(data => {
+      console.log("Dados IA carregados:", data.length, "músicas.");
+      enrichCards(data);
+      createGenreButtons(data);
+    })
+    .catch(err => {
+        console.warn("Aviso: Dados da IA não puderam ser carregados.", err);
+        // Oculta os filtros se não houver dados
+        const filterBox = document.querySelector('.box.has-background-white-ter');
+        if(filterBox) filterBox.style.display = 'none';
+    });
+
+  function enrichCards(data) {
+    cards.forEach(card => {
+      // Normalização para tentar encontrar o projeto no JSON
+      // Remove espaços extras e deixa minúsculo para comparar
+      const cardTitleRaw = card.dataset.title || "";
+      const cardTitle = cardTitleRaw.trim().toLowerCase();
+      
+      const info = data.find(item => {
+        // Tenta bater pelo título do projeto no YAML
+        const jsonTitle = (item.dados_projeto && item.dados_projeto.titulo) ? item.dados_projeto.titulo.trim().toLowerCase() : "";
+        // Tenta bater pelo nome do arquivo (sem extensão)
+        const jsonFile = item.arquivo ? item.arquivo.toLowerCase().replace('.wav', '').replace('.mp3', '') : "";
+        
+        // Estratégia de busca flexível
+        return jsonTitle === cardTitle || jsonTitle.includes(cardTitle) || cardTitle.includes(jsonFile);
+      });
+
+      if (info) {
+        // 1. Salvar Metadados nos atributos HTML para usar nos 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');
+        
+        // Se achou o container do BPM, insere as novas tags logo após
+        if (bpmContainer) {
+            const iaTagsDiv = document.createElement('div');
+            iaTagsDiv.className = "tags is-centered mt-1 mb-3";
+            iaTagsDiv.style.opacity = "0.9";
+            
+            let tagsHtml = '';
+
+            // Tag de Gênero IA
+            if (info.analise_ia.genero_macro && info.analise_ia.genero_macro !== "Unknown") {
+                const genero = info.analise_ia.genero_macro;
+                // Corzinha dinâmica baseada no gênero (opcional)
+                let colorClass = 'is-primary'; 
+                if(genero === 'Electronic') colorClass = 'is-info';
+                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">
+                                🤖 ${genero}
+                             </span>`;
+            }
+
+            // Tag de Tom (Musical Key)
+            if (info.analise_tecnica.tom && info.analise_tecnica.escala) {
+                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;">
+                                🎹 ${nota}${escala}
+                             </span>`;
+            }
+
+            iaTagsDiv.innerHTML = tagsHtml;
+            bpmContainer.appendChild(iaTagsDiv);
+        }
+      } else {
+          // Se não achou dados, marca como desconhecido para filtros
+          card.dataset.genre = "Outros";
+          card.dataset.intensity = -1;
+      }
+    });
+  }
+
+  function createGenreButtons(data) {
+    // Extrai lista única de gêneros encontrados
+    const genres = new Set();
+    data.forEach(item => {
+      if(item.analise_ia && item.analise_ia.genero_macro && item.analise_ia.genero_macro !== "Unknown") {
+        genres.add(item.analise_ia.genero_macro);
+      }
+    });
+
+    // Cria botões HTML
+    const genresArray = Array.from(genres).sort();
+    genresArray.forEach(genre => {
+      const btn = document.createElement('button');
+      btn.className = 'button is-small is-rounded';
+      btn.textContent = genre;
+      btn.dataset.genre = genre;
+      
+      btn.addEventListener('click', () => {
+          // Lógica de Ativação Visual
+          const allBtns = genreContainer.querySelectorAll('.button');
+          allBtns.forEach(b => {
+              b.classList.remove('is-active', 'is-info');
+              // Volta botões inativos para branco
+              if(b !== btn) b.classList.add('is-white'); 
+          });
+          
+          btn.classList.remove('is-white');
+          btn.classList.add('is-active', 'is-info');
+          
+          filterCards(genre);
+      });
+      
+      genreContainer.appendChild(btn);
+    });
+
+    // Re-bind do botão "Todos"
+    const allBtn = genreContainer.querySelector('[data-genre="all"]');
+    allBtn.addEventListener('click', () => {
+        genreContainer.querySelectorAll('.button').forEach(b => b.classList.remove('is-active', 'is-info'));
+        allBtn.classList.add('is-active', 'is-info');
+        filterCards('all');
+    });
+  }
+
+  function filterCards(selectedGenre) {
+    cards.forEach(card => {
+        // Encontra a coluna pai para esconder tudo (layout grid)
+        const column = card.closest('.project-column');
+        const cardGenre = card.dataset.genre;
+
+        if (selectedGenre === 'all' || cardGenre === selectedGenre) {
+            column.style.display = 'block';
+        } else {
+            column.style.display = 'none';
+        }
+    });
+  }
+
+  // Ordenação
+  sortSelect.addEventListener('change', (e) => {
+      const criteria = e.target.value;
+      const columns = Array.from(projectsContainer.children);
+
+      columns.sort((colA, colB) => {
+          const cardA = colA.querySelector('.project-card');
+          const cardB = colB.querySelector('.project-card');
+
+          // Valores padrão caso não tenha dados
+          const intensityA = parseFloat(cardA.dataset.intensity) || 0;
+          const intensityB = parseFloat(cardB.dataset.intensity) || 0;
+          const bpmA = parseFloat(cardA.dataset.bpm_real) || 0;
+          const bpmB = parseFloat(cardB.dataset.bpm_real) || 0;
+
+          // Lógica de comparação
+          if (criteria === 'intensity_desc') return intensityB - intensityA;
+          if (criteria === 'intensity_asc') return intensityA - intensityB;
+          if (criteria === 'bpm_desc') return bpmB - bpmA;
+          if (criteria === 'bpm_asc') return bpmA - bpmB;
+          
+          // Padrão (Ordem alfabética do título original)
+          const titleA = cardA.dataset.title.toLowerCase();
+          const titleB = cardB.dataset.title.toLowerCase();
+          return titleA.localeCompare(titleB);
+      });
+
+      // Re-anexa os elementos na nova ordem
+      columns.forEach(col => projectsContainer.appendChild(col));
   });
 
-  closeButtons.forEach(el => el.addEventListener('click', closeModal));
-  document.addEventListener('keydown', (e) => {
-    if (e.key === "Escape") closeModal();
-  });
 });
-</script>
+</script>