Auto commit: 2025-11-25T16:03:13.664Z
This commit is contained in:
Flatlogic Bot
parent
bfba0ea6ae
commit
6a85a0e336
BIN
assets/pasted-20251125-154849-b52db44d.png
Normal file
BIN
assets/pasted-20251125-154849-b52db44d.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 MiB |
BIN
assets/pasted-20251125-155318-f4445b60.png
Normal file
BIN
assets/pasted-20251125-155318-f4445b60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 MiB |
Binary file not shown.
@ -32,5 +32,18 @@
|
||||
<button type="submit" class="send-button">Send</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{% if playlist %}
|
||||
<div class="playlist-container">
|
||||
<h2 class="playlist-title">Your Playlist</h2>
|
||||
<ul class="playlist">
|
||||
{% for song in playlist %}
|
||||
<li class="playlist-item">
|
||||
<span class="song-title">{{ song.title }}</span> - <span class="song-artist">{{ song.artist }}</span>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</div>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% endblock %}
|
||||
|
||||
@ -1,7 +1,37 @@
|
||||
from django.shortcuts import render
|
||||
from ai.local_ai_api import LocalAIApi
|
||||
import json
|
||||
|
||||
def get_playlist_for_mood(mood):
|
||||
"""
|
||||
Returns a mock playlist of songs for a given mood.
|
||||
"""
|
||||
playlists = {
|
||||
"happy": [
|
||||
{"title": "Happy", "artist": "Pharrell Williams"},
|
||||
{"title": "Don't Stop Me Now", "artist": "Queen"},
|
||||
{"title": "Uptown Funk", "artist": "Mark Ronson ft. Bruno Mars"},
|
||||
],
|
||||
"sad": [
|
||||
{"title": "Someone Like You", "artist": "Adele"},
|
||||
{"title": "Hurt", "artist": "Johnny Cash"},
|
||||
{"title": "Fix You", "artist": "Coldplay"},
|
||||
],
|
||||
"energetic": [
|
||||
{"title": "Eye of the Tiger", "artist": "Survivor"},
|
||||
{"title": "Thunderstruck", "artist": "AC/DC"},
|
||||
{"title": "Can't Stop", "artist": "Red Hot Chili Peppers"},
|
||||
],
|
||||
"calm": [
|
||||
{"title": "Weightless", "artist": "Marconi Union"},
|
||||
{"title": "Clair de Lune", "artist": "Claude Debussy"},
|
||||
{"title": "Orinoco Flow", "artist": "Enya"},
|
||||
],
|
||||
}
|
||||
return playlists.get(mood.lower(), [])
|
||||
|
||||
def index(request):
|
||||
playlist = None
|
||||
if request.method == 'POST':
|
||||
user_message = request.POST.get('message')
|
||||
|
||||
@ -11,16 +41,23 @@ def index(request):
|
||||
|
||||
response = LocalAIApi.create_response({
|
||||
"input": [
|
||||
{'role': 'system', 'content': 'You are a friendly AI that helps users find music based on their mood. Ask up to 6 questions to understand their mood and then suggest a playlist.'},
|
||||
{'role': 'system', 'content': 'You are a friendly AI that helps users find music based on their mood. Ask up to 6 questions to understand their mood. Once you have determined the mood, respond with ONLY a JSON object with a single key "mood" and the mood as the value (e.g. {"mood": "happy"}).'},
|
||||
*conversation
|
||||
],
|
||||
})
|
||||
|
||||
if response.get("success"):
|
||||
ai_message = LocalAIApi.extract_text(response)
|
||||
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:"
|
||||
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})
|
||||
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.'})
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
/* custom.css */
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden; /* Prevents the body from scrolling */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #121212;
|
||||
@ -7,48 +14,58 @@ body {
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh; /* Changed from min-height to height */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background: linear-gradient(rgba(18, 18, 18, 0.8), rgba(18, 18, 18, 0.8)), url('https://images.unsplash.com/photo-1511379938547-c1f69419868d?q=80&w=2070&auto=format&fit=crop');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 4rem;
|
||||
font-size: 2.5rem; /* Adjusted for a more balanced look */
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 40px;
|
||||
font-size: 1rem; /* Adjusted for a more balanced look */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
background-color: #181818;
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Let the container take up available space, but not exceed the screen height */
|
||||
flex-grow: 1;
|
||||
max-height: calc(100vh - 180px); /* Adjust 180px based on title/subtitle height */
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
height: 350px;
|
||||
flex-grow: 1; /* This makes the chat box fill the available space */
|
||||
overflow-y: auto;
|
||||
margin-bottom: 20px;
|
||||
padding-right: 15px;
|
||||
padding: 20px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
max-width: 80%;
|
||||
margin-bottom: 12px;
|
||||
max-width: 85%;
|
||||
word-wrap: break-word;
|
||||
display: flex; /* Use flexbox for alignment */
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
@ -60,17 +77,19 @@ body {
|
||||
.user-message {
|
||||
background: linear-gradient(to right, #1DB954, #1ED760);
|
||||
color: #FFFFFF;
|
||||
align-self: flex-end;
|
||||
margin-left: auto;
|
||||
align-self: flex-end; /* Align user messages to the right */
|
||||
}
|
||||
|
||||
.chat-input-form {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #282828;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex-grow: 1;
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
background-color: #282828;
|
||||
@ -83,7 +102,7 @@ body {
|
||||
}
|
||||
|
||||
.send-button {
|
||||
padding: 15px 25px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
background: linear-gradient(to right, #1DB954, #1ED760);
|
||||
@ -95,4 +114,70 @@ body {
|
||||
|
||||
.spotify-embed {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
max-height: calc(100vh - 150px); /* Adjust for smaller screens */
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.chat-input-form {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
.playlist-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-top: 20px;
|
||||
background-color: #181818;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.playlist-title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playlist {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #282828;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.playlist-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.song-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
@ -1,5 +1,12 @@
|
||||
/* custom.css */
|
||||
|
||||
html, body {
|
||||
height: 100%;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
overflow: hidden; /* Prevents the body from scrolling */
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background-color: #121212;
|
||||
@ -7,48 +14,58 @@ body {
|
||||
}
|
||||
|
||||
.hero-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100vh; /* Changed from min-height to height */
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
text-align: center;
|
||||
background: linear-gradient(rgba(18, 18, 18, 0.8), rgba(18, 18, 18, 0.8)), url('https://images.unsplash.com/photo-1511379938547-c1f69419868d?q=80&w=2070&auto=format&fit=crop');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
padding: 100px 0;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero-title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 4rem;
|
||||
font-size: 2.5rem; /* Adjusted for a more balanced look */
|
||||
font-weight: 600;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 20px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 1.5rem;
|
||||
color: #FFFFFF;
|
||||
margin-bottom: 40px;
|
||||
font-size: 1rem; /* Adjusted for a more balanced look */
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin: 50px auto;
|
||||
background-color: #181818;
|
||||
border-radius: 15px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
/* Let the container take up available space, but not exceed the screen height */
|
||||
flex-grow: 1;
|
||||
max-height: calc(100vh - 180px); /* Adjust 180px based on title/subtitle height */
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
height: 350px;
|
||||
flex-grow: 1; /* This makes the chat box fill the available space */
|
||||
overflow-y: auto;
|
||||
margin-bottom: 20px;
|
||||
padding-right: 15px;
|
||||
padding: 20px;
|
||||
padding-right: 10px;
|
||||
}
|
||||
|
||||
.chat-message {
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 15px;
|
||||
max-width: 80%;
|
||||
margin-bottom: 12px;
|
||||
max-width: 85%;
|
||||
word-wrap: break-word;
|
||||
display: flex; /* Use flexbox for alignment */
|
||||
}
|
||||
|
||||
.ai-message {
|
||||
@ -60,17 +77,19 @@ body {
|
||||
.user-message {
|
||||
background: linear-gradient(to right, #1DB954, #1ED760);
|
||||
color: #FFFFFF;
|
||||
align-self: flex-end;
|
||||
margin-left: auto;
|
||||
align-self: flex-end; /* Align user messages to the right */
|
||||
}
|
||||
|
||||
.chat-input-form {
|
||||
display: flex;
|
||||
padding: 20px;
|
||||
border-top: 1px solid #282828;
|
||||
}
|
||||
|
||||
.chat-input {
|
||||
flex-grow: 1;
|
||||
padding: 15px;
|
||||
padding: 12px;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
background-color: #282828;
|
||||
@ -83,7 +102,7 @@ body {
|
||||
}
|
||||
|
||||
.send-button {
|
||||
padding: 15px 25px;
|
||||
padding: 12px 20px;
|
||||
border-radius: 25px;
|
||||
border: none;
|
||||
background: linear-gradient(to right, #1DB954, #1ED760);
|
||||
@ -95,4 +114,70 @@ body {
|
||||
|
||||
.spotify-embed {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
/* Responsive adjustments */
|
||||
@media (max-width: 768px) {
|
||||
.hero-title {
|
||||
font-size: 2rem;
|
||||
}
|
||||
|
||||
.hero-subtitle {
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.chat-container {
|
||||
max-height: calc(100vh - 150px); /* Adjust for smaller screens */
|
||||
}
|
||||
|
||||
.chat-box {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.chat-input-form {
|
||||
padding: 15px;
|
||||
}
|
||||
}
|
||||
.playlist-container {
|
||||
width: 100%;
|
||||
max-width: 600px;
|
||||
margin-top: 20px;
|
||||
background-color: #181818;
|
||||
border-radius: 15px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.playlist-title {
|
||||
font-family: 'Poppins', sans-serif;
|
||||
font-size: 1.5rem;
|
||||
font-weight: 600;
|
||||
margin-bottom: 15px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.playlist {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.playlist-item {
|
||||
padding: 10px 0;
|
||||
border-bottom: 1px solid #282828;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.playlist-item:last-child {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.song-title {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.song-artist {
|
||||
color: #B3B3B3;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user