/* AI_MUSIC_EDIT_MODE_V1 * AI Music Generator — input renderer. * * Uses the same blue-slate ambient backdrop, translucent material, white * hairlines, and soft depth as the output player. The form contract is * intentionally unchanged: it still sends prompt, lyrics, style, song_title, * and voice_type to the existing worker. */ const { useState } = React; const { FilePicker } = ConstantsUI; const VOICE_OPTIONS = ["Auto", "Male", "Female", "Instrumental"]; const THEME_CSS = ` :root { color-scheme: dark; --music-ink: rgba(255, 255, 255, 0.96); --music-muted: rgba(255, 255, 255, 0.62); --music-faint: rgba(255, 255, 255, 0.52); --music-line: rgba(255, 255, 255, 0.22); --music-glass: rgba(236, 246, 246, 0.14); --music-field: rgba(255, 255, 255, 0.105); } * { box-sizing: border-box; } html, body, #root { min-height: 100%; } body { margin: 0; background: #3a1606 !important; color: var(--music-ink); font-family: ui-sans-serif, -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Helvetica Neue", Arial, sans-serif; -webkit-font-smoothing: antialiased; } .music-input-shell { position: relative; isolation: isolate; min-height: 100vh; overflow: auto; padding: clamp(22px, 4vw, 48px); display: flex; align-items: safe center; justify-content: center; background: radial-gradient(circle at 50% 0%, rgba(255, 255, 255, 0.18), transparent 32%), linear-gradient(180deg, #ffd1a1 0%, #c96324 38%, #3a1606 100%); } .music-input-shell::before { content: ""; position: absolute; z-index: -2; inset: -18%; background: radial-gradient(circle at 18% 28%, rgba(255, 159, 61, 0.78), transparent 24%), radial-gradient(circle at 82% 18%, rgba(255, 229, 189, 0.55), transparent 22%), radial-gradient(circle at 72% 78%, rgba(177, 64, 19, 0.76), transparent 28%), radial-gradient(circle at 20% 86%, rgba(91, 31, 7, 0.70), transparent 25%); filter: blur(44px) saturate(1.15); transform: scale(1.08); animation: ambient-drift 16s ease-in-out infinite alternate; } .music-input-shell::after { content: ""; position: absolute; z-index: -1; inset: 0; background: linear-gradient( 180deg, rgba(255, 255, 255, 0.16), rgba(20, 25, 27, 0.14) 42%, rgba(15, 17, 18, 0.58) ); pointer-events: none; } @keyframes ambient-drift { from { transform: scale(1.08) translate3d(-1%, -1%, 0); } to { transform: scale(1.14) translate3d(1.5%, 1%, 0); } } .music-form { position: relative; width: min(760px, 100%); padding: clamp(22px, 4vw, 38px); border: 1px solid rgba(255, 255, 255, 0.28); border-radius: 32px; background: var(--music-glass); box-shadow: 0 30px 90px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(255, 255, 255, 0.24); -webkit-backdrop-filter: blur(24px) saturate(1.25); backdrop-filter: blur(24px) saturate(1.25); } .music-form::before { content: ""; position: absolute; inset: 1px 12% auto; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.66), transparent); pointer-events: none; } .music-header { margin-bottom: 28px; } .music-heading h1 { margin: 0; color: var(--music-ink); font-size: clamp(23px, 4vw, 30px); line-height: 1.08; font-weight: 800; letter-spacing: -0.045em; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.2); } .music-grid { display: grid; gap: 18px; } .music-grid--two { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; } .music-field-group { min-width: 0; } .music-label-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 2px 8px; } .music-label { color: rgba(255, 255, 255, 0.88); font-size: 12px; line-height: 1; font-weight: 750; letter-spacing: 0.075em; text-transform: uppercase; } .music-meta { color: var(--music-faint); font-size: 11px; font-weight: 650; font-variant-numeric: tabular-nums; } .music-control { display: block; width: 100%; appearance: none; border: 1px solid var(--music-line); border-radius: 16px; outline: none; padding: 13px 15px; color: var(--music-ink); background: var(--music-field); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12), 0 10px 24px rgba(0, 0, 0, 0.06); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); font: inherit; font-size: 14px; line-height: 1.45; transition: background 160ms ease, border-color 160ms ease, box-shadow 160ms ease, transform 160ms ease; } .music-control::placeholder { color: rgba(255, 255, 255, 0.5); } .music-control:hover { background: rgba(255, 255, 255, 0.14); } .music-control:focus { background: rgba(255, 255, 255, 0.17); border-color: rgba(255, 255, 255, 0.58); box-shadow: 0 0 0 4px rgba(226, 244, 245, 0.13), inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 14px 32px rgba(0, 0, 0, 0.1); } textarea.music-control { min-height: 190px; resize: vertical; } .music-input-with-action { position: relative; } .music-input-with-action .music-control { padding-right: 132px; } .music-input-with-action textarea.music-control { min-height: 104px; resize: vertical; } .music-randomize { position: absolute; top: 11px; right: 9px; min-width: 112px; height: 34px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; padding: 0 11px; appearance: none; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 11px; color: rgba(255, 255, 255, 0.72); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); cursor: pointer; transition: color 150ms ease, background 150ms ease, border-color 150ms ease; } .music-randomize svg { width: 17px; height: 17px; } .music-randomize span { font: inherit; font-size: 11px; font-weight: 750; white-space: nowrap; } .music-randomize:hover:not(:disabled) { color: white; border-color: rgba(255, 255, 255, 0.38); background: rgba(255, 255, 255, 0.19); } .music-randomize:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.8); outline-offset: 2px; } .music-randomize:disabled { cursor: not-allowed; opacity: 0.45; } .music-tag-scroller { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px; width: 100%; overflow-x: auto; overscroll-behavior-inline: contain; padding: 2px 2px 10px; scrollbar-width: thin; scrollbar-color: rgba(255, 255, 255, 0.28) rgba(255, 255, 255, 0.06); } .music-tag-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; } .music-tags-refresh { flex: 0 0 auto; width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center; appearance: none; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 11px; color: rgba(255, 255, 255, 0.76); background: rgba(255, 255, 255, 0.11); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1); cursor: pointer; transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 180ms ease; } .music-tags-refresh svg { width: 16px; height: 16px; } .music-tags-refresh:hover:not(:disabled) { color: white; border-color: rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.19); transform: rotate(22deg); } .music-tags-refresh:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.78); outline-offset: 2px; } .music-tags-refresh:disabled { cursor: not-allowed; opacity: 0.48; } .music-tag-scroller::-webkit-scrollbar { height: 6px; } .music-tag-scroller::-webkit-scrollbar-track { border-radius: 999px; background: rgba(255, 255, 255, 0.06); } .music-tag-scroller::-webkit-scrollbar-thumb { border-radius: 999px; background: rgba(255, 255, 255, 0.28); } .music-tag-chip { flex: 0 0 auto; appearance: none; border: 1px solid rgba(255, 255, 255, 0.19); border-radius: 999px; padding: 9px 14px; color: rgba(255, 255, 255, 0.76); background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.09); cursor: pointer; font: inherit; font-size: 12px; font-weight: 650; line-height: 1; white-space: nowrap; transition: color 140ms ease, background 140ms ease, border-color 140ms ease, transform 100ms ease; } .music-tag-chip:hover:not(:disabled) { color: white; border-color: rgba(255, 255, 255, 0.38); background: rgba(255, 255, 255, 0.18); } .music-tag-chip:active:not(:disabled) { transform: scale(0.97); } .music-tag-chip:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.78); outline-offset: 2px; } .music-tag-chip.is-added { color: #3f332a; border-color: rgba(255, 255, 255, 0.75); background: rgba(255, 251, 245, 0.88); } .music-tag-chip:disabled { cursor: not-allowed; opacity: 0.48; } .music-hint { margin: 7px 2px 0; color: rgba(255, 255, 255, 0.54); font-size: 11px; line-height: 1.45; } .mode-picker, .voice-picker { display: grid; gap: 5px; padding: 5px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 17px; background: rgba(20, 28, 30, 0.13); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08); -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); } .mode-picker { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-bottom: 22px; } .voice-picker { grid-template-columns: repeat(4, minmax(0, 1fr)); } .mode-option, .voice-option { appearance: none; min-width: 0; border: 1px solid transparent; border-radius: 12px; padding: 9px 8px; cursor: pointer; color: rgba(255, 255, 255, 0.64); background: transparent; font: inherit; font-size: 12px; font-weight: 700; transition: color 150ms ease, background 150ms ease, border-color 150ms ease, box-shadow 150ms ease, transform 100ms ease; } .mode-option { padding: 10px 12px; font-size: 13px; } .mode-option:hover, .voice-option:hover { color: rgba(255, 255, 255, 0.9); } .mode-option:focus-visible, .voice-option:focus-visible { outline: 2px solid rgba(255, 255, 255, 0.7); outline-offset: 2px; } .mode-option:active, .voice-option:active { transform: scale(0.97); } .mode-option.is-active, .voice-option.is-active { color: #334346; border-color: rgba(255, 255, 255, 0.74); background: rgba(246, 252, 251, 0.9); box-shadow: 0 5px 16px rgba(0, 0, 0, 0.16), inset 0 1px 0 white; } .mode-option:disabled, .voice-option:disabled { cursor: not-allowed; opacity: 0.58; } .mode-panel { animation: mode-panel-in 180ms ease-out both; } @keyframes mode-panel-in { from { opacity: 0; transform: translateY(3px); } to { opacity: 1; transform: translateY(0); } } .edit-source-tabs { width: fit-content; display: flex; gap: 4px; padding: 4px; border: 1px solid rgba(255, 255, 255, 0.17); border-radius: 13px; background: rgba(20, 28, 30, 0.13); } .edit-source-tabs button { appearance: none; border: 1px solid transparent; border-radius: 9px; padding: 7px 11px; color: rgba(255, 255, 255, 0.62); background: transparent; cursor: pointer; font-size: 11px; font-weight: 650; } .edit-source-tabs button.is-active { color: #334346; border-color: rgba(255, 255, 255, 0.72); background: rgba(246, 252, 251, 0.9); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); } .edit-source-tabs button:disabled { cursor: not-allowed; opacity: 0.58; } .edit-upload { display: grid; gap: 8px; } .edit-note { padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 13px; color: rgba(255, 255, 255, 0.68); background: rgba(16, 24, 26, 0.18); font-size: 11px; line-height: 1.5; } .music-submit-row { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 22px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.15); } .music-submit { appearance: none; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-width: 190px; border: 1px solid rgba(255, 255, 255, 0.82); border-radius: 999px; padding: 13px 20px; cursor: pointer; color: #314043; background: rgba(247, 252, 251, 0.92); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.2), inset 0 1px 0 white; font: inherit; font-size: 13px; font-weight: 800; letter-spacing: -0.01em; transition: transform 150ms ease, background 150ms ease, box-shadow 150ms ease, opacity 150ms ease; } .music-submit svg { width: 17px; height: 17px; } .music-submit:hover:not(:disabled) { transform: translateY(-1px); background: white; box-shadow: 0 16px 34px rgba(0, 0, 0, 0.25), inset 0 1px 0 white; } .music-submit:active:not(:disabled) { transform: translateY(0) scale(0.98); } .music-submit:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.38); outline-offset: 3px; } .music-submit:disabled { cursor: not-allowed; color: rgba(255, 255, 255, 0.42); border-color: rgba(255, 255, 255, 0.12); background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08); } .music-submit.is-loading svg { animation: music-pulse 1.2s ease-in-out infinite; } @keyframes music-pulse { 0%, 100% { opacity: 0.55; transform: scale(0.92); } 50% { opacity: 1; transform: scale(1.06); } } /* Retheme the platform-owned loading and error surfaces to belong here. */ .loading-overlay { background: rgba(25, 34, 36, 0.46) !important; -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2); } .spinner { border-color: rgba(255, 255, 255, 0.2) !important; border-top-color: rgba(255, 255, 255, 0.94) !important; } .error-banner { margin: 18px !important; border-color: rgba(255, 185, 185, 0.34) !important; color: #ffe7e7 !important; background: rgba(96, 28, 34, 0.74) !important; -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } @media (max-width: 640px) { .music-input-shell { align-items: flex-start; padding: 16px; } .music-form { padding: 21px 17px; border-radius: 25px; } .music-header { margin-bottom: 24px; } .music-grid--two { grid-template-columns: 1fr; } .voice-picker { grid-template-columns: repeat(2, minmax(0, 1fr)); } .music-submit-row { align-items: stretch; flex-direction: column; } .music-submit { width: 100%; } } @media (prefers-reduced-motion: reduce) { .music-input-shell::before, .music-submit.is-loading svg { animation: none; } .music-control, .mode-option, .voice-option, .music-submit { transition: none; } .mode-panel { animation: none; } } `; function CreateMusicIcon() { return ( ); } function DiceIcon() { return ( ); } function RefreshIcon() { return ( ); } const RANDOM_SONG_PROMPTS = [ "Playful dubstep song about long-distance love", "Poetic drum and bass song about a fame identity crisis", "Emotional bhangra song about love vs. ambition", "Organic ambient song about escaping to somewhere new", "Emotive bossa nova song about the silence after a fight", "Aggressive jazz song about a love that didn't translate", "Melodious hymn song about my reflection in the window", "Calming contemporary r&b song about healing after heartbreak", "Heroic spoken word song about risk-taking", "Soaring uk garage song about the bridge between us", ]; const BASE_MUSIC_TAGS = ( "pop|indie pop|synth-pop|dream pop|art pop|hyperpop|electropop|dance pop|k-pop|j-pop|city pop|bedroom pop|acoustic pop|power pop|psychedelic pop|orchestral pop|alt-pop|dark pop|bubblegum pop|folk pop|rock|indie rock|alternative rock|classic rock|hard rock|soft rock|progressive rock|psychedelic rock|garage rock|surf rock|glam rock|post-rock|math rock|shoegaze|grunge|punk rock|pop punk|emo rock|metal|heavy metal|progressive metal|symphonic metal|nu metal|metalcore|folk|indie folk|contemporary folk|folk rock|americana|country|alt-country|bluegrass|gospel|hymn|soul|neo soul|funk|disco|boogie|r&b|contemporary r&b|new jack swing|hip hop|boom bap|trap|drill|lo-fi hip hop|conscious rap|spoken word|jazz|bebop|swing jazz|cool jazz|fusion jazz|smooth jazz|acid jazz|blues|delta blues|bossa nova|samba|salsa|reggaeton|bachata|tango|flamenco|mariachi|cumbia|afrobeat|amapiano|highlife|reggae|dub|dancehall|ska|bhangra|bollywood|qawwali|carnatic|hindustani classical|arabic pop|rai|gnawa|fado|chanson|classical|baroque|romantic classical|neoclassical|minimalist classical|orchestral|cinematic|soundtrack|ambient|dark ambient|drone|new age|electronic|house|deep house|tech house|progressive house|tropical house|techno|melodic techno|trance|psytrance|dubstep|future bass|drum and bass|jungle|breakbeat|uk garage|2-step garage|grime|industrial|synthwave|vaporwave|chiptune|glitch|idm|downtempo|trip hop|chillwave|lo-fi|experimental|noise|world music|uplifting|emotional|melancholic|bittersweet|romantic|sensual|intimate|playful|joyful|euphoric|dreamy|ethereal|nostalgic|hopeful|triumphant|heroic|mysterious|haunting|eerie|dark|aggressive|rebellious|tense|dramatic|reflective|meditative|calming|peaceful|warm|organic|energetic|hypnotic|atmospheric|soulful|passionate|tender|whimsical|spiritual|anthemic|raw|vulnerable|female vocal|male vocal|duet|choir|vocal harmony|breathy vocal|raspy vocal|falsetto|spoken vocal|shouted vocal|whispered vocal|gospel vocal|operatic vocal|rap vocal|vocal chops|instrumental|acoustic guitar|electric guitar|fingerstyle guitar|distorted guitar|piano|grand piano|electric piano|synthesizer|analog synth|modular synth|strings|orchestral strings|violin|cello|brass|trumpet|saxophone|flute|harp|organ|accordion|banjo|mandolin|sitar|tabla|steel drum|marimba|808 bass|sub bass|upright bass|funk bass|live drums|drum machine|hand percussion|breakbeats|four-on-the-floor|syncopated rhythm|half-time groove|polyrhythmic|minimal production|maximalist production|clean production|gritty production|vintage production|modern production|lo-fi production|hi-fi production|reverb-heavy|distorted|sidechained|layered|sparse arrangement|lush arrangement|slow build|big chorus|catchy hook|key change|tempo shift|cinematic intro|dramatic finale|radio-ready|club-ready|festival anthem|late-night|summer|winter|road trip|workout|study music|sleep music|rainy day|sunset|midnight|retro|futuristic|70s|80s|90s|2000s" ).split("|"); const TAG_MODIFIERS = ( "playful|poetic|emotional|organic|emotive|aggressive|melodious|calming|heroic|soaring|dreamy|dark|uplifting|nostalgic|cinematic|intimate|euphoric|haunting|hypnotic|soulful|raw|warm|ethereal|rebellious" ).split("|"); const TAG_GENRES = ( "pop|indie pop|synth-pop|rock|indie rock|folk|country|soul|funk|disco|r&b|hip hop|trap|spoken word|jazz|blues|bossa nova|afrobeat|reggae|bhangra|classical|orchestral|ambient|electronic|house|techno|trance|dubstep|drum and bass|uk garage" ).split("|"); const MUSIC_TAGS = Array.from(new Set([ ...BASE_MUSIC_TAGS, ...TAG_MODIFIERS.flatMap((modifier) => TAG_GENRES.map((genre) => `${modifier} ${genre}`) ), ])).slice(0, 500); function pickRandomMusicTags(excludedTags = []) { const excluded = new Set(excludedTags); const pool = MUSIC_TAGS.filter((tag) => !excluded.has(tag)); for (let index = pool.length - 1; index > 0; index -= 1) { const randomIndex = Math.floor(Math.random() * (index + 1)); [pool[index], pool[randomIndex]] = [pool[randomIndex], pool[index]]; } return pool.slice(0, 15); } function FieldLabel({ htmlFor, label, meta }) { return (

{label} {meta && {meta}}

); } function Tool({ onRun }) { const [mode, setMode] = useState("simple"); const [prompt, setPrompt] = useState(""); const [lyrics, setLyrics] = useState(""); const [style, setStyle] = useState(""); const [songTitle, setSongTitle] = useState(""); const [voiceType, setVoiceType] = useState("Auto"); const [sourceMode, setSourceMode] = useState("upload"); const [sourceSong, setSourceSong] = useState(""); const [hasSourceAudio, setHasSourceAudio] = useState(false); const [changeRequest, setChangeRequest] = useState(""); const [editTitle, setEditTitle] = useState(""); const [editLyrics, setEditLyrics] = useState(""); const [loading, setLoading] = useState(false); const [suggestedTags, setSuggestedTags] = useState(() => pickRandomMusicTags()); const canRun = mode === "simple" ? Boolean(prompt.trim()) : mode === "lyrics" ? Boolean(lyrics.trim()) : Boolean(changeRequest.trim()) && ( sourceMode === "upload" ? hasSourceAudio : Boolean(sourceSong.trim()) ); const randomizePrompt = () => { const alternatives = RANDOM_SONG_PROMPTS.filter((candidate) => candidate !== prompt); const choices = alternatives.length > 0 ? alternatives : RANDOM_SONG_PROMPTS; setPrompt(choices[Math.floor(Math.random() * choices.length)]); }; const promptHasTag = (tag) => prompt .toLowerCase() .split(",") .map((part) => part.trim()) .includes(tag.toLowerCase()); const appendTagToPrompt = (tag) => { setPrompt((current) => { const parts = current .toLowerCase() .split(",") .map((part) => part.trim()); if (parts.includes(tag.toLowerCase())) return current; const description = current.trimEnd(); return description ? `${description}, ${tag}` : tag; }); }; const styleHasTag = (tag) => style .toLowerCase() .split(",") .map((part) => part.trim()) .includes(tag.toLowerCase()); const appendTagToStyle = (tag) => { setStyle((current) => { const parts = current .toLowerCase() .split(",") .map((part) => part.trim()); if (parts.includes(tag.toLowerCase())) return current; const currentTags = current.trimEnd(); return currentTags ? `${currentTags}, ${tag}` : tag; }); }; const refreshSuggestedTags = () => { setSuggestedTags((currentTags) => pickRandomMusicTags(currentTags)); }; const handleRun = async (event) => { event?.preventDefault(); if (!canRun || loading) return; setLoading(true); showLoading(mode === "edit" ? "Creating a new version of your song…" : "Generating music..."); try { let payload; if (mode === "edit") { payload = { mode: "edit", source_mode: sourceMode, change_request: changeRequest.trim(), }; if (sourceMode === "existing") { payload.source_song = sourceSong.trim(); const platformFiles = window.__platformInputs?.files; if (platformFiles) delete platformFiles.source_audio; } if (editTitle.trim()) payload.song_title = editTitle.trim(); if (editLyrics.trim()) payload.lyrics = editLyrics.trim(); } else if (mode === "lyrics") { payload = { mode: "lyrics", lyrics: lyrics.trim(), voice_type: voiceType, }; if (style.trim()) payload.style = style.trim(); if (songTitle.trim()) payload.song_title = songTitle.trim(); } else { payload = { mode: "simple", prompt: prompt.trim(), voice_type: "Auto", }; } await onRun(payload); } catch (err) { showError(err?.message || (mode === "edit" ? "Song editing failed. Please try again." : "Music generation failed. Please try again.")); } finally { hideLoading(); setLoading(false); } }; return (

AI Music

{mode === "simple" ? (

setPrompt(event.target.value)}
                  placeholder="Warm acoustic pop, bright guitar, a soaring final chorus…"
                  autoComplete="off"
                  rows={3}
                />
                <button
                  type="button"
                  className="music-randomize"
                  onClick={randomizePrompt}
                  disabled={loading}
                  aria-label="Use a random song description"
                  title="Surprise me"
                >
                  <DiceIcon />
                  <span>Inspire Me</span>
                </button>
              </div>
            </section>

<section className="music-field-group" aria-labelledby="suggested-tags-label">
              <div className="music-label-row">
                <span className="music-label" id="suggested-tags-label">Suggested tags</span>
              </div>
              <div className="music-tag-row">
                <button
                  type="button"
                  className="music-tags-refresh"
                  onClick={refreshSuggestedTags}
                  disabled={loading}
                  aria-label="Refresh suggested tags"
                  title="Show 15 new tags"
                >
                  <RefreshIcon />
                </button>
                <div
                  key={suggestedTags.join("|")}
                  className="music-tag-scroller"
                  role="group"
                  aria-labelledby="suggested-tags-label"
                >
                  {suggestedTags.map((tag) => {
                    const isAdded = promptHasTag(tag);
                    return (
                      <button
                        key={tag}
                        type="button"
                        className={`music-tag-chip${isAdded ? " is-added" : ""}`}
                        onClick={() => appendTagToPrompt(tag)}
                        disabled={loading}
                        aria-pressed={isAdded}
                        title={`Add ${tag} to the song description`}
                      >
                        {tag}
                      </button>
                    );
                  })}
                </div>
              </div>
            </section>
          </div>
        ) : mode === "lyrics" ? (
          <div className="music-grid mode-panel" key="lyrics">
            <section className="music-field-group">
              <FieldLabel htmlFor="lyrics" label="Lyrics" meta={`Required · ${lyrics.length.toLocaleString()} / 5,000`} />
              <textarea
                id="lyrics"
                className="music-control"
                value={lyrics}
                onChange={(event) => setLyrics(event.target.value)}
                placeholder={'[Verse]\nPaste finished lyrics here…\n\n[Chorus]\nAdd the hook you want to hear.'}
                rows={7}
                maxLength={5000}
                aria-describedby="lyrics-hint"
              />
              <p id="lyrics-hint" className="music-hint">These lyrics will be used directly in the song.</p>
            </section>

<div className="music-grid music-grid--two">
              <section className="music-field-group">
                <FieldLabel htmlFor="lyrics-style-tags" label="Style tags" meta="Optional" />
                <input
                  id="lyrics-style-tags"
                  className="music-control"
                  value={style}
                  onChange={(event) => setStyle(event.target.value)}
                  placeholder="Acoustic pop, warm, upbeat"
                  autoComplete="off"
                />
              </section>

<section className="music-field-group">
                <FieldLabel htmlFor="song-title" label="Song title" meta="Optional" />
                <input
                  id="song-title"
                  className="music-control"
                  value={songTitle}
                  onChange={(event) => setSongTitle(event.target.value)}
                  placeholder="Give your track a name"
                  autoComplete="off"
                />
              </section>
            </div>

<section className="music-field-group" aria-labelledby="lyrics-suggested-tags-label">
              <div className="music-label-row">
                <span className="music-label" id="lyrics-suggested-tags-label">Suggested tags</span>
              </div>
              <div className="music-tag-row">
                <button
                  type="button"
                  className="music-tags-refresh"
                  onClick={refreshSuggestedTags}
                  disabled={loading}
                  aria-label="Refresh suggested tags"
                  title="Show 15 new tags"
                >
                  <RefreshIcon />
                </button>
                <div
                  key={`lyrics-${suggestedTags.join("|")}`}
                  className="music-tag-scroller"
                  role="group"
                  aria-labelledby="lyrics-suggested-tags-label"
                >
                  {suggestedTags.map((tag) => {
                    const isAdded = styleHasTag(tag);
                    return (
                      <button
                        key={tag}
                        type="button"
                        className={`music-tag-chip${isAdded ? " is-added" : ""}`}
                        onClick={() => appendTagToStyle(tag)}
                        disabled={loading}
                        aria-pressed={isAdded}
                        title={`Add ${tag} to style tags`}
                      >
                        {tag}
                      </button>
                    );
                  })}
                </div>
              </div>
            </section>

<section className="music-field-group">
              <div className="music-label-row">
                <span className="music-label" id="voice-label">Voice</span>
                <span className="music-meta">{voiceType}</span>
              </div>
              <div className="voice-picker" role="radiogroup" aria-labelledby="voice-label">
                {VOICE_OPTIONS.map((option) => (
                  <button
                    key={option}
                    type="button"
                    role="radio"
                    aria-checked={voiceType === option}
                    className={`voice-option${voiceType === option ? " is-active" : ""}`}
                    onClick={() => setVoiceType(option)}
                  >
                    {option}
                  </button>
                ))}
              </div>
            </section>
          </div>
        ) : (
          <div className="music-grid mode-panel" key="edit">
            <section className="music-field-group">
              <FieldLabel htmlFor="edit-source-song" label="Source song" meta="Required" />
              <div className="edit-source-tabs" role="tablist" aria-label="Source song type">
                <button
                  type="button"
                  role="tab"
                  aria-selected={sourceMode === "existing"}
                  className={sourceMode === "existing" ? "is-active" : ""}
                  onClick={() => setSourceMode("existing")}
                  disabled={loading}
                >
                  Existing song
                </button>
                <button
                  type="button"
                  role="tab"
                  aria-selected={sourceMode === "upload"}
                  className={sourceMode === "upload" ? "is-active" : ""}
                  onClick={() => setSourceMode("upload")}
                  disabled={loading}
                >
                  Upload audio
                </button>
              </div>
              {sourceMode === "existing" ? (
                <>
                  <input
                    id="edit-source-song"
                    className="music-control"
                    value={sourceSong}
                    onChange={(event) => setSourceSong(event.target.value)}
                    placeholder="Paste the exact clip ID from a previous AI Music result"
                    autoComplete="off"
                  />
                  <p className="music-hint">Use a song previously generated in Constants.</p>
                </>
              ) : (
                <div className="edit-upload">
                  <FilePicker
                    fieldName="source_audio"
                    accept={[".mp3", ".wav", ".m4a", ".aac", ".flac", ".ogg"]}
                    label="Choose an audio file"
                    description="MP3, WAV, M4A, AAC, FLAC, or OGG · up to 100MB"
                    onChange={(files) => setHasSourceAudio(files.length > 0)}
                  />
                  <p className="music-hint">The file is imported before the edited version is created.</p>
                </div>
              )}
            </section>

<section className="music-field-group">
              <FieldLabel htmlFor="edit-change-request" label="What should change?" meta="Required" />
              <textarea
                id="edit-change-request"
                className="music-control"
                value={changeRequest}
                onChange={(event) => setChangeRequest(event.target.value)}
                placeholder="Make the opening more exciting while preserving the vocals and lyrics."
                rows={5}
                maxLength={2000}
              />
              <p className="music-hint">Describe any creative change, including changes to the intro, ending, genre, mood, instruments, arrangement, vocals, or lyrics.</p>
            </section>

<div className="music-grid music-grid--two">
              <section className="music-field-group">
                <FieldLabel htmlFor="edit-title" label="New title" meta="Optional" />
                <input
                  id="edit-title"
                  className="music-control"
                  value={editTitle}
                  onChange={(event) => setEditTitle(event.target.value)}
                  placeholder="Choose automatically"
                  maxLength={100}
                />
              </section>
              <section className="music-field-group">
                <FieldLabel htmlFor="edit-lyrics" label="Replacement lyrics" meta="Optional" />
                <textarea
                  id="edit-lyrics"
                  className="music-control"
                  value={editLyrics}
                  onChange={(event) => setEditLyrics(event.target.value)}
                  placeholder="Leave blank to preserve detectable source lyrics"
                  rows={4}
                  maxLength={5000}
                />
              </section>
            </div>

<div className="edit-note">
              Creates a new version. Detectable vocals and lyrics are preserved unless your request changes them; instrumental songs continue normally.
            </div>
          </div>
        )}

<footer className="music-submit-row">
          <button
            type="submit"
            className={`music-submit${loading ? " is-loading" : ""}`}
            disabled={loading || !canRun}
          >
            <CreateMusicIcon />
            {loading
              ? (mode === "edit" ? "Creating version…" : "Creating your track…")
              : (mode === "edit" ? "Create edited version" : "Create Music")}
          </button>
        </footer>
      </form>
    </main>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  React.createElement(Tool, { onRun: window.__onRun })
);
</article></body></html>

AI Music Generatora Constants tool made by Constants