 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();
}
require_once __DIR__ . '/translations.php';
?>
<div class="create-music-modal-overlay" id="createMusicModalOverlay" style="display: none;">
<div class="create-music-modal">
<div class="create-music-modal-header">
<h3>🎵 <?= t('btn.create_music') ?></h3>
<button class="close-create-music-modal" onclick="closeCreateMusicModal()">×</button>
</div>
<div class="create-music-modal-body">
<form method="POST" action="create_music.php" id="musicFormModal" accept-charset="UTF-8">
<?php
// SECURITY: CSRF Token
require_once __DIR__ . '/security.php';
?>
<input type="hidden" name="csrf_token" value="<?= htmlspecialchars(generateCSRFToken(), ENT_QUOTES, 'UTF-8') ?>">
<input type="hidden" name="type" value="music">
<input type="hidden" name="model_name" value="V5">
<input type="hidden" name="duration" value="360">
<input type="hidden" name="customMode" value="false">
<!-- Mode Selection -->
<div class="mode-selector">
<div class="mode-option active" data-mode="simple">
<i class="fas fa-magic"></i>
<span><?= t('create.simple_mode') ?></span>
<small><?= t('create.simple_mode_desc') ?></small>
<div class="mode-cost">1 <?= t('create.credit') ?></div>
</div>
<div class="mode-option" data-mode="advanced">
<i class="fas fa-sliders-h"></i>
<span><?= t('create.advanced_mode') ?></span>
<small><?= t('create.advanced_mode_desc') ?></small>
<div class="mode-cost">1 <?= t('create.credit') ?></div>
</div>
<div class="mode-option" data-mode="pro">
<i class="fas fa-cogs"></i>
<span><?= t('create.pro_mode') ?></span>
<small><?= t('create.pro_mode_desc') ?></small>
<div class="mode-cost">1 <?= t('create.credit') ?></div>
</div>
</div>
<!-- Simple Mode Form -->
<div id="simpleForm" class="form-mode active">
<div class="form-group">
<label for="simpleTitle"><?= t('create.song_title_optional') ?></label>
<input type="text" name="title" id="simpleTitle" class="form-input" placeholder="<?= t('create.song_title_placeholder') ?>" maxlength="80">
<div class="char-count">0/80</div>
</div>
<div class="form-group">
<label for="simplePrompt"><?= t('create.describe_music') ?></label>
<textarea name="prompt" id="simplePrompt" class="form-input" rows="3" placeholder="<?= t('create.prompt_placeholder') ?>" maxlength="400"></textarea>
<div class="char-count">0/400</div>
</div>
<div class="form-group">
<label for="simpleInstrumental"><?= t('create.vocal_options') ?></label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="instrumental" value="false" checked>
<span><?= t('create.with_vocals') ?></span>
</label>
<label class="radio-option">
<input type="radio" name="instrumental" value="true">
<span><?= t('create.instrumental_only') ?></span>
</label>
</div>
</div>
</div>
<!-- Advanced Mode Form -->
<div id="advancedForm" class="form-mode">
<div class="form-row">
<div class="form-group">
<label for="title"><?= t('create.song_title') ?></label>
<input type="text" name="title" id="title" class="form-input" placeholder="<?= t('create.song_title_placeholder') ?>" maxlength="80">
<div class="char-count">0/80</div>
</div>
<div class="form-group">
<label for="modelVersion"><?= t('create.ai_model') ?></label>
<select name="model_name" id="modelVersion" class="form-input">
<option value="V5" selected>V5 (Latest)</option>
<option value="V4_5">V4.5 (Premium)</option>
<option value="V4">V4 (Balanced)</option>
<option value="V3_5">V3.5 (Legacy)</option>
</select>
</div>
<div class="form-group">
<label for="variations"><?= t('create.variations') ?></label>
<select name="variations" id="variations" class="form-input">
<option value="1">1 <?= t('create.variation') ?></option>
<option value="2" selected>2 <?= t('create.variations_plural') ?></option>
<option value="3">3 <?= t('create.variations_plural') ?></option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="tempo"><?= t('create.tempo') ?></label>
<select name="tempo" id="tempo" class="form-input">
<option value=""><?= t('create.tempo_auto') ?></option>
<option value="60">60 BPM (Largo - Very Slow)</option>
<option value="70">70 BPM (Adagio - Slow)</option>
<option value="80">80 BPM (Andante - Walking Pace)</option>
<option value="90">90 BPM (Moderato - Moderate)</option>
<option value="100">100 BPM (Allegretto - Moderately Fast)</option>
<option value="120" selected>120 BPM (Allegro - Fast)</option>
<option value="140">140 BPM (Vivace - Lively)</option>
<option value="160">160 BPM (Presto - Very Fast)</option>
<option value="180">180 BPM (Prestissimo - Extremely Fast)</option>
</select>
</div>
<div class="form-group">
<label for="key">Musical Key</label>
<select name="key" id="key" class="form-input">
<option value="">Auto (AI decides)</option>
<optgroup label="Major Keys">
<option value="C">C Major</option>
<option value="G">G Major</option>
<option value="D">D Major</option>
<option value="A">A Major</option>
<option value="E">E Major</option>
<option value="B">B Major</option>
<option value="F#">F# Major</option>
<option value="C#">C# Major</option>
<option value="F">F Major</option>
<option value="Bb">Bb Major</option>
<option value="Eb">Eb Major</option>
<option value="Ab">Ab Major</option>
<option value="Db">Db Major</option>
<option value="Gb">Gb Major</option>
<option value="Cb">Cb Major</option>
</optgroup>
<optgroup label="Minor Keys">
<option value="Cm">C Minor</option>
<option value="Gm">G Minor</option>
<option value="Dm">D Minor</option>
<option value="Am">A Minor</option>
<option value="Em">E Minor</option>
<option value="Bm">B Minor</option>
<option value="F#m">F# Minor</option>
<option value="C#m">C# Minor</option>
<option value="Fm">F Minor</option>
<option value="Bbm">Bb Minor</option>
<option value="Ebm">Eb Minor</option>
<option value="Abm">Ab Minor</option>
<option value="Dbm">Db Minor</option>
<option value="Gbm">Gb Minor</option>
<option value="Cbm">Cb Minor</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label for="scale">Scale/Mode</label>
<select name="scale" id="scale" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="major">Major (Happy/Bright)</option>
<option value="minor">Minor (Sad/Melancholic)</option>
<option value="dorian">Dorian (Jazzy/Mysterious)</option>
<option value="mixolydian">Mixolydian (Bluesy/Rock)</option>
<option value="lydian">Lydian (Dreamy/Ethereal)</option>
<option value="phrygian">Phrygian (Exotic/Dramatic)</option>
<option value="locrian">Locrian (Tense/Unstable)</option>
</select>
</div>
<div class="form-group">
<label for="timeSignature">Time Signature</label>
<select name="timeSignature" id="timeSignature" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="4/4">4/4 (Common Time)</option>
<option value="3/4">3/4 (Waltz)</option>
<option value="6/8">6/8 (Jig)</option>
<option value="2/4">2/4 (March)</option>
<option value="5/4">5/4 (Unusual)</option>
<option value="7/8">7/8 (Complex)</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="energy">Energy Level</label>
<div class="slider-container">
<input type="range" name="energy" id="energy" min="1" max="10" value="7" class="slider">
<div class="slider-labels">
<span>Calm</span>
<span id="energyValue">7</span>
<span>Intense</span>
</div>
</div>
</div>
<div class="form-group">
<label for="excitement">Excitement</label>
<div class="slider-container">
<input type="range" name="excitement" id="excitement" min="1" max="10" value="6" class="slider">
<div class="slider-labels">
<span>Relaxed</span>
<span id="excitementValue">6</span>
<span>Thrilling</span>
</div>
</div>
</div>
<div class="form-group">
<label for="mood">Mood</label>
<select name="mood" id="mood" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="happy">Happy/Joyful</option>
<option value="sad">Sad/Melancholic</option>
<option value="energetic">Energetic/Upbeat</option>
<option value="calm">Calm/Peaceful</option>
<option value="romantic">Romantic/Intimate</option>
<option value="mysterious">Mysterious/Enigmatic</option>
<option value="dramatic">Dramatic/Epic</option>
<option value="nostalgic">Nostalgic/Retro</option>
<option value="futuristic">Futuristic/Electronic</option>
<option value="organic">Organic/Natural</option>
</select>
</div>
<div class="form-group">
<label for="language"><?= t('create.language') ?></label>
<select name="language" id="language" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="english">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>
<option value="japanese">Japanese</option>
<option value="korean">Korean</option>
<option value="chinese">Chinese</option>
<option value="instrumental">Instrumental Only</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="genre">Genre</label>
<select name="genre" id="genre" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="pop">Pop</option>
<option value="rock">Rock</option>
<option value="electronic">Electronic/Dance</option>
<option value="hip-hop">Hip-Hop/Rap</option>
<option value="jazz">Jazz</option>
<option value="classical">Classical</option>
<option value="country">Country</option>
<option value="r&b">R&B/Soul</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/Alternative</option>
<option value="ambient">Ambient</option>
<option value="lofi">Lo-Fi</option>
<option value="synthwave">Synthwave</option>
<option value="trap">Trap</option>
<option value="dubstep">Dubstep</option>
</select>
</div>
<div class="form-group">
<label for="voiceType">Voice Type</label>
<select name="voiceType" id="voiceType" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="duet">Male & Female</option>
<option value="choir">Choir</option>
<option value="child">Children's</option>
<option value="robot">Robot/AI</option>
</select>
</div>
<div class="form-group">
<label for="useCase">Use Case</label>
<select name="useCase" id="useCase" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="background">Background Music</option>
<option value="workout">Workout/Exercise</option>
<option value="meditation">Meditation/Relaxation</option>
<option value="party">Party/Dancing</option>
<option value="study">Study/Focus</option>
<option value="sleep">Sleep/Lullaby</option>
<option value="gaming">Gaming</option>
<option value="commercial">Commercial/Ad</option>
<option value="podcast">Podcast Intro</option>
<option value="video">Video Background</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="instruments">Primary Instruments</label>
<select name="instruments" id="instruments" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="piano">Piano</option>
<option value="guitar">Guitar</option>
<option value="drums">Drums</option>
<option value="bass">Bass</option>
<option value="synth">Synthesizer</option>
<option value="strings">Strings</option>
<option value="brass">Brass</option>
<option value="woodwind">Woodwind</option>
<option value="percussion">Percussion</option>
<option value="electronic">Electronic</option>
<option value="acoustic">Acoustic</option>
<option value="orchestra">Orchestra</option>
</select>
</div>
<div class="form-group">
<label for="instrumental"><?= t('create.vocal_options') ?></label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="instrumental" value="false" checked>
<span><?= t('create.with_vocals') ?></span>
</label>
<label class="radio-option">
<input type="radio" name="instrumental" value="true">
<span><?= t('create.instrumental_only') ?></span>
</label>
</div>
</div>
<div class="form-group">
<label for="duration">Duration</label>
<select name="duration" id="duration" class="form-input">
<option value="180" selected>3 minutes</option>
<option value="300">5 minutes</option>
<option value="420">7 minutes</option>
<option value="540">9 minutes</option>
</select>
</div>
</div>
<div class="form-group">
<label for="advancedPrompt">Detailed Lyrics/Prompt</label>
<textarea name="advancedPrompt" id="advancedPrompt" class="form-input" rows="6" placeholder="Write your lyrics or detailed description... Example: [Verse] Night city lights shining bright Neon dreams in the midnight sky [Chorus] We're dancing through the night Electric hearts, electric minds" maxlength="5000"></textarea>
<div class="char-count">0/5000</div>
</div>
<div class="form-group">
<label for="tags">Tags (Optional)</label>
<input type="text" name="tags" id="tags" class="form-input" placeholder="e.g., electrifying, rock, energetic, upbeat">
</div>
</div>
<!-- Pro Mode Form -->
<div id="proForm" class="form-mode">
<div class="pro-mode-header">
<h3><i class="fas fa-crown"></i> Professional Studio Controls</h3>
<p>Maximum control over every aspect of music generation</p>
</div>
<!-- Basic Info Section -->
<div class="pro-section">
<h4><i class="fas fa-info-circle"></i> Basic Information</h4>
<div class="form-row">
<div class="form-group">
<label for="proTitle">Song Title</label>
<input type="text" name="proTitle" id="proTitle" class="form-input" placeholder="e.g., Neon Dreams" maxlength="80">
<div class="char-count">0/80</div>
</div>
<div class="form-group">
<label for="proModel">AI Model</label>
<select name="proModel" id="proModel" class="form-input">
<option value="V5" selected>V5 (Latest & Best)</option>
<option value="V4_5">V4.5 (Premium Quality)</option>
<option value="V4">V4 (Balanced Quality)</option>
<option value="V3_5">V3.5 (Legacy)</option>
</select>
</div>
<div class="form-group">
<label for="proVariations">Variations</label>
<select name="proVariations" id="proVariations" class="form-input">
<option value="1">1 variation</option>
<option value="2" selected>2 variations</option>
<option value="3">3 variations</option>
<option value="4">4 variations</option>
<option value="5">5 variations</option>
</select>
</div>
</div>
</div>
<!-- Musical Theory Section -->
<div class="pro-section">
<h4><i class="fas fa-music"></i> Musical Theory</h4>
<div class="form-row">
<div class="form-group">
<label for="proKey">Musical Key</label>
<select id="proKey" name="proKey" class="form-input">
<option value="">Auto (AI decides)</option>
<optgroup label="Major Keys">
<option value="C">C Major</option>
<option value="G">G Major</option>
<option value="D">D Major</option>
<option value="A">A Major</option>
<option value="E">E Major</option>
<option value="B">B Major</option>
<option value="F#">F# Major</option>
<option value="C#">C# Major</option>
<option value="F">F Major</option>
<option value="Bb">Bb Major</option>
<option value="Eb">Eb Major</option>
<option value="Ab">Ab Major</option>
<option value="Db">Db Major</option>
<option value="Gb">Gb Major</option>
<option value="Cb">Cb Major</option>
</optgroup>
<optgroup label="Minor Keys">
<option value="Cm">C Minor</option>
<option value="Gm">G Minor</option>
<option value="Dm">D Minor</option>
<option value="Am">A Minor</option>
<option value="Em">E Minor</option>
<option value="Bm">B Minor</option>
<option value="F#m">F# Minor</option>
<option value="C#m">C# Minor</option>
<option value="Fm">F Minor</option>
<option value="Bbm">Bb Minor</option>
<option value="Ebm">Eb Minor</option>
<option value="Abm">Ab Minor</option>
<option value="Dbm">Db Minor</option>
<option value="Gbm">Gb Minor</option>
<option value="Cbm">Cb Minor</option>
</optgroup>
</select>
</div>
<div class="form-group">
<label for="proScale">Scale/Mode</label>
<select name="proScale" id="proScale" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="major">Major (Happy/Bright)</option>
<option value="minor">Minor (Sad/Melancholic)</option>
<option value="dorian">Dorian (Jazzy/Mysterious)</option>
<option value="mixolydian">Mixolydian (Bluesy/Rock)</option>
<option value="lydian">Lydian (Dreamy/Ethereal)</option>
<option value="phrygian">Phrygian (Exotic/Dramatic)</option>
<option value="locrian">Locrian (Tense/Unstable)</option>
<option value="pentatonic">Pentatonic (Folk/World)</option>
<option value="blues">Blues Scale</option>
<option value="chromatic">Chromatic (Experimental)</option>
</select>
</div>
<div class="form-group">
<label for="proTimeSignature">Time Signature</label>
<select name="proTimeSignature" id="proTimeSignature" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="4/4">4/4 (Common Time)</option>
<option value="3/4">3/4 (Waltz)</option>
<option value="6/8">6/8 (Jig)</option>
<option value="2/4">2/4 (March)</option>
<option value="5/4">5/4 (Unusual)</option>
<option value="7/8">7/8 (Complex)</option>
<option value="9/8">9/8 (Compound)</option>
<option value="12/8">12/8 (Blues)</option>
<option value="3/8">3/8 (Simple)</option>
<option value="6/4">6/4 (Compound)</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proTempo">Tempo (BPM)</label>
<select id="proTempo" name="proTempo" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="40">40 BPM (Grave - Very Slow)</option>
<option value="50">50 BPM (Largo - Slow)</option>
<option value="60">60 BPM (Adagio - Slow)</option>
<option value="70">70 BPM (Andante - Walking Pace)</option>
<option value="80">80 BPM (Moderato - Moderate)</option>
<option value="90">90 BPM (Allegretto - Moderately Fast)</option>
<option value="100">100 BPM (Allegro - Fast)</option>
<option value="120" selected>120 BPM (Allegro - Fast)</option>
<option value="140">140 BPM (Vivace - Lively)</option>
<option value="160">160 BPM (Presto - Very Fast)</option>
<option value="180">180 BPM (Prestissimo - Extremely Fast)</option>
<option value="200">200 BPM (Ultra Fast)</option>
</select>
</div>
<div class="form-group">
<label for="proChordProgression">Chord Progression</label>
<select name="proChordProgression" id="proChordProgression" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="I-IV-V">I-IV-V (Classic)</option>
<option value="ii-V-I">ii-V-I (Jazz)</option>
<option value="I-V-vi-IV">I-V-vi-IV (Pop)</option>
<option value="vi-IV-I-V">vi-IV-I-V (Emotional)</option>
<option value="I-vi-IV-V">I-vi-IV-V (Classic Rock)</option>
<option value="I-bVII-IV">I-bVII-IV (Blues)</option>
<option value="i-VI-III-VII">i-VI-III-VII (Minor)</option>
<option value="custom">Custom (Specify in prompt)</option>
</select>
</div>
<div class="form-group">
<label for="proOctave">Octave Range</label>
<select name="proOctave" id="proOctave" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="low">Low (Bass heavy)</option>
<option value="mid">Mid (Balanced)</option>
<option value="high">High (Treble heavy)</option>
<option value="wide">Wide (Full range)</option>
<option value="narrow">Narrow (Focused)</option>
</select>
</div>
</div>
</div>
<!-- Genre & Style Section -->
<div class="pro-section">
<h4><i class="fas fa-palette"></i> Genre & Style</h4>
<div class="form-row">
<div class="form-group">
<label for="proGenre">Primary Genre</label>
<select id="proGenre" name="proGenre" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="pop">Pop</option>
<option value="rock">Rock</option>
<option value="electronic">Electronic/Dance</option>
<option value="hip-hop">Hip-Hop/Rap</option>
<option value="jazz">Jazz</option>
<option value="classical">Classical</option>
<option value="country">Country</option>
<option value="r&b">R&B/Soul</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/Alternative</option>
<option value="ambient">Ambient</option>
<option value="lofi">Lo-Fi</option>
<option value="synthwave">Synthwave</option>
<option value="trap">Trap</option>
<option value="dubstep">Dubstep</option>
<option value="house">House</option>
<option value="techno">Techno</option>
<option value="trance">Trance</option>
<option value="drum-bass">Drum & Bass</option>
<option value="garage">UK Garage</option>
<option value="grime">Grime</option>
<option value="drill">Drill</option>
<option value="afrobeats">Afrobeats</option>
<option value="k-pop">K-Pop</option>
<option value="latin">Latin</option>
<option value="world">World Music</option>
</select>
</div>
<div class="form-group">
<label for="proSubGenre">Sub-Genre</label>
<select name="proSubGenre" id="proSubGenre" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="alternative">Alternative</option>
<option value="progressive">Progressive</option>
<option value="experimental">Experimental</option>
<option value="fusion">Fusion</option>
<option value="acoustic">Acoustic</option>
<option value="electric">Electric</option>
<option value="vintage">Vintage/Retro</option>
<option value="modern">Modern</option>
<option value="futuristic">Futuristic</option>
<option value="organic">Organic</option>
<option value="synthetic">Synthetic</option>
</select>
</div>
<div class="form-group">
<label for="proDecade">Decade Style</label>
<select name="proDecade" id="proDecade" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="1960s">1960s (Psychedelic)</option>
<option value="1970s">1970s (Disco/Rock)</option>
<option value="1980s">1980s (Synthwave)</option>
<option value="1990s">1990s (Grunge/Electronica)</option>
<option value="2000s">2000s (Pop/Rock)</option>
<option value="2010s">2010s (EDM/Hip-Hop)</option>
<option value="2020s">2020s (Modern)</option>
</select>
</div>
</div>
</div>
<!-- Instruments Section -->
<div class="pro-section">
<h4><i class="fas fa-guitar"></i> Instruments & Arrangement</h4>
<div class="form-row">
<div class="form-group">
<label for="proLeadInstrument">Lead Instrument</label>
<select name="proLeadInstrument" id="proLeadInstrument" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="piano">Piano</option>
<option value="guitar">Guitar</option>
<option value="synth">Synthesizer</option>
<option value="violin">Violin</option>
<option value="saxophone">Saxophone</option>
<option value="trumpet">Trumpet</option>
<option value="flute">Flute</option>
<option value="voice">Voice</option>
<option value="drums">Drums</option>
<option value="bass">Bass</option>
</select>
</div>
<div class="form-group">
<label for="proRhythmSection">Rhythm Section</label>
<select name="proRhythmSection" id="proRhythmSection" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="drums-bass">Drums + Bass</option>
<option value="drums-only">Drums Only</option>
<option value="bass-only">Bass Only</option>
<option value="percussion">Percussion</option>
<option value="electronic-beats">Electronic Beats</option>
<option value="acoustic-drums">Acoustic Drums</option>
<option value="none">No Rhythm Section</option>
</select>
</div>
<div class="form-group">
<label for="proHarmonySection">Harmony Section</label>
<select name="proHarmonySection" id="proHarmonySection" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="piano">Piano</option>
<option value="guitar">Guitar</option>
<option value="strings">Strings</option>
<option value="synth-pads">Synth Pads</option>
<option value="brass">Brass</option>
<option value="choir">Choir</option>
<option value="none">No Harmony</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proArrangement">Arrangement Style</label>
<select name="proArrangement" id="proArrangement" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="minimal">Minimal (Sparse)</option>
<option value="standard">Standard (Balanced)</option>
<option value="dense">Dense (Layered)</option>
<option value="orchestral">Orchestral (Full)</option>
<option value="electronic">Electronic (Synthetic)</option>
<option value="acoustic">Acoustic (Natural)</option>
<option value="hybrid">Hybrid (Mixed)</option>
</select>
</div>
<div class="form-group">
<label for="proComplexity">Musical Complexity</label>
<select name="proComplexity" id="proComplexity" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="simple">Simple (Basic)</option>
<option value="moderate">Moderate (Standard)</option>
<option value="complex">Complex (Advanced)</option>
<option value="virtuoso">Virtuoso (Expert)</option>
</select>
</div>
<div class="form-group">
<label for="proDensity">Track Density</label>
<select name="proDensity" id="proDensity" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="sparse">Sparse (Few elements)</option>
<option value="moderate">Moderate (Balanced)</option>
<option value="dense">Dense (Many elements)</option>
<option value="wall-of-sound">Wall of Sound (Maximum)</option>
</select>
</div>
</div>
</div>
<!-- Production Section -->
<div class="pro-section">
<h4><i class="fas fa-sliders-h"></i> Production & Mixing</h4>
<div class="form-row">
<div class="form-group">
<label for="proReverb">Reverb Level</label>
<div class="slider-container">
<input type="range" name="proReverb" id="proReverb" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Dry</span>
<span id="proReverbValue">5</span>
<span>Wet</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proCompression">Compression</label>
<div class="slider-container">
<input type="range" name="proCompression" id="proCompression" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Light</span>
<span id="proCompressionValue">5</span>
<span>Heavy</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proStereoWidth">Stereo Width</label>
<div class="slider-container">
<input type="range" name="proStereoWidth" id="proStereoWidth" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Mono</span>
<span id="proStereoWidthValue">5</span>
<span>Wide</span>
</div>
</div>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proBassLevel">Bass Level</label>
<div class="slider-container">
<input type="range" name="proBassLevel" id="proBassLevel" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Low</span>
<span id="proBassLevelValue">5</span>
<span>High</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proMidLevel">Mid Level</label>
<div class="slider-container">
<input type="range" name="proMidLevel" id="proMidLevel" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Low</span>
<span id="proMidLevelValue">5</span>
<span>High</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proTrebleLevel">Treble Level</label>
<div class="slider-container">
<input type="range" name="proTrebleLevel" id="proTrebleLevel" min="0" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Low</span>
<span id="proTrebleLevelValue">5</span>
<span>High</span>
</div>
</div>
</div>
</div>
</div>
<!-- Voice & Language Section -->
<div class="pro-section">
<h4><i class="fas fa-microphone"></i> Voice & Language</h4>
<div class="form-row">
<div class="form-group">
<label for="proVoiceType">Voice Type</label>
<select id="proVoiceType" name="proVoiceType" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="male">Male</option>
<option value="female">Female</option>
<option value="duet">Male & Female</option>
<option value="duet_female_male">Female & Male</option>
<option value="choir">Choir</option>
<option value="child">Children's</option>
<option value="robot">Robot/AI</option>
<option value="whisper">Whisper</option>
<option value="screaming">Screaming</option>
<option value="rapping">Rapping</option>
<option value="singing">Singing</option>
<option value="spoken">Spoken Word</option>
</select>
</div>
<div class="form-group">
<label for="proInstrumental"><?= t('create.vocal_options') ?></label>
<div class="radio-group">
<label class="radio-option">
<input type="radio" name="instrumental" id="proInstrumentalFalse" value="false" checked>
<span><?= t('create.with_vocals') ?></span>
</label>
<label class="radio-option">
<input type="radio" name="instrumental" id="proInstrumentalTrue" value="true">
<span><?= t('create.instrumental_only') ?></span>
</label>
</div>
</div>
<div class="form-group">
<label for="proLanguage"><?= t('create.language') ?></label>
<select id="proLanguage" name="proLanguage" class="form-input">
<option value=""><?= t('create.auto_language') ?></option>
<option value="english">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>
<option value="japanese">Japanese</option>
<option value="korean">Korean</option>
<option value="chinese">Chinese</option>
<option value="russian">Russian</option>
<option value="arabic">Arabic</option>
<option value="hindi">Hindi</option>
<option value="instrumental">Instrumental Only</option>
</select>
</div>
<div class="form-group">
<label for="proVocalStyle">Vocal Style</label>
<select id="proVocalStyle" name="proVocalStyle" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="clean">Clean</option>
<option value="distorted">Distorted</option>
<option value="autotune">Auto-tune</option>
<option value="harmonized">Harmonized</option>
<option value="layered">Layered</option>
<option value="choir">Choir</option>
<option value="call-response">Call & Response</option>
<option value="ad-libs">Ad-libs</option>
</select>
</div>
</div>
</div>
<!-- Mood & Energy Section -->
<div class="pro-section">
<h4><i class="fas fa-heart"></i> Mood & Energy</h4>
<div class="form-row">
<div class="form-group">
<label for="proMood">Mood</label>
<select name="proMood" id="proMood" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="happy">Happy/Joyful</option>
<option value="sad">Sad/Melancholic</option>
<option value="energetic">Energetic/Upbeat</option>
<option value="calm">Calm/Peaceful</option>
<option value="romantic">Romantic/Intimate</option>
<option value="mysterious">Mysterious/Enigmatic</option>
<option value="dramatic">Dramatic/Epic</option>
<option value="nostalgic">Nostalgic/Retro</option>
<option value="futuristic">Futuristic/Electronic</option>
<option value="organic">Organic/Natural</option>
</select>
</div>
<div class="form-group">
<label for="proEnergy">Energy Level</label>
<div class="slider-container">
<input type="range" name="proEnergy" id="proEnergy" min="1" max="10" value="7" class="slider">
<div class="slider-labels">
<span>Calm</span>
<span id="proEnergyValue">7</span>
<span>Intense</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proExcitement">Excitement</label>
<div class="slider-container">
<input type="range" name="proExcitement" id="proExcitement" min="1" max="10" value="6" class="slider">
<div class="slider-labels">
<span>Relaxed</span>
<span id="proExcitementValue">6</span>
<span>Thrilling</span>
</div>
</div>
</div>
<div class="form-group">
<label for="proDanceability">Danceability</label>
<div class="slider-container">
<input type="range" name="proDanceability" id="proDanceability" min="1" max="10" value="5" class="slider">
<div class="slider-labels">
<span>Low</span>
<span id="proDanceabilityValue">5</span>
<span>High</span>
</div>
</div>
</div>
</div>
</div>
<!-- Lyrics & Structure Section -->
<div class="pro-section">
<h4><i class="fas fa-music"></i> Lyrics & Structure</h4>
<div class="form-row">
<div class="form-group">
<label for="proLyricTheme">Lyric Theme</label>
<select name="proLyricTheme" id="proLyricTheme" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="love">Love/Romance</option>
<option value="party">Party/Celebration</option>
<option value="inspirational">Inspirational</option>
<option value="sad">Sad/Melancholic</option>
<option value="angry">Angry/Aggressive</option>
<option value="peaceful">Peaceful/Calm</option>
<option value="adventure">Adventure/Epic</option>
<option value="nostalgic">Nostalgic/Retro</option>
<option value="futuristic">Futuristic/Sci-fi</option>
<option value="nature">Nature/Organic</option>
<option value="urban">Urban/City</option>
<option value="abstract">Abstract/Artistic</option>
</select>
</div>
<div class="form-group">
<label for="proRhymeScheme">Rhyme Scheme</label>
<select name="proRhymeScheme" id="proRhymeScheme" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="AABB">AABB (Simple)</option>
<option value="ABAB">ABAB (Alternating)</option>
<option value="ABBA">ABBA (Enclosed)</option>
<option value="ABCB">ABCB (Ballad)</option>
<option value="AABA">AABA (Jazz)</option>
<option value="complex">Complex (Advanced)</option>
<option value="free">Free Verse</option>
</select>
</div>
<div class="form-group">
<label for="proHookFrequency">Hook Frequency</label>
<select name="proHookFrequency" id="proHookFrequency" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="minimal">Minimal</option>
<option value="standard">Standard</option>
<option value="frequent">Frequent</option>
<option value="constant">Constant</option>
</select>
</div>
</div>
</div>
<!-- Song Structure Section -->
<div class="pro-section">
<h4><i class="fas fa-layer-group"></i> Song Structure</h4>
<div class="form-row">
<div class="form-group">
<label for="proIntroLength">Intro Length</label>
<select name="proIntroLength" id="proIntroLength" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="0">No Intro</option>
<option value="4">4 seconds</option>
<option value="8">8 seconds</option>
<option value="16">16 seconds</option>
<option value="32">32 seconds</option>
</select>
</div>
<div class="form-group">
<label for="proVerseChorusRatio">Verse/Chorus Ratio</label>
<select name="proVerseChorusRatio" id="proVerseChorusRatio" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="verse-heavy">Verse Heavy</option>
<option value="balanced">Balanced</option>
<option value="chorus-heavy">Chorus Heavy</option>
<option value="chorus-only">Chorus Only</option>
</select>
</div>
<div class="form-group">
<label for="proBridge">Bridge Options</label>
<select name="proBridge" id="proBridge" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="none">No Bridge</option>
<option value="instrumental">Instrumental Bridge</option>
<option value="vocal">Vocal Bridge</option>
<option value="solo">Solo Bridge</option>
<option value="breakdown">Breakdown Bridge</option>
</select>
</div>
</div>
<div class="form-row">
<div class="form-group">
<label for="proOutroStyle">Outro Style</label>
<select name="proOutroStyle" id="proOutroStyle" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="fade">Fade Out</option>
<option value="stop">Hard Stop</option>
<option value="repeat">Repeat Chorus</option>
<option value="instrumental">Instrumental Outro</option>
<option value="vocal">Vocal Outro</option>
</select>
</div>
<div class="form-group">
<label for="proBuildUps">Build-up Sections</label>
<select name="proBuildUps" id="proBuildUps" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="none">None</option>
<option value="subtle">Subtle</option>
<option value="moderate">Moderate</option>
<option value="dramatic">Dramatic</option>
<option value="multiple">Multiple</option>
</select>
</div>
<div class="form-group">
<label for="proTransitions">Transition Style</label>
<select name="proTransitions" id="proTransitions" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="smooth">Smooth</option>
<option value="abrupt">Abrupt</option>
<option value="fade">Fade</option>
<option value="crossfade">Crossfade</option>
<option value="break">Break</option>
</select>
</div>
</div>
</div>
<!-- Professional Prompt & Tags -->
<div class="pro-section">
<h4><i class="fas fa-edit"></i> Professional Content</h4>
<div class="form-row">
<div class="form-group">
<label for="proDuration">Duration</label>
<select id="proDuration" name="proDuration" class="form-input">
<option value="180" selected>3 minutes</option>
<option value="300">5 minutes</option>
<option value="420">7 minutes</option>
<option value="540">9 minutes</option>
</select>
</div>
<div class="form-group">
<label for="proQuality">Production Quality</label>
<select name="proQuality" id="proQuality" class="form-input">
<option value="">Auto (AI decides)</option>
<option value="demo">Demo Quality</option>
<option value="radio">Radio Quality</option>
<option value="studio">Studio Quality</option>
<option value="master">Master Quality</option>
</select>
</div>
</div>
<div class="form-group">
<label for="proPrompt">Professional Prompt</label>
<textarea name="proPrompt" id="proPrompt" class="form-input" rows="6" placeholder="Write your detailed professional prompt here... Example: Create a progressive house track with a driving 4/4 beat at 128 BPM in D major. Lead with a saw wave synthesizer, supported by a punchy kick drum and rolling bassline. Include a female vocal with auto-tune effects, singing about empowerment and freedom." maxlength="5000"></textarea>
<div class="char-count">0/5000</div>
</div>
<div class="form-group">
<label for="proTags">Professional Tags</label>
<input type="text" name="proTags" id="proTags" class="form-input" placeholder="e.g., progressive-house, saw-lead, sidechain, auto-tune, female-vocal">
</div>
</div>
</div>
<div class="form-actions">
<button type="submit" id="createBtnModal" class="btn btn-primary">
<i class="fas fa-magic"></i> <?= t('create.submit') ?>
</button>
<div class="credits-info <?= ($_SESSION['credits'] ?? 5) <= 2 ? 'low-credits' : '' ?>">
<i class="fas fa-coins"></i> Cost: <span id="creditCostModal">1</span> Credit (You have <?= $_SESSION['credits'] ?? 5 ?> credits)
<?php if (($_SESSION['credits'] ?? 5) <= 2): ?>
<span class="credit-warning">⚠️ Low credits!</span>
<?php endif; ?>
</div>
</div>
</form>
</div>
</div>
<script>
// Set default character limit for prompt (customMode is always false now)
document.addEventListener('DOMContentLoaded', function() {
const simplePromptModal = document.getElementById('simplePrompt');
if (simplePromptModal) {
simplePromptModal.maxLength = 400;
// Update character count
const charCount = simplePromptModal.parentElement.querySelector('.char-count');
if (charCount) {
const currentLength = simplePromptModal.value.length;
charCount.textContent = `${currentLength}/400`;
}
}
// Pro mode: Dynamic limit switching - shows 2000 until 2001 chars, then switches to 5000
const proPromptModal = document.getElementById('proPrompt');
if (proPromptModal) {
proPromptModal.addEventListener('input', function() {
const length = this.value.length;
const maxLength = length > 2000 ? 5000 : 2000;
const charCount = this.parentElement.querySelector('.char-count');
if (charCount) {
charCount.textContent = `${length}/${maxLength}`;
charCount.style.color = length > maxLength ? '#ef4444' : '#a0aec0';
}
});
// Initialize counter on load
const length = proPromptModal.value.length;
const maxLength = length > 2000 ? 5000 : 2000;
const charCount = proPromptModal.parentElement.querySelector('.char-count');
if (charCount) {
charCount.textContent = `${length}/${maxLength}`;
}
}
});
</script>