aipictors / aipictors

Webサイト

Remix / shadcn/ui / GraphQLなどで構成されたAipictorsの新しいWebサイト

⚙️ 環境構築

1. bun の環境を構築

開発にはbunが必要です。環境に応じてインストールしてください。

# Linux / macOS / WSL2
curl -fsSL https://bun.sh/install | bash

Windows の場合はこちら。

powershell -c "irm bun.sh/install.ps1|iex"
# or
winget search --id  Oven-sh.Bun

2. エディタを整備する

エディタは、Visual Studio Codeを推奨しています。更に推奨されている拡張機能をインストールしてください。

拡張機能は以下のコマンドでまとめてインストールすることもできます。

bun run init:vscode

コマンド「code」がインストールされいない場合は VSCode でコマンドパレットを開き以下を実行してください。

> Shell Command: Install 'code' command in PATH

コマンドパレットは以下のショートカットで開くことができます。

shift + command + P

再読み込みを要求された場合は VSCode の再起動を行ってください。 Visual Studio Code の設定については、settings.jsonを参照してください。

3. 開発環境を起動する

1. 依存関係をインストールする

bun i

3. 開発サーバーを起動する。

bun run dev

3. アクセスする

localhost:3000からアクセスできます。

3. コミット前に

下記を実行してビルドエラーが起きないことを確認する。

bun run check

📙 ドキュメント

リポジトリ内の README を閲覧する。

README 以外にも、docsディレクトリにドキュメントがあります。

• Biome について
• lefthook について
• 単体テストについて

📣 不具合 / ご意見ご要望

不具合の報告はこちらから(GitHub アカウントが必要)。 その他、ご意見ご要望はDiscordで受け付けています。

aipictors's Issues

スタンプをダウンロードできるようにする

アプリのお問い合わせのページを追加する

アプリのストアに掲載するお問い合わせページが必要みたい。

https://beta.aipictors.com/app/support

生成履歴を追加する

お問い合わせ機能をスレッド形式にする

Discussed in https://github.com/orgs/aipictors/discussions/70

お問い合わせ内容ごとにスレッドを作成して内容が混じらないようにする。

^{Originally posted by Katsuyuki-Karasawa December 3, 2023}
このmilestoneと(beta)/supportを見ていたのですが、そもそも問い合わせページがチャット形式である必要があるのかという部分が気になりました。

https://github.com/aipictors/aipictors/milestone/7

個人的にはチャット形式にするのであれば、Zendeskなどに一任してしまうほうがよいのではないのかなと感じています。

一般的なフォーム形式にするのであれば、幸い、shadcnにはAuto Formがあるので、これで比較的実装するべき部分を減らせるのではないかなと感じています。
https://zenn.dev/kaz_z/articles/zod-auto-form

メッセージを送受信できるようにする

Zennのマークダウンを使用する

どのような問題がありますか？

マークダウンのスタイルの調整が面倒に感じる。

どうすれば良いですか？

Zennと同じCSSを使うのがいいかもしれない。

https://www.npmjs.com/package/zenn-markdown-html

お題の作品一覧を表示する

スタンプを作成できるようにする

検索できるようにする

コレクションの詳細を表示する

コレクションの一覧を表示する

トップページを追加する

どのような問題がありますか？

どうすれば良いですか？

LoRAの選択機能を追加する

タグをミュートできるようにする

英語に対応したページを作成する

pnpmへの移行

メリット

• 高速な依存関係のインストール
• プロジェクトのバージョンの一貫性
• CI/CDパフォーマンスの向上
• pnpmの強制
  • これにより、yarnやnpmなどではエラーになるので、環境を共通化できる

{
    "scripts": {
        "preinstall": "npx only-allow pnpm"
    }
}

移行に伴い障害が発生する可能性のあるもの

• プロジェクトの互換性
  • とくにバックエンド寄り(GraphQLあたり)
• スクリプトの調整
  • Actions回り
• docsの修正

必要なテスト

• 単体テスト / 結合テスト
• 依存関係の一貫性の維持のチェック
• パフォーマンステスト
  • 移行後のビルドとテストのパフォーマンスの評価
  • npmとの比較

小説の一覧を表示する

どのような問題がありますか？

どうすれば良いですか？

マイスタンプを公開できるようにする

小説の詳細を表示する

どのような問題がありますか？

どうすれば良いですか？

インプレッションが表示されるようにする

コラムの詳細を表示する

どのような問題がありますか？

どうすれば良いですか？

お問い合わせフォームを作成する

Discussed in https://github.com/orgs/aipictors/discussions/70

お問い合わせフォームを作成し解決に必要な情報を収集してやり取りを減らす。

^{Originally posted by Katsuyuki-Karasawa December 3, 2023}
このmilestoneと(beta)/supportを見ていたのですが、そもそも問い合わせページがチャット形式である必要があるのかという部分が気になりました。

https://github.com/aipictors/aipictors/milestone/7

個人的にはチャット形式にするのであれば、Zendeskなどに一任してしまうほうがよいのではないのかなと感じています。

一般的なフォーム形式にするのであれば、幸い、shadcnにはAuto Formがあるので、これで比較的実装するべき部分を減らせるのではないかなと感じています。
https://zenn.dev/kaz_z/articles/zod-auto-form

複数ファイルの画像投稿対応

どの機能に関する不具合ですか？

• 投稿

どのような不具合が発生しましたか？

複数ファイルの投稿対応

NewImageForm.tsx#handleUpload
https://github.com/aipictors/aipictors/blob/main/app/%5Blang%5D/(main)/new/image/_components/NewImageForm.tsx#L171C38-L171C51

空のメッセージを送信できないようにする

空のメッセージが送信できてしまう。ボタンをクリック出来ないようにする。

コレクションを作成できるようにする

リクエストできるようにする

キーワード機能を追加する

Biomeを導入する

どのような問題がありますか？

ESLintが遅い。

どうすれば良いですか？

Biomeに切り替える。

https://biomejs.dev/

画像生成LITEを作成する

どのような問題がありますか？

どうすれば良いですか？

Add support for English

from https://github.com/orgs/aipictors/discussions/1

英語のページを追加する。

https://bata.aipictors.com/en/users/1

シリーズを作成できるようにする

プロフィールを更新できるようにする

Next.js 14で追加された機能を確認し、適用する

Next.js 14まとめ

• Turbopack
• 部分的プリレンダリング(Partial Prerendering)
• Server Action

タグの詳細を表示する

作品の詳細を表示する

モデルの選択機能を追加する

ランキングが表示されるようにする

ファイルサイズの計算表記の改善

どのような問題がありますか？

最大ファイルサイズチェックを(#60)で追加しました。
→結果　最大ファイルサイズ(32MB)の定義が複数に分かれてしまいました。

aipictors/app/[lang]/(main)/new/image/_components/NewImageForm.tsx

Line 43 in 78d4845

const maxSize = 32 * 1024 * 1024

aipictors/app/[lang]/(main)/new/image/_components/NewImageForm.tsx

Line 278 in 78d4845

1枚32MB以内、最大200枚、動画は32MB、12秒まで

どうすれば良いですか？

変換パッケージで計算すると良いかなと。

• filesize
  https://www.npmjs.com/package/filesize

var filesize = require("filesize")
const size = filesize.partial({spacer: "", standard: "jedec"});
size(32 * 1024 * 1024); //"32MB"

• byte-size
  https://www.npmjs.com/package/byte-size
  ※出力がMiB表記になるので、ユーザーが見慣れないという影響が発生します。
  表記としては、MiB表記が正しいです。

var byteSize = require("byte-size")
byteSize(32 * 1024 * 1024, {units: 'iec', precision : 0})//ByteSize {value: "32", unit: "MiB", long: "mebibytes"}

• bytes
  https://www.npmjs.com/package/bytes

※国際化未対応（localeオプションなし）

var bytes = require("bytes")
bytes.format(32 * 1024 * 1024);//"32MB"

Cloudflare Fontsを使用してフォントの読み込みを高速化する

どのような問題がありますか？

フォントの読み込みが遅い場合がある？

どうすれば良いですか？

Cloudflare Fontsというものがあるらしい。

プロンプトの補完機能を追加する

• テキストエリアの高さを固定する

メッセージを改行できない

シリーズの詳細を表示する

作品を投稿できるようにする

シリーズの一覧を表示する

お知らせを表示する

ユーザをミュートできるようにする

VSCodeで単体テストをワンクリックで実行する

どのような問題がありますか？

VSCodeで単体テストがワンクリックで行えない。

どうすれば良いですか？

vitest公式の拡張機能を追加する。

画像を送信できるようにする

作品一覧を表示する

コラムの一覧が表示されるようにする