Spaces:
Sleeping
Sleeping
| <html lang="ja"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HarmoSplit — 主旋律 / ハモリ 分離アプリ</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/style.css"> | |
| </head> | |
| <body> | |
| <div class="bg-orbs"> | |
| <div class="orb orb1"></div> | |
| <div class="orb orb2"></div> | |
| <div class="orb orb3"></div> | |
| </div> | |
| <main class="container"> | |
| <!-- ヘッダー --> | |
| <header class="header"> | |
| <div class="logo"> | |
| <span class="logo-icon">🎧</span> | |
| <span class="logo-text">HarmoSplit</span> | |
| </div> | |
| <p class="tagline">音楽ファイルから<strong>主旋律</strong>と<strong>ハモリ</strong>を AI が分離。<br>左右イヤホンで聴き分けられる WAV を生成します。</p> | |
| </header> | |
| <!-- アップロードカード --> | |
| <section class="card upload-card" id="uploadSection"> | |
| <!-- トークン認証エリア（Stripe 設定時のみ表示） --> | |
| <div class="token-area" id="tokenArea" style="display:none;"> | |
| <div class="token-row"> | |
| <input type="text" id="tokenInput" placeholder="アクセストークンを入力..." | |
| autocomplete="off" spellcheck="false"> | |
| <button class="btn-verify" id="verifyBtn">確認</button> | |
| </div> | |
| <p class="token-hint"> 512 トークンをお持ちでない方は <a href="/pricing" class="pricing-link">料金ページ</a> から登録できます。</p> | |
| <p class="token-ok hidden" id="tokenOk">✅ 認証済み</p> | |
| </div> | |
| <div class="drop-zone" id="dropZone"> | |
| <div class="drop-icon">🎵</div> | |
| <p class="drop-text">音声・動画ファイルをドロップ</p> | |
| <p class="drop-sub">または</p> | |
| <label class="btn btn-outline" for="fileInput">ファイルを選択</label> | |
| <input type="file" id="fileInput" accept=".mp3,.wav,.flac,.aac,.ogg,.m4a,.mp4,.mov,.avi,.mkv,.m4v,.webm" hidden> | |
| <p class="drop-formats">MP3 / WAV / MP4 / MOV / MKV などに対応</p> | |
| </div> | |
| <!-- 設定パネル --> | |
| <div class="settings"> | |
| <div class="setting-row"> | |
| <label for="instVol">伴奏音量</label> | |
| <input type="range" id="instVol" min="0" max="1" step="0.05" value="0.15"> | |
| <span class="setting-value" id="instVolLabel">15%</span> | |
| </div> | |
| <div class="setting-row"> | |
| <label for="modelSelect">Demucs モデル</label> | |
| <select id="modelSelect"> | |
| <option value="htdemucs_6s">htdemucs_6s（推奨・高品質）</option> | |
| <option value="htdemucs">htdemucs（軽量・高速）</option> | |
| </select> | |
| </div> | |
| <div class="setting-row"> | |
| <label for="useMdx"> | |
| UVR AI 分離（高精度） | |
| <span class="badge">推奨</span> | |
| </label> | |
| <label class="toggle"> | |
| <input type="checkbox" id="useMdx" checked> | |
| <span class="slider"></span> | |
| </label> | |
| </div> | |
| </div> | |
| <button class="btn btn-primary" id="startBtn" disabled>処理を開始</button> | |
| </section> | |
| <!-- 処理中カード --> | |
| <section class="card progress-card hidden" id="progressSection"> | |
| <div class="progress-header"> | |
| <div class="spinner"></div> | |
| <div> | |
| <p class="progress-title">AI 処理中...</p> | |
| <p class="progress-file" id="progressFile"></p> | |
| </div> | |
| </div> | |
| <div class="progress-bar-wrap"> | |
| <div class="progress-bar" id="progressBar"></div> | |
| </div> | |
| <p class="progress-pct" id="progressPct">0%</p> | |
| <div class="log-box" id="logBox"></div> | |
| </section> | |
| <!-- 完了カード --> | |
| <section class="card result-card hidden" id="resultSection"> | |
| <div class="result-icon">✅</div> | |
| <h2 class="result-title">処理完了！</h2> | |
| <div class="channel-info"> | |
| <div class="channel-item left"> | |
| <span class="ch-label">L</span> | |
| <span class="ch-desc">主旋律（メインボーカル）</span> | |
| </div> | |
| <div class="channel-item right"> | |
| <span class="ch-label">R</span> | |
| <span class="ch-desc">ハモリ / バッキングボーカル</span> | |
| </div> | |
| </div> | |
| <a class="btn btn-primary download-btn" id="downloadBtn" href="#" download> | |
| <span>⬇️</span> WAV をダウンロード | |
| </a> | |
| <button class="btn btn-outline reset-btn" id="resetBtn">別のファイルを処理する</button> | |
| </section> | |
| <!-- エラーカード --> | |
| <section class="card error-card hidden" id="errorSection"> | |
| <div class="result-icon">❌</div> | |
| <h2 class="result-title">エラーが発生しました</h2> | |
| <p class="error-msg" id="errorMsg"></p> | |
| <button class="btn btn-outline reset-btn" id="resetBtnErr">もう一度試す</button> | |
| </section> | |
| </main> | |
| <footer class="footer"> | |
| <p>🎧 HarmoSplit — Powered by <a href="https://github.com/facebookresearch/demucs" target="_blank">Demucs</a> & UVR MDX-NET</p> | |
| </footer> | |
| <script src="/app.js"></script> | |
| </body> | |
| </html> | |