研究室でデータセットを公開してダウンロードできるようにしつつ、何人がダウンロードしたかなどの情報も記録したいというニーズがあり、このプロジェクトが生まれました。
CITE Lab MoCap and Humanoid Group Download Center
ダウンロード画面
管理画面
最初は慣れている FastAPI + SQLite で実装しようと思い、以下のプロンプトをそのまま AI（Claude 3.7 Sonnet）に投げたところ、かなり使えるものが出てきました。主に2つのバグがありました。1つは SMTP メール送信で暗号化が使われていなかったこと、もう1つは NJU Box のバージョンが古すぎて、結局手動で対応する Seafile API を探す必要があったことです。
fastapi、JavaScriptなどの技術スタックを使って、研究室のダウンロードセンターのウェブページを構築してください。ウェブページには以下の機能を含める必要があります：
1. バックエンドはseafile APIを使ってリポジトリ内のファイル一覧を取得し、フロントエンドの1行目にドロップダウンで各ファイルを表示し、ユーザーが対応するファイルを選択できるようにする。
2. フロントエンドの2行目ではユーザーがメールアドレスを入力する必要があり、教育用メールアドレスまたは学術用メールアドレスであることが必須。入力欄の右側に確認コード送信ボタンがある。ユーザーがクリックすると、バックエンドはsmtpサーバーを使って確認コードをユーザーのメールアドレスに送信する。フロントエンドとバックエンドの両方でメールアドレスの形式が正しいかを判断し、メール送信は各IPアドレスにつき1分に1回のみ可能とする。
3. フロントエンドの3行目ではユーザーが確認コードを入力する必要がある。
4. 4行目では学校/所属機関の入力を求める。
5. 5行目では氏名の入力を求める。
6. すべての入力欄は空欄不可とし、フロントエンドとバックエンドの両方で判定を行い、ユーザーの悪意ある送信を防ぐ。
7. 最後の行に送信ボタンがあり、クリック後、バックエンドが確認コードが正しいと判断した場合、seafile APIを使って対応するファイルの共有リンクを生成し、そのリンクをユーザーのメールアドレスに送信すると同時に、フロントエンドは自動的にそのリンクに遷移する。
8. 同時にバックエンドはsqliteデータベースに1件のレコードを挿入し、レコードにはファイル名、メールアドレス、学校/所属機関、氏名、共有リンク、送信時刻を含める。
9. インターフェースは英語を使用する。
10. ページはできるだけ美しくデザインする。
11. 最後にdockerfileを書いて、プロジェクト全体を1つのイメージにパッケージングする。
しかし、この方法では一方でインターフェースが平凡で、もう一方で多くの機能の拡張が不便だったため、より先進的な Next.js などを使ってこのプロジェクトをリファクタリングしようと思いました。しかし、AI に既存のコードを参考にリファクタリングさせるにしても、最初からプロンプトを投げて作らせるにしても、どちらも出来が悪く、実行時のバグではなくコンパイルエラーさえ出る始末でした。最新の AI IDE もいくつか試しましたが、満足のいく結果は得られませんでした。
結局、人力に頼るしかありませんでした。私は丸一日かけてまずフレームワークを構築し、その後、以前 fastapi で実装したプロジェクトをファイルごとに AI に投げて、現在の Next.js プロジェクトの対応する機能を参考にして完成させるよう指示しました。そして、少しずつ小さな機能改善を実装させ、手動でバグ修正を行いながら、最終的に上の2つの画像のような結果が得られました。
現在の機能：
- 技術スタック：Next.js + TypeScript + Tailwind CSS + Ant Design + Seafile API + MongoDB + Redis
- フロントエンドはダウンロード画面を提供し、ユーザーはファイルを選択してダウンロードできる（複数選択対応）。
- 教育/学術用メールアドレスのみダウンロード可能で、メールアドレスの認証が完了してからダウンロードできる。
- ダウンロード利用規約を提供し、読んだ後に続行する必要がある。
- バックエンドはユーザーのダウンロード履歴を記録し、ユーザー名、ファイル名、ダウンロード時刻などの情報を含み、閲覧用の管理画面を提供する。
- ファイルは Seafile (NJU Box) に保存されており、このプロジェクトはユーザーにダウンロード用の一時リンクのみを生成し、ファイルのリンクを直接露出することを避け、サーバーのトラフィックを節約する。
- Seafile 内の readme.md ファイルを解析し、ダウンロード画面に表示して、ファイルの説明とする。
- サブパスの設定に対応し、既存のウェブサイトにデプロイしやすくしている。
- ダークモード対応。
- メールアドレスに基づいて、AI で組織名を解析する。
@阙：「使いにくいAIなんていない、ただ粘り強さが足りない人間がいるだけ。」