 Server : Apache/2 System : Linux server-15-235-50-60 5.15.0-164-generic #174-Ubuntu SMP Fri Nov 14 20:25:16 UTC 2025 x86_64 User : gositeme ( 1004) PHP Version : 8.2.29 Disable Function : exec,system,passthru,shell_exec,proc_close,proc_open,dl,popen,show_source,posix_kill,posix_mkfifo,posix_getpwuid,posix_setpgid,posix_setsid,posix_setuid,posix_setgid,posix_seteuid,posix_setegid,posix_uname Directory : /home/gositeme/domains/soundstudiopro.com/private_html/includes/ |
<?php
if (session_status() === PHP_SESSION_NONE) {
session_start();
}
?>
<!-- Pro Studio Modals - New AI Features -->
<style>
/* Pro Studio Modal Styles */
.pro-studio-modal-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.8);
backdrop-filter: blur(10px);
display: none;
align-items: center;
justify-content: center;
z-index: 10000;
padding: 2rem;
}
.pro-studio-modal {
background: linear-gradient(135deg, rgba(26, 26, 26, 0.98) 0%, rgba(45, 45, 45, 0.98) 100%);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
max-width: 600px;
width: 100%;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
}
.pro-studio-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2rem;
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.pro-studio-modal-header h3 {
font-size: 2.4rem;
font-weight: 700;
background: linear-gradient(45deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
}
.close-pro-studio-modal {
background: none;
border: none;
color: #a0aec0;
font-size: 3rem;
cursor: pointer;
padding: 0;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: all 0.3s ease;
}
.close-pro-studio-modal:hover {
background: rgba(255, 255, 255, 0.1);
color: #e2e8f0;
transform: rotate(90deg);
}
.pro-studio-modal-body {
padding: 2rem;
}
.track-selector {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
padding: 1.5rem;
margin-bottom: 2rem;
}
.track-list {
max-height: 200px;
overflow-y: auto;
margin-top: 1rem;
}
.track-option {
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border: 1px solid rgba(255, 255, 255, 0.05);
border-radius: 8px;
margin-bottom: 0.5rem;
cursor: pointer;
transition: all 0.3s ease;
}
.track-option:hover {
background: rgba(102, 126, 234, 0.1);
border-color: rgba(102, 126, 234, 0.3);
}
.track-option.selected {
background: rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.5);
}
.track-option-title {
font-weight: 600;
color: #e2e8f0;
margin-bottom: 0.3rem;
}
.track-option-meta {
font-size: 1.2rem;
color: #a0aec0;
}
.audio-preview {
margin-top: 1rem;
padding: 1rem;
background: rgba(255, 255, 255, 0.03);
border-radius: 8px;
}
.audio-preview audio {
width: 100%;
margin-top: 0.5rem;
}
</style>
<!-- Add Vocals Modal -->
<div class="pro-studio-modal-overlay" id="addVocalsModalOverlay" style="display: none;">
<div class="pro-studio-modal">
<div class="pro-studio-modal-header">
<h3>🎤 Add Vocals to Instrumental</h3>
<button class="close-pro-studio-modal" onclick="closeAddVocalsModal()">×</button>
</div>
<div class="pro-studio-modal-body">
<form method="POST" action="studio/create_add_vocals.php" id="addVocalsForm">
<div class="form-group">
<label for="addVocalsTitle">Track Title</label>
<input type="text" name="title" id="addVocalsTitle" class="form-input" placeholder="e.g., My Song with Vocals" maxlength="80" required>
</div>
<div class="track-selector">
<label>Select Instrumental Track</label>
<div class="track-list" id="instrumentalTracksList">
<div class="track-option" data-track-id="" data-audio-url="">
<div class="track-option-title">Or Upload New Audio</div>
<div class="track-option-meta">Upload an instrumental track</div>
</div>
</div>
<input type="hidden" name="track_id" id="selectedInstrumentalTrackId">
</div>
<div class="form-group">
<label for="addVocalsAudioUrl">Or Enter Audio URL</label>
<input type="url" name="audioUrl" id="addVocalsAudioUrl" class="form-input" placeholder="https://example.com/instrumental.mp3">
</div>
<div class="form-group">
<label for="addVocalsAudioFile">Or Upload Audio File</label>
<input type="file" name="audioFile" id="addVocalsAudioFile" class="form-input" accept="audio/*">
<small>Supported formats: MP3, WAV, M4A, FLAC (max 50MB)</small>
</div>
<div class="form-group">
<label for="addVocalsLyrics">Lyrics (Optional)</label>
<textarea name="lyrics" id="addVocalsLyrics" class="form-input" rows="4" placeholder="Enter lyrics for the vocals... (leave empty for AI-generated lyrics)"></textarea>
<div class="char-count">0/2000</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="addVocalsStyle">Vocal Style</label>
<select name="vocalStyle" id="addVocalsStyle" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="clean">Clean</option>
<option value="powerful">Powerful</option>
<option value="soft">Soft</option>
<option value="energetic">Energetic</option>
<option value="emotional">Emotional</option>
<option value="harmonized">Harmonized</option>
</select>
</div>
<div class="form-group">
<label for="addVocalsLanguage">Language</label>
<select name="language" id="addVocalsLanguage" class="form-input">
<option value="English" selected>English</option>
<option value="Spanish">Spanish</option>
<option value="French">French</option>
<option value="German">German</option>
<option value="Italian">Italian</option>
<option value="Portuguese">Portuguese</option>
</select>
</div>
</div>
<div class="form-group">
<label for="addVocalsPersona">Use Persona (Optional)</label>
<select name="personaId" id="addVocalsPersona" class="form-input">
<option value="">None (Default AI Voice)</option>
<!-- Personas will be loaded dynamically -->
</select>
<small>Select a saved persona for consistent vocal style</small>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<i class="fas fa-microphone"></i>
Add Vocals (3 Credits)
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Add Instrumental Modal -->
<div class="pro-studio-modal-overlay" id="addInstrumentalModalOverlay" style="display: none;">
<div class="pro-studio-modal">
<div class="pro-studio-modal-header">
<h3>🎸 Add Instrumental to Vocals</h3>
<button class="close-pro-studio-modal" onclick="closeAddInstrumentalModal()">×</button>
</div>
<div class="pro-studio-modal-body">
<form method="POST" action="studio/create_add_instrumental.php" id="addInstrumentalForm">
<div class="form-group">
<label for="addInstrumentalTitle">Track Title</label>
<input type="text" name="title" id="addInstrumentalTitle" class="form-input" placeholder="e.g., My Song with Instrumental" maxlength="80" required>
</div>
<div class="track-selector">
<label>Select Vocal Track</label>
<div class="track-list" id="vocalTracksList">
<div class="track-option" data-track-id="" data-audio-url="">
<div class="track-option-title">Or Upload New Audio</div>
<div class="track-option-meta">Upload a vocal track</div>
</div>
</div>
<input type="hidden" name="track_id" id="selectedVocalTrackId">
</div>
<div class="form-group">
<label for="addInstrumentalAudioUrl">Or Enter Audio URL</label>
<input type="url" name="audioUrl" id="addInstrumentalAudioUrl" class="form-input" placeholder="https://example.com/vocals.mp3">
</div>
<div class="form-group">
<label for="addInstrumentalAudioFile">Or Upload Audio File</label>
<input type="file" name="audioFile" id="addInstrumentalAudioFile" class="form-input" accept="audio/*">
<small>Supported formats: MP3, WAV, M4A, FLAC (max 50MB)</small>
</div>
<div class="form-group">
<label for="addInstrumentalStyle">Instrumental Style</label>
<textarea name="style" id="addInstrumentalStyle" class="form-input" rows="3" placeholder="e.g., 'Pop, Energetic, Electric guitars and drums' (describe the instrumental you want)"></textarea>
<div class="char-count">0/500</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="addInstrumentalGenre">Genre</label>
<select name="genre" id="addInstrumentalGenre" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="Pop">Pop</option>
<option value="Rock">Rock</option>
<option value="Hip-Hop">Hip-Hop</option>
<option value="Electronic">Electronic</option>
<option value="Jazz">Jazz</option>
<option value="Country">Country</option>
<option value="Classical">Classical</option>
</select>
</div>
<div class="form-group">
<label for="addInstrumentalTempo">Tempo (BPM)</label>
<input type="number" name="tempo" id="addInstrumentalTempo" class="form-input" placeholder="120" min="60" max="200" value="120">
</div>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<i class="fas fa-guitar"></i>
Add Instrumental (3 Credits)
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Replace Section Modal -->
<div class="pro-studio-modal-overlay" id="replaceSectionModalOverlay" style="display: none;">
<div class="pro-studio-modal">
<div class="pro-studio-modal-header">
<h3>🔄 Replace Music Section</h3>
<button class="close-pro-studio-modal" onclick="closeReplaceSectionModal()">×</button>
</div>
<div class="pro-studio-modal-body">
<form method="POST" action="studio/create_replace_section.php" id="replaceSectionForm">
<div class="form-group">
<label for="replaceSectionTitle">Track Title</label>
<input type="text" name="title" id="replaceSectionTitle" class="form-input" placeholder="e.g., Updated Version" maxlength="80" required>
</div>
<div class="track-selector">
<label>Select Track to Edit</label>
<div class="track-list" id="tracksForReplacementList">
<div class="track-option" data-track-id="" data-audio-url="">
<div class="track-option-title">Or Upload New Audio</div>
<div class="track-option-meta">Upload a track to edit</div>
</div>
</div>
<input type="hidden" name="track_id" id="selectedTrackForReplacementId">
</div>
<div class="form-group">
<label for="replaceSectionAudioUrl">Or Enter Audio URL</label>
<input type="url" name="audioUrl" id="replaceSectionAudioUrl" class="form-input" placeholder="https://example.com/track.mp3">
</div>
<div class="form-group">
<label for="replaceSectionAudioFile">Or Upload Audio File</label>
<input type="file" name="audioFile" id="replaceSectionAudioFile" class="form-input" accept="audio/*">
<small>Supported formats: MP3, WAV, M4A, FLAC (max 50MB)</small>
</div>
<div class="form-row">
<div class="form-group">
<label for="replaceSectionType">Section to Replace</label>
<select name="sectionType" id="replaceSectionType" class="form-input" required>
<option value="">Select Section</option>
<option value="verse">Verse</option>
<option value="chorus">Chorus</option>
<option value="bridge">Bridge</option>
<option value="intro">Intro</option>
<option value="outro">Outro</option>
</select>
</div>
<div class="form-group">
<label for="replaceSectionIndex">Section Number</label>
<input type="number" name="sectionIndex" id="replaceSectionIndex" class="form-input" placeholder="1" min="1" value="1" required>
<small>Which occurrence to replace (1st, 2nd, etc.)</small>
</div>
</div>
<div class="form-group">
<label for="replaceSectionPrompt">New Section Description</label>
<textarea name="prompt" id="replaceSectionPrompt" class="form-input" rows="4" placeholder="Describe how you want the new section to sound..." required></textarea>
<div class="char-count">0/1000</div>
</div>
<div class="form-group">
<label for="replaceSectionStyle">Style (Optional)</label>
<input type="text" name="style" id="replaceSectionStyle" class="form-input" placeholder="e.g., Pop, Energetic">
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<i class="fas fa-exchange-alt"></i>
Replace Section (2 Credits)
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Boost Style Modal -->
<div class="pro-studio-modal-overlay" id="boostStyleModalOverlay" style="display: none;">
<div class="pro-studio-modal">
<div class="pro-studio-modal-header">
<h3>🚀 Boost Music Style</h3>
<button class="close-pro-studio-modal" onclick="closeBoostStyleModal()">×</button>
</div>
<div class="pro-studio-modal-body">
<form method="POST" action="studio/create_boost_style.php" id="boostStyleForm">
<div class="form-group">
<label for="boostStyleTitle">Track Title</label>
<input type="text" name="title" id="boostStyleTitle" class="form-input" placeholder="e.g., Enhanced Version" maxlength="80" required>
</div>
<div class="track-selector">
<label>Select Track to Enhance</label>
<div class="track-list" id="tracksForBoostList">
<div class="track-option" data-track-id="" data-audio-url="">
<div class="track-option-title">Or Upload New Audio</div>
<div class="track-option-meta">Upload a track to enhance</div>
</div>
</div>
<input type="hidden" name="track_id" id="selectedTrackForBoostId">
</div>
<div class="form-group">
<label for="boostStyleAudioUrl">Or Enter Audio URL</label>
<input type="url" name="audioUrl" id="boostStyleAudioUrl" class="form-input" placeholder="https://example.com/track.mp3">
</div>
<div class="form-group">
<label for="boostStyleAudioFile">Or Upload Audio File</label>
<input type="file" name="audioFile" id="boostStyleAudioFile" class="form-input" accept="audio/*">
<small>Supported formats: MP3, WAV, M4A, FLAC (max 50MB)</small>
</div>
<div class="form-group">
<label for="boostStyleDescription">Style Description</label>
<textarea name="content" id="boostStyleDescription" class="form-input" rows="3" placeholder="e.g., 'Pop, Mysterious' - Describe the music style you want to enhance" required></textarea>
<div class="char-count">0/500</div>
<small>Describe in concise and clear language the music style you expect</small>
</div>
<div class="form-actions">
<button type="submit" class="btn btn-primary">
<i class="fas fa-rocket"></i>
Boost Style (2 Credits)
</button>
</div>
</form>
</div>
</div>
</div>
<!-- Persona Manager Modal -->
<div class="pro-studio-modal-overlay" id="personaManagerModalOverlay" style="display: none;">
<div class="pro-studio-modal">
<div class="pro-studio-modal-header">
<h3>👤 Persona Manager</h3>
<button class="close-pro-studio-modal" onclick="closePersonaManagerModal()">×</button>
</div>
<div class="pro-studio-modal-body">
<!-- Persona List -->
<div id="personaListSection">
<div class="form-group">
<h4 style="color: #e2e8f0; margin-bottom: 1rem;">Your Personas</h4>
<div id="personasList" class="track-list">
<div class="empty-state" style="text-align: center; padding: 2rem; color: #a0aec0;">
<i class="fas fa-user-circle" style="font-size: 4rem; margin-bottom: 1rem; opacity: 0.5;"></i>
<p>No personas created yet</p>
</div>
</div>
</div>
<div class="form-actions">
<button type="button" class="btn btn-primary" onclick="showCreatePersonaForm()">
<i class="fas fa-plus"></i>
Create New Persona
</button>
</div>
</div>
<!-- Create Persona Form -->
<div id="createPersonaSection" style="display: none;">
<form method="POST" action="studio/create_persona.php" id="createPersonaForm">
<div class="form-group">
<label for="personaName">Persona Name</label>
<input type="text" name="name" id="personaName" class="form-input" placeholder="e.g., My Artist Voice" maxlength="80" required>
</div>
<div class="form-group">
<label for="personaDescription">Description</label>
<textarea name="description" id="personaDescription" class="form-input" rows="3" placeholder="Describe the vocal characteristics of this persona..."></textarea>
<div class="char-count">0/500</div>
</div>
<div class="form-group">
<label for="personaAudioUrl">Reference Audio URL (Optional)</label>
<input type="url" name="audioUrl" id="personaAudioUrl" class="form-input" placeholder="https://example.com/reference.mp3">
<small>Upload a sample audio to help AI understand the persona</small>
</div>
<div class="form-group">
<label for="personaAudioFile">Or Upload Reference Audio</label>
<input type="file" name="audioFile" id="personaAudioFile" class="form-input" accept="audio/*">
<small>Supported formats: MP3, WAV, M4A, FLAC (max 50MB)</small>
</div>
<div class="form-actions">
<button type="button" class="btn" onclick="showPersonaList()" style="background: rgba(255,255,255,0.1); margin-right: 1rem;">
<i class="fas fa-arrow-left"></i>
Cancel
</button>
<button type="submit" class="btn btn-primary">
<i class="fas fa-save"></i>
Create Persona (1 Credit)
</button>
</div>
</form>
</div>
</div>
</div>
</div>
<script>
// Modal Open/Close Functions
function openAddVocalsModal() {
document.getElementById('addVocalsModalOverlay').style.display = 'flex';
document.body.style.overflow = 'hidden';
loadUserTracks('instrumental');
}
function closeAddVocalsModal() {
document.getElementById('addVocalsModalOverlay').style.display = 'none';
document.body.style.overflow = 'auto';
}
function openAddInstrumentalModal() {
document.getElementById('addInstrumentalModalOverlay').style.display = 'flex';
document.body.style.overflow = 'hidden';
loadUserTracks('vocal');
}
function closeAddInstrumentalModal() {
document.getElementById('addInstrumentalModalOverlay').style.display = 'none';
document.body.style.overflow = 'auto';
}
function openReplaceSectionModal() {
document.getElementById('replaceSectionModalOverlay').style.display = 'flex';
document.body.style.overflow = 'hidden';
loadUserTracks('all');
}
function closeReplaceSectionModal() {
document.getElementById('replaceSectionModalOverlay').style.display = 'none';
document.body.style.overflow = 'auto';
}
function openBoostStyleModal() {
document.getElementById('boostStyleModalOverlay').style.display = 'flex';
document.body.style.overflow = 'hidden';
loadUserTracks('all');
}
function closeBoostStyleModal() {
document.getElementById('boostStyleModalOverlay').style.display = 'none';
document.body.style.overflow = 'auto';
}
function openPersonaManagerModal() {
document.getElementById('personaManagerModalOverlay').style.display = 'flex';
document.body.style.overflow = 'hidden';
loadPersonas();
}
function closePersonaManagerModal() {
document.getElementById('personaManagerModalOverlay').style.display = 'none';
document.body.style.overflow = 'auto';
}
// Load user tracks for selection
function loadUserTracks(type = 'all') {
fetch('/api/get_user_tracks.php?type=' + type)
.then(response => response.json())
.then(data => {
if (data.success && data.tracks) {
const listId = type === 'instrumental' ? 'instrumentalTracksList' :
type === 'vocal' ? 'vocalTracksList' :
'tracksForReplacementList';
const listElement = document.getElementById(listId);
if (listElement) {
listElement.innerHTML = '';
data.tracks.forEach(track => {
const option = document.createElement('div');
option.className = 'track-option';
option.setAttribute('data-track-id', track.id);
option.setAttribute('data-audio-url', track.audio_url || '');
option.innerHTML = `
<div class="track-option-title">${track.title || 'Untitled'}</div>
<div class="track-option-meta">${track.music_type || 'Track'} • ${track.duration || 'N/A'}s</div>
`;
option.addEventListener('click', function() {
document.querySelectorAll('#' + listId + ' .track-option').forEach(opt => opt.classList.remove('selected'));
this.classList.add('selected');
const hiddenInput = document.getElementById('selected' + (type === 'instrumental' ? 'Instrumental' : type === 'vocal' ? 'Vocal' : 'TrackForReplacement') + 'TrackId');
if (hiddenInput) {
hiddenInput.value = track.id;
}
});
listElement.appendChild(option);
});
}
}
})
.catch(error => {
console.error('Error loading tracks:', error);
});
}
// Load personas
function loadPersonas() {
fetch('/api/get_personas.php')
.then(response => response.json())
.then(data => {
if (data.success && data.personas) {
const listElement = document.getElementById('personasList');
if (listElement && data.personas.length > 0) {
listElement.innerHTML = '';
data.personas.forEach(persona => {
const option = document.createElement('div');
option.className = 'track-option';
option.innerHTML = `
<div class="track-option-title">${persona.name}</div>
<div class="track-option-meta">${persona.description || 'No description'}</div>
`;
listElement.appendChild(option);
});
}
}
})
.catch(error => {
console.error('Error loading personas:', error);
});
}
// Persona Manager UI
function showCreatePersonaForm() {
document.getElementById('personaListSection').style.display = 'none';
document.getElementById('createPersonaSection').style.display = 'block';
}
function showPersonaList() {
document.getElementById('personaListSection').style.display = 'block';
document.getElementById('createPersonaSection').style.display = 'none';
}
// Close modals when clicking outside
document.addEventListener('DOMContentLoaded', function() {
const modals = document.querySelectorAll('.pro-studio-modal-overlay');
modals.forEach(modal => {
modal.addEventListener('click', function(e) {
if (e.target === modal) {
modal.style.display = 'none';
document.body.style.overflow = 'auto';
}
});
});
// Character count for textareas
const textareas = document.querySelectorAll('#addVocalsForm textarea, #addInstrumentalForm textarea, #replaceSectionForm textarea, #boostStyleForm textarea, #createPersonaForm textarea');
textareas.forEach(textarea => {
const charCount = textarea.parentNode.querySelector('.char-count');
if (charCount) {
const maxLength = textarea.getAttribute('maxlength') || 2000;
textarea.addEventListener('input', function() {
charCount.textContent = this.value.length + '/' + maxLength;
});
}
});
});
</script>