Reactで機械学習APIを使ったUIを実装してみた

機械学習モデルをAPIとして実装した後、

「ユーザーが実際に利用できる形にするためにはUIが必要である」と感じ、

フロントエンドの実装に取り組みました。

Reactを用いてフロントエンドを実装し、

画像アップロードから推論結果表示までの一連の流れを構築しました。

また、FastAPIで構築したAPI（POST /predict）と連携し、

画像を送信すると予測結果（ラベル・信頼度）を取得できるシステムを実装しました。

APIとの連携においては、リクエスト形式やレスポンス処理の設計に苦労しました。

また、エラー発生時の処理やユーザーへのフィードバックの重要性を実感しました。

今回の経験を通して、機械学習モデルは単体で完結するものではなく、

ユーザーが実際に利用できる形で提供することの重要性を学びました。

フロントエンドとバックエンドの連携を通じて、

実際のサービス開発の流れを理解することができました。

今後は、UI/UXの改善やエラーハンドリングの強化に加え、

開発環境の効率化を目的としてDockerの導入にも取り組みたいと考えています。

GitHub:

https://github.com/hajimoo/defect-detection-frontend