Auto commit: 2025-11-25T16:13:14.454Z
This commit is contained in:
parent
6a85a0e336
commit
b0df731824
Binary file not shown.
@ -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 %}
|
||||
|
||||
@ -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})
|
||||
request.session['conversation'] = conversation
|
||||
return render(request, 'core/index.html', {'user_message': user_message, 'ai_message': ai_message, 'playlist': playlist})
|
||||
else:
|
||||
# Handle error
|
||||
return render(request, 'core/index.html', {'user_message': user_message, 'ai_message': 'Sorry, I had an error.'})
|
||||
conversation.append({'role': 'assistant', 'content': ai_message})
|
||||
request.session['conversation'] = conversation
|
||||
|
||||
if request.headers.get('x-requested-with') == 'XMLHttpRequest':
|
||||
return JsonResponse({'ai_message': ai_message, 'playlist': playlist})
|
||||
|
||||
return render(request, 'core/index.html', {'user_message': user_message, 'ai_message': ai_message, 'playlist': playlist, 'conversation': conversation})
|
||||
|
||||
else:
|
||||
# Start of a new conversation
|
||||
|
||||
86
static/js/chat.js
Normal file
86
static/js/chat.js
Normal file
@ -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);
|
||||
}
|
||||
});
|
||||
86
staticfiles/js/chat.js
Normal file
86
staticfiles/js/chat.js
Normal file
@ -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);
|
||||
}
|
||||
});
|
||||
Loading…
x
Reference in New Issue
Block a user