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>
    <main class="landing-shell">
      <section class="hero-card">
        <p class="eyebrow">192-channel acoustic camera laboratory</p>
        <h1>micarrsim</h1>
        <p class="hero-copy">
          합성 음향 장면을 만들고, 마이크 배열의 자유음장 응답과 DAS 음향 영상을 같은 조건에서
          비교합니다.
        </p>
        <div class="status-row" aria-label="실행 환경">
          <span class="status-chip" id="webgpu-status">그래픽 장치 확인 중…</span>
          <span class="status-chip status-chip--neutral">로컬 처리 · 외부 업로드 없음</span>
        </div>
      </section>

      <section class="workflow-card" aria-labelledby="workflow-title">
        <div class="workflow-card__heading">
          <div>
            <p class="eyebrow">Local workflow</p>
            <h2 id="workflow-title">파일이 흐르는 방식</h2>
          </div>
          <a href="/docs/#asset-reconnect">왜 원본을 다시 선택하나요?</a>
        </div>
        <ol class="workflow-list">
          <li><strong>Dataset Builder</strong><span>음원과 위치 만들기</span></li>
          <li><strong>Scene JSON + 원본 assets</strong><span>같이 보관하기</span></li>
          <li><strong>Acoustic Camera</strong><span>배열·DAS 실행하기</span></li>
          <li><strong>Result JSON</strong><span>map·지표 저장하기</span></li>
        </ol>
        <p class="workflow-note">
          원본 파일은 JSON에 포함되거나 외부로 업로드되지 않습니다. Camera에서 같은 파일을 다시
          선택하면 SHA-256으로 확인한 뒤 연결합니다.
        </p>
      </section>

      <section class="launcher-grid" aria-label="도구 선택">
        <a class="launcher-card" href="/apps/dataset-builder/">
          <span class="launcher-card__number">01</span>
          <div>
            <h2>Dataset Builder</h2>
            <p>기기 이미지에 음원을 배치하고 ambient를 혼합해 재현 가능한 장면을 만듭니다.</p>
          </div>
          <span class="launcher-card__action">새 Scene 만들기 →</span>
        </a>

        <a class="launcher-card launcher-card--accent" href="/apps/acoustic-camera/">
          <span class="launcher-card__number">02</span>
          <div>
            <h2>Acoustic Camera</h2>
            <p>배열 응답을 계산하고 주파수 대역별 DAS 결과를 ground truth와 비교합니다.</p>
          </div>
          <span class="launcher-card__action">기본 예제로 바로 실행 →</span>
        </a>
      </section>

      <section class="quick-start-grid" aria-label="빠른 시작">
        <article class="quick-start-card">
          <p class="eyebrow">30초 확인</p>
          <h2>설정 없이 첫 결과 만들기</h2>
          <p>Acoustic Camera를 열어 <strong>▶ 기본 예제 실행</strong>을 누르고, 완료되면 <strong>Result JSON</strong>을 저장하세요.</p>
          <a href="/apps/acoustic-camera/">기본 예제 열기 →</a>
        </article>
        <article class="quick-start-card">
          <p class="eyebrow">내 데이터</p>
          <h2>Builder부터 끝까지</h2>
          <p>Scene을 저장한 뒤 Camera에서 <strong>Scene → Array → Experiment → Assets</strong> 순서로 가져오면 참조 오류를 줄일 수 있습니다.</p>
          <a href="/docs/#full-workflow">5분 안내 보기 →</a>
        </article>
      </section>

      <footer class="landing-footer">
        <a href="/docs/">사용 설명서</a>
        <span aria-hidden="true">·</span>
        <a href="/tests/">테스트</a>
        <span aria-hidden="true">·</span>
        <a href="/benchmarks/webgpu-scaling.html">성능 측정</a>
        <span aria-hidden="true">·</span>
        <a href="/docs/execution-plan.md">실행 계획</a>
      </footer>
    </main>
    <script type="module" src="/packages/ui/landing.js"></script>
  </body>
</html>