diff --git "a/index.html" "b/index.html"
--- "a/index.html"
+++ "b/index.html"
@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>MusiSync - Music Lyrics & Metadata Explorer</title>
+    <title>AI-Powered Music Discovery Platform</title>
     <style>
         /* Reset and Base Styles */
         * {
@@ -18,18 +18,23 @@
             --bg-secondary: #1a1a1a;
             --bg-tertiary: #2a2a2a;
             --bg-card: #1e1e1e;
+            --bg-ai-panel: #141414;
             --text-primary: #ffffff;
             --text-secondary: #b3b3b3;
             --text-muted: #6b7280;
             --accent-primary: #1db954;
             --accent-secondary: #1ed760;
             --accent-tertiary: #ff6b35;
+            --accent-ai: #8b5cf6;
+            --accent-ai-secondary: #a78bfa;
             --border-color: #333333;
             --shadow: rgba(0, 0, 0, 0.5);
             --gradient-primary: linear-gradient(135deg, #1db954, #1ed760);
             --gradient-secondary: linear-gradient(135deg, #ff6b35, #ff8e53);
+            --gradient-ai: linear-gradient(135deg, #8b5cf6, #a78bfa);
             --glass-bg: rgba(30, 30, 30, 0.8);
             --glass-border: rgba(255, 255, 255, 0.1);
+            --ai-glow: rgba(139, 92, 246, 0.3);
         }
 
         [data-theme="light"] {
@@ -38,18 +43,23 @@
             --bg-secondary: #f8fafc;
             --bg-tertiary: #e2e8f0;
             --bg-card: #ffffff;
+            --bg-ai-panel: #f1f5f9;
             --text-primary: #1a202c;
             --text-secondary: #4a5568;
             --text-muted: #718096;
             --accent-primary: #1db954;
             --accent-secondary: #1ed760;
             --accent-tertiary: #ff6b35;
+            --accent-ai: #8b5cf6;
+            --accent-ai-secondary: #a78bfa;
             --border-color: #e2e8f0;
             --shadow: rgba(0, 0, 0, 0.1);
             --gradient-primary: linear-gradient(135deg, #1db954, #1ed760);
             --gradient-secondary: linear-gradient(135deg, #ff6b35, #ff8e53);
+            --gradient-ai: linear-gradient(135deg, #8b5cf6, #a78bfa);
             --glass-bg: rgba(248, 250, 252, 0.8);
             --glass-border: rgba(0, 0, 0, 0.1);
+            --ai-glow: rgba(139, 92, 246, 0.1);
         }
 
         body {
@@ -62,7 +72,7 @@
             background-image: 
                 radial-gradient(circle at 20% 50%, rgba(29, 185, 84, 0.1) 0%, transparent 50%),
                 radial-gradient(circle at 80% 20%, rgba(255, 107, 53, 0.1) 0%, transparent 50%),
-                radial-gradient(circle at 40% 80%, rgba(29, 231, 96, 0.05) 0%, transparent 50%);
+                radial-gradient(circle at 40% 80%, rgba(139, 92, 246, 0.05) 0%, transparent 50%);
         }
 
         /* Header */
@@ -82,10 +92,52 @@
         .logo {
             font-size: 1.8rem;
             font-weight: 700;
-            background: var(--gradient-primary);
+            background: var(--gradient-ai);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
             background-clip: text;
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+        }
+
+        .ai-badge {
+            background: var(--gradient-ai);
+            color: white;
+            padding: 0.2rem 0.6rem;
+            border-radius: 12px;
+            font-size: 0.7rem;
+            font-weight: 600;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+        }
+
+        .header-controls {
+            display: flex;
+            gap: 1rem;
+            align-items: center;
+        }
+
+        .api-status {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            padding: 0.5rem 1rem;
+            background: var(--bg-card);
+            border-radius: 20px;
+            border: 1px solid var(--border-color);
+            font-size: 0.8rem;
+        }
+
+        .status-indicator {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background: #ef4444;
+        }
+
+        .status-indicator.connected {
+            background: var(--accent-primary);
         }
 
         .theme-toggle {
@@ -107,17 +159,23 @@
             box-shadow: 0 8px 25px var(--shadow);
         }
 
-        /* Container */
-        .container {
-            max-width: 1400px;
+        /* Main Layout */
+        .main-container {
+            max-width: 1600px;
             margin: 0 auto;
             padding: 2rem;
             display: grid;
-            grid-template-columns: 1fr 1fr;
+            grid-template-columns: 1fr 400px;
             gap: 2rem;
             min-height: calc(100vh - 100px);
         }
 
+        .content-area {
+            display: grid;
+            grid-template-rows: auto 1fr;
+            gap: 2rem;
+        }
+
         /* Search Section */
         .search-section {
             background: var(--bg-card);
@@ -129,7 +187,7 @@
         }
 
         .search-section:hover {
-            transform: translateY(-5px);
+            transform: translateY(-2px);
             box-shadow: 0 20px 40px var(--shadow);
         }
 
@@ -144,9 +202,10 @@
         }
 
         .search-form {
-            display: flex;
-            flex-direction: column;
+            display: grid;
+            grid-template-columns: 1fr 1fr auto;
             gap: 1rem;
+            align-items: end;
         }
 
         .input-group {
@@ -177,6 +236,30 @@
             box-shadow: 0 0 0 3px rgba(29, 185, 84, 0.1);
         }
 
+        .search-btn {
+            background: var(--gradient-primary);
+            color: white;
+            border: none;
+            border-radius: 12px;
+            padding: 1rem 2rem;
+            font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            height: fit-content;
+        }
+
+        .search-btn:hover:not(:disabled) {
+            transform: translateY(-2px);
+            box-shadow: 0 8px 25px rgba(29, 185, 84, 0.3);
+        }
+
+        .search-btn:disabled {
+            opacity: 0.6;
+            cursor: not-allowed;
+        }
+
+        /* Autocomplete */
         .autocomplete-dropdown {
             position: absolute;
             top: 100%;
@@ -198,990 +281,1143 @@
             transition: background 0.2s ease;
         }
 
-        .autocomplete-item:hover,
-        .autocomplete-item.selected {
-            background: var(--accent-primary);
-            color: white;
-        }
-
-        .search-btn {
-            background: var(--gradient-primary);
-            color: white;
-            border: none;
-            padding: 1rem 2rem;
-            border-radius: 12px;
-            font-size: 1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            margin-top: 1rem;
-        }
-
-        .search-btn:hover:not(:disabled) {
-            transform: translateY(-2px);
-            box-shadow: 0 8px 25px rgba(29, 185, 84, 0.4);
+        .autocomplete-item:hover {
+            background: var(--bg-secondary);
         }
 
-        .search-btn:disabled {
-            opacity: 0.6;
-            cursor: not-allowed;
+        .autocomplete-item:last-child {
+            border-bottom: none;
         }
 
         /* Results Section */
         .results-section {
-            display: flex;
-            flex-direction: column;
-            gap: 1.5rem;
-        }
-
-        .result-card {
             background: var(--bg-card);
-            border-radius: 16px;
-            padding: 1.5rem;
+            border-radius: 20px;
+            padding: 2rem;
             border: 1px solid var(--border-color);
-            box-shadow: 0 8px 25px var(--shadow);
-            transition: all 0.3s ease;
+            box-shadow: 0 10px 30px var(--shadow);
+            overflow: hidden;
         }
 
-        .result-card:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 15px 35px var(--shadow);
+        .results-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1.5rem;
         }
 
-        .result-card h3 {
-            font-size: 1.2rem;
+        .results-title {
+            font-size: 1.3rem;
             font-weight: 600;
-            margin-bottom: 1rem;
-            color: var(--accent-primary);
         }
 
-        /* Album Art Section */
-        .album-art-card {
-            text-align: center;
+        .song-info {
+            display: grid;
+            grid-template-columns: auto 1fr auto;
+            gap: 1.5rem;
+            align-items: start;
+            margin-bottom: 2rem;
         }
 
         .album-art {
-            width: 100%;
-            max-width: 300px;
-            height: auto;
+            width: 120px;
+            height: 120px;
             border-radius: 12px;
-            box-shadow: 0 10px 30px var(--shadow);
-            transition: transform 0.3s ease;
+            object-fit: cover;
+            border: 1px solid var(--border-color);
+        }
+
+        .song-details h3 {
+            font-size: 1.4rem;
+            font-weight: 700;
+            margin-bottom: 0.5rem;
+        }
+
+        .song-details p {
+            color: var(--text-secondary);
+            margin-bottom: 0.3rem;
         }
 
-        .album-art:hover {
-            transform: scale(1.05);
+        .song-actions {
+            display: flex;
+            flex-direction: column;
+            gap: 0.5rem;
         }
 
-        /* Lyrics Section */
         .lyrics-container {
             max-height: 400px;
             overflow-y: auto;
-            padding: 1rem;
             background: var(--bg-secondary);
-            border-radius: 8px;
+            border-radius: 12px;
+            padding: 1.5rem;
+            border: 1px solid var(--border-color);
+            margin-top: 1rem;
+        }
+
+        .lyrics-text {
             white-space: pre-line;
             line-height: 1.8;
+            color: var(--text-primary);
         }
 
-        .lyrics-container::-webkit-scrollbar {
-            width: 6px;
+        /* AI Panel */
+        .ai-panel {
+            background: var(--bg-ai-panel);
+            border-radius: 20px;
+            padding: 1.5rem;
+            border: 1px solid var(--border-color);
+            box-shadow: 0 10px 30px var(--shadow);
+            position: sticky;
+            top: 120px;
+            max-height: calc(100vh - 140px);
+            overflow-y: auto;
         }
 
-        .lyrics-container::-webkit-scrollbar-track {
-            background: var(--bg-tertiary);
-            border-radius: 3px;
+        .ai-panel-header {
+            display: flex;
+            align-items: center;
+            gap: 0.5rem;
+            margin-bottom: 1.5rem;
         }
 
-        .lyrics-container::-webkit-scrollbar-thumb {
-            background: var(--accent-primary);
-            border-radius: 3px;
+        .ai-panel-title {
+            font-size: 1.2rem;
+            font-weight: 600;
+            background: var(--gradient-ai);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            background-clip: text;
         }
 
-        /* Metadata Grid */
-        .metadata-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
-            gap: 1rem;
+        .ai-icon {
+            font-size: 1.2rem;
         }
 
-        .metadata-item {
-            background: var(--bg-secondary);
+        .api-key-section {
+            background: var(--bg-card);
+            border-radius: 12px;
             padding: 1rem;
+            margin-bottom: 1.5rem;
+            border: 1px solid var(--border-color);
+        }
+
+        .api-key-input {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid var(--border-color);
             border-radius: 8px;
-            text-align: center;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            margin-bottom: 0.5rem;
         }
 
-        .metadata-item .label {
+        .api-key-help {
             font-size: 0.8rem;
             color: var(--text-muted);
-            text-transform: uppercase;
-            letter-spacing: 0.5px;
-            margin-bottom: 0.5rem;
         }
 
-        .metadata-item .value {
-            font-weight: 600;
-            color: var(--text-primary);
+        .api-key-help a {
+            color: var(--accent-ai);
+            text-decoration: none;
         }
 
-        /* Loading States */
-        .loading {
+        .api-key-help a:hover {
+            text-decoration: underline;
+        }
+
+        .ai-features {
+            display: grid;
+            gap: 0.75rem;
+        }
+
+        .ai-feature-btn {
+            background: var(--bg-card);
+            border: 1px solid var(--border-color);
+            border-radius: 12px;
+            padding: 1rem;
+            color: var(--text-primary);
+            cursor: pointer;
+            transition: all 0.3s ease;
+            text-align: left;
+            font-size: 0.9rem;
             display: flex;
             align-items: center;
-            justify-content: center;
-            gap: 0.5rem;
-            color: var(--text-secondary);
+            gap: 0.75rem;
         }
 
-        .spinner {
-            width: 20px;
-            height: 20px;
-            border: 2px solid var(--border-color);
-            border-top: 2px solid var(--accent-primary);
-            border-radius: 50%;
-            animation: spin 1s linear infinite;
+        .ai-feature-btn:hover:not(:disabled) {
+            border-color: var(--accent-ai);
+            box-shadow: 0 4px 15px var(--ai-glow);
+            transform: translateY(-1px);
         }
 
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
+        .ai-feature-btn:disabled {
+            opacity: 0.5;
+            cursor: not-allowed;
         }
 
-        /* Skeleton Loading */
-        .skeleton {
-            background: linear-gradient(90deg, var(--bg-secondary) 25%, var(--bg-tertiary) 50%, var(--bg-secondary) 75%);
-            background-size: 200% 100%;
-            animation: skeleton-loading 1.5s infinite;
-            border-radius: 4px;
+        .ai-feature-btn.active {
+            border-color: var(--accent-ai);
+            background: var(--ai-glow);
         }
 
-        @keyframes skeleton-loading {
-            0% { background-position: 200% 0; }
-            100% { background-position: -200% 0; }
+        .feature-icon {
+            font-size: 1.1rem;
+            width: 24px;
+            text-align: center;
         }
 
-        .skeleton-text {
-            height: 1rem;
-            margin: 0.5rem 0;
+        .feature-text {
+            flex: 1;
         }
 
-        .skeleton-image {
-            width: 100%;
-            height: 200px;
+        .feature-title {
+            font-weight: 600;
+            margin-bottom: 0.2rem;
+        }
+
+        .feature-description {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+        }
+
+        /* AI Response Area */
+        .ai-response-area {
+            margin-top: 1.5rem;
+            display: none;
+        }
+
+        .ai-response-area.active {
+            display: block;
+        }
+
+        .ai-response-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 1rem;
+            padding-bottom: 0.5rem;
+            border-bottom: 1px solid var(--border-color);
+        }
+
+        .ai-response-title {
+            font-weight: 600;
+            font-size: 0.9rem;
         }
 
-        /* Action Buttons */
-        .action-buttons {
+        .response-actions {
             display: flex;
             gap: 0.5rem;
-            margin-top: 1rem;
-            flex-wrap: wrap;
         }
 
         .action-btn {
-            background: var(--bg-secondary);
+            background: none;
             border: 1px solid var(--border-color);
-            color: var(--text-primary);
-            padding: 0.5rem 1rem;
             border-radius: 6px;
-            font-size: 0.9rem;
+            padding: 0.3rem 0.6rem;
+            color: var(--text-secondary);
             cursor: pointer;
-            transition: all 0.3s ease;
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
+            font-size: 0.8rem;
+            transition: all 0.2s ease;
         }
 
         .action-btn:hover {
-            background: var(--accent-primary);
-            color: white;
-            transform: translateY(-1px);
+            border-color: var(--accent-ai);
+            color: var(--accent-ai);
         }
 
-        .action-btn.favorite.active {
+        .action-btn.favorite {
+            border-color: var(--accent-tertiary);
+            color: var(--accent-tertiary);
+        }
+
+        .action-btn.favorite:hover {
             background: var(--accent-tertiary);
             color: white;
         }
 
-        /* Error States */
-        .error {
-            color: #ef4444;
-            background: rgba(239, 68, 68, 0.1);
-            padding: 1rem;
-            border-radius: 8px;
-            border: 1px solid rgba(239, 68, 68, 0.2);
+        .action-btn.favorite.active {
+            background: var(--accent-tertiary);
+            color: white;
         }
 
-        /* Favorites Panel */
-        .favorites-panel {
+        .ai-response-content {
             background: var(--bg-card);
-            border-radius: 16px;
-            padding: 1.5rem;
+            border-radius: 8px;
+            padding: 1rem;
             border: 1px solid var(--border-color);
-            box-shadow: 0 8px 25px var(--shadow);
-            margin-top: 1rem;
+            min-height: 100px;
+            max-height: 300px;
+            overflow-y: auto;
         }
 
-        .favorites-list {
+        .loading-animation {
             display: flex;
-            flex-direction: column;
+            align-items: center;
             gap: 0.5rem;
-            max-height: 200px;
-            overflow-y: auto;
+            color: var(--text-muted);
+            font-style: italic;
         }
 
-        .favorite-item {
-            background: var(--bg-secondary);
-            padding: 0.75rem;
-            border-radius: 6px;
-            cursor: pointer;
-            transition: background 0.2s ease;
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
+        .typing-dots {
+            display: inline-flex;
+            gap: 2px;
         }
 
-        .favorite-item:hover {
-            background: var(--bg-tertiary);
+        .typing-dot {
+            width: 4px;
+            height: 4px;
+            border-radius: 50%;
+            background: var(--accent-ai);
+            animation: typing 1.4s infinite ease-in-out;
         }
 
-        .remove-favorite {
-            color: var(--accent-tertiary);
-            cursor: pointer;
-            font-size: 0.8rem;
+        .typing-dot:nth-child(1) { animation-delay: -0.32s; }
+        .typing-dot:nth-child(2) { animation-delay: -0.16s; }
+
+        @keyframes typing {
+            0%, 80%, 100% { transform: scale(0); opacity: 0.5; }
+            40% { transform: scale(1); opacity: 1; }
         }
 
-        /* Related Songs */
-        .related-songs {
-            display: flex;
-            flex-direction: column;
-            gap: 0.5rem;
+        .streaming-text {
+            white-space: pre-wrap;
+            line-height: 1.6;
         }
 
-        .related-song {
-            background: var(--bg-secondary);
-            padding: 1rem;
-            border-radius: 8px;
-            cursor: pointer;
-            transition: all 0.3s ease;
+        /* Follow-up Chat */
+        .followup-section {
+            margin-top: 1rem;
+            border-top: 1px solid var(--border-color);
+            padding-top: 1rem;
         }
 
-        .related-song:hover {
-            background: var(--bg-tertiary);
-            transform: translateY(-1px);
+        .followup-input {
+            width: 100%;
+            padding: 0.75rem;
+            border: 1px solid var(--border-color);
+            border-radius: 8px;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            font-size: 0.9rem;
+            resize: none;
+            min-height: 60px;
         }
 
-        .related-song-title {
-            font-weight: 600;
-            margin-bottom: 0.25rem;
+        .followup-input:focus {
+            outline: none;
+            border-color: var(--accent-ai);
         }
 
-        .related-song-artist {
-            color: var(--text-secondary);
+        .followup-btn {
+            background: var(--gradient-ai);
+            color: white;
+            border: none;
+            border-radius: 6px;
+            padding: 0.5rem 1rem;
             font-size: 0.9rem;
+            cursor: pointer;
+            margin-top: 0.5rem;
+            width: 100%;
         }
 
-        /* Responsive Design */
-        @media (max-width: 1024px) {
-            .container {
-                grid-template-columns: 1fr;
-                padding: 1rem;
-            }
-            
-            .header {
-                padding: 1rem;
-            }
+        /* Journey Feature */
+        .journey-section {
+            display: none;
+            background: var(--bg-card);
+            border-radius: 12px;
+            padding: 1rem;
+            margin-top: 1rem;
+            border: 1px solid var(--border-color);
         }
 
-        @media (max-width: 768px) {
-            .metadata-grid {
-                grid-template-columns: repeat(2, 1fr);
-            }
-            
-            .action-buttons {
-                justify-content: center;
-            }
+        .journey-section.active {
+            display: block;
         }
 
-        /* Animations */
-        .fade-in {
-            animation: fadeIn 0.5s ease-in;
+        .journey-inputs {
+            display: grid;
+            grid-template-columns: 1fr auto 1fr;
+            gap: 0.5rem;
+            align-items: center;
+            margin-bottom: 1rem;
         }
 
-        @keyframes fadeIn {
-            from { opacity: 0; transform: translateY(10px); }
-            to { opacity: 1; transform: translateY(0); }
+        .journey-input {
+            padding: 0.5rem;
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            background: var(--bg-secondary);
+            color: var(--text-primary);
+            font-size: 0.8rem;
         }
 
-        .slide-in {
-            animation: slideIn 0.3s ease-out;
+        .journey-arrow {
+            text-align: center;
+            color: var(--accent-ai);
+            font-weight: bold;
         }
 
-        @keyframes slideIn {
-            from { transform: translateX(-20px); opacity: 0; }
-            to { transform: translateX(0); opacity: 1; }
+        /* Export Options */
+        .export-section {
+            margin-top: 1rem;
+            padding-top: 1rem;
+            border-top: 1px solid var(--border-color);
         }
 
-        /* Custom scrollbar */
-        ::-webkit-scrollbar {
-            width: 8px;
+        .export-buttons {
+            display: grid;
+            grid-template-columns: 1fr 1fr 1fr;
+            gap: 0.5rem;
         }
 
-        ::-webkit-scrollbar-track {
+        .export-btn {
             background: var(--bg-secondary);
+            border: 1px solid var(--border-color);
+            border-radius: 6px;
+            padding: 0.5rem;
+            color: var(--text-primary);
+            cursor: pointer;
+            font-size: 0.8rem;
+            transition: all 0.2s ease;
         }
 
-        ::-webkit-scrollbar-thumb {
+        .export-btn:hover {
+            border-color: var(--accent-primary);
             background: var(--accent-primary);
-            border-radius: 4px;
+            color: white;
         }
 
-        ::-webkit-scrollbar-thumb:hover {
-            background: var(--accent-secondary);
-        }
+        /* Responsive Design */
+        @media (max-width: 1200px) {
+            .main-container {
+                grid-template-columns: 1fr;
+                gap: 1.5rem;
+            }
 
-        /* Focus styles for accessibility */
-        button:focus-visible,
-        input:focus-visible {
-            outline: 2px solid var(--accent-primary);
-            outline-offset: 2px;
+            .ai-panel {
+                position: static;
+                max-height: none;
+            }
         }
 
-        /* Hidden state */
-        .hidden {
-            display: none !important;
+        @media (max-width: 768px) {
+            .main-container {
+                padding: 1rem;
+            }
+
+            .search-form {
+                grid-template-columns: 1fr;
+            }
+
+            .song-info {
+                grid-template-columns: 1fr;
+                text-align: center;
+            }
+
+            .album-art {
+                justify-self: center;
+            }
         }
 
         /* Notification */
         .notification {
             position: fixed;
-            top: 100px;
+            top: 20px;
             right: 20px;
             background: var(--bg-card);
             border: 1px solid var(--border-color);
             border-radius: 8px;
-            padding: 1rem;
-            box-shadow: 0 8px 25px var(--shadow);
+            padding: 1rem 1.5rem;
+            box-shadow: 0 10px 30px var(--shadow);
             z-index: 1000;
-            animation: slideInRight 0.3s ease-out;
-            max-width: 300px;
+            transform: translateX(100%);
+            transition: transform 0.3s ease;
         }
 
-        @keyframes slideInRight {
-            from { transform: translateX(100%); }
-            to { transform: translateX(0); }
+        .notification.show {
+            transform: translateX(0);
         }
 
         .notification.success {
-            border-left: 4px solid var(--accent-primary);
+            border-color: var(--accent-primary);
+            background: rgba(29, 185, 84, 0.1);
         }
 
         .notification.error {
-            border-left: 4px solid #ef4444;
+            border-color: #ef4444;
+            background: rgba(239, 68, 68, 0.1);
+        }
+
+        /* Loading States */
+        .loading {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem;
+            color: var(--text-muted);
+            font-style: italic;
+        }
+
+        .spinner {
+            width: 20px;
+            height: 20px;
+            border: 2px solid var(--border-color);
+            border-top: 2px solid var(--accent-primary);
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+            margin-right: 0.5rem;
+        }
+
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+
+        /* Utility Classes */
+        .hidden {
+            display: none !important;
+        }
+
+        .fade-in {
+            animation: fadeIn 0.3s ease;
+        }
+
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+
+        .slide-in {
+            animation: slideIn 0.3s ease;
+        }
+
+        @keyframes slideIn {
+            from { transform: translateX(-20px); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
         }
     </style>
 </head>
 <body>
+    <!-- Header -->
     <header class="header">
-        <div class="logo">🎵 MusiSync</div>
-        <button class="theme-toggle" id="themeToggle">
-            <span id="themeIcon">🌙</span>
-            <span id="themeText">Dark Mode</span>
-        </button>
+        <div class="logo">
+            <span>🎵 AI Music Discovery</span>
+            <span class="ai-badge">AI Powered</span>
+        </div>
+        <div class="header-controls">
+            <div class="api-status">
+                <div class="status-indicator" id="apiStatus"></div>
+                <span id="apiStatusText">API Disconnected</span>
+            </div>
+            <button class="theme-toggle" id="themeToggle">
+                <span id="themeIcon">🌙</span>
+                <span id="themeText">Dark Mode</span>
+            </button>
+        </div>
     </header>
 
-    <div class="container">
-        <!-- Search Section -->
-        <div class="search-section">
-            <h2 class="search-title">Search Music</h2>
-            <form class="search-form" id="searchForm">
-                <div class="input-group">
-                    <label for="artistInput">Artist Name</label>
-                    <input type="text" id="artistInput" placeholder="Enter artist name..." autocomplete="off">
-                    <div class="autocomplete-dropdown" id="artistDropdown"></div>
-                </div>
-                <div class="input-group">
-                    <label for="songInput">Song Title</label>
-                    <input type="text" id="songInput" placeholder="Enter song title..." autocomplete="off">
-                    <div class="autocomplete-dropdown" id="songDropdown"></div>
-                </div>
-                <button type="submit" class="search-btn" id="searchBtn">
-                    <span id="searchBtnText">Search</span>
-                </button>
-            </form>
-
-            <!-- Favorites Panel -->
-            <div class="favorites-panel">
-                <h3>❤️ Favorites</h3>
-                <div class="favorites-list" id="favoritesList">
-                    <div class="loading" id="favoritesEmpty">No favorites yet. Search for songs and add them to your favorites!</div>
+    <!-- Main Container -->
+    <div class="main-container">
+        <!-- Content Area -->
+        <div class="content-area">
+            <!-- Search Section -->
+            <section class="search-section">
+                <h2 class="search-title">🎵 Music Search</h2>
+                <form class="search-form" id="searchForm">
+                    <div class="input-group">
+                        <label for="artistInput">Artist</label>
+                        <input type="text" id="artistInput" placeholder="Enter artist name..." autocomplete="off">
+                        <div class="autocomplete-dropdown" id="artistAutocomplete"></div>
+                    </div>
+                    <div class="input-group">
+                        <label for="songInput">Song</label>
+                        <input type="text" id="songInput" placeholder="Enter song title..." autocomplete="off">
+                        <div class="autocomplete-dropdown" id="songAutocomplete"></div>
+                    </div>
+                    <button type="submit" class="search-btn" id="searchBtn">
+                        <span id="searchBtnText">Search</span>
+                    </button>
+                </form>
+            </section>
+
+            <!-- Results Section -->
+            <section class="results-section" id="resultsSection" style="display: none;">
+                <div class="results-header">
+                    <h3 class="results-title">Search Results</h3>
+                    <div class="response-actions">
+                        <button class="action-btn favorite" id="favoriteBtn">❤️ Add to Favorites</button>
+                        <button class="action-btn" id="downloadBtn">⬇️ Download</button>
+                    </div>
                 </div>
-            </div>
+                <div id="resultsContent"></div>
+            </section>
         </div>
 
-        <!-- Results Section -->
-        <div class="results-section" id="resultsSection">
-            <!-- Album Art Card -->
-            <div class="result-card album-art-card hidden" id="albumArtCard">
-                <h3>🎨 Album Artwork</h3>
-                <img class="album-art" id="albumArt" alt="Album artwork">
-                <div class="action-buttons">
-                    <button class="action-btn" id="downloadArt">📥 Download</button>
-                    <button class="action-btn" id="shareArt">🔗 Share</button>
-                </div>
+        <!-- AI Panel -->
+        <aside class="ai-panel">
+            <div class="ai-panel-header">
+                <span class="ai-icon">🤖</span>
+                <h3 class="ai-panel-title">AI Music Intelligence</h3>
             </div>
 
-            <!-- Song Info Card -->
-            <div class="result-card hidden" id="songInfoCard">
-                <h3>🎵 Song Information</h3>
-                <div class="metadata-grid" id="songMetadata"></div>
-                <div class="action-buttons">
-                    <button class="action-btn favorite" id="favoriteBtn">❤️ Add to Favorites</button>
-                    <button class="action-btn" id="shareBtn">🔗 Share</button>
+            <!-- API Key Section -->
+            <div class="api-key-section">
+                <input type="password" class="api-key-input" id="apiKeyInput" 
+                       placeholder="Enter your Hugging Face API key..." />
+                <div class="api-key-help">
+                    Get your free API key from <a href="https://huggingface.co/settings/tokens" target="_blank">Hugging Face</a>
                 </div>
             </div>
 
-            <!-- Artist Info Card -->
-            <div class="result-card hidden" id="artistInfoCard">
-                <h3>👤 Artist Information</h3>
-                <div id="artistInfo"></div>
+            <!-- AI Features -->
+            <div class="ai-features">
+                <button class="ai-feature-btn" id="feature-playlist" data-feature="playlist" disabled>
+                    <span class="feature-icon">📋</span>
+                    <div class="feature-text">
+                        <div class="feature-title">Generate Similar Playlist</div>
+                        <div class="feature-description">Create 10-15 song playlist with explanations</div>
+                    </div>
+                </button>
+
+                <button class="ai-feature-btn" id="feature-recommendations" data-feature="recommendations" disabled>
+                    <span class="feature-icon">🎯</span>
+                    <div class="feature-text">
+                        <div class="feature-title">Song Recommendations</div>
+                        <div class="feature-description">Get 5 similar tracks with reasoning</div>
+                    </div>
+                </button>
+
+                <button class="ai-feature-btn" id="feature-meaning" data-feature="meaning" disabled>
+                    <span class="feature-icon">📝</span>
+                    <div class="feature-text">
+                        <div class="feature-title">Analyze Song Meaning</div>
+                        <div class="feature-description">Interpret lyrics and themes</div>
+                    </div>
+                </button>
+
+                <button class="ai-feature-btn" id="feature-twins" data-feature="twins" disabled>
+                    <span class="feature-icon">👯</span>
+                    <div class="feature-text">
+                        <div class="feature-title">Find Audio Twins</div>
+                        <div class="feature-description">Songs with similar sound/production</div>
+                    </div>
+                </button>
+
+                <button class="ai-feature-btn" id="feature-journey" data-feature="journey" disabled>
+                    <span class="feature-icon">🛤️</span>
+                    <div class="feature-text">
+                        <div class="feature-title">Musical Journey</div>
+                        <div class="feature-description">Progression between two songs</div>
+                    </div>
+                </button>
+
+                <button class="ai-feature-btn" id="feature-influences" data-feature="influences" disabled>
+                    <span class="feature-icon">🌳</span>
+                    <div class="feature-text">
+                        <div class="feature-title">Explore Artist Influences</div>
+                        <div class="feature-description">Map musical influences and history</div>
+                    </div>
+                </button>
+
+                <button class="ai-feature-btn" id="feature-mood" data-feature="mood" disabled>
+                    <span class="feature-icon">💭</span>
+                    <div class="feature-text">
+                        <div class="feature-title">Mood & Vibe Analysis</div>
+                        <div class="feature-description">Emotional characteristics and contexts</div>
+                    </div>
+                </button>
+
+                <button class="ai-feature-btn" id="feature-evolution" data-feature="evolution" disabled>
+                    <span class="feature-icon">🔄</span>
+                    <div class="feature-text">
+                        <div class="feature-title">Genre Evolution</div>
+                        <div class="feature-description">Historical genre development timeline</div>
+                    </div>
+                </button>
             </div>
 
-            <!-- Lyrics Card -->
-            <div class="result-card hidden" id="lyricsCard">
-                <h3>📝 Lyrics</h3>
-                <div class="lyrics-container" id="lyricsContent"></div>
-                <div class="action-buttons">
-                    <button class="action-btn" id="downloadLyrics">📥 Download Lyrics</button>
-                    <button class="action-btn" id="shareLyrics">🔗 Share</button>
+            <!-- Journey Feature Special Section -->
+            <div class="journey-section" id="journeySection">
+                <h4 style="margin-bottom: 0.5rem; font-size: 0.9rem;">Musical Journey Setup</h4>
+                <div class="journey-inputs">
+                    <input type="text" class="journey-input" id="journeyStart" placeholder="Start song...">
+                    <div class="journey-arrow">→</div>
+                    <input type="text" class="journey-input" id="journeyEnd" placeholder="End song...">
                 </div>
             </div>
 
-            <!-- Related Songs Card -->
-            <div class="result-card hidden" id="relatedSongsCard">
-                <h3>🎶 Related Songs</h3>
-                <div class="related-songs" id="relatedSongs"></div>
+            <!-- AI Response Area -->
+            <div class="ai-response-area" id="aiResponseArea">
+                <div class="ai-response-header">
+                    <div class="ai-response-title" id="responseTitle">AI Response</div>
+                    <div class="response-actions">
+                        <button class="action-btn" id="copyBtn">📋 Copy</button>
+                        <button class="action-btn" id="clearBtn">🗑️ Clear</button>
+                    </div>
+                </div>
+                <div class="ai-response-content" id="aiResponseContent">
+                    <div class="loading-animation hidden" id="loadingAnimation">
+                        <div class="typing-dots">
+                            <span class="typing-dot"></span>
+                            <span class="typing-dot"></span>
+                            <span class="typing-dot"></span>
+                        </div>
+                        <span>AI is thinking...</span>
+                    </div>
+                    <div class="streaming-text" id="streamingText"></div>
+                </div>
+
+                <!-- Follow-up Section -->
+                <div class="followup-section">
+                    <textarea class="followup-input" id="followupInput" 
+                              placeholder="Ask a follow-up question about this song..."></textarea>
+                    <button class="followup-btn" id="followupBtn">Ask Follow-up</button>
+                </div>
+
+                <!-- Export Section -->
+                <div class="export-section">
+                    <div class="export-buttons">
+                        <button class="export-btn" onclick="exportResponse('txt')">Export TXT</button>
+                        <button class="export-btn" onclick="exportResponse('json')">Export JSON</button>
+                        <button class="export-btn" onclick="exportResponse('pdf')">Export PDF</button>
+                    </div>
+                </div>
             </div>
-        </div>
+        </aside>
     </div>
 
+    <!-- Notification -->
+    <div class="notification" id="notification"></div>
+
     <script>
-        // Global App State
-        const AppState = {
-            currentSearch: null,
-            cache: new Map(),
-            favorites: JSON.parse(localStorage.getItem('musicapp_favorites') || '[]'),
-            theme: localStorage.getItem('musicapp_theme') || 'dark',
-            searchHistory: JSON.parse(localStorage.getItem('musicapp_history') || '[]')
-        };
-
-        // API Configuration
-        const API_CONFIG = {
-            // Note: Replace with your actual API keys in production
-            lastfm: {
-                key: 'demo_key_replace_with_yours',
-                baseUrl: 'https://ws.audioscrobbler.com/2.0/'
-            },
-            musicbrainz: {
-                baseUrl: 'https://musicbrainz.org/ws/2/',
-                userAgent: 'MusiSync/1.0 (https://your-app.com)'
-            },
-            coverart: {
-                baseUrl: 'https://coverartarchive.org/'
-            },
-            lyrics: {
-                baseUrl: 'https://api.lyrics.ovh/v1/'
-            },
-            itunes: {
-                baseUrl: 'https://itunes.apple.com/'
-            }
-        };
+        // Application State Management
+        class AppState {
+            static currentSong = null;
+            static currentLyrics = null;
+            static apiKey = localStorage.getItem('hf_api_key') || '';
+            static theme = localStorage.getItem('musicapp_theme') || 'dark';
+            static favorites = JSON.parse(localStorage.getItem('musicapp_favorites') || '[]');
+            static conversationHistory = [];
+            static currentFeature = null;
+        }
 
         // Utility Functions
         class Utils {
-            static debounce(func, wait) {
-                let timeout;
-                return function executedFunction(...args) {
-                    const later = () => {
-                        clearTimeout(timeout);
-                        func(...args);
-                    };
-                    clearTimeout(timeout);
-                    timeout = setTimeout(later, wait);
-                };
-            }
-
-            static sanitizeQuery(query) {
-                return query.trim().replace(/[^\w\s-]/g, '').substring(0, 100);
-            }
-
-            static formatDuration(ms) {
-                if (!ms) return 'Unknown';
-                const minutes = Math.floor(ms / 60000);
-                const seconds = ((ms % 60000) / 1000).toFixed(0);
-                return `${minutes}:${seconds.padStart(2, '0')}`;
-            }
-
-            static formatDate(dateString) {
-                if (!dateString) return 'Unknown';
-                return new Date(dateString).toLocaleDateString();
-            }
-
             static showNotification(message, type = 'success') {
-                const notification = document.createElement('div');
-                notification.className = `notification ${type}`;
+                const notification = document.getElementById('notification');
+                if (!notification) return;
+                
                 notification.textContent = message;
-                document.body.appendChild(notification);
+                notification.className = `notification ${type} show`;
                 
                 setTimeout(() => {
-                    notification.remove();
+                    notification.classList.remove('show');
                 }, 3000);
             }
 
-            static downloadFile(content, filename, type = 'text/plain') {
-                const blob = new Blob([content], { type });
-                const url = URL.createObjectURL(blob);
-                const a = document.createElement('a');
-                a.href = url;
-                a.download = filename;
-                a.click();
-                URL.revokeObjectURL(url);
+            static sanitizeHtml(str) {
+                const div = document.createElement('div');
+                div.textContent = str;
+                return div.innerHTML;
             }
 
-            static getCacheKey(type, params) {
-                return `${type}_${Object.values(params).join('_')}`;
+            static formatDuration(seconds) {
+                if (!seconds) return 'Unknown';
+                const mins = Math.floor(seconds / 60);
+                const secs = seconds % 60;
+                return `${mins}:${secs.toString().padStart(2, '0')}`;
             }
 
-            static getCachedData(key, maxAge = 24 * 60 * 60 * 1000) { // 24 hours default
-                const cached = AppState.cache.get(key);
-                if (!cached) return null;
-                
-                if (Date.now() - cached.timestamp > maxAge) {
-                    AppState.cache.delete(key);
-                    return null;
-                }
-                
-                return cached.data;
+            static truncateText(text, maxLength) {
+                if (!text || text.length <= maxLength) return text;
+                return text.substr(0, maxLength) + '...';
             }
 
-            static setCachedData(key, data) {
-                AppState.cache.set(key, {
-                    data,
-                    timestamp: Date.now()
-                });
+            static async delay(ms) {
+                return new Promise(resolve => setTimeout(resolve, ms));
             }
-        }
-
-        // API Service Classes
-        class LyricsService {
-            static async fetchLyrics(artist, title) {
-                const cacheKey = Utils.getCacheKey('lyrics', { artist, title });
-                const cached = Utils.getCachedData(cacheKey);
-                if (cached) return cached;
 
+            static downloadFile(content, filename, type = 'text/plain') {
                 try {
-                    // Primary: Lyrics.ovh
-                    const response = await fetch(`${API_CONFIG.lyrics.baseUrl}${encodeURIComponent(artist)}/${encodeURIComponent(title)}`);
-                    
-                    if (response.ok) {
-                        const data = await response.json();
-                        Utils.setCachedData(cacheKey, data.lyrics);
-                        return data.lyrics;
-                    }
+                    const blob = new Blob([content], { type });
+                    const url = URL.createObjectURL(blob);
+                    const a = document.createElement('a');
+                    a.href = url;
+                    a.download = filename;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                    URL.revokeObjectURL(url);
                 } catch (error) {
-                    console.warn('Lyrics.ovh failed:', error);
+                    console.error('Download error:', error);
+                    Utils.showNotification('Download failed', 'error');
                 }
-
-                // Fallback: Mock lyrics for demo
-                const mockLyrics = `Lyrics for "${title}" by ${artist} are not available.
-
-This is a demo application. In a production environment, you would:
-1. Use authenticated APIs like Genius or Musixmatch
-2. Implement proper error handling
-3. Add retry mechanisms
-4. Consider legal aspects of lyrics distribution
-
-For now, enjoy exploring the metadata and album artwork features!`;
-                
-                Utils.setCachedData(cacheKey, mockLyrics);
-                return mockLyrics;
             }
         }
 
-        class MetadataService {
-            static async fetchFromMusicBrainz(artist, title) {
-                const cacheKey = Utils.getCacheKey('mb_search', { artist, title });
-                const cached = Utils.getCachedData(cacheKey);
-                if (cached) return cached;
+        // Music API Integration
+        class MusicAPIController {
+            static async searchLyrics(artist, song) {
+                try {
+                    const response = await fetch(`https://api.lyrics.ovh/v1/${encodeURIComponent(artist)}/${encodeURIComponent(song)}`);
+                    if (!response.ok) throw new Error('Lyrics not found');
+                    const data = await response.json();
+                    return data.lyrics;
+                } catch (error) {
+                    console.warn('Lyrics API error:', error);
+                    return null;
+                }
+            }
 
+            static async searchMetadata(artist, song) {
                 try {
-                    await this.rateLimitDelay(); // Respect MusicBrainz rate limit
+                    const query = `${encodeURIComponent(song)} AND artist:${encodeURIComponent(artist)}`;
+                    const response = await fetch(`https://musicbrainz.org/ws/2/recording?query=${query}&fmt=json&limit=1`);
                     
-                    const query = encodeURIComponent(`artist:"${artist}" AND recording:"${title}"`);
-                    const url = `${API_CONFIG.musicbrainz.baseUrl}recording?query=${query}&fmt=json&limit=5`;
+                    if (!response.ok) throw new Error('Metadata not found');
+                    const data = await response.json();
                     
-                    const response = await fetch(url, {
-                        headers: {
-                            'User-Agent': API_CONFIG.musicbrainz.userAgent,
-                            'Accept': 'application/json'
-                        }
-                    });
-
-                    if (response.ok) {
-                        const data = await response.json();
-                        Utils.setCachedData(cacheKey, data);
-                        return data;
+                    if (data.recordings && data.recordings.length > 0) {
+                        const recording = data.recordings[0];
+                        return {
+                            title: recording.title,
+                            artist: recording['artist-credit']?.[0]?.name || artist,
+                            length: recording.length ? Math.round(recording.length / 1000) : null,
+                            disambiguation: recording.disambiguation,
+                            releaseDate: recording['first-release-date'],
+                            genres: recording.tags?.map(tag => tag.name) || []
+                        };
                     }
+                    return null;
                 } catch (error) {
-                    console.warn('MusicBrainz API failed:', error);
+                    console.warn('Metadata API error:', error);
+                    return null;
                 }
-
-                return null;
             }
 
-            static async fetchFromLastFm(artist, title) {
-                const cacheKey = Utils.getCacheKey('lastfm_track', { artist, title });
-                const cached = Utils.getCachedData(cacheKey);
-                if (cached) return cached;
-
+            static async searchCoverArt(artist, song) {
                 try {
-                    // Using JSONP for cross-origin requests
-                    const data = await this.jsonpRequest(
-                        `${API_CONFIG.lastfm.baseUrl}?method=track.getInfo&api_key=${API_CONFIG.lastfm.key}&artist=${encodeURIComponent(artist)}&track=${encodeURIComponent(title)}&format=json`
-                    );
+                    const term = `${artist} ${song}`.replace(/\s+/g, '+');
+                    const response = await fetch(`https://itunes.apple.com/search?term=${term}&media=music&limit=1`);
+                    
+                    if (!response.ok) throw new Error('Cover art not found');
+                    const data = await response.json();
                     
-                    Utils.setCachedData(cacheKey, data);
-                    return data;
+                    if (data.results && data.results.length > 0) {
+                        return data.results[0].artworkUrl100?.replace('100x100', '600x600');
+                    }
+                    return 'https://via.placeholder.com/300x300/1e1e1e/666666?text=No+Image';
                 } catch (error) {
-                    console.warn('Last.fm API failed:', error);
+                    console.warn('Cover art API error:', error);
+                    return 'https://via.placeholder.com/300x300/1e1e1e/666666?text=No+Image';
                 }
-
-                return null;
             }
 
-            static async fetchFromItunes(artist, title) {
-                const cacheKey = Utils.getCacheKey('itunes_search', { artist, title });
-                const cached = Utils.getCachedData(cacheKey);
-                if (cached) return cached;
-
+            static async autocompleteArtist(query) {
                 try {
-                    // iTunes Search API supports JSONP
-                    const query = encodeURIComponent(`${artist} ${title}`);
-                    const data = await this.jsonpRequest(
-                        `${API_CONFIG.itunes.baseUrl}search?term=${query}&entity=song&limit=5`
-                    );
-                    
-                    Utils.setCachedData(cacheKey, data);
-                    return data;
+                    if (query.length < 2) return [];
+                    const response = await fetch(`https://musicbrainz.org/ws/2/artist?query=${encodeURIComponent(query)}&fmt=json&limit=5`);
+                    if (!response.ok) return [];
+                    const data = await response.json();
+                    return data.artists?.map(artist => artist.name) || [];
                 } catch (error) {
-                    console.warn('iTunes API failed:', error);
+                    console.warn('Autocomplete error:', error);
+                    return [];
                 }
-
-                return null;
             }
+        }
 
-            static jsonpRequest(url) {
-                return new Promise((resolve, reject) => {
-                    const callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
-                    const script = document.createElement('script');
-                    
-                    window[callbackName] = function(data) {
-                        delete window[callbackName];
-                        document.body.removeChild(script);
-                        resolve(data);
-                    };
-                    
-                    script.src = url + (url.includes('?') ? '&' : '?') + 'callback=' + callbackName;
-                    script.onerror = () => {
-                        delete window[callbackName];
-                        document.body.removeChild(script);
-                        reject(new Error('JSONP request failed'));
-                    };
-                    
-                    document.body.appendChild(script);
-                    
-                    // Timeout after 10 seconds
-                    setTimeout(() => {
-                        if (window[callbackName]) {
-                            delete window[callbackName];
-                            document.body.removeChild(script);
-                            reject(new Error('JSONP request timeout'));
-                        }
-                    }, 10000);
-                });
+        // Hugging Face AI Integration
+        class AIController {
+            static baseUrl = 'https://api-inference.huggingface.co/models/';
+            static model = 'mistralai/Mistral-7B-Instruct-v0.2';
+            static abortController = null;
+
+            static getHeaders() {
+                return {
+                    'Authorization': `Bearer ${AppState.apiKey}`,
+                    'Content-Type': 'application/json'
+                };
             }
 
-            static rateLimitDelay() {
-                // MusicBrainz requires 1 request per second
-                return new Promise(resolve => setTimeout(resolve, 1000));
+            static async testConnection() {
+                if (!AppState.apiKey) return false;
+                
+                try {
+                    const response = await fetch(this.baseUrl + this.model, {
+                        method: 'POST',
+                        headers: this.getHeaders(),
+                        body: JSON.stringify({
+                            inputs: 'Hello',
+                            parameters: { max_new_tokens: 1 }
+                        })
+                    });
+                    return response.ok;
+                } catch (error) {
+                    return false;
+                }
             }
-        }
 
-        class ArtworkService {
-            static async fetchAlbumArt(mbid, spotifyUrl, lastfmUrl, itunesUrl) {
-                // Primary: Cover Art Archive (highest quality)
-                if (mbid) {
-                    try {
-                        const response = await fetch(`${API_CONFIG.coverart.baseUrl}release/${mbid}`);
-                        if (response.ok) {
-                            const data = await response.json();
-                            if (data.images && data.images.length > 0) {
-                                return data.images[0].thumbnails?.large || data.images[0].image;
+            static async streamQuery(prompt, onToken, onComplete, onError) {
+                if (!AppState.apiKey) {
+                    onError('Please enter your Hugging Face API key');
+                    return;
+                }
+
+                // Cancel previous request
+                if (this.abortController) {
+                    this.abortController.abort();
+                }
+                this.abortController = new AbortController();
+
+                try {
+                    const response = await fetch(this.baseUrl + this.model, {
+                        method: 'POST',
+                        headers: this.getHeaders(),
+                        body: JSON.stringify({
+                            inputs: prompt,
+                            parameters: {
+                                max_new_tokens: 800,
+                                temperature: 0.7,
+                                stream: true
+                            },
+                            stream: true
+                        }),
+                        signal: this.abortController.signal
+                    });
+
+                    if (!response.ok) {
+                        throw new Error(`API Error: ${response.status} ${response.statusText}`);
+                    }
+
+                    const reader = response.body.getReader();
+                    const decoder = new TextDecoder();
+                    let buffer = '';
+
+                    while (true) {
+                        const { done, value } = await reader.read();
+                        if (done) break;
+
+                        buffer += decoder.decode(value, { stream: true });
+                        const lines = buffer.split('\n');
+                        buffer = lines.pop() || '';
+
+                        for (const line of lines) {
+                            if (line.startsWith('data: ')) {
+                                try {
+                                    const data = JSON.parse(line.slice(6));
+                                    if (data.token?.text) {
+                                        onToken(data.token.text);
+                                    }
+                                } catch (e) {
+                                    // Ignore JSON parse errors
+                                }
                             }
                         }
-                    } catch (error) {
-                        console.warn('Cover Art Archive failed:', error);
                     }
-                }
 
-                // Fallback order: Spotify, iTunes, Last.fm
-                const fallbacks = [spotifyUrl, itunesUrl, lastfmUrl].filter(Boolean);
-                
-                for (const url of fallbacks) {
-                    if (await this.isImageAccessible(url)) {
-                        return url;
+                    onComplete();
+                } catch (error) {
+                    if (error.name !== 'AbortError') {
+                        onError(error.message);
                     }
                 }
-
-                return this.getDefaultArtwork();
             }
 
-            static async isImageAccessible(url) {
-                try {
-                    const response = await fetch(url, { method: 'HEAD' });
-                    return response.ok;
-                } catch {
-                    return false;
-                }
-            }
+            // AI Feature Prompt Generators
+            static generateSimilarPlaylist(song, artist) {
+                return `You are a music expert with deep knowledge of all genres and styles. Generate a playlist of 10 songs similar to "${song}" by "${artist}".
 
-            static getDefaultArtwork() {
-                // Generate a beautiful default artwork using CSS gradients
-                const canvas = document.createElement('canvas');
-                canvas.width = 300;
-                canvas.height = 300;
-                const ctx = canvas.getContext('2d');
-                
-                // Create gradient
-                const gradient = ctx.createLinearGradient(0, 0, 300, 300);
-                gradient.addColorStop(0, '#1db954');
-                gradient.addColorStop(0.5, '#1ed760');
-                gradient.addColorStop(1, '#ff6b35');
-                
-                ctx.fillStyle = gradient;
-                ctx.fillRect(0, 0, 300, 300);
-                
-                // Add music note
-                ctx.fillStyle = 'rgba(255, 255, 255, 0.7)';
-                ctx.font = 'bold 80px Arial';
-                ctx.textAlign = 'center';
-                ctx.fillText('🎵', 150, 180);
-                
-                return canvas.toDataURL();
+For each song, provide a brief explanation of why it was chosen.
+
+**Playlist:**
+1. [Song] by [Artist] - [Explanation]
+2. [Song] by [Artist] - [Explanation]
+3. [Song] by [Artist] - [Explanation]
+4. [Song] by [Artist] - [Explanation]
+5. [Song] by [Artist] - [Explanation]
+6. [Song] by [Artist] - [Explanation]
+7. [Song] by [Artist] - [Explanation]
+8. [Song] by [Artist] - [Explanation]
+9. [Song] by [Artist] - [Explanation]
+10. [Song] by [Artist] - [Explanation]
+
+Focus on musical similarity, thematic connections, and overall vibe.`;
             }
-        }
 
-        // UI Controller Classes
-        class SearchController {
-            constructor() {
-                this.initElements();
-                this.bindEvents();
-                this.setupAutocomplete();
+            static getSongRecommendations(song, artist) {
+                return `You are a music recommendation engine. Provide 5 song recommendations similar to "${song}" by "${artist}".
+
+**5 Songs Similar to "${song}" by ${artist}:**
+
+1. **[Song] by [Artist]**: [Detailed reasoning about musical similarities]
+2. **[Song] by [Artist]**: [Detailed reasoning about musical similarities]
+3. **[Song] by [Artist]**: [Detailed reasoning about musical similarities]
+4. **[Song] by [Artist]**: [Detailed reasoning about musical similarities]
+5. **[Song] by [Artist]**: [Detailed reasoning about musical similarities]
+
+Explain specific musical elements that make each recommendation fitting.`;
             }
 
-            initElements() {
-                this.form = document.getElementById('searchForm');
-                this.artistInput = document.getElementById('artistInput');
-                this.songInput = document.getElementById('songInput');
-                this.searchBtn = document.getElementById('searchBtn');
-                this.searchBtnText = document.getElementById('searchBtnText');
+            static analyzeSongMeaning(song, artist, lyrics) {
+                return `You are a music analyst and literary critic. Analyze the meaning of "${song}" by "${artist}".
+
+${lyrics ? `**Lyrics:**\n${lyrics.substring(0, 1000)}${lyrics.length > 1000 ? '...' : ''}` : ''}
+
+**Song Analysis:**
+
+Provide a detailed interpretation covering:
+- Central themes and messages
+- Literary devices and metaphors used
+- Emotional tone and mood
+- Cultural or historical context
+- Artistic significance
+
+Write in an engaging, insightful style.`;
             }
 
-            bindEvents() {
-                this.form.addEventListener('submit', this.handleSearch.bind(this));
-                
-                // Debounced autocomplete
-                const debouncedAutocomplete = Utils.debounce(this.handleAutocomplete.bind(this), 300);
-                this.artistInput.addEventListener('input', debouncedAutocomplete);
-                this.songInput.addEventListener('input', debouncedAutocomplete);
+            static findAudioTwins(song, artist) {
+                return `You are a music producer and audio engineer. Find 3 "audio twins" for "${song}" by "${artist}".
+
+Identify songs that have similar:
+- Production style and techniques
+- Instrumentation and arrangement
+- Sound texture and atmosphere
+- Recording quality and era
+
+**Audio Twins for "${song}" by ${artist}:**
+
+1. **[Song] by [Artist]**
+   - Production similarities: [Explain specific production elements]
+   - Sonic characteristics: [Describe sound qualities]
+
+2. **[Song] by [Artist]**
+   - Production similarities: [Explain specific production elements]
+   - Sonic characteristics: [Describe sound qualities]
+
+3. **[Song] by [Artist]**
+   - Production similarities: [Explain specific production elements]
+   - Sonic characteristics: [Describe sound qualities]`;
             }
 
-            setupAutocomplete() {
-                // Implement autocomplete based on search history
-                [this.artistInput, this.songInput].forEach(input => {
-                    input.addEventListener('focus', () => this.showAutocomplete(input));
-                    input.addEventListener('blur', () => {
-                        // Delay hiding to allow clicking on suggestions
-                        setTimeout(() => this.hideAutocomplete(input), 200);
-                    });
-                });
+            static createMusicalJourney(startSong, startArtist, endSong, endArtist) {
+                return `You are a DJ and music curator. Create a musical journey of 5 songs that smoothly transitions from "${startSong}" by "${startArtist}" to "${endSong}" by "${endArtist}".
+
+**Musical Journey: ${startSong} → ${endSong}**
+
+1. **[Song] by [Artist]** - [Why this connects to the starting song]
+2. **[Song] by [Artist]** - [How this bridges the musical gap]
+3. **[Song] by [Artist]** - [The transition point in the journey]
+4. **[Song] by [Artist]** - [Moving closer to the destination]
+5. **[Song] by [Artist]** - [The final bridge to the ending song]
+
+Explain the musical logic behind each transition.`;
             }
 
-            async handleSearch(e) {
-                e.preventDefault();
-                
-                const artist = Utils.sanitizeQuery(this.artistInput.value);
-                const song = Utils.sanitizeQuery(this.songInput.value);
-                
-                if (!artist || !song) {
-                    Utils.showNotification('Please enter both artist and song title', 'error');
-                    return;
-                }
+            static exploreArtistInfluences(artist) {
+                return `You are a music historian. Explore the musical influences of "${artist}".
 
-                this.setLoading(true);
-                
-                try {
-                    AppState.currentSearch = { artist, song };
-                    this.addToHistory(artist, song);
-                    
-                    // Start all API calls simultaneously
-                    const [lyrics, metadata, artwork] = await Promise.allSettled([
-                        LyricsService.fetchLyrics(artist, song),
-                        this.fetchAllMetadata(artist, song),
-                        this.fetchArtworkFromMultipleSources(artist, song)
-                    ]);
+**Musical Influences of ${artist}:**
 
-                    // Update UI with results
-                    if (lyrics.status === 'fulfilled') {
-                        resultsController.displayLyrics(lyrics.value);
-                    }
-                    
-                    if (metadata.status === 'fulfilled') {
-                        resultsController.displayMetadata(metadata.value);
-                    }
-                    
-                    if (artwork.status === 'fulfilled') {
-                        resultsController.displayArtwork(artwork.value);
-                    }
+Analyze:
+- Key artists and bands that influenced their sound
+- Genres and musical movements that shaped them
+- How these influences manifest in their music
+- Artists they've inspired in return
+- Their place in music history
 
-                    Utils.showNotification('Search completed successfully!');
-                    
-                } catch (error) {
-                    console.error('Search failed:', error);
-                    Utils.showNotification('Search failed. Please try again.', 'error');
-                } finally {
-                    this.setLoading(false);
-                }
+Provide specific examples and explain how listeners can hear these influences.`;
             }
 
-            async fetchAllMetadata(artist, song) {
-                const results = await Promise.allSettled([
-                    MetadataService.fetchFromMusicBrainz(artist, song),
-                    MetadataService.fetchFromLastFm(artist, song),
-                    MetadataService.fetchFromItunes(artist, song)
-                ]);
+            static analyzeMoodAndVibe(song, artist) {
+                return `You are a music psychologist. Analyze the mood and vibe of "${song}" by "${artist}".
 
-                // Combine results from multiple sources
-                const metadata = {
-                    musicbrainz: results[0].status === 'fulfilled' ? results[0].value : null,
-                    lastfm: results[1].status === 'fulfilled' ? results[1].value : null,
-                    itunes: results[2].status === 'fulfilled' ? results[2].value : null
-                };
+**Mood & Vibe Analysis for "${song}":**
 
-                return this.normalizeMetadata(metadata, artist, song);
-            }
-
-            normalizeMetadata(sources, artist, song) {
-                const normalized = {
-                    title: song,
-                    artist: artist,
-                    album: 'Unknown',
-                    duration: null,
-                    releaseDate: 'Unknown',
-                    genre: 'Unknown',
-                    popularity: null,
-                    playCount: null,
-                    mbid: null,
-                    artworkUrls: {}
-                };
+Describe:
+- Primary emotions and feelings evoked
+- Overall atmosphere and ambiance
+- Energy level and intensity
+- Situational contexts where this fits
+- Activities or moments this soundtracks
+- Psychological impact on listeners
 
-                // Extract data from MusicBrainz
-                if (sources.musicbrainz?.recordings?.length > 0) {
-                    const record = sources.musicbrainz.recordings[0];
-                    normalized.mbid = record.id;
-                    normalized.duration = record.length;
-                    
-                    if (record.releases?.length > 0) {
-                        normalized.album = record.releases[0].title;
-                        normalized.releaseDate = record.releases[0].date;
-                    }
-                    
-                    if (record.tags?.length > 0) {
-                        normalized.genre = record.tags[0].name;
-                    }
-                }
+What situations would this song be the perfect soundtrack for?`;
+            }
 
-                // Extract data from Last.fm
-                if (sources.lastfm?.track) {
-                    const track = sources.lastfm.track;
-                    normalized.playCount = track.playcount;
-                    normalized.album = track.album?.title || normalized.album;
-                    
-                    if (track.toptags?.tag?.length > 0) {
-                        normalized.genre = track.toptags.tag[0].name;
-                    }
-                    
-                    if (track.album?.image) {
-                        normalized.artworkUrls.lastfm = track.album.image.find(img => img.size === 'large')?.['#text'];
-                    }
-                }
+            static analyzeGenreEvolution(song, artist, genre) {
+                return `You are a musicologist. Analyze how "${song}" by "${artist}" fits into the evolution of its genre.
 
-                // Extract data from iTunes
-                if (sources.itunes?.results?.length > 0) {
-                    const track = sources.itunes.results[0];
-                    normalized.album = track.collectionName || normalized.album;
-                    normalized.duration = track.trackTimeMillis;
-                    normalized.releaseDate = track.releaseDate;
-                    normalized.genre = track.primaryGenreName || normalized.genre;
-                    normalized.artworkUrls.itunes = track.artworkUrl100?.replace('100x100', '600x600');
-                }
+**Genre Evolution Analysis:**
+
+1. **Historical Context:**
+   - Origins and early development of the genre
+   - Key evolutionary periods and milestones
 
-                return normalized;
+2. **Song's Place in Evolution:**
+   - Where "${song}" fits in the timeline
+   - What it represents in the genre's development
+   - Innovative elements or traditional aspects
+
+3. **Musical Characteristics:**
+   - Genre-defining elements present in the song
+   - How it adheres to or breaks conventions
+
+Trace the genre's journey and highlight this song's significance.`;
             }
+        }
 
-            async fetchArtworkFromMultipleSources(artist, song) {
-                // Get artwork URLs from metadata first
-                const metadata = await this.fetchAllMetadata(artist, song);
-                
-                return await ArtworkService.fetchAlbumArt(
-                    metadata.mbid,
-                    null, // Spotify URL would go here
-                    metadata.artworkUrls.lastfm,
-                    metadata.artworkUrls.itunes
-                );
+        // Search Controller
+        class SearchController {
+            constructor() {
+                this.searchForm = document.getElementById('searchForm');
+                this.artistInput = document.getElementById('artistInput');
+                this.songInput = document.getElementById('songInput');
+                this.searchBtn = document.getElementById('searchBtn');
+                this.searchBtnText = document.getElementById('searchBtnText');
+
+                this.bindEvents();
+                this.setupAutocomplete();
             }
 
-            handleAutocomplete(e) {
-                const input = e.target;
-                const value = input.value.trim();
-                
-                if (value.length < 2) {
-                    this.hideAutocomplete(input);
-                    return;
+            bindEvents() {
+                if (this.searchForm) {
+                    this.searchForm.addEventListener('submit', this.handleSearch.bind(this));
                 }
-
-                const suggestions = this.getSuggestions(input.id, value);
-                this.showSuggestions(input, suggestions);
             }
 
-            getSuggestions(inputType, value) {
-                const field = inputType === 'artistInput' ? 'artist' : 'song';
-                const history = AppState.searchHistory;
+            setupAutocomplete() {
+                let autocompleteTimeout;
                 
-                return history
-                    .map(entry => entry[field])
-                    .filter(item => item.toLowerCase().includes(value.toLowerCase()))
-                    .filter((item, index, arr) => arr.indexOf(item) === index) // Remove duplicates
-                    .slice(0, 5);
+                if (this.artistInput) {
+                    this.artistInput.addEventListener('input', (e) => {
+                        clearTimeout(autocompleteTimeout);
+                        autocompleteTimeout = setTimeout(async () => {
+                            if (e.target.value.length >= 2) {
+                                const suggestions = await MusicAPIController.autocompleteArtist(e.target.value);
+                                this.showAutocomplete('artist', suggestions);
+                            } else {
+                                this.hideAutocomplete('artist');
+                            }
+                        }, 300);
+                    });
+
+                    this.artistInput.addEventListener('blur', () => {
+                        setTimeout(() => this.hideAutocomplete('artist'), 200);
+                    });
+                }
             }
 
-            showSuggestions(input, suggestions) {
-                const dropdown = input.nextElementSibling;
+            showAutocomplete(type, suggestions) {
+                const dropdown = document.getElementById(`${type}Autocomplete`);
+                if (!dropdown) return;
+
                 dropdown.innerHTML = '';
                 
                 if (suggestions.length === 0) {
-                    this.hideAutocomplete(input);
+                    dropdown.style.display = 'none';
                     return;
                 }
 
@@ -1190,9 +1426,11 @@ For now, enjoy exploring the metadata and album artwork features!`;
                     item.className = 'autocomplete-item';
                     item.textContent = suggestion;
                     item.addEventListener('click', () => {
-                        input.value = suggestion;
-                        this.hideAutocomplete(input);
-                        input.focus();
+                        const input = document.getElementById(`${type}Input`);
+                        if (input) {
+                            input.value = suggestion;
+                            this.hideAutocomplete(type);
+                        }
                     });
                     dropdown.appendChild(item);
                 });
@@ -1200,352 +1438,449 @@ For now, enjoy exploring the metadata and album artwork features!`;
                 dropdown.style.display = 'block';
             }
 
-            showAutocomplete(input) {
-                if (input.value.length >= 2) {
-                    this.handleAutocomplete({ target: input });
+            hideAutocomplete(type) {
+                const dropdown = document.getElementById(`${type}Autocomplete`);
+                if (dropdown) {
+                    dropdown.style.display = 'none';
                 }
             }
 
-            hideAutocomplete(input) {
-                const dropdown = input.nextElementSibling;
-                dropdown.style.display = 'none';
-            }
-
-            addToHistory(artist, song) {
-                const entry = { artist, song, timestamp: Date.now() };
-                AppState.searchHistory = [entry, ...AppState.searchHistory.filter(
-                    h => !(h.artist === artist && h.song === song)
-                )].slice(0, 50); // Keep last 50 searches
+            async handleSearch(e) {
+                e.preventDefault();
                 
-                localStorage.setItem('musicapp_history', JSON.stringify(AppState.searchHistory));
+                const artist = this.artistInput?.value?.trim() || '';
+                const song = this.songInput?.value?.trim() || '';
+
+                if (!artist || !song) {
+                    Utils.showNotification('Please enter both artist and song', 'error');
+                    return;
+                }
+
+                this.setLoading(true);
+
+                try {
+                    // Search for lyrics, metadata, and cover art
+                    const [lyrics, metadata, coverArt] = await Promise.all([
+                        MusicAPIController.searchLyrics(artist, song),
+                        MusicAPIController.searchMetadata(artist, song),
+                        MusicAPIController.searchCoverArt(artist, song)
+                    ]);
+
+                    const songData = {
+                        artist,
+                        song,
+                        lyrics,
+                        metadata,
+                        coverArt
+                    };
+
+                    AppState.currentSong = songData;
+                    AppState.currentLyrics = lyrics;
+
+                    window.resultsController?.displayResults(songData);
+                    window.aiController?.enableFeatures();
+                    
+                    Utils.showNotification('Song found! You can now use AI features.', 'success');
+                } catch (error) {
+                    console.error('Search error:', error);
+                    Utils.showNotification('Search failed. Please try again.', 'error');
+                } finally {
+                    this.setLoading(false);
+                }
             }
 
-            setLoading(isLoading) {
-                this.searchBtn.disabled = isLoading;
-                this.searchBtnText.textContent = isLoading ? 'Searching...' : 'Search';
-                
-                if (isLoading) {
-                    this.searchBtn.innerHTML = '<div class="spinner"></div> Searching...';
-                } else {
-                    this.searchBtn.innerHTML = 'Search';
+            setLoading(loading) {
+                if (this.searchBtn) {
+                    this.searchBtn.disabled = loading;
+                }
+                if (this.searchBtnText) {
+                    this.searchBtnText.textContent = loading ? 'Searching...' : 'Search';
                 }
             }
         }
 
+        // Results Controller
         class ResultsController {
             constructor() {
-                this.initElements();
-                this.bindEvents();
-            }
+                this.resultsSection = document.getElementById('resultsSection');
+                this.resultsContent = document.getElementById('resultsContent');
+                this.favoriteBtn = document.getElementById('favoriteBtn');
+                this.downloadBtn = document.getElementById('downloadBtn');
 
-            initElements() {
-                this.albumArtCard = document.getElementById('albumArtCard');
-                this.albumArt = document.getElementById('albumArt');
-                this.songInfoCard = document.getElementById('songInfoCard');
-                this.songMetadata = document.getElementById('songMetadata');
-                this.artistInfoCard = document.getElementById('artistInfoCard');
-                this.artistInfo = document.getElementById('artistInfo');
-                this.lyricsCard = document.getElementById('lyricsCard');
-                this.lyricsContent = document.getElementById('lyricsContent');
-                this.relatedSongsCard = document.getElementById('relatedSongsCard');
-                this.relatedSongs = document.getElementById('relatedSongs');
+                this.bindEvents();
             }
 
             bindEvents() {
-                // Favorite button
-                document.getElementById('favoriteBtn').addEventListener('click', this.handleFavorite.bind(this));
-                
-                // Download buttons
-                document.getElementById('downloadLyrics').addEventListener('click', this.downloadLyrics.bind(this));
-                document.getElementById('downloadArt').addEventListener('click', this.downloadArtwork.bind(this));
-                
-                // Share buttons
-                document.getElementById('shareBtn').addEventListener('click', this.shareTrack.bind(this));
-                document.getElementById('shareLyrics').addEventListener('click', this.shareLyrics.bind(this));
-                document.getElementById('shareArt').addEventListener('click', this.shareArtwork.bind(this));
-            }
-
-            displayLyrics(lyrics) {
-                this.lyricsContent.textContent = lyrics;
-                this.showCard(this.lyricsCard);
+                if (this.favoriteBtn) {
+                    this.favoriteBtn.addEventListener('click', this.toggleFavorite.bind(this));
+                }
+                if (this.downloadBtn) {
+                    this.downloadBtn.addEventListener('click', this.downloadLyrics.bind(this));
+                }
             }
 
-            displayMetadata(metadata) {
-                this.songMetadata.innerHTML = '';
-                
-                const fields = [
-                    { label: 'Title', value: metadata.title },
-                    { label: 'Artist', value: metadata.artist },
-                    { label: 'Album', value: metadata.album },
-                    { label: 'Duration', value: Utils.formatDuration(metadata.duration) },
-                    { label: 'Release Date', value: Utils.formatDate(metadata.releaseDate) },
-                    { label: 'Genre', value: metadata.genre },
-                    { label: 'Play Count', value: metadata.playCount ? metadata.playCount.toLocaleString() : 'N/A' }
-                ];
-
-                fields.forEach(field => {
-                    const item = document.createElement('div');
-                    item.className = 'metadata-item';
-                    item.innerHTML = `
-                        <div class="label">${field.label}</div>
-                        <div class="value">${field.value}</div>
+            displayResults(songData) {
+                const { artist, song, lyrics, metadata, coverArt } = songData;
+
+                if (this.resultsContent) {
+                    this.resultsContent.innerHTML = `
+                        <div class="song-info fade-in">
+                            <img src="${coverArt}" alt="Album Art" class="album-art" 
+                                 onerror="this.src='https://via.placeholder.com/300x300/1e1e1e/666666?text=No+Image'">
+                            <div class="song-details">
+                                <h3>${Utils.sanitizeHtml(song)}</h3>
+                                <p><strong>Artist:</strong> ${Utils.sanitizeHtml(artist)}</p>
+                                ${metadata?.length ? `<p><strong>Duration:</strong> ${Utils.formatDuration(metadata.length)}</p>` : ''}
+                                ${metadata?.releaseDate ? `<p><strong>Released:</strong> ${metadata.releaseDate}</p>` : ''}
+                                ${metadata?.genres?.length ? `<p><strong>Genres:</strong> ${metadata.genres.join(', ')}</p>` : ''}
+                            </div>
+                            <div class="song-actions">
+                                ${this.renderFavoriteButton()}
+                            </div>
+                        </div>
+                        ${lyrics ? `
+                            <div class="lyrics-container fade-in">
+                                <h4 style="margin-bottom: 1rem; color: var(--accent-primary);">Lyrics</h4>
+                                <div class="lyrics-text">${Utils.sanitizeHtml(lyrics)}</div>
+                            </div>
+                        ` : `
+                            <div class="lyrics-container fade-in">
+                                <div class="loading">Lyrics not available for this song</div>
+                            </div>
+                        `}
                     `;
-                    this.songMetadata.appendChild(item);
-                });
-
-                this.showCard(this.songInfoCard);
-                
-                // Update favorite button state
-                this.updateFavoriteButton();
-            }
+                }
 
-            displayArtwork(artworkUrl) {
-                this.albumArt.src = artworkUrl;
-                this.albumArt.alt = `Album artwork for ${AppState.currentSearch?.song || 'Unknown'}`;
-                this.showCard(this.albumArtCard);
+                if (this.resultsSection) {
+                    this.resultsSection.style.display = 'block';
+                    this.resultsSection.scrollIntoView({ behavior: 'smooth' });
+                }
             }
 
-            displayArtistInfo(artistData) {
-                // Mock artist info for demo
-                this.artistInfo.innerHTML = `
-                    <div class="metadata-grid">
-                        <div class="metadata-item">
-                            <div class="label">Artist</div>
-                            <div class="value">${AppState.currentSearch?.artist || 'Unknown'}</div>
-                        </div>
-                        <div class="metadata-item">
-                            <div class="label">Followers</div>
-                            <div class="value">-</div>
-                        </div>
-                        <div class="metadata-item">
-                            <div class="label">Monthly Listeners</div>
-                            <div class="value">-</div>
-                        </div>
-                        <div class="metadata-item">
-                            <div class="label">Top Genre</div>
-                            <div class="value">-</div>
-                        </div>
-                    </div>
-                    <p style="margin-top: 1rem; color: var(--text-secondary);">
-                        Artist information would be fetched from Spotify or Last.fm APIs in a production environment.
-                    </p>
+            renderFavoriteButton() {
+                const isFavorite = this.isFavorite();
+                return `
+                    <button class="action-btn favorite ${isFavorite ? 'active' : ''}" id="favoriteBtn">
+                        ${isFavorite ? '❤️ Favorited' : '🤍 Add to Favorites'}
+                    </button>
                 `;
-                this.showCard(this.artistInfoCard);
-            }
-
-            displayRelatedSongs() {
-                // Mock related songs for demo
-                const mockSongs = [
-                    { title: 'Related Song 1', artist: 'Similar Artist' },
-                    { title: 'Related Song 2', artist: 'Another Artist' },
-                    { title: 'Related Song 3', artist: 'Different Artist' }
-                ];
-
-                this.relatedSongs.innerHTML = '';
-                mockSongs.forEach(song => {
-                    const songElement = document.createElement('div');
-                    songElement.className = 'related-song';
-                    songElement.innerHTML = `
-                        <div class="related-song-title">${song.title}</div>
-                        <div class="related-song-artist">${song.artist}</div>
-                    `;
-                    songElement.addEventListener('click', () => {
-                        document.getElementById('artistInput').value = song.artist;
-                        document.getElementById('songInput').value = song.title;
-                        Utils.showNotification(`Filled in "${song.title}" by ${song.artist}`);
-                    });
-                    this.relatedSongs.appendChild(songElement);
-                });
-
-                this.showCard(this.relatedSongsCard);
             }
 
-            showCard(card) {
-                card.classList.remove('hidden');
-                card.classList.add('fade-in');
+            isFavorite() {
+                if (!AppState.currentSong) return false;
+                const key = `${AppState.currentSong.artist}_${AppState.currentSong.song}`;
+                return AppState.favorites.some(fav => fav.key === key);
             }
 
-            hideAllCards() {
-                [this.albumArtCard, this.songInfoCard, this.artistInfoCard, this.lyricsCard, this.relatedSongsCard]
-                    .forEach(card => card.classList.add('hidden'));
-            }
+            toggleFavorite() {
+                if (!AppState.currentSong) return;
 
-            handleFavorite() {
-                if (!AppState.currentSearch) return;
+                const { artist, song } = AppState.currentSong;
+                const key = `${artist}_${song}`;
+                const favoriteIndex = AppState.favorites.findIndex(fav => fav.key === key);
 
-                const { artist, song } = AppState.currentSearch;
-                const favoriteKey = `${artist}_${song}`;
-                const favoriteBtn = document.getElementById('favoriteBtn');
-                
-                const existingIndex = AppState.favorites.findIndex(fav => fav.key === favoriteKey);
-                
-                if (existingIndex >= 0) {
-                    // Remove from favorites
-                    AppState.favorites.splice(existingIndex, 1);
-                    favoriteBtn.classList.remove('active');
-                    favoriteBtn.innerHTML = '❤️ Add to Favorites';
+                if (favoriteIndex >= 0) {
+                    AppState.favorites.splice(favoriteIndex, 1);
                     Utils.showNotification('Removed from favorites');
                 } else {
-                    // Add to favorites
-                    AppState.favorites.push({
-                        key: favoriteKey,
+                    AppState.favorites.unshift({
+                        key,
                         artist,
                         song,
                         timestamp: Date.now()
                     });
-                    favoriteBtn.classList.add('active');
-                    favoriteBtn.innerHTML = '💔 Remove from Favorites';
                     Utils.showNotification('Added to favorites');
                 }
 
                 localStorage.setItem('musicapp_favorites', JSON.stringify(AppState.favorites));
-                favoritesController.updateFavoritesList();
+                this.updateFavoriteButton();
             }
 
             updateFavoriteButton() {
-                if (!AppState.currentSearch) return;
-
-                const { artist, song } = AppState.currentSearch;
-                const favoriteKey = `${artist}_${song}`;
                 const favoriteBtn = document.getElementById('favoriteBtn');
-                const isFavorite = AppState.favorites.some(fav => fav.key === favoriteKey);
-                
-                if (isFavorite) {
-                    favoriteBtn.classList.add('active');
-                    favoriteBtn.innerHTML = '💔 Remove from Favorites';
-                } else {
-                    favoriteBtn.classList.remove('active');
-                    favoriteBtn.innerHTML = '❤️ Add to Favorites';
+                if (favoriteBtn) {
+                    const isFavorite = this.isFavorite();
+                    favoriteBtn.textContent = isFavorite ? '❤️ Favorited' : '🤍 Add to Favorites';
+                    favoriteBtn.classList.toggle('active', isFavorite);
                 }
             }
 
             downloadLyrics() {
-                if (!AppState.currentSearch) return;
-                
-                const lyrics = this.lyricsContent.textContent;
-                const filename = `${AppState.currentSearch.artist} - ${AppState.currentSearch.song} - Lyrics.txt`;
-                Utils.downloadFile(lyrics, filename);
-                Utils.showNotification('Lyrics downloaded!');
+                if (!AppState.currentSong?.lyrics) {
+                    Utils.showNotification('No lyrics available to download', 'error');
+                    return;
+                }
+
+                const { artist, song, lyrics } = AppState.currentSong;
+                const content = `${song} - ${artist}\n\nLyrics:\n\n${lyrics}`;
+                const filename = `${artist} - ${song} - Lyrics.txt`;
+                Utils.downloadFile(content, filename);
+                Utils.showNotification('Lyrics downloaded');
             }
+        }
 
-            downloadArtwork() {
-                if (!this.albumArt.src) return;
-                
-                const link = document.createElement('a');
-                link.href = this.albumArt.src;
-                link.download = `${AppState.currentSearch?.artist || 'Unknown'} - ${AppState.currentSearch?.song || 'Unknown'} - Artwork.jpg`;
-                link.click();
-                Utils.showNotification('Artwork download started!');
+        // AI Panel Controller
+        class AIPanelController {
+            constructor() {
+                this.apiKeyInput = document.getElementById('apiKeyInput');
+                this.apiStatus = document.getElementById('apiStatus');
+                this.apiStatusText = document.getElementById('apiStatusText');
+                this.aiResponseArea = document.getElementById('aiResponseArea');
+                this.responseTitle = document.getElementById('responseTitle');
+                this.aiResponseContent = document.getElementById('aiResponseContent');
+                this.streamingText = document.getElementById('streamingText');
+                this.loadingAnimation = document.getElementById('loadingAnimation');
+                this.followupInput = document.getElementById('followupInput');
+                this.followupBtn = document.getElementById('followupBtn');
+                this.journeySection = document.getElementById('journeySection');
+                this.journeyStart = document.getElementById('journeyStart');
+                this.journeyEnd = document.getElementById('journeyEnd');
+
+                this.initializeAPIKey();
+                this.bindEvents();
+                this.bindFeatureButtons();
             }
 
-            shareTrack() {
-                if (!AppState.currentSearch) return;
-                
-                const { artist, song } = AppState.currentSearch;
-                const shareText = `Check out "${song}" by ${artist}! 🎵`;
-                
-                if (navigator.share) {
-                    navigator.share({
-                        title: 'MusiSync',
-                        text: shareText,
-                        url: window.location.href
-                    });
-                } else {
-                    navigator.clipboard.writeText(shareText);
-                    Utils.showNotification('Track info copied to clipboard!');
+            initializeAPIKey() {
+                if (AppState.apiKey && this.apiKeyInput) {
+                    this.apiKeyInput.value = AppState.apiKey;
+                    this.testAPIConnection();
                 }
             }
 
-            shareLyrics() {
-                if (!AppState.currentSearch) return;
-                
-                const lyrics = this.lyricsContent.textContent;
-                const shareText = `🎵 "${AppState.currentSearch.song}" by ${AppState.currentSearch.artist}\n\n${lyrics}`;
+            bindEvents() {
+                if (this.apiKeyInput) {
+                    this.apiKeyInput.addEventListener('input', this.handleAPIKeyChange.bind(this));
+                }
+                if (this.followupBtn) {
+                    this.followupBtn.addEventListener('click', this.handleFollowup.bind(this));
+                }
+
+                // Response actions
+                const copyBtn = document.getElementById('copyBtn');
+                const clearBtn = document.getElementById('clearBtn');
                 
-                if (navigator.share) {
-                    navigator.share({
-                        title: 'Song Lyrics',
-                        text: shareText
-                    });
-                } else {
-                    navigator.clipboard.writeText(shareText);
-                    Utils.showNotification('Lyrics copied to clipboard!');
+                if (copyBtn) {
+                    copyBtn.addEventListener('click', this.copyResponse.bind(this));
+                }
+                if (clearBtn) {
+                    clearBtn.addEventListener('click', this.clearResponse.bind(this));
                 }
             }
 
-            shareArtwork() {
-                if (!this.albumArt.src) return;
-                
-                if (navigator.share) {
-                    navigator.share({
-                        title: 'Album Artwork',
-                        text: `Album artwork for "${AppState.currentSearch?.song}" by ${AppState.currentSearch?.artist}`,
-                        url: this.albumArt.src
+            bindFeatureButtons() {
+                document.querySelectorAll('.ai-feature-btn').forEach(btn => {
+                    btn.addEventListener('click', (e) => {
+                        const feature = e.currentTarget.dataset.feature;
+                        this.handleFeatureClick(feature, e.currentTarget);
                     });
+                });
+            }
+
+            async handleAPIKeyChange(e) {
+                AppState.apiKey = e.target.value;
+                localStorage.setItem('hf_api_key', AppState.apiKey);
+                
+                if (AppState.apiKey) {
+                    await this.testAPIConnection();
                 } else {
-                    navigator.clipboard.writeText(this.albumArt.src);
-                    Utils.showNotification('Artwork URL copied to clipboard!');
+                    this.updateAPIStatus(false);
                 }
             }
-        }
 
-        class FavoritesController {
-            constructor() {
-                this.favoritesList = document.getElementById('favoritesList');
-                this.updateFavoritesList();
+            async testAPIConnection() {
+                const isConnected = await AIController.testConnection();
+                this.updateAPIStatus(isConnected);
             }
 
-            updateFavoritesList() {
-                if (AppState.favorites.length === 0) {
-                    this.favoritesList.innerHTML = '<div class="loading">No favorites yet. Search for songs and add them to your favorites!</div>';
-                    return;
+            updateAPIStatus(connected) {
+                if (this.apiStatus) {
+                    this.apiStatus.classList.toggle('connected', connected);
                 }
+                if (this.apiStatusText) {
+                    this.apiStatusText.textContent = connected ? 'API Connected' : 'API Disconnected';
+                }
+            }
 
-                this.favoritesList.innerHTML = '';
-                AppState.favorites.slice(0, 10).forEach(favorite => { // Show last 10 favorites
-                    const item = document.createElement('div');
-                    item.className = 'favorite-item';
-                    item.innerHTML = `
-                        <div>
-                            <div style="font-weight: 600;">${favorite.song}</div>
-                            <div style="color: var(--text-secondary); font-size: 0.9rem;">${favorite.artist}</div>
-                        </div>
-                        <span class="remove-favorite" title="Remove favorite">✕</span>
-                    `;
-                    
-                    // Click to search
-                    item.querySelector('div').addEventListener('click', () => {
-                        document.getElementById('artistInput').value = favorite.artist;
-                        document.getElementById('songInput').value = favorite.song;
-                        Utils.showNotification(`Loaded "${favorite.song}" by ${favorite.artist}`);
-                    });
-                    
-                    // Remove favorite
-                    item.querySelector('.remove-favorite').addEventListener('click', (e) => {
-                        e.stopPropagation();
-                        this.removeFavorite(favorite.key);
-                    });
-                    
-                    this.favoritesList.appendChild(item);
+            enableFeatures() {
+                document.querySelectorAll('.ai-feature-btn').forEach(btn => {
+                    btn.disabled = false;
                 });
             }
 
-            removeFavorite(key) {
-                AppState.favorites = AppState.favorites.filter(fav => fav.key !== key);
-                localStorage.setItem('musicapp_favorites', JSON.stringify(AppState.favorites));
-                this.updateFavoritesList();
-                Utils.showNotification('Removed from favorites');
-                
-                // Update favorite button if current search matches
-                if (AppState.currentSearch) {
-                    const currentKey = `${AppState.currentSearch.artist}_${AppState.currentSearch.song}`;
-                    if (currentKey === key) {
-                        resultsController.updateFavoriteButton();
+            async handleFeatureClick(feature, button) {
+                if (!AppState.currentSong) {
+                    Utils.showNotification('Please search for a song first', 'error');
+                    return;
+                }
+
+                if (!AppState.apiKey) {
+                    Utils.showNotification('Please enter your Hugging Face API key', 'error');
+                    return;
+                }
+
+                // Update UI state
+                document.querySelectorAll('.ai-feature-btn').forEach(btn => btn.classList.remove('active'));
+                button.classList.add('active');
+                AppState.currentFeature = feature;
+
+                // Show/hide journey section
+                if (this.journeySection) {
+                    this.journeySection.classList.toggle('active', feature === 'journey');
+                }
+
+                // Show response area
+                if (this.aiResponseArea) {
+                    this.aiResponseArea.classList.add('active');
+                }
+                if (this.responseTitle) {
+                    this.responseTitle.textContent = button.querySelector('.feature-title').textContent;
+                }
+
+                // Clear previous response
+                this.clearResponse();
+
+                // Generate prompt based on feature
+                let prompt = '';
+                const { artist, song } = AppState.currentSong;
+
+                switch (feature) {
+                    case 'playlist':
+                        prompt = AIController.generateSimilarPlaylist(song, artist);
+                        break;
+                    case 'recommendations':
+                        prompt = AIController.getSongRecommendations(song, artist);
+                        break;
+                    case 'meaning':
+                        prompt = AIController.analyzeSongMeaning(song, artist, AppState.currentLyrics);
+                        break;
+                    case 'twins':
+                        prompt = AIController.findAudioTwins(song, artist);
+                        break;
+                    case 'journey':
+                        const startSong = this.journeyStart?.value || song;
+                        const startArtist = artist;
+                        const endSong = this.journeyEnd?.value || song;
+                        const endArtist = artist;
+                        prompt = AIController.createMusicalJourney(startSong, startArtist, endSong, endArtist);
+                        break;
+                    case 'influences':
+                        prompt = AIController.exploreArtistInfluences(artist);
+                        break;
+                    case 'mood':
+                        prompt = AIController.analyzeMoodAndVibe(song, artist);
+                        break;
+                    case 'evolution':
+                        const genre = AppState.currentSong.metadata?.genres?.[0] || 'music';
+                        prompt = AIController.analyzeGenreEvolution(song, artist, genre);
+                        break;
+                }
+
+                if (prompt) {
+                    await this.executeAIQuery(prompt);
+                }
+            }
+
+            async executeAIQuery(prompt) {
+                this.setLoading(true);
+                if (this.streamingText) {
+                    this.streamingText.textContent = '';
+                }
+
+                let fullResponse = '';
+
+                await AIController.streamQuery(
+                    prompt,
+                    (token) => {
+                        // On token received
+                        fullResponse += token;
+                        if (this.streamingText) {
+                            this.streamingText.textContent = fullResponse;
+                        }
+                        if (this.aiResponseContent) {
+                            this.aiResponseContent.scrollTop = this.aiResponseContent.scrollHeight;
+                        }
+                    },
+                    () => {
+                        // On complete
+                        this.setLoading(false);
+                        AppState.conversationHistory.push({
+                            feature: AppState.currentFeature,
+                            prompt,
+                            response: fullResponse,
+                            timestamp: Date.now()
+                        });
+                    },
+                    (error) => {
+                        // On error
+                        this.setLoading(false);
+                        if (this.streamingText) {
+                            this.streamingText.textContent = `Error: ${error}`;
+                        }
+                        Utils.showNotification(`AI Error: ${error}`, 'error');
                     }
+                );
+            }
+
+            async handleFollowup() {
+                const followupQuestion = this.followupInput?.value?.trim();
+                if (!followupQuestion) return;
+
+                const context = AppState.conversationHistory.slice(-1)[0];
+                if (!context) {
+                    Utils.showNotification('No previous conversation to follow up on', 'error');
+                    return;
+                }
+
+                const { artist, song } = AppState.currentSong;
+                const prompt = `Based on our previous discussion about "${song}" by "${artist}":
+
+Previous Context: ${context.response.substring(0, 500)}...
+
+User's follow-up question: ${followupQuestion}
+
+Please provide a detailed response that builds on our previous conversation.`;
+
+                if (this.followupInput) {
+                    this.followupInput.value = '';
+                }
+                await this.executeAIQuery(prompt);
+            }
+
+            setLoading(loading) {
+                if (this.loadingAnimation) {
+                    this.loadingAnimation.classList.toggle('hidden', !loading);
+                }
+                document.querySelectorAll('.ai-feature-btn').forEach(btn => {
+                    btn.disabled = loading;
+                });
+                if (this.followupBtn) {
+                    this.followupBtn.disabled = loading;
+                }
+            }
+
+            copyResponse() {
+                const text = this.streamingText?.textContent;
+                if (text) {
+                    navigator.clipboard.writeText(text).then(() => {
+                        Utils.showNotification('Response copied to clipboard');
+                    }).catch(() => {
+                        Utils.showNotification('Copy failed', 'error');
+                    });
+                }
+            }
+
+            clearResponse() {
+                if (this.streamingText) {
+                    this.streamingText.textContent = '';
+                }
+                if (this.loadingAnimation) {
+                    this.loadingAnimation.classList.add('hidden');
                 }
             }
         }
 
+        // Theme Controller
         class ThemeController {
             constructor() {
                 this.themeToggle = document.getElementById('themeToggle');
@@ -1562,7 +1897,9 @@ For now, enjoy exploring the metadata and album artwork features!`;
             }
 
             bindEvents() {
-                this.themeToggle.addEventListener('click', this.toggleTheme.bind(this));
+                if (this.themeToggle) {
+                    this.themeToggle.addEventListener('click', this.toggleTheme.bind(this));
+                }
             }
 
             toggleTheme() {
@@ -1575,99 +1912,68 @@ For now, enjoy exploring the metadata and album artwork features!`;
 
             updateThemeUI() {
                 if (AppState.theme === 'dark') {
-                    this.themeIcon.textContent = '🌙';
-                    this.themeText.textContent = 'Dark Mode';
+                    if (this.themeIcon) this.themeIcon.textContent = '🌙';
+                    if (this.themeText) this.themeText.textContent = 'Dark Mode';
                 } else {
-                    this.themeIcon.textContent = '☀️';
-                    this.themeText.textContent = 'Light Mode';
+                    if (this.themeIcon) this.themeIcon.textContent = '☀️';
+                    if (this.themeText) this.themeText.textContent = 'Light Mode';
                 }
             }
         }
 
-        // Initialize Application
-        class App {
-            constructor() {
-                this.init();
-            }
-
-            init() {
-                // Initialize controllers
-                this.searchController = new SearchController();
-                this.resultsController = new ResultsController();
-                this.favoritesController = new FavoritesController();
-                this.themeController = new ThemeController();
-                
-                // Global error handler
-                window.addEventListener('error', this.handleGlobalError.bind(this));
-                window.addEventListener('unhandledrejection', this.handleGlobalError.bind(this));
-                
-                // Add accessibility features
-                this.setupAccessibility();
-                
-                console.log('🎵 MusiSync App initialized!');
-                Utils.showNotification('Welcome to MusiSync! Search for your favorite songs.');
-            }
-
-            handleGlobalError(event) {
-                console.error('Global error:', event.error || event.reason);
-                Utils.showNotification('An unexpected error occurred. Please try again.', 'error');
-            }
-
-            setupAccessibility() {
-                // Add keyboard navigation for autocomplete
-                document.addEventListener('keydown', (e) => {
-                    if (e.key === 'Escape') {
-                        // Close any open dropdowns
-                        document.querySelectorAll('.autocomplete-dropdown').forEach(dropdown => {
-                            dropdown.style.display = 'none';
-                        });
-                    }
-                });
-
-                // Add ARIA labels
-                document.querySelectorAll('input').forEach(input => {
-                    if (!input.getAttribute('aria-label')) {
-                        input.setAttribute('aria-label', input.placeholder);
-                    }
-                });
-                
-                // Add focus indicators
-                document.querySelectorAll('button, input').forEach(element => {
-                    element.addEventListener('focus', () => {
-                        element.style.outline = '2px solid var(--accent-primary)';
-                        element.style.outlineOffset = '2px';
-                    });
-                    
-                    element.addEventListener('blur', () => {
-                        element.style.outline = 'none';
-                    });
-                });
+        // Export Functions
+        function exportResponse(format) {
+            const response = document.getElementById('streamingText')?.textContent;
+            if (!response) {
+                Utils.showNotification('No response to export', 'error');
+                return;
             }
-        }
 
-        // Global references for easier access
-        let app, searchController, resultsController, favoritesController, themeController;
-
-        // Initialize app when DOM is ready
-        document.addEventListener('DOMContentLoaded', () => {
-            app = new App();
-            
-            // Make controllers globally accessible
-            searchController = app.searchController;
-            resultsController = app.resultsController;
-            favoritesController = app.favoritesController;
-            themeController = app.themeController;
-        });
+            const { artist, song } = AppState.currentSong || { artist: 'Unknown', song: 'Unknown' };
+            const feature = AppState.currentFeature || 'analysis';
+            const timestamp = new Date().toISOString().split('T')[0];
 
-        // Service Worker Registration (optional, for offline support)
-        if ('serviceWorker' in navigator) {
-            window.addEventListener('load', () => {
-                // You could register a service worker here for offline functionality
-                console.log('Service Worker support detected');
-            });
-        }
-    </script>
+            switch (format) {
+                case 'txt':
+                    const txtContent = `AI Music Analysis - ${song} by ${artist}\nFeature: ${feature}\nDate: ${timestamp}\n\n${response}`;
+                    Utils.downloadFile(txtContent, `${artist}-${song}-${feature}-${timestamp}.txt`);
+                    break;
 
+                case 'json':
+                    const jsonData = {
+                        song,
+                        artist,
+                        feature,
+                        timestamp,
+                        response,
+                        conversationHistory: AppState.conversationHistory
+                    };
+                    Utils.downloadFile(JSON.stringify(jsonData, null, 2), `${artist}-${song}-${feature}-${timestamp}.json`, 'application/json');
+                    break;
+
+                case 'pdf':
+                    const htmlContent = `
+                        <!DOCTYPE html>
+                        <html>
+                        <head>
+                            <title>AI Music Analysis</title>
+                            <style>
+                                body { font-family: Arial, sans-serif; margin: 40px; line-height: 1.6; }
+                                h1 { color: #333; border-bottom: 2px solid #8b5cf6; padding-bottom: 10px; }
+                                .meta { background: #f5f5f5; padding: 15px; border-radius: 5px; margin: 20px 0; }
+                                .response { white-space: pre-wrap; background: #fff; padding: 20px; border: 1px solid #ddd; border-radius: 5px; }
+                            </style>
+                        </head>
+                        <body>
+                            <h1>AI Music Analysis Report</h1>
+                            <div class="meta">
+                                <strong>Song:</strong> ${song}<br>
+                                <strong>Artist:</strong> ${artist}<br>
+                                <strong>Analysis Type:</strong> ${feature}<br>
+                                <strong>Generated:</strong> ${new Date().toLocaleString()}
+                            </div>
+                            <div class="response">${response}</div>
+                        
 <style>
 #minimax-floating-ball {
   position: fixed;
@@ -1779,5 +2085,60 @@ function initFloatingBall() {
 document.addEventListener('DOMContentLoaded', initFloatingBall); 
 </script>
 
+</body>
+                        </html>
+                    `;
+                    const blob = new Blob([htmlContent], { type: 'text/html' });
+                    const url = URL.createObjectURL(blob);
+                    const newWindow = window.open(url);
+                    if (newWindow) {
+                        newWindow.onload = () => {
+                            newWindow.print();
+                            URL.revokeObjectURL(url);
+                        };
+                    }
+                    break;
+            }
+
+            Utils.showNotification(`Exported as ${format.toUpperCase()}`);
+        }
+
+        // Application Initialization
+        class App {
+            constructor() {
+                this.init();
+            }
+
+            init() {
+                // Initialize controllers
+                this.searchController = new SearchController();
+                this.resultsController = new ResultsController();
+                this.aiController = new AIPanelController();
+                this.themeController = new ThemeController();
+
+                // Make controllers globally accessible
+                window.searchController = this.searchController;
+                window.resultsController = this.resultsController;
+                window.aiController = this.aiController;
+
+                // Global error handler
+                window.addEventListener('error', (e) => {
+                    console.error('Global error:', e.error);
+                    Utils.showNotification('An unexpected error occurred', 'error');
+                });
+
+                // Initialize with welcome message
+                setTimeout(() => {
+                    Utils.showNotification('Welcome to AI-Powered Music Discovery! Search for a song to get started.');
+                }, 500);
+            }
+        }
+
+        // Initialize the application when DOM is loaded
+        document.addEventListener('DOMContentLoaded', () => {
+            new App();
+        });
+    </script>
+
 </body>
 </html>
