Beginner’s hack

検索性能

Helpfeelエンジン

フロントエンドで検索を完結させているためほぼ0msで検索可能！

AI検索エンジン

な・な・な・な・な・なんとAIなのに100msで検索できちゃう！！ 全文検索的なAI検索だけでなく、vector検索(Embedding)にも対応！

アーキテクチャ図

CI/CD

github actionsでlint,format,e2eのCIを実行 CDはgithub actionsでmainへのcomiitごとにフロントとバックエンドのモノレポでdocker imageをbuildしdocker hubにpush github actionsからazure web appにdocker hubにpushしたimageを使ってdeploy

Azure App Service

Azureでコンテナを簡単にデプロイできるPaaS モノレポのため、フロントエンドもバックエンドもAzureAppServiceので1つのコンテナ上で動作

AI Search

Azure AI SearchはJSONやTextファイルをChatGPTを使って検索することができるPaaS。ラクスルのQAサイトから取得してきたQA情報をJSON化しAzure blob storageに保存しているので、この情報をAI Searchで検索している。

Azure Blob Storage

Azure Blob StorageにAI Searchで検索するためのQA情報をJSON形式で保存。

スクレイピング

Pythonを用いて、Beautifulsoup,request,seleniumを用いてラクスルのQAサイトをスクレイピング

コンテナ全体像

推し技術

インフラ

Azure AI SearchはQAサイトの中身を検索するだけならある程度の負荷までなんと無料！今回のサイトも無料インスタンスで動いています！（感動_歓喜_雨嵐) しかもなんと速度が100ms！めっちゃ速い！ぬるぬる！

Github Actionsでdocker imageをbuildすることでazure app serviceだけでなく様々なPaaSに簡単にdeployできます

バックエンド

Helpfeelさんありがとうございます。ほぼ書き足さずに動いてます！

フロントエンド

フロントエンドは凝り凝りです．

• HelpfeelさんのラクスルのQAサイトをコピー
  • クエリの検索方法はほとんど丸ごとアイデアを採用させていただきました．ありがとうございます．全力でコピーさせていただきました．
• Storybookを用いたアクセシビリティテストで，誰もが使いやすいサイトへ
  • そもそもFAQは，サービスを上手く使えないユーザの方のための説明のサイトです．そのため，アクセシビリティに対応してより多くの人がサービスを利用できるように努力しました． アクセシビリティはHTML，CSSでほとんど保証することができます．そのため，UIのテストをするStorybookはそのテストに最適です．これを機にみなさんもアクセシビリティに取り組んでみてはいかがでしょう．
• ナイトモード対応で目に優しい
  • これで昼でも夜でも，明るい場所でも暗い場所でも見やすいサイトにしました．
• キーボードのみで操作可能
  • Tabキーで簡単に移動，検索できます．
• カスタムフックを用いて，ロジックを完全分離
  • 今後の拡張に向けてフロントエンドのファイル構成を整理しました．
• シームレスな検索体験で，誰でも使いやすいFAQへ
  • AI検索といったものはたくさん世の中にありますが，既存のHelpfeelのアプリの検索を陰から支援する形で生成AIを利用しました．既存の素晴らしい検索エンジンの体験を損なうことなく新たな機能を足すことに成功しました．