index.html

<!doctype html>
<html lang="ja">
<head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1"><title>Audio Decision Model by mocomoco inc.</title><link rel="icon" href="./favicon.svg" type="image/svg+xml"><link rel="preload" href="./mocomoco-inc-logo.svg" as="image" type="image/svg+xml"><link rel="preload" href="./fonts/LINESeedJP_OTF_Rg.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="./fonts/LINESeedJP_OTF_Bd.woff2" as="font" type="font/woff2" crossorigin><link rel="stylesheet" href="./styles.css?v=20260921-inference-time-v1"></head>
<body>
<div id="startup-screen" class="startup-screen" role="status" aria-label="Audio Decision Modelを読み込んでいます"><div class="startup-stage"><span class="startup-spinner" aria-hidden="true"></span><div class="startup-brand"><strong>Audio Decision Model</strong><span><img src="./mocomoco-inc-logo.svg" alt="mocomoco inc." width="217" height="33"></span><small>Inspired by TypeSafe AI’s Jev</small></div></div></div>
<div id="mode-color-edge" aria-hidden="true"></div>
<header class="topbar"><div class="product-brand"><div class="product-headline"><h1 class="product-title"><a href="./"><span id="product-name">Audio Decision Model</span> <span id="edge-mode-label" class="edge-mode-label" hidden>Edge AI</span></a></h1><a class="hf-link hf-link-top" href="https://huggingface.co/spaces/mocomoco-inc/AudioDecisionModel/tree/main" target="_blank" rel="noopener noreferrer"><span aria-hidden="true">🤗</span><span class="hf-link-full">Available on Hugging Face</span><span class="hf-link-short">Hugging Face</span><svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M8 5h11v11M19 5 5 19"/></svg></a></div><p class="product-meta"><span class="product-byline"><img src="./mocomoco-inc-logo.svg" alt="mocomoco inc." width="217" height="33"></span><span class="product-meta-separator" aria-hidden="true">·</span><span class="product-inspiration">Inspired by <a href="https://typesafe.ai/blog/introducing-system-one-models-and-jev" target="_blank" rel="noopener noreferrer">TypeSafe AI’s Jev</a></span></p><p class="product-description">音声入力に対する判断を高速に返すAIです。言語情報・非言語情報の判断形式を指定できます。</p></div></header>
<main class="page">
<div class="toolbar"><div class="execution-picker"><span class="execution-label" aria-hidden="true">AIの処理場所</span><fieldset id="execution-toggle" class="execution-toggle" aria-label="AIの処理場所"><label class="execution-option"><input type="radio" name="execution" value="server" checked><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><path d="M7 19a5 5 0 0 1-.7-9.95A6 6 0 0 1 18 8a5.5 5.5 0 0 1 .5 11H7Z"/></svg>クラウド</span></label><label class="execution-option"><input type="radio" name="execution" value="edge"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.7" aria-hidden="true"><rect x="3" y="4" width="18" height="13" rx="2"/><path d="M8 21h8m-4-4v4M3 8h18"/></svg>Edge AI</span></label></fieldset></div><select id="execution-mode" hidden aria-hidden="true"><option value="server">クラウド · CPU</option><option value="edge">Edge AI · CPU</option></select><div id="mode-announcement" class="mode-description" role="status" aria-live="polite"><p id="mode-announcement-text"></p></div><span id="backend-wrap" hidden>WASM / INT8</span><span id="execution-kicker" hidden></span><span id="model-title" hidden></span></div>
<div class="workspace">
<div class="inputs">
<section class="section audio-section"><div class="section-heading"><h2>音声</h2><span class="hint">最大 30 秒</span></div>
<div class="recorder" id="recorder" aria-label="録音、ファイル選択、または音声ファイルのドラッグ＆ドロップ">
<div class="recorder-meta"><span id="record-state"><span class="ready-dot"></span>マイクで録音</span><span id="record-timer">0:00 <span>/ 0:30</span></span></div>
<div class="waveform"><canvas id="record-waveform" aria-hidden="true"></canvas></div>
<div class="audio-controls"><button id="record" class="record-button"><svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><rect x="9" y="2" width="6" height="12" rx="3"/><path d="M5 10v2a7 7 0 0 0 14 0v-2M12 19v3M8 22h8"/></svg>録音をはじめる</button><span class="upload-divider">または</span><label class="file-button" for="audio-file">ファイルを選ぶ<input id="audio-file" type="file" accept="audio/*"></label></div>
</div><div id="examples-section" hidden><span class="hint">サンプル</span><div id="examples" class="examples"></div></div><audio id="audio-preview" hidden preload="metadata"></audio><div id="audio-player" class="audio-player" hidden><div class="player-heading"><span>音声プレビュー</span><span id="player-time">0:00 / 0:00</span></div><div class="player-controls"><button id="player-play" class="player-play" type="button" aria-label="再生"></button><div class="player-track"><canvas id="player-waveform" aria-hidden="true"></canvas><input id="player-seek" type="range" min="0" max="1" step="0.01" value="0" aria-label="再生位置"></div><select id="player-speed" aria-label="再生速度"><option value="1">1×</option><option value="1.25">1.25×</option><option value="1.5">1.5×</option><option value="2">2×</option></select></div></div><p id="sample-transcript" class="sample-transcript" hidden></p><p id="audio-status" class="hint"></p>
<details class="context-details"><summary>文脈・補足 <span class="hint">任意</span></summary><textarea id="context" maxlength="2000" rows="3" placeholder="直前の会話など"></textarea><span class="hint"><span id="context-count">0</span> / 2000</span></details>
</section>
<section class="section questions-section"><div class="section-heading"><h2>質問</h2><select id="preset" aria-label="プリセット"><option value="identity">予約・注文の意図</option><option value="language">話されている言語</option><option value="service">音のカテゴリ</option><option value="classification">音カテゴリ数</option><option value="turntaking">発話の役割</option><option value="animals">動物の種類</option></select></div>
<label class="question-selector">編集する質問<select id="existing-question"></select></label>
<form id="question-builder" class="builder">
<label>質問文<textarea id="question-instructions" rows="3" required></textarea></label>
<label>回答形式<select id="question-type"><option value="noul">Yes / No</option><option value="choice">選択</option><option value="score">数値</option></select></label>
<div id="criteria-panel" class="criteria-fields" hidden>
<div class="criteria-fields-heading"><span id="criteria-title">選択肢</span><span id="criteria-limit" class="hint"></span></div>
<div id="criteria-items" class="criteria-items"></div>
<button id="add-criterion" class="add-criterion" type="button">＋ 選択肢を追加</button>
</div>
</form>
<details class="question-advanced"><summary>詳細設定</summary><div class="advanced-fields"><label>質問ID <span class="hint">結果JSONのキー</span><input id="question-name" required></label><label>質問セット JSON<textarea id="questions-json" rows="16" spellcheck="false"></textarea></label></div></details><p id="question-error" class="error" role="alert"></p>
</section>

</div>
<aside class="output"><div class="section-heading"><h2>結果</h2><span id="inference-time" class="inference-time" hidden></span></div><div class="run-bar"><button id="analyze" class="primary">実行する</button><span id="analysis-status" role="status">音声を選んでください。</span></div><div id="summary" class="summary is-empty">音声を選んで解析すると、ここに結果が表示されます。</div><details class="result-details" open><summary>結果 JSON</summary><pre id="result-json">{}</pre></details>
</aside>
</div></main><footer class="site-footer"><div class="operator-block"><div class="operator"><span>企業情報</span><a class="operator-logo" href="https://mocomoco.ai" target="_blank" rel="noopener noreferrer"><img src="./mocomoco-inc-logo.svg" alt="mocomoco inc." width="217" height="33" loading="lazy"></a></div><p class="references">inspired by <a href="https://docs.typesafe.ai/introduction" target="_blank" rel="noopener noreferrer">Jev / TypeSafe AI</a> · <a href="https://github.com/TheoLeeCJ/SemIf" target="_blank" rel="noopener noreferrer">OpenJev / SemIf</a></p></div><a class="hf-link" href="https://huggingface.co/spaces/mocomoco-inc/AudioDecisionModel/tree/main" target="_blank" rel="noopener noreferrer"><span aria-hidden="true">🤗</span>Available on Hugging Face<svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.6"><path d="M8 5h11v11M19 5 5 19"/></svg></a></footer><dialog id="edge-intro" class="edge-intro" aria-labelledby="edge-intro-title" aria-describedby="edge-intro-description"><button id="edge-intro-close" class="dialog-close" type="button" aria-label="説明を閉じる" autofocus><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" aria-hidden="true"><path d="m6 6 12 12M18 6 6 18"/></svg></button><svg class="edge-intro-illustration" viewBox="0 0 280 110" fill="none" role="img" aria-label="音声を端末の中で処理し、外へ送信しないイメージ"><rect x="65" y="12" width="150" height="78" rx="9" fill="#162d40" stroke="#7293aa" stroke-width="2"/><rect x="74" y="21" width="132" height="60" rx="4" fill="#101b2a"/><path d="M53 91h174l-8 9H61l-8-9Z" fill="#203c51" stroke="#7293aa" stroke-width="2" stroke-linejoin="round"/><path d="M128 94h24" stroke="#7293aa" stroke-width="2" stroke-linecap="round"/><g stroke="#69d2ff" stroke-width="3" stroke-linecap="round"><path d="M91 47v10m7-18v26m7-31v36m7-27v18m7-13v8"/></g><path d="M132 52h20m-5-5 5 5-5 5" stroke="#7293aa" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/><rect x="163" y="45" width="27" height="22" rx="5" fill="#25485e" stroke="#69d2ff" stroke-width="2"/><path d="M170 45v-6a6.5 6.5 0 0 1 13 0v6" stroke="#69d2ff" stroke-width="2"/><path d="m171 56 4 4 7-8" stroke="#a0e4ff" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg><h2 id="edge-intro-title">Edge AI</h2><div id="edge-intro-description"><p>データをクラウドに送らず、この端末内でJevを実行します。外部送信不要で、オフラインでも利用できます。初回のみ「モデルを読み込む」からモデルをダウンロードします。</p></div></dialog><script type="module" src="./ui.js?v=20260921-cpu-modal-v1"></script></body></html>