gahusb/web-page
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

MusicStudio: Suno/MusicGen 듀얼 프로바이더 UI 추가

Browse Source 
- Provider 선택 바 (Suno 🎙️ / MusicGen 🤖)
- Suno 전용: 보컬/인스트루멘탈 토글, 가사 입력, AI 가사 생성
- 라이브러리·결과 카드에 provider 뱃지 표시
- TrackResult에 가사 접기/펼치기 추가
- api.js: getMusicProviders, generateMusicLyrics 함수 추가

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
gahusb
2026-04-03 08:26:49 +09:00
parent 299ce636ff
commit a727bbf153
3 changed files with 330 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/api.js
View File

@@ -247,20 +247,33 @@ export function deleteSellHistory(id) {
}
// ── AI 음악 생성 API ──────────────────────────────────────────────────────────
// POST /api/music/generate body: { genre, moods, instruments, duration_sec, bpm, key, scale, prompt }
// → { task_id: string }
// GET /api/music/providers → { providers: [{ id, name, description, features }] }
export function getMusicProviders() {
return apiGet('/api/music/providers');
}
// POST /api/music/generate
// body: { provider, genre, moods, instruments, duration_sec, bpm, key, scale, prompt, lyrics, instrumental }
// → { task_id: string, provider: string }
export function generateMusic(payload) {
return apiPost('/api/music/generate', payload);
}
// GET /api/music/status/:task_id
// → { status: "queued"|"processing"|"succeeded"|"failed", progress: 0~100, message, audio_url?, error? }
// → { status, progress, message, audio_url?, error?, provider?, track? }
export function getMusicStatus(taskId) {
return apiGet(`/api/music/status/${encodeURIComponent(taskId)}`);
}
// POST /api/music/lyrics body: { prompt }
// → { id, status, text } (Suno 가사 생성)
export function generateMusicLyrics(prompt) {
return apiPost('/api/music/lyrics', { prompt });
}
// GET /api/music/library
// → { tracks: [{ id, title, genre, moods, instruments, duration_id, bpm, key, scale, audio_url, created_at }] }
// → { tracks: [{ id, title, genre, ..., provider, lyrics, image_url, suno_id }] }
export function getMusicLibrary() {
return apiGet('/api/music/library');
}

178
src/pages/music/MusicStudio.css
View File

@@ -1701,6 +1701,184 @@
}
}
/* ═══════════════════════════════════════════════════
PROVIDER BAR
═══════════════════════════════════════════════════ */
.ms-provider-bar {
display: flex;
gap: 8px;
margin-bottom: 20px;
}
.ms-provider-btn {
flex: 1;
display: flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 10px;
cursor: pointer;
transition: all 0.2s;
text-align: left;
}
.ms-provider-btn:hover {
background: rgba(255,255,255,0.06);
border-color: rgba(255,255,255,0.15);
}
.ms-provider-btn.is-active {
background: rgba(var(--ms-accent-rgb, 245,166,35), 0.12);
border-color: var(--ms-accent, #f5a623);
box-shadow: 0 0 12px rgba(var(--ms-accent-rgb, 245,166,35), 0.15);
}
.ms-provider-btn__icon {
font-size: 20px;
flex-shrink: 0;
}
.ms-provider-btn__name {
font-family: 'Bebas Neue', sans-serif;
font-size: 15px;
letter-spacing: 0.04em;
color: #f0f0f0;
}
.ms-provider-btn__desc {
font-size: 10px;
color: rgba(255,255,255,0.4);
margin-left: auto;
}
/* ═══════════════════════════════════════════════════
VOCALS & LYRICS (SUNO)
═══════════════════════════════════════════════════ */
.ms-vocal-toggle {
display: flex;
gap: 6px;
margin-bottom: 16px;
}
.ms-vocal-btn {
flex: 1;
padding: 10px 12px;
background: rgba(255,255,255,0.03);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
color: rgba(255,255,255,0.6);
cursor: pointer;
font-size: 13px;
transition: all 0.2s;
}
.ms-vocal-btn:hover {
background: rgba(255,255,255,0.06);
}
.ms-vocal-btn.is-active {
background: rgba(var(--ms-accent-rgb, 245,166,35), 0.12);
border-color: var(--ms-accent, #f5a623);
color: #f0f0f0;
}
.ms-lyrics-wrap {
margin-top: 4px;
}
.ms-lyrics-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 6px;
}
.ms-lyrics {
width: 100%;
min-height: 160px;
padding: 12px;
background: rgba(0,0,0,0.3);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 8px;
color: #e0e0e0;
font-family: 'Courier Prime', monospace;
font-size: 13px;
line-height: 1.6;
resize: vertical;
}
.ms-lyrics:focus {
outline: none;
border-color: var(--ms-accent, #f5a623);
}
.ms-lyrics-hint {
margin-top: 6px;
font-size: 11px;
color: rgba(255,255,255,0.35);
}
.ms-btn--sm {
font-size: 11px;
padding: 4px 10px;
}
/* ═══════════════════════════════════════════════════
PROVIDER TAG
═══════════════════════════════════════════════════ */
.ms-result__tag--provider {
font-weight: 600;
letter-spacing: 0.02em;
}
.ms-result__tag--provider.is-suno {
background: rgba(168, 85, 247, 0.15);
border-color: rgba(168, 85, 247, 0.3);
color: #c084fc;
}
.ms-result__tag--provider.is-local {
background: rgba(96, 165, 250, 0.15);
border-color: rgba(96, 165, 250, 0.3);
color: #60a5fa;
}
/* ═══════════════════════════════════════════════════
LYRICS IN RESULT
═══════════════════════════════════════════════════ */
.ms-result__lyrics {
margin-top: 12px;
border: 1px solid rgba(255,255,255,0.06);
border-radius: 8px;
overflow: hidden;
}
.ms-result__lyrics summary {
padding: 8px 12px;
cursor: pointer;
font-size: 13px;
color: rgba(255,255,255,0.6);
background: rgba(255,255,255,0.02);
}
.ms-result__lyrics summary:hover {
color: #f0f0f0;
}
.ms-result__lyrics-text {
padding: 12px;
margin: 0;
font-family: 'Courier Prime', monospace;
font-size: 12px;
line-height: 1.7;
color: rgba(255,255,255,0.7);
white-space: pre-wrap;
max-height: 300px;
overflow-y: auto;
}
/* ═══════════════════════════════════════════════════
REDUCED MOTION
═══════════════════════════════════════════════════ */

136
src/pages/music/MusicStudio.jsx
View File

@@ -2,7 +2,9 @@ import React, { useCallback, useEffect, useRef, useState } from 'react';
import {
deleteMusicTrack,
generateMusic,
generateMusicLyrics,
getMusicLibrary,
getMusicProviders,
getMusicStatus,
} from '../../api';
import './MusicStudio.css';
@@ -380,6 +382,11 @@ const TrackResult = ({ track, onDownload, onNew }) => {
/>
<div className="ms-result__tags">
{track.provider && (
<span className={`ms-result__tag ms-result__tag--provider ${track.provider === 'suno' ? 'is-suno' : 'is-local'}`}>
{track.provider === 'suno' ? '🎙️ Suno' : '🤖 MusicGen'}
</span>
)}
{(track.instruments ?? []).slice(0, 4).map((inst) => (
<span key={inst} className="ms-result__tag">{inst}</span>
))}
@@ -388,6 +395,13 @@ const TrackResult = ({ track, onDownload, onNew }) => {
))}
</div>
{track.lyrics && (
<details className="ms-result__lyrics">
<summary>🎤 가사 보기</summary>
<pre className="ms-result__lyrics-text">{track.lyrics}</pre>
</details>
)}
<div className="ms-result__actions">
<button type="button" className="ms-btn ms-btn--ghost" onClick={onNew}>
+ New Track
@@ -452,6 +466,11 @@ const LibraryCard = ({ track, onDelete, onPlay, isPlaying }) => {
/>
)}
<div className="ms-lib-card__tags">
{track.provider && (
<span className={`ms-result__tag ms-result__tag--provider ${track.provider === 'suno' ? 'is-suno' : 'is-local'}`}>
{track.provider === 'suno' ? '🎙️ Suno' : '🤖 MusicGen'}
</span>
)}
{(track.instruments ?? []).slice(0, 3).map((i) => (
<span key={i} className="ms-result__tag">{i}</span>
))}
@@ -517,6 +536,10 @@ export default function MusicStudio() {
/* ── 탭 ── */
const [tab, setTab] = useState('create');
/* ── Provider 상태 ── */
const [providers, setProviders] = useState([]);
const [provider, setProvider] = useState('suno');
/* ── 컨트롤 상태 ── */
const [genre, setGenre] = useState(null);
const [moods, setMoods] = useState([]);
@@ -527,6 +550,11 @@ export default function MusicStudio() {
const [scale, setScale] = useState('Major');
const [prompt, setPrompt] = useState('');
/* ── Suno 전용 상태 ── */
const [lyrics, setLyrics] = useState('');
const [instrumental, setInstrumental] = useState(false);
const [lyricsLoading, setLyricsLoading] = useState(false);
/* ── 생성 상태 ── */
const [isGenerating, setIsGenerating] = useState(false);
const [genProgress, setGenProgress] = useState(0);
@@ -554,6 +582,31 @@ export default function MusicStudio() {
const activeGenre = GENRES.find((g) => g.id === genre);
const accentColor = activeGenre?.color ?? '#f5a623';
/* ── Provider 로드 ── */
useEffect(() => {
getMusicProviders()
.then((data) => {
const list = data.providers ?? [];
setProviders(list);
if (list.length > 0 && !list.find((p) => p.id === provider)) {
setProvider(list[0].id);
}
})
.catch(() => {});
}, []); // eslint-disable-line react-hooks/exhaustive-deps
/* ── 가사 AI 생성 ── */
const handleGenerateLyrics = async () => {
if (!prompt && !genre) return;
setLyricsLoading(true);
try {
const desc = prompt || `${GENRES.find((g) => g.id === genre)?.label ?? ''} ${moods.map((id) => MOODS.find((m) => m.id === id)?.label).join(' ')}`;
const result = await generateMusicLyrics(desc);
if (result?.text) setLyrics(result.text);
} catch {}
finally { setLyricsLoading(false); }
};
/* ── 라이브러리 로드 ── */
const loadLibrary = useCallback(async () => {
setLibLoading(true);
@@ -676,6 +729,7 @@ export default function MusicStudio() {
const instList = instruments.length > 0 ? instruments : ['piano', 'synth', 'bass'];
const payload = {
provider,
title,
genre,
moods,
@@ -685,6 +739,10 @@ export default function MusicStudio() {
key: musicalKey,
scale,
prompt: prompt || undefined,
...(provider === 'suno' ? {
lyrics: lyrics || undefined,
instrumental,
} : {}),
};
try {
@@ -782,6 +840,26 @@ export default function MusicStudio() {
{/* ─── LEFT: Controls ─── */}
<div className="ms-controls">
{/* Provider Selector */}
{providers.length > 0 && (
<div className="ms-provider-bar">
{providers.map((p) => (
<button
key={p.id}
type="button"
className={`ms-provider-btn ${provider === p.id ? 'is-active' : ''}`}
onClick={() => setProvider(p.id)}
>
<span className="ms-provider-btn__icon">
{p.id === 'suno' ? '🎙️' : '🤖'}
</span>
<span className="ms-provider-btn__name">{p.name}</span>
<span className="ms-provider-btn__desc">{p.description}</span>
</button>
))}
</div>
)}
{/* Step 1: Genre */}
<section className="ms-section">
<div className="ms-section__head">
@@ -1031,6 +1109,62 @@ export default function MusicStudio() {
<span className="ms-prompt__count">{prompt.length}/500</span>
</div>
</section>
{/* Step 6: Vocals & Lyrics (Suno only) */}
{provider === 'suno' && (
<section className="ms-section">
<div className="ms-section__head">
<span className="ms-section__step">06</span>
<h2 className="ms-section__title">Vocals & Lyrics</h2>
<span className="ms-section__hint">Suno 전용</span>
</div>
<div className="ms-vocal-toggle">
<button
type="button"
className={`ms-vocal-btn ${!instrumental ? 'is-active' : ''}`}
onClick={() => setInstrumental(false)}
>
🎤 보컬 포함
</button>
<button
type="button"
className={`ms-vocal-btn ${instrumental ? 'is-active' : ''}`}
onClick={() => setInstrumental(true)}
>
🎹 인스트루멘탈
</button>
</div>
{!instrumental && (
<>
<div className="ms-lyrics-wrap">
<div className="ms-lyrics-header">
<label className="ms-param-label">가사</label>
<button
type="button"
className="ms-btn ms-btn--ghost ms-btn--sm"
onClick={handleGenerateLyrics}
disabled={lyricsLoading || (!prompt && !genre)}
>
{lyricsLoading ? '생성 중...' : '✨ AI 가사 생성'}
</button>
</div>
<textarea
className="ms-lyrics"
placeholder={"[Verse]\n여기에 가사를 입력하세요...\n\n[Chorus]\n후렴구 가사...\n\n비워두면 AI가 자동으로 가사를 작성합니다."}
value={lyrics}
onChange={(e) => setLyrics(e.target.value)}
rows={8}
/>
<p className="ms-lyrics-hint">
섹션 태그: [Verse], [Chorus], [Bridge], [Outro], [Instrumental]
</p>
</div>
</>
)}
</section>
)}
</div>
{/* ─── RIGHT: Stage ─── */}
@@ -1076,7 +1210,7 @@ export default function MusicStudio() {
)}
</span>
<span className="ms-generate-btn__label">
{isGenerating ? 'Generating…' : 'Generate Track'}
{isGenerating ? 'Generating…' : `Generate Track${provider === 'suno' ? ' (Suno)' : ''}`}
</span>
</button>
)}