 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/.cursor-server/data/User/History/-7b13a148/ |
<?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();
// Get user info
$stmt = $pdo->prepare("SELECT name, credits FROM users WHERE id = ?");
$stmt->execute([$_SESSION['user_id']]);
$user = $stmt->fetch();
$user_name = $user['name'] ?? 'User';
$credits = $user['credits'] ?? 0;
// Update session credits
$_SESSION['credits'] = $credits;
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Create Music - SoundStudioPro</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 50%, #0a0a0a 100%);
color: white;
min-height: 100vh;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem;
}
.header {
text-align: center;
margin-bottom: 3rem;
}
.logo {
font-size: 2.5rem;
font-weight: 900;
background: linear-gradient(135deg, #667eea, #764ba2);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
margin-bottom: 1rem;
}
.credits-display {
background: rgba(102, 126, 234, 0.1);
border: 1px solid rgba(102, 126, 234, 0.3);
border-radius: 12px;
padding: 1rem 2rem;
display: inline-block;
margin-bottom: 2rem;
}
.credits-number {
font-size: 2rem;
font-weight: 900;
color: #667eea;
}
.credits-label {
font-size: 1rem;
color: #a0aec0;
}
.create-form {
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
border-radius: 20px;
padding: 3rem;
backdrop-filter: blur(20px);
max-width: 800px;
margin: 0 auto;
}
.form-group {
margin-bottom: 2rem;
}
.form-label {
display: block;
font-size: 1.1rem;
font-weight: 600;
margin-bottom: 0.5rem;
color: white;
}
.form-input,
.form-textarea,
.form-select {
width: 100%;
padding: 1rem 1.5rem;
border: 2px solid rgba(255, 255, 255, 0.1);
border-radius: 10px;
background: rgba(255, 255, 255, 0.05);
color: white;
font-size: 1rem;
transition: all 0.3s ease;
}
.form-input:focus,
.form-textarea:focus,
.form-select:focus {
outline: none;
border-color: #667eea;
background: rgba(255, 255, 255, 0.1);
}
.form-textarea {
min-height: 120px;
resize: vertical;
}
.form-select option {
background: #2d2d2d;
color: white;
}
.form-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 1rem;
}
.submit-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 1.5rem 3rem;
border-radius: 12px;
font-size: 1.2rem;
font-weight: 700;
cursor: pointer;
width: 100%;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.submit-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(102, 126, 234, 0.4);
}
.submit-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.loading {
display: none;
text-align: center;
margin-top: 2rem;
}
.loading-spinner {
border: 3px solid rgba(255, 255, 255, 0.1);
border-top: 3px solid #667eea;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 1rem;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.results {
display: none;
margin-top: 2rem;
text-align: center;
}
.audio-player {
background: rgba(255, 255, 255, 0.05);
padding: 2rem;
border-radius: 15px;
margin-bottom: 1rem;
}
.audio-player audio {
width: 100%;
border-radius: 10px;
}
.download-btn {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 1rem 2rem;
background: linear-gradient(135deg, #48bb78, #38a169);
color: white;
text-decoration: none;
border-radius: 10px;
font-weight: 600;
transition: all 0.3s ease;
}
.download-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(72, 187, 120, 0.3);
}
.error {
background: rgba(245, 101, 101, 0.1);
border: 1px solid rgba(245, 101, 101, 0.3);
color: #f56565;
padding: 1rem;
border-radius: 10px;
margin-top: 1rem;
}
.success {
background: rgba(72, 187, 120, 0.1);
border: 1px solid rgba(72, 187, 120, 0.3);
color: #48bb78;
padding: 1rem;
border-radius: 10px;
margin-top: 1rem;
}
.nav-links {
text-align: center;
margin-top: 2rem;
}
.nav-links a {
color: #667eea;
text-decoration: none;
margin: 0 1rem;
font-weight: 500;
}
.nav-links a:hover {
text-decoration: underline;
}
@media (max-width: 768px) {
.form-row {
grid-template-columns: 1fr;
}
.create-form {
padding: 2rem;
}
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<div class="logo">🎵 SoundStudioPro</div>
<div class="credits-display">
<div class="credits-number"><?= $credits ?></div>
<div class="credits-label">Credits Available</div>
</div>
<h1>Create Professional AI Music</h1>
<p>Generate studio-quality music with custom prompts and advanced settings.</p>
</div>
<div class="create-form">
<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">Music Type</label>
<select class="form-select" id="musicType" required>
<option value="">Select music type</option>
<option value="music">AI Music Generation</option>
<option value="lyrics">Lyrics Generation</option>
<option value="wav">WAV Conversion</option>
<option value="vocal-removal">Vocal Removal</option>
<option value="music-video">Music Video Generation</option>
<option value="extend">Track Extension</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Model Version</label>
<select class="form-select" id="modelVersion">
<option value="V3_5">V3.5 (Latest)</option>
<option value="V3">V3 (Stable)</option>
<option value="V2">V2 (Classic)</option>
</select>
</div>
</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">
<div class="form-group">
<label class="form-label">Instrumental</label>
<select class="form-select" id="instrumental">
<option value="false">With Vocals</option>
<option value="true">Instrumental Only</option>
</select>
</div>
<div class="form-group">
<label class="form-label">Custom Mode</label>
<select class="form-select" id="customMode">
<option value="true">Enabled (Advanced)</option>
<option value="false">Disabled (Simple)</option>
</select>
</div>
</div>
<button type="submit" class="submit-btn" id="createBtn">
<i class="fas fa-magic"></i>
<span id="btnText">Create Music</span>
</button>
</form>
<div class="loading" id="loading">
<div class="loading-spinner"></div>
<p>Creating your music... This may take 2-3 minutes.</p>
<p id="loadingStatus">Initializing...</p>
</div>
<div class="results" id="results">
<h3>Your Music is Ready!</h3>
<div class="audio-player" id="audioPlayer">
<audio id="audioElement" controls>
Your browser does not support the audio element.
</audio>
</div>
<a id="downloadBtn" href="#" class="download-btn">
<i class="fas fa-download"></i> Download MP3
</a>
</div>
</div>
<div class="nav-links">
<a href="/dashboard.php">Dashboard</a>
<a href="/library_new.php">My Library</a>
<a href="/auth/logout.php">Logout</a>
</div>
</div>
<script>
const musicForm = document.getElementById('musicForm');
const createBtn = document.getElementById('createBtn');
const btnText = document.getElementById('btnText');
const loading = document.getElementById('loading');
const loadingStatus = document.getElementById('loadingStatus');
const results = document.getElementById('results');
const audioElement = document.getElementById('audioElement');
const downloadBtn = document.getElementById('downloadBtn');
let currentTaskId = null;
let pollInterval = null;
musicForm.addEventListener('submit', async (e) => {
e.preventDefault();
const formData = {
type: document.getElementById('musicType').value,
title: document.getElementById('title').value,
prompt: document.getElementById('prompt').value,
model: document.getElementById('modelVersion').value,
duration: parseInt(document.getElementById('duration').value)
};
// Show loading
createBtn.disabled = true;
btnText.textContent = 'Creating...';
loading.style.display = 'block';
results.style.display = 'none';
try {
console.log('Sending request:', formData);
const response = await fetch('/api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify(formData)
});
const result = await response.json();
console.log('API Response:', result);
if (result.success && result.data && result.data.taskId) {
currentTaskId = result.data.taskId;
loadingStatus.textContent = 'Music generation started. Polling for results...';
startPolling();
} else {
throw new Error(result.error || 'Failed to create music');
}
} catch (error) {
console.error('Error:', error);
showError('Error creating music: ' + error.message);
resetForm();
}
});
function startPolling() {
let attempts = 0;
const maxAttempts = 60; // 5 minutes
pollInterval = setInterval(async () => {
attempts++;
loadingStatus.textContent = `Checking status... (Attempt ${attempts}/${maxAttempts})`;
try {
const response = await fetch(`/get_result.php?taskId=${currentTaskId}`);
const result = await response.json();
if (result.success && result.status === 'complete') {
clearInterval(pollInterval);
showResults(result.data);
resetForm();
} else if (result.success && result.status === 'processing') {
if (attempts >= maxAttempts) {
clearInterval(pollInterval);
showError('Music generation timed out. Please try again.');
resetForm();
}
} else {
throw new Error(result.error || 'Unknown error');
}
} catch (error) {
clearInterval(pollInterval);
console.error('Polling error:', error);
showError('Error checking status: ' + error.message);
resetForm();
}
}, 5000); // Poll every 5 seconds
}
function showResults(data) {
results.style.display = 'block';
if (data && data.audio_url) {
audioElement.src = data.audio_url;
downloadBtn.href = data.audio_url;
downloadBtn.download = 'soundstudiopro-creation.mp3';
} else {
document.getElementById('audioPlayer').innerHTML = `
<div style="color: white; text-align: center; padding: 2rem;">
<h4>Processing Complete!</h4>
<p>Your music has been generated successfully.</p>
<p style="font-size: 1.4rem; color: #a0aec0; margin-top: 1rem;">Check your library for the complete track.</p>
</div>
`;
}
}
function showError(message) {
const errorDiv = document.createElement('div');
errorDiv.className = 'error';
errorDiv.textContent = message;
musicForm.appendChild(errorDiv);
setTimeout(() => {
errorDiv.remove();
}, 5000);
}
function resetForm() {
createBtn.disabled = false;
btnText.textContent = 'Create Music';
loading.style.display = 'none';
}
</script>
</body>
</html>