update

LeoOMaia · Nov 26, 2023 · 8e1cf1f · 8e1cf1f
1 parent c83f3b5
commit 8e1cf1f
Show file tree

Hide file tree

Showing 4 changed files with 123 additions and 36 deletions.
diff --git a/README.md b/README.md
@@ -40,10 +40,10 @@ Rodar ``server.py``, depois rodar ``client.py`` desse jeito: ``python client.py
     kubectl describe pvc <nome do volume>
 ```
 
-## Testando REST_API
+## Testando REST_API/Usando recomendador de musica
 use port-forward para acessar o cluster em PORTS
 ```
-    adicione <ip cluster>:32196
+    adicione <ip cluster>:32197
 ```
 
 ## Acessando o ArgoCD

diff --git a/Rest_API/static/scripts.js b/Rest_API/static/scripts.js
@@ -1,7 +1,8 @@
-let allSongsList = []; // Initialize as an empty array
+let allSongsList = [];
 
-// Fetch songs from the API
-fetch('http://localhost:32197/api/songs')
+let URL = 'http://localhost:32197';
+
+fetch(URL + '/api/songs')
   .then(response => {
     if (!response.ok) {
       throw new Error('Network response was not ok');
@@ -26,12 +27,7 @@ function populateSongsList(songs, listElement) {
   songListDiv.innerHTML = "";
 
   if (songs && Array.isArray(songs)) {
-    const searchValue = document.getElementById("searchInput").value.trim().toLowerCase();
-
-    // Filter songs based on case-insensitive search
-    const filteredSongs = songs.filter(song => song.toLowerCase().includes(searchValue));
-
-    filteredSongs.forEach(song => {
+    songs.forEach(song => {
       const songOption = document.createElement("div");
       songOption.classList.add("song-option");
       songOption.textContent = song;
@@ -76,11 +72,15 @@ const searchInput = document.getElementById("searchInput");
 
 function searchAndUpdate() {
   const searchValue = searchInput.value.trim().toLowerCase();
-  const filteredSongs = allSongsList.filter(song => song.toLowerCase().includes(searchValue));
-  populateSongsList(filteredSongs, "allSongsList");
+  let filteredAllSongs = [];
+  if (searchValue !== '') {
+    filteredAllSongs = allSongsList.filter(song => song.toLowerCase().includes(searchValue));
+  }
+
+  populateSongsList(filteredAllSongs, 'allSongsList');
+  populateSongsList(selectedSongs, 'selectedSongsList');
 }
 
-// Attach debounced search function to the input
 searchInput.addEventListener("input", debounce(searchAndUpdate, 300));
 
 document.getElementById("clearAllBtn").addEventListener("click", () => {
@@ -90,50 +90,72 @@ document.getElementById("clearAllBtn").addEventListener("click", () => {
     populateSongsList(selectedSongs, "selectedSongsList");
   });
 
-// Assume you have a container in your HTML for recommendations with ID 'recommendations-container'
 const recommendationsContainer = document.querySelector('.recommendations-container');
 
 function displayRecommendations(recommendations) {
   const recommendedList = document.getElementById("recommendedPlaylists");
 
-  // Clear previous recommendations
   recommendedList.innerHTML = "";
 
-  // Display new recommendations
   recommendations.forEach(recommendation => {
       const listItem = document.createElement("li");
       listItem.textContent = recommendation;
       recommendedList.appendChild(listItem);
   });
 }
 
-// Event listener for Find Playlist button
+function displayNoRecommendationsMessage() {
+  const recommendedList = document.getElementById("recommendedPlaylists");
+  const noRecommendationsMessage = document.getElementById("noRecommendationsMessage");
+
+  recommendedList.innerHTML = "";
+  noRecommendationsMessage.style.display = "block";
+}
+
+function hideNoRecommendationsMessage() {
+  const noRecommendationsMessage = document.getElementById("noRecommendationsMessage");
+  noRecommendationsMessage.style.display = "none";
+}
+
 document.getElementById("findPlaylistBtn").addEventListener("click", async () => {
   try {
-      const response = await fetch('http://localhost:32197/api/recommend', {
-          method: 'POST',
-          headers: {
-              'Content-Type': 'application/json'
-          },
-          body: JSON.stringify({ songs: selectedSongs })
-      });
+    const response = await fetch(URL + '/api/recommend', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify({ songs: selectedSongs })
+    });
+
+    if (!response.ok) {
+      throw new Error('Network response was not ok');
+    }
 
-      if (!response.ok) {
-          throw new Error('Network response was not ok');
-      }
+    const data = await response.json();
+    const versionElement = document.getElementById("version");
+    const modelDateElement = document.getElementById("modelDate");
 
-      const data = await response.json();
-      console.log('Recommendations:', data.recommended_playlists);
+    if (data.version && data.model_date) {
+      versionElement.textContent = 'Version: ' + data.version;
+      modelDateElement.textContent = 'Model Date: ' + data.model_date;
+    } else {
+      versionElement.textContent = 'Version information not available';
+      modelDateElement.textContent = 'Model date information not available';
+    }
+
+    console.log('Recommendations:', data.recommended_playlists);
 
-      // Update the UI with the recommendations
+    if (data.recommended_playlists.length > 0) {
       displayRecommendations(data.recommended_playlists);
+      hideNoRecommendationsMessage();
+    } else {
+      displayNoRecommendationsMessage();
+    }
   } catch (error) {
-      console.error('Error:', error);
+    console.error('Error:', error);
   }
 });
 
-
-// Debounce function for search input
 function debounce(func, delay) {
   let timeoutId;
   return function () {

diff --git a/Rest_API/static/styles.css b/Rest_API/static/styles.css
@@ -92,6 +92,25 @@ body {
     outline: none;
 }
 
+#addPlaylistBtn {
+    padding: 8px 16px;
+    border: none;
+    border-radius: 4px;
+    background-color: #2196f3;
+    color: white;
+    font-size: 16px;
+    cursor: pointer;
+    transition: background-color 0.3s;
+}
+
+#addPlaylistBtn:hover {
+    background-color: #1976d2;
+}
+
+#addPlaylistBtn:focus {
+    outline: none;
+}
+
 .recommendations-container {
     grid-column: 3 / 4;
     display: flex;
@@ -116,4 +135,44 @@ body {
     padding: 10px;
     text-align: center;
     background-color: #f9f9f9;
+}
+
+.no-recommendations-container {
+    display: none;
+    text-align: center;
+    margin-top: 20px;
+  }
+
+
+.no-recommendations-message {
+    font-style: italic;
+    color: #888;
+    padding: 10px;
+    background-color: #f9f9f9;
+    border: 1px solid #ddd;
+    border-radius: 5px;
+  }
+
+  #noRecommendationsMessage {
+    display: none;
+    margin-top: 10px;
+    padding: 10px;
+    background-color: #f8d7da;
+    color: #721c24;
+    border: 1px solid #f5c6cb;
+    border-radius: 5px;
+  }
+
+.model-info-container {
+    margin-top: 20px;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 5px;
+    background-color: #f8f8f8;
+}
+
+.model-info-container p {
+    margin: 5px 0;
+    font-weight: bold;
+    color: #333;
 }
diff --git a/Rest_API/templates/index.html b/Rest_API/templates/index.html
@@ -10,7 +10,6 @@
         <div class="left-panel">
             <input type="text" id="searchInput" class="search-input" placeholder="Search songs">
             <div id="allSongsList" class="songs-list">
-                <!-- List of all songs will be dynamically populated here -->
             </div>
         </div>
 
@@ -21,14 +20,21 @@ <h3>Selected Songs</h3>
                 <button id="findPlaylistBtn" style="background-color: green;">Find Playlist</button>
             </div>
             <div id="selectedSongsList" class="songs-list">
-                <!-- Selected songs will be dynamically populated here -->
             </div>
         </div>
     </div>
 
     <div class="recommendations-container">
         <h2>Recommended Songs</h2>
         <ul id="recommendedPlaylists"></ul>
+        <div id="noRecommendationsMessage" style="display: none;">
+            <p>Couldn't find any recommended songs based on your selection. Please choose more songs or songs related to each other.</p>
+        </div>
+    </div>
+
+    <div class="model-info-container">
+        <p id="version">Version: </p>
+        <p id="modelDate">Model Date: </p>
     </div>
 
     <script src="../static/scripts.js"></script>