 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/gocodeme.com/public_html/BACKUP/ |
<?php
header('Content-Type: text/html; charset=utf-8');
?>
<!DOCTYPE html>
<html>
<head>
<title>MusicStudio Pro - Complete Demo</title>
<style>
body {
font-family: 'Inter', Arial, sans-serif;
margin: 0;
background: #0a0a0a;
color: white;
line-height: 1.6;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.header {
text-align: center;
margin-bottom: 40px;
padding: 40px 0;
background: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
border-radius: 20px;
}
.success { color: #48bb78; }
.error { color: #f56565; }
.warning { color: #ed8936; }
.info { color: #4299e1; }
.demo-section {
border: 1px solid #333;
padding: 30px;
margin: 30px 0;
border-radius: 15px;
background: #1a1a1a;
}
.btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
padding: 15px 30px;
border: none;
border-radius: 10px;
cursor: pointer;
font-size: 16px;
margin: 10px 5px;
text-decoration: none;
display: inline-block;
transition: all 0.3s ease;
}
.btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 25px rgba(102, 126, 234, 0.3);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.audio-player {
margin: 20px 0;
padding: 25px;
background: #2d2d2d;
border-radius: 15px;
border: 1px solid #444;
}
.demo-note {
background: rgba(237, 137, 54, 0.1);
border: 1px solid #ed8936;
padding: 20px;
border-radius: 10px;
margin: 20px 0;
}
.lyrics-display {
background: #2d2d2d;
padding: 20px;
border-radius: 10px;
white-space: pre-line;
font-family: 'Courier New', monospace;
line-height: 1.8;
border: 1px solid #444;
}
.form-group {
margin-bottom: 20px;
}
.form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
}
.form-group input, .form-group textarea, .form-group select {
width: 100%;
padding: 12px;
background: #2d2d2d;
border: 1px solid #444;
border-radius: 8px;
color: white;
font-size: 16px;
}
.form-group textarea {
min-height: 100px;
resize: vertical;
}
.loading {
text-align: center;
padding: 40px;
color: #a0aec0;
}
.spinner {
border: 4px solid #333;
border-top: 4px solid #667eea;
border-radius: 50%;
width: 40px;
height: 40px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.feature-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin: 30px 0;
}
.feature-card {
background: #2d2d2d;
padding: 25px;
border-radius: 15px;
border: 1px solid #444;
}
.feature-icon {
font-size: 3rem;
margin-bottom: 15px;
color: #667eea;
}
</style>
</head>
<body>
<div class="container">
<div class="header">
<h1>๐ต MusicStudio Pro - Complete Demo</h1>
<p>Experience the full power of AI music creation</p>
</div>
<div class="demo-note">
<h3>โ ๏ธ Demo Mode Active</h3>
<p>Since the Suno API is temporarily unavailable, this demo uses sample data to showcase the MusicStudio Pro interface and functionality. In production, this would generate real AI music and lyrics based on your prompts.</p>
</div>
<div class="demo-section">
<h2>๐ผ Create AI Music</h2>
<p>Generate original music tracks with AI:</p>
<form id="musicForm">
<div class="form-group">
<label for="musicPrompt">Music Description:</label>
<textarea id="musicPrompt" placeholder="Describe the music you want to create. Be specific about genre, mood, instruments, tempo, etc.">A peaceful acoustic guitar melody with soft vocals, perfect for a romantic evening. Include gentle piano accompaniment and warm harmonies.</textarea>
</div>
<div class="form-group">
<label for="musicDuration">Duration (seconds):</label>
<input type="number" id="musicDuration" value="45" min="10" max="600">
</div>
<button type="submit" class="btn">๐ต Generate Music</button>
</form>
<div id="musicResult" style="display: none;"></div>
<div id="musicLoading" style="display: none;" class="loading">
<div class="spinner"></div>
<h3>Creating your music...</h3>
<p>This may take a few moments...</p>
</div>
</div>
<div class="demo-section">
<h2>๐ Generate Lyrics</h2>
<p>Create original song lyrics with AI:</p>
<form id="lyricsForm">
<div class="form-group">
<label for="lyricsPrompt">Lyrics Description:</label>
<textarea id="lyricsPrompt" placeholder="Describe the type of lyrics you want. Include theme, mood, style, etc.">Write lyrics for an uplifting pop song about following your dreams and never giving up. Include a catchy chorus and inspiring verses.</textarea>
</div>
<button type="submit" class="btn">๐ Generate Lyrics</button>
</form>
<div id="lyricsResult" style="display: none;"></div>
<div id="lyricsLoading" style="display: none;" class="loading">
<div class="spinner"></div>
<h3>Creating your lyrics...</h3>
<p>This may take a few moments...</p>
</div>
</div>
<div class="demo-section">
<h2>โจ Features Overview</h2>
<div class="feature-grid">
<div class="feature-card">
<div class="feature-icon">๐ต</div>
<h3>AI Music Generation</h3>
<p>Create original music tracks with custom prompts. Generate instrumental or lyrical tracks with multiple model versions.</p>
</div>
<div class="feature-card">
<div class="feature-icon">๐</div>
<h3>Lyrics Generation</h3>
<p>Generate song lyrics independently based on your prompts. Get multiple variations with suggested titles and themes.</p>
</div>
<div class="feature-card">
<div class="feature-icon">๐๏ธ</div>
<h3>WAV Conversion</h3>
<p>Convert your tracks to high-quality, lossless WAV format perfect for professional audio editing and mastering.</p>
</div>
<div class="feature-card">
<div class="feature-icon">๐ค</div>
<h3>Vocal Removal</h3>
<p>Separate vocals from music tracks. Get original, instrumental, and vocal components for remixing and karaoke.</p>
</div>
<div class="feature-card">
<div class="feature-icon">๐ฌ</div>
<h3>Music Video Generation</h3>
<p>Create MP4 videos with visual effects synchronized to your music. Perfect for social media sharing and marketing.</p>
</div>
<div class="feature-card">
<div class="feature-icon">๐</div>
<h3>Track Extension</h3>
<p>Extend existing tracks from specific timestamps. Build upon your musical ideas seamlessly with AI assistance.</p>
</div>
</div>
</div>
<div class="demo-section">
<h2>๐ Quick Access</h2>
<a href="musicstudio.html" class="btn">๐ต Full MusicStudio Pro Interface</a>
<a href="test_music_creation.php" class="btn btn-secondary">๐งช Simple Test Page</a>
<a href="diagnostic.php" class="btn btn-secondary">๐ง Server Diagnostic</a>
<a href="test_suno_api.php" class="btn btn-secondary">๐ API Status</a>
</div>
</div>
<script>
// Music Generation
document.getElementById('musicForm').addEventListener('submit', async function(e) {
e.preventDefault();
const prompt = document.getElementById('musicPrompt').value;
const duration = document.getElementById('musicDuration').value;
document.getElementById('musicLoading').style.display = 'block';
document.getElementById('musicResult').style.display = 'none';
try {
const response = await fetch('api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
action: 'music',
prompt: prompt,
model: 'v3',
duration: parseInt(duration)
})
});
const data = await response.json();
document.getElementById('musicLoading').style.display = 'none';
if (data.success) {
const resultDiv = document.getElementById('musicResult');
resultDiv.innerHTML = `
<div class="audio-player">
<h3>๐ต ${data.data.title}</h3>
<p><strong>Duration:</strong> ${data.data.duration} seconds</p>
<p><strong>Prompt:</strong> ${data.data.prompt}</p>
<audio controls style="width: 100%; margin: 20px 0;">
<source src="${data.data.audio_url}" type="audio/wav">
Your browser does not support the audio element.
</audio>
<a href="${data.data.audio_url}" download class="btn">โฌ๏ธ Download Audio</a>
${data.data.demo ? '<p class="warning">โ ๏ธ This is demo audio (Suno API unavailable)</p>' : ''}
</div>
`;
resultDiv.style.display = 'block';
} else {
alert('Error: ' + data.error);
}
} catch (error) {
document.getElementById('musicLoading').style.display = 'none';
alert('Error: ' + error.message);
}
});
// Lyrics Generation
document.getElementById('lyricsForm').addEventListener('submit', async function(e) {
e.preventDefault();
const prompt = document.getElementById('lyricsPrompt').value;
document.getElementById('lyricsLoading').style.display = 'block';
document.getElementById('lyricsResult').style.display = 'none';
try {
const response = await fetch('api.php', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({
action: 'lyrics',
prompt: prompt
})
});
const data = await response.json();
document.getElementById('lyricsLoading').style.display = 'none';
if (data.success) {
const resultDiv = document.getElementById('lyricsResult');
resultDiv.innerHTML = `
<div class="audio-player">
<h3>๐ ${data.data.title}</h3>
<p><strong>Prompt:</strong> ${data.data.prompt}</p>
<div class="lyrics-display">${data.data.lyrics}</div>
${data.data.demo ? '<p class="warning">โ ๏ธ These are demo lyrics (Suno API unavailable)</p>' : ''}
</div>
`;
resultDiv.style.display = 'block';
} else {
alert('Error: ' + data.error);
}
} catch (error) {
document.getElementById('lyricsLoading').style.display = 'none';
alert('Error: ' + error.message);
}
});
</script>
</body>
</html>