refactor urMusicSection.js to enhance user interaction, optimize Gemini API integration, and improve music recommendation display

Author: CaturSetyono

app/urMusicSection.js

@@ -1,3 +1,6 @@
+// Optimized urMusicSection with working Gemini integration
+// Copy this to replace the existing urMusicSection.js
+
 function urMusicSection() {
   const section = document.createElement("section");
   section.classList.add("urmusic-section", "py-5");
@@ -7,46 +10,23 @@ function urMusicSection() {
                 <div class="col-lg-8">
                     <div class="text-center mb-4">
                         <h2 class="display-3 text-white">urMUSIC <span class="text-accent">AI</span></h2>
-                        <p class="text-white lead">Ceritain mood kamu, sistem akan memproses rekomendasi.</p>
+                        <p class="text-white lead">Ceritain mood kamu biar aku tau lagu yang pas buat kamu. </p
                     </div>
                     
                     <div class="form-container-neo">
-                        <div class="form-header">
-                            <i class="fas fa-terminal me-2"></i> INPUT_PARAMETERS
-                        </div>
+                        
                         <div class="p-4">
                             <form id="moodForm">
                                 <div class="mb-4">
-                                    <label class="label-neo">1. CURRENT MOOD:</label>
-                                    <div class="d-flex flex-wrap gap-2 mt-2">
-                                        ${createRadio('happy', '😊 HAPPY')}
-                                        ${createRadio('sad', '😔 SAD')}
-                                        ${createRadio('energetic', '⚡ ENERGY')}
-                                        ${createRadio('chill', '😌 CHILL')}
-                                        ${createRadio('focused', '🎯 FOCUS')}
-                                    </div>
-                                </div>
-                                
-                                <div class="mb-4">
-                                    <label class="label-neo">2. ACTIVITY:</label>
-                                    <select class="form-select input-neo" id="activity" name="activity">
-                                        <option value="">-- SELECT ACTIVITY --</option>
-                                        <option value="studying">Studying / Nugas</option>
-                                        <option value="coding">Coding</option>
-                                        <option value="working">Working</option>
-                                        <option value="relaxing">Rebahan</option>
-                                        <option value="gaming">Gaming</option>
-                                    </select>
-                                </div>
-                                
-                                <div class="mb-4">
-                                    <label class="label-neo">3. CONTEXT (OPTIONAL):</label>
-                                    <textarea class="form-control input-neo" id="description" rows="2" 
-                                              placeholder="Misal: Lagi error kodingan 100 baris..."></textarea>
+                                    <label class="label-neo">DESCRIBE YOUR MOOD </label>
+                                    <textarea class="form-control input-neo" id="moodDescription" name="moodDescription" rows="4" 
+                                              placeholder="ceritain ajaa gapapa.."
+                                              required></textarea>
+                                    <small class="text-muted mt-2 d-block">💡 Tip: Ceritakan mood, aktivitas, dan preferensi musik kamu secara bebas</small>
                                 </div>
                                 
                                 <button type="submit" class="btn btn-generate w-100">
-                                    INITIALIZE RECOMMENDATION <i class="fas fa-cogs ms-2"></i>
+                                    GENERATE MUSIC RECOMMENDATIONS <i class="fas fa-music ms-2"></i>
                                 </button>
                             </form>
                         </div>
@@ -58,7 +38,7 @@ function urMusicSection() {
                 <div class="row justify-content-center">
                     <div class="col-lg-8">
                         <div class="result-box">
-                            <h3 class="text-center mb-4 bg-black text-white py-2">/// OUTPUT GENERATED</h3>
+                            
                             <div id="recommendationContent"></div>
                             <div class="text-center mt-4">
                                 <button class="btn btn-outline-black" onclick="document.getElementById('moodForm').scrollIntoView()">
@@ -151,6 +131,11 @@ function urMusicSection() {
                 border-color: var(--neo-black);
                 box-shadow: 5px 5px 0px var(--neo-black);
             }
+            
+            .btn-generate:disabled {
+                opacity: 0.7;
+                cursor: not-allowed;
+            }
 
             /* Result Styles */
             .result-box {
@@ -170,6 +155,25 @@ function urMusicSection() {
                 align-items: center;
             }
             
+            .btn-spotify {
+                background: #1db954;
+                color: white;
+                border: 2px solid var(--neo-black);
+                font-weight: bold;
+                padding: 8px 16px;
+                text-decoration: none;
+                border-radius: 0;
+                box-shadow: 3px 3px 0px var(--neo-black);
+                transition: all 0.2s;
+            }
+            
+            .btn-spotify:hover {
+                color: white;
+                background: #1ed760;
+                transform: translate(-2px, -2px);
+                box-shadow: 5px 5px 0px var(--neo-black);
+            }
+            
             .btn-outline-black {
                 border: 3px solid var(--neo-black);
                 font-weight: bold;
@@ -180,10 +184,20 @@ function urMusicSection() {
                 background: var(--neo-black);
                 color: var(--neo-white);
             }
+            
+            .loading-indicator {
+                display: inline-block;
+                animation: spin 1s linear infinite;
+            }
+            
+            @keyframes spin {
+                0% { transform: rotate(0deg); }
+                100% { transform: rotate(360deg); }
+            }
         </style>
     `;
 
-  // Attach Event Listener Logic (Keep existing logic but wrapped safely)
+  // Attach Event Listener
   setTimeout(() => {
     const form = document.getElementById("moodForm");
     if (form) {
@@ -194,62 +208,197 @@ function urMusicSection() {
   return section;
 }
 
-// Helper functions for template
+// Helper function for radio buttons
 function createRadio(value, label) {
-    return `
+  return `
     <input type="radio" class="btn-check" name="mood" id="${value}" value="${value}">
     <label class="btn-radio" for="${value}">${label}</label>
-    `;
+  `;
 }
 
-// --- KEEPING ORIGINAL LOGIC FUNCTIONS ---
-function handleMoodSubmit(e) {
+// Enhanced form submission handler
+async function handleMoodSubmit(e) {
   e.preventDefault();
   const formData = new FormData(e.target);
-  const mood = formData.get("mood");
-  const activity = formData.get("activity");
-  const description = formData.get("description");
+  const moodDescription = formData.get("moodDescription");
 
-  if (!mood) {
-    alert("⚠️ ERROR: PARAMETER 'MOOD' MISSING.");
+  if (!moodDescription || moodDescription.trim().length < 10) {
+    showErrorMessage(
+      "Mohon ceritakan mood dan situasi kamu lebih detail (minimal 10 karakter)"
+    );
     return;
   }
 
-  const recommendation = generateMusicRecommendation(mood, activity, description);
-  displayRecommendation(recommendation);
+  // Enhanced loading state
+  const submitBtn = e.target.querySelector('button[type="submit"]');
+  const originalText = submitBtn.innerHTML;
+  submitBtn.innerHTML =
+    'AI SEDANG BERPIKIR... <i class="loading-indicator fas fa-spinner ms-2"></i>';
+  submitBtn.disabled = true;
+
+  try {
+    const recommendation = await generateMusicRecommendation(moodDescription);
+    displayRecommendation(recommendation);
+  } catch (error) {
+    showErrorMessage(
+      "🤖 AI sedang tidak terhubung. Coba lagi dalam beberapa saat ya!"
+    );
+  } finally {
+    // Restore button state
+    submitBtn.innerHTML = originalText;
+    submitBtn.disabled = false;
+  }
 }
 
-function generateMusicRecommendation(mood, activity, description) {
-  // ... (Logika data lagu sama persis dengan file asli, disingkat biar fit) ...
-  // Anggaplah data lagu di sini masih sama dengan original file
-  const recommendations = {
-    happy: [{ title: "Happy", artist: "Pharrell", reason: "Classic mood booster." }, { title: "Uptown Funk", artist: "Bruno Mars", reason: "Funky beats." }],
-    sad: [{ title: "Glimpse of Us", artist: "Joji", reason: "Deep feelings." }, { title: "Fix You", artist: "Coldplay", reason: "Healing vibes." }],
-    energetic: [{ title: "Centuries", artist: "Fall Out Boy", reason: "Power anthem." }, { title: "Eye of the Tiger", artist: "Survivor", reason: "Gym vibes." }],
-    chill: [{ title: "Location", artist: "Khalid", reason: "Smooth vibes." }, { title: "Weightless", artist: "Marconi Union", reason: "Pure relax." }],
-    focused: [{ title: "Lofi Study", artist: "Lofi Girl", reason: "Concentration." }, { title: "Interstellar", artist: "Hans Zimmer", reason: "Deep focus." }]
-  };
-  
-  let final = recommendations[mood] || recommendations.happy;
-  return { mood, activity, songs: final };
+// Optimized Gemini API integration
+async function generateMusicRecommendation(moodDescription) {
+  const API_KEY = "AIzaSyA3Acf5VYEFtWxVq_8KAhtGDlUibernA9M";
+  const API_URL =
+    "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash:generateContent";
+
+  // Build optimized prompt
+  const prompt = `Berdasarkan deskripsi mood dan situasi berikut: "${moodDescription}"
+
+Berikan 3-5 rekomendasi lagu yang cocok dalam format JSON yang valid:
+{
+  "recommendations": [
+    {
+      "title": "Judul Lagu",
+      "artist": "Nama Artist", 
+      "reason": "Alasan singkat kenapa cocok (max 60 karakter)",
+      "genre": "Genre musik",
+      "spotify_search": "judul lagu artist"
+    }
+  ]
+}
+
+Pastikan lagu-lagu populer dan mudah ditemukan di Spotify. Untuk field spotify_search, gunakan format yang mudah dicari di Spotify.`;
+
+  try {
+    const response = await fetch(`${API_URL}?key=${API_KEY}`, {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify({
+        contents: [
+          {
+            parts: [
+              {
+                text: prompt,
+              },
+            ],
+          },
+        ],
+        generationConfig: {
+          temperature: 0.7,
+          topK: 40,
+          topP: 0.95,
+          maxOutputTokens: 2048,
+        },
+      }),
+    });
+
+    if (!response.ok) {
+      throw new Error(`API Error: ${response.status}`);
+    }
+
+    const data = await response.json();
+
+    // Robust response validation
+    if (
+      !data.candidates ||
+      !data.candidates[0] ||
+      !data.candidates[0].content ||
+      !data.candidates[0].content.parts
+    ) {
+      throw new Error("Invalid response structure from Gemini");
+    }
+
+    const generatedText = data.candidates[0].content.parts[0].text;
+
+    // Enhanced JSON parsing
+    let parsedResponse;
+    try {
+      // Remove markdown code blocks if present
+      const cleanedText = generatedText
+        .replace(/```json\n?|\n?```/g, "")
+        .trim();
+
+      // Try direct parsing first
+      try {
+        parsedResponse = JSON.parse(cleanedText);
+      } catch {
+        // Fallback: extract JSON with regex
+        const jsonMatch = cleanedText.match(/\{[\s\S]*\}/);
+        if (jsonMatch) {
+          parsedResponse = JSON.parse(jsonMatch[0]);
+        } else {
+          throw new Error("No valid JSON found");
+        }
+      }
+
+      // Validate structure
+      if (
+        !parsedResponse.recommendations ||
+        !Array.isArray(parsedResponse.recommendations)
+      ) {
+        throw new Error("Invalid recommendations structure");
+      }
+    } catch (parseError) {
+      throw new Error("Gagal memproses respon AI");
+    }
+
+    return {
+      moodDescription,
+      songs: parsedResponse.recommendations,
+      source: "gemini",
+    };
+  } catch (error) {
+    throw error;
+  }
 }
 
+// Enhanced display function
 function displayRecommendation(rec) {
   const resultDiv = document.getElementById("recommendationResult");
   const contentDiv = document.getElementById("recommendationContent");
 
-  let html = `<p class="lead fw-bold mb-4">DETECTED MOOD: ${rec.mood.toUpperCase()} // ACTIVITY: ${rec.activity ? rec.activity.toUpperCase() : 'N/A'}</p>`;
+  let html = `
+    <div class="d-flex justify-content-between align-items-center mb-4">
+      <div>
+        <p class="lead fw-bold mb-1">REKOMENDASI MUSIK UNTUK KAMU</p>
+        <p class="mb-0 text-muted small">"${rec.moodDescription.substring(
+          0,
+          100
+        )}${rec.moodDescription.length > 100 ? "..." : ""}"</p>
+      </div>
+    </div>
+  `;
 
   rec.songs.forEach((song, idx) => {
+    const spotifyQuery = song.spotify_search || `${song.title} ${song.artist}`;
+    const spotifyUrl = `https://open.spotify.com/search/${encodeURIComponent(
+      spotifyQuery
+    )}`;
+
     html += `
-        <div class="song-item-neo">
-            <div>
-                <div class="fw-bold h5 mb-0">#${idx+1} ${song.title}</div>
-                <div class="small text-muted">${song.artist}</div>
-                <div class="small mt-1 fst-italic">"${song.reason}"</div>
-            </div>
-            <i class="fas fa-play-circle fa-2x"></i>
+      <div class="song-item-neo">
+        <div class="flex-grow-1">
+          <div class="fw-bold h5 mb-1">#${idx + 1} ${song.title}</div>
+          <div class="small text-muted mb-1">oleh ${song.artist}</div>
+          <div class="small fst-italic text-success mb-1">"${song.reason}"</div>
+          ${
+            song.genre ? `<span class="badge bg-dark">${song.genre}</span>` : ""
+          }
         </div>
+        <div class="text-end ms-3">
+          <a href="${spotifyUrl}" target="_blank" class="btn btn-spotify">
+            <i class="fab fa-spotify me-1"></i>
+            Spotify
+          </a>
+        </div>
+      </div>
     `;
   });
 
@@ -258,4 +407,30 @@ function displayRecommendation(rec) {
   resultDiv.scrollIntoView({ behavior: "smooth" });
 }
 
-export default urMusicSection;
+// Error message display function
+function showErrorMessage(message) {
+  const resultDiv = document.getElementById("recommendationResult");
+  const contentDiv = document.getElementById("recommendationContent");
+
+  contentDiv.innerHTML = `
+    <div class="text-center py-5">
+      <div class="mb-3">
+        <i class="fas fa-robot fa-3x text-muted"></i>
+      </div>
+      <h4 class="text-muted">${message}</h4>
+      <p class="text-muted small mt-3">Pastikan koneksi internet stabil dan coba lagi</p>
+    </div>
+  `;
+
+  resultDiv.style.display = "block";
+  resultDiv.scrollIntoView({ behavior: "smooth" });
+}
+
+// Bonus: Music search function (kept for backward compatibility but not used in UI)
+function searchMusic(title, artist) {
+  const query = encodeURIComponent(`${title} ${artist}`);
+  const spotifyUrl = `https://open.spotify.com/search/${query}`;
+  window.open(spotifyUrl, "_blank");
+}
+
+export default urMusicSection;