initial: HarmoSplit app

.dockerignore

@@ -0,0 +1,15 @@
+venv/
+__pycache__/
+*.pyc
+*.pyo
+.git/
+.gitignore
+*.wav
+*.mp3
+*.mp4
+*.mov
+output_panned.wav
+test_audio.wav
+test.mp4
+.env
+*.log

.gitignore

@@ -0,0 +1,41 @@
+# Python
+__pycache__/
+*.pyc
+*.pyo
+*.pyd
+*.egg-info/
+dist/
+build/
+.eggs/
+
+# 仮想環境
+venv/
+.venv/
+env/
+
+# 出力ファイル
+*.wav
+*.mp3
+*.mp4
+*.mov
+output_panned.wav
+data/
+
+# HF モデルキャッシュ
+.cache/
+
+# 環境変数
+.env
+.env.*
+
+# エディタ
+.vscode/
+.idea/
+*.swp
+
+# OS
+.DS_Store
+Thumbs.db
+
+# ログ
+*.log

Dockerfile

@@ -0,0 +1,33 @@
+# HarmoSplit — HuggingFace Spaces 用 Dockerfile
+# ポート 7860 を使用（HF Spaces 必須）
+
+FROM python:3.11-slim
+
+# システム依存関係
+RUN apt-get update && apt-get install -y --no-install-recommends \
+    ffmpeg \
+    git \
+    && apt-get clean && rm -rf /var/lib/apt/lists/*
+
+WORKDIR /app
+
+# PyTorch CPU 版を先にインストール（キャッシュ効率化）
+RUN pip install --no-cache-dir \
+    torch==2.2.2 torchaudio==2.2.2 \
+    --index-url https://download.pytorch.org/whl/cpu
+
+# その他依存関係
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# アプリケーションコード
+COPY . .
+
+# 永続ストレージ用ディレクトリ（HF Spaces の /data にマウントされる）
+RUN mkdir -p /data
+
+# HuggingFace Spaces は 7860 番ポートを公開する
+EXPOSE 7860
+
+# 起動
+CMD ["python", "server.py"]

README.md

@@ -0,0 +1,34 @@
+---
+title: HarmoSplit
+emoji: 🎧
+colorFrom: purple
+colorTo: blue
+sdk: docker
+pinned: false
+license: mit
+app_port: 7860
+---
+
+# 🎧 HarmoSplit
+
+音楽ファイルから **主旋律（メインボーカル）** と **ハモリ（バッキングボーカル）** を AI が分離し、左右イヤホンで聴き分けられる WAV を生成するアプリです。
+
+## 機能
+
+- 🎵 音声ファイル（MP3 / WAV / FLAC など）に対応
+- 🎬 動画ファイル（MP4 / MOV / MKV など）から自動で音声抽出
+- 🤖 [Demucs](https://github.com/facebookresearch/demucs) + UVR MDX-NET KARA による 2 段階 AI 分離
+- 🎚️ 伴奏音量・モデル選択など細かい設定が可能
+
+## 使い方
+
+1. ファイルをドラッグ & ドロップ（または「ファイルを選択」）
+2. オプションを設定して「処理を開始」をクリック
+3. 完了後「WAV をダウンロード」🎧
+
+## 技術スタック
+
+- **音源分離**: [Demucs htdemucs_6s](https://github.com/facebookresearch/demucs)
+- **ボーカル分離**: UVR MDX-NET KARA 2
+- **バックエンド**: Flask
+- **フロントエンド**: HTML / CSS / JavaScript

app.py

@@ -0,0 +1,810 @@
+"""
+app.py — 主旋律 / ハモリ 分離 & L/R パンニング プロトタイプ
+=====================================================================
+使い方:
+    python app.py <入力ファイル> [--output output_panned.wav] [--inst-vol 0.15]
+
+入力: mp3 / wav / mp4 / mov など ffmpeg が対応する任意フォーマット
+出力: 左ch=主旋律(メインボーカル) / 右ch=ハモリ(コーラス) のステレオ WAV
+
+アルゴリズム概要:
+    1. subprocess で ffmpeg を直接呼び出し → 安定した音声抽出
+    2. Demucs (htdemucs_6s) で6音源分離
+         → vocals / other / drums / bass / guitar / piano
+    3. パンニング
+         - vocals → 左ch 100%
+         - other  → 右ch 100% (コーラス/ハモリ)
+         - 伴奏   → センター & 音量縮小 (--inst-vol で調整, 0=ミュート)
+    4. ミックスして output_panned.wav を出力
+"""
+
+import argparse
+import os
+import sys
+import tempfile
+import shutil
+import subprocess
+from pathlib import Path
+
+import numpy as np
+import soundfile as sf
+
+# ── torchaudio.save モンキーパッチ ─────────────────────────────
+# Windows 環境で torchcodec の DLL が読み込めず torchaudio.save が
+# 失敗する問題を回避するため、soundfile ベースの保存処理で置き換える。
+# これにより Demucs の内部での WAV 書き出しが正常に動作する。
+def _patched_torchaudio_save(uri, src, sample_rate, **kwargs):
+    """torchaudio.save を soundfile で代替する"""
+    import numpy as np
+    import soundfile as sf
+    data = src.detach().cpu().numpy()
+    # torchaudio は (C, T) 形式、soundfile は (T, C) を期待する
+    if data.ndim == 2:
+        data = data.T  # (T, C) に変換
+    elif data.ndim == 1:
+        pass  # モノラルはそのまま
+    sf.write(str(uri), data, sample_rate, subtype="PCM_16")
+
+try:
+    import torchaudio
+    torchaudio.save = _patched_torchaudio_save
+    # 新しいバージョンの内部モジュールもパッチ
+    try:
+        import torchaudio.backend.soundfile_backend as _sfb
+        _sfb.save = _patched_torchaudio_save
+    except Exception:
+        pass
+    try:
+        import torchaudio._backend.utils as _bu
+        # save 関数が複数箇所に散在するため torchaudio 本体だけで十分
+    except Exception:
+        pass
+except ImportError:
+    pass  # torchaudio がない場合は無視
+
+
+# ── UVR MDX-NET によるリード/バッキングボーカル分離 ────────────
+# UVR_MDXNET_KARA_2 モデル: ボーカルステムから
+#   Lead (リードボーカル) と Backing (バッキング/ハモリ) を分離する
+
+MDX_MODEL_REPO = "seanghay/uvr_models"
+MDX_MODEL_FILE = "UVR_MDXNET_KARA_2.onnx"
+
+# モデルの設定値 (UVR_MDXNET_KARA_2: 入力形状 [batch, 4, 2048, 256])
+MDX_CONFIG = {
+    "dim_f": 2048,    # 周波数ビン数（モデルの入力チャネル / 2）
+    "dim_t": 256,     # 時間フレーム数
+    "n_fft": 6144,    # STFT ウィンドウサイズ
+    "hop_length": 1024,
+    "sample_rate": 44100,
+    "overlap": 0.75,
+}
+
+
+def download_mdx_model(cache_dir: Path) -> Path:
+    """HuggingFace から UVR MDX-NET KARA モデルを取得する"""
+    model_path = cache_dir / MDX_MODEL_FILE
+    if model_path.exists():
+        print(f"[INFO] MDX モデルはキャッシュ済み: {model_path}")
+        return model_path
+
+    print(f"[INFO] UVR MDX-NET KARA モデルをダウンロード中... (初回のみ・約53MB)")
+    try:
+        from huggingface_hub import hf_hub_download
+        downloaded = hf_hub_download(
+            repo_id=MDX_MODEL_REPO,
+            filename=MDX_MODEL_FILE,
+            local_dir=str(cache_dir),
+        )
+        return Path(downloaded)
+    except Exception as e:
+        raise RuntimeError(
+            f"MDX モデルのダウンロードに失敗しました: {e}\n"
+            "インターネット接続を確認してください。"
+        )
+
+
+def mdx_separate_lead_backing(
+    vocals_wav: np.ndarray,
+    sr: int,
+    model_path: Path,
+) -> tuple[np.ndarray, np.ndarray]:
+    """
+    UVR MDX-NET KARA モデルを使ってボーカルを
+    リードボーカル と バッキング/ハモリ に分離する。
+
+    モデル入力形状: [1, 4, dim_f, dim_t] = [1, 4, 2048, 256]
+    vocals_wav: (samples, 2) float32 のステレオ配列
+    戻り値: (lead, backing) それぞれ (samples, 2) float32
+    """
+    import onnxruntime as ort
+
+    print("[INFO] UVR MDX-NET KARA でリード/バッキング分離を開始...")
+
+    dim_f      = MDX_CONFIG["dim_f"]       # 2048
+    dim_t      = MDX_CONFIG["dim_t"]       # 256
+    n_fft      = MDX_CONFIG["n_fft"]       # 6144
+    hop_length = MDX_CONFIG["hop_length"]  # 1024
+    overlap    = MDX_CONFIG["overlap"]     # 0.75
+
+    # ONNX セッション
+    sess_opts = ort.SessionOptions()
+    sess_opts.log_severity_level = 3
+    session = ort.InferenceSession(
+        str(model_path),
+        sess_options=sess_opts,
+        providers=["CPUExecutionProvider"],
+    )
+    input_name = session.get_inputs()[0].name
+
+    # 入力: (samples, 2) → (2, T)
+    mix = vocals_wav.T.astype(np.float32)  # (2, T)
+    n_channels, T = mix.shape
+
+    # チャンクサイズ = dim_t フレーム分のサンプル数
+    chunk_samples = hop_length * dim_t
+    step_samples  = int(chunk_samples * (1 - overlap))
+    pad_size      = chunk_samples   # 前後にゼロパディング
+
+    mix_padded = np.pad(mix, ((0, 0), (pad_size, pad_size + chunk_samples)))
+
+    # 出力バッファ
+    out_sum   = np.zeros((n_channels, mix_padded.shape[1]), dtype=np.float64)
+    out_count = np.zeros(mix_padded.shape[1], dtype=np.float64)
+
+    # ハン窓フェード
+    fade_len = step_samples
+    fade_in  = np.linspace(0.0, 1.0, fade_len)
+    fade_out = fade_in[::-1]
+    win      = np.ones(chunk_samples)
+    win[:fade_len]  = fade_in
+    win[-fade_len:] = fade_out
+
+    starts = range(0, mix_padded.shape[1] - chunk_samples, step_samples)
+    total  = len(list(starts))
+    print(f"[INFO] {total} チャンクを処理中...")
+
+    for idx, start in enumerate(range(0, mix_padded.shape[1] - chunk_samples, step_samples)):
+        chunk = mix_padded[:, start: start + chunk_samples]  # (2, chunk_samples)
+
+        # STFT → (2, n_fft//2+1, dim_t)
+        stft_l = _np_stft(chunk[0], n_fft, hop_length, dim_t)
+        stft_r = _np_stft(chunk[1], n_fft, hop_length, dim_t)
+
+        # 上位 dim_f ビンだけ使う
+        sl = stft_l[:dim_f, :]   # (dim_f, dim_t)
+        sr_ = stft_r[:dim_f, :]
+
+        # real/imag → (1, 4, dim_f, dim_t)
+        model_input = np.stack([
+            sl.real, sl.imag,
+            sr_.real, sr_.imag,
+        ], axis=0)[np.newaxis].astype(np.float32)  # (1,4,dim_f,dim_t)
+
+        # 推論 → (1, 4, dim_f, dim_t)
+        pred = session.run(None, {input_name: model_input})[0][0]  # (4, dim_f, dim_t)
+
+        # マスクをそのまま分離マスクとして適用
+        sep_l_stft = (pred[0] + 1j * pred[1]) * sl
+        sep_r_stft = (pred[2] + 1j * pred[3]) * sr_
+
+        # 周波数ビンを元の長さに戻す (残りはゼロ)
+        full_l = np.zeros((n_fft // 2 + 1, dim_t), dtype=np.complex64)
+        full_r = np.zeros((n_fft // 2 + 1, dim_t), dtype=np.complex64)
+        full_l[:dim_f] = sep_l_stft
+        full_r[:dim_f] = sep_r_stft
+
+        # iSTFT
+        sig_l = _np_istft(full_l, n_fft, hop_length, chunk_samples)
+        sig_r = _np_istft(full_r, n_fft, hop_length, chunk_samples)
+        sep = np.stack([sig_l, sig_r])  # (2, chunk_samples)
+
+        # オーバーラップ加算
+        out_sum[:, start: start + chunk_samples]  += sep * win
+        out_count[start: start + chunk_samples]   += win
+
+        if (idx + 1) % max(1, total // 10) == 0:
+            print(f"  {idx+1}/{total} チャンク完了")
+
+    np.maximum(out_count, 1e-8, out_count)
+    result = out_sum / out_count
+
+    # パディング除去
+    lead    = result[:, pad_size: pad_size + T]   # (2, T)
+    backing = mix - lead                           # 残差
+
+    print("[INFO] リード/バッキング分離完了")
+    return lead.T.astype(np.float32), backing.T.astype(np.float32)
+
+
+def _np_stft(signal: np.ndarray, n_fft: int, hop_length: int, n_frames: int) -> np.ndarray:
+    """
+    NumPy で STFT を計算する。
+    signal: (T,) float32
+    戻り値: (n_fft//2+1, n_frames) complex64
+    """
+    window = np.hanning(n_fft).astype(np.float32)
+    # 必要なサンプル数になるようにパディング
+    required = n_fft + hop_length * (n_frames - 1)
+    if signal.shape[0] < required:
+        signal = np.pad(signal, (0, required - signal.shape[0]))
+    else:
+        signal = signal[:required]
+
+    out = np.zeros((n_fft // 2 + 1, n_frames), dtype=np.complex64)
+    for i in range(n_frames):
+        s = i * hop_length
+        frame = signal[s: s + n_fft] * window
+        out[:, i] = np.fft.rfft(frame, n=n_fft).astype(np.complex64)
+    return out
+
+
+def _np_istft(stft: np.ndarray, n_fft: int, hop_length: int, length: int) -> np.ndarray:
+    """
+    NumPy で iSTFT を計算する。
+    stft: (n_fft//2+1, T) complex64
+    戻り値: (length,) float32
+    """
+    window = np.hanning(n_fft).astype(np.float32)
+    n_frames = stft.shape[1]
+    out  = np.zeros(length + n_fft, dtype=np.float64)
+    wsum = np.zeros(length + n_fft, dtype=np.float64)
+    for i in range(n_frames):
+        frame = np.fft.irfft(stft[:, i], n=n_fft).real * window
+        s = i * hop_length
+        e = s + n_fft
+        if s >= length:
+            break
+        out[s:e]  += frame
+        wsum[s:e] += window ** 2
+    np.maximum(wsum, 1e-8, wsum)
+    return (out / wsum)[:length].astype(np.float32)
+
+
+
+
+def download_mdx_model(cache_dir: Path) -> Path:
+    """HuggingFace から UVR MDX-NET KARA モデルを取得する"""
+    model_path = cache_dir / MDX_MODEL_FILE
+    if model_path.exists():
+        print(f"[INFO] MDX モデルはキャッシュ済み: {model_path}")
+        return model_path
+
+    print(f"[INFO] UVR MDX-NET KARA モデルをダウンロード中... (初回のみ)")
+    try:
+        from huggingface_hub import hf_hub_download
+        downloaded = hf_hub_download(
+            repo_id=MDX_MODEL_REPO,
+            filename=MDX_MODEL_FILE,
+            local_dir=str(cache_dir),
+        )
+        return Path(downloaded)
+    except Exception as e:
+        raise RuntimeError(
+            f"MDX モデルのダウンロードに失敗しました: {e}\n"
+            "インターネット接続を確認してください。"
+        )
+
+
+
+
+# ── ユーティリティ ──────────────────────────────────────────────
+
+
+VIDEO_EXTENSIONS = {".mp4", ".mov", ".avi", ".mkv", ".m4v", ".flv", ".webm", ".ts"}
+AUDIO_EXTENSIONS = {".mp3", ".wav", ".flac", ".aac", ".ogg", ".m4a"}
+
+
+def is_url(text: str) -> bool:
+    """http:// or https:// で始まる文字列を URL と判定する"""
+    return text.startswith("http://") or text.startswith("https://")
+
+
+def download_audio_from_url(url: str, tmp_dir: Path) -> Path:
+    """
+    yt-dlp で YouTube などの URL から音声をダウンロードし WAV に変換する。
+    YouTube 以外にも yt-dlp が対応するサイトは利用可能。
+    戻り値: 一時 WAV ファイルの Path
+    """
+    try:
+        import yt_dlp
+    except ImportError:
+        raise ImportError(
+            "yt-dlp が見つかりません。\n"
+            "pip install yt-dlp でインストールしてください。"
+        )
+
+    out_wav = tmp_dir / "source.wav"
+    print(f"[INFO] URL を検出。yt-dlp で音声をダウンロード中...")
+    print(f"       URL: {url}")
+
+    ydl_opts = {
+        # WAV に直接変換して一時ディレクトリに保存
+        "format": "bestaudio/best",
+        "outtmpl": str(tmp_dir / "ydl_download.%(ext)s"),
+        "postprocessors": [
+            {
+                "key": "FFmpegExtractAudio",
+                "preferredcodec": "wav",
+                "preferredquality": "0",
+            }
+        ],
+        "quiet": False,
+        "no_warnings": False,
+        "noplaylist": True,   # プレイリストでなく先頭の1曲のみ取得
+    }
+
+    with yt_dlp.YoutubeDL(ydl_opts) as ydl:
+        info = ydl.extract_info(url, download=True)
+        title = info.get("title", "unknown")
+        print(f"[INFO] ダウンロード完了: {title}")
+
+    # yt-dlp が生成した WAV を探す
+    wav_candidates = list(tmp_dir.glob("ydl_download*.wav"))
+    if not wav_candidates:
+        raise FileNotFoundError(
+            "yt-dlp の変換後 WAV が見つかりません。"
+            "ffmpeg が正しくインストールされているか確認してください。"
+        )
+    downloaded_wav = wav_candidates[0]
+
+    # ffmpeg でサンプルレートを 44100Hz に統一
+    ffmpeg = find_ffmpeg()
+    result = subprocess.run(
+        [
+            ffmpeg, "-y",
+            "-i", str(downloaded_wav),
+            "-ar", "44100",
+            "-ac", "2",
+            str(out_wav),
+        ],
+        capture_output=True, text=True, encoding="utf-8", errors="replace",
+    )
+    if result.returncode != 0:
+        print(f"[ffmpeg stderr]\n{result.stderr[-2000:]}")
+        raise RuntimeError("音声変換に失敗しました")
+
+    print(f"[INFO] 音声変換完了 → {out_wav.name}")
+    return out_wav
+
+
+def find_ffmpeg() -> str:
+    """ffmpeg の実行パスを返す。見つからなければ例外を投げる"""
+    ffmpeg_cmd = shutil.which("ffmpeg")
+    if ffmpeg_cmd:
+        return ffmpeg_cmd
+    candidates = [
+        r"C:\ffmpeg\bin\ffmpeg.exe",
+        r"C:\Program Files\ffmpeg\bin\ffmpeg.exe",
+        r"C:\ProgramData\chocolatey\bin\ffmpeg.exe",
+    ]
+    for c in candidates:
+        if Path(c).exists():
+            return c
+    raise FileNotFoundError(
+        "ffmpeg が見つかりません。\n"
+        "Windows: winget install Gyan.FFmpeg\n"
+        "Mac:     brew install ffmpeg\n"
+        "Linux:   sudo apt install ffmpeg"
+    )
+
+
+def check_audio_stream(input_path: Path) -> None:
+    """
+    ffprobe で音声ストリームの有無を確認する。
+    音声がない場合は分かりやすいエラーメッセージを出して終了する。
+    """
+    ffprobe_cmd = shutil.which("ffprobe")
+    if not ffprobe_cmd:
+        # ffprobe がない場合はスキップ（ffmpegで失敗させる）
+        return
+
+    result = subprocess.run(
+        [
+            ffprobe_cmd,
+            "-v", "quiet",
+            "-select_streams", "a",   # 音声ストリームのみ
+            "-show_entries", "stream=codec_type",
+            "-of", "csv=p=0",
+            str(input_path),
+        ],
+        capture_output=True, text=True, encoding="utf-8", errors="replace",
+    )
+    if not result.stdout.strip():
+        raise ValueError(
+            f"'{input_path.name}' に音声トラックが見つかりません。\n"
+            "このファイルには映像のみが含まれているため処理できません。\n"
+            "音声トラック付きのファイル（mp3/wav/mp4など）を指定してください。"
+        )
+
+
+def extract_audio(input_path: Path, out_wav: Path) -> None:
+    """
+    subprocess で ffmpeg を直接呼び出して音声を WAV に変換。
+    動画・音声どちらにも対応。事前に音声ストリームの有無を確認する。
+    """
+    ffmpeg = find_ffmpeg()
+    # 音声トラックの有無を事前確認
+    check_audio_stream(input_path)
+    print(f"[INFO] ffmpeg で音声変換中: {input_path.name} → {out_wav.name}")
+
+    cmd = [
+        ffmpeg,
+        "-y",                    # 上書き確認をスキップ
+        "-i", str(input_path),
+        "-vn",                   # 映像トラックを除外
+        "-acodec", "pcm_s16le",  # 16bit PCM
+        "-ar", "44100",          # サンプルレート
+        "-ac", "2",              # ステレオ
+        str(out_wav),
+    ]
+
+    result = subprocess.run(cmd, capture_output=True, text=True, encoding="utf-8", errors="replace")
+    if result.returncode != 0:
+        print(f"[ffmpeg stderr]\n{result.stderr[-2000:]}")  # 末尾2000文字だけ表示
+        raise RuntimeError(f"ffmpeg が失敗しました (returncode={result.returncode})")
+
+    print(f"[INFO] 音声変換完了 → {out_wav}")
+
+
+def prepare_audio(input_path_or_url: str | Path, tmp_dir: Path) -> Path:
+    """URL もしくはファイルパスを受け取り、WAV に変換して返す"""
+    # URLの場合は yt-dlp でダウンロード
+    if isinstance(input_path_or_url, str) and is_url(input_path_or_url):
+        return download_audio_from_url(input_path_or_url, tmp_dir)
+
+    input_path = Path(input_path_or_url)
+    ext = input_path.suffix.lower()
+    out_wav = tmp_dir / "source.wav"
+
+    if ext == ".wav":
+        # WAV でもサンプルレートが異なる場合があるため ffmpeg で統一する
+        extract_audio(input_path, out_wav)
+        return out_wav
+
+    if ext in VIDEO_EXTENSIONS or ext in AUDIO_EXTENSIONS:
+        extract_audio(input_path, out_wav)
+        return out_wav
+
+    # 不明な拡張子でも ffmpeg に渡してみる
+    print(f"[WARN] 未知の拡張子 '{ext}'。ffmpeg で変換を試みます。")
+    extract_audio(input_path, out_wav)
+    return out_wav
+
+
+# ── Demucs 分離 ──────────────────────────────────────────────────
+
+
+def run_demucs(wav_path: Path, out_dir: Path, model: str) -> tuple[dict, int]:
+    """
+    Demucs でステム分離を実行。
+    戻り値: (stems_dict, sample_rate)
+        stems_dict = {stem_name: np.ndarray(shape=[samples, 2], dtype=float32)}
+    """
+    print(f"\n[INFO] Demucs ({model}) で音源分離を開始...")
+    print("       初回実行時はモデルのダウンロードが発生します（数百MB）。しばらくお待ちください。\n")
+
+    cmd = [
+        sys.executable, "-m", "demucs",
+        "-n", model,
+        "-o", str(out_dir),
+        str(wav_path),
+    ]
+
+    # リアルタイムで進捗を表示しながら実行
+    proc = subprocess.Popen(
+        cmd,
+        stdout=subprocess.PIPE,
+        stderr=subprocess.STDOUT,
+        text=True,
+        encoding="utf-8",
+        errors="replace",
+    )
+    output_lines = []
+    for line in proc.stdout:
+        line_stripped = line.rstrip()
+        output_lines.append(line_stripped)
+        print(f"  {line_stripped}")
+    proc.wait()
+
+    if proc.returncode != 0:
+        raise RuntimeError(
+            f"Demucs が失敗しました (returncode={proc.returncode})\n"
+            + "\n".join(output_lines[-20:])
+        )
+
+    # ── 出力ディレクトリを特定 ──
+    # Demucs の出力構造: <out_dir>/<model>/<入力ファイル名(拡張子なし)>/
+    stem_dir = out_dir / model / wav_path.stem
+    if not stem_dir.exists():
+        # ディレクトリ名が一致しない場合はざっくり検索
+        found = list(out_dir.rglob("*.wav"))
+        if not found:
+            raise FileNotFoundError(
+                f"Demucs の出力ファイルが見つかりません。出力先: {out_dir}\n"
+                f"分離されたモデル名のフォルダを確認してください。"
+            )
+        stem_dir = found[0].parent
+        print(f"[INFO] ステムディレクトリを自動検出: {stem_dir}")
+
+    # ── WAV ファイルを読み込む ──
+    stems: dict[str, np.ndarray] = {}
+    sr = 44100
+    for wav_file in sorted(stem_dir.glob("*.wav")):
+        data, sr = sf.read(str(wav_file), always_2d=True)
+        stems[wav_file.stem] = data.astype(np.float32)
+        print(f"  [stem] {wav_file.stem:12s}: {data.shape} @ {sr}Hz")
+
+    if not stems:
+        raise FileNotFoundError(f"ステム WAV が見つかりません: {stem_dir}")
+
+    print(f"\n[INFO] 分離完了。検出ステム: {list(stems.keys())}")
+    return stems, sr
+
+
+# ── ハモリ推定フォールバック ──────────────────────────────────────
+
+
+def fallback_split_vocals(vocals: np.ndarray) -> tuple[np.ndarray, np.ndarray]:
+    """
+    htdemucs_6s で 'other' が得られない場合のフォールバック。
+    ステレオの Mid/Side 分解でハモリ成分を推定する。
+    - Mid (L+R)/2 → 主旋律（モノラル中心成分）
+    - Side (L-R)/2 → ハモリ候補（ステレオ広がり成分）
+    """
+    print("[INFO] フォールバック: Mid/Side 分解でハモリを推定します")
+    L = vocals[:, 0]
+    R = vocals[:, 1] if vocals.shape[1] > 1 else vocals[:, 0]
+
+    mid = ((L + R) / 2.0).astype(np.float32)
+    side = ((L - R) / 2.0).astype(np.float32)
+
+    main_vocal = np.stack([mid, mid], axis=1)
+    harmony = np.stack([side, side], axis=1)
+    return main_vocal, harmony
+
+
+# ── パンニング & ミックス ─────────────────────────────────────────
+
+
+def to_stereo(audio: np.ndarray) -> np.ndarray:
+    """入力を (samples, 2) のステレオ配列に整形"""
+    if audio.ndim == 1:
+        audio = np.stack([audio, audio], axis=1)
+    elif audio.shape[1] == 1:
+        audio = np.concatenate([audio, audio], axis=1)
+    return audio[:, :2]  # 3ch以上は最初の2chだけ使う
+
+
+def pan_to_left(audio: np.ndarray) -> np.ndarray:
+    """ステレオ音源を左チャンネルのみに振る (Rch=0)"""
+    stereo = to_stereo(audio)
+    mono = np.mean(stereo, axis=1, keepdims=True)
+    return np.concatenate([mono, np.zeros_like(mono)], axis=1)
+
+
+def pan_to_right(audio: np.ndarray) -> np.ndarray:
+    """ステレオ音源を右チャンネルのみに振る (Lch=0)"""
+    stereo = to_stereo(audio)
+    mono = np.mean(stereo, axis=1, keepdims=True)
+    return np.concatenate([np.zeros_like(mono), mono], axis=1)
+
+
+def mid_side_split(vocals: np.ndarray) -> tuple[np.ndarray, np.ndarray]:
+    """
+    vocals ステムを Mid/Side 分解して主旋律とハモリを推定する。
+
+    Mid  = (L + R) / 2  → センターに定位したメインボーカル → 左ch
+    Side = (L - R) / 2  → 左右にパンされたハモリ/コーラス  → 右ch
+
+    プロの録音では：
+    - メインボーカルはセンター（Mid 成分が大きい）
+    - ハモリやコーラスは左右にパン（Side 成分に現れる）
+    """
+    L = vocals[:, 0].astype(np.float32)
+    R = vocals[:, 1].astype(np.float32) if vocals.shape[1] > 1 else L.copy()
+
+    mid  = (L + R) / 2.0
+    side = (L - R) / 2.0
+
+    # Side 成分が極端に小さい場合（ほぼモノラル録音）は警告
+    mid_rms  = float(np.sqrt(np.mean(mid  ** 2)) + 1e-9)
+    side_rms = float(np.sqrt(np.mean(side ** 2)) + 1e-9)
+    ratio = side_rms / mid_rms
+    print(f"[INFO] Mid/Side 比率: Mid={mid_rms:.4f}, Side={side_rms:.4f}, Side/Mid={ratio:.3f}")
+    if ratio < 0.05:
+        print("[WARN] Side 成分が非常に小さいです。元音源がモノラル録音の可能性があります。")
+        print("       左右の差が小さいため、ハモリ分離の効果が限定的になる場合があります。")
+
+    main_vocal = np.stack([mid, mid], axis=1)   # モノ → ステレオ
+    harmony    = np.stack([side, side], axis=1)
+    return main_vocal, harmony
+
+
+def mix_stems(
+    stems: dict[str, np.ndarray],
+    model: str,
+    inst_vol: float,
+    mdx_model_path: Path | None = None,
+    sr: int = 44100,
+) -> np.ndarray:
+    """
+    分離済みステムを L/R パンニングしてミックスする。
+
+    mdx_model_path が指定されている場合:
+        UVR MDX-NET KARA で vocals を Lead/Backing に AI 分離
+        Lead（主旋律）→ 左ch, Backing（ハモリ）→ 右ch
+    未指定の場合:
+        Mid/Side 分解（フォールバック）
+    """
+    n_samples = max(s.shape[0] for s in stems.values())
+
+    def pad(arr: np.ndarray) -> np.ndarray:
+        arr = to_stereo(arr)
+        if arr.shape[0] < n_samples:
+            arr = np.pad(arr, ((0, n_samples - arr.shape[0]), (0, 0)))
+        return arr[:n_samples]
+
+    mix = np.zeros((n_samples, 2), dtype=np.float32)
+
+    if "vocals" in stems:
+        vocals_padded = pad(stems["vocals"])
+
+        if mdx_model_path is not None:
+            try:
+                lead, backing = mdx_separate_lead_backing(vocals_padded, sr, mdx_model_path)
+                # 長さを揃える
+                L = min(lead.shape[0], n_samples)
+                lead_out    = np.zeros((n_samples, 2), dtype=np.float32)
+                backing_out = np.zeros((n_samples, 2), dtype=np.float32)
+                lead_out[:L]    = lead[:L]
+                backing_out[:L] = backing[:L]
+                print("[INFO] パンニング: Lead(主旋律) → L, Backing(ハモリ) → R")
+                mix += pan_to_left(lead_out)
+                mix += pan_to_right(backing_out)
+            except Exception as e:
+                print(f"[WARN] UVR 推論失敗 ({e})。Mid/Side にフォールバックします。")
+                main_vocal, harmony = mid_side_split(vocals_padded)
+                mix += pan_to_left(main_vocal)
+                mix += pan_to_right(harmony)
+        else:
+            print("[INFO] vocals を Mid/Side 分解: Mid → L（主旋律）, Side → R（ハモリ）")
+            main_vocal, harmony = mid_side_split(vocals_padded)
+            mix += pan_to_left(main_vocal)
+            mix += pan_to_right(harmony)
+
+        # vocals 以外はすべて伴奏としてセンターに縮小
+        inst_keys = [k for k in stems if k != "vocals"]
+        if inst_vol > 0 and inst_keys:
+            print(f"[INFO] 伴奏ステム {inst_keys} → センター x {inst_vol}")
+            for k in inst_keys:
+                mix += pad(stems[k]) * inst_vol
+        elif inst_keys:
+            print(f"[INFO] 伴奏ステム {inst_keys} → ミュート (inst-vol=0)")
+    else:
+        print("[WARN] 'vocals' ステムが見つかりません。全ステムをセンター出力します。")
+        for k, arr in stems.items():
+            mix += pad(arr)
+
+    # ピーク正規化（クリッピング防止）
+    peak = float(np.max(np.abs(mix)))
+    if peak > 1e-6:
+        mix = mix / peak * 0.95
+    return mix
+
+
+
+# ── メインフロー ──────────────────────────────────────────────────
+
+
+def main():
+    parser = argparse.ArgumentParser(
+        description="主旋律 / ハモリ 分離 & L/R パンニング ツール",
+        formatter_class=argparse.RawDescriptionHelpFormatter,
+        epilog="""
+例:
+  python app.py song.mp3
+  python app.py movie.mp4 --output result.wav
+  python app.py https://www.youtube.com/watch?v=XXXXXXXXXXX
+  python app.py song.mp3 --inst-vol 0.0   # 伴奏ミュート
+  python app.py song.mp3 --model htdemucs  # 軽量モデル
+        """,
+    )
+    parser.add_argument("input", help="入力ファイル (mp3/wav/mp4/mov など) または URL (YouTube など)")
+    parser.add_argument(
+        "--output", default="output_panned.wav",
+        help="出力 WAV ファイル名 (デフォルト: output_panned.wav)",
+    )
+    parser.add_argument(
+        "--inst-vol", type=float, default=0.15,
+        help="伴奏の音量係数 0.0(ミュート)〜1.0 (デフォルト: 0.15)",
+    )
+    parser.add_argument(
+        "--model",
+        default="htdemucs_6s",
+        choices=["htdemucs_6s", "htdemucs", "mdx_extra", "mdx"],
+        help="Demucs モデル (デフォルト: htdemucs_6s)",
+    )
+    parser.add_argument(
+        "--no-mdx", action="store_true",
+        help="UVR MDX-NET によるリード/バッキング分離をスキップし Mid/Side 分解を使用",
+    )
+    args = parser.parse_args()
+
+    # URL かファイルパスか判定
+    input_arg = args.input
+    if is_url(input_arg):
+        # URL の場合はファイル存在チェック不要
+        input_for_process = input_arg
+    else:
+        input_path = Path(input_arg).resolve()
+        if not input_path.exists():
+            print(f"[ERROR] ファイルが見つかりません: {input_path}")
+            sys.exit(1)
+        input_for_process = input_path
+
+    tmp_dir = Path(tempfile.mkdtemp(prefix="musicbot_"))
+    demucs_out = tmp_dir / "demucs_out"
+    demucs_out.mkdir(parents=True, exist_ok=True)
+
+    try:
+        # Step 1: 音声準備（URL またはファイル）
+        wav_path = prepare_audio(input_for_process, tmp_dir)
+
+        # Step 2: Demucs 分離
+        model = args.model
+        stems, sr = run_demucs(wav_path, demucs_out, model)
+
+        # htdemucs_6s で 'other' がない場合は htdemucs にフォールバック
+        if model == "htdemucs_6s" and "other" not in stems:
+            print("\n[WARN] htdemucs_6s で 'other' ステムが見つかりません。htdemucs に切り替えます。")
+            shutil.rmtree(demucs_out)
+            demucs_out.mkdir(parents=True, exist_ok=True)
+            model = "htdemucs"
+            stems, sr = run_demucs(wav_path, demucs_out, model)
+
+        # Step 3: UVR MDX-NET モデルを取得(必要なら)
+        mdx_model_path = None
+        if not args.no_mdx:
+            mdx_cache = Path.home() / ".cache" / "musicbot" / "models"
+            mdx_cache.mkdir(parents=True, exist_ok=True)
+            try:
+                mdx_model_path = download_mdx_model(mdx_cache)
+            except Exception as e:
+                print(f"[WARN] MDX モデルの取得に失敗しました: {e}")
+                print("       Mid/Side 分解コードにフォールバックします。")
+
+        # Step 4: パンニング & ミックス
+        print("\n[INFO] L/R パンニング & ミックス処理中...")
+        mixed = mix_stems(stems, model, args.inst_vol, mdx_model_path=mdx_model_path, sr=sr)
+
+        # Step 4: 出力
+        output_path = Path(args.output).resolve()
+        sf.write(str(output_path), mixed, sr, subtype="PCM_16")
+
+        print(f"""
+╔══════════════════════════════════════╗
+║  ✅  処理完了！                      ║
+╠══════════════════════════════════════╣
+║  出力: {output_path.name:<31}║
+║  左チャンネル (L): 主旋律             ║
+║  右チャンネル (R): ハモリ/コーラス    ║
+║  伴奏音量係数  : {args.inst_vol:<22.2f}║
+╚══════════════════════════════════════╝
+→ {output_path}
+""")
+
+    except KeyboardInterrupt:
+        print("\n[INFO] ユーザーによって中断されました。")
+        sys.exit(0)
+    except Exception as e:
+        print(f"\n[ERROR] 処理中にエラーが発生しました: {e}")
+        import traceback
+        traceback.print_exc()
+        sys.exit(1)
+    finally:
+        shutil.rmtree(tmp_dir, ignore_errors=True)
+
+
+if __name__ == "__main__":
+    main()

requirements.txt

@@ -0,0 +1,35 @@
+# ============================
+# 音源分離 & パンニング アプリ
+# ============================
+
+# 音声・動画処理
+ffmpeg-python>=0.2.0       # 動画→音声抽出
+soundfile>=0.12.1           # WAV 読み書き
+numpy>=1.24.0               # 配列演算
+scipy>=1.10.0               # リサンプリング
+librosa>=0.10.0             # 音声解析ユーティリティ
+
+# AI 音源分離
+demucs>=4.0.0               # Meta Demucs (htdemucs / htdemucs_6s)
+
+# PyTorch (CPU版 / GPU版はREADMEを参照)
+# CPU 環境:
+torch>=2.0.0
+torchaudio>=2.0.0
+
+# 進捗表示
+tqdm>=4.65.0
+
+# YouTube / Web音源ダウンロード (CLI利用時のみ)
+yt-dlp>=2024.1.0
+
+# Web アプリ
+flask>=3.0.0
+flask-cors>=4.0.0
+
+# 月額決済
+stripe>=7.0.0
+
+# MDX モデルダウンロード
+onnxruntime>=1.16.0
+huggingface_hub>=0.20.0

server.py

@@ -0,0 +1,410 @@
+"""
+server.py — HarmoSplit バックエンド
+Hugging Face Spaces 対応（ポート 7860）+ Stripe 月額決済
+"""
+
+import os
+import sys
+import uuid
+import json
+import shutil
+import secrets
+import tempfile
+import threading
+import subprocess
+from pathlib import Path
+from datetime import datetime, timezone
+
+from flask import (
+    Flask, request, jsonify, send_file,
+    Response, send_from_directory, redirect, url_for
+)
+from flask_cors import CORS
+
+sys.path.insert(0, str(Path(__file__).parent))
+import app as core
+
+# ── Flask ──────────────────────────────────────────────────────
+flask_app = Flask(__name__, static_folder="static", static_url_path="")
+CORS(flask_app)
+
+# ── 設定 ──────────────────────────────────────────────────────
+PORT = int(os.environ.get("PORT", 7860))
+
+# Stripe キー（HF Spaces Secrets または .env で設定）
+STRIPE_SECRET_KEY    = os.environ.get("STRIPE_SECRET_KEY", "")
+STRIPE_WEBHOOK_SECRET = os.environ.get("STRIPE_WEBHOOK_SECRET", "")
+STRIPE_PRICE_ID      = os.environ.get("STRIPE_PRICE_ID", "")
+# アプリの公開 URL（Webhook / Checkout success URL 用）
+APP_URL = os.environ.get("APP_URL", f"http://localhost:{PORT}")
+
+# 決済不要モード（Stripe キー未設定なら無料開放）
+FREE_MODE = not bool(STRIPE_SECRET_KEY)
+
+# ── 永続ストレージ ──────────────────────────────────────────
+# HF Spaces では /data が永続。ローカルでは ./data を使用。
+DATA_DIR = Path("/data") if Path("/data").exists() else Path("./data")
+DATA_DIR.mkdir(parents=True, exist_ok=True)
+
+TOKENS_FILE  = DATA_DIR / "tokens.json"
+UPLOAD_DIR   = DATA_DIR / "uploads"
+UPLOAD_DIR.mkdir(parents=True, exist_ok=True)
+
+# ── トークン管理 ──────────────────────────────────────────────
+tokens_lock = threading.Lock()
+
+def load_tokens() -> dict:
+    with tokens_lock:
+        if TOKENS_FILE.exists():
+            try:
+                return json.loads(TOKENS_FILE.read_text("utf-8"))
+            except Exception:
+                pass
+        return {}
+
+def save_tokens(data: dict):
+    with tokens_lock:
+        TOKENS_FILE.write_text(json.dumps(data, indent=2, ensure_ascii=False), "utf-8")
+
+def create_token(customer_id: str, subscription_id: str, email: str) -> str:
+    token = secrets.token_urlsafe(32)
+    data = load_tokens()
+    data[token] = {
+        "customer_id":      customer_id,
+        "subscription_id":  subscription_id,
+        "email":            email,
+        "created_at":       datetime.now(timezone.utc).isoformat(),
+        "active":           True,
+    }
+    save_tokens(data)
+    return token
+
+def is_token_valid(token: str) -> bool:
+    if FREE_MODE:
+        return True   # 無料モードは常に有効
+    data = load_tokens()
+    entry = data.get(token)
+    return bool(entry and entry.get("active"))
+
+def deactivate_token_by_subscription(subscription_id: str):
+    data = load_tokens()
+    for info in data.values():
+        if info.get("subscription_id") == subscription_id:
+            info["active"] = False
+    save_tokens(data)
+
+# ── ジョブ管理 ──────────────────────────────────────────────
+JOBS: dict[str, dict] = {}
+JOBS_LOCK = threading.Lock()
+
+def log_progress(job_id: str, message: str, percent: int | None = None):
+    entry = {"msg": message}
+    if percent is not None:
+        entry["pct"] = percent
+    with JOBS_LOCK:
+        if job_id in JOBS:
+            JOBS[job_id]["progress"].append(entry)
+
+def _load_stems_helper(demucs_out: Path, model: str, wav_path: Path):
+    import soundfile as sf
+    import numpy as np
+    stem_dir = demucs_out / model / wav_path.stem
+    if not stem_dir.exists():
+        candidates = list(demucs_out.rglob("*.wav"))
+        if not candidates:
+            raise FileNotFoundError("ステムファイルが見つかりません")
+        stem_dir = candidates[0].parent
+    stems = {}
+    sr = 44100
+    for wav_file in sorted(stem_dir.glob("*.wav")):
+        data, sr = sf.read(str(wav_file), always_2d=True)
+        stems[wav_file.stem] = data.astype(np.float_())
+    return stems, sr
+
+core._load_stems = _load_stems_helper
+
+def process_job(job_id: str, input_path: Path, inst_vol: float, model: str, use_mdx: bool):
+    tmp_dir    = Path(tempfile.mkdtemp(prefix=f"hmsplit_{job_id[:8]}_"))
+    demucs_out = tmp_dir / "demucs_out"
+    demucs_out.mkdir(parents=True, exist_ok=True)
+    try:
+        with JOBS_LOCK:
+            JOBS[job_id]["status"] = "processing"
+
+        log_progress(job_id, "🎵 音声を読み込��中...", 5)
+        wav_path = core.prepare_audio(input_path, tmp_dir)
+
+        log_progress(job_id, "🤖 Demucs AI で音源を分離中...", 15)
+        cmd = [sys.executable, "-m", "demucs", "-n", model,
+               "-o", str(demucs_out), str(wav_path)]
+        proc = subprocess.Popen(
+            cmd, stdout=subprocess.PIPE, stderr=subprocess.STDOUT,
+            text=True, encoding="utf-8", errors="replace"
+        )
+        for line in proc.stdout:
+            line = line.rstrip()
+            if line.strip():
+                log_progress(job_id, line)
+        proc.wait()
+        if proc.returncode != 0:
+            raise RuntimeError("Demucs 処理に失敗しました")
+
+        log_progress(job_id, "📂 ステムを読み込み中...", 55)
+        stems, sr = core._load_stems(demucs_out, model, wav_path)
+
+        if model == "htdemucs_6s" and "vocals" not in stems:
+            log_progress(job_id, "⚠️ htdemucs にフォールバック", 57)
+            shutil.rmtree(demucs_out); demucs_out.mkdir(parents=True, exist_ok=True)
+            model = "htdemucs"
+            subprocess.run([sys.executable, "-m", "demucs", "-n", model,
+                            "-o", str(demucs_out), str(wav_path)], check=True, capture_output=True)
+            stems, sr = core._load_stems(demucs_out, model, wav_path)
+
+        mdx_model_path = None
+        if use_mdx:
+            log_progress(job_id, "🧠 UVR MDX-NET モデルを準備中...", 60)
+            try:
+                mdx_cache = DATA_DIR / "models"
+                mdx_cache.mkdir(parents=True, exist_ok=True)
+                mdx_model_path = core.download_mdx_model(mdx_cache)
+                log_progress(job_id, "✅ UVR MDX-NET 準備完了", 65)
+            except Exception as e:
+                log_progress(job_id, f"⚠️ MDX 取得失敗、Mid/Side にフォールバック: {e}", 65)
+
+        log_progress(job_id, "🎚️ L/R パンニング & ミックス処理中...", 68)
+        if mdx_model_path:
+            log_progress(job_id, "🔬 リード / バッキング AI 分離中... (数分かかります)", 70)
+        mixed = core.mix_stems(stems, model, inst_vol, mdx_model_path=mdx_model_path, sr=sr)
+
+        log_progress(job_id, "💾 WAV を書き出し中...", 95)
+        import soundfile as sf
+        output_path = UPLOAD_DIR / f"{job_id}_panned.wav"
+        sf.write(str(output_path), mixed, sr, subtype="PCM_16")
+
+        with JOBS_LOCK:
+            JOBS[job_id]["status"]      = "done"
+            JOBS[job_id]["output_path"] = str(output_path)
+        log_progress(job_id, "✅ 処理完了！ダウンロードボタンをクリックしてください。", 100)
+
+    except Exception as e:
+        import traceback
+        with JOBS_LOCK:
+            JOBS[job_id]["status"] = "error"
+            JOBS[job_id]["error"]  = str(e)
+        log_progress(job_id, f"❌ {e}")
+    finally:
+        shutil.rmtree(tmp_dir, ignore_errors=True)
+        try:
+            input_path.unlink(missing_ok=True)
+        except Exception:
+            pass
+
+# ── ルーティング ────────────────────────────────────────────
+
+@flask_app.route("/")
+def index():
+    return send_from_directory("static", "index.html")
+
+@flask_app.route("/pricing")
+def pricing():
+    return send_from_directory("static", "pricing.html")
+
+@flask_app.route("/success")
+def success():
+    return send_from_directory("static", "success.html")
+
+@flask_app.route("/auth-mode")
+def auth_mode():
+    """フロントエンドが無料/有料モードを識別するためのエンドポイント"""
+    return jsonify({"free_mode": FREE_MODE})
+
+@flask_app.route("/pricing-info")
+def pricing_info():
+    """料金ページ用: Stripe から Price 情報を取得して返す"""
+    if FREE_MODE:
+        return jsonify({"price": 0, "currency": "jpy", "free_mode": True})
+    try:
+        import stripe
+        stripe.api_key = STRIPE_SECRET_KEY
+        price = stripe.Price.retrieve(STRIPE_PRICE_ID)
+        return jsonify({
+            "price":     price.unit_amount,
+            "currency":  price.currency,
+            "interval":  price.recurring.interval if price.recurring else "month",
+        })
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+# ── Stripe: Checkout セッション作成 ──────────────────────────
+@flask_app.route("/create-checkout", methods=["POST"])
+def create_checkout():
+    if FREE_MODE:
+        return jsonify({"error": "Stripe 未設定（開発モード）"}), 400
+    try:
+        import stripe
+        stripe.api_key = STRIPE_SECRET_KEY
+        session = stripe.checkout.Session.create(
+            payment_method_types=["card"],
+            line_items=[{"price": STRIPE_PRICE_ID, "quantity": 1}],
+            mode="subscription",
+            success_url=f"{APP_URL}/success?session_id={{CHECKOUT_SESSION_ID}}",
+            cancel_url=f"{APP_URL}/pricing",
+        )
+        return jsonify({"url": session.url})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+# ── Stripe: Webhook ──────────────────────────────────────────
+@flask_app.route("/webhook", methods=["POST"])
+def stripe_webhook():
+    if FREE_MODE:
+        return "", 200
+    try:
+        import stripe
+        stripe.api_key = STRIPE_SECRET_KEY
+        payload    = request.get_data()
+        sig_header = request.headers.get("Stripe-Signature", "")
+        event = stripe.Webhook.construct_event(payload, sig_header, STRIPE_WEBHOOK_SECRET)
+    except Exception as e:
+        return jsonify({"error": str(e)}), 400
+
+    etype = event["type"]
+    obj   = event["data"]["object"]
+
+    if etype == "checkout.session.completed":
+        sub_id   = obj.get("subscription")
+        cust_id  = obj.get("customer")
+        email    = obj.get("customer_email") or obj.get("customer_details", {}).get("email", "")
+        token    = create_token(cust_id, sub_id, email)
+        print(f"[WEBHOOK] 新サブスクリプション: {email} → token={token[:8]}...")
+
+    elif etype in ("customer.subscription.deleted", "customer.subscription.paused"):
+        sub_id = obj.get("id")
+        deactivate_token_by_subscription(sub_id)
+        print(f"[WEBHOOK] サブスクリプション停止: {sub_id}")
+
+    return "", 200
+
+# ── Stripe: 成功後トークン取得 ────────────────────────────────
+@flask_app.route("/get-token")
+def get_token():
+    """決済完了後に Stripe Session ID からトークンを返す"""
+    if FREE_MODE:
+        return jsonify({"token": "FREE_MODE"})
+    session_id = request.args.get("session_id", "")
+    if not session_id:
+        return jsonify({"error": "session_id が必要です"}), 400
+    try:
+        import stripe
+        stripe.api_key = STRIPE_SECRET_KEY
+        session = stripe.checkout.Session.retrieve(session_id)
+        sub_id  = session.get("subscription")
+        cust_id = session.get("customer")
+        email   = session.get("customer_details", {}).get("email", "")
+        # 既存トークンを探す（Webhook が先に処理している場合）
+        data = load_tokens()
+        for tok, info in data.items():
+            if info.get("subscription_id") == sub_id:
+                return jsonify({"token": tok, "email": email})
+        # Webhook がまだなら作成
+        token = create_token(cust_id, sub_id, email)
+        return jsonify({"token": token, "email": email})
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+# ── トークン検証 ──────────────────────────────────────────────
+@flask_app.route("/verify-token", methods=["POST"])
+def verify_token():
+    token = request.json.get("token", "")
+    return jsonify({"valid": is_token_valid(token)})
+
+# ── ファイルアップロード & 処理 ────────────────────────────────
+@flask_app.route("/upload", methods=["POST"])
+def upload():
+    # トークン認証
+    token = request.form.get("token", "")
+    if not is_token_valid(token):
+        return jsonify({"error": "無効なトークンです。料金ページから登録してください。"}), 401
+
+    if "file" not in request.files:
+        return jsonify({"error": "ファイルがありません"}), 400
+    file = request.files["file"]
+    if not file.filename:
+        return jsonify({"error": "ファイル名が空です"}), 400
+
+    inst_vol = float(request.form.get("inst_vol", 0.15))
+    model    = request.form.get("model", "htdemucs_6s")
+    use_mdx  = request.form.get("use_mdx", "true").lower() == "true"
+
+    job_id     = str(uuid.uuid4())
+    suffix     = Path(file.filename).suffix
+    input_path = UPLOAD_DIR / f"{job_id}_input{suffix}"
+    file.save(str(input_path))
+
+    with JOBS_LOCK:
+        JOBS[job_id] = {
+            "status": "queued", "progress": [],
+            "output_path": None, "error": None,
+            "filename": file.filename,
+        }
+
+    t = threading.Thread(
+        target=process_job,
+        args=(job_id, input_path, inst_vol, model, use_mdx),
+        daemon=True,
+    )
+    t.start()
+    return jsonify({"job_id": job_id})
+
+# ── 進捗 SSE ──────────────────────────────────────────────────
+@flask_app.route("/progress/<job_id>")
+def progress(job_id: str):
+    def generate():
+        import time
+        sent = 0
+        while True:
+            with JOBS_LOCK:
+                if job_id not in JOBS:
+                    yield 'data: {"error":"not found"}\n\n'; return
+                job      = JOBS[job_id]
+                new_ents = job["progress"][sent:]
+                sent    += len(new_ents)
+                status   = job["status"]
+            for e in new_ents:
+                yield f"data: {json.dumps(e, ensure_ascii=False)}\n\n"
+            if status in ("done", "error"):
+                yield f"data: {json.dumps({'status': status})}\n\n"; return
+            time.sleep(0.5)
+    return Response(generate(), mimetype="text/event-stream",
+                    headers={"Cache-Control": "no-cache", "X-Accel-Buffering": "no"})
+
+@flask_app.route("/status/<job_id>")
+def status(job_id: str):
+    with JOBS_LOCK:
+        job = JOBS.get(job_id)
+    if not job:
+        return jsonify({"error": "not found"}), 404
+    return jsonify({"status": job["status"], "error": job.get("error")})
+
+# ── ダウンロード ──────────────────────────────────────────────
+@flask_app.route("/download/<job_id>")
+def download(job_id: str):
+    with JOBS_LOCK:
+        job = JOBS.get(job_id)
+    if not job or job["status"] != "done":
+        return jsonify({"error": "ファイル未準備"}), 404
+    output_path = Path(job["output_path"])
+    if not output_path.exists():
+        return jsonify({"error": "ファイルが見つかりません"}), 404
+    download_name = Path(job.get("filename", "audio")).stem + "_panned.wav"
+    return send_file(str(output_path), as_attachment=True,
+                     download_name=download_name, mimetype="audio/wav")
+
+# ── 起動 ──────────────────────────────────────────────────────
+if __name__ == "__main__":
+    mode = "FREE（Stripe 未設定）" if FREE_MODE else "有料（Stripe 有効）"
+    print("=" * 52)
+    print(f"🎵 HarmoSplit 起動中... モード: {mode}")
+    print(f"   http://localhost:{PORT}")
+    print("=" * 52)
+    flask_app.run(host="0.0.0.0", port=PORT, debug=False, threaded=True)

setup_guide.md

@@ -0,0 +1,192 @@
+# 🎵 音源分離 & L/Rパンニング アプリ セットアップガイド
+
+## 概要
+
+このアプリは音楽/動画ファイルから AI（Demucs）を使って **主旋律（メインボーカル）** と **ハモリ（コーラス）** を分離し、左右のイヤホンで聴き分けられるステレオ WAV を出力します。
+
+```
+左チャンネル (L) ───── 主旋律 (メインボーカル)
+右チャンネル (R) ───── ハモリ / コーラス
+センター (L+R) ──────── 伴奏（音量縮小）
+```
+
+---
+
+## ① ffmpeg のインストール（OS別）
+
+ffmpeg はシステムにインストールされている必要があります。
+
+### Windows
+
+```powershell
+# winget を使う方法（推奨）
+winget install Gyan.FFmpeg
+
+# または Chocolatey を使う方法
+choco install ffmpeg
+
+# インストール確認
+ffmpeg -version
+```
+
+> **手動インストールの場合:**
+> 1. https://ffmpeg.org/download.html → Windows → `ffmpeg-release-full.7z` をダウンロード
+> 2. 解凍して `C:\ffmpeg\bin` を システムの環境変数 `PATH` に追加
+
+### macOS
+
+```bash
+# Homebrew を使う方法（推奨）
+brew install ffmpeg
+
+# インストール確認
+ffmpeg -version
+```
+
+### Linux (Ubuntu / Debian)
+
+```bash
+sudo apt update && sudo apt install -y ffmpeg
+
+# インストール確認
+ffmpeg -version
+```
+
+---
+
+## ② Python 仮想環境のセットアップ
+
+```bash
+# プロジェクトディレクトリへ移動
+cd c:\musicbot       # Windows
+# cd /path/to/musicbot  # macOS / Linux
+
+# 仮想環境を作成 (Python 3.10 以上推奨)
+python -m venv venv
+
+# 仮想環境を有効化
+# Windows
+venv\Scripts\activate
+
+# macOS / Linux
+source venv/bin/activate
+```
+
+---
+
+## ③ 依存ライブラリのインストール
+
+### CPU 環境（GPU なし）の場合
+
+```bash
+pip install --upgrade pip
+
+# PyTorch CPU 版を先にインストール（重要: GPU版と混在しないよう）
+pip install torch torchaudio --index-url https://download.pytorch.org/whl/cpu
+
+# その他ライブラリをインストール
+pip install -r requirements.txt
+```
+
+### GPU 環境（NVIDIA CUDA）の場合（オプション・高速化）
+
+```bash
+pip install --upgrade pip
+
+# CUDA 12.1 対応の場合（自分の CUDA バージョンに合わせて変更）
+pip install torch torchaudio --index-url https://download.pytorch.org/whl/cu121
+
+# その他ライブラリをインストール
+pip install -r requirements.txt
+```
+
+> GPU があると Demucs の処理が **数倍〜10倍** 速くなります。
+
+---
+
+## ④ アプリの実行
+
+### 基本的な使い方
+
+```bash
+# 音声ファイル (mp3/wav) を処理
+python app.py input.mp3
+
+# 動画ファイル (mp4/mov) を処理（音声が自動抽出されます）
+python app.py input.mp4
+
+# 出力ファイル名を指定
+python app.py input.mp3 --output my_output.wav
+
+# 伴奏をミュートしたい場合
+python app.py input.mp3 --inst-vol 0.0
+
+# 伴奏を少し大きくしたい場合
+python app.py input.mp3 --inst-vol 0.3
+
+# モデルを指定する場合（デフォルトは htdemucs_6s）
+python app.py input.mp3 --model htdemucs
+```
+
+### コマンドライン引数一覧
+
+| 引数 | 説明 | デフォルト |
+|---|---|---|
+| `input` | 入力ファイルパス（必須） | — |
+| `--output` | 出力 WAV ファイル名 | `output_panned.wav` |
+| `--inst-vol` | 伴奏音量（0.0〜1.0） | `0.15` |
+| `--model` | Demucs モデル名 | `htdemucs_6s` |
+
+### 使用可能なモデル
+
+| モデル名 | ステム数 | 特徴 |
+|---|---|---|
+| `htdemucs_6s` | 6 (vocals/drums/bass/guitar/piano/other) | **推奨**。vocals と other(コーラス)を独立分離 |
+| `htdemucs` | 4 (vocals/drums/bass/other) | 軽量版。ハモリはLR差分で推定 |
+| `mdx_extra` | 4 | MDX アーキテクチャ。ボーカル品質重視 |
+
+---
+
+## ⑤ 初回実行について
+
+初回実行時は **Demucs のモデルファイルが自動ダウンロード** されます（数百MB）。
+キャッシュは `~/.cache/torch/hub/` に保存されるため、次回以降は高速です。
+
+---
+
+## ⑥ トラブルシューティング
+
+### `ffmpeg not found` エラーが出る
+
+→ ①の手順で ffmpeg をインストールし、`ffmpeg -version` が動くことを確認してください。
+
+### `torch` のインポートエラー
+
+→ 仮想環境が有効化されているか確認 (`venv\Scripts\activate`)。
+→ `pip install torch torchaudio --index-url https://download.pytorch.org/whl/cpu` を再実行。
+
+### メモリ不足 (OOM) エラー
+
+```bash
+# CPU モードを明示的に指定
+python app.py input.mp3 --model htdemucs
+```
+CPU の場合 htdemucs は約 **4〜8GB RAM** を使用します。
+
+### 処理が遅い
+
+Demucs は計算量が多く、CPU 環境では数分かかります。
+GPU (CUDA) 環境では大幅に高速化されます。
+
+---
+
+## ⑦ 出力ファイ��の確認
+
+処理完了後、`output_panned.wav` が生成されます。
+ステレオ対応のヘッドフォン/イヤホンで再生すると：
+
+- **左耳** → 主旋律（メインボーカル）が聴こえる
+- **右耳** → ハモリ / コーラスが聴こえる
+
+> 元の音源にハモリ録音がない場合や、モノラル録音の場合は  
+> LR の差が小さくなることがあります。

static/app.js

@@ -0,0 +1,213 @@
+// app.js — HarmoSplit フロントエンドロジック（Stripe 認証対応）
+
+const dropZone    = document.getElementById('dropZone');
+const fileInput   = document.getElementById('fileInput');
+const startBtn    = document.getElementById('startBtn');
+const instVol     = document.getElementById('instVol');
+const instVolLabel= document.getElementById('instVolLabel');
+const modelSelect = document.getElementById('modelSelect');
+const useMdx      = document.getElementById('useMdx');
+
+const uploadSection  = document.getElementById('uploadSection');
+const progressSection= document.getElementById('progressSection');
+const resultSection  = document.getElementById('resultSection');
+const errorSection   = document.getElementById('errorSection');
+
+const progressBar  = document.getElementById('progressBar');
+const progressPct  = document.getElementById('progressPct');
+const progressFile = document.getElementById('progressFile');
+const logBox       = document.getElementById('logBox');
+const downloadBtn  = document.getElementById('downloadBtn');
+const errorMsg     = document.getElementById('errorMsg');
+
+let selectedFile = null;
+let verifiedToken = '';
+
+// ── 起動時: Stripe 有効かどうか確認 ────────────────────────
+async function initAuth() {
+  try {
+    const res  = await fetch('/auth-mode');
+    const data = await res.json();
+    if (!data.free_mode) {
+      // 有料モード: トークンエリアを表示
+      document.getElementById('tokenArea').style.display = 'block';
+      // ローカルストレージに保存済みトークンがあれば復元
+      const saved = localStorage.getItem('hmsplit_token');
+      if (saved) {
+        document.getElementById('tokenInput').value = saved;
+        await verifyToken(saved, false);
+      }
+    } else {
+      // 無料モード: トークン不要
+      verifiedToken = 'FREE';
+    }
+  } catch (e) {
+    verifiedToken = 'FREE'; // エラー時は無料扱い
+  }
+}
+
+// ── トークン検証 ─────────────────────────────────────────────
+async function verifyToken(token, showAlert = true) {
+  try {
+    const res  = await fetch('/verify-token', {
+      method: 'POST',
+      headers: { 'Content-Type': 'application/json' },
+      body: JSON.stringify({ token }),
+    });
+    const data = await res.json();
+    if (data.valid) {
+      verifiedToken = token;
+      localStorage.setItem('hmsplit_token', token);
+      document.getElementById('tokenOk').classList.remove('hidden');
+      document.getElementById('tokenInput').style.borderColor = 'var(--success)';
+    } else {
+      verifiedToken = '';
+      localStorage.removeItem('hmsplit_token');
+      document.getElementById('tokenOk').classList.add('hidden');
+      document.getElementById('tokenInput').style.borderColor = 'var(--error)';
+      if (showAlert) alert('トークンが無効です。料金ページから登録してください。');
+    }
+    return data.valid;
+  } catch {
+    return false;
+  }
+}
+
+document.getElementById('verifyBtn')?.addEventListener('click', async () => {
+  const token = document.getElementById('tokenInput').value.trim();
+  if (!token) { alert('トークンを入力してください'); return; }
+  await verifyToken(token, true);
+});
+
+// ── ファイル選択 ──────────────────────────────────────────────
+function selectFile(file) {
+  selectedFile = file;
+  dropZone.classList.add('has-file');
+  dropZone.querySelector('.drop-icon').textContent = fileIsVideo(file.name) ? '🎬' : '🎵';
+  const sub = dropZone.querySelector('.drop-sub');
+  sub.textContent = file.name;
+  sub.classList.add('drop-filename');
+  updateStartBtn();
+}
+
+function fileIsVideo(name) {
+  return /\.(mp4|mov|avi|mkv|m4v|flv|webm|ts)$/i.test(name);
+}
+
+function updateStartBtn() {
+  const hasFile  = !!selectedFile;
+  const hasToken = !!verifiedToken;
+  startBtn.disabled = !(hasFile && hasToken);
+}
+
+dropZone.addEventListener('dragover', e => { e.preventDefault(); dropZone.classList.add('dragover'); });
+dropZone.addEventListener('dragleave', () => dropZone.classList.remove('dragover'));
+dropZone.addEventListener('drop', e => {
+  e.preventDefault(); dropZone.classList.remove('dragover');
+  if (e.dataTransfer.files.length) selectFile(e.dataTransfer.files[0]);
+});
+dropZone.addEventListener('click', () => fileInput.click());
+fileInput.addEventListener('change', () => { if (fileInput.files.length) selectFile(fileInput.files[0]); });
+
+instVol.addEventListener('input', () => {
+  instVolLabel.textContent = Math.round(instVol.value * 100) + '%';
+});
+
+// ── 処理開始 ──────────────────────────────────────────────────
+startBtn.addEventListener('click', async () => {
+  if (!selectedFile || !verifiedToken) return;
+
+  uploadSection.classList.add('hidden');
+  progressSection.classList.remove('hidden');
+  logBox.innerHTML = '';
+  progressBar.style.width = '0%';
+  progressPct.textContent = '0%';
+  progressFile.textContent = selectedFile.name;
+
+  const fd = new FormData();
+  fd.append('file', selectedFile);
+  fd.append('inst_vol', instVol.value);
+  fd.append('model', modelSelect.value);
+  fd.append('use_mdx', useMdx.checked ? 'true' : 'false');
+  fd.append('token', verifiedToken === 'FREE' ? '' : verifiedToken);
+
+  let jobId;
+  try {
+    const res  = await fetch('/upload', { method: 'POST', body: fd });
+    const data = await res.json();
+    if (!res.ok || data.error) throw new Error(data.error || 'アップロード失敗');
+    jobId = data.job_id;
+  } catch (e) {
+    showError(e.message); return;
+  }
+
+  const sse = new EventSource(`/progress/${jobId}`);
+  sse.addEventListener('message', e => {
+    let payload;
+    try { payload = JSON.parse(e.data); } catch { return; }
+    if (payload.status) {
+      sse.close();
+      if (payload.status === 'done') showResult(jobId);
+      else showError('処理中にエラーが発生しました。ログを確認してください。');
+      return;
+    }
+    if (payload.msg) {
+      const p = document.createElement('p');
+      p.textContent = payload.msg;
+      if (payload.msg.includes('✅') || payload.msg.includes('完了')) p.classList.add('ok');
+      if (payload.msg.includes('❌')) p.classList.add('err');
+      logBox.appendChild(p);
+      logBox.scrollTop = logBox.scrollHeight;
+    }
+    if (payload.pct !== undefined) {
+      progressBar.style.width = payload.pct + '%';
+      progressPct.textContent  = payload.pct + '%';
+    }
+  });
+
+  sse.onerror = () => {
+    sse.close();
+    setTimeout(async () => {
+      try {
+        const res  = await fetch(`/status/${jobId}`);
+        const data = await res.json();
+        if (data.status === 'done') showResult(jobId);
+        else showError(data.error || '接続エラー');
+      } catch { showError('サーバーとの接続が切れました'); }
+    }, 500);
+  };
+});
+
+function showResult(jobId) {
+  progressSection.classList.add('hidden');
+  resultSection.classList.remove('hidden');
+  downloadBtn.href = `/download/${jobId}`;
+}
+
+function showError(msg) {
+  progressSection.classList.add('hidden');
+  errorSection.classList.remove('hidden');
+  errorMsg.textContent = msg;
+}
+
+function reset() {
+  selectedFile = null;
+  fileInput.value = '';
+  dropZone.classList.remove('has-file', 'dragover');
+  dropZone.querySelector('.drop-icon').textContent = '🎵';
+  const sub = dropZone.querySelector('.drop-sub');
+  sub.textContent = 'または'; sub.classList.remove('drop-filename');
+  progressBar.style.width = '0%'; progressPct.textContent = '0%';
+  logBox.innerHTML = '';
+  uploadSection.classList.remove('hidden');
+  progressSection.classList.add('hidden');
+  resultSection.classList.add('hidden');
+  errorSection.classList.add('hidden');
+  updateStartBtn();
+}
+
+document.getElementById('resetBtn').addEventListener('click', reset);
+document.getElementById('resetBtnErr').addEventListener('click', reset);
+
+// 起動
+initAuth().then(() => updateStartBtn());

static/index.html

@@ -0,0 +1,132 @@
+<!DOCTYPE html>
+<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> &amp; UVR MDX-NET</p>
+  </footer>
+
+  <script src="/app.js"></script>
+</body>
+</html>

static/pricing.html

@@ -0,0 +1,128 @@
+<!DOCTYPE html>
+<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;800&display=swap" rel="stylesheet">
+  <link rel="stylesheet" href="/style.css">
+  <style>
+    .pricing-hero { text-align: center; margin-bottom: 2.5rem; }
+    .pricing-hero h1 { font-size: 2rem; font-weight: 800; margin-bottom: .75rem;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
+    .pricing-hero p { color: var(--text-muted); font-size: .95rem; }
+
+    .plan-card {
+      position: relative;
+      background: var(--surface);
+      border: 2px solid var(--accent);
+      border-radius: var(--radius);
+      padding: 2.25rem 2rem;
+      text-align: center;
+      backdrop-filter: blur(20px);
+      box-shadow: 0 0 40px rgba(124,106,247,.2);
+    }
+    .plan-badge {
+      position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      color: #fff; font-size: .75rem; font-weight: 700;
+      padding: .25rem 1rem; border-radius: 99px; letter-spacing: .06em;
+      white-space: nowrap;
+    }
+    .plan-name { font-size: 1.1rem; font-weight: 600; color: var(--text-muted); margin-bottom: .5rem; }
+    .plan-price {
+      font-size: 3.2rem; font-weight: 800; letter-spacing: -0.03em; margin: .5rem 0;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
+    }
+    .plan-price span { font-size: 1rem; font-weight: 400; color: var(--text-muted); }
+    .plan-features { list-style: none; margin: 1.5rem 0 2rem; text-align: left; }
+    .plan-features li {
+      padding: .5rem 0; border-bottom: 1px solid var(--border);
+      font-size: .9rem; display: flex; align-items: center; gap: .6rem;
+    }
+    .plan-features li:last-child { border: none; }
+    .plan-features li::before { content: "✅"; flex-shrink: 0; }
+
+    .nav-link { color: var(--accent2); text-decoration: none; font-size: .85rem; }
+    .nav-link:hover { text-decoration: underline; }
+    .nav-bar { text-align: center; margin-bottom: 1.5rem; }
+  </style>
+</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">
+    <div class="nav-bar">
+      <a class="nav-link" href="/">← アプリに戻る</a>
+    </div>
+
+    <div class="pricing-hero">
+      <div class="logo" style="justify-content:center;margin-bottom:.75rem;">
+        <span class="logo-icon">🎧</span>
+        <span class="logo-text">HarmoSplit</span>
+      </div>
+      <h1>プランを選択してください</h1>
+      <p>月額サブスクリプションでいつでも解約可能</p>
+    </div>
+
+    <div class="plan-card">
+      <div class="plan-badge">🎵 スタンダードプラン</div>
+      <p class="plan-name">月額</p>
+      <p class="plan-price" id="priceDisplay">¥ - <span>/ 月</span></p>
+      <ul class="plan-features">
+        <li>音声・動画ファイルを無制限に処理</li>
+        <li>Demucs AI による 6 ステム分離</li>
+        <li>UVR MDX-NET KARA でリード / ハモリ分離</li>
+        <li>MP3 / WAV / MP4 / MOV など対応</li>
+        <li>処理完了後に WAV をダウンロード</li>
+        <li>いつでも解約可能</li>
+      </ul>
+      <button class="btn btn-primary" id="checkoutBtn">今すぐ始める →</button>
+    </div>
+
+    <p style="text-align:center;margin-top:1.25rem;font-size:.78rem;color:var(--text-muted);">
+      Stripe によるセキュアな決済 🔒<br>クレジットカード・デビットカード対応
+    </p>
+  </main>
+
+  <footer class="footer">
+    <p>🎧 HarmoSplit — Powered by Demucs &amp; UVR MDX-NET</p>
+  </footer>
+
+  <script>
+    // 料金を取得して表示
+    fetch('/pricing-info').then(r => r.json()).then(d => {
+      if (d.price) document.getElementById('priceDisplay').innerHTML =
+        `¥${Number(d.price).toLocaleString()} <span>/ 月</span>`;
+    }).catch(() => {});
+
+    document.getElementById('checkoutBtn').addEventListener('click', async () => {
+      const btn = document.getElementById('checkoutBtn');
+      btn.disabled = true;
+      btn.textContent = '処理中...';
+      try {
+        const res  = await fetch('/create-checkout', { method: 'POST' });
+        const data = await res.json();
+        if (data.url) {
+          window.location.href = data.url;
+        } else {
+          alert('エラー: ' + (data.error || '不明なエラー'));
+          btn.disabled = false;
+          btn.textContent = '今すぐ始める →';
+        }
+      } catch (e) {
+        alert('サーバーエラーが発生しました');
+        btn.disabled = false;
+        btn.textContent = '今すぐ始める →';
+      }
+    });
+  </script>
+</body>
+</html>

static/style.css

@@ -0,0 +1,326 @@
+/* ── Reset & Base ──────────────────────────────────────── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+
+:root {
+  --bg: #0a0a0f;
+  --surface: rgba(255,255,255,0.05);
+  --surface-hover: rgba(255,255,255,0.08);
+  --border: rgba(255,255,255,0.10);
+  --text: #e8e8f0;
+  --text-muted: #7b7b9a;
+  --accent: #7c6af7;
+  --accent2: #4fc8e9;
+  --accent3: #f76a8c;
+  --success: #4ade80;
+  --error: #f87171;
+  --radius: 20px;
+  --shadow: 0 8px 40px rgba(0,0,0,0.5);
+}
+
+html { font-size: 16px; scroll-behavior: smooth; }
+
+body {
+  font-family: 'Inter', sans-serif;
+  background: var(--bg);
+  color: var(--text);
+  min-height: 100vh;
+  overflow-x: hidden;
+}
+
+/* ── 背景オーブ ──────────────────────────────────────── */
+.bg-orbs { position: fixed; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; }
+
+.orb {
+  position: absolute;
+  border-radius: 50%;
+  filter: blur(80px);
+  opacity: 0.25;
+  animation: orb-float 12s ease-in-out infinite alternate;
+}
+.orb1 { width: 600px; height: 600px; background: var(--accent); top: -200px; left: -200px; animation-delay: 0s; }
+.orb2 { width: 500px; height: 500px; background: var(--accent2); bottom: -150px; right: -100px; animation-delay: -4s; }
+.orb3 { width: 400px; height: 400px; background: var(--accent3); top: 40%; left: 50%; transform: translateX(-50%); animation-delay: -8s; }
+
+@keyframes orb-float {
+  from { transform: translate(0, 0) scale(1); }
+  to   { transform: translate(30px, 30px) scale(1.05); }
+}
+
+/* ── Layout ──────────────────────────────────────────── */
+.container {
+  position: relative; z-index: 1;
+  max-width: 680px;
+  margin: 0 auto;
+  padding: 2rem 1.5rem 4rem;
+}
+
+/* ── Header ──────────────────────────────────────────── */
+.header { text-align: center; margin-bottom: 2.5rem; }
+
+.logo {
+  display: inline-flex; align-items: center; gap: .5rem;
+  font-size: 2rem; font-weight: 700; letter-spacing: -0.03em;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
+  background-clip: text;
+  margin-bottom: .75rem;
+}
+.logo-icon { font-size: 2rem; filter: drop-shadow(0 0 12px var(--accent)); }
+
+.tagline {
+  color: var(--text-muted); font-size: .95rem; line-height: 1.7;
+}
+.tagline strong { color: var(--text); }
+
+/* ── Card ──────────────────────────────────────────── */
+.card {
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  padding: 2rem;
+  backdrop-filter: blur(20px);
+  -webkit-backdrop-filter: blur(20px);
+  box-shadow: var(--shadow);
+  margin-bottom: 1.5rem;
+}
+.hidden { display: none !important; }
+
+/* ── ドロップゾーン ──────────────────────────────────── */
+.drop-zone {
+  border: 2px dashed var(--border);
+  border-radius: 14px;
+  padding: 3rem 2rem;
+  text-align: center;
+  cursor: pointer;
+  transition: border-color .2s, background .2s;
+}
+.drop-zone.dragover {
+  border-color: var(--accent);
+  background: rgba(124,106,247,.08);
+}
+.drop-zone.has-file {
+  border-color: var(--accent);
+  border-style: solid;
+}
+
+.drop-icon { font-size: 3rem; margin-bottom: .75rem; }
+.drop-text { font-size: 1.05rem; font-weight: 500; margin-bottom: .25rem; }
+.drop-sub  { color: var(--text-muted); font-size: .85rem; margin-bottom: .75rem; }
+.drop-formats { margin-top: .75rem; font-size: .78rem; color: var(--text-muted); }
+.drop-filename { margin-top: .5rem; font-size: .9rem; color: var(--accent2); font-weight: 500; }
+
+/* ── 設定パネル ──────────────────────────────────────── */
+.settings { margin: 1.5rem 0 1.25rem; display: flex; flex-direction: column; gap: .9rem; }
+
+.setting-row {
+  display: flex; align-items: center; gap: .75rem;
+  padding: .75rem 1rem;
+  background: rgba(255,255,255,.03);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+}
+.setting-row label {
+  flex: 1; font-size: .88rem; color: var(--text-muted);
+  display: flex; align-items: center; gap: .4rem;
+}
+.setting-value {
+  font-size: .85rem; color: var(--accent2); font-weight: 600;
+  min-width: 32px; text-align: right;
+}
+
+input[type="range"] {
+  -webkit-appearance: none; appearance: none;
+  flex: 0 0 130px; height: 4px;
+  background: var(--border); border-radius: 99px; cursor: pointer;
+}
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  width: 16px; height: 16px; border-radius: 50%;
+  background: var(--accent); border: 2px solid #fff; cursor: pointer;
+  box-shadow: 0 0 8px var(--accent);
+}
+
+select {
+  background: rgba(255,255,255,.06);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: .35rem .6rem; border-radius: 7px;
+  font-size: .83rem; cursor: pointer; flex: 0 0 auto;
+}
+
+/* ── トグル ──────────────────────────────────────────── */
+.toggle { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
+.toggle input { opacity: 0; width: 0; height: 0; }
+.slider {
+  position: absolute; inset: 0;
+  background: var(--border); border-radius: 99px; cursor: pointer;
+  transition: background .2s;
+}
+.slider::before {
+  content: ''; position: absolute;
+  width: 18px; height: 18px; left: 4px; top: 4px;
+  background: #fff; border-radius: 50%;
+  transition: transform .2s;
+  box-shadow: 0 2px 6px rgba(0,0,0,.3);
+}
+.toggle input:checked + .slider { background: var(--accent); }
+.toggle input:checked + .slider::before { transform: translateX(20px); }
+
+/* ── バッジ ──────────────────────────────────────────── */
+.badge {
+  display: inline-block;
+  padding: .1rem .45rem; font-size: .68rem; font-weight: 600;
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  border-radius: 99px; color: #fff; letter-spacing: .04em;
+}
+
+/* ── ボタン ──────────────────────────────────────────── */
+.btn {
+  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
+  padding: .75rem 1.75rem; border-radius: 10px;
+  font-family: inherit; font-size: .95rem; font-weight: 600;
+  cursor: pointer; border: none; text-decoration: none;
+  transition: transform .15s, box-shadow .15s, opacity .15s;
+}
+.btn:active { transform: scale(.97); }
+
+.btn-primary {
+  background: linear-gradient(135deg, var(--accent), var(--accent2));
+  color: #fff; width: 100%;
+  box-shadow: 0 4px 24px rgba(124,106,247,.4);
+}
+.btn-primary:hover:not(:disabled) { box-shadow: 0 6px 32px rgba(124,106,247,.6); transform: translateY(-1px); }
+.btn-primary:disabled { opacity: .4; cursor: not-allowed; }
+
+.btn-outline {
+  background: transparent;
+  border: 1px solid var(--border);
+  color: var(--text);
+}
+.btn-outline:hover { background: var(--surface-hover); }
+
+/* ── 進捗 ──────────────────────────────────────────── */
+.progress-header {
+  display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem;
+}
+.progress-title { font-size: 1.05rem; font-weight: 600; }
+.progress-file   { font-size: .82rem; color: var(--text-muted); margin-top: .2rem; }
+
+.spinner {
+  flex-shrink: 0;
+  width: 36px; height: 36px;
+  border: 3px solid var(--border);
+  border-top-color: var(--accent);
+  border-radius: 50%;
+  animation: spin .8s linear infinite;
+}
+@keyframes spin { to { transform: rotate(360deg); } }
+
+.progress-bar-wrap {
+  background: rgba(255,255,255,.06);
+  border-radius: 99px; height: 8px;
+  overflow: hidden; margin-bottom: .5rem;
+}
+.progress-bar {
+  height: 100%; width: 0%;
+  background: linear-gradient(90deg, var(--accent), var(--accent2));
+  border-radius: 99px;
+  transition: width .5s ease;
+}
+.progress-pct { font-size: .82rem; color: var(--text-muted); text-align: right; margin-bottom: 1rem; }
+
+.log-box {
+  background: rgba(0,0,0,.4);
+  border: 1px solid var(--border);
+  border-radius: 10px;
+  padding: .9rem 1rem;
+  max-height: 200px; overflow-y: auto;
+  font-size: .8rem; font-family: 'Menlo', 'Consolas', monospace;
+  color: var(--text-muted); line-height: 1.6;
+  scroll-behavior: smooth;
+}
+.log-box p { margin-bottom: .15rem; white-space: pre-wrap; }
+.log-box p.ok { color: var(--success); }
+.log-box p.err { color: var(--error); }
+
+/* ── 完了・エラー ──────────────────────────────────── */
+.result-card, .error-card { text-align: center; }
+
+.result-icon { font-size: 3.5rem; margin-bottom: .75rem; }
+.result-title { font-size: 1.5rem; font-weight: 700; margin-bottom: 1.5rem; }
+
+.channel-info {
+  display: flex; gap: 1rem; justify-content: center; margin-bottom: 2rem;
+}
+.channel-item {
+  flex: 1; max-width: 220px;
+  padding: 1rem; border-radius: 12px;
+  border: 1px solid var(--border);
+  background: rgba(255,255,255,.03);
+}
+.channel-item.left  { border-color: var(--accent); }
+.channel-item.right { border-color: var(--accent2); }
+.ch-label {
+  display: inline-block;
+  font-size: 1.3rem; font-weight: 800;
+  margin-bottom: .3rem;
+}
+.channel-item.left  .ch-label { color: var(--accent); }
+.channel-item.right .ch-label { color: var(--accent2); }
+.ch-desc { display: block; font-size: .82rem; color: var(--text-muted); }
+
+.download-btn { margin-bottom: .75rem; }
+.reset-btn    { width: 100%; }
+
+.error-msg { color: var(--error); font-size: .9rem; margin-bottom: 1.5rem; white-space: pre-wrap; }
+
+/* ── フッター ──────────────────────────────────────── */
+.footer {
+  position: relative; z-index: 1;
+  text-align: center; padding: 1.5rem;
+  color: var(--text-muted); font-size: .8rem;
+}
+.footer a { color: var(--accent2); text-decoration: none; }
+.footer a:hover { text-decoration: underline; }
+
+/* ── レスポンシブ ──────────────────────────────────── */
+@media (max-width: 520px) {
+  .container { padding: 1.25rem 1rem 3rem; }
+  .card { padding: 1.5rem; }
+  .channel-info { flex-direction: column; align-items: center; }
+  input[type="range"] { flex: 0 0 100px; }
+}
+
+/* ── トークン認証 UI ─────────────────────────────────── */
+.token-area {
+  margin-bottom: 1.25rem;
+  padding: 1rem;
+  border: 1px solid var(--border);
+  border-radius: 12px;
+  background: rgba(255,255,255,.02);
+}
+.token-row {
+  display: flex; gap: .5rem; margin-bottom: .5rem;
+}
+.token-row input[type="text"] {
+  flex: 1;
+  background: rgba(255,255,255,.06);
+  border: 1px solid var(--border);
+  color: var(--text);
+  padding: .5rem .8rem; border-radius: 8px;
+  font-size: .88rem; font-family: monospace;
+  outline: none; transition: border-color .2s;
+}
+.token-row input[type="text"]:focus { border-color: var(--accent); }
+.btn-verify {
+  padding: .5rem 1rem; border-radius: 8px;
+  background: var(--accent); color: #fff;
+  font-family: inherit; font-size: .85rem; font-weight: 600;
+  border: none; cursor: pointer; flex-shrink: 0;
+  transition: opacity .15s;
+}
+.btn-verify:hover { opacity: .85; }
+.token-hint { font-size: .78rem; color: var(--text-muted); }
+.token-hint a.pricing-link { color: var(--accent2); text-decoration: none; }
+.token-hint a.pricing-link:hover { text-decoration: underline; }
+.token-ok { font-size: .82rem; color: var(--success); margin-top: .4rem; font-weight: 600; }

static/success.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<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">
+  <style>
+    .success-wrap { text-align: center; }
+    .token-box {
+      background: rgba(0,0,0,.5);
+      border: 1px solid var(--accent);
+      border-radius: 10px;
+      padding: 1rem 1.5rem;
+      font-family: monospace; font-size: 1rem;
+      letter-spacing: .04em;
+      color: var(--accent2);
+      word-break: break-all;
+      margin: 1.25rem 0;
+      user-select: all;
+      cursor: pointer;
+      transition: background .2s;
+    }
+    .token-box:hover { background: rgba(124,106,247,.1); }
+    .copy-hint { font-size: .78rem; color: var(--text-muted); margin-top: -.5rem; margin-bottom: 1rem; }
+    .copied-badge {
+      display: none;
+      color: var(--success); font-size: .85rem; margin-bottom: 1rem; font-weight: 600;
+    }
+    .steps { text-align: left; margin: 1.5rem 0; }
+    .step {
+      display: flex; gap: 1rem; align-items: flex-start;
+      padding: .75rem 0; border-bottom: 1px solid var(--border);
+      font-size: .9rem;
+    }
+    .step-num {
+      flex-shrink: 0; width: 28px; height: 28px;
+      background: linear-gradient(135deg, var(--accent), var(--accent2));
+      border-radius: 50%; display: flex; align-items: center; justify-content: center;
+      font-size: .8rem; font-weight: 700; color: #fff;
+    }
+  </style>
+</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">
+    <div class="card success-wrap">
+      <div style="font-size:3.5rem;margin-bottom:1rem;">🎉</div>
+      <h1 class="result-title">決済完了！ありがとうございます</h1>
+
+      <p style="color:var(--text-muted);font-size:.9rem;margin-bottom:1rem;">
+        以下のアクセストークンを保存してください。アプリ利用時に必要です。
+      </p>
+
+      <div class="token-box" id="tokenBox" onclick="copyToken()">
+        <span id="tokenText">読み込み中...</span>
+      </div>
+      <p class="copy-hint">👆 クリックでコピー</p>
+      <div class="copied-badge" id="copiedBadge">✅ コピーしました！</div>
+
+      <div class="steps">
+        <div class="step">
+          <div class="step-num">1</div>
+          <div>上のトークンをコピーして <strong>安全な場所に保存</strong>してください</div>
+        </div>
+        <div class="step">
+          <div class="step-num">2</div>
+          <div>アプリに戻り、トークンを入力してご利用ください</div>
+        </div>
+        <div class="step" style="border:none;">
+          <div class="step-num">3</div>
+          <div>サブスクリプションは <a href="https://billing.stripe.com" style="color:var(--accent2);">Stripe ポータル</a> からいつでも解約できます</div>
+        </div>
+      </div>
+
+      <a class="btn btn-primary" href="/" style="margin-top:.5rem;">
+        🎧 アプリを使ってみる
+      </a>
+    </div>
+  </main>
+
+  <footer class="footer">
+    <p>🎧 HarmoSplit — Powered by Demucs &amp; UVR MDX-NET</p>
+  </footer>
+
+  <script>
+    async function loadToken() {
+      const params = new URLSearchParams(location.search);
+      const sessionId = params.get('session_id');
+      if (!sessionId) {
+        document.getElementById('tokenText').textContent = 'エラー: session_id が見つかりません';
+        return;
+      }
+      try {
+        const res  = await fetch(`/get-token?session_id=${sessionId}`);
+        const data = await res.json();
+        if (data.token) {
+          document.getElementById('tokenText').textContent = data.token;
+        } else {
+          document.getElementById('tokenText').textContent = 'エラー: ' + (data.error || '不明');
+        }
+      } catch(e) {
+        document.getElementById('tokenText').textContent = 'サーバーエラー';
+      }
+    }
+
+    function copyToken() {
+      const text = document.getElementById('tokenText').textContent;
+      navigator.clipboard.writeText(text).then(() => {
+        const badge = document.getElementById('copiedBadge');
+        badge.style.display = 'block';
+        setTimeout(() => badge.style.display = 'none', 2000);
+      });
+    }
+
+    loadToken();
+  </script>
+</body>
+</html>