Upload 8 files

Dockerfile

@@ -0,0 +1,16 @@
+FROM python:3.11-slim
+
+WORKDIR /app
+
+COPY requirements.txt ./
+RUN pip install --no-cache-dir -r requirements.txt
+
+COPY app ./app
+COPY data ./data
+
+ENV PORT=7860
+ENV ANIME_RIG_DIR=/app/data/Anime2.5DRig
+
+EXPOSE 7860
+
+CMD ["uvicorn", "app.main:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -1,10 +1,65 @@
 ---
-title: GPT Voice
-emoji: 💻
-colorFrom: gray
-colorTo: gray
+title: GPT Voice Avatar Test
+emoji: 🎙️
+colorFrom: indigo
+colorTo: purple
 sdk: docker
+app_port: 7860
 pinned: false
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+# ChatGPT Live Avatar Test
+
+ChatGPT音声モードのタブ映像・タブ音声をブラウザの画面共有で取得し、Anime2.5DRigをオーバーレイして音量ベースの口パクを検証するHugging Face Docker Space用MVPです。
+
+## Spaceへの配置
+
+対象Space:
+
+- リポジトリ: `https://huggingface.co/spaces/mcuo/GPT-Voice`
+- 実行アプリ: `https://mcuo-gpt-voice.hf.space`
+
+このリポジトリの内容をDocker Spaceへ配置します。Anime2.5DRig一式はSpaceリポジトリ内の次の場所へ配置してください。
+
+```text
+data/Anime2.5DRig/index.html
+data/Anime2.5DRig/lib/ag-psd.min.js
+data/Anime2.5DRig/lib/rigger.js
+data/Anime2.5DRig/lib/genericparts.js
+```
+
+Dockerビルド時にこのディレクトリは `/app/data/Anime2.5DRig` へコピーされ、アプリから `/anime2.5drig/` として配信されます。つまり実行中アプリでのURLは次です。
+
+```text
+https://mcuo-gpt-voice.hf.space/anime2.5drig/
+```
+
+`https://huggingface.co/spaces/mcuo/GPT-Voice/data/Anime2.5DRig` はSpaceリポジトリを閲覧するための場所であり、実行アプリの静的ファイルURLではありません。
+
+Persistent Storageの `/data/Anime2.5DRig` を使う場合は、Spaceの環境変数を `ANIME_RIG_DIR=/data/Anime2.5DRig` に設定します。
+
+## 操作
+
+1. Spaceをデスクトップ版Chromium系ブラウザで開く。
+2. 別タブでChatGPT音声モードを開始する。
+3. Spaceの「ChatGPTタブを共有」を押す。
+4. ChatGPTタブを選び、「タブの音声を共有」を有効にする。
+5. ChatGPTに応答させ、「音声トラック」と「推定口開度」を確認する。
+6. Anime2.5DRigでPSDを読み込み、AI応答中に口が動くか確認する。
+
+画面共有の許可はブラウザの仕様上、ユーザーが毎回選択する必要があります。共有映像と音声はサーバーへアップロードせず、ブラウザ内だけで処理します。
+
+## ローカル確認
+
+```powershell
+$env:ANIME_RIG_DIR = "F:\path\to\Anime2.5DRig"
+uvicorn app.main:app --host 127.0.0.1 --port 7860
+```
+
+`http://127.0.0.1:7860/healthz` が `{"ok":true}` を返せばサーバーは起動しています。
+
+## 現段階の制約
+
+- 口開度入力の検出はAnime2.5DRigの現在の日本語UI（「口」「開き」）を手掛かりにしているため、Anime2.5DRig側に明示的な外部制御APIを追加するのが次の改善点です。
+- 初期検証は音量ベースで、母音別のvisemeには対応しません。
+- モバイルブラウザとウィンドウ全体のシステム音声共有は対象外です。

app/__init__.py

@@ -0,0 +1 @@
+

app/main.py

@@ -0,0 +1,46 @@
+from pathlib import Path
+import os
+
+from fastapi import FastAPI
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+
+
+BASE_DIR = Path(__file__).resolve().parent
+STATIC_DIR = BASE_DIR / "static"
+APP_DIR = BASE_DIR.parent
+ANIME_RIG_DIR = Path(
+    os.getenv("ANIME_RIG_DIR", str(APP_DIR / "data" / "Anime2.5DRig"))
+).resolve()
+
+app = FastAPI(title="ChatGPT Live Avatar Test")
+app.mount("/static", StaticFiles(directory=STATIC_DIR), name="static")
+
+if ANIME_RIG_DIR.is_dir():
+    app.mount(
+        "/anime2.5drig",
+        StaticFiles(directory=ANIME_RIG_DIR, html=True),
+        name="anime2.5drig",
+    )
+
+
+@app.get("/api/status")
+def status() -> dict[str, object]:
+    index_path = ANIME_RIG_DIR / "index.html"
+    return {
+        "ok": True,
+        "animeRigAvailable": index_path.is_file(),
+        "animeRigUrl": "/anime2.5drig/" if index_path.is_file() else None,
+        "expectedPath": str(ANIME_RIG_DIR),
+        "repositoryPath": "data/Anime2.5DRig",
+    }
+
+
+@app.get("/healthz")
+def healthz() -> dict[str, bool]:
+    return {"ok": True}
+
+
+@app.get("/")
+def index() -> FileResponse:
+    return FileResponse(STATIC_DIR / "index.html")

app/static/app.js

@@ -0,0 +1,186 @@
+const elements = {
+  start: document.querySelector("#startShare"),
+  stop: document.querySelector("#stopShare"),
+  toggleRig: document.querySelector("#toggleRig"),
+  video: document.querySelector("#sharedScreen"),
+  empty: document.querySelector("#emptyState"),
+  frame: document.querySelector("#rigFrame"),
+  shareStatus: document.querySelector("#shareStatus"),
+  audioStatus: document.querySelector("#audioStatus"),
+  rigStatus: document.querySelector("#rigStatus"),
+  meter: document.querySelector("#mouthMeter"),
+  value: document.querySelector("#mouthValue"),
+  sensitivity: document.querySelector("#sensitivity"),
+  message: document.querySelector("#message"),
+};
+
+let displayStream = null;
+let audioContext = null;
+let analyser = null;
+let samples = null;
+let animationId = null;
+let smoothedLevel = 0;
+let rigMouthInput = null;
+
+function setMessage(text, error = false) {
+  elements.message.textContent = text;
+  elements.message.classList.toggle("error", error);
+}
+
+async function loadRigStatus() {
+  try {
+    const response = await fetch("/api/status");
+    const status = await response.json();
+    if (!status.animeRigAvailable) {
+      elements.rigStatus.textContent = "未配置";
+      elements.frame.hidden = true;
+      elements.toggleRig.disabled = true;
+      setMessage(`${status.expectedPath} にAnime2.5DRigのindex.htmlを配置してください。音声検証は実行できます。`);
+      return;
+    }
+    elements.rigStatus.textContent = "利用可能";
+    elements.frame.src = status.animeRigUrl;
+    elements.frame.hidden = false;
+    elements.toggleRig.disabled = false;
+  } catch (error) {
+    elements.rigStatus.textContent = "確認失敗";
+    setMessage(`Anime2.5DRigの状態確認に失敗しました: ${error.message}`, true);
+  }
+}
+
+function findRigMouthInput() {
+  try {
+    const doc = elements.frame.contentDocument;
+    if (!doc) return null;
+    const sliders = [...doc.querySelectorAll('input[type="range"]')];
+    return sliders.find((input) => {
+      const area = input.parentElement?.parentElement?.textContent || input.parentElement?.textContent || "";
+      return area.includes("口") && area.includes("開き");
+    }) || null;
+  } catch {
+    return null;
+  }
+}
+
+function updateRigMouth(level) {
+  if (!rigMouthInput || !rigMouthInput.isConnected) {
+    rigMouthInput = findRigMouthInput();
+  }
+  if (!rigMouthInput) return;
+  const min = Number(rigMouthInput.min || 0);
+  const max = Number(rigMouthInput.max || 1);
+  rigMouthInput.value = String(min + (max - min) * level);
+  rigMouthInput.dispatchEvent(new Event("input", { bubbles: true }));
+}
+
+function renderAudioLevel() {
+  if (!analyser || !samples) return;
+  analyser.getFloatTimeDomainData(samples);
+  let energy = 0;
+  for (const sample of samples) energy += sample * sample;
+  const rms = Math.sqrt(energy / samples.length);
+  const sensitivity = Number(elements.sensitivity.value);
+  const gated = Math.max(0, rms - 0.008);
+  const target = Math.min(1, gated * 18 * sensitivity);
+  const smoothing = target > smoothedLevel ? 0.42 : 0.14;
+  smoothedLevel += (target - smoothedLevel) * smoothing;
+
+  elements.meter.value = smoothedLevel;
+  elements.value.value = smoothedLevel.toFixed(2);
+  updateRigMouth(smoothedLevel);
+  animationId = requestAnimationFrame(renderAudioLevel);
+}
+
+async function startShare() {
+  if (!navigator.mediaDevices?.getDisplayMedia) {
+    setMessage("このブラウザは画面共有APIに対応していません。デスクトップ版Chromium系ブラウザで試してください。", true);
+    return;
+  }
+
+  try {
+    displayStream = await navigator.mediaDevices.getDisplayMedia({
+      video: { frameRate: { ideal: 30, max: 30 } },
+      audio: true,
+      preferCurrentTab: false,
+      selfBrowserSurface: "exclude",
+      surfaceSwitching: "include",
+    });
+
+    const videoTrack = displayStream.getVideoTracks()[0];
+    const audioTrack = displayStream.getAudioTracks()[0];
+    elements.video.srcObject = displayStream;
+    elements.video.style.display = "block";
+    elements.empty.style.display = "none";
+    elements.shareStatus.textContent = videoTrack?.label || "共有中";
+    elements.start.disabled = true;
+    elements.stop.disabled = false;
+
+    videoTrack?.addEventListener("ended", stopShare, { once: true });
+
+    if (!audioTrack) {
+      elements.audioStatus.textContent = "取得できませんでした";
+      setMessage("音声トラックがありません。共有選択画面でChatGPTのタブを選び、「タブの音声を共有」を有効にしてください。", true);
+      return;
+    }
+
+    elements.audioStatus.textContent = audioTrack.label || "取得済み";
+    audioContext = new AudioContext();
+    await audioContext.resume();
+    const audioOnlyStream = new MediaStream([audioTrack]);
+    const source = audioContext.createMediaStreamSource(audioOnlyStream);
+    analyser = audioContext.createAnalyser();
+    analyser.fftSize = 1024;
+    analyser.smoothingTimeConstant = 0;
+    samples = new Float32Array(analyser.fftSize);
+    source.connect(analyser);
+    setMessage("音声トラックを取得しました。ChatGPTに応答させ、推定口開度が動くことを確認してください。");
+    renderAudioLevel();
+  } catch (error) {
+    if (error.name === "NotAllowedError") {
+      setMessage("画面共有がキャンセルされました。", false);
+    } else {
+      setMessage(`画面共有を開始できませんでした: ${error.message}`, true);
+    }
+  }
+}
+
+function stopShare() {
+  if (animationId) cancelAnimationFrame(animationId);
+  animationId = null;
+  analyser = null;
+  samples = null;
+  smoothedLevel = 0;
+  updateRigMouth(0);
+  elements.meter.value = 0;
+  elements.value.value = "0.00";
+
+  if (displayStream) {
+    for (const track of displayStream.getTracks()) track.stop();
+  }
+  displayStream = null;
+  elements.video.srcObject = null;
+  elements.video.style.display = "none";
+  elements.empty.style.display = "grid";
+
+  if (audioContext) audioContext.close().catch(() => {});
+  audioContext = null;
+  elements.shareStatus.textContent = "停止済み";
+  elements.audioStatus.textContent = "停止済み";
+  elements.start.disabled = false;
+  elements.stop.disabled = true;
+}
+
+elements.start.addEventListener("click", startShare);
+elements.stop.addEventListener("click", stopShare);
+elements.toggleRig.addEventListener("click", () => {
+  const hidden = elements.frame.classList.toggle("hidden");
+  elements.toggleRig.textContent = hidden ? "アバターUIを表示" : "アバターUIを隠す";
+});
+elements.frame.addEventListener("load", () => {
+  rigMouthInput = findRigMouthInput();
+  elements.rigStatus.textContent = rigMouthInput ? "利用可能・口制御検出" : "利用可能・口制御未検出";
+});
+window.addEventListener("beforeunload", stopShare);
+
+loadRigStatus();
+

app/static/index.html

@@ -0,0 +1,60 @@
+<!doctype html>
+<html lang="ja">
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>ChatGPT Live Avatar Test</title>
+    <link rel="stylesheet" href="/static/styles.css">
+  </head>
+  <body>
+    <header class="toolbar">
+      <div>
+        <h1>ChatGPT Live Avatar Test</h1>
+        <p>ChatGPTのタブと「タブの音声を共有」を選択してください。</p>
+      </div>
+      <div class="actions">
+        <button id="startShare" class="primary">ChatGPTタブを共有</button>
+        <button id="stopShare" disabled>共有を停止</button>
+        <button id="toggleRig" disabled>アバターUIを隠す</button>
+      </div>
+    </header>
+
+    <main>
+      <section id="stage" class="stage">
+        <video id="sharedScreen" autoplay playsinline muted></video>
+        <div id="emptyState" class="empty-state">
+          <strong>共有待ち</strong>
+          <span>開始後、ChatGPT Liveを開いているタブを選択します。</span>
+        </div>
+        <iframe
+          id="rigFrame"
+          class="rig-frame"
+          title="Anime2.5DRig"
+          allow="microphone"
+        ></iframe>
+      </section>
+
+      <aside class="diagnostics">
+        <h2>検証ステータス</h2>
+        <dl>
+          <div><dt>画面共有</dt><dd id="shareStatus">未開始</dd></div>
+          <div><dt>音声トラック</dt><dd id="audioStatus">未確認</dd></div>
+          <div><dt>Anime2.5DRig</dt><dd id="rigStatus">確認中</dd></div>
+        </dl>
+
+        <label for="mouthMeter">推定口開度</label>
+        <meter id="mouthMeter" min="0" max="1" value="0"></meter>
+        <output id="mouthValue">0.00</output>
+
+        <label for="sensitivity">感度</label>
+        <input id="sensitivity" type="range" min="0.5" max="4" value="1.8" step="0.1">
+
+        <p id="message" class="message" role="status">
+          Anime2.5DRigが未配置でも、タブ音声の取得とメーターは検証できます。
+        </p>
+      </aside>
+    </main>
+
+    <script src="/static/app.js" defer></script>
+  </body>
+</html>

app/static/styles.css

@@ -0,0 +1,104 @@
+:root {
+  color-scheme: dark;
+  font-family: Inter, "Noto Sans JP", system-ui, sans-serif;
+  background: #090b12;
+  color: #f4f6ff;
+}
+
+* { box-sizing: border-box; }
+
+body { margin: 0; min-height: 100vh; }
+
+.toolbar {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 18px 24px;
+  border-bottom: 1px solid #2b3040;
+  background: #111522;
+}
+
+h1, h2, p { margin: 0; }
+h1 { font-size: 20px; }
+.toolbar p { margin-top: 5px; color: #aab1c5; font-size: 13px; }
+.actions { display: flex; gap: 10px; flex-wrap: wrap; }
+
+button {
+  border: 1px solid #424a62;
+  border-radius: 9px;
+  padding: 10px 14px;
+  background: #202638;
+  color: inherit;
+  cursor: pointer;
+}
+button.primary { background: #645cff; border-color: #7e78ff; }
+button:disabled { opacity: .45; cursor: not-allowed; }
+
+main {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) 280px;
+  min-height: calc(100vh - 86px);
+}
+
+.stage {
+  position: relative;
+  overflow: hidden;
+  min-height: 620px;
+  background: radial-gradient(circle at center, #20263a, #080a10 70%);
+}
+
+#sharedScreen {
+  width: 100%;
+  height: 100%;
+  object-fit: contain;
+  display: none;
+}
+
+.empty-state {
+  position: absolute;
+  inset: 0;
+  display: grid;
+  place-content: center;
+  gap: 8px;
+  text-align: center;
+  color: #aab1c5;
+}
+.empty-state strong { color: #f4f6ff; font-size: 24px; }
+
+.rig-frame {
+  position: absolute;
+  right: 16px;
+  bottom: 16px;
+  width: min(430px, 42vw);
+  height: min(610px, calc(100% - 32px));
+  border: 1px solid rgba(255,255,255,.25);
+  border-radius: 14px;
+  background: rgba(9, 11, 18, .92);
+  box-shadow: 0 18px 60px rgba(0,0,0,.5);
+}
+.rig-frame.hidden { display: none; }
+
+.diagnostics {
+  border-left: 1px solid #2b3040;
+  background: #111522;
+  padding: 22px;
+}
+.diagnostics h2 { font-size: 16px; margin-bottom: 18px; }
+dl { margin: 0 0 24px; }
+dl div { display: flex; justify-content: space-between; gap: 10px; margin: 10px 0; }
+dt { color: #aab1c5; }
+dd { margin: 0; text-align: right; }
+.diagnostics label { display: block; margin: 18px 0 8px; color: #c9cee0; }
+meter, input[type="range"] { width: 100%; }
+output { display: block; margin-top: 5px; font-variant-numeric: tabular-nums; }
+.message { margin-top: 24px; color: #aab1c5; line-height: 1.55; font-size: 13px; }
+.message.error { color: #ff9d9d; }
+
+@media (max-width: 820px) {
+  .toolbar { align-items: flex-start; flex-direction: column; }
+  main { grid-template-columns: 1fr; }
+  .diagnostics { border-left: 0; border-top: 1px solid #2b3040; }
+  .rig-frame { width: min(390px, calc(100% - 32px)); height: 60%; }
+}
+

requirements.txt

@@ -0,0 +1,3 @@
+fastapi==0.116.1
+uvicorn[standard]==0.35.0
+