micarrsim/index.html

<!doctype html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta
      name="description"
      content="192채널 MEMS 마이크 배열을 위한 WebGPU 음향 카메라 시뮬레이터"
    />
    <title>micarrsim</title>
    <link rel="stylesheet" href="/packages/ui/app-shell.css" />
  </head>
  <body>
    <header class="landing-header">
      <a class="landing-brand" href="/" aria-label="micarrsim 홈">micarrsim</a>
      <div class="status-row" aria-label="실행 환경">
        <span class="status-chip" id="webgpu-status">그래픽 장치 확인 중…</span>
        <span class="status-chip status-chip--neutral">파일은 이 기기에서 처리됩니다</span>
      </div>
      <a class="landing-docs" href="/docs/">사용 설명서</a>
    </header>

    <main class="landing-shell">
      <section class="landing-intro" aria-labelledby="landing-title">
        <p class="eyebrow">Microphone array workbench</p>
        <h1 id="landing-title">무엇을 하시겠어요?</h1>
        <p>배열 위치추정을 바로 실행하거나, 평가에 사용할 음원 장면을 먼저 만드세요.</p>
      </section>

      <section class="launcher-grid" aria-label="작업 선택">
        <a class="launcher-card launcher-card--accent" href="/apps/acoustic-camera/">
          <span class="launcher-card__number" aria-hidden="true">01</span>
          <div>
            <p class="launcher-card__kicker">바로 분석</p>
            <h2>Acoustic Camera</h2>
            <p>기본 예제 또는 내 Scene·배열 설정으로 위치추정 결과를 확인합니다.</p>
          </div>
          <span class="launcher-card__action">Camera 열기 →</span>
        </a>

        <a class="launcher-card" href="/apps/dataset-builder/">
          <span class="launcher-card__number" aria-hidden="true">02</span>
          <div>
            <p class="launcher-card__kicker">평가 장면 제작</p>
            <h2>Dataset Builder</h2>
            <p>음원 파일과 이동 경로를 배치해 정답 위치가 있는 Scene을 만듭니다.</p>
          </div>
          <span class="launcher-card__action">새 Scene 만들기 →</span>
        </a>
      </section>

      <details class="workflow-disclosure">
        <summary>내 파일로 분석하는 순서</summary>
        <ol class="workflow-list">
          <li><strong>Scene 제작</strong><span>Builder에서 음원과 위치 지정</span></li>
          <li><strong>파일 보관</strong><span>Scene JSON과 원본 파일을 함께 보관</span></li>
          <li><strong>Camera 입력</strong><span>Scene, 배열, 원본 파일 선택</span></li>
          <li><strong>결과 저장</strong><span>위치 map과 지표를 Result JSON으로 저장</span></li>
        </ol>
        <p class="workflow-note">
          Scene JSON에는 원본 파일이 포함되지 않습니다. 다시 열 때 같은 파일을 선택하면 SHA-256으로
          확인해 연결합니다. <a href="/docs/#asset-reconnect">자세히 보기</a>
        </p>
      </details>
    </main>
    <script type="module" src="/packages/ui/landing.js"></script>
  </body>
</html>