サポーターズVol.5ハッカソンで作ったAI英単語帳アプリ
(2023.0701~0702)
- OpenAIの画像生成AIを利用することにより、印象に残りやすい画像を生成し、英単語と結び付けられる
- 統一感のあるデザイン、アプリアイコン
ハッカソンキックオフから開発を始め、1週間ほど
- HTML/CSS
- JavaScript
- React
- Firebase
- DALL-E(OpenAI画像生成API)
- Slack
- Discord
- git
- Github
- Sourcetree
- Figma
- Mayachiu マネジメント, フロント(React), バックエンド(API, Firebase)
- hashimo000 フロント(React), バックエンド(Firebase)
- R-lilac フロント(React, HTML/CSS)
- mana05-125 デザイン(Figma, Canva), フロント(HTML/CSS)
- デプロイはせず、ローカル環境にて開発
- メンバー間で使用環境が違うため、npmとyarnが混在
- PRベースの開発(ブランチ名は特に指定せず、コミットメッセージは日本語でわかりやすく)
- React
- react-router-dom(画面遷移)
- react-slick(スライド)
- react-loading(ローディングアニメーション)
npm install
または
yarn install
の後
npm start
または
yarn start
(必要なライブラリを適宜インストールしてください)
プロジェクトファイル下に.envを作成し、以下の用に管理
REACT_APP_apiKey = "apiKey"
REACT_APP_authDomain = "authDomain"
REACT_APP_projectId = "projectId"
REACT_APP_storageBucket = "storageBucket"
REACT_APP_messagingSenderId = "messagingSenderId"
REACT_APP_appId = "appId"
REACT_APP_OPENAI ="Bearer OpenAIAPIKey"
以下のような形で画像生成を利用できます
curl --location 'https://api.openai.com/v1/images/generations' \
--header 'Content-Type: application/json' \
--header 'Authorization: Bearer APIKey' \
--data '{
"prompt": "English Word",
"n": 1,
"size": "256x256"
}'
レスポンスは5秒ほどで返ってきます(本アプリの条件下)
{
"created": UnixTime,
"data": [
{
"url": "ImageUrl"
}
]
}
ImageUrlの画像について、生成から1時間ほどでリンク切れになる
- DALL-Eで取得した画像をFirebase Storageに保存しようとしたところ、CORSエラーになり、保存できなかった。→サーバーの勉強が必要
- エラーハンドリングが不十分
https://docs.google.com/presentation/d/1kMNadcgf8JEP3iSCMR5CO7vQGofNeZEWpe5XsKcyQcE/edit?usp=sharing