 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/utils/ |
<?php
session_start();
// Check if user is logged in
if (!isset($_SESSION['user_id'])) {
header('Location: /auth/login.php');
exit;
}
require_once 'config/database.php';
$pdo = getDBConnection();
if (!$pdo) {
die('Database connection failed. Please contact support.');
}
// Get user data
$stmt = $pdo->prepare("SELECT name, credits, plan FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$user = $stmt->fetch();
if (!$user) {
session_destroy();
header('Location: /auth/login.php');
exit;
}
$user_name = $user['name'] ?? 'User';
$credits = $user['credits'] ?? 0;
$plan = $user['plan'] ?? 'free';
// Update session credits
$_SESSION['credits'] = $credits;
// Set page variables for header
$current_page = 'create_music';
$page_title = 'Create Music - SoundStudioPro';
$page_description = 'Create professional music with AI. Share your tracks, build your profile, and connect with the music community.';
// Include header
include 'includes/header.php';
?>
<style>
/* Main Content */
.main-content {
margin-top: 10rem;
padding: 4rem 0;
min-height: calc(100vh - 10rem);
}
/* Hero Section */
.hero {
padding: 8rem 0 6rem;
text-align: center;
color: var(--text-primary);
background: var(--bg-primary);
position: relative;
overflow: hidden;
margin-bottom: 4rem;
}
.hero::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100"><defs><pattern id="grid" width="10" height="10" patternUnits="userSpaceOnUse"><path d="M 10 0 L 0 0 0 10" fill="none" stroke="var(--shadow-light)" stroke-width="0.5"/></pattern></defs><rect width="100" height="100" fill="url(%23grid)"/></svg>');
opacity: 0.3;
}
.hero-content {
max-width: 90rem;
margin: 0 auto;
position: relative;
z-index: 2;
}
.hero-badge {
display: inline-block;
background: var(--bg-card);
color: var(--text-primary);
padding: 1.2rem 2.4rem;
border-radius: 50px;
font-size: 1.4rem;
font-weight: 600;
margin-bottom: 3rem;
backdrop-filter: blur(10px);
border: 1px solid var(--border-medium);
}
.hero-title {
font-size: 5.6rem;
font-weight: 900;
line-height: 1.1;
margin-bottom: 2.4rem;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.hero-subtitle {
font-size: 2rem;
font-weight: 400;
margin-bottom: 4rem;
opacity: 0.9;
max-width: 70rem;
margin-left: auto;
margin-right: auto;
color: var(--text-secondary);
}
/* Create Content */
.create-content {
background: var(--bg-secondary);
padding: 6rem 0;
border-radius: 40px 40px 0 0;
margin-top: -2rem;
position: relative;
z-index: 10;
}
.create-container {
max-width: 80rem;
margin: 0 auto;
}
/* User Info */
.user-info {
background: var(--bg-card);
border: 1px solid var(--border-medium);
border-radius: 16px;
padding: 3rem;
margin-bottom: 4rem;
text-align: center;
backdrop-filter: blur(20px);
}
.user-welcome {
font-size: 2.4rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.credits-display {
display: flex;
justify-content: center;
align-items: center;
gap: 2rem;
margin-bottom: 2rem;
}
.credits-number {
font-size: 3.6rem;
font-weight: 900;
background: var(--primary-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.credits-label {
font-size: 1.6rem;
color: var(--text-secondary);
font-weight: 500;
}
.plan-badge {
display: inline-block;
background: var(--accent-gradient);
color: var(--text-primary);
padding: 0.8rem 1.6rem;
border-radius: 20px;
font-size: 1.2rem;
font-weight: 600;
text-transform: uppercase;
}
.plan-badge.pro {
background: var(--primary-gradient);
}
.plan-badge.starter {
background: var(--secondary-gradient);
}
/* Create Form */
.create-form {
background: var(--bg-card);
border: 1px solid var(--border-light);
border-radius: 24px;
padding: 4rem;
backdrop-filter: blur(20px);
}
.form-header {
text-align: center;
margin-bottom: 4rem;
}
.form-title {
font-size: 3.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.form-subtitle {
font-size: 1.6rem;
color: var(--text-secondary);
}
.form-group {
margin-bottom: 3rem;
}
.form-label {
display: block;
font-size: 1.6rem;
font-weight: 600;
margin-bottom: 1rem;
color: var(--text-primary);
}
.form-input,
.form-textarea,
.form-select { background: var(--bg-secondary);
color: var(--text-primary);
font-size: 1.6rem;
transition: all 0.3s ease;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: var(--primary-gradient);
background: var(--bg-card);
box-shadow: 0 0 20px var(--shadow-medium);
}
.form-textarea {
min-height: 15rem;
resize: vertical;
}
.form-input::placeholder,
.form-textarea::placeholder {
color: var(--text-muted);
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 2rem;
}
.form-row-3 {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 2rem;
}
.submit-btn {
background: var(--primary-gradient);
color: var(--text-primary);
border: none;
padding: 2rem 3rem;
border-radius: 16px;
font-size: 1.8rem;
font-weight: 700;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 1rem;
}
.submit-btn:hover:not(:disabled) {
transform: translateY(-3px);
box-shadow: var(--shadow-medium);
}
.submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* Loading States */
.loading-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--bg-overlay);
display: none;
justify-content: center;
align-items: center;
z-index: 9999;
}
.loading-content {
background: var(--bg-card);
backdrop-filter: blur(20px);
border: 1px solid var(--border-medium);
border-radius: 20px;
padding: 4rem;
text-align: center;
color: var(--text-primary);
max-width: 50rem;
}
.loading-spinner {
width: 6rem;
height: 6rem;
border: 4px solid var(--bg-card);
border-top: 4px solid var(--text-accent);
border-radius: 50%;
animation: spin 1s linear infinite;
margin: 0 auto 2rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.loading-title {
font-size: 2.4rem;
font-weight: 700;
margin-bottom: 1rem;
}
.loading-subtitle {
font-size: 1.6rem;
color: var(--text-secondary);
margin-bottom: 2rem;
}
.loading-progress {
background: var(--bg-card);
border-radius: 10px;
height: 8px;
overflow: hidden;
margin-bottom: 2rem;
}
.loading-bar {
height: 100%;
background: linear-gradient(90deg, var(--text-accent), var(--text-accent));
width: 0%;
transition: width 0.3s ease;
}
/* Results Section */
.results-section {
margin-top: 4rem;
display: none;
}
.results-header {
text-align: center;
margin-bottom: 3rem;
}
.results-title {
font-size: 3.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 1rem;
}
.results-subtitle {
font-size: 1.6rem;
color: var(--text-secondary);
}
.audio-player {
background: var(--bg-card);
padding: 3rem;
border-radius: 20px;
margin-bottom: 2rem;
border: 1px solid var(--bg-card);
}
.audio-player audio {
width: 100%;
border-radius: 12px;
}
.action-buttons {
display: flex;
gap: 2rem;
justify-content: center;
flex-wrap: wrap;
}
.action-btn {
display: inline-flex;
align-items: center;
gap: 1rem;
padding: 1.5rem 3rem;
border-radius: 12px;
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
font-size: 1.6rem;
}
.download-btn {
background: linear-gradient(135deg, #48bb78, #38a169);
color: var(--text-primary);
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-medium);
}
.library-btn {
background: var(--bg-card);
color: var(--text-primary);
border: 2px solid var(--border-medium);
}
.library-btn:hover {
background: var(--border-medium);
transform: translateY(-2px);
}
.create-another-btn {
background: linear-gradient(135deg, var(--text-accent), var(--text-accent));
color: var(--text-primary);
}
.create-another-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px var(--glow-accent);
}
/* Messages */
.message {
padding: 2rem;
border-radius: 12px;
margin-bottom: 2rem;
font-weight: 600;
}
.message.error {
background: rgba(245, 101, 101, 0.1);
border: 1px solid rgba(245, 101, 101, 0.3);
color: var(--text-primary);
}
.message.success {
background: rgba(72, 187, 120, 0.1);
border: 1px solid rgba(72, 187, 120, 0.3);
color: var(--text-primary);
}
.message.warning {
background: rgba(237, 137, 54, 0.1);
border: 1px solid rgba(237, 137, 54, 0.3);
color: var(--text-primary);
}
/* Responsive */
@media (max-width: 768px) {
.hero-title {
font-size: 4rem;
}
.form-row,
.form-row-3 {
grid-template-columns: 1fr;
}
.create-form {
padding: 2rem;
}
.action-buttons {
flex-direction: column;
}
}
</style>
<!-- Hero Section -->
<section class="hero">
<div class="container">
<div class="hero-content">
<div class="hero-badge">🎵 Create Music</div>
<h1 class="hero-title">Create Professional AI Music</h1>
<p class="hero-subtitle">Create studio-quality music with advanced AI. Choose from multiple models and create tracks that match your creative vision. Share with the community and build your professional profile.</p>
</div>
</div>
</section>
<!-- Create Content -->
<section class="create-content">
<div class="container">
<div class="create-container">
<!-- User Info -->
<div class="user-info">
<div class="user-welcome">Welcome back, <?= htmlspecialchars($user_name) ?>!</div>
<div class="credits-display">
<div>
<div class="credits-number"><?= $credits ?></div>
<div class="credits-label">Credits Available</div>
</div>
<div class="plan-badge <?= $plan ?>"><?= ucfirst($plan) ?></div>
</div>
<?php if ($credits < 1): ?>
<div class="message warning">
⚠️ You need at least 1 credit to create music. <a href="/pricing.php" style="color: var(--text-primary);">Get more credits</a>
</div>
<?php endif; ?>
</div>
<!-- Create Form -->
<div class="create-form">
<div class="form-header">
<h2 class="form-title">Create Your Music</h2>
<p class="form-subtitle">Describe your vision and let AI bring it to life</p>
</div>
<form id="musicForm">
<div class="form-group">
<label class="form-label">Track Title</label>
<input type="text" class="form-input" id="title" placeholder="Enter a title for your track (e.g., 'Summer Vibes', 'Night Drive')" required>
</div>
<div class="form-group">
<label class="form-label">Music Description</label>
<textarea class="form-textarea" id="prompt" placeholder="Describe the music you want to create. Be specific about genre, mood, instruments, tempo, etc. Example: 'An upbeat electronic dance track with heavy bass, synthesizers, and a driving beat. Should be energetic and perfect for a workout playlist.'" required></textarea>
</div>
<div class="form-row">
<div class="form-group">
<label class="form-label">Style</label>
<select class="form-select" id="style">
<option value="Pop">Pop</option>
<option value="Rock">Rock</option>
<option value="Electronic">Electronic</option>
<option value="Hip Hop">Hip Hop</option>
<option value="Jazz">Jazz</option>
<option value="Classical">Classical</option>
<option value="Country">Country</option>
<option value="R&B">R&B</option>
<option value="Reggae">Reggae</option>
<option value="Blues">Blues</option>
<option value="Folk">Folk</option>
<option value="Metal">Metal</option>
<option value="Punk">Punk</option>
<option value="Indie">Indie</option>
<option value="Ambient">Ambient</option>
<option value="Chill">Chill</option>
<option value="EDM">EDM</option>
<option value="House">House</option>
<option value="Techno">Techno</option>
<option value="Trance">Trance</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Duration (seconds)</label>
<input type="number" class="form-input" id="duration" value="30" min="10" max="300" required>
</div>
</div>
<div class="form-row-3">
<div class="form-group">
<label class="form-label">Model Version</label>
<select class="form-select" id="modelVersion">
<option value="V4_5">Studio Pro (Best Quality)</option>
<option value="V4">Studio Elite (Premium)</option>
<option value="V3_5">Studio Advanced (Professional)</option>
<option value="V3">Studio Classic (Standard)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Tempo</label>
<select class="form-select" id="tempo">
<option value="">Auto</option>
<option value="slow">Slow (60-80 BPM)</option>
<option value="medium">Medium (80-120 BPM)</option>
<option value="fast">Fast (120-160 BPM)</option>
<option value="very-fast">Very Fast (160+ BPM)</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Mood</label>
<select class="form-select" id="mood">
<option value="">Auto</option>
<option value="happy">Happy</option>
<option value="sad">Sad</option>
<option value="energetic">Energetic</option>
<option value="calm">Calm</option>
<option value="mysterious">Mysterious</option>
<option value="romantic">Romantic</option>
<option value="aggressive">Aggressive</option>
</select>
</div>
</div>
<button type="submit" class="submit-btn" id="createBtn" <?= $credits < 1 ? 'disabled' : '' ?>>
<span id="loading" style="display: none;">
<i class="fas fa-spinner fa-spin"></i> Creating Music...
</span>
<span id="createText">
<i class="fas fa-magic"></i> Create Music
</span>
</button>
</form>
<!-- Results Section -->
<div id="results" class="results-section">
<div class="results-header">
<h3 class="results-title">Your Music is Ready!</h3>
<p class="results-subtitle">Listen to your creation and download it to your library</p>
</div>
<div id="audioPlayer" class="audio-player">
<audio id="audioElement" controls>
Your browser does not support the audio element.
</audio>
</div>
<div class="action-buttons">
<a id="downloadBtn" href="#" class="action-btn download-btn">
<i class="fas fa-download"></i> Download MP3
</a>
<a href="/library.php" class="action-btn library-btn">
<i class="fas fa-music"></i> View Library
</a>
<button onclick="resetForm()" class="action-btn create-another-btn">
<i class="fas fa-plus"></i> Create Another
</button>
</div>
</div>
</div>
</div>
</div>
</section>
<!-- Loading Overlay -->
<div class="loading-overlay" id="loadingOverlay">
<div class="loading-content">
<div class="loading-spinner"></div>
<h3 class="loading-title">Creating Your Music</h3>
<p class="loading-subtitle" id="loadingMessage">This may take 2-3 minutes...</p>
<div class="loading-progress">
<div class="loading-bar" id="loadingBar"></div>
</div>
<p style="font-size: 1.4rem; color: var(--text-secondary);">Please don't close this page</p>
</div>
</div>
<script>
// Secure API Configuration
const API_ENDPOINT = window.location.protocol + '//' + window.location.host + '/api.php';
// DOM Elements
const musicForm = document.getElementById('musicForm');
const createBtn = document.getElementById('createBtn');
const loading = document.getElementById('loading');
const results = document.getElementById('results');
const audioElement = document.getElementById('audioElement');
const downloadBtn = document.getElementById('downloadBtn');
const loadingOverlay = document.getElementById('loadingOverlay');
const loadingMessage = document.getElementById('loadingMessage');
const loadingBar = document.getElementById('loadingBar');
// Form submission handler
musicForm.addEventListener('submit', async (e) => {
e.preventDefault();
const title = document.getElementById('title').value;
const prompt = document.getElementById('prompt').value;
const style = document.getElementById('style').value;
const duration = document.getElementById('duration').value;
const modelVersion = document.getElementById('modelVersion').value;
const tempo = document.getElementById('tempo').value;
const mood = document.getElementById('mood').value;
// Show loading overlay
loadingOverlay.style.display = 'flex';
createBtn.disabled = true;
loading.style.display = 'block';
results.style.display = 'none';
// Clear any previous messages
const messages = document.querySelectorAll('.message');
messages.forEach(msg => msg.remove());
try {
// Prepare request data
const requestData = {
type: 'music',
title: title,
prompt: prompt,
model: modelVersion,
style: style,
duration: parseInt(duration),
instrumental: false,
customMode: true,
tempo: tempo,
mood: mood
};
console.log('Sending request:', requestData);
// Make API request
const response = await fetch(API_ENDPOINT, {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(requestData)
});
if (!response.ok) {
const errorText = await response.text();
throw new Error(`HTTP error! status: ${response.status}, message: ${errorText}`);
}
const result = await response.json();
if (!result.success) {
throw new Error(result.error || 'Unknown error occurred');
}
// Check if this is a processing response (callback-based)
if (result.data && result.data.status === 'processing' && result.data.taskId) {
// Start polling for results
pollForResults(result.data.taskId);
} else {
// Direct result (for non-callback operations)
displayResults(result.data);
}
} catch (error) {
console.error('Error creating music:', error);
// Show error message
const errorDiv = document.createElement('div');
errorDiv.className = 'message error';
errorDiv.innerHTML = `<strong>Error:</strong> ${error.message}`;
const form = document.getElementById('musicForm');
form.insertBefore(errorDiv, form.firstChild);
// Hide loading
loadingOverlay.style.display = 'none';
createBtn.disabled = false;
loading.style.display = 'none';
}
});
// Poll for task results
async function pollForResults(taskId) {
const maxAttempts = 60; // 5 minutes with 5-second intervals
let attempts = 0;
const pollInterval = setInterval(async () => {
attempts++;
// Update loading progress
const progress = Math.min((attempts / maxAttempts) * 100, 95);
loadingBar.style.width = progress + '%';
// Update loading message
loadingMessage.textContent = `Creating your music... (${attempts}/${maxAttempts})`;
try {
const response = await fetch(`/get_result.php?taskId=${taskId}`, {
method: 'GET',
headers: {
'Content-Type': 'application/json'
}
});
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const result = await response.json();
if (result.success && result.status === 'complete') {
clearInterval(pollInterval);
loadingBar.style.width = '100%';
loadingMessage.textContent = 'Music created successfully!';
setTimeout(() => {
displayResults(result.data);
loadingOverlay.style.display = 'none';
createBtn.disabled = false;
loading.style.display = 'none';
}, 1000);
} else if (result.success && result.status === 'processing') {
// Check if we've exceeded max attempts
if (attempts >= maxAttempts) {
clearInterval(pollInterval);
throw new Error('Music generation timed out. Please try again.');
}
} else {
throw new Error(result.error || 'Unknown error occurred');
}
} catch (error) {
clearInterval(pollInterval);
console.error('Polling error:', error);
const errorDiv = document.createElement('div');
errorDiv.className = 'message error';
errorDiv.innerHTML = `<strong>Polling Error:</strong> ${error.message}`;
const form = document.getElementById('musicForm');
form.insertBefore(errorDiv, form.firstChild);
loadingOverlay.style.display = 'none';
createBtn.disabled = false;
loading.style.display = 'none';
}
}, 5000); // Poll every 5 seconds
}
// Display results
function displayResults(data) {
results.style.display = 'block';
console.log('Displaying results:', data);
// Handle api.box callback data format
if (data && data.audio_url) {
audioElement.src = data.audio_url;
downloadBtn.href = data.audio_url;
downloadBtn.download = 'soundstudiopro-creation.mp3';
} else if (data && data.data && data.data.audio_url) {
// Nested data format from callback
audioElement.src = data.data.audio_url;
downloadBtn.href = data.data.audio_url;
downloadBtn.download = 'soundstudiopro-creation.mp3';
} else {
// Fallback for other types
const audioPlayer = document.getElementById('audioPlayer');
audioPlayer.innerHTML = `
<div style="color: var(--text-primary); text-align: center; padding: 2rem;">
<h4 style="margin-bottom: 1rem;">Processing Complete!</h4>
<p>Your music has been generated successfully.</p>
<p style="font-size: 1.4rem; color: var(--text-secondary); margin-top: 1rem;">Check the console for detailed response data.</p>
</div>
`;
console.log('API Response:', data);
}
// Scroll to results
results.scrollIntoView({ behavior: 'smooth' });
}
// Reset form for creating another track
function resetForm() {
musicForm.reset();
results.style.display = 'none';
// Clear any messages
const messages = document.querySelectorAll('.message');
messages.forEach(msg => msg.remove());
// Scroll to top
window.scrollTo({ top: 0, behavior: 'smooth' });
}
// Update credits display after successful creation
function updateCreditsDisplay() {
const creditsElement = document.querySelector('.credits-number');
if (creditsElement) {
const currentCredits = parseInt(creditsElement.textContent);
creditsElement.textContent = currentCredits - 1;
}
}
</script>
<?php include 'includes/footer.php'; ?>