Zenn
🌤️

AI模擬面接アプリ『Skymock AI』をリリースしました

2024/11/25に公開
Next.js
Python
React
個人開発
LLM
tech

1. はじめに

IT エンジニア向けの模擬面接アプリ「Skymock AI」をリリースしました。
サインイン不要で、誰でも気軽に利用できます。
https://skymockai.com/

Skymock AI は、職種に特化したリアルタイムの模擬面接ができるサービスです。
本記事では、Skymock AI の機能概要、技術構成について紹介させていただきます。

2. 機能概要

Skymock AI は、現在以下の機能を提供しています。

  • リアルタイム模擬面接: リアルタイムの音声対話を通じて、模擬面接が可能です。現在は以下の職種の面接をサポートしています。
    • フロントエンドエンジニア
    • バックエンドエンジニア
    • フルスタックエンジニア
    • SRE
    • ネイティブアプリエンジニア
    • 機械学習エンジニア
  • 面接履歴の保存: 全ての模擬面接の内容は保存され、ユーザーはいつでも振り返りができます。
  • 面接のフィードバック: 面接後、面接内容をもとに、ユーザーにフィードバックを提供します。良かった点と改善点について具体的なフィードバックを確認することができます。
  • 多言語対応: 現在は英語と日本語に対応しています。

3. 技術構成

フロントエンド

フロントエンドには、Next.js の App Router を採用しています。

  • useSWR: React Hooks を用いたデータフェッチングライブラリで、API からのデータ取得やキャッシュ管理を効率的に行うことができます。
  • React Hook Form: フォームの state を効率的に管理し、バリデーションを容易にするためのライブラリです。フォームの状態管理、入力値の検証、送信処理などをシンプルに実装できます。
  • Zod: 型安全なスキーマバリデーションライブラリで、フォーム入力や API レスポンスのデータ検証に使用しています。
  • shadcn/ui: Headless UI である RadixUI と TailwindCSS を基盤とした UI ライブラリです。shadcn/ui は npm の依存関係に追加されず、コンポーネントをローカルにコピーします。そのため、UI の拡張が容易にできます。
  • Framer Motion: UI にアニメーション効果を簡単に追加できるライブラリです。
  • Babylon.js: 高度な 3D グラフィックスを実現するためのライブラリで、面接官のアバター表示などに使用しています。WebGL 系のライブラリを触ったことがなかったので、使用してみました。

バックエンド

バックエンドは、Python Web フレームワークである FastAPI を採用しています。
使用している主なライブラリは以下のとおりです。

  • Pydantic: Python でのデータバリデーションと設定管理を行うためのライブラリです。FastAPI との親和性が高く、API リクエストやレスポンスのデータモデル定義、バリデーション、シリアライズに活用しています。
  • SQLAlchemy: Python の ORM (Object Relational Mapper) ライブラリです。
  • Alembic: SQLAlchemy と連携するデータベースのマイグレーションツールです。データベーススキーマの変更を管理し、バージョン管理システムと同様に、スキーマの変更履歴を記録、適用、ロールバックできます。

LLM 周り（Groq）

質問文の生成と面接のフィードバックを生成するために、LLM を使用しています。LLM の API には Groq を使用しています。
Groq は、元 Google エンジニアの Jonathan Ross が設立した企業で、大規模言語モデル（LLM）の推論を高速化するために設計された独自の LPU（Language Processing Unit）という半導体チップを使用して高速かつ低コストで LLM を提供しています。
https://groq.com/

Groq では多数のモデルを提供しているため、ユースケースに合わせて最適なモデルを選択できます。また、API の利用料金もリーズナブルで、コストを抑えながら高品質な LLM を利用できます。
https://console.groq.com/docs/models

音声周りの実装

Skymock AI の音声ボットは、Realtime API ではなく、LLM と
TTS（Text-to-Speech）と STT（Speech-to-Text）をを組み合わせて実装してコストを抑えています。

TTS (Text-to-Speech)

AI 面接官の音声生成には、OpenAI の TTS モデルを採用しています。高品質な音声合成と自然なイントネーションにより、ユーザーにリアルな面接体験を提供します。複数の音声スタイルから選択可能で、面接官のキャラクター設定に合わせて最適な音声を適用できます。

STT (Speech-to-Text)

ユーザーの音声認識には、Groq の Whisper API を採用しています。Groq の Whisper API は、OpenAI の Whisper と比較して、低コストで低レイテンシーの音声認識を提供しており、リアルタイム性と費用対効果のバランスに優れています。
STT API の性能比較は以下の Benchmarking がとても参考になりました。
https://artificialanalysis.ai/speech-to-text/models/whisper

ブラウザ上での音声認識

ブラウザ上での音声の開始と終了の検出には、vad という OSS を使用しています。
https://github.com/ricky0123/vad

vad は、VAD (Voice Activity Detection) 技術を用いて、音声信号から音声区間を検出する JavaScript ライブラリです。
マイク利用許可ポップアップの表示、録音の開始、発話状態の検出などの、音声周りの処理をシンプルなインターフェイスで実装できます。

例えば、以下のようにして使用 useMicVAD というフックを呼び出すだけで、音声アクティビティの検出が可能です。

const vad = useMicVAD({
  startOnLoad: true,
  onSpeechEnd: (audio) => {
    const wav = utils.encodeWAV(audio);
    const blob = new Blob([wav], { type: "audio/wav" });
    send(blob);
  },
  positiveSpeechThreshold: 0.6,
  workletURL: "/vad/vad.worklet.bundle.min.js",
  modelURL: "/vad/silero_vad.onnx",
  ortConfig(ort) {
    ort.env.wasm = {
      wasmPaths: {
        "ort-wasm-simd-threaded.wasm": "/vad/ort-wasm-simd-threaded.wasm",
        "ort-wasm-simd.wasm": "/vad/ort-wasm-simd.wasm",
        "ort-wasm.wasm": "/vad/ort-wasm.wasm",
        "ort-wasm-threaded.wasm": "/vad/ort-wasm-threaded.wasm",
      },
    };
  },
});

認証の実装

Auth.js と Firebase Auth を組み合わせて実装しています。

データベース

データベースには、Postgres 互換のサーバーレス DB である Neon を採用しました。
Supabase と迷いましたが、Neon の場合は無料プランでブランチ機能が使用できるため、Neon を採用しました。
有料プランの料金も Neon のほうが Supabase より月 6 ドル安いです。

https://neon.tech/

ホスティング

デプロイ先は、バックエンド・フロントエンドともに Google Cloud の Cloud Run を採用しています。
Cloudflare の Builder Day 2024で、 Node ランタイムで Next.js を実行できるようになったと発表があったので、Cloudflare を使用したかったのですが、Firebase Admin SDK のビルドでエラーが発生したため、安定？の Cloud Run を使用しました。

CI/CD

CI/CD パイプラインは、GitHub Actions と Cloud Build を使用しています。
GitHub Actions は、コードの変更をトリガーとして、ビルド、テスト、デプロイなどの自動化されたタスクを実行します。一方、Cloud Build では、コンテナイメージのビルド、テスト、デプロイを実行しています。
シークレットの管理には、Google Secret Manager を使用しています。

デプロイの流れは以下のとおりです。

  1. PR のマージ: 開発ブランチから main ブランチに Pull Request がマージされると、GitHub Actions が起動し、Release Please ワークフローが実行されます。Release Please は、セマンティックバージョニングに基づいて、自動的にリリース用の Pull Request を生成します。この PR には、バージョン番号の更新、CHANGELOG の更新などが含まれます。
  2. リリース PR のマージ: リリース PR を main ブランチにマージすると、Cloud Build のトリガーが起動します。
  3. ビルドとデプロイ: Cloud Build では、Dockerfile を基に最新のコードをビルドし、コンテナイメージを生成します。ビルドプロセスでは、シークレットマネージャーから認証情報を取得して、環境変数に設定します。生成されたコンテナイメージは、Cloud Run にデプロイされます。

その他

  • Favicon の設定:
    ウェブサイトのアイコンを設定するために、RealFaviconGenerator を使用しました。さまざまなデバイスやブラウザに対応したファビコンを簡単に生成できます。

https://realfavicongenerator.net/

  • リリース PR の作成:
    リリース PR の作成には、Release Please を使用しています。Release Please は、セマンティックバージョニングに基づいて、自動的にリリース用の Pull Request を生成します。この PR には、バージョン番号の更新、CHANGELOG の更新などが含まれます。
    地味に便利なので、個人的に割と重宝しています。

https://github.com/googleapis/release-please

5. まとめ

今回は、IT エンジニア向けの模擬面接アプリ「Skymock AI」について紹介しました。
現在は必要最低限の機能のみ実装しているため、今後は、機能や職種の拡充を行っていけたらと考えてます。
フィードバックやご意見があれば、以下の DM に連絡いただけると幸いです :bow:

https://x.com/_takigon

Discussion