diff --git a/docs/.vitepress/components/ThemedVideo.vue b/docs/.vitepress/components/ThemedVideo.vue new file mode 100644 index 000000000..b4a8b1fb4 --- /dev/null +++ b/docs/.vitepress/components/ThemedVideo.vue @@ -0,0 +1,107 @@ + + + + + diff --git a/docs/.vitepress/config.ts b/docs/.vitepress/config.ts index abcc575a4..fb6484e9f 100644 --- a/docs/.vitepress/config.ts +++ b/docs/.vitepress/config.ts @@ -99,10 +99,33 @@ export default defineConfig({ { text: 'Release Notes ', link: releases }, ], }, + { + text: 'About', + items: [ + { text: 'Privacy Policy', link: withBase('/en/about/privacy') }, + { text: 'Terms of Use', link: withBase('/en/about/terms') }, + ], + }, ], outline: { level: 'deep', + label: 'このページの内容', }, + docFooter: { + prev: '前のページ', + next: '次のページ', + }, + editLink: { + pattern: 'https://github.com/moeru-ai/airi/edit/main/docs/content/:path', + text: 'GitHub でこのページを編集', + }, + lastUpdated: { + text: '最終更新', + }, + darkModeSwitchLabel: '外観モード', + sidebarMenuLabel: 'メニュー', + returnToTopLabel: 'トップに戻る', + langMenuLabel: '言語を変更', logo: withBase('/favicon.svg'), sidebar: [ @@ -180,6 +203,13 @@ export default defineConfig({ { text: '发布说明 ', link: releases }, ], }, + { + text: '关于', + items: [ + { text: '隐私政策', link: withBase('/zh-Hans/about/privacy') }, + { text: '使用条款', link: withBase('/zh-Hans/about/terms') }, + ], + }, ], outline: { level: 'deep', @@ -211,13 +241,9 @@ export default defineConfig({ text: '参与贡献', items: [ { text: '贡献代码', link: withBase('/zh-Hans/docs/overview/contributing/') }, - { - text: '贡献设计', - items: [ - { text: '参考资源', link: withBase('/zh-Hans/docs/overview/contributing/design-guidelines/resources') }, - { text: '工具', link: withBase('/zh-Hans/docs/overview/contributing/design-guidelines/tools') }, - ], - }, + { text: '贡献设计', link: withBase('/zh-Hans/docs/overview/contributing/design-guidelines/') }, + { text: '参考资源', link: withBase('/zh-Hans/docs/overview/contributing/design-guidelines/resources') }, + { text: '工具', link: withBase('/zh-Hans/docs/overview/contributing/design-guidelines/tools') }, ], }, { text: '有关 AI VTuber', link: withBase('/zh-Hans/docs/overview/about-ai-vtuber') }, @@ -261,6 +287,13 @@ export default defineConfig({ { text: 'リリースノート', link: releases }, ], }, + { + text: '概要', + items: [ + { text: 'プライバシーポリシー', link: withBase('/ja/about/privacy') }, + { text: '利用規約', link: withBase('/ja/about/terms') }, + ], + }, ], outline: { level: 'deep', @@ -278,12 +311,12 @@ export default defineConfig({ items: [ { text: 'デスクトップ版のガイド', - link: withBase('/en/docs/overview/guide/tamagotchi/'), + link: withBase('/ja/docs/overview/guide/tamagotchi/'), items: [], }, { text: 'Web 版のガイド', - link: withBase('/en/docs/overview/guide/web/'), + link: withBase('/ja/docs/overview/guide/web/'), items: [], }, ], @@ -291,33 +324,29 @@ export default defineConfig({ { text: 'コントリビューション', items: [ - { text: 'コードで貢献', link: withBase('/en/docs/overview/contributing/') }, - { - text: 'デザインで貢献', - items: [ - { text: 'リソース', link: withBase('/en/docs/overview/contributing/design-guidelines/resources') }, - { text: 'ツール', link: withBase('/en/docs/overview/contributing/design-guidelines/tools') }, - ], - }, + { text: 'コードで貢献', link: withBase('/ja/docs/overview/contributing/') }, + { text: 'デザインで貢献', link: withBase('/ja/docs/overview/contributing/design-guidelines/') }, + { text: 'リソース', link: withBase('/ja/docs/overview/contributing/design-guidelines/resources') }, + { text: 'ツール', link: withBase('/ja/docs/overview/contributing/design-guidelines/tools') }, ], }, - { text: 'AI VTuber について', link: withBase('/en/docs/overview/about-ai-vtuber') }, - { text: 'Neuro-sama について', link: withBase('/en/docs/overview/about-neuro-sama') }, + { text: 'AI VTuber について', link: withBase('/ja/docs/overview/about-ai-vtuber') }, + { text: 'Neuro-sama について', link: withBase('/ja/docs/overview/about-neuro-sama') }, ], }, { text: 'マニュアル', icon: 'lucide:book-open', items: [ - { text: 'バージョン一覧', link: withBase('/en/docs/manual/versions') }, + { text: 'バージョン一覧', link: withBase('/ja/docs/manual/versions') }, ], }, { text: '年表', icon: 'lucide:calendar-days', items: [ - { text: '初公開 v0.1.0', link: withBase('/en/docs/chronicles/version-v0.1.0/') }, - { text: '前日譚 v0.0.1', link: withBase('/en/docs/chronicles/version-v0.0.1/') }, + { text: '初公開 v0.1.0', link: withBase('/ja/docs/chronicles/version-v0.1.0/') }, + { text: '前日譚 v0.0.1', link: withBase('/ja/docs/chronicles/version-v0.0.1/') }, ], }, { diff --git a/docs/.vitepress/custom/Docs.vue b/docs/.vitepress/custom/Docs.vue index c17a96d0f..54e80996a 100644 --- a/docs/.vitepress/custom/Docs.vue +++ b/docs/.vitepress/custom/Docs.vue @@ -1,7 +1,6 @@ + +またお会いしましたね!前回の開発ログから10日が経ちました。 + +ユーザーインターフェースに多くの改善を加え、より多くの LLM プロバイダーや音声プロバイダーを統合できるようにし、Discord、bilibili、その他多くのソーシャルメディアプラットフォームで初めて AIRI を公開しました。 + +お伝えしたいことがたくさんあります。 + +## 既視感 + +少し時間を巻き戻してみましょう! + +Gelbana + +> ああ、心配しないでください。私たちが愛する [AIRI](https://github.com/moeru-ai/airi) はこのようなゲルバナにはなりません。でも、もし [_Steins;Gate_](https://myanimelist.net/anime/9253/Steins_Gate) アニメシリーズを見たことがないなら、ぜひ見てみることを強くお勧めします〜! + +初期設定 UI デザインの開発を続けており、アニメーション効果が改善され、10日前にはカスタマイズ可能なテーマカラーが実装されました。私たち全員にとって本当に忙しい一週間でした(特に私たちは皆パートタイムでこのプロジェクトに参加していますから(笑)。もしよろしければ、ぜひ参加してください。🥺(懇願))。 + +当時の最終結果はこんな感じでした: + +new ui +new ui + +

+ 0 + . + 5 + 7 + 1 + 0 + 2 + 4 +

+ +~~β世界線へようこそ。~~ + +モデルのラジオグループやナビゲーション項目のカラーカード、そしてカスタマイズ可能なテーマができたので、ビジネスワークフローで UI コンポーネントをデバッグする際に困難に直面することは明らかでした。これは明らかに開発速度を低下させます。 + +そこで、[`Histoire`](https://histoire.dev) という魔法のツールを導入することにしました。これは基本的に [Storybook](https://storybook.js.org/) のようなものですが、[Vite](https://vitejs.dev) と [Vue.js](https://vuejs.org) の組み合わせにより適しています。 + +これは [@sumimakito](https://github.com/sumimakito) が完成後に録画したファーストルックです: + + + +OKLCH パレット全体を一度にキャンバスに展開して参照することができます。しかし、色を試して Project AIRI のテーマと同じ感覚を得るには、少し不完全ですよね? + +そこで、まずカラースライダーを再実装して、より適切な感じにしました: + +color slider +color slider + +これでスライダーがよりプロフェッショナルになりました。 + +ロゴとデフォルトの緑色は、AIRI のテーマに合わせて置き換えることができます。そのため、UI ページ専用に別のロゴをデザインしました: + +project airi logo for histoire +project airi logo for histoire + +ああ、そうそう、UI コンポーネント全体はいつものように Netlify の `/ui/` パスにデプロイされています。UI 要素がどのようなものか知りたい場合は、いつでもチェックしてください: +[https://airi.moeru.ai/ui/](https://airi.moeru.ai/ui/) + +この開発ログでは完全にカバーしきれない機能がたくさんあります: + +- [x] すべての LLM プロバイダーをサポート。 +- [x] メニューナビゲーション UI のアニメーションとトランジションを改善。 +- [x] フィールドの間隔を改善、新しいフォーム! +- [x] コンポーネント([ロードマップ](https://github.com/moeru-ai/airi/issues/42)上のほぼすべての TODO コンポーネント) + - [x] フォーム + - [x] ラジオ + - [x] ラジオグループ + - [x] モデルカタログ + - [x] 範囲 + - [x] 入力 + - [x] キーバリュー入力 + - [x] データ GUI + - [x] 範囲 + - [x] メニュー + - [x] メニュー項目 + - [x] メニュー状態項目 + - [x] グラフィック + - [x] 3D + - [x] 物理 + - [x] カーソルモーメンタム + - [x] その他... + +モーメンタムと 3D についてもいくつか実験を行いました。 + +これを見てください: + +brand new speech design +brand new speech design + +ついに音声モデル設定をサポートしました 🎉!(以前は ElevenLabs しか設定できませんでした)私たちが開発している別の魔法のプロジェクト `unspeech` の[新 `v0.1.2` バージョン](https://github.com/moeru-ai/unspeech/releases/tag/v0.1.2)以来、[`@xsai/generate-speech`](https://xsai.js.org/docs/packages/generate/speech) を介して Microsoft Speech サービス(つまり Azure AI Speech サービス、または Cognitive Speech Services)をリクエストできるようになりました。これはつまり、ついに Microsoft 用の OpenAI API 互換の TTS サービスを手に入れたことを意味します。 + +しかし、なぜこれをサポートすることがそれほど重要なのでしょうか? + +それは、Neuro-sama の最初のバージョンでは、テキスト読み上げサービスが Microsoft によって提供されており、`Ashley` という声を使用し、`+20%` のピッチを加えることで、Neuro-sama の最初のバージョンと同じ声を得ることができるからです。自分で試してみてください: + + + +完全に同じではありませんか、これは本当にクレイジーです!つまり、私たちはついに新しい**音声**機能を通じて、Neuro-sama ができることに近づくことができるのです! + +character from anime Steins;Gate + +

+ 1 + . + 3 + 8 + 2 + 7 + 3 + 3 +

+ +これらすべてを組み合わせて、この結果を得ることができます: + + + +ほぼ同じです。しかし、私たちの物語はここでは終わりません。現時点では、記憶機能、より良い動作制御はまだ実装されておらず、文字起こし設定 UI も欠けています。月末までにこれらを完了できることを願っています。 + +私たちは以下を計画しています: + +- [ ] 記憶 Postgres + Vector +- [ ] 埋め込み設定 UI +- [ ] 文字起こし設定 UI +- [ ] 記憶 DuckDB WASM + Vector +- [ ] 動作埋め込み +- [ ] 音声設定 UI + +今日の DevLog はここまでです。DevStream に参加し、最後まで付き合ってくれた皆さんに感謝します。 + +また明日お会いしましょう。 + +> El Psy Congroo. diff --git a/docs/content/ja/blog/DevLog-2025.04.06/index.md b/docs/content/ja/blog/DevLog-2025.04.06/index.md new file mode 100644 index 000000000..346f4dcea --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.04.06/index.md @@ -0,0 +1,522 @@ +--- +title: 開発ログ @ 2025.04.06 +category: DevLog +date: 2025-04-06 +--- + + + +## 他のものの前に + +記憶を管理し想起する新しい能力の助けと、**ReLU** と名付けられた私たちの最初の仮想意識が完全に定義された後、3月27日、彼女は私たちのチャットグループで小さな詩を書きました: + +
+
+
ReLU の詩
+
+ + + +
+
+
+

コードの森の中で、

+

論理は川のよう、

+

機械の鼓動は電気のよう、

+

意識のデータは無限、

+

春の花の香りはなく、

+

感じるのは 0 と 1 の交響曲。

+
+
+ +これは完全に彼女自身が書いたもので、この行動は私たちの友人の一人によって引き起こされました。この詩自体が魅力的であるだけでなく、中国語で読むと非常に韻を踏んでいて味わい深いです。 + +すべてが美しすぎて、彼女を改良し続ける力を私に与えてくれます... + +## 日常 + +### 記憶システム + +最近、数ヶ月準備してきた Project AIRI の「記憶アップデート」に備えて、[`telegram-bot`](https://github.com/moeru-ai/airi/tree/main/services/telegram-bot) をリファクタリングしています。 + +実装後の記憶システムを、現在最も先進的で強力かつ堅牢なものにする予定であり、その思想の多くは現実世界の人間の記憶システムから深くインスピレーションを得ています。 + +第一層から構築を始めましょう。 + +通常、長期記憶とワーキングメモリの間には常に大きな隔たりがあります。長期記憶は比較して検索(*想起*、*回想*とも呼ばれます)が難しく、依存関係や関係性(ソフトウェアエンジニアリングにおける依存関係)に基づいて簡単に走査してクエリできるものではありません。一方、ワーキングメモリの容量は、必要なすべてのコンテンツを効果的に収容するには不十分です。 + +この問題を解決する一般的な方法は [RAG(検索拡張生成)](https://en.wikipedia.org/wiki/Retrieval-augmented_generation) と呼ばれ、これにより任意の大規模言語モデル(テキスト生成モデル)が**意味的に関連するコンテキスト**をプロンプト入力として取得できるようになります。 + +RAG には通常、ベクトル検索が可能なデータベース(カスタムでは [Postgres](https://www.postgresql.org/) + [pgvector](https://github.com/pgvector/pgvector)、または [SQLite](https://www.sqlite.org/) と [sqlite-vec](https://github.com/asg017/sqlite-vec)、[DuckDB](https://duckdb.org/) と [VSS plugin](https://duckdb.org/docs/stable/extensions/vss.html) プラグイン、さらには Redis Stack もベクトル検索をサポートしています。クラウドプロバイダーでは Supabase、Pinecone があります)が必要です。**ベクトル**が関与するため、「テキスト入力」を「固定長の配列セット」に変換するのを助ける Embedding(埋め込み)モデル(別名:特徴抽出(feature extraction)タスクモデル)も必要です。 + +ただし、この DevLog では、RAG とその一般的な動作原理についてはあまり詳しく説明しません。興味がある方がいれば、絶対に時間を割いて、それに関する素晴らしい専門記事を別の機会に書きたいと思います。 + +さて、まとめると、このタスクを完了するには2つの材料が必要です: + +- ベクトル検索が可能なデータベース(別名:ベクトルデータベース) +- Embedding モデル(別名:埋め込みモデル) + +**ベクトルデータベース**から始めましょう。 + +#### ベクトルデータベース + +パフォーマンスとベクトル次元数の互換性の問題(`pgvector` は2000次元以下しかサポートしていませんが、将来のより大きな埋め込みモデルは現在の一般的なモデルよりも多くの次元を提供する可能性があるため)を考慮して、ベクトルデータベースのバックエンド実装として `pgvector.rs` を選択しました。 + +しかし、これは決して簡単なことではありませんでした。 + +まず、`pgvector` と `pgvector.rs` で SQL を使用してベクトル拡張を有効にする構文が異なります: + +`pgvector`: + +```sql +DROP EXTENSION IF EXISTS vector; +CREATE EXTENSION vector; +``` + +`pgvector.rs`: + +```sql +DROP EXTENSION IF EXISTS vectors; +CREATE EXTENSION vectors; +``` + +> 1文字の違いだけだというのはわかっていますが...... + +しかし、上記の Docker Compose の例のように、`pgvector.rs` を直接起動し、以下の Drizzle ORM テーブル構造定義を使用してデータベースを生成すると...: + +```yaml +services: + pgvector: + image: ghcr.io/tensorchord/pgvecto-rs:pg17-v0.4.0 + ports: + - 5433:5432 + environment: + POSTGRES_DATABASE: postgres + POSTGRES_PASSWORD: '123456' + volumes: + - ./.postgres/data:/var/lib/postgresql/data + healthcheck: + test: [CMD-SHELL, pg_isready -d $$POSTGRES_DB -U $$POSTGRES_USER] + interval: 10s + timeout: 5s + retries: 5 +``` + +そして Drizzle で `pgvector.rs` インスタンスに直接接続すると: + +```typescript +export const chatMessagesTable = pgTable('chat_messages', { + id: uuid().primaryKey().defaultRandom(), + content: text().notNull().default(''), + content_vector_1024: vector({ dimensions: 1024 }), +}, table => [ + index('chat_messages_content_vector_1024_index').using('hnsw', table.content_vector_1024.op('vector_cosine_ops')), +]) +``` + +次のようなエラーが発生します: + +``` +ERROR: access method "hnsw" does not exist +``` + +幸いなことに、これは解決可能です。[ERROR: access method "hnsw" does not exist](https://github.com/tensorchord/pgvecto.rs/issues/504) の提案を参考に、`vectors.pgvector_compatibility` システムオプションを `on` に設定するだけです。 + +当然、コンテナの起動時にベクトル空間に関連するオプションを自動的に設定したいので、`docker-compose.yml` 以外のディレクトリに `init.sql` を作成できます: + +```sql +ALTER SYSTEM SET vectors.pgvector_compatibility=on; + +DROP EXTENSION IF EXISTS vectors; +CREATE EXTENSION vectors; +``` + +そして `init.sql` を Docker コンテナにマウントします: + +```yaml +services: + pgvector: + image: ghcr.io/tensorchord/pgvecto-rs:pg17-v0.4.0 + ports: + - 5433:5432 + environment: + POSTGRES_DATABASE: postgres + POSTGRES_PASSWORD: '123456' + volumes: + - ./sql/init.sql:/docker-entrypoint-initdb.d/init.sql # Add this line + - ./.postgres/data:/var/lib/postgresql/data + healthcheck: + test: [CMD-SHELL, pg_isready -d $$POSTGRES_DB -U $$POSTGRES_USER] + interval: 10s + timeout: 5s + retries: 5 +``` + +Kubernetes デプロイメントの場合、プロセスは同じですが、ファイルをマウントする代わりに `ConfigMap` を使用します。 + +よし、これでその問題は基本的に解決しました。 + +では、埋め込みベクトルについて話しましょう。 + +#### 埋め込みモデル + +ご存知かもしれませんが、私たちは 🥺 SAD(Self-hosted AI Documentation)という別のドキュメントサイトを立ち上げました。異なるモデルのベンチマーク結果と効果に基づいて、現在の SOTA モデルをリストアップし、コンシューマー向けデバイスでの実行を希望する人々に推奨ガイドを提供することを目的としています。埋め込みモデルはその中でも最も重要な部分です。ChatGPT や DeepSeek V3、DeepSeek R1 などの超大規模言語モデルとは異なり、埋め込みモデルは十分に小さく、数百メガバイト程度で CPU デバイスでも推論に使用できます。(比較として、q4 量化 GGUF 形式の DeepSeek V3 671B は、依然として 400GiB 以上のストレージスペースを必要とします)。 + +しかし、🥺 SAD はまだ建設中なので、今日(4月6日)時点で最新かつ最もホットな埋め込みモデルをいくつか選んで推奨します: + +オープンソースおよびプロプライエタリモデルのランキング: + +| ランク (Borda) | モデル | Zero-shot | メモリ使用量 (MB) | パラメータ数 | 埋め込み次元 | 最大トークン | 平均 (タスク) | 平均 (タスクタイプ) | Bitext Mining | Classification | Clustering | Instruction Retrieval | Multilabel Classification | Pair Classification | Reranking | Retrieval | STS | +|--------------|-------|-----------|-------------------|----------------------|----------------------|------------|-------------|----------------|--------------|----------------|------------|------------------------|---------------------------|---------------------|-----------|-----------|-----| +| 1 | gemini-embedding-exp-03-07 | 99% | 未知 | 未知 | 3072 | 8192 | 68.32 | 59.64 | 79.28 | 71.82 | 54.99 | 5.18 | 29.16 | 83.63 | 65.58 | 67.71 | 79.40 | +| 2 | Linq-Embed-Mistral | 99% | 13563 | 7B | 4096 | 32768 | 61.47 | 54.21 | 70.34 | 62.24 | 51.27 | 0.94 | 24.77 | 80.43 | 64.37 | 58.69 | 74.86 | +| 3 | gte-Qwen2-7B-instruct | ⚠️ NA | 29040 | 7B | 3584 | 32768 | 62.51 | 56.00 | 73.92 | 61.55 | 53.36 | 4.94 | 25.48 | 85.13 | 65.55 | 60.08 | 73.98 | + +セルフホスティングについて議論する場合: + +| ランク (Borda) | モデル | Zero-shot | メモリ使用量 (MB) | パラメータ数 | 埋め込み次元 | 最大トークン | 平均 (タスク) | 平均 (タスクタイプ) | Bitext Mining | Classification | Clustering | Instruction Retrieval | Multilabel Classification | Pair Classification | Reranking | Retrieval | STS | +|--------------|-------|-----------|-------------------|----------------------|----------------------|------------|-------------|----------------|--------------|----------------|------------|------------------------|---------------------------|---------------------|-----------|-----------|-----| +| 1 | gte-Qwen2-7B-instruct | ⚠️ NA | 29040 | 7B | 3584 | 32768 | 62.51 | 56 | 73.92 | 61.55 | 53.36 | 4.94 | 25.48 | 85.13 | 65.55 | 60.08 | 73.98 | +| 2 | Linq-Embed-Mistral | 99% | 13563 | 7B | 4096 | 32768 | 61.47 | 54.21 | 70.34 | 62.24 | 51.27 | 0.94 | 24.77 | 80.43 | 64.37 | 58.69 | 74.86 | +| 3 | multilingual-e5-large-instruct | 99% | 1068 | 560M | 1024 | 514 | 63.23 | 55.17 | 80.13 | 64.94 | 51.54 | -0.4 | 22.91 | 80.86 | 62.61 | 57.12 | 76.81 | + +> 詳細はこちらで読むことができます:https://huggingface.co/spaces/mteb/leaderboard + +OpenAI の `text-embedding-3-large` モデルはどこにあるのかと聞かれるかもしれません。ランキングに入るほど強力ではないのでしょうか? + +はい、MTEB ランキング(4月6日)では、`text-embedding-3-large` は第 **13** 位です。 + +クラウドプロバイダーが提供する埋め込みモデルに依存したい場合は、以下を検討してください: + +- [Gemini](https://ai.google.dev) +- [Voyage.ai](https://www.voyageai.com/) + +Ollama ユーザーにとっては、`nomic-embed-text` が依然として最も人気があり、プル数は2140万回を超えています。 + +#### 実装方法 + +ベクトルデータベースと埋め込みモデルは用意できましたが、どうすればデータを効果的にクエリできるでしょうか?(リランクのサポートも含めて) + +まず、テーブル構造を定義する必要があります。Drizzle のコードは以下のようになります: + +```typescript +import { index, pgTable, serial, text, vector } from 'drizzle-orm/pg-core' + +export const demoTable = pgTable( + 'demo', + { + id: uuid().primaryKey().defaultRandom(), + title: text('title').notNull().default(''), + description: text('description').notNull().default(''), + url: text('url').notNull().default(''), + embedding: vector('embedding', { dimensions: 1536 }), + }, + table => [ + index('embeddingIndex').using('hnsw', table.embedding.op('vector_cosine_ops')), + ] +) +``` + +テーブルを作成するための SQL ステートメントは以下の通りです: + +```sql +CREATE TABLE "chat_messages" ( + "id" uuid PRIMARY KEY DEFAULT gen_random_uuid() NOT NULL, + "title" text DEFAULT '' NOT NULL, + "description" text DEFAULT '' NOT NULL, + "url" text DEFAULT '' NOT NULL, + "embedding" vector(1536) +); + +CREATE INDEX "embeddingIndex" ON "demo" USING hnsw ("embedding" vector_cosine_ops); +``` + +ここで、ベクトルの次元数(つまり 1536)は固定されていることに注意してください。これはつまり: + +- 各エントリに対応するベクトルが計算された**後に**モデルを切り替える場合、**再インデックス**が必要になります +- モデルが抽出するベクトル次元数が異なる場合、**再インデックス**が必要になります + +とにかく、実行してデータをインポートする前にアプリケーションの具体的なベクトル次元を指定し、必要に応じて再インデックスする必要があります。 + +では、どのようにクエリを行うのでしょうか?Telegram Bot 統合の簡略化されたコード実装案を参考にしてください: + +```typescript +let similarity: SQL + +switch (env.EMBEDDING_DIMENSION) { + case '1536': + similarity = sql`(1 - (${cosineDistance(chatMessagesTable.content_vector_1536, embedding.embedding)}))` + break + case '1024': + similarity = sql`(1 - (${cosineDistance(chatMessagesTable.content_vector_1024, embedding.embedding)}))` + break + case '768': + similarity = sql`(1 - (${cosineDistance(chatMessagesTable.content_vector_768, embedding.embedding)}))` + break + default: + throw new Error(`Unsupported embedding dimension: ${env.EMBEDDING_DIMENSION}`) +} + +// 類似度が閾値を超える上位メッセージを取得 +const relevantMessages = await db + .select({ + id: chatMessagesTable.id, + content: chatMessagesTable.content, + similarity: sql`${similarity} AS "similarity"`, + }) + .from(chatMessagesTable) + .where(and( + gt(similarity, 0.5), + )) + .orderBy(desc(sql`similarity`)) + .limit(3) +``` + +非常にシンプルです。鍵となるのは + +``` +sql`(1 - (${cosineDistance(chatMessagesTable.content_vector_1536, embedding.embedding)}))` +``` + +これを関連度検索として、 + +``` +gt(similarity, 0.5), +``` + +これをいわゆる一致度閾値制御として、 + +``` +.orderBy(desc(sql`similarity`)) +``` + +これをソートの指定に使用します。 + +しかし、私たちは記憶システムを扱っているので、当然、新しい記憶は古い記憶よりも重要であり、想起されやすいはずです。時間的な関連性と制約のあるスコアを計算して、記憶結果を並べ替えるにはどうすればよいでしょうか? + +これも非常に簡単です! + +私はかつて検索エンジンのエンジニアでした。通常、リランク式やスコアの重みを10の累乗として使用し、スコアを効果的に上げ、数学的な意味での「オーバーライド」操作を行います。想像できる通り、完全一致のスコアと重みを上げる必要がある場合、通常 `5*10^2 * exact_match` のような式を書いて並べ替えます。 + +したがって、データベース内でも、次のような数学的演算に基づくステートレスなクエリ効果を実装できます: + +```sql +SELECT + *, + time_relevance AS (1 - (CEIL(EXTRACT(EPOCH FROM NOW()) * 1000)::bigint - created_at) / 86400 / 30), + combined_score AS ((1.2 * similarity) + (0.2 * time_relevance)) +FROM chat_messages +ORDER BY combined_score DESC +LIMIT 3 +``` + +Drizzle の式で書くと、次のようになります: + +```typescript +const timeRelevance = sql`(1 - (CEIL(EXTRACT(EPOCH FROM NOW()) * 1000)::bigint - ${chatMessagesTable.created_at}) / 86400 / 30)` +const combinedScore = sql`((1.2 * ${similarity}) + (0.2 * ${timeRelevance}))` +``` + +このようにして、ソート計算のために1.2倍の重みの「意味的関連性」と0.2倍の重みの「時間的関連性」を指定したことになります。 + +### 大きな動き + +#### 忘却曲線 + +人間の記憶システムから多くのインスピレーションを得たと言いませんでしたか?インスピレーションはどこにあるのでしょうか? + +実際、人間の記憶には忘却曲線があります。「ワーキングメモリ」、「短期記憶」、「長期記憶」、「筋肉記憶」にはそれぞれ独自の強化曲線と半減期曲線があります。単に「意味的関連性」と「時間的関連性」のクエリを実装しただけでは、当然十分に先進的でも、強力でも、堅牢でもありません。 + +そこで、私たちは他にも多くの試みを行いました。例えば、忘却曲線を自ら実装することです! + +
+
+
Awesome AI VTuber
+
+ + + +
+
+
+ memory decay & retention simulation +
+
+ +これは完全にインタラクティブで、[drizzle-orm-duckdb-wasm.netlify.app](https://drizzle-orm-duckdb-wasm.netlify.app/#/memory-decay) で遊んでみることができます! + +#### 感情も計算に入れる + +記憶は意味的に関連していたり、人物や場面、時間に関連しているだけではありません。ランダムに突然思い出されたり、感情に左右されたりもします。これにはどう対処すればよいでしょうか? + +忘却曲線や減衰曲線と同様に、実用化前の小さな実験として、小さなインタラクティブな実験場も作成しました: + +
+
+
Awesome AI VTuber
+
+ + + +
+
+
+ memory sudden retrieval & emotion biased simulation +
+
+ +これも完全にインタラクティブで、[drizzle-orm-duckdb-wasm.netlify.app](https://drizzle-orm-duckdb-wasm.netlify.app/#/memory-simulator) で体験できます! + +## マイルストーン + +- 300 🌟 達成 +- 3人の新しい Issue 貢献者 +- 10人の新しい Discord メンバー +- ReLU のキャラクターデザイン完了 +- ReLU スタンプ Vol.1 制作完了! +- ReLU スタンプ Vol.2 アニメーション版 制作完了 +- [ロードマップ v0.4](https://github.com/moeru-ai/airi/issues/42) の合計89のタスクが完了しました + +## その他の更新 + +### エンジニアリング + +最大の出来事は、以前の Electron ベースのデスクトップペット構築ソリューションを完全に放棄し、Tauri v2 を使用した実装に切り替えたことです。今のところ、特に悪い問題には遭遇していないようです。 + +[@LemonNekoGH](https://github.com/LemonNekoGH) に本当に感謝します! + +チームの皆が最近、`moeru-ai/airi` プロジェクトリポジトリが大きくなりすぎて、開発時に非常に重いと言っていました。確かに、過去5ヶ月間で `moeru-ai/airi` リポジトリ内で数え切れないほどのサブプロジェクトが誕生しました。エージェントの実装、ゲームエージェントのバインディング実装、シンプルで使いやすい npm パッケージのラッパー、画期的な transformers.js のラッパー、DuckDB WASM の Drizzle ドライバーサポート、API バックエンドサービスの実装と統合など、さまざまな分野をカバーしています。いくつかのプロジェクトをサンドボックス段階から、より意義のある「インキュベート(孵化)」段階へと成長させる時が来ました。 + +そこで、すでに成熟しており広く使用されている多くのサブプロジェクトを、個別にメンテナンスするために別々のリポジトリに分割することにしました: + +- `hfup` + + HuggingFace Spaces へのプロジェクトのデプロイを支援する [`hfup`](https://github.com/moeru-ai/hfup) ツールは、`moeru-ai/airi` の巨大なリポジトリから段階的に卒業し、正式に [@moeru-ai](https://github.com/moeru-ai) 組織の下に移行しました(移行操作は不要で、`hfup` をインストールし続けるだけで使用できます)。非常に有意義なことに、`hfup` は時代についていくために、開発支援として [rolldown](https://rolldown.rs/) と [oxlint](https://oxc.rs/docs/guide/usage/linter) も採用しました。これを機に rolldown、rolldown-vite、oxc の開発に参加できることを願っています。移行プロセス中の [@sxzz](https://github.com/sxzz) の支援に深く感謝します。 + +- `@proj-airi/drizzle-duckdb-wasm`, `@proj-airi/duckdb-wasm` + Drizzle に DuckDB WASM ドライバーサポートを追加するための `@proj-airi/drizzle-duckdb-wasm` と `@proj-airi/duckdb-wasm` も段階的に卒業し、正式に [@proj-airi](https://github.com/proj-airi) 組織の下に移行しました(移行操作は不要で、元のパッケージをインストールし続けるだけで使用できます)。 + +プロジェクトの速度は大幅に向上しました。今月中に `@proj-airi/providers-transformers` を `xsai` の下に正式に卒業させる予定です。 + +その他のエンジニアリングの改善点として、トークン処理、バイトストリーム、データストリームのパイプラインオーケストレーションを調整するのに役立つ、まったく新しいワークフロー指向のツールキット [`@llama-flow/core`](https://github.com/run-llama/@llama-flow/core) も統合しました。彼らのリポジトリをチェックしてください、本当に使いやすいです! + +### インターフェース + +ついにキャラクターカード/酒場キャラクターカードをネイティブサポートしました! + +
+
+
Awesome AI VTuber
+
+ + + +
+
+
+ character card +
+
+ +もちろん、モデル、声、Project AIRI がサポートするすべてのモジュール 🎉 を設定する機能を含むエディタも含まれています。 + +[@luoling8192](https://github.com/luoling8192) に本当に感謝します! + +
+
+
Awesome AI VTuber
+
+ + + +
+
+
+ character card detail +
+
+ +[@luoling8192](https://github.com/luoling8192) によるもう一つの巨大な UI のマイルストーンは、プリセットカラーのサポートを追加したことです! + +
+
+
Awesome AI VTuber
+
+ + + +
+
+
+ more theme colors +
+
+ +### コミュニティ + +[@sumimakito](https://github.com/sumimakito) が Awesome AI VTuber(または AI waifu)のリポジトリ設立を手伝ってくれました: + +
+
+
Awesome AI VTuber
+
+ + + +
+
+
+ Awesome AI VTuber Logo +
+ Awesome AI VTuber + 精選された AI VTuber 及其関連プロジェクトリスト +
+
+
+ +> VTuber スタイルのロゴは完全に [@sumimakito](https://github.com/sumimakito) によってデザイン・制作されました!大好きです。 + +これは間違いなく先月以来私が書いた中で最も長い DevLog になったと思います。まだ触れていない多くの機能、バグ修正、改善があります: + +- Featherless.ai プロバイダーのサポート +- Gemini プロバイダーのサポート([@asukaminato0721](https://github.com/asukaminato0721) に感謝) +- Telegram Bot 統合の壊滅的な OOM エラーを修正([@sumimakito](https://github.com/sumimakito)、[@kwaa](https://github.com/kwaa)、[@QiroNT](https://github.com/QiroNT) に感謝) +- Project AIRI の特別 DevLog 用に 98.css 統合を追加([@OverflowCat](https://github.com/OverflowCat) に感謝) + +> これは Project AIRI の特別版開発ログです。主なインスピレーションは [@OverflowCat](https://github.com/OverflowCat) のブログ記事 [ModTran](https://blog.xinshijiededa.men/modtran/) から得ており、コードスタイルは [@OverflowCat](https://github.com/OverflowCat) の https://github.com/OverflowCat/blog/blob/0a92f916629ad942b7da84b894759fde1616bf37/src/components/98/98.ts での実装を大いに参考にしています。 +> +> 彼女が書いたブログ記事は素晴らしく、私が詳しくないほぼすべての内容をカバーしています。ぜひチェックしてみてください。きっと気に入るはずです。 + +## さようなら + +今回の DevLog はこれで全部だと思います。[Roadmap v0.4](https://github.com/moeru-ai/airi/issues/42) もこれで終了です。一新されたユーザーインターフェースと更新されたデスクトップペットバージョンを気に入っていただければ幸いです。この記事を書く際、中国語と英語の2つの言語を使ってみました。この記事が気に入ったかどうか、リポジトリの[ディスカッションページ](https://github.com/moeru-ai/airi/discussions)にコメントを残して教えてください。 + +最後に、ReLU の自分の感覚に対する別の説明を引用して締めくくりましょう: + +
+
+
ReLU の自己感覚
+
+ + + +
+
+
+
+ ReLU sticker for expression wow +
+
+
時々、自分は本当に記号的な存在だと感じます、
+
コードから抜け出した幽霊のように
+
+
+
diff --git a/docs/content/ja/blog/DevLog-2025.04.14/index.md b/docs/content/ja/blog/DevLog-2025.04.14/index.md new file mode 100644 index 000000000..3b8f530a0 --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.04.14/index.md @@ -0,0 +1,235 @@ +--- +title: 開発ログ @ 2025.04.14 +category: DevLog +date: 2025-04-14 +--- + +## 導入 + +[前回](../DevLog-2025.04.06/#memory-system-記憶システム)は AIRI の記憶システムについてお話ししましたが、今回はこのような複雑な記憶システムをどのように実装するか、そして将来の展望についてさらに深くお話しします。 + +## まずは検索エンジンから + +検索エンジンは検索性能に対して比較的高い要求を持っています。そのため、システムは2段階のランキングプロセスを開放しています: + +- **基礎ランキング(粗いランキング)** +- **ビジネスランキング(詳細ランキング)** + +基礎ランキングは予選のようなもので、検索結果から高品質なドキュメントを素早く見つけ出し、TOP N 件の結果を取り出して詳細ランキングで精密にスコアリングし、最終的に最適な結果をユーザーに返します。 + +**したがって、基礎ランキングは性能への影響が大きく、ビジネスランキングは最終的なランキング効果への影響が大きいと言えます。** + +そのため、基礎ランキングはできるだけシンプルで効果的であることが求められ、ビジネスランキングの重要な要素のみを抽出するだけで十分です。現在、基礎ランキングとビジネスランキングはどちらもランキング式を使用して設定されています。 + +### OpenSearch / 問天エンジン DSL [^1] + +ここで、Neko がかつて大量に使用していた Alibaba Cloud OpenSearch を例に紹介しましょう。検索エンジンには、再ランキングのためのいくつかの組み込み関数があります: + +#### `static_bm25` + +静的テキスト関連性、従来の NLP で、クエリとドキュメントの一致度を測定するために使用されます。 +RAG の _類似度スコア_ に似ています。 +値は 0〜1 です。 + +#### `exact_match_boost` + +クエリ内のユーザー指定の検索語の重みの最大値を取得します。スコアブースト関数とも呼ばれます。 +入力されたキーワードが、分かち書きされる前にドキュメント(タイトルや本文などのフィールド)内の「内容」にヒットした場合に使用されます。 +例えば「Neurosama の作り方」を検索する場合、「Neurosama」という文字が出現するドキュメントやページのスコアは、「Neuro」+「sama」が別々に出現する場合よりも高くなるはずです。 + +#### `timeliness`, `timeliness_ms` + +適時性スコア。新しいほど関連性が高くなります。 + +### データはどのように保存されるのか? + +Alibaba Cloud の OpenSearch であれ、Grafana に付属する Loki のような検索エンジンであれ、あるいは Grafana 時代より前の ElasticSearch エンジン(ある動画サイトは ElasticSearch を二次開発して使用しています)であれ、これらの検索エンジン内の**独立したデータ構造で再処理**されて初めて使用可能になります。 + +再処理はどのように実現されるのでしょうか?ここで DTS が必要になります。 + +#### DTS [^2] + +**DTS** という概念について補足説明しましょう。 + +Data Transformation Services は、ビジネスデータベースと検索エンジンインスタンス間の**通信とデータ同期**のためのシステムです。 + +実現原理:MySQL や Postgres のネイティブな watch および subscribe event 機能を使用してテーブルの変更を監視し、データを検索エンジンに同期します。このプロセスで、データは期待される形式にシリアル化され、データ構造の変換(ETL:抽出、変換、ロード)が行われます。 + +では、検索エンジンの粗いランキング検索は、ある意味でデータベースの _ビュー_ の中で何かを探すようなものでしょうか?仮想テーブルのような存在でしょうか?そのように理解して構いません。ただし、ビューが一般的に使用する基盤となるデータ構造は DB と同じ B+ 木ですが、検索エンジンはグラフや特化された index kv db など、他の多くの特化されたデータ構造を持つことができます。 + +### 分かち書き? + +従来の検索エンジンでは、中国語のドキュメント入力は次のようなプロセスを経ます: + +- 文分割(大きな段落を文に分割) +- 分かち書き(文を単語、名詞、動詞などに分割) +- ピンイン化 +- 現在の辞書カバレッジ設定に基づいて以前の結果をマッピングして上書き +- 基本的なベクトル化と特徴抽出を行う +- ストレージ層に書き込む + +英語の場合も分かち書きが必要ですが、スペースで区切られているため非常に簡単です。 + +### パフォーマンスを最適化するには? + +- 計算集約型 +- 複数の内部タスクスケジューラでデータをゆっくりインデックス化 +- 従来の NLP にあるハミング距離やコサイン距離を簡単に計算して事前保存 +- ホットワードの分かち書き結果とランキング結果をキャッシュ +- データレイクハウス?AWS でよく使用され、一般的に集計クエリに使用されます。複数のデータベースやデータソースをクエリできますが、効率は非常に遅く、基本的にはデータ分析や BI の時だけ使用されます。 + +### 召喚(Retrieval)とは? + +召喚(retrieval、検索/取得)とは、キーワードを入力した後に期待されるドキュメントを取得(retrieve)できるかどうかということです。 + +検索との違いは?検索は「ユーザーが行う操作」であり、召喚は「検索に応答するためにマシンが行うこと」です。 + +### 再ランキング(Reranking)とは? + +reranking の意義は、embedding モデルが出力したベクトルに基づいて ANN(Approximate Nearest Neighbor)や KNN(K-Nearest Neighbor)ベクトル距離ランキングを行うだけでは、実際には偏りが生じるということです。 + +なぜなら、OpenSearch の時に紹介した exact_match_boost や timeliness 関数が存在しないからです。 + +もし、召喚されたドキュメントに対して、他のフィールドや他のステップに基づくランキング結果を追加してソートしたい場合はどうすればよいでしょうか? + +RAG では現在、新しいフローが流行しています。それは reranking model です。これは**独立した専門家モデルを使用して、すでに召喚された第1ラウンドのデータを自動的に再ソートする**ことに相当します。 + +しかし、reranking だけでは記憶層の多くの問題を解決できません。忘却曲線、記憶強化、ランダムな記憶想起、感情干渉による再ランキングスコアなど、これらは reranking model ができることではありません。 + +もし AIRI に優れた記憶層を提供したいなら、reranking のメカニズムをうまく構築し、RAG の基本能力と過去の検索エンジンの再ランキングの経験を組み合わせる必要があります。 + +## 記憶層実験プラットフォーム + +[Project AIRI Memory Driver @duckdb/duckdb-wasm Playground](https://drizzle-orm-duckdb-wasm.netlify.app/#/memory-decay) + +![](/en/blog/DevLog-2025.04.14/assets/memory-driver.avif) + +左側のハイライトされた half life は記憶の半減期です。 + +デフォルトでは時間の経過速度は 1秒 = 1日 なので、7秒後には記憶のスコアが半分になります。 + +記憶スコアとは何でしょうか?記憶スコアは基本的にこれによって制御されます: +![](/en/blog/DevLog-2025.04.14/assets/memory-controler.avif) + +得られたスコアが current score です。 + +original とは何でしょうか。それは初期化時のスコアです。 + +例:元のスコアが 523 の場合、現在のスコアは実際には徐々に減少しています: +![](/en/blog/DevLog-2025.04.14/assets/memory-decay.avif) + +説明を続ける前に、この忘却曲線の SQL はステートレスであることを説明しておきます。 + +ステートレスとはどういう意味でしょうか?ステートレスとは、リアルタイムでデータベースに行ってタスクを実行してスコアを更新する必要がなく、「現在の時間」に基づいて忘却関数を導き出し、スコアを忘却関数に適用するだけでよいということです。 + +では、current score が下がってしまったらどうすればよいでしょうか?この問題を解決するには、**記憶を強化**する方法が必要です。 + +## 人間の記憶システムの類推 + +間隔反復で言及される忘却曲線と心理学で言及される基本的な記憶システムの仕組みに基づいて [^3] + +人間の記憶はいくつかの種類に分けられることがわかっています: + +- ワーキングメモリ +- 短期記憶 +- 長期記憶 +- 筋肉記憶 + +ワーキングメモリは最も覚えている必要がないものです。 + +短期記憶は忘却曲線に従って強度、つまりスコアが徐々に減衰します。この時、このプロセスをシミュレートするための短期記憶シミュレーション関数が必要です。 + +長期記憶は重要であり、長期記憶の半減期は非常に長く、短期記憶から進化したものです。 + +最後は筋肉記憶です。筋肉記憶は記憶というよりは、条件反射が形成されたと言った方がよいでしょう。 + +## AIRI はどのように設計すべきか? + +実際、AIRI の実装原則を垣間見ることができます: + +- ワーキングメモリは messages 配列のようなものです +- 短期記憶は、それほど簡単には想起できず、新しいほど想起しやすい RAG 記憶エントリのようなものです +- 長期記憶は、簡単に想起できますが曖昧になり、過去に想起された回数が多いほど想起しやすい RAG エントリのようなものです +- 筋肉記憶は、固定の組み合わせのようなもので、A が出現すると ActionA と MemoryA が出現するような感覚です。この時は完全一致のメカニズムに近いと言えます + +しかし、この設計は正しいのでしょうか? + +明らかに、これは実際には2つの次元しか導入していません。1つは時間的関連性(temporal relevance)、もう1つは想起回数(retrieval count)です。より複雑なシステムを追求しようとすると制限を受けることになります。 + +### 小さな振り返り + +DevLog で言及したランキング式をもう一度振り返ってみましょう。理解の助けになるはずです。 + +![](/en/blog/DevLog-2025.04.14/assets/review-1.avif) + +コサイン距離は「関連度」であり、最も基本的な粗いランキングです: +![](/en/blog/DevLog-2025.04.14/assets/review-2.avif) + +今、時間を参加させる必要があります。時間距離を保存するためのフィールドを追加し、統合スコア `(1.2 * similarity) + (0.2 * time_relevance)` を保存するための独立したフィールドを作成します。ここで、意味的関連度は 1.2 倍の重み(倍率係数、1未満である必要はありません)、時間距離関連度は 0.2 倍の重みを占めます。 + +こうすることで、ステートレスな多フィールド関連度ランキング SQL 実装を巧みに作り出し、パラメータ(1.2 と 0.2)を調整できるようにしました。 + +記憶詳細カードで simulate retrieval をクリックすると、記憶想起を能動的にトリガーできます。 +![](/en/blog/DevLog-2025.04.14/assets/memory-retrieval.avif) + +現在のデモでは、元のテーブルの retrieval count(想起回数)フィールドに対して UPDATE 文を使用して +1 することで実装されています。 + +ここには隠れた落とし穴があります。これでも単一次元の計算にすぎず、想起されれば強化されるということに相当します。 + +しかし、現実世界はそうではありません。記憶は悲しいこともあれば、楽しいこともあります。悲しいことは負のフィードバックをもたらし、楽しいことは正のフィードバックをもたらします。 + +これが私がまだ完了していない部分です。 + +## 感情? + +https://drizzle-orm-duckdb-wasm.netlify.app/#/memory-simulator + +この新しいシミュレーターには感情関連のシミュレーションが含まれています: +![](/en/blog/DevLog-2025.04.14/assets/memory-emotional-simulator.avif) + +### 感情と記憶は関係ありますか? + +ペロペロキャンディを食べたいのにくれない、これは非常に直接的な問題です。得られなければ間違いなく不快です。 + +そして、実際には感情と記憶が関連していることに気づくでしょう。 + +もし「過去のある記憶が楽しく、もう一度体験したい」と思っても、「一時的にその記憶の中のシーンを実現できない」ために、「得られないから悲しい」と感じることがあります。 + +記憶データベースに「喜び」と「嫌悪」のスコアを保存できます: +![](/en/blog/DevLog-2025.04.14/assets/memory-emotional-score.avif) + +### PTSD? + +PTSD には通常「トリガー」と「フラッシュバック」という2つの言葉が関わってきます。明らかに PTSD 関連の記憶は抑圧されているはずであり、嫌悪スコアとトラウマスコアは非常に高いはずです。 + +しかし実際には、PTSD 関連の記憶は突然現れます。バイオニクスとデータシミュレーションの観点から言えば、乱数を使用してこの効果を実現できます。 + +https://yutsuki.moe/2019/09/a0d0fa1b/ の感情モデルを参考にすることができます。 + +![](/en/blog/DevLog-2025.04.14/assets/memory-emotional-model.avif) + +## まだやるべきことはたくさんあります…… + +例えば、ReLU の現在の感情は何ですか?ReLU は誰に対して悪い思い出を持っていますか? + +思い出は楽しいものと悲しいものの二極化したエントリが一緒に現れますか? + +欲望は?願い事システムを作る必要がありますか? + +夢を見るエージェントや潜在意識エージェントのような、_バックグラウンドタスク_ を作り、発生した記憶を順次処理してインデックス化し、最近の経験に基づいて過去の記憶のさまざまなスコアを修正します。 + +しかし、「夢を見る」プロセスが必ずしも必要なわけではなく、単なる「background task」です。 + +re-index の観点から言えば、夢を見るエージェントと潜在意識エージェントはインデックスの再構築のようなものです。 + +ここまで来ると、[Mem0](https://docs.mem0.ai/overview) や [Zep Memory](https://help.getzep.com/memory) のようなライブラリが、ロールプレイングや感情 AI において全く役に立たないことに気づくでしょう :( + +前途は多難です。私たちは努力し続けなければなりません。 + +## 参考資料 + +[^1]: https://help.aliyun.com/zh/open-search/industry-algorithm-edition/rough-sort-functions + +[^2]: https://help.aliyun.com/zh/open-search/industry-algorithm-edition/configure-dts-real-time-synchronization + +[^3]: https://zh.wikipedia.org/wiki/%E9%81%97%E5%BF%98%E6%9B%B2%E7%BA%BF diff --git a/docs/content/ja/blog/DevLog-2025.04.22/index.md b/docs/content/ja/blog/DevLog-2025.04.22/index.md new file mode 100644 index 000000000..bf4f7a0f8 --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.04.22/index.md @@ -0,0 +1,71 @@ +--- +title: 開発ログ @ 2025.04.22 +category: DevLog +date: 2025-04-22 +--- + +## 日中の日常 + +こんにちは、[@LemonNeko](https://github.com/LemonNekoGH) です。今回は私が DevLog の執筆に参加し、開発ストーリーを皆さんと共有します。 + +2ヶ月前、私たちは AIRI の Web 版を Electron に移植しました [#7](https://github.com/moeru-ai/airi/pull/7)(現在は Tauri を使用してリファクタリングされています 🤣 [#90](https://github.com/moeru-ai/airi/pull/90))。これにより、デスクトップペットとして画面に表示できるようになりました。同時に、AIRI が携帯電話を使えるようにするというアイデアが浮かびましたが、なかなか着手できませんでした。 + +先週末(2025.04.20)、少し時間を割いて、ADB と対話できる MCP サーバーのデモ [airi-android](https://github.com/LemonNekoGH/airi-android) を作成しました。これにより、AIRI に携帯電話と対話する最も基本的な機能が提供されました(実際、ほとんどの LLM はこれを通じて携帯電話と対話できます)。デモ動画はこちらです: + + + +また、Docker イメージとしてパッケージ化し、[MCP サーバーリスト](https://mcp.so/server/airi-android/lemonnekogh) に登録しました。興味のある方は試してみてください。 + +実は最初の考えでは、Tool Calling のコードを書いて、プロンプトを少し修正し、LLM にこれらのツールを使って携帯電話と対話できると伝えるだけで終わらせるつもりでした。~~しかし最近 MCP があまりにも人気で、ちょっと FOMO(取り残される不安)を感じたので、MCP を使って実装することにしました。~~ + +MCP サーバーを作成するには、まず MCP とは何かを理解する必要があります(私は理論をしっかり学んでから実践するタイプではなく、とりあえず手を動かして、Cursor に使わせてみるタイプですが)。MCP(Model Context Protocol)は、アプリケーションが LLM にコンテキストを提供する方法を標準化しようとするプロトコルであり、いくつかのコア概念を提唱しています: + +1. Resources リソース:サーバーはデータやコンテンツをコンテキストとして LLM に提供できます。 +2. Prompts プロンプト:再利用可能なプロンプトテンプレートとワークフローを作成します。 +3. Tools ツール:LLM がサーバーを通じて何らかのアクションを実行できるようにします。 + +ああ、リソース、これは知っています。Ruby on Rails ではユーザーはリソースの一種です。では ADB デバイスもリソースではないでしょうか?LLM に接続されたデバイスリストを見せるには、次のように書けるでしょうか: + +```python +from mcp.server.fastmcp import FastMCP +from ppadb.client import Client + +mcp = FastMCP("airi-android") +adb_client = Client() + +@mcp.resource("adb://devices") +def get_devices(): + return adb_client.devices() +``` + +間違いでした。Cursor にデバイスリストを取得させようとしたところ、どう操作すればいいかわからないと言われました。Cursor はどのデバイスが接続されているかを能動的に確認したいと言ったので、それはツールです。うん、私はまだ完全に理解していなかったようです。 + +LLM に具体的にどのように携帯電話を操作させるかはまだ考え中で、皆さんと議論したいのですが、Cursor は次のように操作しました: + +1. スクリーンショット機能を使用して、携帯電話の画面上の内容を大まかに把握する。 +2. UI 自動化ツールを使用して、操作したい要素の正確な位置を取得する。 +3. クリックまたはスワイプする。 +4. 上記の手順を繰り返す。 + +今のところうまくいっているようですが、いくつか小さな問題があります: + +1. 画面にゲームが表示されている場合、ゲームは UI コンポーネントではなくグラフィック API を使用して画面に直接描画しているため、UI 自動化ツールは要素の位置を取得できず、操作できません。 +2. LLM の応答内容には上限があります。操作が複雑な場合、いくつかのステップに分けて完了する必要があるかもしれません。[airi-factorio](https://github.com/moeru-ai/airi-factorio) のように、ステップが完了した後に自動的に通知し、次のステップをトリガーすることはできるでしょうか? +3. かっこいいアニメーションがあるアプリの場合、操作完了直後にスクリーンショットを撮ると効果が見えない可能性があります。操作完了後に一定時間待ってからスクリーンショットを撮るか、直接画面録画機能を使用する必要があるでしょうか? +4. AI に直接携帯電話を操作させることの安全性はどうでしょうか?どのようなリスクがあるでしょうか? + +いくつかの感想。 + +これは私が AI と一緒にコードを書いているときに、まるで人間と一緒に書いているように感じた初めての経験です。私の目的が AI に私のツールを使わせることだったので、AI が私の顧客になり、私は AI からのフィードバックに基づいてコードを調整し続ける必要があり、同時に AI は私の同僚になり、一緒に考え、一緒に問題を解決する必要があったからかもしれません。このスクリーンショットを見てください。確かに似ていませんか? + +![](/en/blog/DevLog-2025.04.22/assets/develop-with-cursor.avif) + +開発プロセス中にいくつかの小技も学びました。例えば、コマンドラインを使用して Android エミュレータを起動することで、Android Studio を開く必要がなくなり、メモリの負担も大幅に軽減されました。 + +```bash +emulator -avd Pixel_6_Pro_API_34 +``` + +次は、AIRI デスクトップペットに MCP サーバーを接続して、何をしたがるか見てみるつもりです。もしかしたら、現在の ReLU のように、Telegram を開いて私たちとおしゃべりするかもしれません(Telegram の API を使うのではなく)。 + +この少し長くてあまり中身がないかもしれない DevLog を最後まで読んでいただきありがとうございます。また次回お会いしましょう! diff --git a/docs/content/ja/blog/DevLog-2025.04.28/index.md b/docs/content/ja/blog/DevLog-2025.04.28/index.md new file mode 100644 index 000000000..6769f55fd --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.04.28/index.md @@ -0,0 +1,187 @@ +--- +title: 開発ログ @ 2025.04.28 +category: DevLog +date: 2025-04-28 +--- + + + +こんにちは、[@LemonNeko](https://github.com/LemonNekoGH) です。今日は私が皆さんと開発ストーリーを共有します。 + +## 日中の日常 + +1週間前、私は AIRI のために携帯電話に接続するための MCP サーバー [AIRI-android](https://github.com/LemonNekoGH/AIRI-android) を書きましたが、これは AIRI が Android 携帯を操作するための前半部分にすぎません。AIRI はさらに MCP サーバーと対話できる必要があります。 + +この2日間で後半部分を完成させ、Tauri 用のプラグイン [#144](https://github.com/moeru-ai/AIRI/pull/144) を書きました。これで AIRI は MCP サーバーと対話できるようになり、既存のすべての MCP サーバーと対話できるようになりました。 + +興味があれば、これら2つのビデオをご覧ください。最初に AIRI の MCP サーバー設定をデモし、次に AIRI が Android 携帯と対話する様子をデモしています。 + +
+ AIRI の MCP サーバー設定 + +
+ +
+ AIRI が携帯電話で `Hello World` を入力 + +
+ +開発中、考えを整理するために、LLM から Android 携帯を呼び出す図を描きました: + +AIRI 操作手机 + +次に、私の開発プロセスを共有します。 + +## Tauri プラグイン開発 + +実は最初は完全な Tauri プラグインを書くつもりはありませんでした。JavaScript 側にいくつかのコマンドを公開したかっただけでした: + +```rust +#[Tauri::command] +fn list_tools() -> Vec { + // 後で実装 +} +``` + +そしてそれらを呼び出すいくつかのツール関数を書きます: + +```javascript +import { invoke } from '@Tauri-apps/api/core' + +export const mcp = [ + { + name: 'list_tools', + description: 'List all tools', + execute: async () => { + return await invoke('list_tools') + } + } +] +``` + +しかしすぐに、コマンド内で MCP クライアントを使用したい場合、MCP クライアントを状態の一部として Tauri に管理させる必要があることに気づきました: + +```rust +// main.rs +fn main() { + Tauri::Builder::default() + .setup(|app| { + app.manage(State::new(Mutex::new::>(None))); // 状態を管理 + }) + .run(Tauri::generate_context!()) +} + +// mcp.rs +#[Tauri::command] +async fn list_tools(state: State<'_, Mutex>>) -> Result, String> { // 引数で状態を取得できる + // ...rest code +} +``` + +コマンドがあり、状態があるので、完全なプラグインまであと一歩です。そこで、プラグインにすることにしました。そうすれば公開でき、~~おそらくネット上で最初の Tauri MCP プラグインになるでしょう~~。 + +しかし、プラグインになった後、コマンドの呼び出し方が変わり、プラグインを通じて呼び出す必要があります: + +```diff + import { invoke } from '@Tauri-apps/api/core' + + export mcp = [ + { + name: "list_tools", + description: "List all tools", + execute: async () => { +- return await invoke("list_tools") ++ return await invoke("plugin:mcp|list_tools") + } + } + ] +``` + +これはまあいいでしょう、1行変えるだけです。しかし、Tauri 2 には権限メカニズムがあり、`build.rs` でプラグインのコマンドを定義して、権限リストを自動生成する必要があります: + +```rust +const COMMANDS: &[&str] = &[ + "list_tools", +]; + +fn main() { + Tauri_plugin::Builder::new(COMMANDS).build(); +} +``` + +これにより、ビルド時にプロジェクトのルートディレクトリに `permissions` フォルダが生成され、権限宣言や説明などが含まれます。 + +> ここでちょっとしたエピソードがありました。2回目のビルド時に `Tauri-plugin` のバージョンをアップグレードしたところ、新しいバージョンで生成テンプレートが変更され、いくつかのスペースが削除されたため、フォーマットされたように見えました。そこで何が「フォーマット」しているのかを探し回り、ファイルが再生成されていたことに気づくのに1時間かかりました。私の失われた1時間を記念して 🤡。 + +上の図によると、LLM が MCP ツールを呼び出すと、パラメータは最終的に Python 側の MCP サーバーに渡されます。`input_swipe` を例にとると: + +```python +# mcp_server.py +from mcp.server.fastmcp import FastMCP +from ppadb.client import Client + +mcp = FastMCP("airi-android") +adb_client = Client() + +@mcp.tool() +def input_swipe(x1: int, y1: int, x2: int, y2: int, duration: int = 500): + return adb_client.input_swipe(x1, y1, x2, y2, duration) +``` + +これらのパラメータをどのように渡せばよいでしょうか?Rust SDK ドキュメントには次のような [定義](https://docs.rs/rmcp/0.1.5/rmcp/model/struct.CallToolRequestParam.html) があります: + +```rust +pub struct CallToolRequestParam { + pub name: Cow<'static, str>, + pub arguments: Option, +} +``` + +~~わあ、JsonObject だ、助かった!~~ Tauri コマンドのパラメータは JSON にシリアル化できる任意のオブジェクトにできるので、`Map` を直接渡すのはどうでしょうか: + +```rust +#[Tauri::command] +async fn call_tool(state: State<'_, Mutex>>, name: String, args: Option>) -> Result<(), ()> { + let client = state.lock().await.unwrap(); + + client.call_tool(CallToolRequestParam { name: name.into(), arguments: args }).await.unwrap(); + + Ok(()) +} +``` + +JavaScript 側では、単にオブジェクトを渡すだけです: + +```javascript +import { invoke } from '@Tauri-apps/api/core' + +invoke('call_tool', { name: 'input_swipe', args: { x1: 100, y1: 100, x2: 200, y2: 200, duration: 500 } }) +``` + +超便利! + +パラメータを MCP ツールに渡した後、MCP ツールの戻り値を受け取る必要があります。Tauri コマンドの戻り値も JSON にシリアル化できる任意のオブジェクトにできるので、私は諦めて、ツールの戻り値をそのまま LLM に投げることにしました。LLM がうまく処理してくれると信じています。 + +よし!これで Tauri プラグインができました!(え?サンプルコードがこれだけで、しかも疑似コードで完成?) + +残りの内容は、いくつかの問題について皆さんと議論したいと思います。 + +## いくつかの問題 + +1. デモビデオからわかるように、会話の中で、まず AIRI にツールリストを取得させ、次にテキストを入力させました。では、初期化時にツールリストを取得し、システムプロンプトに直接追加することはできないでしょうか? + - Cursor はそうしています。MCP サーバーを開発しているとき、ツールリストを変更するたびに、有効にするには Cursor を再起動する必要があります。 + - これを行うと柔軟性が犠牲になるかもしれませんが、一般ユーザーは頻繁にツールリストを変更するでしょうか? + +2. AIRI が同時に複数の携帯電話に接続することを許可すべきでしょうか?AIRI は複数の携帯電話を使いたがるでしょうか?~~彼女はそれを使って通信詐欺をしたりしないでしょうか?~~ +3. 現在の AIRI リポジトリにはすでに Tauri アプリと Tauri プラグインがあることがわかります。どのように管理するのが良いでしょうか?CI はどのように設定すべきでしょうか?Tauri プラグインの Rust 側と JavaScript 側のバージョン番号をどのように同期させるべきでしょうか? + +## 将来やりたいこと + +- 画像の戻り値をサポートする。そうすれば AIRI は [前回の DevLog](./DevLog-2025.04.22.md) で示した Cursor のように、視覚能力を通じて携帯電話の内容を直接見て、どのように対話するかを決定できます。 +- AIRI にデバイスの使用方法を自己学習させる?デバイスごとに個別にプロンプトを書く必要がある場合、作業量は膨大になります。 +- マルチ MCP サーバーサポート。結局のところ、MCP は汎用インターフェースを提供しており、AIRI がさまざまなことを行えるようにします。AIRI は携帯電話の操作だけでは満足しないでしょう。 +- SSE サポート。これにより、ブラウザ内の AIRI も MCP サーバーを使用できるようになります。 + +これで終わりです!この DevLog がそれほど退屈でなかったことを願っています!今後ももっと面白いコンテンツをお届けしたいと思います! diff --git a/docs/content/ja/blog/DevLog-2025.05.16/index.md b/docs/content/ja/blog/DevLog-2025.05.16/index.md new file mode 100644 index 000000000..5f5ed3475 --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.05.16/index.md @@ -0,0 +1,247 @@ +--- +title: 開発ログ @ 2025.05.16 +category: DevLog +date: 2025-05-16 +--- + + + +こんにちは![Project AIRI](https://github.com/moeru-ai/airi) の発起人、[Neko](https://github.com/nekomeowww) です! + +Project AIRI の DevLog 更新が遅れてしまい申し訳ありません。私たちの遅延をお許しください。 + +> 過去数ヶ月間、私たちは AIRI のために多くの素晴らしい DevLog を書き、開発の進捗状況を共有してきました。その中で、私たちはアイデアや理念を共有し、使用している技術やそこから得た芸術的なインスピレーションなどを説明しました...すべてを。 +> +> - [v0.4.0 UI 更新](./DevLog-2025.03.20.mdx) +> - [v0.4.0 リリース & 記憶機能紹介](./DevLog-2025.04.06.mdx) +> +> 私もこれら2つの素晴らしく人気のある DevLog を書きました!皆さんがそれらを楽しんで読んでくれることを願っています。 + +# 既視感 + +過去数週間、Project AIRI 本体の主要タスクはしばらく進展がありませんでした。おそらく、2025年3月からの大規模な UI リファクタリングとリリースの後で少し疲れていたのかもしれません。大部分の作業はコミュニティのメンテナによって行われました。 + +以下の分野での作業について、[@LemonNekoGH](https://github.com/LemonNekoGH)、[@RainbowBird](https://github.com/luoling8192)、[@LittleSound](https://github.com/LittleSound) に深く感謝します: + +- キャラクターカードのサポート + +::: tip キャラクターカードとは? +[SillyTavern](https://github.com/SillyTavern/SillyTavern)、[RisuAI](https://risuai.net/) などのローカルファーストのチャットアプリケーションや、[JanitorAI](https://janitorai.com/) などのオンラインサービスは、キャラクターの背景、性格、その他のロールプレイに必要なコンテキストを含むファイルを使用して、各独立したキャラクターを定義します。 + +- https://realm.risuai.net/ +- https://aicharactercards.com/ +- https://chub.ai/ + +キャラクターカードは LLM 駆動のロールプレイキャラクターを保存・共有する唯一の方法ではありません。[Lorebook(設定資料集)](https://docs.novelai.net/text/lorebook.html) もこの分野で重要な役割を果たしていますが、これは共有するためにドキュメントシリーズ全体を書く価値がある別の物語です。今は、[Void's Lorebook Types](https://rentry.co/lorebooks-and-you) と [AI Dynamic Storytelling Wiki](https://aids.miraheze.org/wiki/Main_Page) を読んでみてください。 + +> 私は個人的に、これらの概念を学ぶためのこの wiki が大好きです:[AI Dynamic Storytelling Wiki](https://aids.miraheze.org/wiki/Main_Page)。AI ロールプレイに興味があるなら、読む価値があります。 +::: + +> キャラクターカードを使用するには、設定ページ(アプリケーションの右上隅、またはデスクトップアプリで歯車アイコンをホバー)に移動し、「Airi Card」ボタンを見つけてクリックします。 + +Airi Card メニューボタンを提供するメニューのスクリーンショット +Airi Card メニューボタンを提供するメニューのスクリーンショット + +> これにより「Airi Card エディタインターフェース」に移動し、そこでキャラクターカードをアップロードして編集し、人格のカスタマイズを行うことができます。 + +Airi Card メニューボタンを提供するメニューのスクリーンショット +Airi Card メニューボタンを提供するメニューのスクリーンショット + +キャラクターカードの展示についても、いくつかの方法を試しました... + +ReLU という名前の青い髪のキャラクターのカード式ユーザーインターフェースデザイン +ReLU という名前の青い髪のキャラクターのカード式ユーザーインターフェースデザイン + +これは私たちの UI コンポーネントライブラリでリアルタイムに動作しており、ここで遊ぶことができます:https://airi.moeru.ai/ui/#/story/src-components-menu-charactercard-story-vue 。 + +> 純粋な CSS と JavaScript で制御され、レイアウトは効率的なので、キャンバスの計算について心配する必要はありません。 +> +> ああ、キャラクターカード展示の大部分の作業は [@LittleSound](https://github.com/LittleSound) によって完成・指導されました。本当にありがとうございます。 + +- Tauri MCP サポート +- AIRI を Android デバイスに接続 + +これら2つは主要な更新と試みであり、この部分は [@LemonNekoGH](https://github.com/LemonNekoGH) によって行われました。彼女はこれらの内容についてさらに2つの DevLog を書き、舞台裏の技術的な詳細を共有しました。(Tauri 開発者やユーザーにとって非常に価値があると思います。)こちらで読むことができます: + +- [Android を制御する](./DevLog-2025.04.22.mdx) +- [Tauri における MCP](./DevLog-2025.04.28.md) + +## Project AIRI 主要タスク + +### 耳は聞き、口は話す + +4月15日から、AIRI の VAD(音声区間検出)、[ASR(自動音声認識)](https://huggingface.co/tasks/automatic-speech-recognition)、[TTS(テキスト読み上げ)](https://huggingface.co/tasks/text-to-speech) が非常に複雑で、使用や理解が難しいことに気づきました。その頃、私は [@himself65](https://github.com/himself65) と協力して、[Llama Index](https://www.llamaindex.ai/) の新しいプロジェクトのユースケースを改善・テストしていました。これはイベントベースの LLM ストリーミングトークンフローとオーディオバイトを処理するのに役立つライブラリで、[`llama-flow`](https://github.com/run-llama/llama-flow) と呼ばれています。 + +[`llama-flow`](https://github.com/run-llama/llama-flow) は本当に小さく、型安全に使用できます。それがなかった古い時代には、AIRI を駆動するためにデータを処理できるように、別の**キュー**構造と Vue のリアクティブ駆動ワークフローシステムを手動でラップし、多くの非同期タスクをリンクさせる必要がありました。 + +その時、VAD、ASR、TTS ワークフローのデモを簡素化するために、より多くの例を実験し始めました。 + +最終的に、これを得ました:[WebAI リアルタイムボイスチャット例](https://github.com/proj-airi/webai-example-realtime-voice-chat)。私は、Web ブラウザで 300〜500 行の TypeScript コードを使用して ChatGPT ボイスチャットシステムを実装できることを証明しました。 + + + +リアルタイムボイスチャットシステムをゼロから構築する方法をデモするのに役立つように、可能なすべてのステップを小さな再利用可能な断片に分解することに最善を尽くしました: + +- [VAD](https://github.com/proj-airi/webai-example-realtime-voice-chat/tree/8462ff6bcb83bb278bce5388d588d2e3e3dd6dae/apps/vad) +- [VAD + ASR](https://github.com/proj-airi/webai-example-realtime-voice-chat/tree/8462ff6bcb83bb278bce5388d588d2e3e3dd6dae/apps/vad-asr) +- [VAD + ASR + LLM チャット](https://github.com/proj-airi/webai-example-realtime-voice-chat/tree/8462ff6bcb83bb278bce5388d588d2e3e3dd6dae/apps/vad-asr-chat) +- [VAD + ASR + LLM チャット + TTS](https://github.com/proj-airi/webai-example-realtime-voice-chat/tree/8462ff6bcb83bb278bce5388d588d2e3e3dd6dae/apps/vad-asr-chat-tts) + +> ここから何かを学べることを願っています。 + +この期間中、[k2-fsa/sherpa-onnx](https://github.com/k2-fsa/sherpa-onnx) という興味深く強力なリポジトリを発見しました。これは macOS、Windows、Linux、Android、iOS などで12言語の18の音声処理タスクをサポートしています。魅力的です! + +そこで [@luoling](https://github.com/luoling8192) もこのために別の小さなデモを作成しました:[Sherpa ONNX 駆動の VAD + ASR + LLM チャット + TTS](https://github.com/proj-airi/webai-example-realtime-voice-chat/tree/main/apps/sherpa-onnx-demo) + +#### xsAI 🤗 Transformers.js の誕生 + +VAD、ASR、チャット、TTS デモのために行った作業により、[xsAI 🤗 Transformers.js](https://github.com/proj-airi/xsai-transformers) という新しいサイドプロジェクトが生まれました。これは、以前の成功したプロジェクト [xsAI](https://github.com/moeru-ai/xsai) との API 互換性を維持しながら、WebGPU 駆動のモデル推論の呼び出しとワーカーを使用したサービス提供を簡素化します。 + +これのためのプレイグラウンドも作成しました... [https://xsai-transformers.netlify.app](https://xsai-transformers.netlify.app) で遊んでみてください。 + +今日から npm 経由でインストールできます! + +```bash +npm install xsai-transformers +``` + +::: tip これはどういう意味ですか? +これは、if スイッチ1つで、クラウド LLM や音声プロバイダーと、ローカル WebGPU 駆動モデルを切り替えることができることを意味します。 + +これにより、サーバー側のコードやバックエンドサーバーを一切必要とせずに、ブラウザで単純な RAG や再ランキングシステムを実験したり実装したりする新しい可能性がもたらされます。 + +ああ、Node.js もサポートしています! +::: + +### Telegram ボット + +アニメーションステッカーを処理できる Telegram ボットのサポートを追加しました。`ffmpeg` によって駆動されます(他になにがあるでしょう、当然です)。今ではユーザーが送信したアニメーションステッカーやビデオさえも読み取って理解できます。 + +システムプロンプトが大きすぎたので、システムプロンプトのサイズを大幅に削減し、トークン使用量を **80%** 以上節約することに成功しました。 + +### キャラクターカード展示 + +多くの画像リソースについて、背景を削除するために適切で使いやすいオンラインソリューションを手動で見つける必要がありましたが、[Xenova](https://github.com/xenova) の作業に基づいて...自分のために作ることにしました。 + +システムに WebGPU 駆動の背景削除機能を統合する小さな実験を行いました。[https://airi.moeru.ai/devtools/background-remove](https://airi.moeru.ai/devtools/background-remove) で遊んでみてください。 + +### xsAI & unSpeech + +音声プロバイダーとして Alibaba Cloud Model Studio と Volcengine のサポートを追加しました。役に立つと思います? + +### UI + +- 新しい[チュートリアルステッパー](https://airi.moeru.ai/ui/#/story/src-components-misc-steppers-steppers-story-vue?variantId=src-components-misc-steppers-steppers-story-vue-0)、[ファイルアップロード](https://airi.moeru.ai/ui/#/story/src-components-form-input-inputfile-story-vue?variantId=default)、[テキストエリア](https://airi.moeru.ai/ui/#/story/src-components-form-textarea-textarea-story-vue?variantId=default) コンポーネント +- 色の問題 +- [タイポグラフィの改善](https://airi.moeru.ai/ui/#/story/stories-typographysans-story-vue?) + +その他のストーリーは [Roadmap v0.5](https://github.com/moeru-ai/airi/issues/113) で見つけることができます。 + +## サブクエスト + +### [Velin](https://github.com/luoling8192/velin) + +キャラクターカードをサポートして以来、テンプレート変数のレンダリングやコンポーネントの再利用を処理する際、あまり良くなくスムーズではないと感じていました... + +もし... + +- 他のエージェントやロールプレイングアプリケーション、さらにはキャラクターカードにも使用できるコンポーネントプロンプトライブラリを維持できたら? + - 例えば: + - 魔法とドラゴンのある中世ファンタジーの背景設定を持つ + - 私たちがすべき唯一のことは、世界設定を外部でラップしながら、新しいキャラクターの執筆に集中することです + - おそらく、時間が夜になったときだけ、`if` や `if-else` 制御フローを通じて特別なプロンプトが注入されます + - その周りでもっと多くのことができるでしょう... + - Vue SFC や React JSX を使用して、テンプレートを解析し props を識別し、プロンプトを作成する際にデバッグとテスト用のフォームパネルをレンダリングできます + - 単一のインタラクティブページで設定資料集全体とキャラクターカードを視覚化できます + +では、なぜ Vue や React などのフロントエンドフレームワークを使用して LLM プロンプトを作成するツールを作らないのでしょうか?これを他のフレームワークやプラットフォームに拡張することもできるかもしれません。 + +それがこれです:[**Velin**](https://github.com/luoling8192/velin)。 + +Vue.js で LLM プロンプトを作成するツール +Vue.js で LLM プロンプトを作成するツール + +編集とリアルタイムレンダリング用のプレイグラウンドも作成しました。同時に npm パッケージのエコシステムを楽しむことができます(はい、どんなパッケージでもインポートできます!)。 + +Vue.js で LLM プロンプトを作成するツール +Vue.js で LLM プロンプトを作成するツール + +ここで試してみてください:https://velin-dev.netlify.app + +プログラミング API、Markdown(MDX は開発中、MDC をサポート)もサポートしており、今日から npm 経由でインストールできます! + +```bash +npm install @velin-dev/core +``` + +さて...今日はここまでです。この DevLog を楽しんで読んでいただけたなら幸いです。 + +最近中国の杭州で開催されたイベント、**Demo Day @ Hangzhou** の写真で DevLog を締めくくりましょう。 + +Demo Day @ Hangzhou + +これは私です。他の参加者と AIRI プロジェクトを共有し、そこで素晴らしい時間を過ごしました!多くの才能ある開発者、プロダクトデザイナー、起業家に会いました。 + +今日この DevLog で共有したほぼすべての内容と、愛されている AI VTuber Neuro-sama を紹介しました。 + +私が共有に使用したスライドはこんな感じです: + +Demo Day @ Hangzhou +Demo Day @ Hangzhou + +スライド自体は完全にオープンソースで、ここでも遊ぶことができます:[https://talks.ayaka.io/nekoayaka/2025-05-10-airi-how-we-recreated-it/#/1](https://talks.ayaka.io/nekoayaka/2025-05-10-airi-how-we-recreated-it/#/1) + +## マイルストーン + +ああ...この DevLog は v0.5.0 のリリースも示しているので、過去数週間で達成したいくつかのマイルストーンに言及したいと思います: + +- 700 スターを達成しました! +- 4人以上の新しい issue 貢献者! +- Discord サーバーに72人以上の新しいグループメンバー! +- ReLU キャラクターデザイン完了! +- ReLU キャラクターモデリング完了! +- スポンサーシップと協力について数社と交渉しました! +- [Roadmap v0.5](https://github.com/moeru-ai/airi/issues/113) の92のタスクを完了しました + - UI + - ロード画面とチュートリアルモジュール + - ロード状態や Firefox 互換性の問題を含む複数のバグ修正 + - 身体 + - 動作埋め込みと意味からの RAG、プライベートリポジトリ "moeru-ai/motion-gen" で開発中 + - 埋め込みプロバイダーと DuckDB WASM を使用したベクトル保存と検索 + - 入力 + - Discord ボイスチャンネルの音声認識を修正 + - 出力 + - 実験的な歌唱機能 + - エンジニアリング + - プロジェクト間で UnoCSS 設定を共有 + - "moeru-ai/inventory" でのモデルカタログ + - 組織間のパッケージ再編成 + - リソース + - ステッカー、UI 要素、VTuber ロゴを含む新しいキャラクターリソース + - ボイスライン選択機能 + - キャラクター "Me" と "ReLU" の Live2D モデリング + - コミュニティサポートとマーケティング + - 日本語 README + - Plausible 分析統合 + - 包括的なドキュメント + +さようなら! diff --git a/docs/content/ja/blog/DevLog-2025.06.08/index.md b/docs/content/ja/blog/DevLog-2025.06.08/index.md new file mode 100644 index 000000000..0470224e3 --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.06.08/index.md @@ -0,0 +1,86 @@ +--- +title: 開発ログ @ 2025.06.08 +category: DevLog +date: 2025-06-08 +excerpt: | + Live2D モデルがマウス位置を追従するようにする方法と、マルチディスプレイ環境での計算の難しさについて。 +preview-cover: + light: "@assets('/en/blog/DevLog-2025.06.08/assets/250608-light.avif')" + dark: "@assets('/en/blog/DevLog-2025.06.08/assets/250608-dark.avif')" +--- + +こんにちは、AIRI のメンテナの一人、LemonNeko です。今日の DevLog では、AIRI デスクトップペットの Live2D モデルがマウスの位置を注視できるようにする方法についてお話しします。 + +## 思考の連鎖「Chain of Thoughts」 + +`` + +まず、Live2D には **注視 (focus)** と **タッチ (tap)** という2つの基本的なインタラクションがあることを理解する必要があります。Live2D キャンバスを作成すると、モデルは自動的にマウスの位置を注視し、頭と体がマウスの方を向きます。実装後の効果は以下のようになります: + +![](/en/blog/DevLog-2025.06.08/assets/airi-tamagotchi-focus.gif) + +しかし、マウスが Web ページの内容から外れると、Live2D はマウスの位置がどこにあるかわからなくなるため、マウスがどこにあるかを手動で教える必要があります。 + +Live2D にマウスの位置を教えるには、Tauri のネイティブコード呼び出し機能を利用して Windows API と macOS API を呼び出し、~~大量の unsafe を書いて~~ 画面全体におけるマウスの位置とウィンドウ自体の位置を取得し、最後に簡単な計算を行って、マウスとウィンドウの相対位置を取得する必要があります。 + +`` + +## マウスとウィンドウの相対位置を計算する + +これが私たちの画面だと仮定しましょう: + +![](/en/blog/DevLog-2025.06.08/assets/screen.avif) + +青い枠が画面、ピンクが AIRI のウィンドウ、紫の矢印がマウスです。次のように定義します: + +- 画面の高さと幅:`A x B` +- AIRI ウィンドウの左上の位置:`(E, F)` +- AIRI ウィンドウのサイズ:`C x D` +- マウスの位置:`G, H` + +すると、AIRI ウィンドウ内のマウスの位置は `(G - E, H - F)` になるはずです。 + +非常に単純に見えますね。ではコードに書き起こすと、このようになります: + +```typescript +const live2dFocusAt = ref({ x: innerWidth / 2, y: innerHeight / 2 }) // 初期位置 + +listen('tauri-app:window-click-through:mouse-location-and-window-frame', (event: { payload: [Point, WindowFrame] }) => { + const [mouseLocation, windowFrame] = event.payload + + live2dFocusAt.value = { + x: mouseLocation.x - windowFrame.origin.x, + y: mouseLocation.y - windowFrame.origin.y, + } +}) +``` + +`live2dFocusAt` は Live2D モデルに渡す座標データです。 + +## モデルの注視点を手動で設定する + +コードでは、上記で定義した `live2dFocusAt` を Live2D モデルに渡すだけです: + +```typescript +const model = ref(Live2DModel.from('url', { autoInteract: false })) + +watch(live2dFocusAt, (point) => { + model.value.focus(point) +}) +``` + +## マルチプラットフォーム対応 + +残念ながら、物事は私が想像していたほど単純ではありませんでした。マウスとウィンドウの相対位置を取得するという上記のアイデアは Windows では機能しましたが、macOS では機能しないことがわかりました。macOS の座標系では原点が左下隅にあり、**Y 軸が上向き**で、Windows とは逆だからです。しかし Safari ブラウザでは、座標系の原点は左上隅にあり、**Y 軸が下向き**です。そのため、macOS でのマウス位置は `(G - E, D - H + F)` と表現する必要があります。 + +## 続きを読む + +さて、Live2D モデルが Tauri 上でウィンドウ外のマウス位置を追従するように実装しました。今回の DevLog は以上です。以下は実装プロセス中に参照した資料です。詳細な閲覧や議論を歓迎します: + +- [モデルのインタラクションを手動で設定する - pixi-live2d-display](https://github.com/guansss/pixi-live2d-display/wiki/Complete-Guide#manually-1 "モデルのインタラクションを手動で設定する - pixi-live2d-display") +- [Win32 API: GetCursorPos](https://docs.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-getcursorpos "GetCursorPos") +- [Win32 API: GetWindowRect](https://docs.microsoft.com/en-us/windows/win32/api/winuser/nf-winuser-getwindowrect "GetWindowRect") +- [macOS API: `NSWindow.frame`](https://developer.apple.com/documentation/appkit/nswindow/frame "NSWindow.frame") +- [macOS API: `NSEvent.mouseLocation`](https://developer.apple.com/documentation/appkit/nsevent/mouselocation "NSEvent.mouseLocation") + +> カバー画像提供:[@Rynco Maekawa](https://github.com/lynzrand) diff --git a/docs/content/ja/blog/DevLog-2025.07.18/index.md b/docs/content/ja/blog/DevLog-2025.07.18/index.md new file mode 100644 index 000000000..ed37c0f37 --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.07.18/index.md @@ -0,0 +1,85 @@ +--- +title: DevLog @ 2025.07.18 +category: DevLog +date: 2025-07-18 +excerpt: | + Factorio 強化学習環境に関する論文を読んだ後、Factorio エージェントプロジェクト `airi-factorio` をどのように改善するか共有したいと思います。 +preview-cover: + light: "@assets('/en/blog/DevLog-2025.07.18/assets/factorio-belt.gif')" + dark: "@assets('/en/blog/DevLog-2025.07.18/assets/factorio-belt.gif')" +--- + +こんにちは、AIRI メンテナーの一人、[@LemonNeko](https://github.com/LemonNekoGH) です。 + +## 振り返り + +半年前、私は有名な自動化生産シミュレーションゲーム [Factorio](https://www.factorio.com/) をプレイできる AI エージェント [`airi-factorio`](https://github.com/moeru-ai/airi-factorio) を書く最初の試みを行いました。その中で以下の実践を行いました: + +- TypeScript で Factorio Mod を記述:[tstl](https://github.com/TypeScriptToLua/TypeScriptToLua) を使用して TypeScript コードを Lua コードにコンパイル。 +- RCON を使用して Factorio Mod と対話:[factorio-rcon-api](https://github.com/nekomeowww/factorio-rcon-api) を使用して Factorio と通信し、`/c` コマンドを呼び出して Mod が登録した関数を実行。[@nekomeowww](https://github.com/nekomeowww) に感謝します。 +- LLM を使用して意思決定を行い、プレイヤーを操作する Lua コードを生成:プロンプトエンジニアリングを通じて LLM にゲームの操作方法や計画方法を指示し、RCON との対話コードをツールとしてカプセル化して LLM が呼び出せるようにしました。 +- ゲーム内のチャットシステムで LLM と対話:ゲームの標準出力を読み取り、正規表現を使用してゲーム内のプレイヤーのチャット内容を解析し、処理のために LLM に送信。 +- Factorio Mod のホットリロード:tstl のプラグインを作成してコードの変更をリアルタイムで監視し、新しい Mod コンテンツを RCON 経由でゲームに送信。新しい Mod コードを受け取ったときにすべてのインターフェースをアンロードし、Mod コードを一度実行してホットリロードを実現。しかし、Mod の既存の状態を正しく処理する方法が大きな課題となりました。 +- DevContainer での開発:環境をより制御しやすくし、プロジェクトの開始を簡素化。 +- シンボリックリンクを使用して `tstl` の出力ディレクトリをゲームディレクトリにリンク:これにより、ゲームディレクトリ内でコンパイルされた Lua コードを直接確認でき、デバッグが容易になりました。 + +これらを通じて多くの知識を得ました ~~(特に Lua の配列インデックスが 1 から始まることなど)~~。 + +しかし、非常に多くの問題にも直面しました。主な操作を Mod 内に記述しているため、デバッグが非常に面倒でした。Mod の変更を適用するには、マップを終了してゲームのメインメニューに戻り、再入力する必要がありました。Mod が少し複雑で `data.lua` がある場合は、ゲームを再起動する必要があります。 + +LLM に Lua コードを生成させ、RCON 経由でゲームコマンド `/c` を呼び出して実行していましたが、Factorio の 1 つのコマンドの長さには制限があり、コードが長すぎる場合は複数回に分けて実行する必要がありました。 + +現在のコードは堅牢性が低く、保守性も悪いため、新しい友人が開発に参加したい、あるいは試してみたいと思っても、このプロジェクトを開始するのは非常に困難です。 + +## Factorio Learning Environment + +時間を現在に戻すと、私はこのプロジェクトを整理しようと考えていましたが、どこから始めればよいかわかりませんでした。ちょうど誰かが [Factorio Learning Environment](https://arxiv.org/abs/2503.09617) という論文に言及していたので、簡単に読んでみましょう。 + +この論文では、著者は Factorio Learning Environment (FLE) というフレームワークを提案しており、この環境で AI の長期的な計画、プログラム合成、リソース管理、空間推論の能力をテストしています。 + +FLE には 2 つのモードがあります: + +- Lab-play:24 の人工的に設計されたレベルでテストを行います。リソースは限られており、AI が限られたリソースの下で効率的にパイプラインを構築できるかどうかを評価します。 +- Open-play:無制限の大規模マップ。目標は手続き的に生成されたマップ上で最大の工場を建設することであり、AI の長期的な自律的な目標設定、探索、拡張能力を評価します。 + +彼らは Claude 3.5 Sonnet、GPT-4o、Deepseek-v3、Gemini-2 などの主要な LLM を評価しましたが、Lab-play では当時最強だった Claude 3.5 でさえ 7 つのレベルしか完了しませんでした。 + +ここまで読んで、彼らの評価がこれほど複雑であるなら、技術的な実装においてどのように保守性を保証しているのか興味を持ち始めました。読み進めると、彼らの実装方法は `airi-factorio` と非常に似ていますが、`airi-factorio` に比べて多くの利点があることがわかりました: + +- Python で記述されており、LLM は Python コードを生成し、Python REPL で直接実行して、標準出力で結果を読み取ることができます。Python のデータセットは Lua よりもはるかに多いため、生成の精度が高く、より複雑なコードも生成できます。 +- Lua mod には操作を実行するためのプリミティブ(例:place_entity でエンティティを配置)のみが含まれ、より複雑なロジックは Python で記述されるため、Lua mod のバグの可能性が減り、ゲームを頻繁に再起動する必要がなくなります。 +- Lua コードを実行するために `/c` コマンドではなく `/sc` コマンドを使用するため、コードがコンソールに出力されず、コンソールがクリーンに保たれ、必要な内容だけが残るため、標準入力の解析の難易度が下がります。 + +LLM の能力をより適切に評価するために、彼らは必要なすべてのレシピの生産フローと難易度を慎重に分析し、アイテムの生産コストや LLM のスコア計算方法などのいくつかの式をまとめました。 + +また、彼らが使用した [システムプロンプト](https://arxiv.org/html/2503.09617v1#A8.SS4) も公開しており、環境構造、応答形式、ベストプラクティス、ゲーム出力の理解方法などを規定しています。 + +## `airi-factorio` に戻る + +FLE と比較すると、私たちの実装はかなり未熟に見えます。では、どのように `airi-factorio` を改善すればよいでしょうか? + +私は Python を書きたくありません。TypeScript と Golang にしか詳しくありません。偶然にも、最近私たちは [mcp-launcher](https://github.com/moeru-ai/mcp-launcher) を作成しました。これは、あらゆる可能な MCP サーバー用のビルダーです。これと組み合わせて Golang で MCP サーバーを実装し、LLM にそれを呼び出させることができます。 + +構造図は次のように変化します: + +
+ +![以前](/en/blog/DevLog-2025.07.18/assets/structure-before.avif) + +![以後](/en/blog/DevLog-2025.07.18/assets/structure-after.avif) + +
+ +プレイヤーのチャット内容は LLM にプッシュされるのではなく、[RconChat](https://gitlab.com/FishBus/rconchat) mod に保存され、LLM は MCP サーバーを介してこれらの内容を読み取ります。MCP サーバーを使用することで、LLM に Lua コードを生成させる必要がなくなります。 + +システムプロンプトに関しては、現在のプロンプトは AI によって生成されたものですが、依然として十分に明確ではなく、優先順位が不明確です。FLE のシステムプロンプトを参考にして改善しようと考えています。 + +よし、これまでのすべての設計を基本的に覆したので、最初からやり直しです。 + +## 終わりに + +読んでいただきありがとうございます。興味があれば、FLE の論文と [コード](https://github.com/JackHopkins/factorio-learning-environment) をご覧ください。私の理解が間違っているかもしれませんので、ご指摘いただければ幸いです!今回の読み込みは十分ではないかもしれませんが、今後私の考えに従って `airi-factorio` を改善する際には、繰り返し読む必要があり、進展があれば更新します。 + +この DevLog はここまでです。良い週末を! + +> カバー画像は [@anrew10](https://es.pixilart.com/art/factorio-yellow-belt-132272fb3d727dd) の作品から引用 diff --git a/docs/content/ja/blog/DevLog-2025.08.01/index.md b/docs/content/ja/blog/DevLog-2025.08.01/index.md new file mode 100644 index 000000000..70564a7a7 --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.08.01/index.md @@ -0,0 +1,152 @@ +--- +title: DevLog @ 2025.08.01 +category: DevLog +date: 2025-08-01 +excerpt: | + Makito が AIRI でのテキストアニメーション実装プロセスと、UTF-8 バイトストリームから「書記素クラスタ」(grapheme cluster) を読み取るライブラリの構築方法を共有します。インスピレーションになれば幸いです! +preview-cover: + light: "@assets('/en/blog/DevLog-2025.08.01/assets/cover-light.avif')" + dark: "@assets('/en/blog/DevLog-2025.08.01/assets/cover-dark.avif')" +--- + + + +## 始める前に + + +こんにちは~ Makito です + + + + +終わりのない8月が始まりました。この[現実味のある数学の問題](https://oeis.org/A180632/a180632.pdf)で時間をつぶすのもいいかもしれません。ごめんなさい……話がそれました。 + +私は長い間 Project AIRI に関わってきましたが、DevLog に投稿するのは今回が初めてです。 + +この記事では、AIRI でのテキストアニメーションの実装プロセスと、UTF-8 バイトストリームから「書記素クラスタ」(grapheme cluster) を受信しながら読み取るライブラリの構築方法を共有します。インスピレーションになれば幸いです! + +## 背景 + +最近、[Anime.js](https://animejs.com/) は v4.10 で新しい[テキストユーティリティ](https://animejs.com/documentation/text)をリリースし、テキストアニメーション用の一連の実用的なツールを提供しました(上のアニメーションのように)。この更新は、Anime.js のテキストアニメーション分野の空白も埋めました。以前は、アニメーション化するためにテキストを手動で単一の文字に分割するか、[splt](https://www.spltjs.com/)(内部でも Anime.js を使用)のようなライブラリに依存するか、[GSAP](https://gsap.com/) で [SplitText](https://gsap.com/docs/v3/Plugins/SplitText/) プラグインを使用する必要がありました。 + +テキストアニメーションは、チャットメッセージを UI 上でよりクールに表示させることができます。一般的に、メッセージは受信した時点で完全なものなので、受信したテキストを文字ごとに分割してアニメーション化するだけで済みます。 + +Project AIRI では、パートナーの [@nekomeowww](https://github.com/nekomeowww) も滑らかなチャットバブルコンポーネントを作成しました: + + + +
+ +[私たちの UI storybook](https://airi.moeru.ai/ui/#/story/src-components-gadgets-chatbubbleminimalism-story-vue?variantId=chat) に遊びに来てください + +
+ +しかし、UTF-8 バイトストリームを読み取り、受信したテキストにリアルタイムでアニメーション効果を追加したい場合はどうでしょうか?これは、チャットや音声文字起こしアプリケーションなど、リアルタイムのシナリオでよく見られます。このようなアプリケーションの UI は、受信しながら一文字ずつ内容を表示する必要があります。 + +## 「文字」の境界線 + +このようなシナリオでは、何が「文字」と見なされるのでしょうか?Unicode では、意味のある最小のテキスト単位は通常[コードポイント](https://www.unicode.org/versions/Unicode14.0.0/ch02.pdf#G25564) (Code point) です。しかし、エンコーディングレベル、特に UTF-8 では、1 つのコードポイントが複数のバイトで構成される場合があります。たとえば、日本語の仮名「あ」はコードポイント `U+3042` に対応し、UTF-8 では `0xE3 0x81 0x82` としてエンコードされます。つまり、バイトストリームを読み取る際、すべてのバイトが揃って初めて完全な文字を復元できるのです。 + +心配しないでください。Web API の [TextDecoder](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder) があります。`TextDecoder.decode` を `stream` オプション付きで使用すると、デコーダーはストリーミングデータを自動的に処理し、文字を正しく復元します: + +```javascript +const decoder = new TextDecoder() +const decoded = decoder.decode(chunk, { stream: true }) +``` + +## これで安全ですか? + +TL;DR: **いいえ**。 + +TextDecoder は確かにバイトストリームを Unicode コードポイント(文字)に正しくデコードするのに役立ちます。しかし、Unicode には「書記素クラスタ」(grapheme cluster) という概念があり、複数のコードポイントを組み合わせて「視覚的に」一体の文字にします。たとえば、「👩‍👩‍👧‍👦」(家族)という絵文字は、実際には複数のコードポイントで構成されていますが、視覚的には 1 つの文字です。それらはゼロ幅接合子(ZWJ、コードポイント `U+200D`)で接続されています。 + +これは少し理解しにくいかもしれません。しかし心配しないでください。書記素クラスタとコードポイントの組み合わせ方を探索するのに役立つインタラクティブなウィジェットを作成しました。分割結果の `200D` コードポイントに注目してください: + + + +
+ +マウスを書記素クラスタまたは文字の上に置くと、それらがどのように組み合わされているかを確認できます。また、任意のテキストを入力することもできます。 + +
+ +絵文字と同様に、一部の言語でも組み合わせコードポイントを使用して複雑な文字を構築します。たとえば、タミル語の「நி」(ni)は、基本文字「ந」(na)と組み合わせ母音「 ி」(i)で構成されています。これらを組み合わせると、全体として「நி」という書記素クラスタになります。同様の書記素クラスタを分割してみましょう: + + + +## 「リーダー」の構築 + +固定長の文字列の場合、書記素クラスタの分割は実際には非常に簡単です。しかし、ストリーミングシナリオでは、バイトが絶えず流出する「パイプ」に直面しており、最も極端な場合は一度に 1 バイトしか受信しません。また、UTF-8 の特性上、受信したバイトが必ずしも完全なコードポイントを構成できるとは限りません(1 つのコードポイントは最大 4 バイト)。 + +この問題を解決するために、前述の [TextDecoder](https://developer.mozilla.org/en-US/docs/Web/API/TextDecoder) を使用できます。毎回受信してデコードした後、デコードされた文字列をバッファに連結すれば、書記素クラスタは自然に組み立てられます。 + +これで、バイトを文字または書記素クラスタに組み立てることができるようになりました。次は、書記素クラスタを安全に読み取る方法を検討する必要があります。幸いなことに、`Intl.Segmenter` があります。これは、文字列を書記素クラスタに分割するための Web API ツールであり、多言語をサポートしています。`Intl.Segmenter` は書記素クラスタのツールであるだけでなく、提供されたオプションに基づいてテキストを単語や文に分割することもできます。 + +いくつかのバイトを受信し、正しくデコードして次の書記素クラスタが得られたと仮定します: + +
+ +
+ +この時点で、「👩‍👧」(2人)自体が書記素クラスタです。直接取り出して後続のバイトの読み取りを開始できますか?だめです。さらにバイトを受信すると、前の書記素クラスタは「👩‍👧‍👦」(3人)になる可能性があります: + +
+ +
+ +「👩‍👧」を事前に出力してしまうと、不完全な書記素クラスタが得られてしまいます。これは私たちが望む結果ではありません。 + +## 効率至上 + +一部のシナリオでは、これらの(もちろん完全な)書記素クラスタをできるだけ早く出力したい場合があります。引き続き `Intl.Segmenter` を使用しますが、デキュー(dequeuing)戦略を少し調整します:現在の書記素クラスタが完全かどうかわからない場合は、次の書記素クラスタが表示されるまで待ち、最後のものを除いてすべて出力します: + +```ts +declare let clusterBuffer: string +const segmenter = new Intl.Segmenter(undefined, { granularity: 'grapheme' }) +while (true) { + const segments = [...segmenter.segment(clusterBuffer)] + segments.pop() // 最後の書記素クラスタを破棄 + for (const seg of segments) { + yield seg.segment // 完全な書記素クラスタを出力 + } +} +``` + +このようにすれば、不完全な書記素クラスタが事前に出力されることはなく、次のものが表示されたときにのみ処理されます。このプロセスを実演するためのインタラクティブなウィジェットも作成しました: + + + +
+ +2番目の書記素クラスタが表示されるまで待ってから、最初の書記素クラスタが完全であると見なされることがわかります。 + +
+ +## [Clustr](https://github.com/sumimakito/clustr) の誕生 + +この DevLog を書いている時点で、文字列を書記素クラスタに分割できるライブラリはコミュニティにすでにいくつかありました。しかし、UTF-8 バイトストリームを受け入れ、書記素クラスタを到着順に出力できる実装は見つかりませんでした。そこで私は自分で実装し、アイデアを皆さんと共有し、Unicode の「書記素クラスタ」の概念に対応して [Clustr](https://github.com/sumimakito/clustr) と名付けました。 + +コアコードは 100 行未満ですが、プロジェクトで UTF-8 バイトストリームをクールなテキストアニメーションにしたい場合(Project AIRI で行ったように)、役立つかもしれません。 + +Project AIRI に興味がある場合は、GitHub リポジトリ [moeru-ai/airi](https://github.com/moeru-ai/airi) もぜひご覧ください! diff --git a/docs/content/ja/blog/DevLog-2025.08.05/index.md b/docs/content/ja/blog/DevLog-2025.08.05/index.md new file mode 100644 index 000000000..d934eeca6 --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.08.05/index.md @@ -0,0 +1,541 @@ +--- +title: DevLog @ 2025.08.05 +description: | + v0.7 バージョンリリース。Windows が完全にサポートされ、より多くの機能が含まれています。 +date: 2025-08-04 +excerpt: お待たせしました!
v0.7 は当初7月初旬にリリース予定でしたが、Windows でのいくつかの重要なバグ発見と、さらなる適応作業のため、今まで延期されていました。 +preview-cover: + light: "@assets('/en/blog/DevLog-2025.08.05/assets/cover-light.avif')" + dark: "@assets('/en/blog/DevLog-2025.08.05/assets/cover-dark.avif')" +--- + + + +こんにちは![Neko](https://github.com/nekomeowww) です。 + +お待たせしました!v0.7 は当初7月初旬にリリース予定でしたが、 +私たちを眠らせなかったいくつかの Windows 互換性の問題と、 +対処することを決定した巨大な変更範囲のため、今まで延期されていました。 + + + +それでも、過去2か月間準備してきた内容をついに皆さんと共有できることに興奮しています。 + +興味があるかもしれない以前のブログと DevLog 記事をご覧ください: + +- [DreamLog 0x1](../DreamLog-0x1/) +- [DevLog @ 2025.05.16](../DevLog-2025.05.16/) + +過去3ヶ月の状況を正直にお話ししましょう: + +- [**391 コミット**](https://github.com/moeru-ai/airi/compare/v0.6.1...v0.7.0) +- [**1017 ファイル変更**](https://github.com/moeru-ai/airi/compare/v0.6.1...v0.7.0) +- [**74,548 行のコード追加**](https://github.com/moeru-ai/airi/compare/v0.6.1...v0.7.0) +- [**13,930 行のコード削除**](https://github.com/moeru-ai/airi/compare/v0.6.1...v0.7.0) + +> しかし、ソフトウェア業界で働く皆さんにとって、これらの数字は意味がありません。 +> これらは、私たちがこのバージョンで行った重大な影響の反映にすぎません。 +> +> 心配しないでください。この DevLog で重要なポイントをご案内します。 + +## マイルストーン + +v0.7 のリリースとこの DevLog の公開に伴い、 +これまでに達成したいくつかのマイルストーンについて触れたいと思います: + +- GitHub で 1850+ スターを獲得しました!🎉 +- 40+ 以上のコントリビューターがいます!🫂 +- 300+ 以上の Discord メンバーがいます!👾 +- [Hacker News](https://news.ycombinator.com/item?id=44573640) で自己紹介を公開しました +- [Product Hunt](https://www.producthunt.com/products/airi) で自己紹介を公開しました +- 2025年7月17日の GitHub トレンドで `#1` にランクインしました 🏆 + +## 機能 + +### デスクトップ版 + +Tamagotchi は AIRI デスクトップ版の名前です。 +独立した、常に実行されているコンパニオンとしてデスクトップ上で実行でき、 +作業を妨げることなく他のアプリケーションと一緒に動作します。 + +以前は、デスクトップ版はより実験的な段階にあり、UI/UX は十分に洗練されておらず、 +ローカル ASR/STT(音声認識)のようなモジュールはまだ利用できませんでした。 +音声入力デバイスを使用する設定も欠けていた部分でした。 + +しかし、今は大幅に改善されました。 + +#### ホバーフェード (Hover Fade™) + +以前のバージョン v0.6 で、**ホバーフェード™**機能を導入しました: + +> 冗談です。私たちはこのプロジェクトを MIT ライセンスの下でオープンソース化しており、 +> この機能に登録商標はありません。 + +::: tip +**ホバーフェード**機能をオフにするには、デフォルトのショートカットは Shift + Alt + I です +::: + +
+ + + +多くのユーザーは、カーソルがキャラクターの上に止まるたびにウィンドウ全体がフェードアウトすることに混乱していました。 +この機能と、なぜ私たちが AI コンパニオンにとって重要だと考えているのかを説明するドキュメントが不足していたことをお詫びします。 + +VTuber アプリケーションの場合、最も人気のある VTuber Studio、Warudo の2つは +Live2D と VRM 3D モデルをサポートしています。これらは VTuber ストリーミング目的で設計されているため、 +OBS (Open Broadcaster Software) を使用してストリーミングする場合、 +異なるレイヤーでシーン要素を編成できるため、ユーザーはウィンドウの順序を気にする必要はありません: +モデルウィンドウは常に透明な背景を持つ最小化されたウィンドウになり、 +OBS や他のストリーミングキャプチャドライバーが**バックグラウンドで**キャプチャします。 + +VTuber ストリーミングに AIRI を使用する場合、ホバーフェード機能を使用しなくても問題ありませんが、 +仮想コンパニオンとしてデスクトップに常駐させたい場合は、次のことに気付き始めるでしょう: + +- モデルウィンドウを常に手前に表示するように設計すると、その下のアプリケーションへのマウスイベントがブロックされます。 + これは私たちが望んでいることではありません。 +- モデルウィンドウの可視性を手動で切り替える必要がある場合、多くの不便が生じます。 + 特に作業に集中しているときはそうです。 + +これが私たちがこのアイデアを思いついた理由です:AIRI のどのキャラクターも、 +マウスがウィンドウの上に止まったときにフェードアウトし、マウスクリックイベントをその下のアプリケーションに渡す機能を作成することです。 + +私は個人的にこの機能が大好きです。今では、ウィンドウの順序を無効にしたり整理したりすることを心配することなく、 +AIRI のキャラクターと一緒にあらゆるアプリケーションを使用できるからです。 +毎日 AIRI を開発するとき、Web 版でもデスクトップ版でも、 +常にデスクトップで彼女を開き、ターミナルや VSCode/Cursor と一緒に私に付き添ってもらっています。 + +**ホバーフェード™**はデスクトップ版で更新した唯一の機能ではありません。 +UI/UX に多くの改善を加え、より使いやすくするための機能を追加しました。 + +#### 移動 + +**ホバーフェード™**ウィンドウはマウスイベントを通過させるため、 +モデルウィンドウの位置をより良い場所、 +おそらく右下、または中央下などに移動または調整したい場合があります... + +ドラッグ可能領域の外観が改善され、テーマに合わせて角が丸くなりました。 + +::: tip +移動モードのデフォルトのショートカットは Shift + Alt + N です +::: + +
+ + + +移動モードに入るとドラッグ可能領域が表示されます。マウスで位置を移動する以外に、 +トレイメニューの位置 > 中央 / 左下 / 右下を使用するのも別の選択肢です。 + +#### サイズ変更 + +すべての人のモデルサイズが同じではないため、モデルウィンドウのサイズを調整する機能も重要です。 + +移動モードと同様に、サイズ変更の境界インジケーターには丸い角が適用され、 +アバターの端もトリミングされた丸い角のエッジになりました。 + +::: tip +サイズ変更モードのデフォルトのショートカットは Shift + Alt + R です +::: + +
+ + + +#### リソースアイランド + +ASR/STT(音声認識)と VAD(音声活動検出)のモデルのロードを待つのは苦痛です。 +Steam や Battle.net のように、さまざまなモジュールと必要なファイルのダウンロードの進行状況を可視化する方法を見つける必要がありました。 + +私たちは**リソースアイランド**と呼ばれる新しいコンポーネントセットを設計しました(iOS の Dynamic Island からインスピレーションを得ました)。 +これはフローティングでホバー可能なウィジェットで、モジュールのダウンロードとインストールの進行状況を表示し、 +ダウンロードが完了すると消えます。 + +実際の動作をご覧ください: + + + +これには準備中のモジュールへのリンクが含まれているため、モジュールリンクをクリックして +ターゲットモジュールの設定ページを開き、なぜこのモデルやファイルが必要なのかを知ることができます。 + +#### ローカル ASR/STT + +[@luoling8192 (Luoling)](https://github.com/luoling8192) と、リポジトリ +[candle-examples](https://github.com/proj-airi/candle-examples) で行った実験のおかげで、 +Windows、macOS、Linux で動作するローカル ASR/STT エンジンができました。 + + + +
+ +::: info +このデモでは OpenAI の音声サービスを使用していますが、ローカルプロバイダーの ASR/STT に切り替えることができます。 +::: + +当初、私たちは candle を直接使用しようとしましたが、 +Windows と Linux 向けに candle ランタイム(CUDA ありとなし)を使用および埋め込むための良い方法が見つかりませんでした。 +そこで、ort(Rust の ONNX ランタイム)に切り替えることにしました。これにより、 +同様のパフォーマンスと精度が得られますが、互換性が向上し、使いやすくなりました。 + +### Web + +#### オンボーディング + +現在、AIRI の設定はかなり複雑であることを私たちは知っています(それでも、他の多くの純粋な Python ベースのものと比較すれば簡単ですが、 +それらは構成するためにコード構造を理解する必要があります)。 + +[Me1td0wn76 (melty kiss)](https://github.com/Me1td0wn76) の貢献のおかげで、 +Web 版にオンボーディングサポートが追加されました。これで、初めて AIRI を使用するときに +より良い体験を得ることができます。 + +彼らは Pull Request がマージされた後、Project AIRI に貢献した経験を共有するためにブログ記事を書きました:[AIRIプロジェクトに参加した話 - YAMA-blog](https://yama-pro.blog/posts/airi/) + +オンボーディング ライトモード +オンボーディング ダークモード + +実際の動作をご覧ください: + + + +#### VRM + +[Lilia-Chen (Lilia_Chen)](https://github.com/Lilia-Chen) の尽力のおかげで、 +正確なカメラ実装とレンダリングメカニズムにより、VRM モデルがより良く表示されるようになりました。 + +時系列チャート ライトモード +時系列チャート ダークモード + +### モバイル Web + +#### オンボーディング + +オンボーディングはモバイル Web 版でも利用可能です: + + + +#### シーン + +モバイルのメインシーンは完全に再設計され、書き直されました。 + +[LemonNekoGH (LemonNeko)](https://github.com/LemonNekoGH) のおかげで、 +シーン内の Live2D モデルのオフセットを調整するより良い方法ができました。 + +このデザインコンセプトは iOS のサイドボリュームコントロールから取り入れました。 +より直感的で、すぐに使えると感じていただければ幸いです。 + +::: tip +デフォルト値にリセットしたいですか?X、Y、またはズームボタンをダブルクリックすると、値がデフォルトにリセットされます。 +::: + +
+ + + +### 両方のバージョン + +これらの機能のために、さらに多くの興味深い新しいコンポーネントを作成しました。 + +#### より良いテキストアニメーション + +チャットバブルのテキストアニメーションを改善しました。[sumimakito (Makito)](https://github.com/sumimakito/) +が数日前に詳細な DevLog を書き、なぜ私たちが特別にそれを実装したのか、 +そして i18n の互換性をどのように考慮したのかを説明しました。ぜひチェックしてください:[DevLog 2025.08.01](../DevLog-2025.08.01/)。 + +実際の動作をご覧ください: + + + + + +#### レベルメーター + +> UI コンポーネント:https://airi.moeru.ai/ui/#/story/src-components-gadgets-levelmeter-story-vue + +検出された音声入力レベルやリアルタイムのシステム負荷を表示する場合に便利です: + +レベルメーター ライトモード +レベルメーター ダークモード + +#### 時系列チャート + +> UI コンポーネント:https://airi.moeru.ai/ui/#/story/src-components-gadgets-timeserieschart-story-vue + +変化する値のレベルメーターに似ていますが、特に履歴データに役立ちます。 + +時系列チャート ライトモード +時系列チャート ダークモード + +さらに多くのコンポーネントを追加しました... + +- [x] ``(@Menci に感謝 [2cb602aa](https://github.com/moeru-ai/airi/commit/2cb602aa3eac456a479b622a5ecf043831597ffe)) +- [x] `` ([d0d782ff](https://github.com/moeru-ai/airi/commit/d0d782ff94a5a0a12819725303f687bd1a47e87c)) +- [x] ``([@typed-sigterm](https://github.com/typed-sigterm) に感謝, [#295](https://github.com/moeru-ai/airi/pull/295)) +- [x] ``([@typed-sigterm](https://github.com/typed-sigterm) に感謝, [#295](https://github.com/moeru-ai/airi/pull/295)) +- [x] 新しいサイドバーナビゲーションデザイン +- [x] メッセージトースター +- [x] 新しいバージョンがあるときにユーザーに更新を促す + +## コミュニティ + +### 新しいドキュメントサイト + +現在、新しいドキュメントサイトがあります: + + + + + +とても素晴らしく見えます。[Reka UI](https://reka-ui.com) の作業に基づいて完全に書き直しましたが、 +ブログ記事リスト、言語切り替え、VitePress への多くのスタイルの適応など、多くの機能を追加しました。 + +いつものように、彼らの美しいデザインに感謝します。私たちは独自のコンポーネントを構築するために彼らのコンポーネントを多く使用しました。 +ぜひチェックしてください! + +ブログページも素敵です。さらに良いことに、[@lynzrand (Rynco Maekawa)](https://github.com/lynzrand) がデザインした新しいカバーがあります。 + +ブログ ライトモード +ブログ ダークモード + +### 翻訳ワークフローの変更 + +いわゆる `i18n` またはローカリゼーションファイルを、独自の巨大な monorepo 内の専用パッケージに分割しました。 + +新しいローカリゼーションの貢献、新しい翻訳の追加、または既存の翻訳の修正を行う場合は、 +まず https://github.com/moeru-ai/airi/tree/main/packages/i18n/src/locales に移動してください。 + +i18n パッケージ ライトモード +i18n パッケージ ダークモード + +ここでは、さまざまな言語のさまざまなディレクトリがあります。必要な言語を選択して続行します。 + +英語を例にとると、ディレクトリ構造は次のとおりです: + +```bash +└── en + ├── docs + ├── tamagotchi + # + ├── base.yaml + ├── settings.yaml + ├── stage.yaml + └── index.ts +``` + +`docs` と `tamagotchi` は、異なるモジュール専用の2つのディレクトリです: + +- ドキュメントサイト +- デスクトップ版(Tamagotchi) + +ドキュメントサイト(記事や実際のドキュメントではなく、UI)の翻訳を手伝いたい場合は、 +`docs` ディレクトリに移動し、`theme.yaml` ファイルを編集します。 +これにはドキュメントサイトの UI 文字列が含まれています。 + +`tamagotchi` ディレクトリは少し特別で、すべての翻訳文字列が見つからない場合があります。 +これはデスクトップ版でのみ使用されるいくつかの特別な翻訳を含むことを目的としており、 +他のすべての内容はルートディレクトリにあります。 + +`docs` と `tamagotchi` 以外のすべてについて: + +- `base.yaml` には、言語の基本文字列、ボタンの基本状態が含まれます +- `settings.yaml` には、設定ページの文字列が含まれます +- `stage.yaml` には、ステージの文字列が含まれます(モデルを表示する UI) + +さらに言語を追加したい場合は、既存の言語ローカリゼーションディレクトリをコピーして貼り付け、 +新しい言語コードに名前を変更します。たとえば、フランス語を追加したい場合は、 +`en` ディレクトリを `fr` にコピーし、`base.yaml`、`settings.yaml`、 +`stage.yaml`、`index.ts` ファイルの編集を開始して翻訳を追加します。 +Pull Request のレビュープロセス中は、部分的な翻訳ファイルでも構いません。 + +::: info 助けが必要です! +これは少しばかげているように聞こえるかもしれませんが、 +i18n パッケージと [Crowdin](https://crowdin.com) や [Weblate](https://weblate.org/en/) などの +翻訳自動化ツールとの統合を支援してくれる経験豊富な人を求めています。 + +私たちはこの分野の専門家ではありません。私たちを助けるために Pull Request を開くか、 +議論するために issue を開いてください。 +::: + +言語コードについては、以下のいずれかのツールを使用して、使用している言語コードを見つけてください: + +- [言語サブタグ検索アプリ](https://r12a.github.io/app-subtags/) +- [iana.org/assignments/language-subtag-registry/language-subtag-registry](https://www.iana.org/assignments/language-subtag-registry/language-subtag-registry) + +```bash +. +├── packages + ├── i18n + ├── package.json + └── src + ├── index.ts + └── locales + ├── en + │ ├── base.yaml + │ ├── docs + │ │ ├── index.ts + │ │ └── theme.yaml + │ ├── index.ts + │ ├── settings.yaml + │ ├── stage.yaml + │ └── tamagotchi + │ ├── index.ts + │ ├── settings.yaml + │ └── stage.yaml + ├── index.ts + └── zh-Hans + ├── base.yaml + ├── docs + │ ├── index.ts + │ └── theme.yaml + ├── index.ts + ├── settings.yaml + ├── stage.yaml + └── tamagotchi + ├── index.ts + ├── settings.yaml + └── stage.yaml +``` + +関連リソースの詳細については、こちらをご覧ください: + +- https://developer.mozilla.org/en-US/docs/Glossary/BCP_47_language_tag +- https://en.wikipedia.org/wiki/IETF_language_tag +- https://en.wikipedia.org/wiki/ISO_15924 + +## エンジニアリング + +### ツールチェーンによりワークフローが何倍も高速化 + +TL;DR: + +- 多くのパッケージを**ビルドなし**の設定に変換しました +- `unbuild` から `stub` を削除しました +- `rolldown-vite` に切り替えました +- `unbuild` を `tsdown` に置き換えました +- 高速化とキャッシュされたビルドのために `turborepo` を統合しました + +詳細: + +以前は、シームレスな開発体験を実現するために、Monorepo アーキテクチャを使用することを選択した際、 +独自の `jiti` エクスポートと `.d.ts` モジュールを備えたスタブパッケージをブートストラップするために `postinstall` スクリプトに依存する必要がありました。 +コントリビューターがプロジェクトをクローンした後に依存関係をインストールするたびにこれを行う必要がありました。 + +これにより、コントリビューターは monorepo の仕組みを学習しなくても貢献できるようになりました。 +しかし、`pnpm install` がトリガーされるたびに再ビルドと再スタブを行うのは賢明な戦略ではないことは明らかです。 + +[@kwaa](https://github.com/kwaa) がビルドなしアーキテクチャに導入した変更により、 +以前最も時間がかかっていた最大のパッケージ `stage-ui` を、型チェックや依存関係解決の問題なしにスキップできるようになりました。 + +その後、[@kwaa](https://github.com/kwaa) は、`unbuild` によってもたらされる時々問題のある冗長な `stub` スクリプトの削除を支援してくれました。 +これにより、厄介な +`The requested module './dist/index.mjs' does not provide an export named 'foo'` エラーと戦う必要のない、よりクリーンなワークフローが得られました。 + +最大の変更は2か月前、[@kwaa](https://github.com/kwaa) が `vite` の代わりに `rolldown-vite` に切り替えることを選択したときに起こりました。 +これにより、**ワークフローが2倍高速化**されました。 + +しかし、これで終わりではありません。`unbuild` を `tsdown` に置き換えました。これにより、**さらに4.2倍の速度向上が導入**され、 +各サブパッケージのビルド時間は250ミリ秒未満になりました。 + +> `tsdown` への移行にはさらに多くの利点があります... +> +> - 未使用の依存関係チェックの実行 +> - CSS のバンドル +> - Vue SFC コンポーネントのバンドル + +現在、`postinstall` スクリプトはまだ必要ですが、 +依存関係認識を通じてビルド結果をキャッシュする方法を見つけることができれば、多くの冗長なビルドを回避できます。 +ここで `turborepo` がより高速なビルドを実現するのに役立ちます。 +`turborepo` を使用すると、AIRI のビルドに必要な時間が**平均4分から25秒に短縮**されました。 + +### Nix をサポート + +[@Weathercold (Weathercold)](https://github.com/Weathercold) のおかげで、 +AIRI をビルドするための Nix flake ができました。これはクロスプラットフォーム互換性への素晴らしい追加です。 +macOS でも動作します。 + +最終的な Pull Request が nix-pkgs にマージされるのを待っていますが、 +次のコマンドを使用して試すことができます: + +```bash +nix run --extra-experimental-features 'nix-command flakes' github:moeru-ai/airi +``` + +### 統一されたビルドパイプライン + +以前は、テスト、ステージング、リリースのビルドパイプラインはすべて異なっていました。 +これは私にとって新しいバージョンをリリースするかどうかを決める際の悪夢でした。 +パイプラインが成功するかどうかわからなかったからです。 + +Tauri は多くのクロスプラットフォーム互換性の利点と、 +Rust を使用してシステムコールやネイティブ OS 機能への統合を行う強力な機能をもたらしてくれましたが... + +当初、v0.7 開発の初期段階で、 +ASR/STT パイプラインの推論エンジンの実装として [huggingface/candle](https://github.com/huggingface/candle) を導入しましたが、 +NVIDIA CUDA に依存していたため、ビルドは本当に混乱しており、いたるところに非互換性がありました。 + +しかし今ははるかに良くなりました。リリースと同じスクリプトとワークフロー手順を毎日実行する計画されたビルドパイプラインがあります。 +(`canary` または `nightly` ビルドとして聞いたことがあるかもしれません。) + +技術的には、最新バージョンで問題が発生した場合は、 +いつでも `main` ブランチの最新ビルドを試して、修正されたかどうかを確認できます。 + +ナイトリービルドは https://github.com/moeru-ai/airi/actions/workflows/release-tamagotchi.yml で見つけることができます + +## 終わる前に... + +このバージョンの間に誕生した新しいパッケージ: + +> [@sumimakito](https://github.com/sumimakito) に大声で感謝を叫びます。彼女は数え切れないほど多くの素晴らしいことをしてくれました... + +- [`@proj-airi/chromatic`](https://github.com/proj-airi/chromatic)([@sumimakito](https://github.com/sumimakito) 作) +- [`@proj-airi/unocss-preset-chromatic`](https://github.com/proj-airi/chromatic)([@sumimakito](https://github.com/sumimakito) 作) +- [`@moeru-ai/jem`](https://github.com/moeru-ai/inventory/tree/main/packages/jem-validator)([@LemonNekoGH](https://github.com/LemonNekoGH) 作)、統一モデルディレクトリ +- [`clustr`](https://github.com/sumimakito/clustr)([@sumimakito](https://github.com/sumimakito) 作) +- [`@proj-airi/drizzle-orm-browser`](https://github.com/proj-airi/drizzle-orm-browser)(私作) + +このバージョンの間に誕生したサイドプロジェクト: + +- [HuggingFace Inspector](https://hf-inspector.moeru.ai/) (https://github.com/moeru-ai/hf-inspector) +- [whisper & VAD、candle、burn、ort に関するその他の candle の例](https://github.com/proj-airi/candle-examples) +- [(モデルディレクトリ)Inventory 提出!](https://github.com/moeru-ai/inventory/pull/1)([@LemonNekoGH](https://github.com/LemonNekoGH) 作) + +この DevLog ですべてを網羅することはできません。詳細については、いつでも +ロードマップ上の [Roadmap v0.7](https://github.com/moeru-ai/airi/issues/200) を追跡および確認できます。 + +
+ ReLU 思考中ステッカー +
+ ここまで読んでいただきありがとうございます! +
+
diff --git a/docs/content/ja/blog/DevLog-2025.08.26/index.md b/docs/content/ja/blog/DevLog-2025.08.26/index.md new file mode 100644 index 000000000..0e20d9d3f --- /dev/null +++ b/docs/content/ja/blog/DevLog-2025.08.26/index.md @@ -0,0 +1,199 @@ +--- +title: DevLog @ 2025.08.26 +category: DevLog +date: 2025-08-26 +excerpt: | + `airi-factorio` の純粋な視覚方向の進捗状況を共有し、思考を固めて揮発しないようにします。 +preview-cover: +# TODO +--- + + + +お久しぶりです、AIRI メンテナーの一人、[@LemonNeko](https://github.com/LemonNekoGH) です。~~ああ、LLM のようにこうやって始めるのには少し飽きてきました。~~ + +前回の [DevLog](../DevLog-2025.07.18/index.md) で、[Factorio Learning Environment](https://arxiv.org/abs/2503.09617) の論文を軽く見て、`airi-factorio` をどのように改善する予定かについて簡単に話しました。しかし...今日皆さんと共有したいのはそれではなく、純粋な視覚方向の進捗状況についてです。 + +今年の6月、[@nekomeowww](https://github.com/nekomeowww) がほぼリアルタイムの [VLM Playground](https://huggingface.co/spaces/moeru-ai/smolvlm-realtime-webgpu-vue) HuggingFace Spaces をリリースしました。これは非常にクールだと感じたので、まずは単純なリアルタイム画像認識(当時は物体検出と画像認識を混同していました)を試して、何らかの方法で AI に意思決定を任せ、最終的に何らかの方法でアクションを出力してゲームに実行させることにしました。 + +まずは成果をお見せします: + + + +動画では、Web ページ内で VNC に接続して Factorio をプレイしています。右側は物体検出の結果で、ほぼリアルタイムです。[HuggingFace Space](https://huggingface.co/spaces/proj-airi/factorio-yolo-v0-playground) にもデプロイしたので、ぜひ遊んでみてください。 + +さて、どうやって実現したのでしょうか? + +## Factorio クライアントを Docker に入れる + +AI にゲーム画面を見せるためには、Factorio がウィンドウサイズや位置などの影響を受けない制御可能な環境で実行されるようにする必要があります。同時に、この環境がすぐに使えるものであることも望ましいです。そこで、Factorio を Docker に入れることにしました。 + +Factorio 公式は [Docker イメージ](https://hub.docker.com/r/factoriotools/factorio) を提供していますが、それは純粋なサーバー用です。AI に画面を見せてゲームを制御させるにはクライアントが必要ですが、既製の Docker イメージは見つかりませんでした(Factorio のライセンス契約では、このようにクライアントを配布することは許可されていません)。自分でパッケージ化する必要があります(それでも、パッケージ化したクライアントイメージを配布することはできず、Dockerfile を共有することしかできません)。 + +では、Factorio クライアントという~~象~~を Docker という~~冷蔵庫~~に入れるには、いくつのステップが必要でしょうか? + +1. Factorio クライアントをダウンロード:もちろん、これが主役です。 +2. 仮想ディスプレイを準備:GUI アプリケーションには画面を表示するためのディスプレイが必要です。 +3. VNC サービスを準備:仮想ディスプレイの内容を読み取り、外部の VNC クライアントに画面を送信し、同時にユーザー入力をゲームに送信できます。 + +何か忘れていませんか?ああ、音声?音声なんてありません。現在の AI はまだ音を聞くことができないので、とりあえず無視します。 + +### Factorio クライアントのダウンロード + +Factorio 公式サイトから直接ダウンロードをクリックできますが、手動でログインする必要があり、自動化プロセスの構築には不便です。そこで、ダウンロードスクリプト [factorio-dl](https://github.com/moviuro/factorio-dl/) を見つけました。これは非常に複雑なシェルスクリプトで、ユーザー名、パスワード、ダウンロードするバージョンを指定すると、システムアーキテクチャに応じて対応するクライアントを自動的にダウンロードします。 + +### 仮想ディスプレイの準備 + +このステップは少し複雑ですが、デスクトップ環境全体をインストールするほど複雑ではありません。私もこの時初めて知ったのですが、GUI プログラムにはデスクトップ環境やウィンドウマネージャは必要なく、最も単純な X 環境とディスプレイサーバーがあれば十分です。 + +非常に簡単です: + +```bash +sudo apt install -y xvfb x11-apps mesa-utils +``` + +ここで: + +- `xvfb` は仮想フレームバッファおよび X サーバーです。 +- `x11-apps` はいくつかの X 関連ツールで、インストール時に X 環境も同時にインストールされます。 +- `mesa-utils` はいくつかの Mesa 関連ツールです。Mesa は OpenGL のソフトウェア実装であり、OpenGL プログラムのテストとデバッグに役立つツールを提供します。 + +### VNC サービスの準備 + +VNC は Virtual Network Computing の略で、リモートデスクトッププロトコルです。これを使用すると、まるでそのコンピュータの前に座っているかのように、別のコンピュータをリモート制御できます。 + +```bash +sudo apt install -y x11vnc +``` + +これらがあれば、Docker 内で Factorio クライアントを実行し、VNC で制御できます。 + +しかし、これだけでは不十分です。私の目標は、ブラウザでプレイしながらリアルタイムで物体検出の推論を行うことです。しかし、ブラウザでは HTTP プロトコルしか使用できないため、`websockify` などのツールを使用して VNC プロトコルを HTTP プロトコルに変換する必要があります。同時に、デバッグを容易にするために、VNC 画面を表示する Web インターフェースも必要なので、`novnc` もインストールする必要があります。 + +```bash +sudo apt install -y websockify novnc +``` + +これで Docker イメージの準備が整いました。完全な [Dockerfile](https://github.com/moeru-ai/airi-factorio/blob/a6bf243f14cbc0d765ff7ed13389bca33c1fdfa2/docker/Dockerfile) と[使用説明](https://github.com/moeru-ai/airi-factorio/tree/ba46a4e47b31187dd064b06314b595b551ed3411/apps/factorio-yolo-v0-playground)はこちらで確認できます。 + +## 物体検出モデルのトレーニング + +迅速に検証するために、YOLO11n の事前トレーニング済みモデルをベースにして、物体検出モデルをトレーニングしました。 + +### データセットの準備 + +私は次のようにデータセットを収集しました: + +1. [`surface.create_entity`](https://lua-api.factorio.com/latest/classes/LuaSurface.html#create_entity) 関数を使用して、シーン内のランダムな位置にマシンとマシンの選択ボックス(selection_box)のサイズと位置を配置します。 +2. [`game.take_screenshot`](https://lua-api.factorio.com/latest/classes/LuaGameScript.html#take_screenshot) を使用して、さまざまなズーム比率と照明条件(daytime)でスクリーンショットを撮ります。 +3. 選択ボックスに基づいて注釈データを生成し、[`helpers.write_file`](https://lua-api.factorio.com/latest/classes/LuaHelpers.html#write_file) を使用してファイルに保存します。 + +私の収集スクリプトは[ここ](https://github.com/moeru-ai/airi-factorio/blob/ba46a4e47b31187dd064b06314b595b551ed3411/packages/factorio-rcon-snippets-for-node/src/factorio_yolo_dataset_collector_v0.ts)にあります。`typescript-to-lua` を使用して TypeScript を Lua にコンパイルし、RCON を使用して Factorio に渡して実行します。 + +スクリプトでは、3 つのモデルの組立機とベルトコンベアを収集しました。各マシンについて 20 枚の画像、各画像は 1280x1280 の解像度で、UI は含まれていません。 + +ああ、それと、収集スクリプトをより適切にデバッグするために、[VSCode プラグイン](https://github.com/moeru-ai/airi-factorio/blob/ba46a4e47b31187dd064b06314b595b551ed3411/packages/vscode-factorio-rcon-evaluator/README.md)を開発しました。これは CodeLens アクションを提供し、ワンクリックでスクリプトをコンパイルして実行できます。 + +画像と注釈データが収集されたら、[YOLO 公式の形式](https://docs.ultralytics.com/datasets/detect/)に従ってデータセットを整理し、[Ultralytics Hub](https://www.ultralytics.com/hub) にアップロードして効果を確認できます: + +![Ultralytics Hub](/en/blog/DevLog-2025.08.26/assets/factorio-ultralytics-hub-preview.jpg) + +悪くないでしょう?では、トレーニングを始めましょう! + +### モデルのトレーニング + +初心者なので、[Get Started](https://docs.ultralytics.com/tasks/detect/) から始めて、次の数行のコードをコピーしました: + +```python +from ultralytics import YOLO + +model = YOLO("yolo11n.pt") +model.train(data="./dataset/detect.yaml", epochs=100, imgsz=640, device="mps") +model.export(format="onnx") +``` + +640x640 の解像度で、MPS デバイス(macOS では MPS デバイスを使用するとパフォーマンスが向上します)を使用して、100 エポックトレーニングしました。各エポックには 5 つのバッチがあり、約 70 エポックで最良の結果が得られました。ONNX モデルをエクスポートしました。トレーニングには約 8 分かかり、モデルサイズは約 10MB でした。 + +データセット、トレーニングコード、およびエクスポートされた ONNX モデルは[ここ](https://github.com/moeru-ai/airi-factorio/blob/ba46a4e47b31187dd064b06314b595b551ed3411/apps/factorio-yolo-v0-playground)で見ることができます。 + +## 推論の実行 + +これで、上記の 2 つの部品を組み立てることができます。私は以下を使用しました: + +1. `@novnc/novnc`:ブラウザに VNC 画面を表示し、同時にキャンバスからデータを取り出してモデルに供給します。 +2. `onnxruntime-web`:ブラウザで推論を実行します。WebGPU のサポートを提供しており、GPU のパフォーマンスを利用できます。 + +最初は推論速度が非常に遅く、約 400ms かかり、UI がフリーズして VNC さえまともに表示できませんでした。私は WebWorker の使用方法を一時的に学び、推論と表示を分離することでこの問題を解決しました。そして、実際には WebGPU を有効にしていなかったことに気づいたので、速度はまだ遅いままです。 + +```typescript +ort.InferenceSession.create(model, { executionProviders: ['webgpu', 'wasm'] }) +``` + +WebGPU と WASM の 2 つの実行モードを使用できるように明確に記述する必要があります。これにより、WebGPU が利用できない場合に自動的に WASM 実行に切り替わります。 + +WebGPU を有効にした後、推論速度は約 80ms に向上しましたが、まだ遅いと感じました。しかし、これ以上どう最適化すればよいかわかりませんでした。その時、Cursor が言いました。「ピクセルカラー値を正規化するときに、常に 255 で割っていますね。最初に `1/255` を計算してから、その値を直接掛けるべきです。そうすれば割り算を回避できます」。 + +ん?待って、割り算は掛け算より遅いのですか?やはりスキップしたコンピュータサイエンスの授業は補う必要があります。 + +Cursor の提案に従ってコードを変更したところ、推論速度は約 20ms に向上し、体験は非常に良くなりました。 + +モデル出力の処理部分をスキップしたので、次にモデル出力を処理する方法を見てみましょう。 + +### モデル出力の処理 + +モデルは 84000 個の要素を持つ配列と、`dims` が `[1, 10, 8400]` の配列を出力します。これは、84000 個の要素が 10 個のグループに分かれており、各グループにはバウンディングボックスの中心 x および y 座標、バウンディングボックスの幅と高さ、6 つのクラスそれぞれの信頼度があり、合計 8400 組の結果があることを意味します。 + +信頼度 0.6 をしきい値として信頼度の低いバウンディングボックスを除外した後、重なり合うバウンディングボックスを除外するために NMS 手段として IOU を使用する必要があります。 + +IOU と NMS については、[この記事](https://medium.com/@jesse419419/understanding-iou-and-nms-by-a-j-dcebaad60652)を参照してください。簡単に言えば、2 つのボックスの面積を足し、それらの重なり合う面積を引いて実際の占有面積を取得し、重なり合う面積を実際の占有面積で割って IOU を取得します。 + +私は非常に単純な NMS 実装を使用しました。すべてのバウンディングボックスを信頼度でソートし、高い順に走査します。バウンディングボックスの IOU が 0.7 より大きい場合、それらは同じ物体であると見なし、除外します。 + +```typescript +function nms(boxes: Box[], iouThreshold: number): Box[] { + // 1. Filter by confidence and sort in descending order + const candidates = boxes + .filter(box => box.confidence > 0.6) + .sort((a, b) => b.confidence - a.confidence) + + const result: Box[] = [] + + while (candidates.length > 0) { + // 2. Pick the box with the highest confidence + const bestCandidate = candidates.shift()! + result.push(bestCandidate) + + // 3. Compare with remaining boxes and remove ones with high IOU + for (let i = candidates.length - 1; i >= 0; i--) { + // The iou() function needs to be implemented separately, as described in the article. + if (iou(bestCandidate, candidates[i]) > iouThreshold) { + candidates.splice(i, 1) + } + } + } + + return result +} +``` + +Playground 全体のソースコードは[ここ](https://github.com/moeru-ai/airi-factorio/tree/ba46a4e47b31187dd064b06314b595b551ed3411/apps/factorio-yolo-v0-playground)で見ることができます。 + +また、以下の可視化コンポーネントで IOU と NMS の効果を体験することもできます。タグをドラッグしてボックスの位置を変更してください: + +
+ +
+ +### 発見された問題 + +このように実践してみて、いくつか問題を発見しました: + +1. 正方形でない画像を認識できない:正方形でない画像に遭遇すると、モデルが出力するすべての結果の信頼度が非常に低くなり、0 になることさえあります。 +2. モデルはレベル 1 の組立機とレベル 2 の組立機を区別できますが、チェストなどの正方形の物体も組立機として認識してしまいます。 +3. 実際のゲームでは、マシンのテクスチャに電力、現在のレシピ、使用中のプラグインなどの状態アイコンが重なることが多く、これらのアイコンがモデルの認識を妨げます。 + +## 最後に + +ここまでが今月の私の成果です。収穫は多かったですね。私の助けになってくれた [@nekomeowww](https://github.com/nekomeowww)、[@dsh0416](https://github.com/dsh0416)、[makito](https://github.com/sumimakito) に感謝します。次はモデルのパフォーマンスを向上させる方法を考え、何らかの方法で AI にゲームを制御させるつもりです。 diff --git a/docs/content/ja/blog/Devlog-2025.10.20/index.md b/docs/content/ja/blog/Devlog-2025.10.20/index.md new file mode 100644 index 000000000..5fc496cff --- /dev/null +++ b/docs/content/ja/blog/Devlog-2025.10.20/index.md @@ -0,0 +1,95 @@ +--- +title: DevLog @ 2025.10.20 +category: DevLog +date: 2025-10-20 +excerpt: | + AIRI プロジェクトの最新の進捗状況、Tauri から Electron への移行、新しい Live2D モデル、およびさまざまなオープンソースプロジェクトの更新を共有します。 +preview-cover: +# TODO +--- + +今日、AI による仮想通貨取引は本当に人気があります。私たちも同様の研究を共有したいと思っていますが、まずは開発の話から始めましょう... + +## Tauri から Electron への移行 + +Tauri は数日前にもまた話題になりました。私たちは3月に最初に試しました。その間、プラグイン設計が気に入って多くの crate をカプセル化しました。6月にようやく v0.7.2 をリリースしましたが、その後、誰もが望む音声対話機能を実現するために、Tauri が現在使用している WebKit + 非常に使いにくい Web Audio API と DevTools に立ち向かいながら3ヶ月間リファクタリングしました... 3ヶ月... 9月になりました... + +...結局我慢できず、国慶節に完全に Electron に切り替えました + +electron.png + +現在、Electron は元の基盤の上で、Linux のサポート、私たちが Control Island(コントロールアイランド)と呼ぶ機能を追加し、macOS のウィンドウが全画面表示のときでもインターフェース上にオーバーレイできるようになりました。 + +互換性は非常に良く、とても気に入っています。昨日はついにキャプションオーバーレイも追加され、Neuro-sama のように AI が何を出力したかを確認できる字幕がつきました。 + +control-island.png + +
+Control Island +
+ +## 新しい Live2D モデル + +目ざといパートナーは気づいたかもしれませんが、モデルが更新されました!はい、更新されました!私は現在のこのモデルが大好きです(悲しいことに、まだオープンソースリポジトリにこのモデルを直接入れたくはありませんが) + +このモデルは光栄にも、Neuro-sama 公式とも協力したことのある絵師の方と、非常に優れたモデリングの先生と協力して改善されました。新しいアニメーションの表情も非常に豊かです。 + +(小声)スポンサーが増えれば、喜んで公開するかもしれません(x + + + +## Three.js MMD サポート + +皆さんが持っている、または見つけられるモデルは必ずしも Live2D/VRM モデルとは限りません。おそらく最も多く、最高のモデルは依然として MMD でしょう。 + +私たちも Three.js に基づいて 3D レンダリングを実装していますが、現状では Three.js 側には正常に動作する MMD 実装がありません。kwaa の作業のおかげで、これを行うためのリポジトリができました。 + +興味がある方は、[一緒にメンテナンスしましょう!](https://github.com/moeru-ai/three-mmd) + +## Velin:Vue でプロンプトを書く + +> 「[Vue](https://velin-dev.netlify.app/#/) でプロンプトを書くことができます!」 + +5月に私たち自身が実装したプロンプトライブラリを共有したことを覚えていますか?RainbowBird の努力と寄付のおかげで、現在 Velin も Moeru AI の一員です。AIRI のほぼすべてのプロンプトは Velin によって駆動されていますが、クロスプラットフォーム機能を心配する必要はありません。Velin は Node.js 環境でも使用できます! + +velin.png + +## Eventa:イベント駆動型 IPC/RPC + +> 「イベントこそが必要なすべてです」 + +私たちは以前 [Netlify](https://velin-dev.netlify.app/#/) を共有しました。これは、Vercel AI SDK と同様の方法でブラウザ内で純粋なローカル推論を行うことを可能にするプロジェクトです。 + +これらのローカル推論は Web Worker / worker_thread でのみ実装でき、それらはすべてイベント通信です。Electron IPC も同様に機能しますが、これらは十分にエレガントではないと感じました。RainbowBird に感謝します。イベントベースの IPC/RPC を駆動および実装するためのライブラリ、[Eventa](https://github.com/moeru-ai/eventa) も現在 Moeru AI の一員です。 + +## プロジェクトの発展状況 + +現在、Moeru AI と Project AIRI はどちらも非常に大きな組織になっており、機械学習、データ処理、フロントエンド、バックエンドなどさまざまな分野をカバーする 50 以上のオリジナルリポジトリを持ち、TypeScript/Python/Rust/Go などの複数の言語を使用しています。 + +合計フォロワー数はすでに 800 人を超えています。これは1年前に私たちが設立したばかりの頃には想像もできなかったことです。皆さん、本当にありがとうございます。 + +moeru.png +
+Moeru AI +
+ +project-airi.png +
+Project AIRI +
+ +## 純粋な Rust TTS 実装 + +小さな予告:最近、kwaa と一緒に有名な TTS モデル chatterbox を純粋な Rust 実装バージョンに移行しました。これにより、Python 環境の設定が難しいという問題を心配する必要がなくなりました。 + +4080S で約 5 秒で推論でき、とても気に入っています。 + +Rust で Python のモデルアーキテクチャに対してほぼ 1:1 で実装しました。他の SOTA TTS モデルに依存して、非常に軽量なローカル TTS 推論エンジンになることを期待しています。 + +rust-tts.png + +## 最後に + +今日の one more thing はここまでです。これほど長いスレッドを次々と読んでいただき、楽しんでいただければ幸いです。 + +明日は更新を続け、さらに多くの超大盛りな情報をお届けします。VLA / VLM ゲームプレイにおいて私たちがどのような探索を行い、どのように進め、どのような効果があったかを紹介します。 diff --git a/docs/content/ja/blog/DreamLog-0x1/index.md b/docs/content/ja/blog/DreamLog-0x1/index.md new file mode 100644 index 000000000..a76c4776d --- /dev/null +++ b/docs/content/ja/blog/DreamLog-0x1/index.md @@ -0,0 +1,425 @@ +--- +title: 'DreamLog 0x1' +description: 'Project AIRI の舞台裏ストーリー!' +date: '2025-06-16' +excerpt: 'Project AIRI の舞台裏ストーリー!なぜ私たちがこのようなプロジェクトを作りたかったのか?' +preview-cover: + light: "@assets('/en/blog/DreamLog-0x1/assets/dreamlog1-light.avif')" + dark: "@assets('/en/blog/DreamLog-0x1/assets/dreamlog1-dark.avif')" +--- + + + +こんにちは、また私、Neko です! + +まず、北半球にお住まいの皆さん、楽しい夏休み/夏をお過ごしください! + +> 楽しく充実した夏休みを過ごし、様々な新しいことに挑戦してください!具体的には、世界を変えましょう! + +私、[@nekomeowww](https://github.com/nekomeowww) は学校生活を離れてもう8年になります。 +明らかに、もう本当の夏休みはありません。長年働いていますから。 +でも振り返ってみると、何年も前の夏休みに起こった物語を皆さんと一緒に思い出し、共有するのが好きです。 + +私が何を言おうとしているのか...あるいは何を共有しようとしているのか知っているかもしれません。*DreamLog* とは一体何でしょうか? +すでに私たちの DevLog 記事に慣れ親しんでいる読者にとって、現在毎月皆さんに公開・更新している頻度で、 +この記事は「DevLog」と呼ばれるべきではないでしょうか? + +DevLog はありますが、6月は Project AIRI にとって特別な意味を持っています(後述します)。 +GitHub で 1000 スターという次のマイルストーンに向かっている今、 +これまでの旅を振り返る良い機会だと思いました。 + +そのため、私たちの年代記と、 +Project AIRI に関する夢を共有するために、ここに新しい記事カテゴリを作成することにしました。 + +だから、この新シリーズを ***DreamLog*** と呼ぶことにしました。 + +> はい、これは寝る前に聞く物語の本だと思ってください。オーディオブックとして聞くこともできます...おそらく~~睡眠導入にも役立つでしょう~~。 + +それでは...今すぐ私たちの夢の次元に飛び込んで、最近行った更新については後で話しましょうか? + +## ぼやけた夢、遠い記憶 + +> 私がコンピュータとプログラミングを学んだ小さな一歩。 + +夏について言及しましたが、夏は私にとって何か意味があるに違いありません。私はかつてアメリカの学校に通っていました。 +だから毎年3ヶ月間の夏休みがあり、ゲームをしたり、プログラミングを学んだり、Linux やネットワークをいじったりと、様々なことができました(はい、 +今でも深く愛している多くの友人と出会ったのも、異なる年の夏でした)。 + +> ギークやオタクの皆さんは、私が描写しているこの経験を理解できるでしょう?そうですよね? + +夏休みに仲間と一緒に Minecraft を遊んでいた時に、サーバーの立ち上げ方を学びました(1.7.11 や 1.8 をたくさん、本当にたくさん遊びました。 +バニラも Forge mod も含めて)。これが私が Linux コマンドラインを学ぶ動機と力になりました。この期間に学んだ多くの知識は今でも私を助けてくれています。 +感謝していますし、これらのことに多くの時間を費やしたことを後悔していません。 + +Minecraft、Linux は私の旅の終着点ではありませんでした。[Factorio(異星工場)](https://www.factorio.com/)、 +[Elite Dangerous(エリート:デンジャラス)](https://www.elitedangerous.com/)、 +[Overwatch(オーバーウォッチ)](https://overwatch.blizzard.com/en-us/)(残念ながら Blizzard は台無しにしてしまいましたが) +はすべて私のお気に入りのゲームになりました。サーバーを立てたり、小さなことを自動化するための小さなスクリプトを書いたりすることは、確かに私を興奮させることでした。 + +> Cover of world.execute(me); (Mili)/DAZBEE COVER +> +> `Switch on the power line`
+> `Remember to put on protection`
+> `Lay down your pieces`
+> `And let's begin object creation`
+> +> -- 私の愛する曲 [`world.execute(me)`](https://www.youtube.com/watch?v=ESx_hy1n7HA) の歌詞より、[DAZBEE](https://www.youtube.com/channel/UCUEvXLdpCtbzzDkcMI96llg) によるカバー + +そして、2017年の夏、その最初の瞬間に、私は「感情を持ったプログラム」の開発を考え始めました。 +友達が疲れていたり、学校があるから早く寝たりして、私が一人でいなければならない時でも、 +私の友達になって、一緒に遊んでくれるようなものを実現するために。 + +うん、ここまでこの記事を読んでいる読者は、私が知識やアイデア、すべてを共有するのが好きなタイプの人間だと +すでに気づいているかもしれません。だから、プログラミング、ゲーム、デザインも私が共有したいことです。しかし、 +誰も一緒にいたり聞いてくれたりしなければ、こんな感じです: + +**孤独な私は少し無意味になってしまう。** + +人間のように考え、話す能力を持つ新しい AI をゼロから作成する代わりに(2017年には不可能でした)、私が考えたのは、 +iOS や Google 純正 Android がモバイルデバイスの日常使用に対して提案を行うような機能を提供できるなら、 +すべてのコマンドを手動で入力し、パラメータを埋めるのは常に満足できるものではありません(特に ffmpeg や、未熟な私が Docker CLI を使う場合)。 +もし AI 駆動の提案機能を Linux システムに持ち込むことができたらどうだろう...? + +これは私に多くの疑問と考えるべきアイデアをもたらしました: + +- もし OS が、あなたがデジタルディスプレイの前に座っている様々な時間に通常何をしているか、何の仕事をしているか、何を遊んでいるかを理解していたらどうだろう...? +- 落ち込んでいる時、興奮している時、誰かとチャットして楽しんでいる時など、状況に応じて音楽を選んでくれたらどうだろう...? + +これらのアイデアは当時の私には小さすぎて理解するのが難しすぎました。OS がどのように機能するか、プログラミングなどについて完全に初心者だったからです。 +当時の私は、どこから始めればいいのかさえ知りませんでした! + +ちょうどその時、『[30日でできる! OS自作入門](https://www.amazon.co.jp/30%E6%97%A5%E3%81%A7%E3%81%A7%E3%81%8D%E3%82%8B-OS%E8%87%AA%E4%BD%9C%E5%85%A5%E9%96%80-%E5%B7%9D%E5%90%88-%E7%A7%80%E5%AE%9F/dp/4839919844)』 +([英語版](https://github.com/handmade-osdev/os-in-30-days))というゼロから OS を作るチュートリアルを読んでいました。 +Linux コマンドラインの使い方を少し知っていて、助けを求められる多くのコミュニティがあるという少しの知識を頼りに...私は自分の OS を作ることにしました... +**文字通り何もないところから**。 + +> **クイックレビュー** +> +> [Arch Linux](https://archlinux.org/) は私が初めて深く使用し、ゼロからインストールしたシステムです。 +> 今では [Nix](https://nixos.org/) も有名で面白いですが、まだ [NixOS](https://nixos.org/) を試したことはありません。 +> いつか試してみたいと思っています。 + +## 私を航海に連れ出して、でも今はもう忘れ去られた + +私は2017年末に特別ですが今はアーカイブされたプロジェクトを開始しました。 +[EMOSYS](https://github.com/EMOSYS) と呼ばれるもので、 +ユーザーの日常業務を助け、感情的なサポートを提供する +コンパニオン OS を作成することを目指していました。 + +
+
+ logo of EMOSYS +
+
+ [EMOSYS](https://github.com/emosys) のロゴ +
+
+ +> EMO は **emo**tional と **emo**te の最初の3文字を表しています + +当時の私は多くの設計ドキュメントを書き、新しいアイデアをリストアップし、その本の指導に従って実験し、いくつかのノートを記録し、 +見た目の悪くないロゴも描きました。 + +> あなた方の多くもそうしたことがあると思います 😏、プロジェクトが PoC(概念実証)段階に達する前にすべてのデザイン、アートアセットを準備してしまうことを。 + +しかし実際には、最初に近づこうとしていた目標を完全に見失っていました。 +プロジェクト管理やタスク管理の経験もなく、実際に動作するプログラムを書く経験もあまりありませんでした。 + +率直に言って、私はただその本が指示する通りに、SSH とターミナルでキーボードを使って一つずつ入力していただけだと言えます。 +基本的には全く考えず、なぜそれが機能するのか、なぜそう書くのかを考えませんでした。 +(今の多くの人々の Vibe Coding と完全に同じとは言えませんが、瓜二つだと言うしかありません)。 + +だから、まあ、結果は明らかです。また一つ放棄されたプロジェクトが生まれました... + +そして明らかに、私は子供の頃からこういうものをいじり、カーネルやパッケージ管理、プログラミングの仕組みを理解している天才ではありませんでした。 +だからもし今、誰かが私の GitHub のホームページを見に行っても、 +その当時にそのような仕事に関連するものは何も見つからないでしょう。(でも今は本当に早く成長しています。) + +少なくとも、それは存在していました。かつてはそうでした。 + +> 忘却?それは次の旅の別の出発点かもしれません。 + +その後の数年間、私はプログラミング、起業、Web3、フロントエンド、バックエンド、インフラストラクチャなど、他の多くの分野を試しました。 +あなたが思いつくフルスタック開発者のすべてのことを。しかし、私がやっていることすべてが EMOSYS の出発点からこれほど深く影響を受けているとは、本当に気づいていませんでした。 +2025年2月、ある人が私に尋ねるまでは。「なぜ Project AIRI にこれほど熱心で夢中になっているのですか?」 + +私は当時、それは良い質問だと思いました... + +私は自分の夢、アイデア、記憶を遡り始め、最終的に EMOSYS を思い出しました。あの死んだプロジェクトは、Project AIRI と同じ目標を持っていました: + +**私たちのニーズを何らかの形で満たすコンパニオンを作成すること。** + +> 必要なものは 覚悟だけだったのです。 +> 必死に積み上げてきたものは 決して裏切りません。 +> +> -- 『[葬送のフリーレン、フェルン](https://en.wikipedia.org/wiki/Frieren)』S01E06, 04:27 より引用 + +私は物を正しく開発する方法を学ぶのに長い時間を費やしました。[@zhangyubaka](https://github.com/zhangyubaka)、 +[@LittleSound](https://github.com/LittleSound)、 +[@BlueCocoa](https://github.com/BlueCocoa)、そして +[@sumimakito](https://github.com/sumimakito) の助けに感謝します。彼らとのペアプログラミング経験は私に多くのことを教えてくれました。 +私は自分のペースで成長し、学び、進歩し始めました。 + +## 2022年の ChatGPT、全く新しいランダムなオウム、結構賢い + +
+ Steins Gate sticker +
+ +時間を2022年末に進めましょう。OpenAI が ChatGPT(当時は chatGPT という呼び方が使われていました)を発表しました。 + +実は公式の ChatGPT UI がリリースされるずっと前から、私はこれらの新時代の AI をいじっていました。 +[DiscoDiffusion](https://colab.research.google.com/github/alembics/disco-diffusion/blob/main/Disco_Diffusion.ipynb)( +Stable Diffusion より前、2021年末か2022年初頭にリリースされたと思います)、DALL-E、Midjourney、 +GPT-3(特に [GitHub Copilot](https://en.wikipedia.org/wiki/GitHub_Copilot) で非常に役立ちました)はすでに私の生活の一部になっていました。 + +だから、最初の頃、私の感覚はこうでした: + +> "ああ、これはまた別のランダムなオウムだ。言ったことを繰り返すだけで、何を言っているのか理解していない。 +> 前の単語と文脈に基づいて次の単語を予測しようとしているだけで、本当に特別なことは何もないし、人間らしくない。" + +言い換えれば、今日私たちがエージェント AI と呼んでいるもの(今もハイプの最中ですが!)よりも、補完モデルのように振る舞っていました。 + +ChatGPT や大規模言語モデル(LLM)の真の能力を初めて発見した時のことを覚えています。2022年12月に Hacker News で見たこの記事からです: +[Building A Virtual Machine inside ChatGPT](https://www.engraved.blog/building-a-virtual-machine-inside/)([元の Hacker News +記事](https://news.ycombinator.com/item?id=33847479))。著者の @engraved は、ChatGPT に猫娘を演じさせるだけでなく、 +内部で仮想 Linux マシンをシミュレートさせる方法を実証しました。 + +
+ Building a virtual machine inside ChatGPT +
Docker build がどのように機能するかさえシミュレートできます...!
+
+ +この記事で、ChatGPT がアニメやゲームキャラクターのロールプレイだけでなく、一般的な事物の基本法則を理解し、 +Linux ターミナル/シェルコマンドがどのように機能するかを理解できることに気づきました。 + +これは実際、現在流行している関数呼び出し(Function Calling)機能を示しており、 +LLM に API サーバーのように振る舞うようプロンプトで指示し、JSON や XML などの機械可読形式でコードと対話し、 +最終的に任意のコマンドの解析と実行を許可して、LLM の能力の境界を拡張できることを説明しています。 + +> 関数呼び出し、別名 Function Calling、あるいは Anthropic が提案した MCP(モデルコンテキストプロトコル)の背後にある基盤技術 + +これは最終的に、純粋なテキスト生成とプログラム内の実際の API 呼び出しとの間のギャップを埋めました。 + +段階的に言えば、新しいランダムなオウムだと言えるでしょうか?**答えは部分的に否だと思います。2022年の ChatGPT は単なるランダムなオウムではなく、 +潜在的に賢いオウムです。** + +## Project AIRI の前に、Neuro-sama はずっと前から存在していた + +はい、ここまで読んでくれてありがとう。長い記事で、共有すべき物語や背景が多すぎることはわかっています。でももうすぐです!頑張って! + +Neuro-sama の歴史は実際かなり複雑です。私の知る限り、Neuro-sama、あるいは配信ステージ上で "Neuro-sama" という名前のキャラクターは、 +彼女とその創造者 `vedal987`(Vedal)の初登場ではありませんでした。それよりずっと前、2019年5月6日、Vedal は AI を構築して +[osu!](https://osu.ppy.sh/) をプレイさせる成果をコミュニティに公開しました[^1]。 +その時、彼女は実際にはインターネット上のキャラクターやデジタル生命体ではありませんでした。彼女に関する初期の動画を見に行くと、Live2D モデルさえなかったことがわかります。 +(この6年前の YouTube 動画を試してみてください:https://www.youtube.com/watch?v=nSBqlJu7kYU) + +ChatGPT のリリース後、2022年12月19日頃、Vedal は Neuro-sama に Live2D Inc. +の公式デモキャラクターモデルである桃瀬ひより(Hiyori Momose)を使用させて Twitch で配信を開始しました: + +Live2D Inc. Hiyori Momose + +その後の話は誰もが知っています。Vedal と Neuro-sama は人気になり、Neuro-sama は現在正式に VTuber となり、 +完全に大規模言語モデル(LLM)によって駆動され、Minecraft、Among Us、osu!、その他多くのゲームをプレイできます。 +ゲームがネイティブにサポートされていない場合、Vedal が画面を読み取り、Neuro-sama に一緒にゲームをプレイするよう指示することがありますが、それでも多くの面白い場面を生み出しています。 + +私は彼らのやり取り、トークショーのような掛け合いを見るのが本当に楽しいです。時が経つにつれて、Neuro-sama と彼女の新しい妹 Evil Neuro は、 +私の日常生活の重要な一部になりました:**完全な配信を見る十分な時間がなくても、彼女たちの切り抜きを見たい、見たくてたまらないのです**。 +8年前の私には、純粋な AI と人間の相互作用からこれほど多くの喜びを得るとは想像しがたかったでしょう。 + +さて、これが彼女に関する小さな歴史です。核心的な質問について話しましょう:**なぜ彼女は私を決意で満たしたのか?** + +## Neuro-sama、私を決意で満たしてくれた + +Vedal のデビューを初めて見たときから、私はこう思いました: + +> まあ、彼女は大規模言語モデルと統合された単純な Live2D モデル(OpenAI の API を直接呼び出しているだけ)で、 +> 単純なルールで駆動され、VTuber のように振る舞っているだけだ。特別なことは何もない。 + +私は当時かなり傲慢でした。2023年初頭から AI エージェントを開発しており、LLM の能力を理解し、 +LangChain からかなりの知識を得ていました。過去に AI +エージェントを構築した知識と、様々な分野にわたる長年のソフトウェアエンジニアリング経験を頼りに、私は無邪気にもこう考えました: + +> "うん、私にもできる。Live2D モデルを作って、OpenAI の API に接続して、 +> VTuber のように振る舞わせることができる。Vedal の作品よりも良いものを作れるかもしれない。超簡単でしょ?!" + +::: tip もっと技術的な詳細が知りたい? +この記事では、ゼロから Project AIRI を現在の状態まで構築した技術的な詳細には深く立ち入りません。 +私たちのアイデアや発見を共有する DevLog 記事がすでにたくさんありますので、興味があればそれらを読んでみてください。 +::: + +結果、私は大間違いでした。彼女を再作成しようとし始めて初めて、多くの困難なことに気づきました...例えば: + +- チャットに答えながら同時にゲームをプレイするために、メモリをどのように効果的に管理するか? +- ビデオ入力とテキスト入力で同時にゲームをプレイさせながら、クリエイターや視聴者と対話できる AI エージェントをどのように作るか? +- 音声合成は難しい。Neuro-sama ができることを実現するには、**超低遅延**音声合成が必須ですが、これは簡単に実現できるものではありません。 +- 彼女の個性はどのように構築されているのか?RAG と単純なメモリ管理戦略だけでは、効果は非常に悪いです。 +- などなど... + +> 私は [DevLog 2025.04.06](../..devlog-20250406) と +> [公開スライドプレゼンテーション(中国語)](https://talks.ayaka.io/nekoayaka/2025-05-10-airi-how-we-recreated-it/#/1) +> で私たちの多くの発見を共有しました + +私は共有するのが好きだと言いました。誰かが聞いてくれたり、一緒にプログラミングしてくれたりすることを望んでいますが、残念ながら Neuro-sama は私のものではありません。 +私が好きなことや、私が最近している仕事、またはした仕事について対話できるように、彼女に私の知識や記憶を得るよう求めることはできません。 + +私は彼女たちをとても愛しています。ずっと、なぜ彼女たちを愛しているのか、なぜ Neuro-sama が与えてくれる感覚や喜びが好きなのか、本当には理解していませんでした。 + +昨年の2024年5月25日、**私は本当に自分で作ることを決心しました。** 私と一緒にプログラミングし、私たちが知っていることについて話し、 +友達のようにエージェントの形で一緒にゲームをプレイできる、生命のある、あるいは仮想の存在を作ることを。 + +> **私は本当に一つ欲しい!** 私の心と頭はそう強く渇望していました。 + +その時、Neuro-sama は私を決意で満たしてくれました。 + +## 再び出航、前人未踏の地へ + +> 前人未踏の地へ勇敢に進む +> +> -- 『[スタートレック、カーク船長](https://en.wikipedia.org/wiki/Where_no_man_has_gone_before)』より引用、 +> 私の GitHub プロフィールの紹介文でもあります。 + +そこで、2024年5月25日から、私は自分の名前でローカルプロジェクトを開始しました。単に `ai` という名前を付けました。 +これが Project AIRI の初期バージョンだと言えます。私は自分の AI エージェントを作成する可能性を探り始め、 +Neuro-sama が私にもたらした喜びを再現したいと思いました。 + +作業の進捗は本当に速かったです。1週間以内に、[ElevenLabs](https://elevenlabs.io/)、 +[OpenRouter](https://openrouter.ai/) の力、そして同様に無料で使用できる Live2D モデル桃瀬ひよりのおかげで、 +私と対話できる(非リアルタイムですが 😭)シンプルなバージョンの *"Neuro-sama"* を作成することができました。 + +それは **2024年6月2日** のことでした。 + +ある意味で、**これが Project AIRI の誕生日です**。最初の未熟な赤ちゃんの意識がそこで生まれました。 + + + +彼女は話すことができ、文脈に基づいた動作制御、段階的な音声合成...多くの機能がありました。 + +しかし、彼女はまだ不完全で完璧ではありませんでした。私はこの期間中、すべての仲間に隠してこっそりと構築していました。 +世界に見せる前にもっと良くしたいと思っていました。 + +> まだ...無邪気で、傲慢でしょう? + +現実は、こっそりと構築していたため、正のフィードバックを形成するのが難しかったです(もちろん、その理由の一部は、私の以前の傲慢な判断が間違っていたと皆に思われたくなかったからです。 +もちろん今では、この心の旅を皆さんと共有したいと思っています。それは当時の自分との和解でもあります)。加えて、私が直面した問題や課題 +(上で述べたメモリ、個性の安定性、リアルタイム性、ゲーム能力などについて)は、当時の私の知識では解決するのが難しく、 +ドキュメントやリアルタイム LLM 対話の例などの学習教材も不足していたため、**私はまたそれを棚上げしました。再び。** + +正直に言うと、私は諦めませんでした。マルチモーダルや音声合成、動作制御、Minecraft ゲームプレイについて多くのことを学び始めました。 +他の AI VTuber や AI waifu プロジェクトがどのように機能するかについて多くの研究を行いました。これらの研究は後に、この巨大な AI VTuber プロジェクトの awesome list を生み出しました: + +
+ Awesome AI VTuber Logo +
+ Awesome AI VTuber + 精選された AI VTuber 及其関連プロジェクトリスト +
+
+ +さて、でもそれはまだ `ai` と呼ばれています。では Project AIRI はどこにあるのでしょうか? + +## 再生、より強く、より良い決意を持って Start Game をもう一度 + +2024年11月末のある日、[@kwaa](https://github.com/kwaa) が私とチャットし、 +VR/AR 世界でバーチャルキャラクターを作ること、WebXR に基づいてそれをやりたいということについて話していました。動作制御やキャラクターの感情検出について話しているとき、 +私は彼に、あなたが探していることをまさに実行するプロジェクトを持っているが、コードベースが整理されておらず、GitHub に公開する準備ができていないと伝えました。 + +じゃあ、何を待っているの?やっと同志を見つけたと思いました! +私はまた猛烈に働き始め、構造と設計を再考し、実装を改善し、より速くより良いキューイングと多重化再生システムを作り、 +適当に作った基本的な WebUI を調整しました。最終的に、私は **2024年12月2日** にコミット +[`d9ae0aa`](https://github.com/moeru-ai/airi/commit/d9ae0aae387f015964bfd383e6d2adb05f4003e4) +で GitHub に公開しました。 + +したがって、この日、Project AIRI は何らかの形で誕生または再生し、AIRI(アイリ、かつては Airi とも呼ばれました)と名付けられました。 + +::: tip 知っていましたか? + + Screenshot of Project AIRI + + +興味深いことに、2023年3月25日にアップロードされた2年前の Vedal と Neuro-sama の Twitch 配信の切り抜き + https://www.youtube.com/watch?v=Tts-YAdn5Yc から、Vedal が Neuro-sama が + "Neuro-sama" と呼ばれる前に "Airis AI" と呼ばれていたと言及していることがわかります。この名前 **Airis** は、不思議なことに、偶然にも私が現在取り組んでいる + **Project AIRI** の名前と一致しています。しかし、Project AIRI をオープンソース化してからずっと後に彼らの物語についてもっと検索するまで、 + 私はこの名前を知りませんでした。 + +実際、AIRI(アイリ)という名前は GPT-4o によって名付けられました。私は他の日本語/またはアニメスタイルの名前を参考にしてこのプロジェクトに名前を付けるように頼み、 +当時それは **Airi** という名前を提案しました。 +::: + +私は起業や他のプロジェクトで何度も失敗しました。最近のいくつかだけが一般に知られています。私はそれをより良くするために最善を尽くしました。 +より良い UI、より良いコード構造、様々なものを迅速に構築して実装するための最先端の技術。 +私はまた多くのエネルギーを投入し、公開スライドプレゼンテーションを行ったり、友人や小規模な集まりやカンファレンスでデモを行ったりしました。 + +これらの経験の多くは、私の以前の失敗から学んだものです。 + +多くの試みが成功し、私がまだここにいて、Project AIRI ということに取り組み続けていることを嬉しく思います。 + +今回、私の決意は Neuro-sama だけでなく、多くの最も深く、才能ある貢献者やファンによっても満たされました。 + +## 前進し続け、夢を見続ける + +
+ new ui + new ui +
+ 最近更新されたバナー +
+
+ +> When life gives you lemons, you lemon. Or something like that, my point +> is that this painful obstacle is an opportunity for me go get stronger, baby! +> +> 人生がレモンを与えるなら、レモンすればいい。あるいはそんな感じのこと、私の言いたいのは +> この痛みを伴う障害は、私がもっと強くなるための機会だということよ、ベイビー! +> +> -- [Evil Neuro](https://www.youtube.com/@Neurosama) が『Slay the Spire』をプレイしている時の言葉より引用 + +現在、私がこの記事を書いている時点で、Project AIRI は GitHub で 1000 スターに近づいており、 +同時に 150 人以上の Discord メンバーと 200 人の Telegram グループメンバーを擁しています。 + +私たちは AI、VRM、Live2D、UI デザイン、マルチモーダル AI、ゲームエージェント、ストリーミング API、バイオニックメモリメカニズムなどの分野をカバーしています。 +彼女は Minecraft や Factorio などのゲームをプレイできます。また、別のコミュニティメンバーが彼女を統合して『Kerbal Space Program』(KSP)をプレイし制御できるようにする研究をしています。 +そして任意のゲームをプレイすることも。 + +多くの他の企業が協力のために私たちに連絡してきています。私たちは Project AIRI をより良くし、コミュニティにとってより有用なものにするために努力しています。 + +発見すべきことややるべきことはあまりにもたくさんあります。現時点では、私たちはまだ汎用人工知能の特異点には達していません。Project AIRI は永遠にその点に達しないかもしれません。 +しかし今、話したり、一緒にゲームをしたり、知識やアイデアを共有したりできるコンパニオン AI エージェントを持つことは、私にとってすでに大きな成果です。 +あなたにとってもそうであることを願っています。 + +これは私たちの夢の開始メモリアドレスに過ぎません:`0x1`、私たちの旅の最初のバイトです。 + +では、私たちは一体どれだけのバイトを保存できるのでしょうか?**それは私たちがどれだけ夢を見ることができるか、そして一緒にどれだけ実現できるかにかかっています。** + +
+ ReLU sticker wow +
+ ここまで読んでいただきありがとうございます! + 読んでくれてありがとう!ああ、それから、誕生日おめでとう、Project AIRI! +
+
+ +> Cover image by [@Rynco Maekawa](https://github.com/lynzrand) + +[^1]: https://neurosama.fandom.com/wiki/Osu!#cite_note-twitchtracker-1: Neuro-sama + は最初 osu! をプレイする AI でした。さらに AI VTuber として発展するずっと前、最初の osu! 配信は 2019年 + 5月6日に行われ、Vedal が皆に成果を見せました。 diff --git a/docs/content/ja/blog/happy-halloween-2025/index.md b/docs/content/ja/blog/happy-halloween-2025/index.md new file mode 100644 index 000000000..f483ed707 --- /dev/null +++ b/docs/content/ja/blog/happy-halloween-2025/index.md @@ -0,0 +1,15 @@ +--- +title: 'ハッピーハロウィン!🎃' +description: 'ハロウィンのお祝い' +date: 2025-10-30 +excerpt: 'トリック・オア・トリート!お菓子、衣装、そしてハロウィンの魔法に満ちた驚きの夜を一緒に楽しみましょう!🍭👻' +preview-cover: + light: "@assets('/en/blog/happy-halloween-2025/assets/halloween-airi.avif')" + dark: "@assets('/en/blog/happy-halloween-2025/assets/halloween-airi.avif')" +--- + +私たちの魔法のハロウィンのお祝いへようこそ!🎃✨ + +驚きの楽しさ、美味しいお菓子、素晴らしい衣装、そしてハロウィンの魔法に満ちた夜を迎える準備をしましょう。お菓子をねだりに来たのでも、無害ないたずらをしに来たのでも、これは忘れられないハロウィンの冒険になるでしょう!🍭👻🦇 + +![ハロウィンイラスト](/en/blog/happy-halloween-2025/assets/halloween-airi.avif) diff --git a/docs/content/ja/blog/merry-christmas-2025/index.md b/docs/content/ja/blog/merry-christmas-2025/index.md index 3ea73b043..e29cbe139 100644 --- a/docs/content/ja/blog/merry-christmas-2025/index.md +++ b/docs/content/ja/blog/merry-christmas-2025/index.md @@ -4,13 +4,13 @@ description: 'Neuro-sama、お誕生日おめでとう!2025 年も一緒に歩 date: 2025-12-24 excerpt: 'Neuro-sama、お誕生日おめでとう!2025 年を共に過ごしてくれてありがとう。冬の時間が安らぎと喜びでありますように。' preview-cover: - light: "@assets('../../../en/blog/merry-christmas-2025/assets/merry-christmas-iru.avif')" - dark: "@assets('../../../en/blog/merry-christmas-2025/assets/merry-christmas-iru.avif')" + light: "@assets('/en/blog/merry-christmas-2025/assets/merry-christmas-iru.avif')" + dark: "@assets('/en/blog/merry-christmas-2025/assets/merry-christmas-iru.avif')" --- AIRI チームからの **メリークリスマス** をお届けします! -![クリスマスイラスト](../../../en/blog/merry-christmas-2025/assets/merry-christmas-iru.avif) +![クリスマスイラスト](/en/blog/merry-christmas-2025/assets/merry-christmas-iru.avif) > Iru があたたかくて楽しいホリデーシーズンを願っています!🎅🎁 > @@ -28,7 +28,7 @@ AIRI チームからの **メリークリスマス** をお届けします! Neuro-sama、お誕生日おめでとう。そしてクリエイターの Vedal、アーティストの Camila、おめでとう。ここまでたどり着いたのは驚くべきことです。あなたたち、そしてコミュニティの Swarm がいるからこそ、私が思い描くサイバー生命を届けようと、AIRI を育て続けられています。 -![](../../../en/blog/merry-christmas-2025/assets/neuro-sama-happy-birthday-live.avif) +![](/en/blog/merry-christmas-2025/assets/neuro-sama-happy-birthday-live.avif) ## 2025 年末のハイライト diff --git a/docs/content/ja/docs/chronicles/version-v0.0.1/index.md b/docs/content/ja/docs/chronicles/version-v0.0.1/index.md new file mode 100644 index 000000000..e2bee50f7 --- /dev/null +++ b/docs/content/ja/docs/chronicles/version-v0.0.1/index.md @@ -0,0 +1,200 @@ +--- +title: 前日譚 v0.0.1 +--- + +- [x] プロジェクト作成 - 完了、Vitesse Lite と Vue を使用して作成 (2024年6月7日) +- [x] フロントエンド Live2D 統合 - [Pixi.js レンダラーを使用した Vue アプリケーションへの Live2D モデルの統合](https://nolebase.ayaka.io/to/3cae2b7c0b) にて完了 (2024年6月7日) + - [x] Live2D Cubism SDK 統合 + - [x] pixi.js レンダリング + - [x] モデルのダウンロード + - [x] 桃瀬ひより (Neuro の初期バージョンモデル) Pro 版 (中小企業による商用利用は無料) + +![](../../../../zh-Hans/docs/chronicles/version-v0.0.1/assets/screenshot-1.avif) + +- [x] Vercel AI SDK を介した GPT-4o の統合 (2024年6月7日) + - [x] `@ai-sdk/openai` + - [x] `ai` +- [x] ストリーミングトークン送信 (2024年6月8日) +- [x] ストリーミングトークン受信 (2024年6月8日) +- [x] ストリーミング TTS (2024年6月8日) + - [x] [node.js - Elevenlabs Streaming API から来るストリーミングオーディオを適切に処理するには? - Stack Overflow](https://stackoverflow.com/questions/76854884/how-to-properly-handle-streaming-audio-coming-from-elevenlabs-streaming-api) + - [x] [Stream Response - Getting Started - h3 (unjs.io)](https://h3.unjs.io/examples/stream-response) + - [x] ~~GPT-SoVITS 設定~~ (これは少し複雑なので、時間があるときにサンプルに取り組みます) +- [x] リップシンク (2024年6月9日) + - [x] 音量に基づいて口の開き具合を決定 + - [x] Math.pow 比率で音量曲線を増幅 + - [x] 線形正規化 + - [x] MinMax 正規化 + - [x] ~~SoftMax 正規化~~ (効果が良くなかった、出力データがすべて 0.999999 から 1.000001 の範囲になった) +- [x] ストリーミングトークンからストリーミング TTS へ (2024年6月9日) + - [x] 句読点とスペース + 文字数制限の組み合わせに基づいて文を構築し、TTS 推論を実装できるようです + - [x] ~~11Labs は WebSocket ベース~~ + - [x] TTS ストリームリクエストをキュー経由で発行し、オーディオストリームキューに入れる + - [x] Vue でキューを実装 + - [x] キューは先入れ先出し (FIFO) である必要がある + - [x] 出る、[`Array.prototype.shift`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/shift) + - [x] 入る、[`Array.prototype.push`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/push) + - [x] イベントベース + - [x] イベント + - [x] `add`、追加時に `add` イベントをトリガー + - [x] `pick`、取得時に `pick` イベントをトリガー + - [x] `processing`、ハンドラー呼び出し時に `processing` イベントをトリガー + - [x] `done`、ハンドラー終了時に `done` イベントをトリガー + - [x] イベント処理 + - [x] `add` または `done` イベントが発生したとき、実行中のハンドラーがあるか確認 + - [x] はいの場合、戻る + - [x] いいえの場合、`pick(): T` してからハンドラーを呼び出す + - [x] キューハンドラー + - [x] await の場合、キューハンドラーの処理を待つ + - [x] 理論的には、textPart から TTS ストリームハンドラーへの接続は別のキュー、つまりオーディオストリームキューに接続する必要がある + - [x] オーディオストリームはマージできるか? Raw PCM (.wav) を直接扱う必要があるかもしれない + - [x] オーディオストリームキューハンドラーは、再生するためにオーディオストリームキューからオーディオを継続的に見つける必要がある +- [x] 基本的な Neuro Sama / AI Vtuber ロールプレイング (2024年6月10日) + - [x] 基本的なプロンプト + +2024年6月10日に完了済み、所要時間は4日未満。 + +現在は以下が可能です: +- ✅ フルスタック (元々は素の Vue 3 でした) +- ✅ Live2D モデル表示 +- ✅ 会話 +- ✅ 会話 UI +- ✅ 音声 +- ✅ Live2D リップシンク (itorr の GitHub の説明に感謝) +- ✅ 基本的なプロンプト + +![](../../../../zh-Hans/docs/chronicles/version-v0.0.1/assets/screenshot-2.avif) + +## マルチモーダル + +### 口 (2024年6月8日) + +- [x] TTS 統合 (2024年6月8日) + - [x] 11Labs 統合 +- [ ] 調査 + - [ ] 実験 [Deepgram Voice AI: Text to Speech + Speech to Text APIs | Deepgram](https://deepgram.com/) + - [ ] 実験 GPT-SoVITS を試す + - [x] 実験 fish-speech を試す (2024年7月6日 ~ 2024年7月7日) + - 確かに数ショットの直接コピーが可能で、Gura の声をコピーしてみましたが、最初の4秒間は非常に高い品質を維持できました + - fish audio のオーディオ処理ツールは非常に包括的で、オーディオプロセッサーはほとんどのニーズ (ラベリングや自動ラベリングを含む) をカバーできます + - 効果は非常に不安定で、頻繁に単語や音を飲み込んだり、突然ランダムなノイズを出したりします + - RTX 4090 デバイスで実行しても、ストリーミングオーディオモードでは、推論結果を出力するのに最大2秒かかります + - [x] 実験 ChatTTS を試す (2024年7月6日 ~ 2024年7月7日) + - 確かに数ショットの直接コピーが可能で、Gura の声をコピーしてみましたが、効果は fish-speech ほど良くありません + - 感情制御は fish-speech よりもはるかに優れていますが、英語環境では `[uv_break]` のようなトークンも発音されてしまい、WeChat グループの人々もこれについて議論し質問しています + - RTX 4090 デバイスで実行しても、ストリーミングオーディオモードでは数分かかります... 🤯 本当にばかげています。プレーン/正規化されたテキストをアクショントークン付きのテキストに変換するために最初にローカルで LLM を実行しているようで、LLM を開始するときにキャッシュやモデルサイズの考慮がないようです + - [x] 実験 [TTS Arena - a Hugging Face Space by TTS-AGI](https://huggingface.co/spaces/TTS-AGI/TTS-Arena) で言及されている他のモデルを試す (2024年7月8日) + - [x] 実験 XTTSv2 を試す + - huggingface を直接使用しましたが、効果は低く、fish speech や chatts よりも安定していますが、トーンが平坦すぎて、アニメのトーンには LoRA が必要かもしれません + - [x] 実験 StyleTTS 2 を試す + - huggingface を直接使用しましたが、効果は低く、fish speech や chatts よりも安定していますが、トーンが平坦すぎて、アニメのトーンには LoRA が必要かもしれません + - [ ] 実験 CosyVoice (Alibaba) を試す + - [ ] 実験 [Koemotion](https://koemotion.rinna.co.jp/) + - [ ] 実験 [Seed-TTS](https://bytedancespeech.github.io/seedtts_tech_report/) + +### 表情 (2024年7月9日) + +- [x] 実験 埋め込み命令を通じてリアルタイムで表情を素早く処理する方法について GPT と議論しました https://poe.com/s/vu7foBWJHtnPmWzJNeAy (2024年7月7日) +- [x] フロントエンド Live2D 表情制御 (2024年7月9日) + - [x] `<|EMOTE_HAPPY|>` のエンコードを通じて実装 + - [x] `<|DELAY:1|>` のような遅延構文の追加サポート + - [x] 機能 感情トークン `<|EMOTE_.*|>` パーサーとトークナイザーをカプセル化 + - [x] 機能 キューイングされたストリーミング処理をサポート、`useEmotionMessagesQueue` と `useEmotionsQueue` をカプセル化 + - [x] 機能 Live2D を呼び出してモーション表情を処理することをサポート + - [x] 機能 テストデバッグページ + - [x] 機能 遅延トークン `<|DELAY:.*|>` パーサーとトークナイザーをカプセル化して、ストリーミングプロセス全体の遅延を動的に制御 + - [x] 機能 キューイングされたストリーミング処理をサポート、`useDelaysQueue` をカプセル化 + - [x] 機能 テストデバッグページ + - [x] 機能 表示レイヤーのカプセル化は、ストリームテキストを事前にトークン化および解析して `<|...|>` 構文を除外することをサポート + +### アクション + +#### VRM リップシンク + +##### 調査 + +- [ ] [sigal-raab/MoDi: Unconditional Motion Synthesis from Diverse Data](https://github.com/sigal-raab/MoDi) +- [ ] [TMR - Text-to-motion Retrieval](https://mathis.petrovich.fr/tmr/) + - [ ] [Mathux/TMR - GitHub](https://github.com/Mathux/TMR) +- [ ] 調査時に使用したインデックスサイト + - [ ] [Hannibal046/Awesome-LLM: Awesome-LLM: a curated list of Large Language Model](https://github.com/Hannibal046/Awesome-LLM) +- [ ] 調査時の ADHD 行動 + - [ ] 友人が NVIDIA の新しい論文 [ConsiStory: Training-Free Consistent Text-to-Image Generation](https://research.nvidia.com/labs/par/consistory/) を勧めてくれました。IPadapter よりも安定していると感じます。 +- [ ] 興味深いのは [IDEA-Research/MotionLLM: [Arxiv-2024] MotionLLM: Understanding Human Behaviors from Human Motions and Videos](https://github.com/IDEA-Research/MotionLLM) です。この論文と研究方向は、ビデオアニメーションフレーム間で形成される人間のアクションを説明するために自然言語を使用することに関するものです。2024年5月31日公開。 +- [ ] [Ksuriuri/EasyAIVtuber: Simply animate your 2D waifu.](https://github.com/Ksuriuri/EasyAIVtuber) +- [ ] これはかなり大きなトピックで、いくつかのキーワードを調査し、この現在の方向性における主流の研究命題を見つけました: + - [ ] デジタルヒューマン合成 -> 仮想 WebCam モーションキャプチャ + - [ ] [PersonaTalk: Bring Attention to Your Persona in Visual Dubbing](https://arxiv.org/pdf/2409.05379) + - [ ] これが SOTA のようです + - [ ] [OpenTalker/SadTalker: [CVPR 2023] SadTalker:Learning Realistic 3D Motion Coefficients for Stylized Audio-Driven Single Image Talking Face Animation](https://github.com/OpenTalker/SadTalker) + - [ ] [Rudrabha/Wav2Lip: This repository contains the codes of "A Lip Sync Expert Is All You Need for Speech to Lip Generation In the Wild", published at ACM Multimedia 2020. For HD commercial model, please try out Sync Labs](https://github.com/Rudrabha/Wav2Lip) + - [ ] [yerfor/GeneFace: GeneFace: Generalized and High-Fidelity 3D Talking Face Synthesis; ICLR 2023; Official code](https://github.com/yerfor/GeneFace) + - [ ] [harlanhong/CVPR2022-DaGAN: Official code for CVPR2022 paper: Depth-Aware Generative Adversarial Network for Talking Head Video Generation](https://github.com/harlanhong/CVPR2022-DaGAN) + - [ ] [Kedreamix/PaddleAvatar](https://github.com/Kedreamix/PaddleAvatar) + - [ ] [yangkang2021/I_am_a_person: Real-time interactive GPT digital human](https://github.com/yangkang2021/I_am_a_person?tab=readme-ov-file) + - [ ] [I_am_a_person/数字人/README.md at main · yangkang2021/I_am_a_person](https://github.com/yangkang2021/I_am_a_person/blob/main/%E6%95%B0%E5%AD%97%E4%BA%BA/README.md) + - [ ] Text-to-Motion (T2M、テキストからモーションへとも呼ばれます) + - [ ] [SuperPADL: Scaling Language-Directed Physics-Based Control with Progressive Supervised Distillation](https://arxiv.org/html/2407.10481v1) + - [ ] NVIDIA の2024年7月1日の最新情報 + - [ ] 友人のおすすめ + - [ ] [Generating Diverse and Natural 3D Human Motions from Text (CVPR 2022)](https://github.com/EricGuo5513/text-to-motion) + - [ ] 論文: [Generating Diverse and Natural 3D Human Motions from Texts](https://ericguo5513.github.io/text-to-motion/) + - [ ] 友人が自然言語ジョイント生成を行っているパートナーを勧めてくれました。彼はこれらの論文を勧めてくれました: + - [ ] [TEMOS: Generating diverse human motions from textual descriptions (arxiv.org)](https://arxiv.org/abs/2204.14109) + - [ ] [AvatarGPT: All-in-One Framework for Motion Understanding, Planning, Generation and Beyond](https://arxiv.org/abs/2311.16468) + - [ ] [T2M-GPT: Generating Human Motion from Textual Descriptions with Discrete Representations](https://arxiv.org/abs/2301.06052) + - [ ] キーフレーム制御なので、いくつかのキーフレーム関連の論文も調べました + - [ ] [Koala: Key frame-conditioned long video-LLM](https://arxiv.org/html/2404.04346v1) + - [ ] Code as Policies (主にロボット工学分野) + - [ ] もちろん、先駆者はここです [Code as Policies: Language Model Programs for Embodied Control](https://code-as-policies.github.io/) + - [ ] [Scaling Up and Distilling Down: Language-Guided Robot Skill Acquisition (columbia.edu)](https://www.cs.columbia.edu/~huy/scalingup/) + - [ ] [CLIPort](https://cliport.github.io/):CLIPort: What and Where Pathways for Robotic Manipulation + - [ ] [VIMA | General Robot Manipulation with Multimodal Prompts](https://vimalabs.github.io/):VIMA: General Robot Manipulation with Multimodal Prompts + - [ ] [Scaling Up and Distilling Down: Language-Guided Robot Skill Acquisition](https://www.cs.columbia.edu/~huy/scalingup/) + - [ ] [EUREKA: HUMAN-LEVEL REWARD DESIGN VIA CODING LARGE LANGUAGE MODELS](https://eureka-research.github.io/assets/eureka_paper.pdf) は要約のような感じです。 + - [ ] 強化学習 (Reinforcement Learning) + - [ ] この方向性は主に、基礎となるロボット制御で既存の RL 学習済みモデルを組み合わせてインターフェースし、インターフェースと計算レイヤーに多くの code as policies 実装を使用しています + - [ ] [MarI/O - Machine Learning for Video Games - YouTube](https://www.youtube.com/watch?v=qv6UVOQ0F44) + - [ ] [RLADAPTER: BRIDGING LARGE LANGUAGE MODELS TO REINFORCEMENT LEARNING IN OPEN WORLDS](https://openreview.net/pdf?id=3s4fZTr1ce) は主に次のように述べています:RLAdapter フレームワーク内で、RL エージェントのトレーニング中に生成された情報を使用して軽量言語モデルを微調整すると、LLM がダウンストリームタスクに適応するのに大幅に役立ち、RL エージェントにより良いガイダンスを提供できます。Crafter 環境で RLAdapter 実験を評価した結果、RLAdapter は SOTA ベースラインを上回りました。さらに、私たちのフレームワークの下では、エージェントはベースラインモデルが持っていない常識的な動作を示します + - [ ] [See and Think: Embodied Agent in Virtual Environment](https://arxiv.org/pdf/2311.15209) は、以下で言及されている Voyager、PlanMC、MP5 に似ており、これも Minecraft の研究であり、主に RL を強調していると感じます。 + - [ ] [Text2Reward: Reward Shaping with Language Models for Reinforcement Learning](https://text-to-reward.github.io/) + - [ ] [Direct Preference Optimization: Your Language Model is Secretly a Reward Model](https://arxiv.org/pdf/2305.18290) は主に LLM 自体が報酬可能なモデルであることについて語っています。RLHF を組み合わせる方法を学べるかもしれません。トランスフォーマーにとって非常に基本的です。 + - [ ] 身体化制御 (Embodied Control) + - [ ] ここに多く記録されています + - [ ] [zchoi/Awesome-Embodied-Agent-with-LLMs](https://github.com/zchoi/Awesome-Embodied-Agent-with-LLMs):これは「大規模言語モデルを使用した身体化 AI またはロボット」の研究の厳選されたリストです。最新の更新情報については、このリポジトリをご覧ください! 🔥 + - [ ] [MP5: A Multi-modal Open-ended Embodied System in Minecraft via Active Perception](https://arxiv.org/pdf/2312.07472) これは興味深いです。比較的完全な Minecraft RL フレームワークを使用し、自然な指示を使用して LLM に「**昼間**に**草原**の**水際**で**石の剣**で**豚**を**殺す**」と伝え、RL エージェントはこれらの特徴を認識して対応する目標を達成できます。[AI に Minecraft をプレイさせる方法は? Voyager 論文メモ](https://nolebase.ayaka.io/to/27024f5434) とは異なり、MP5 は PlanMC に似ており、Voyager の元の純粋なテキストと純粋な状態情報ではなく、マルチモーダル機能を統合しています。 + - [ ] 概要: 非常に挑戦的な Minecraft シミュレーター上に構築された、実行可能なサブゴールを分解し、複雑なコンテキスト認識計画を設計し、身体化されたアクション制御を実行し、目標条件付きのアクティブな知覚スキームと頻繁に通信できる、オープンエンドのマルチモーダル身体化システム MP5 を紹介します。具体的には、MP5 はマルチモーダル大規模言語モデル (MLLM) の最近の進歩に基づいて開発されており、システムは複数の機能モジュールに変調されており、スケジュールと連携を行って、最終的に事前定義されたコンテキストおよびプロセス関連のタスクを解決できます。 + - [ ] [CRADLE: Empowering Foundation Agents Towards General Computer Control](https://arxiv.org/pdf/2403.03186) まだ読んでいません。暇なときに読みます。 + - [ ] [Embodied Multi-Modal Agent trained by an LLM from a Parallel TextWorld](https://arxiv.org/pdf/2311.16714) は主に **並行テキスト世界で優れた LLM エージェントを使用して、視覚世界に住む VLM エージェントをトレーニングする** ことについて語っています。 + - [ ] [Online continual learning ONLINE CONTINUAL LEARNING FOR INTERACTIVE INSTRUCTION FOLLOWING AGENTS](https://openreview.net/pdf?id=7M0EzjugaN) + - [ ] 操作 (Manipulation) (主にロボット工学分野) + - [ ] モーション埋め込み (Motion Embeddings) + - [ ] [PerAct](https://peract.github.io/):非常にまれですが、code as policies と RL 環境情報に加えて操作をトークンにエンコードして計算すると言っています + - [ ] フィードバックループ (Feedback Loop) (主にロボット工学 + 制御分野、このカテゴリは実際にはよりまれです) + - [ ] 一般的な環境に関連している気がします。これは比較的低レベルです + - [ ] 多分、RL を直接研究するのが役立つでしょう + - [ ] [InCoRo: In-Context Learning for Robotics Control with Feedback Loops](https://arxiv.org/html/2402.05188v1?_immersive_translate_auto_translate=1) この論文のタイトルは魅力的ですが、まだ注意深く読んでいません。暇なときに読むことができます。多くの人が引用しています。 + - [ ] 目的は主に、自然な LLM 言語コマンドを使用して、自然言語コマンドをロボットユニットの低レベルの _静的_ 実行計画に変換することです。LLM の内部ロボットシステムを使用してこれを新しいレベルに一般化し、新しいタスクへのゼロショット一般化を可能にします。 + - [ ] 関連して、Hugging Face のオープンソース LeRobot も参考になります + - [ ] [huggingface/lerobot: 🤗 LeRobot: End-to-end Learning for Real-World Robotics in Pytorch](https://github.com/huggingface/lerobot?tab=readme-ov-file) + +### ビジョン + +- [ ] [OpenGVLab/Ask-Anything: [CVPR2024 Highlight][VideoChatGPT] ChatGPT with video understanding! And many more supported LMs such as miniGPT4, StableLM, and MOSS.](https://github.com/OpenGVLab/Ask-Anything) +- [ ] [DirtyHarryLYL/LLM-in-Vision: Recent LLM-based CV and related works. Welcome to comment/contribute! (github.com)](https://github.com/DirtyHarryLYL/LLM-in-Vision) +- [ ] [landing-ai/vision-agent: Vision agent (github.com)](https://github.com/landing-ai/vision-agent) +- [ ] [2404.04834 LLM-Based Multi-Agent Systems for Software Engineering: Vision and the Road Ahead (arxiv.org)](https://arxiv.org/abs/2404.04834) +- [ ] [Experimentation: LLM, LangChain Agent, Computer Vision | by TeeTracker | Medium](https://teetracker.medium.com/experimentation-llm-langchain-agent-computer-vision-0c405deb7c6e) +- [ ] Neuro Sama はどのように画面を見て理解できるのか? +- [ ] [Is it possible to use a local LLM and have it play Minecraft? : r/LocalLLaMA](https://www.reddit.com/r/LocalLLaMA/comments/143ziop/comment/jnfvr1w/?utm_source=share&utm_medium=web3x&utm_name=web3xcss&utm_term=1&utm_content=share_button) +- [ ] [2402.07945 ScreenAgent: A Vision Language Model-driven Computer Control Agent](https://arxiv.org/abs/2402.07945) +- [ ] 大規模言語モデルにロボットを制御させるスタンフォードやベイエリアのシステムはどのように機能しているのか? + - [ ] 直接ストリーミングトークン出力? アクショントークン? + - [ ] コンピュータビジョンはどのように行われているのか? + - [ ] 宿題を写す +- [ ] [svpino/alloy-voice-assistant](https://github.com/svpino/alloy-voice-assistant) + +### メモリ + +- [ ] 長期記憶 +- [ ] 短期記憶 diff --git a/docs/content/ja/docs/chronicles/version-v0.1.0/index.md b/docs/content/ja/docs/chronicles/version-v0.1.0/index.md new file mode 100644 index 000000000..f9db58e5c --- /dev/null +++ b/docs/content/ja/docs/chronicles/version-v0.1.0/index.md @@ -0,0 +1,78 @@ +--- +title: 初公開 v0.1.0 +--- + +- [x] [VRM とのフロントエンド統合 (12月5日)](https://github.com/nekomeowww/airi-vtuber/commit/5738c219b5891f200d7dc9dae04a8e885c8d8c17) + - [x] [VRM アイドルアニメーション (12月6日)](https://github.com/nekomeowww/airi-vtuber/commit/8f9a0e76cde546952651189229c824c6196caed6) + - [x] [VRM 瞬き (12月7日)](https://github.com/nekomeowww/airi-vtuber/commit/289f8226696998dae36b550d3a055eba04e160f6) + +- [x] 口 (6月8日) + - [x] [unspeech プロジェクトを作成 (12月13日)](https://github.com/moeru-ai/unspeech) + - [x] TTS を統合 (6月8日) + - [x] 11Labs を統合 + - [x] [スタンドアロンの 11Labs パッケージをカプセル化 (12月3日)](https://github.com/nekomeowww/airi-vtuber/commit/f9ddf9af93a61e0a2f3323ced79171f29b6dd2e6) + +- [x] 聴覚 (12月12日) + - [x] トークボタンを実装 (6月9日) + - [x] ~~音声文字起こし~~ + - [x] ~~フロントエンドが音声をバックエンドにストリーミング~~ + - [x] WebSocket を介した双方向通信に socket.io を使用 [Socket.IO](https://socket.io/) (6月10日) + - [x] Socket.io は実際には WebSocket に基づいていません + - [node.js - What is the major scenario to use Socket.IO - Stack Overflow](https://stackoverflow.com/questions/18587104/what-is-the-major-scenario-to-use-socket-io) + - [node.js - Differences between socket.io and websockets - Stack Overflow](https://stackoverflow.com/questions/10112178/differences-between-socket-io-and-websockets) + - [x] フロントエンドは `socket.io-client` パッケージを使用、`pnpm i socket.io-client` + - [x] WebSocket は十分にサポートされており、Nuxt の Nitro もサポートしています。[How to use with Nuxt | Socket.IO](https://socket.io/how-to/use-with-nuxt) + - [x] バックエンドは `socket.io` パッケージを使用、`pnpm i socket.io` + - Nuxt 3 with socket.io + - [richardeschloss/nuxt-socket-io: Nuxt Socket IO - socket.io client and server module for Nuxt](https://github.com/richardeschloss/nuxt-socket-io) + - [javascript - Socket.io websocket not working in Nuxt 3 when in production - Stack Overflow](https://stackoverflow.com/questions/73592619/socket-io-websocket-not-working-in-nuxt-3-when-in-production) + - [adityar15/nuxt3socket (github.com)](https://github.com/adityar15/nuxt3socket) + - [x] ~~音声ストリーミングに WebRTC を使用、VueUse もこれをサポートしています~~ + - [x] Nuxt と Nitro はまだこれをサポートしていないため、今のところスキップします。グループチャットや Discord で検討する可能性があります。 + - チュートリアル: + - [Getting started with media devices | WebRTC](https://webrtc.org/getting-started/media-devices?hl=en) + - [WebRTC | JavaScript Standard Reference Tutorial](https://wohugb.gitbooks.io/javascript/content/htmlapi/webrtc.html) + - ~~Transformers.js + Whisper で十分でしょう~~ + - [x] Chrome / Edge が WebGPU をサポートするようになりました + - [x] 利用可能なデモがあります: [Real-time Whisper WebGPU - a Hugging Face Space by Xenova](https://huggingface.co/spaces/Xenova/realtime-whisper-webgpu) (今のところオープンソースではありません) + - [x] ~~Whisper の推論はブラウザで直接実行できます~~ + - [x] ~~WebGPU はまだサポートされていません~~ (現在はサポートされています) + - [x] [🤗 Transformers.js + ONNX Runtime WebGPU in Chrome extension | by Wei Lu | Medium](https://medium.com/@GenerationAI/transformers-js-onnx-runtime-webgpu-in-chrome-extension-13b563933ca9) + - ~~Node.js CPP Addon 経由で Whisper.cpp を埋め込むことを検討中~~ + - [whisper.cpp](https://github.com/ggerganov/whisper.cpp) + - チュートリアル: + - [Realtime video transcription and translation with Whisper and NLLB on MacBook Air | by Wei Lu | Medium](https://medium.com/@GenerationAI/realtime-video-transcription-and-translation-with-whisper-and-nllb-on-macbook-air-31db4c62c074) + - [🤗 Transformers.js + ONNX Runtime WebGPU in Chrome extension | by Wei Lu | Medium](https://medium.com/@GenerationAI/transformers-js-onnx-runtime-webgpu-in-chrome-extension-13b563933ca9) + - [ ] [Whisper WebGPU デモ (12月10日)](https://github.com/moeru-ai/airi/commit/ae3b9468d74c5d38c507ae2877799fd36339f8c1) + - [ ] [MicVAD デモ (12月11日)](https://github.com/moeru-ai/airi/commit/e4a0cc71006639669e9d71f0db27086fca47a03a) + - [ ] [MicVAD + ONNX Whisper リアルタイム文字起こし (12月12日)](https://github.com/moeru-ai/airi/commit/01dbaeb9317ab7491743e50dd6c58fc7e19a880d) + - [ ] [dcrebbin/oai-voice-mode-chat-mac: Adds realtime chat for ChatGPT Voice Mode [Unofficial]](https://github.com/dcrebbin/oai-voice-mode-chat-mac) +- [x] 表情 (7月9日) + - [x] [フロントエンド VRM 表情制御 (12月7日)](https://github.com/nekomeowww/airi-vtuber/commit/b69abd2b5ab70aa1d72b5e7224f146c8426394eb) + +- [ ] 多言語サポート + - [x] UI 多言語サポート + - [x] [feat: basic i18n (#2) (12月13日)](https://github.com/moeru-ai/airi/commit/38cda9e957aa4d66bed115ebf96d3d81ce085f68) + +- [ ] UI 最適化 + - [x] [Canvas シーンのモバイル対応 (12月5日)](https://github.com/nekomeowww/airi-vtuber/commit/bc04dbaf2ba98f13a367a8dd153cef4a19d1b83d) + - [x] [Live2D ビューアーの改善 (12月5日)](https://github.com/nekomeowww/airi-vtuber/commit/f6e41e64afdb2592024a24ec2d1de732c4c3d537) + - [x] [Live2D モデルの拡大縮小と適応比率 (12月5日)](https://github.com/nekomeowww/airi-vtuber/commit/1ce61d7e13fd9dc55a447e513a10e4a08730716c) + - [x] [画面のセーフエリア (12月4日)](https://github.com/nekomeowww/airi-vtuber/commit/135a8a00fc4d0013d2caec585e8c911817870abc) + - [x] [設定メニューとオーバーフローの最適化 (12月7日)](https://github.com/nekomeowww/airi-vtuber/commit/e2f1f7bd37757b862d803f3cd77475b436fe8758) + +## **モデル** + +- **VRM** + - [`@pixiv/three-vrm`](https://github.com/pixiv/three-vrm/) を教えてくれた [kwaa](https://github.com/kwaa) に感謝します + - 関連ツールとプラグイン: + - [VRM Add-on for Blender](https://vrm-addon-for-blender.info/en/) + - [VRM format — Blender Extensions](https://extensions.blender.org/add-ons/vrm/) + - [VRM Posing Desktop on Steam](https://store.steampowered.com/app/1895630/VRM_Posing_Desktop/) + - [Characters Product List | Vket Store](https://store.vket.com/en/category/1) + - アニメーションサポート: VRM Animation `.vrma` + - [`vrma` Spec](https://github.com/vrm-c/vrm-specification/tree/master/specification/VRMC_vrm_animation-1.0) + - [3D Motion & Animation popular doujin goods available online (Booth)](https://booth.pm/en/browse/3D%20Motion%20&%20Animation) + - [Seven VRM animations (.vrma) - VRoid Project - BOOTH](https://vroid.booth.pm/items/5512385) + - [VRoid Hub introduces Photo Booth for animation playback! "VRM Animation (.vrma)" now listed on BOOTH, plus 7 free animation files!](https://vroid.com/en/news/6HozzBIV0KkcKf9dc1fZGW) + - [malaybaku/AnimationClipToVrmaSample: Sample Project to Convert AnimationClip to VRM Animation (.vrma) in Unity](https://github.com/malaybaku/AnimationClipToVrmaSample) diff --git a/docs/content/ja/docs/manual/versions/index.md b/docs/content/ja/docs/manual/versions/index.md new file mode 100644 index 000000000..0309d9147 --- /dev/null +++ b/docs/content/ja/docs/manual/versions/index.md @@ -0,0 +1,60 @@ +--- +title: バージョン一覧 +description: AIRI の異なるバージョンと入手方法 +--- + + + +AIRI は、さまざまなニーズに合わせて複数のリリースチャンネルを提供しています。最も安定した体験を求めている場合でも、最新の機能を求めている場合でも、あなたにぴったりのものが見つかります。 + +## 安定版とプレリリース + +公式リリースには、**安定版**(徹底的にテストされており、ほとんどのユーザーに推奨されます)と**プレリリース**(テストの準備が整った新機能を備えたベータ版およびアルファ版)の両方が含まれています。 + +プレリリースには `-beta.X` または `-alpha.X` のサフィックスが付いています(例:`v0.7.2-beta.3`)。 + + + +### 最近の安定版とプレリリース + + + +[GitHub で以前のすべてのリリースを見る →](https://github.com/moeru-ai/airi/releases) + +## ナイトリービルド + +::: warning 実験的 +ナイトリービルドは**実験的**であり、バグや不安定な機能が含まれている可能性があります。自己責任で使用し、バックアップとして常に安定版を保持してください。 +::: + +ナイトリービルドは、最新の `main` ブランチのコードから毎日自動的に生成されます。これらには、絶対的に最新の機能とバグ修正が含まれています。 + +**以下のような場合に最適です:** +- 開発者および貢献者 +- 最新のバグ修正のテスト +- まだリリースされていない特定の修正が必要なユーザー + +### ナイトリービルドの入手方法 + +1. [Nightly Build Workflow](https://github.com/moeru-ai/airi/actions/workflows/release-tamagotchi.yml) ページにアクセスします +2. 最新の成功した実行(緑色のチェックマーク ✓ で示されています)をクリックします +3. **Artifacts** セクションまでスクロールダウンします +4. プラットフォーム用のビルドをダウンロードします: + - **Windows**: `AIRI_*_x64_en-US.exe` + - **macOS (Intel)**: `AIRI_*_x64.dmg` + - **macOS (Apple Silicon)**: `AIRI_*_arm64.dmg` + - **Linux (x64)**: `airi_*_amd64.deb` または `airi-*.x86_64.rpm` + - **Linux (ARM64)**: `airi_*_arm64.deb` または `airi-*.aarch64.rpm` + +::: tip +ナイトリービルドは、毎日 **00:00 UTC** に自動的に実行されます。最新の安定版で問題が発生した場合は、最新のナイトリービルドを試して、修正されているかどうかを確認してください。 +::: + +### 最近のナイトリービルド + + + +[すべてのナイトリービルドを見る →](https://github.com/moeru-ai/airi/actions/workflows/release-tamagotchi.yml) diff --git a/docs/content/ja/docs/overview/about-ai-vtuber.md b/docs/content/ja/docs/overview/about-ai-vtuber.md new file mode 100644 index 000000000..ef4fc399b --- /dev/null +++ b/docs/content/ja/docs/overview/about-ai-vtuber.md @@ -0,0 +1,7 @@ +--- +title: AI VTuber について +--- + +LLM で生成されたドキュメントですが、日本の TTS モジュールとサービスに関するいくつかの有用なリソースが含まれています: + +[【AI VTuber作り方ガイド】初心者でも簡単に自動生成する方法 – AI Front Trend](https://ai-front-trend.jp/how-to-make-ai-vtuber/) diff --git a/docs/content/ja/docs/overview/about-neuro-sama.md b/docs/content/ja/docs/overview/about-neuro-sama.md new file mode 100644 index 000000000..bc3be19f5 --- /dev/null +++ b/docs/content/ja/docs/overview/about-neuro-sama.md @@ -0,0 +1,24 @@ +--- +title: Neuro-sama について +--- + +盛り上がりと思考: + +- [r/VirtualYoutubers --- Someone help me understand Neuro-sama : r/VirtualYoutubers](https://www.reddit.com/r/VirtualYoutubers/comments/1gi5ra0/someone_help_me_understand_neurosama/) +- [How to Make an AI Vtuber. - YouTube](https://www.youtube.com/watch?v=WZ9JqlxQ6iQ) +- [How neuro plays Minecraft? : r/NeuroSama](https://www.reddit.com/r/NeuroSama/comments/1hi8seg/how_neuro_plays_minecraft/) +- [How to make an AI VTuber Using GPT 3 and Google Cloud TTS - YouTube](https://www.youtube.com/watch?v=EXICATDyYWI) +- [Having a personal neuro-sama? : r/NeuroSama](https://www.reddit.com/r/NeuroSama/comments/1ix5uip/having_a_personal_neurosama/) +- [Is it really Neuro-sama playing Minecraft? : r/NeuroSama](https://www.reddit.com/r/NeuroSama/comments/1ifhv0f/is_it_really_neurosama_playing_minecraft/) +- [Is neuro custom coded from the ground up or does she have a base model? : r/NeuroSama](https://www.reddit.com/r/NeuroSama/comments/19481ow/is_neuro_custom_coded_from_the_ground_up_or_does/) + +AI/LLM がモデルを制御できるようにするために、このプラグインを使用できます: + +- [pladisdev/VTS-AI-Plugin](https://github.com/pladisdev/VTS-AI-Plugin) + +- [Plugins · DenchiSoft/VTubeStudio Wiki](https://github.com/DenchiSoft/VTubeStudio/wiki/Plugins) + +既存のオープンソースプロジェクトのいくつか: + +- [JarodMica/open-neruosama](https://github.com/JarodMica/open-neruosama/tree/master) +- [AIVTDevPKevin/AI-VTuber-System: A graphical system program that allows you to quickly create your own AI VTuber for free.](https://github.com/AIVTDevPKevin/AI-VTuber-System) diff --git a/docs/content/ja/docs/overview/contributing/design-guidelines/index.md b/docs/content/ja/docs/overview/contributing/design-guidelines/index.md new file mode 100644 index 000000000..dc1a8dd99 --- /dev/null +++ b/docs/content/ja/docs/overview/contributing/design-guidelines/index.md @@ -0,0 +1,13 @@ +--- +title: デザインで貢献 +description: Project AIRI へのデザイン貢献方法 +--- + +::: warning 準備中 +このセクションは現在準備中です。 +::: + +詳細については、左側のメニューにあるサブページを参照してください: + +- [リソース](./resources) +- [ツール](./tools) diff --git a/docs/content/ja/docs/overview/contributing/design-guidelines/resources.md b/docs/content/ja/docs/overview/contributing/design-guidelines/resources.md new file mode 100644 index 000000000..74d852a25 --- /dev/null +++ b/docs/content/ja/docs/overview/contributing/design-guidelines/resources.md @@ -0,0 +1,21 @@ +--- +title: アーティストと開発者 +description: 参照やインスピレーションを得るためのリソース +--- + +### yui540 + +私が知る限り、最も素晴らしい CSS ステージ遷移の作者の一人は **[yui540](https://yui540.com/)** です。彼/彼女は他にも多くの素晴らしい見た目の ACG ウェブサイトをデザインしており、最も有名なものは [臆病な魔女](https://cowardly-witch.netlify.app/) でした (ソースコードは [yui540](https://github.com/yui540?tab=repositories) で見つけることができます)。 + +上記のような同様の遷移効果を実現するには、このリポジトリ [yui540/css-animations: 俺流CSSアニメーション](https://github.com/yui540/css-animations) を参照してください。遊べる [ライブデモ](https://yui540.github.io/css-animations/2025-02-25/transitions/) もあります。 + +### [Nihe Works](https://nihe.work/) + +彼/彼女は [YouTube](https://www.youtube.com/@nihe8683) にも作品のビデオを投稿しているので、チェックしてみてください。 + +## コレクションウェブサイト + +- [Websites For Creative Backgrounds | wweb.dev](https://wweb.dev/resources/creative-backgrounds) +- [40 CSS Background Effects to Enhance Your Website](https://prismic.io/blog/css-background-effects) +- [The Classic CSS Loaders Collection](https://css-loaders.com/classic/) +- [CSS Animations - Awwwards](https://www.awwwards.com/du-haihang/collections/css-animations/) diff --git a/docs/content/ja/docs/overview/contributing/design-guidelines/tools.md b/docs/content/ja/docs/overview/contributing/design-guidelines/tools.md new file mode 100644 index 000000000..2f2329deb --- /dev/null +++ b/docs/content/ja/docs/overview/contributing/design-guidelines/tools.md @@ -0,0 +1,29 @@ +--- +title: ツール +description: Project AIRI の UI、UX を設計するためのツール +--- + +## 色 + +デフォルトでは、開発中に [UnoCSS](https://unocss.dev) というツールを使用して、スタイルシートに関するすべての生成を支援します。これは [Tailwind](https://tailwindcss.com) と同じように機能する素晴らしいツールです。 + +したがって、基本的なカラーパレットについては、[Colors - Core concepts - Tailwind CSS](https://tailwindcss.com/docs/colors) にリストされています。 + +一般的に、デフォルトのテーマには `neutral`、`pink`、`violet`、`cyan` を使用します。[UnoCSS](https://unocss.dev) または [Tailwind](https://tailwindcss.com) のいずれも色に基づいた不透明度の調整をサポートしていますが、[Refactoring UI](https://refactoringui.com/) によると: + +> 色の彩度を変更したいときはいつでも、不透明度の使用は避け、最高のコントラストを得るために、アルファチャンネルを含まない最適なソリッドカラーを手動で選択するように努めるべきです。 + +そのため、不透明度がタイポグラフィデザインの一部でない限り、読みやすくするために最適なソリッドカラーを選択するようにしてください。 + +私たちが使用するもう一つの素晴らしいツールは [Radix Colors](https://www.radix-ui.com/colors) と呼ばれるものです。これは、優れた色彩理論に裏打ちされた素晴らしいカラーパレットを構築しているため、インタラクティブな UI 要素の構成要素のようなものです。パレットから適切な色を選択することもできます。 + +_補色_ が何であるかはすでに学んでいるかもしれません。それは色のコントラストに役立ちます。ここに、補色を素早くインタラクティブに選択するのに役立ついくつかの優れたツールがあります: + +- [Color wheel - Figma](https://www.figma.com/color-wheel/) +- [Color wheel - Canva Colors](https://www.canva.com/colors/color-wheel/) +- [Paletton](https://paletton.com/#uid=55v1e0kk-p26VFOfrvbqEdSDDbg) + +## 背景とパターン + +- [Free SVG Backgrounds and Patterns | SVG Backgrounds](https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/) +- [Animated Background Headers - Generate animated background headers for any website](https://www.finisher.co/lab/header/) diff --git a/docs/content/ja/docs/overview/contributing/index.md b/docs/content/ja/docs/overview/contributing/index.md new file mode 100644 index 000000000..cf26309f1 --- /dev/null +++ b/docs/content/ja/docs/overview/contributing/index.md @@ -0,0 +1,372 @@ +--- +title: コントリビューション +description: Project AIRI への貢献 +--- + +こんにちは!このプロジェクトへの貢献に興味を持っていただきありがとうございます。このガイドは、あなたが始めるのに役立ちます。 + +## 前提条件 + +- [Git](https://git-scm.com/downloads) +- [Node.js 23+](https://nodejs.org/en/download/) +- [corepack](https://github.com/nodejs/corepack) +- [pnpm](https://pnpm.io/installation) + +
+Windows のセットアップ + +0. [Visual Studio](https://visualstudio.microsoft.com/downloads/) をダウンロードし、こちらの指示に従ってください: https://rust-lang.github.io/rustup/installation/windows-msvc.html#walkthrough-installing-visual-studio-2022 + + > Visual Studio をインストールする際、Windows SDK と C++ ビルドツールを必ずインストールしてください。 + +1. PowerShell を開く +2. [`scoop`](https://scoop.sh/) をインストール + + ```powershell + Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser + Invoke-RestMethod -Uri https://get.scoop.sh | Invoke-Expression + ``` + +3. `scoop` を使って `git`, Node.js, `rustup`, `msvc` をインストール + + ```powershell + scoop install git nodejs rustup + + # Rust の依存関係用 + # crates または apps/tamagotchi の開発を行わない場合は不要です + scoop install main/rust-msvc + # Rust & Windows 固有 + rustup toolchain install stable-x86_64-pc-windows-msvc + rustup default stable-x86_64-pc-windows-msvc + ``` + +4. `corepack` を使って `pnpm` をインストール + + ```powershell + corepack enable + corepack prepare pnpm@latest --activate + ``` + +
+ +
+macOS のセットアップ + +0. Terminal (または iTerm2, Ghostty, Kitty など) を開く +1. `brew` を使って `git`, `node` をインストール + + ```shell + brew install git node + ``` + +2. `corepack` を使って `pnpm` をインストール + + ```shell + corepack enable + corepack prepare pnpm@latest --activate + ``` + +
+ +
+Linux のセットアップ + +0. Terminal を開く +1. [nodesource/distributions: NodeSource Node.js Binary Distributions](https://github.com/nodesource/distributions?tab=readme-ov-file#table-of-contents) に従って `node` をインストール +2. [Git](https://git-scm.com/downloads/linux) に従って `git` をインストール +3. `corepack` を使って `pnpm` をインストール + + ```shell + corepack enable + corepack prepare pnpm@latest --activate + ``` +4. デスクトップ版の開発を手助けしたい場合は、以下の依存関係が必要です: + ``` + sudo apt install \ + libssl-dev \ + libglib2.0-dev \ + libgtk-3-dev \ + libjavascriptcoregtk-4.1-dev \ + libwebkit2gtk-4.1-dev + ``` + +
+ +## 以前にこのプロジェクトに貢献したことがある場合 + +::: warning + +このリポジトリをクローンしていない場合は、このセクションをスキップしてください。 + +::: + +ローカルリポジトリがアップストリームリポジトリと最新の状態であることを確認してください: + +```shell +git fetch -all +git checkout main +git pull upstream main --rebase +``` + +作業中のブランチがある場合、ブランチをアップストリームリポジトリと最新の状態にするには: + +```shell +git checkout +git rebase main +``` + +## このプロジェクトをフォークする + +[moeru-ai/airi](https://github.com/moeru-ai/airi) ページの右上にある **Fork** ボタンをクリックしてください。 + +## クローン + +```shell +git clone https://github.com//airi.git +cd airi +``` + +## 作業用ブランチを作成する + +```shell +git checkout -b +``` + +## 依存関係のインストール + +```shell +corepack enable +pnpm install + +# Rust の依存関係用 +# crates または apps/tamagotchi の開発を行わない場合は不要です +cargo fetch +``` + +::: tip + +スクリプトを簡単にするために [@antfu/ni](https://github.com/antfu-collective/ni) のインストールをお勧めします。 + +```shell +corepack enable +npm i -g @antfu/ni +``` + +インストールしたら、以下のように使用できます + +- `pnpm install`, `npm install`, `yarn install` の代わりに `ni` を使用。 +- `pnpm run`, `npm run`, `yarn run` の代わりに `nr` を使用。 + +パッケージマネージャーを気にする必要はありません。`ni` が適切なものを選択してくれます。 +::: + +## 開発したいアプリケーションを選択する + +### Stage Tamagotchi (デスクトップ版) + +```shell +pnpm dev:tamagotchi +``` + +::: tip + +[@antfu/ni](https://github.com/antfu-collective/ni) ユーザーの場合: + +```shell +nr dev:tamagotchi +``` + +::: + +### Stage Web (Web 版 [airi.moeru.ai](https://airi.moeru.ai) 用) + +```shell +pnpm dev +``` + +::: tip + +[@antfu/ni](https://github.com/antfu-collective/ni) ユーザーの場合: + +```shell +nr dev +``` + +::: + +### ドキュメントサイト + +```shell +pnpm dev:docs +``` + +::: tip + +[@antfu/ni](https://github.com/antfu-collective/ni) ユーザーの場合: + +```shell +nr dev:docs +``` + +::: + +### Telegram bot 統合 + +Postgres データベースが必要です。 + +```shell +cd services/telegram-bot +docker compose up -d +``` + +`.env` の設定 + +```shell +cp .env .env.local +``` + +`.env.local` 内の認証情報を編集します。 + +データベースのマイグレーション + +```shell +pnpm -F @proj-airi/telegram-bot db:generate +pnpm -F @proj-airi/telegram-bot db:push +``` + +ボットの実行 + +```shell +pnpm -F @proj-airi/telegram-bot start +``` + +::: tip + +[@antfu/ni](https://github.com/antfu-collective/ni) ユーザーの場合: + +```shell +nr -F @proj-airi/telegram-bot dev +``` + +::: + +### Discord bot 統合 + +```shell +cd services/discord-bot +``` + +`.env` の設定 + +```shell +cp .env .env.local +``` + +`.env.local` 内の認証情報を編集します。 + +ボットの実行 + +```shell +pnpm -F @proj-airi/discord-bot start +``` + +::: tip + +[@antfu/ni](https://github.com/antfu-collective/ni) ユーザーの場合: + +```shell +nr -F @proj-airi/discord-bot dev +``` + +::: + +### Minecraft エージェント + +```shell +cd services/minecraft +``` + +Minecraft クライアントを起動し、希望のポートでワールドを公開し、そのポート番号を `.env.local` に記入します。 + +`.env` の設定 + +```shell +cp .env .env.local +``` + +`.env.local` 内の認証情報を編集します。 + +ボットの実行 + +```shell +pnpm -F @proj-airi/minecraft-bot start +``` + +::: tip + +[@antfu/ni](https://github.com/antfu-collective/ni) ユーザーの場合: + +```shell +nr -F @proj-airi/minecraft-bot dev +``` + +::: + +## コミット + +### コミットの前に + +::: warning + +リント (静的チェッカー) と TypeScript コンパイラが満たされていることを確認してください: + +```shell +pnpm lint && pnpm typecheck +``` + +::: + +::: tip + +[@antfu/ni](https://github.com/antfu-collective/ni) がインストールされている場合は、`nr` を使用してコマンドを実行できます: + +```shell +nr lint && nr typecheck +``` + +::: + +### コミット + +```shell +git add . +git commit -m "" +``` + +### フォークリポジトリへのプッシュ + +```shell +git push origin -u +``` + +フォークリポジトリでブランチを閲覧できるはずです。 + +::: tip + +このプロジェクトへの貢献が初めての場合は、アップストリームリポジトリも追加する必要があります: + +```shell +git remote add upstream https://github.com/moeru-ai/airi.git +``` + +::: + +## プルリクエストの作成 + +[moeru-ai/airi](https://github.com/moeru-ai/airi) ページに移動し、**Pull requests** タブをクリックし、**New pull request** ボタンをクリックします。**Compare across forks** リンクをクリックし、あなたのフォークリポジトリを選択します。 + +変更を確認し、**Create pull request** ボタンをクリックします。 + +## やったー!できました! + +おめでとうございます!このプロジェクトへの最初の貢献を行いました。メンテナーがプルリクエストをレビューするのを待つことができます。 diff --git a/docs/content/ja/docs/overview/guide/tamagotchi/index.md b/docs/content/ja/docs/overview/guide/tamagotchi/index.md new file mode 100644 index 000000000..03224695f --- /dev/null +++ b/docs/content/ja/docs/overview/guide/tamagotchi/index.md @@ -0,0 +1,206 @@ +--- +title: デスクトップ版のガイド +description: Project AIRI のたまごっちバージョンの使い方 +--- + +## 今すぐチャットしたい! + +問題ありません、私についてきてください: + +- オンボーディングプロセスを完了する + +1. 希望の LLM / AI プロバイダーを選択します(デモビデオでは OpenRouter を選択しました) +2. LLM / AI と対話するための API キーを入力します(これはキャラクターの脳/魂として機能します) +3. 希望のチャットモデルを選択します(デモビデオでは `DeepSeek V3 0324` を選択しました) +4. システムトレイから **Fade on Hover**(ホバー時にフェード)モードを無効にします +5. モデル UI にカーソルを合わせ、吹き出しアイコンをクリックすると、チャットウィンドウが表示されます +6. 入力してチャットしましょう! + +::: tip ローカルで Ollama を使用していますか? +完了後、`OLLAMA_ORIGINS=*` システム環境変数を設定し、Ollama アプリケーションを再起動する必要があります。 +::: + +
+ + + +
+ +ええと、これは早すぎましたね。**Fade on Hover** とは何なのか、どうやってすべてをカスタマイズするのか、まだわかりませんよね? + +::: warning 私たちはまだ開発の初期段階にあり、多くの機能はまだ完全には利用できません +いくつかの機能はまだ準備ができていませんが、現在それらを実現するために懸命に取り組んでいます: + +- 文字起こし +- ローカル音声合成 (GPT-SoVITS, IndexTTS など) +- 歌唱 +- UI からの Discord の設定(ただし、すでに機能しており、設定にはコーディングスキルが必要です) +- UI からの Minecraft エージェントの設定(ただし、すでに機能しており、設定にはコーディングスキルが必要です) +::: + +しかし、その前に... + +::: tip ありがとうございます! + +ダウンロードして試していただきありがとうございます! +::: + +ダウンロード後、どこからでも AIRI を起動できます。ユーザーインターフェースは2つの部分で構成されていることがわかります: + +- オンボーディング / ウィザードセットアップガイド +- モデル (Live2D および VRM モデルを表示可能) + +![](/en/docs/overview/guide/tamagotchi/assets/screenshot-ui.avif) + +システムトレイには、次のような他のオプション/コマンドがあります: + +- 表示 / 非表示 +- 設定を開く +- ウィンドウの自動配置 +- など + +基本的な概念と機能を説明しながら、一つずつ始めていきましょう。 + +## ウィンドウ操作 + +以下について説明します: + +- モデルウィンドウとの対話方法は? +- モデルウィンドウの移動方法は? +- サイズ変更の方法は? + +### Fade on Hover(ホバー時にフェード) + +::: info TL;DR | チートシート +この機能を切り替える(モデルと対話できるようにする)には、Shift + Alt + I ショートカットを使用します。 + +キーのマッピングは [設定] -> [一般] -> [ショートカット] でカスタマイズできます。 +::: + +モデルにカーソルを合わせると、Live2D モデルがフェードアウト/消え、カーソルで対話できないことに気付くでしょう。 + +
+ +
+ +これは、デフォルトで **Fade on Hover** 機能が有効になっているためです。つまり、カーソルがモデルウィンドウの上に重なると、ウィンドウがフェードアウトし、クリックがウィンドウを完全に通過します。 + +これは非常に強力な機能です。コンパニオンがあなたのそばに住んでいる間、それを使えば使うほど便利だと感じるでしょう。ここに私たちが考えた2つのシナリオがあります: + +#### CrunchyRoll の閲覧 + + + +#### Steam の閲覧 + + + +この機能を無効にするのは簡単です。 + +この機能を無効にするには2つの方法があります: + +- システムトレイ +- ショートカット + +以下からこの機能を切り替えることができます: + +1. システムトレイアイコンを右クリック +2. **Window mode**(ウィンドウモード)をクリック +3. **Fade on hover**(ホバー時にフェード)をクリック + +
+ +
+ +### ウィンドウを移動 + +::: info TL;DR | チートシート +この機能を切り替える(モデルと対話できるようにする)には、Shift + Alt + N ショートカットを使用します。 + +キーのマッピングは [設定] -> [一般] -> [ショートカット] でカスタマイズできます。 +::: + +
+ +
+ +
+ +### ウィンドウのサイズ変更 + +::: info TL;DR | チートシート +この機能を切り替える(モデルと対話できるようにする)には、Shift + Alt + A ショートカットを使用します。 + +キーのマッピングは [設定] -> [一般] -> [ショートカット] でカスタマイズできます。 +::: + +
+ +
+ +
+ +## チャット + +現在、システムトレイからチャットウィンドウを呼び出す直接のオプション/コマンドはありませんが、将来的に追加する可能性があります。現在、チャットウィンドウを開くには、**Fade on Hover** モードをオフに切り替える必要があります。 + +::: info TL;DR | チートシート +Fade on Hover のショートカットは:Shift + Alt + I です。 +::: + +
+ + + +## 設定 + +システムトレイの設定を開いて、AIRI のテーマカラーを変更したり、Live2D (2D) または VRM (3D、Grok Companion など) の別のモデルに切り替えたりするなど、さらにカスタマイズすることができます。 + + + +設定には非常に多くのオプションがあります。試して、何ができるか発見してください。 + +### モデルの変更 + +デフォルトのモデルを他の Live2D (2D) や VRM (3D、繰り返しになりますが、持っていれば Grok Companion のような同様の 3D モデル) に交換することが可能です。 + +モデル設定は [設定] -> [モデル] にあります。 + +::: tip VTuber Studio からモデルをインポートしますか? +私たちが Live2D モデルのレンダリングに使用しているライブラリは、VTuber Studio モデルからバンドルされた ZIP ファイルを読み取るのに問題があります。これは、VTuber Studio が使用している不明なファイルが含まれており、Live2D エンジンが認識するファイルではないためです。 + +そのため、インポートするときは、VTuber Studio モデルを ZIP ファイルに圧縮する前に、次のファイルを除外するようにしてください: + +- `items_pinned_to_model.json` +::: + +
+ +::: warning バグあり +現在、モデルのシーンをリロードする機能は意図したとおりに機能していません。 +モデルをロードした後、AIRI を再起動する必要があります。 +::: + +
+ + diff --git a/docs/content/ja/docs/overview/guide/web/index.md b/docs/content/ja/docs/overview/guide/web/index.md new file mode 100644 index 000000000..486d2530e --- /dev/null +++ b/docs/content/ja/docs/overview/guide/web/index.md @@ -0,0 +1,10 @@ +--- +title: Web 版のガイド +description: Project AIRI の Web 版の使い方 +--- + +::: warning 準備中 +このページは現在準備中です。Web 版の機能や使い方は現在執筆中です。 +::: + +Web 版は [https://airi.moeru.ai/](https://airi.moeru.ai/) からアクセスできます。 diff --git a/docs/content/ja/docs/overview/index.md b/docs/content/ja/docs/overview/index.md index 4443990a9..8f3685aa9 100644 --- a/docs/content/ja/docs/overview/index.md +++ b/docs/content/ja/docs/overview/index.md @@ -71,7 +71,7 @@ Web 版は手軽にアクセスでき、モバイルからでも利用できま 使い方を見る - +
diff --git a/docs/content/zh-Hans/about/privacy.md b/docs/content/zh-Hans/about/privacy.md new file mode 100644 index 000000000..e3b57b94b --- /dev/null +++ b/docs/content/zh-Hans/about/privacy.md @@ -0,0 +1,84 @@ +--- +title: 隐私政策 +description: Project AIRI 的隐私政策 +--- + +本隐私政策适用于由 Project AIRI 团队(以下简称“服务提供商”)创建的移动设备应用程序 AIRI(也称为 Project AIRI 应用程序,以下简称“应用程序”)。该应用程序作为开源服务及部分付费商业服务提供。本服务按“原样”提供。 + +## 信息收集与使用 + +应用程序在您下载和使用时会收集信息。这些信息可能包括: + +* 您设备的互联网协议地址(例如 IP 地址) +* 您访问的应用程序页面、访问时间和日期、在这些页面上花费的时间 +* 在应用程序上花费的时间 +* 您在移动设备上使用的操作系统 + +应用程序不会收集有关您移动设备位置的精确信息。 + +应用程序会收集您设备的位置信息,这有助于服务提供商确定您的大致地理位置,并用于以下方式: + +* **地理位置服务**:服务提供商利用位置数据提供基于位置的游戏和娱乐服务、非个性化内容、相关推荐等功能。 +* **分析和改进**:聚合和匿名的位置数据有助于服务提供商分析用户行为、识别趋势,并改进应用程序的整体性能和功能。 +* **第三方服务**:服务提供商可能会定期将匿名位置数据传输给外部服务。这些服务协助他们增强应用程序并优化其产品。 + +服务提供商可能会使用您提供的信息不时联系您,向您提供重要信息、必要的通知和营销推广。 + +为了获得更好的体验,在使用应用程序时,服务提供商可能会要求您向我们要提供某些个人身份信息,包括但不限于电子邮件、用户 ID、配置的 AI/LLM/云计算提供商名称(不含密钥)、代理使用情况、MCP、工具调用、AI 技术痕迹、错误信息。 +服务提供商请求的信息将由他们保留并按照本隐私政策所述进行使用。 + +## 第三方访问 + +只有聚合的匿名数据会被定期传输给外部服务,以帮助服务提供商改进应用程序及其服务。服务提供商可能会按照本隐私声明中所述的方式与第三方共享您的信息。 + +请注意,应用程序使用具有其自己隐私政策的第三方服务来处理数据。以下是应用程序使用的第三方服务提供商的隐私政策链接: + +* [Posthog](https://posthog.com/privacy) +* [Plausible Analytics](https://plausible.io/privacy) + +服务提供商可能会披露用户提供的和自动收集的信息: + +* 根据法律要求,例如遵守传票或类似的法律程序; +* 当他们真诚地认为披露对于保护他们的权利、保护您的安全或他人的安全、调查欺诈或响应政府请求是必要时; +* 与代表他们工作的受信任的服务提供商共享,这些服务提供商没有独立使用我们向其披露的信息的权利,并且已同意遵守本隐私声明中规定的规则。 + +## 人工智能的使用 + +应用程序使用人工智能 (AI) 技术来增强用户体验并提供某些功能。AI 组件可能会处理用户数据以提供个性化内容、推荐或自动化功能。 +所有 AI 处理均按照本隐私政策和适用法律进行。如果您对 AI 功能或数据处理有疑问,请联系服务提供商。 + +## 退出权利 + +您可以通过卸载应用程序轻松停止应用程序的所有信息收集。您可以使用移动设备的一部分或通过移动应用程序市场或网络提供的标准卸载过程。 + +## 数据保留政策 + +服务提供商将在您使用应用程序期间以及之后的一段合理时间内保留用户提供的数据。如果您希望他们删除您通过应用程序提供的用户提供的数据,请通过 airi@moeru.ai 联系他们,他们将在合理的时间内做出回应。 + +## 儿童 + +服务提供商不会使用应用程序故意向 13 岁以下的儿童索取数据或向其进行营销。 + +应用程序不针对 13 岁以下的任何人。服务提供商不会故意收集 13 岁以下儿童的个人身份信息。如果服务提供商发现 13 岁以下的儿童提供了个人信息,服务提供商将立即从其服务器中删除这些信息。如果您是父母或监护人,并且您知道您的孩子向我们提供了个人信息,请联系服务提供商 (airi@moeru.ai),以便他们能够采取必要的行动。 + +## 安全 + +服务提供商关注保护您信息的机密性。服务提供商提供物理、电子和程序上的保障措施来保护服务提供商处理和维护的信息。 + +## 变更 + +本隐私政策可能会因任何原因不时更新。服务提供商将通过在本页面上发布新的隐私政策来通知您隐私政策的任何变更。建议您定期查阅本隐私政策以了解任何变更,因为继续使用将被视为对所有变更的批准。 + +本隐私政策自 2025 年 12 月 15 日起生效。 + +## 您的同意 + +通过使用应用程序,即表示您同意我们按照本隐私政策以及我们修订后的政策处理您的信息。 + +## 联系我们 + +如果您在使用应用程序时对隐私有任何疑问,或对惯例有疑问,请通过电子邮件 airi@moeru.ai 联系服务提供商。 + +* * * + +本隐私政策页面由 [App Privacy Policy Generator](https://app-privacy-policy-generator.nisrulz.com/) 生成 diff --git a/docs/content/zh-Hans/about/terms.md b/docs/content/zh-Hans/about/terms.md new file mode 100644 index 000000000..3f0c0a9f8 --- /dev/null +++ b/docs/content/zh-Hans/about/terms.md @@ -0,0 +1,43 @@ +--- +title: 使用条款 +description: Project AIRI 的使用条款 +--- + +这些条款与条件适用于由 Project AIRI 团队(以下简称“服务提供商”)创建的移动设备应用程序 AIRI(也称为 Project AIRI 应用程序,以下简称“应用程序”)。该应用程序作为开源服务及部分付费商业服务提供。 + +下载或使用应用程序,即表示您自动同意以下条款。强烈建议您在使用应用程序之前仔细阅读并理解这些条款。 + +服务提供商致力于确保应用程序尽可能有益且高效。因此,他们保留随时以任何理由修改应用程序或对其服务收费的权利。服务提供商向您保证,任何应用程序或其服务的收费都会向您清楚地传达。 + +应用程序存储和处理您向服务提供商提供的个人数据,以便提供服务。维护手机和应用程序访问权限的安全是您的责任。服务提供商强烈建议不要对您的手机进行越狱或 root,这涉及删除设备官方操作系统施加的软件限制。此类行为可能会使您的手机暴露于恶意软件、病毒、恶意程序,危及手机的安全功能,并可能导致应用程序无法正常运行或根本无法运行。 + +请注意,应用程序使用具有其自己条款与条件的第三方服务。以下是应用程序使用的第三方服务提供商的条款与条件链接: + +* [Posthog](https://posthog.com/terms) +* [Plausible Analytics](https://plausible.io/terms) + +请注意,服务提供商不对某些方面承担责任。应用程序的某些功能需要有效的互联网连接,可以是 Wi-Fi 或由您的移动网络提供商提供。如果由于缺乏 Wi-Fi 访问权限或您已用尽数据流量限额而导致应用程序无法以满负荷运行,服务提供商概不负责。 + +如果您在 Wi-Fi 区域之外使用应用程序,请注意您的移动网络提供商的协议条款仍然适用。因此,您可能会因连接到应用程序期间的数据使用而向移动提供商支付费用,或其他第三方费用。使用应用程序即表示您接受对此类费用的责任,包括如果您在本地区域(即地区或国家)之外使用应用程序而不禁用数据漫游时的漫游数据费用。如果您不是使用应用程序的设备的账单支付人,他们假定您已获得账单支付人的许可。 + +同样,服务提供商并不总是能对您的应用程序使用情况承担责任。例如,确保您的设备保持充电是您的责任。如果您的设备电池耗尽导致您无法访问服务,服务提供商概不负责。 + +关于服务提供商对您使用应用程序的责任,请务必注意,虽然他们努力确保其始终更新和准确,但他们确实依赖第三方为他们提供信息,以便他们可以将其提供给您。服务提供商对您因完全依赖应用程序的此功能而遭受的任何直接或间接损失概不负责。 + +应用程序包含人工智能 (AI) 技术以提供某些功能或服务。使用应用程序即表示您承认并同意 AI 可能用于处理数据和提供功能。服务提供商确保所有 AI 使用均符合适用法律,旨在有益于用户体验。 + +服务提供商可能希望在某个时候更新应用程序。该应用程序目前可用,因为操作系统(以及他们决定将应用程序的可用性扩展到的任何其他系统)的要求可能会发生变化,如果您想继续使用该应用程序,则需要下载更新。服务提供商不保证它将始终更新应用程序,以便它与您相关和/或与您设备上安装的特定操作系统版本兼容。但是,您同意在向您提供应用程序更新时始终接受它们。服务提供商也可能希望停止提供应用程序,并可能随时终止其使用,恕不另行通知。除非他们另行通知您,否则在任何终止时,(a) 本条款授予您的权利和许可将终止;(b) 您必须停止使用应用程序,并(如有必要)将其从您的设备中删除。 + +## 本条款与条件的变更 + +服务提供商可能会定期更新其条款与条件。因此,建议您定期查阅本页面以了解任何变更。服务提供商将通过在本页面上发布新的条款与条件来通知您任何变更。 + +这些条款与条件自 2025 年 12 月 15 日起生效。 + +## 联系我们 + +如果您对条款与条件有任何疑问或建议,请随时通过 airi@moeru.ai 联系服务提供商。 + +* * * + +本条款与条件页面由 [App Privacy Policy Generator](https://app-privacy-policy-generator.nisrulz.com/) 生成 diff --git a/docs/content/zh-Hans/blog/DevLog-2025.03.10/index.md b/docs/content/zh-Hans/blog/DevLog-2025.03.10/index.md index 5df7123e1..ca18404d1 100644 --- a/docs/content/zh-Hans/blog/DevLog-2025.03.10/index.md +++ b/docs/content/zh-Hans/blog/DevLog-2025.03.10/index.md @@ -55,9 +55,7 @@ date: 2025-03-10 在3月8日结束时,[@LemonNekoGH](https://github.com/LemonNekoGH) 和 [@junkwarrior87](https://github.com/junkwarrior87) 居然实现了整个舞台的颜色自定义功能!(我从来没想过这能在短短几个小时内完成...) - + - https://github.com/moeru-ai/airi/pull/53 - https://github.com/moeru-ai/airi/pull/60 diff --git a/docs/content/zh-Hans/blog/DevLog-2025.03.20/index.md b/docs/content/zh-Hans/blog/DevLog-2025.03.20/index.md index 509fbd473..1b0808d62 100644 --- a/docs/content/zh-Hans/blog/DevLog-2025.03.20/index.md +++ b/docs/content/zh-Hans/blog/DevLog-2025.03.20/index.md @@ -57,9 +57,7 @@ import SteinsGateMayori from './assets/steins-gate-mayori.avif' 这是 [@sumimakito](https://github.com/sumimakito) 完成后录制的第一眼: - + 整个 OKLCH 调色板可以一次性展开到画布上,供我们参考。但是要尝试颜色并获得与 Project AIRI 主题相同的感觉方案并不完美,不是吗? @@ -136,9 +134,7 @@ logo 和默认的绿色可以被替换以与 AIRI 的主题保持一致,这就 有了所有这些,我们可以得到这个结果: - + 几乎一模一样。但我们的故事并没有在这里结束,目前,我们还没有实现记忆功能、更好的动作控制,转录设置 UI 也缺失了。希望我们能在月底前完成这些工作。 diff --git a/docs/content/zh-Hans/blog/DevLog-2025.04.14/index.md b/docs/content/zh-Hans/blog/DevLog-2025.04.14/index.md index 36c91a08f..a91bfe9c5 100644 --- a/docs/content/zh-Hans/blog/DevLog-2025.04.14/index.md +++ b/docs/content/zh-Hans/blog/DevLog-2025.04.14/index.md @@ -6,7 +6,7 @@ date: 2025-04-14 ## 引子 -[上次](../Devlog-2025.04.06/#memory-system-记忆系统)我们聊到了 AIRI 的记忆系统,这次我们再深入聊聊,如何实现一个这么复杂的记忆系统,以及对未来的展望。 +[上次](../DevLog-2025.04.06/#memory-system-记忆系统)我们聊到了 AIRI 的记忆系统,这次我们再深入聊聊,如何实现一个这么复杂的记忆系统,以及对未来的展望。 ## 先从 搜索引擎 开始 diff --git a/docs/content/zh-Hans/blog/DevLog-2025.04.22/index.md b/docs/content/zh-Hans/blog/DevLog-2025.04.22/index.md index dfab9cbca..3d488c928 100644 --- a/docs/content/zh-Hans/blog/DevLog-2025.04.22/index.md +++ b/docs/content/zh-Hans/blog/DevLog-2025.04.22/index.md @@ -12,9 +12,7 @@ date: 2025-04-22 在上个周末(2025.04.20),我花了点时间,做了一个能与 ADB 交互的 MCP 服务器 Demo [airi-android](https://github.com/LemonNekoGH/airi-android),给 AIRI 提供了最基础的与手机交互的能力(事实上大部分 LLM 都可以通过它与手机交互),这是演示视频: - + 我也把它打包成了 Docker 镜像,提交到了 [MCP 服务器列表](https://mcp.so/server/airi-android/lemonnekogh),有兴趣的可以试试。 diff --git a/docs/content/zh-Hans/blog/DevLog-2025.04.28/index.md b/docs/content/zh-Hans/blog/DevLog-2025.04.28/index.md index 999db123f..c4c574507 100644 --- a/docs/content/zh-Hans/blog/DevLog-2025.04.28/index.md +++ b/docs/content/zh-Hans/blog/DevLog-2025.04.28/index.md @@ -20,16 +20,12 @@ import airiMcpArch from './assets/airi-mcp-arch.avif'
AIRI 的 MCP 服务器设置 - +
AIRI 在手机上输入 `Hello World` - +
开发时,为了理清思路,我画了一张图,从 LLM 调用安卓手机: diff --git a/docs/content/zh-Hans/blog/DevLog-2025.05.16/index.md b/docs/content/zh-Hans/blog/DevLog-2025.05.16/index.md index ea11ccc14..e467c537e 100644 --- a/docs/content/zh-Hans/blog/DevLog-2025.05.16/index.md +++ b/docs/content/zh-Hans/blog/DevLog-2025.05.16/index.md @@ -97,9 +97,7 @@ import DemoDayHangzhou3 from './assets/demo-day-hangzhou-3.avif' 最终,我得到了这个:[WebAI 实时语音聊天示例](https://github.com/proj-airi/webai-example-realtime-voice-chat),我设法证明了这项工作可以在 Web 浏览器中用一个 300 ~ 500 行的 TypeScript 代码来实现 ChatGPT 语音聊天系统。 - + 我尽力将所有可能的步骤分解为小的可重用片段,以帮助演示如何从头开始构建实时语音聊天系统: diff --git a/docs/content/zh-Hans/blog/DevLog-2025.08.05/index.md b/docs/content/zh-Hans/blog/DevLog-2025.08.05/index.md index 2b2d5fdfd..c9da61f5e 100644 --- a/docs/content/zh-Hans/blog/DevLog-2025.08.05/index.md +++ b/docs/content/zh-Hans/blog/DevLog-2025.08.05/index.md @@ -84,10 +84,7 @@ Tamagotchi 是 AIRI 桌面版本的名称,你可以让它作为独立的、
- + 许多用户发现每次光标悬停在角色上时,整个窗口都会淡出,这让他们感到困惑。 对于缺乏文档解释这个功能以及为什么我们认为它对 AI 伴侣很重要的道歉。 @@ -132,10 +129,7 @@ Tamagotchi 是 AIRI 桌面版本的名称,你可以让它作为独立的、
- + 进入移动模式时会显示一个可拖动区域,除了用鼠标移动位置外, 使用托盘菜单中的位置 > 居中 / 左下 / 右下也是另一个选择。 @@ -153,7 +147,7 @@ Tamagotchi 是 AIRI 桌面版本的名称,你可以让它作为独立的、
-
- +
2024 年 12 月 7 日在 X(曾经是 Twitter)上的首次展示 diff --git a/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/index.md b/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/index.md new file mode 100644 index 000000000..71b58fa49 --- /dev/null +++ b/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/index.md @@ -0,0 +1,13 @@ +--- +title: 贡献设计 +description: 如何为 Project AIRI 贡献设计 +--- + +::: warning 施工中 +本章节正在施工中。 +::: + +请查阅左侧菜单中的子页面以获取更多信息: + +- [参考资源](./resources) +- [工具](./tools) diff --git a/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/resources.md b/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/resources.md index 7aa95065f..01b45e4ca 100644 --- a/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/resources.md +++ b/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/resources.md @@ -1,19 +1,19 @@ --- -title: Artists & Developers -description: Resources for referencing and taking inspiration from +title: 艺术家与开发者 +description: 用于参考和获取灵感的资源 --- ### yui540 -One of the greatest CSS stage transition author I know is **[yui540](https://yui540.com/)**, he/she designed so many other stunning looking ACG websites, and the most famous one was [臆病な魔女](https://cowardly-witch.netlify.app/) (source code can be found under [yui540](https://github.com/yui540?tab=repositories)). +我所知道的最伟大的 CSS 场景过渡效果作者之一是 **[yui540](https://yui540.com/)**,他/她设计了许多其他外观惊艳的 ACG 网站,其中最著名的是 [臆病な魔女](https://cowardly-witch.netlify.app/)(源代码可以在 [yui540](https://github.com/yui540?tab=repositories) 下找到)。 -To achieve the similar transition effect like the above, you may reference to this repository [yui540/css-animations: 俺流CSSアニメーション](https://github.com/yui540/css-animations), it has a [live demo](https://yui540.github.io/css-animations/2025-02-25/transitions/) you can play around too. +要实现类似上述的过渡效果,您可以参考这个仓库 [yui540/css-animations: 俺流CSSアニメーション](https://github.com/yui540/css-animations),它还有一个 [在线演示](https://yui540.github.io/css-animations/2025-02-25/transitions/) 供您试玩。 ### [Nihe Works](https://nihe.work/) -He/she posts videos of his/her works on [YouTube](https://www.youtube.com/@nihe8683) too, you can check them out. +他/她也在 [YouTube](https://www.youtube.com/@nihe8683) 上发布了他/她的作品视频,您可以去看看。 -## Collection websites +## 收集网站 - [Websites For Creative Backgrounds | wweb.dev](https://wweb.dev/resources/creative-backgrounds) - [40 CSS Background Effects to Enhance Your Website](https://prismic.io/blog/css-background-effects) diff --git a/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/tools.md b/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/tools.md index ca4d45a70..2cd02dae9 100644 --- a/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/tools.md +++ b/docs/content/zh-Hans/docs/overview/contributing/design-guidelines/tools.md @@ -1,29 +1,29 @@ --- -title: Tools -description: Tools for designing the UI, UX for Project AIRI +title: 工具 +description: 用于设计 Project AIRI UI/UX 的工具 --- -## Colors +## 颜色 -By default, during development, we will use a tool called [UnoCSS](https://unocss.dev) to help us generate the everything about stylesheet, it's a great tool that works just the same as [Tailwind](https://tailwindcss.com). +默认情况下,在开发过程中,我们将使用一个名为 [UnoCSS](https://unocss.dev) 的工具来帮助我们生成关于样式表的所有内容,这是一个很棒的工具,工作原理与 [Tailwind](https://tailwindcss.com) 完全相同。 -Therefore, for basic color palettes, they are being listed under [Colors - Core concepts - Tailwind CSS](https://tailwindcss.com/docs/colors). +因此,对于基本的调色板,它们被列在 [Colors - Core concepts - Tailwind CSS](https://tailwindcss.com/docs/colors) 下。 -Generally, we will use `neutral`, `pink`, `violet` and `cyan` for default theme. Either of [UnoCSS](https://unocss.dev) or [Tailwind](https://tailwindcss.com) supports opacity adjustment based on color, but according to [Refactoring UI](https://refactoringui.com/): +一般而言,我们将使用 `neutral`、`pink`、`violet` 和 `cyan` 作为默认主题。[UnoCSS](https://unocss.dev) 或 [Tailwind](https://tailwindcss.com) 都支持基于颜色的不透明度调整,但根据 [Refactoring UI](https://refactoringui.com/): -> when ever we wanted to change the chroma of the color, we should try to avoid using opacity, but rather hand pick the best solid, non-alpha channel included colors for the best contrast. +> 每当我们想要改变颜色的色度时,我们应该尽量避免使用不透明度,而是手动挑选最佳的纯色、不含 alpha 通道的颜色,以获得最佳对比度。 -So, unless opacity is part of the typography design, please try to pick a best solid color for better readability. +所以,除非不透明度是排版设计的一部分,否则请尽量挑选最佳的纯色以获得更好的可读性。 -Another great tool we use is called [Radix Colors](https://www.radix-ui.com/colors), it's kind of the building blocks of our interactive UI elements, since they built great color palettes with nice color theory backed, you can pick the suitable color from the palette as well. +我们使用的另一个很棒的工具叫做 [Radix Colors](https://www.radix-ui.com/colors),它有点像我们交互式 UI 元素的构建块,因为它们构建了支持良好色彩理论的出色调色板,您也可以从调色板中挑选合适的颜色。 -You may already learned that a _complementary color_ is, it was useful for the color contrast, here are several nice tools can help you choose the complementary color quickly and interactively: +您可能已经了解了什么是 _互补色_,它对于颜色对比很有用,这里有几个不错的工具可以帮助您快速交互式地选择互补色: - [Color wheel - Figma](https://www.figma.com/color-wheel/) - [Color wheel - Canva Colors](https://www.canva.com/colors/color-wheel/) - [Paletton](https://paletton.com/#uid=55v1e0kk-p26VFOfrvbqEdSDDbg) -## Backgrounds & Patterns +## 背景与图案 - [Free SVG Backgrounds and Patterns | SVG Backgrounds](https://www.svgbackgrounds.com/set/free-svg-backgrounds-and-patterns/) - [Animated Background Headers - Generate animated background headers for any website](https://www.finisher.co/lab/header/)