Skip to content

Commit

Permalink
Merge pull request #222 from nikhilsna/main
Browse files Browse the repository at this point in the history 
Underground Music Updated to backend testing to the main page Pd3
  • Loading branch information
@XavierTho
XavierTho authored Nov 14, 2024
2 parents 9c21709 + 15e7742 commit aab2875
Showing 1 changed file with 227 additions and 12 deletions.
239 changes: 227 additions & 12 deletions navigation/share_and_care/undgdmusic/frontpage.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -197,17 +197,9 @@ permalink: /undgdmusic/
<select id="group_id" name="group_id" required>
<option value="">Select a group</option>
</select>
<label for="Artists">Channel:</label>
<select id="Artists" name="Artists" required>
<label for="channel_id">Channel:</label>
<select id="channel_id" name="channel_id" required>
<option value="">Select a channel</option>
</select>
<label for="Songs">Channel:</label>
<select id="Songs" name="Songs" required>
<option value="">Select a channel</option>
<label for="Genres">Channel:</label>
<select id="Genres" name="Genres" required>
<option value="">Select a channel</option>
</select>
</select>
<button type="submit">Select</button>
</form>
Expand Down Expand Up @@ -438,13 +430,11 @@ async function fetchChannels(groupName) {
<div class="tab-content" id="discover">
<div class="chatroom-container">
<h2>Discover New Artists</h2>
<!-- Search Bar -->
<div class="search-bar">
<input type="text" id="searchQuery" placeholder="Search for more underground artists..." />
<button onclick="searchGoogle()">Search</button>
</div>
<ul class="artist-list">
<li class="artist-item">
<strong>Artist Name:</strong> Lil Xtra <br>
Expand Down Expand Up @@ -609,3 +599,228 @@ async function fetchChannels(groupName) {
}
}
</script>

<!-- Mini AI Assistant -->
<div class="ai-assistant" id="aiAssistant">
<h3>Your Music Assistant</h3>
<div class="chat-window" id="chat-window">
<!-- Messages will appear here -->
</div>
<!-- Predefined Response Buttons -->
<div class="response-buttons">
<button onclick="sendPredefinedMessage('recommend a song')">Recommend a Song</button>
<button onclick="sendPredefinedMessage('suggest an artist')">Suggest an Artist</button>
<button onclick="sendPredefinedMessage('lo-fi recommendation')">Lo-fi Recommendation</button>
<button onclick="sendPredefinedMessage('recommend a rap artist')">Recommend a Rap Artist</button>
<button onclick="sendPredefinedMessage('dark theme music')">Dark Theme Music</button>
<button onclick="sendPredefinedMessage('tell me about underground music')">About Underground Music</button>
<button onclick="sendPredefinedMessage('good playlist')">Good Playlist</button>
</div>
</div>

<style>
/* AI Assistant Styling */
.ai-assistant {
position: fixed;
bottom: 20px;
right: 20px;
width: 300px;
background-color: #1A1A1A;
color: #FFD700;
border: 2px solid #FFD700;
border-radius: 10px;
padding: 15px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
font-family: Arial, sans-serif;
cursor: move; /* Indicate draggable area */
}
.ai-assistant h3 {
margin: 0 0 10px 0;
color: #FFD700;
text-align: center;
cursor: move;
}
.chat-window {
max-height: 200px;
overflow-y: auto;
background-color: #333;
padding: 10px;
border-radius: 8px;
margin-bottom: 10px;
font-size: 0.9rem;
color: #FFF;
}
.chat-window p {
margin: 5px 0;
}
.user-message {
color: #FFD700;
font-weight: bold;
}
.assistant-message {
color: #FFF;
margin-left: 10px;
}
/* Response Buttons Styling */
.response-buttons {
display: flex;
flex-wrap: wrap;
gap: 5px;
justify-content: center;
}
.response-buttons button {
padding: 5px 10px;
border: none;
border-radius: 6px;
background-color: #FFD700;
color: #000;
cursor: pointer;
font-size: 0.8rem;
font-weight: bold;
transition: background-color 0.3s ease;
}
.response-buttons button:hover {
background-color: #FFC700;
}
.follow-up-buttons {
margin-top: 5px;
display: flex;
gap: 5px;
}
.follow-up-buttons button {
padding: 4px 8px;
border: none;
border-radius: 4px;
background-color: #FFD700;
color: #000;
cursor: pointer;
font-size: 0.8rem;
transition: background-color 0.3s ease;
}
.follow-up-buttons button:hover {
background-color: #FFC700;
}
</style>

<script>
// Make the AI Assistant draggable
dragElement(document.getElementById("aiAssistant"));

function dragElement(el) {
let pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;

// Mouse down event on the header to start dragging
el.onmousedown = dragMouseDown;

function dragMouseDown(e) {
e = e || window.event;
e.preventDefault();

// Get the mouse cursor position at startup
pos3 = e.clientX;
pos4 = e.clientY;

// Call a function whenever the cursor moves
document.onmousemove = elementDrag;
document.onmouseup = closeDragElement;
}

function elementDrag(e) {
e = e || window.event;
e.preventDefault();

// Calculate the new cursor position
pos1 = pos3 - e.clientX;
pos2 = pos4 - e.clientY;
pos3 = e.clientX;
pos4 = e.clientY;

// Set the element's new position
el.style.top = (el.offsetTop - pos2) + "px";
el.style.left = (el.offsetLeft - pos1) + "px";
}

function closeDragElement() {
// Stop moving when mouse button is released
document.onmouseup = null;
document.onmousemove = null;
}
}

// Define possible responses for each type of question
const responses = {
"recommend a song": [
"I recommend checking out 'Under Pressure' by Lil Xtra!",
"How about 'Sad!' by XXXTentacion?",
"Try listening to 'Moonlight' by XXXTentacion."
],
"suggest an artist": [
"You might like Sad Frosty if you're into dark lyrics with heavy beats.",
"Check out Powfu for lo-fi vibes and heartfelt lyrics.",
"Tokyo's Revenge has some aggressive energy and experimental rap."
],
"lo-fi recommendation": [
"Try listening to Powfu's 'Death Bed' if you enjoy lo-fi vibes.",
"You might enjoy 'Lofi Beats' on Spotify for chill, relaxing tracks.",
"Check out 'Cold Nights' by Saib for some smooth lo-fi vibes."
],
"recommend a rap artist": [
"Tokyo's Revenge brings a lot of energy and unique style in rap.",
"Sad Frosty has some unique dark rap beats.",
"Lil Darkie is experimental with a unique sound in underground rap."
],
"dark theme music": [
"Shinigami's 'Lovers and Friends' has a dark, gothic style that fits the vibe.",
"'Stressed Out' by Twenty One Pilots has a melancholic, dark feel.",
"Try 'Hurt' by Oliver Tree for a darker theme."
],
"tell me about underground music": [
"Underground music is often created by independent artists. It's a space for raw, unique styles!",
"Underground music is usually outside the mainstream, with artists experimenting with different sounds.",
"It's where unique sounds flourish, often without commercial influence."
],
"good playlist": [
"Check out 'Chill Rap' on Spotify for some mellow beats and chill vibes.",
"'Lofi Chill & Study' on Spotify is great for relaxing background music.",
"Try 'Rap Caviar' on Spotify for a mix of popular and underground hits."
]
};

// Track the current index of responses for each type of message
const responseIndex = {};

// Function to send a predefined message and cycle through responses
function sendPredefinedMessage(message) {
const chatWindow = document.getElementById('chat-window');

// Display user message
const userMessage = document.createElement('p');
userMessage.className = 'user-message';
userMessage.innerText = "You: " + message;
chatWindow.appendChild(userMessage);

// Get the response list and cycle through it
const responseList = responses[message];
if (!responseIndex[message]) responseIndex[message] = 0;
const response = responseList[responseIndex[message]];
responseIndex[message] = (responseIndex[message] + 1) % responseList.length; // Cycle to the next response

// Display AI response
const assistantMessage = document.createElement('p');
assistantMessage.className = 'assistant-message';
assistantMessage.innerHTML = "AI Assistant: " + response;
chatWindow.appendChild(assistantMessage);

// Add follow-up options
const followUp = document.createElement('div');
followUp.className = 'follow-up-buttons';
followUp.innerHTML = `
<button onclick="sendPredefinedMessage('${message}')">Another suggestion</button>
<button onclick="sendPredefinedMessage('tell me about underground music')">Tell me about underground music</button>
`;
chatWindow.appendChild(followUp);

// Scroll to the latest message
chatWindow.scrollTop = chatWindow.scrollHeight;
}
</script>

0 comments on commit aab2875

Please sign in to comment.