Auto commit: 2025-11-25T16:13:14.454Z

core/templates/core/index.html

@@ -26,9 +26,9 @@
                 </div>
             {% endif %}
         </div>
-        <form method="post" class="chat-input-form">
+        <form method="post" id="chat-form" class="chat-input-form">
             {% csrf_token %}
-            <input type="text" name="message" class="chat-input" placeholder="Tell me about your day..." required>
+            <input type="text" name="message" id="chat-input" class="chat-input" placeholder="Tell me about your day..." required>
             <button type="submit" class="send-button">Send</button>
         </form>
     </div>
@@ -46,4 +46,5 @@
     </div>
     {% endif %}
 </div>
+<script src="{% static 'js/chat.js' %}"></script>
 {% endblock %}

core/views.py

@@ -1,4 +1,5 @@
 from django.shortcuts import render
+from django.http import JsonResponse
 from ai.local_ai_api import LocalAIApi
 import json
 
@@ -35,7 +36,6 @@ def index(request):
     if request.method == 'POST':
         user_message = request.POST.get('message')
         
-        # Get conversation history from session
         conversation = request.session.get('conversation', [])
         conversation.append({'role': 'user', 'content': user_message})
 
@@ -46,21 +46,23 @@ def index(request):
             ],
         })
 
+        ai_message = 'Sorry, I had an error.'
         if response.get("success"):
             json_response = LocalAIApi.decode_json_from_response(response)
             if json_response and 'mood' in json_response:
                 mood = json_response['mood']
                 playlist = get_playlist_for_mood(mood)
-                ai_message = f"Here is a playlist for your {mood} mood:"
+                ai_message = f"I've created a playlist for your {mood} mood. I hope you like it!"
             else:
                 ai_message = LocalAIApi.extract_text(response)
 
-            conversation.append({'role': 'assistant', 'content': ai_message})
+        conversation.append({'role': 'assistant', 'content': ai_message})
-            request.session['conversation'] = conversation
+        request.session['conversation'] = conversation
-            return render(request, 'core/index.html', {'user_message': user_message, 'ai_message': ai_message, 'playlist': playlist})
+
-        else:
+        if request.headers.get('x-requested-with') == 'XMLHttpRequest':
-            # Handle error
+            return JsonResponse({'ai_message': ai_message, 'playlist': playlist})
-            return render(request, 'core/index.html', {'user_message': user_message, 'ai_message': 'Sorry, I had an error.'})
+        
+        return render(request, 'core/index.html', {'user_message': user_message, 'ai_message': ai_message, 'playlist': playlist, 'conversation': conversation})
 
     else:
         # Start of a new conversation

static/js/chat.js

@@ -0,0 +1,86 @@
+
+document.addEventListener('DOMContentLoaded', function() {
+    const chatForm = document.getElementById('chat-form');
+    const chatBox = document.getElementById('chat-box');
+    const chatInput = document.getElementById('chat-input');
+    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+
+    chatForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+
+        const userMessage = chatInput.value.trim();
+        if (userMessage === '') {
+            return;
+        }
+
+        // Add user message to chat box
+        appendMessage(userMessage, 'user-message');
+        chatInput.value = '';
+
+        fetch(window.location.href, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'X-CSRFToken': csrfToken,
+                'X-Requested-With': 'XMLHttpRequest',
+            },
+            body: new URLSearchParams({
+                'message': userMessage
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            // Add AI message to chat box
+            appendMessage(data.ai_message, 'ai-message');
+
+            // If a playlist is returned, display it
+            if (data.playlist && data.playlist.length > 0) {
+                displayPlaylist(data.playlist);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            appendMessage('Sorry, something went wrong.', 'ai-message');
+        });
+    });
+
+    function appendMessage(message, className) {
+        const messageElement = document.createElement('div');
+        messageElement.classList.add('chat-message', className);
+        const p = document.createElement('p');
+        p.textContent = message;
+        messageElement.appendChild(p);
+        chatBox.appendChild(messageElement);
+        chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom
+    }
+
+    function displayPlaylist(playlist) {
+        let playlistContainer = document.querySelector('.playlist-container');
+        if (!playlistContainer) {
+            playlistContainer = document.createElement('div');
+            playlistContainer.classList.add('playlist-container');
+            
+            const heroSection = document.querySelector('.hero-section');
+            heroSection.appendChild(playlistContainer);
+        }
+
+        playlistContainer.innerHTML = ''; // Clear previous playlist
+
+        const title = document.createElement('h2');
+        title.classList.add('playlist-title');
+        title.textContent = 'Your Playlist';
+        playlistContainer.appendChild(title);
+
+        const ul = document.createElement('ul');
+        ul.classList.add('playlist');
+        
+        playlist.forEach(song => {
+            const li = document.createElement('li');
+            li.classList.add('playlist-item');
+            li.innerHTML = `<span class="song-title">${song.title}</span> - <span class="song-artist">${song.artist}</span>`;
+            ul.appendChild(li);
+        });
+
+        playlistContainer.appendChild(ul);
+    }
+});

staticfiles/js/chat.js

@@ -0,0 +1,86 @@
+
+document.addEventListener('DOMContentLoaded', function() {
+    const chatForm = document.getElementById('chat-form');
+    const chatBox = document.getElementById('chat-box');
+    const chatInput = document.getElementById('chat-input');
+    const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
+
+    chatForm.addEventListener('submit', function(event) {
+        event.preventDefault();
+
+        const userMessage = chatInput.value.trim();
+        if (userMessage === '') {
+            return;
+        }
+
+        // Add user message to chat box
+        appendMessage(userMessage, 'user-message');
+        chatInput.value = '';
+
+        fetch(window.location.href, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/x-www-form-urlencoded',
+                'X-CSRFToken': csrfToken,
+                'X-Requested-With': 'XMLHttpRequest',
+            },
+            body: new URLSearchParams({
+                'message': userMessage
+            })
+        })
+        .then(response => response.json())
+        .then(data => {
+            // Add AI message to chat box
+            appendMessage(data.ai_message, 'ai-message');
+
+            // If a playlist is returned, display it
+            if (data.playlist && data.playlist.length > 0) {
+                displayPlaylist(data.playlist);
+            }
+        })
+        .catch(error => {
+            console.error('Error:', error);
+            appendMessage('Sorry, something went wrong.', 'ai-message');
+        });
+    });
+
+    function appendMessage(message, className) {
+        const messageElement = document.createElement('div');
+        messageElement.classList.add('chat-message', className);
+        const p = document.createElement('p');
+        p.textContent = message;
+        messageElement.appendChild(p);
+        chatBox.appendChild(messageElement);
+        chatBox.scrollTop = chatBox.scrollHeight; // Scroll to bottom
+    }
+
+    function displayPlaylist(playlist) {
+        let playlistContainer = document.querySelector('.playlist-container');
+        if (!playlistContainer) {
+            playlistContainer = document.createElement('div');
+            playlistContainer.classList.add('playlist-container');
+            
+            const heroSection = document.querySelector('.hero-section');
+            heroSection.appendChild(playlistContainer);
+        }
+
+        playlistContainer.innerHTML = ''; // Clear previous playlist
+
+        const title = document.createElement('h2');
+        title.classList.add('playlist-title');
+        title.textContent = 'Your Playlist';
+        playlistContainer.appendChild(title);
+
+        const ul = document.createElement('ul');
+        ul.classList.add('playlist');
+        
+        playlist.forEach(song => {
+            const li = document.createElement('li');
+            li.classList.add('playlist-item');
+            li.innerHTML = `<span class="song-title">${song.title}</span> - <span class="song-artist">${song.artist}</span>`;
+            ul.appendChild(li);
+        });
+
+        playlistContainer.appendChild(ul);
+    }
+});