51
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

こちらです👇

スクリーンショット 2025-01-13 20.58.19.png

最初にメールアドレスだけ登録すれば、誰でも無料で使えます。

1/14追記:現在、想定以上のアクセスをいただいており、初回登録時のCognitoのメール送信上限(一日50通)をオーバーして確認メールが届かない事象が発生しているようです。一日待つと復活しますので、しばしお待ちください🙏

(Amazon SESの導入を試みたのですが、利用承認がおりず諦めました…)

なぜ作ったの?

日本では、AWSのパートナー企業(AWS Pertner Network, 通称APNの所属企業)向けにJapan AWS Top Engineerという表彰プログラムが存在します。

昨年は200名ほどのエンジニアが認定されたのですが、2025年度の審査基準として、要求される活動実績の技術レベルが「Level 300以上」と例年よりも格上げされており話題になりました。(前年まではLevel 200以上)

このレベルの基準は以下のように定義されています。

Level 100 : AWS サービスの概要を解説するレベル
Level 200 : トピックの入門知識を持っていることを前提に、ベストプラクティス、サービス機能を解説するレベル
Level 300 : 対象のトピックの詳細を解説するレベル
Level 400 : 複数のサービス、アーキテクチャによる実装でテクノロジーがどのように機能するかを解説するレベル

ただし、自分の技術アウトプットがどの程度のレベルなのか?判断に悩む方も多かったため、こんな声をうけて冬休みの個人開発として作成したのが今回のアプリです。

あくまで上記の評価基準をもとにLLMがレベルを判定するアプリですので、一つの目安として参考程度にお使いいただければと思います。

アプリの使い方

トップページにアクセスすると、サインインを促す画面が表示されます。

スクリーンショット 2025-01-13 21.14.43.png

初回利用の方は、「アカウントを作成」リンクからメールアドレスとパスワードを登録します。

スクリーンショット 2025-01-13 21.16.48.png

サインインできたら、画面上部のテキストボックスにレベル判定したいアウトプットを貼り付けます。技術ブログや登壇資料などを、テキスト形式でコピペして判定ボタンをクリックしてください。

スクリーンショット 2025-01-13 21.20.32.png

少し待つと、推定レベルとその判断理由が表示されます。出力内容について、👍 / 👎 ボタンでフィードバックを送ることができます。

スクリーンショット 2025-01-13 21.21.31.png

「Xでポストする」ボタンを押すと、結果のサマリーを生成して、Xのポスト作成画面に自動で遷移できます。

スクリーンショット 2025-01-13 21.24.46.png

アーキテクチャ

このアプリはAWSで構築しており、生成AIサービス「Amazon Bedrock」を活用しています。

スクリーンショット 2025-01-13 20.56.25.png

  • フロントエンド:Vite + React + Typescript
  • バックエンド:Python(AWS SAMでデプロイ)
  • LLM:Anthropic Claude 3.5 Sonnet v2

AWSのインフラは手動構築なのですが、アプリケーションを更新するたびのデプロイはGitHub Actionsですべて自動化しています。

ソースコードは以下で公開していますので、ご興味ある方はぜひご覧ください。

LLM機能の運用監視にはLangfuseを活用

Langfuseとは、いわば生成AI版のDatadogやNew Relicのようなツールです。

  • トレーシング:LLMへの入出力を区間監視できる
  • プロンプト管理:プロンプトテンプレートをコードから切り離してメンテできる
  • 評価スコア記録:ユーザーのフィードバックをトレースに記録できる
  • コスト管理:LLMの推論にかかった費用を可視化できる

上記以外にも色々な機能があります。

スクリーンショット 2025-01-13 21.33.40.png

※有名な類似ツールに、LangChain社が提供しているLangSmithというSaaSもあります。

今回利用しているLangfuseは、OSSとして公開されており自分のAWS環境などにデプロイして利用することができるため、外部のSaaSを契約せずに、エンタープライズな案件でもセキュリティ・ガバナンス面を社内説明しやすいというメリットがあります。

私も案件でよく利用するのですが、今回はこのLangfuseのSaaS版を利用しています。

👇トレース一覧

スクリーンショット 2025-01-13 21.42.04.png

👇トレースの詳細

スクリーンショット 2025-01-13 21.40.54.png

LLMの課金で破産してしまわないか確認したり、みんながどんな風に使ってくれているのか見ることができるため、アプリのブラッシュアップにも活かすことができています。

(例えば、AWS以外の技術に関する入力を試す方もちらほらいたため、その場合は判定対象外となるようプロンプトを更新したりしました)

※なお、Langfuseは最近バージョン3に更新され、アーキテクチャが大きく変わりました。AWS上でセルフホストして使いたい方向けに、同僚の @tsubone がTerraformテンプレートを公開していますので、ぜひ活用ください。

技術面で工夫したこと

フロントエンド

LLMを使ったアプリは、PythonのフレームワークStreamlitを使えば実装が簡単ですが、WebSocketを利用可能なインフラが必要で、AWSの場合はECSでコンテナを常時稼働させる必要があります。今回はコスト節約のため、慣れないReactを用いたフロントエンドの開発に挑戦し、S3を用いてサーバーレス化しました。

なお、UIライブラリはClaudeに勧められたshadcn/uiを使っています。簡単に書けて、モダンな見栄えになるので気に入っています。

ユーザー認証

Cognitoでユーザー認証を設けることで、意図せぬ大量利用を防いでいます。UIは日本語化しています。バックエンドのAPIも、Amazon API GatewayのオーソライザーでCognitoユーザープールの認証を通しています。

なお一日あたりのメール送信数に50というハードリミットがあり、アプリ公開初日は大人気のためカンストしてしまいました🤣

プロンプト管理

バックエンドのLambdaは判定用とツイート生成用の2つあり、いずれも最新のプロンプトテンプレートをLangfuseから都度取得しています。

ただし、プロンプトの更新はGitで差分管理したかったため、テキストファイルをGitへプッシュするとLangfuseのAPI経由でSaaS側にも登録されるよう、GitHub Actionで更新スクリプトを発火させるようにしています。

開発環境とCI/CD

テストがしやすいように、開発環境(dev)と本番環境(prd)を分けています。Amazon Cognitoのみ共用していますが、他のAWSリソースは2つずつ準備してテストに利用しています。ローカル環境を使うと環境差分の吸収が大変なので、いずれもクラウド上に配置しました。

なお、アプリを更新した際、devブランチにコードをpushすると開発環境へ自動デプロイされ、mainブランチにマージされると本番環境へ自動デプロイされるよう、GitHub Actionsでワークフローを構築しています。環境変数もローカルに持つ必要がないため、楽ちんです。

今後の野望

バグや不具合はGitHubのIssuesで、また追加したい機能のマイルストーンなどはGitHub Projectで公開管理しています。

機能面では、今のところテキスト形式の入力にしか対応していないので、URLを入力できる機能を実装しようと考えています。

また、インフラの構築が手動のため、AWS CDKもしくはTerraformへ移行しようと画策しています。

もし追加してほしい機能がありましたら、コメント欄やXなどでお気軽に教えてください!

おまけ

このアプリの開発には、話題のClineをフル活用しています。まだ使ったことのない方は、以下記事をぜひご覧ください。

51
31
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
51
31

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?