diff --git a/assets/pasted-20251125-154849-b52db44d.png b/assets/pasted-20251125-154849-b52db44d.png new file mode 100644 index 0000000..842c210 Binary files /dev/null and b/assets/pasted-20251125-154849-b52db44d.png differ diff --git a/assets/pasted-20251125-155318-f4445b60.png b/assets/pasted-20251125-155318-f4445b60.png new file mode 100644 index 0000000..8d9efa8 Binary files /dev/null and b/assets/pasted-20251125-155318-f4445b60.png differ diff --git a/core/__pycache__/views.cpython-311.pyc b/core/__pycache__/views.cpython-311.pyc index 7484547..9b9de93 100644 Binary files a/core/__pycache__/views.cpython-311.pyc and b/core/__pycache__/views.cpython-311.pyc differ diff --git a/core/templates/core/index.html b/core/templates/core/index.html index 59859f9..0675bd0 100644 --- a/core/templates/core/index.html +++ b/core/templates/core/index.html @@ -32,5 +32,18 @@ + + {% if playlist %} +
+

Your Playlist

+ +
+ {% endif %} {% endblock %} diff --git a/core/views.py b/core/views.py index a2fef32..4c90199 100644 --- a/core/views.py +++ b/core/views.py @@ -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.'}) diff --git a/static/css/custom.css b/static/css/custom.css index a967247..189b1b0 100644 --- a/static/css/custom.css +++ b/static/css/custom.css @@ -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; -} \ No newline at end of file +} + +/* 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; +} diff --git a/staticfiles/css/custom.css b/staticfiles/css/custom.css index a967247..189b1b0 100644 --- a/staticfiles/css/custom.css +++ b/staticfiles/css/custom.css @@ -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; -} \ No newline at end of file +} + +/* 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; +}