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

This commit is contained in:
Flatlogic Bot 2025-11-25 16:13:14 +00:00
parent 6a85a0e336
commit b0df731824
5 changed files with 185 additions and 10 deletions

View File

@ -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 %}

View File

@ -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
View 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
View 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);
}
});