AIを使った現実のポケモン図鑑の製作方法とは？

現実のためのポケモン図鑑を創造する

• ポケモン図鑑を現実に作成したいと思っています。写真を撮ると何でも分析・識別できるようにしたいのです。例えば、ピカチュウのぬいぐるみを撮影した場合、柔らかく、人気のポケモンであることが識別され、分類と統計情報、データベースに保存されたエントリーを確認できます。

• この現実の世界向けポケモン図鑑は、ポケモンだけでなく、鳥のような飛ぶタイプ、魚のような水タイプ、あるいは花や植物のような草タイプなど、あらゆる種類の動物を分類できるようになります。

• このポケモン図鑑を完成させたら無料で公開する予定です。なぜこのアイデアを実現しようと考えたのかというと、ポケモンは常に私の子供時代の一部であり、思い出に残るものです。初版から25年が経過しましたが、ほぼすべてのエピソード、出版された書籍、シリーズのすべてのゲームに今も最新情報を追い続けています。

• ポケモンファンであることは驚くに値しません。だからこそ、このポケモン図鑑のアイデアを実現したいという気持ちが沸き起こるのです。

• いくつかの起業を手掛けてきた私は、まず最初にGoogleでポケモン図鑑のデザインを調査し、このようなアイデアを実現している他の人がいるかどうかを確認しました。

• ポケモン図鑑のコンセプトは非常に興味深いです。特に、このアイデアが20年以上前に生まれたことを考えると、面白いです。ポケモン図鑑はテキストや画像を入力し、対象物を説明する出力を生成します。これを考えると、今日のGPTチャットのようなものです。

• 私の調査では、誰も実際の生活のためのポケモン図鑑を作成していないことがわかりました。ラズベリーパイを使用して3Dプリントの例を作成した人もいましたが、うまくいった例はありませんでした。

• 私が成功例に最も近いと考えたのは、このR1、またはラビットワンと呼ばれるもので、写真を撮影し、AIとビジョンを使用して説明を提示したり、日常のタスクを手助けしたりするポケットコンパニオンです。

• このような大きなプロジェクトに取り組む際は、私はいつもそれをシンプルなステップに分解することが好きです。

• Rabbitとは異なり、私は物理デバイスを作成しません。なぜなら、私たち全員がポケットにカメラ付きのスマートフォンを持っているからです。

• 私のポケモン図鑑計画は、画像をスキャンしてAIを使用して説明や身長・体重などの特徴を作成し、AI音声で説明し、それらのエントリーをデータベースに保存することです。

• これは大まかな計画です。詳細な計画にはデザイン、モバイルアプリを作成するかどうか、アプリストアに実際のアプリを配置するか、各ページのデザインなどが含まれます。

• 理論上は非常に簡単に見えますが、本当にできるかどうか試してみましょう。プロトタイプの設計を開始する時が来ました。

• これを行うために、私はFigmaにアクセスして、様々なアプリやウェブサイトのデザインを作成し始めるのに最適な場所の1つです。

• このポケモン図鑑デザインでは、元のポケモンゲームからの美学と雰囲気を再現したいと考えています。

• Google、Behance、Dribbleに移動して、公式ポケモンのウェブサイトからのポケモン図鑑の写真や、任天堂のコンセプトアート、TV番組のポケモン図鑑など、さまざまな写真のモンタージュを収集し始めます。

• 他にも、ポケモン図鑑の見積もりを試みたウェブサイトもあります。全てがポケモン図鑑がどのように見えるか、アプリケーションやウェブサイトのユーザーインターフェイスがどのように見えるか、ポケモンのプレビューや統計情報、使用されているフォントや色などがわかります。

• これらがポケモン図鑑の構想を考える際に人々が抱いていた異なる考え方の一例だといえるでしょう。

• これで私は自分のポケモン図鑑のスクリーンをスケッチし始める準備が整ったと思います。

• 最初のスクリーンであるログインスクリーンでは、ポケモン図鑑らしさを感じるために、上部に素敵なヘッダーと3つの小さな円を配置します。直感的に「ポケモン図鑑」という言葉が記され、ログインボタンとデモボタンが配置されます。

• 次のスクリーンは最も重要なものの1つになります。それはカメラスクリーンです。写真を撮るための大きなカメラが表示され、下部に押すボタンがあります。

• 3番目のスクリーンはポケモン図鑑そのもので、ポケモンの写真と名前、および各ページに移動できる下部のメニューが表示されます。

• また、ポケモンの写真、名前、説明、すべての統計を見るビューページも必要になるでしょう。これがPO Xの核心コンセプトです。

• これまでのところ順調ですが、少し腹が減ったので昼食休憩の時間です。ラップトップを取って何かをしようと思います。

現実のためのポケモン図鑑を創造する

新感覚のデザイン制作：アプリケーション開発のインスピレーション

• 道中で仕事をすることは、新鮮な空気を吸い込み、新しい景色を見ることでクリエイティブな気分になるのを助けます。特に、アプリケーションやプロジェクトのデザインフェーズに取り組んでいるときには。

• アプリケーションの全体的な外観がどのようになるかについて考え、そのアイデアをスケッチアウトするだけで、具体的なものを作りたいとは思いません。後でカメラなどに使用するかもしれない小さな形や三角形、円などを含めます。

• 食事が到着する前にあまり時間がかからず、リフレッシュしてエネルギーをチャージし、スタジオに戻る準備をします。今は、構築したいものやそのデザインやレイアウト全体について非常に明確なイメージを持っていますので、実際にその作業を始める時が来ました。

• デザインのモックアップでは、iPadで作成したスケッチをFigmaに組み込み、ポケモン図鑑のスタイリングを親しみやすく、任天堂のように見せたいと考えています。最近、Hyperflexed氏が行ったビデオを見て、その背景効果を再現できたことが本当に楽しかったです。

• 色彩とスタイリングをプロフェッショナルにすることを試みるため、このスケッチのSVGを取り込み、色彩の配色とタイポグラフィを作成します。これは少し難しい作業ですが、Googleフォントで多くの検索を行い、ポケモンのロゴから色を選んでここに配置します。

• フォントについては、ポケモンや任天堂のテーマに近いフレンドリーでわくわくするようなものを見つけるのが難しい作業でしたが、Poetサンドワンというフォントに出会いました。曲線を持つ文字がまるでコミックサンドのようで、選択しました。

• 次はデザインの最も簡単な部分です。それぞれの画面のハイファイデリティバージョンを作成します。ここでは、ヘッダーに多くの時間と注意を払います。この部分は、カメラのエステティックスのようなもので、ポケモン図鑑の特徴として青い丸いカメラと3つの点を持ちます。

• デザインを完成させ、ログインボタンとスキャンボタンを持つログイン画面を非常に満足しています。これで、ウェブアプリにするつもりなので、通常の携帯アプリのようなメニューがあります。プログラミングを始める時が来ました。このプロジェクトをどのように構築したかを示します。

• Astra DBはデータベースサービスであり、Apache Cassandraの上に構築された80ギガまで完全に無料のサービスです。彼らはこのビデオをスポンサーしてくれており、このポケモン図鑑をどのように実現するかについて紹介しました。彼らの新しいJavaScript APIモジュールを使用して、データベースと直接インターフェースを持つことができます。

• バックエンドで実行するために、Astra DBのドキュメントを読み、ポケモン図鑑データベースの構造を考え始めました。コーヒーを飲みながら一行コードを書き、私のお気に入りのコーヒーと一緒にプログラミングをしていく様子をお楽しみください。

新感覚のデザイン制作：アプリケーション開発のインスピレーション

ポケモンデータベースの創設とAIモデルを活用した写真解析の冒険

• クライアントはTypeScriptとJavaScriptの両方を扱うことになる、コンソールでnpm install add data Stacks SL asrb DTSを実行します。最初にデータベースに追加するのは、バルバザーというポケモンです。

• しかし、データベースがまだないし、アカウントも持っていない。無料アカウントにサインアップすることにします。Googleの認証情報を使用してログインし、利用規約に同意します。ダッシュボードに移動し、データベースの作成を選択します。

• Pokedexと呼ぶことにし、Amazon Web Servicesを使用します。データベースの作成には数分かかります。初めてのコレクションを作成します。これはポケモンのコレクションとし、ベクターデータベースに設定します。

• OpenAIのテキスト埋め込みAda 002モデルを使用し、Astra DBが残りを全て設定してくれます。接続の詳細もダッシュボードにあるので、次のNext.jsアプリケーションにすぐに接続できます。

• AIモデルを使用して写真を解析し、説明を提供する方法を探ります。GoogleでOpenAIを検索し、最近リリースされたGPT 4 Omniなど最新モデルを調べます。

• プロンプトを作成し、Chad GPTが画像を分析し、その中に何があるかを正確に教えてくれることを確認します。模擬ポケモン図鑑のようなデザインを作成する際に、画像のサイズやGPTの制限なども考慮する必要があります。

• ユーザーが直接カメラから写真を撮ることができるように、新しい機能を実装します。既存のライブラリを使用することで問題を解決し、ユーザーエクスペリエンスを向上させます。

• React Webcamなどのライブラリを活用し、デザインと美学を実装します。ポケモン図鑑の全体デザイン、ヘッダーや背景などの要素を取り入れ、本格的な体験を提供します。効果音や操作性にもこだわり、ユーザーが楽しめる仕組みを構築します。

ポケモンデータベースの創設とAIモデルを活用した写真解析の冒険

未来のポケモン図鑑：夢を現実にする革新的なプロジェクト

• ポケモン図鑑を再現するプロジェクトが始まりました。写真を撮るだけで、オリジナルなポケモン図鑑の音声や統計情報を生成できるようになりました。

• このプロジェクトでは、リアルなポケモン図鑑の声をAIモデルで作成する試みも行われました。数時間の映像を用意する必要がありましたが、最結局は他のオプションを探すことになりました。

• さらに、ログイン機能を追加することで、ユーザーが自分のポケモン図鑑のデータを保存し、ランキングを確認できるようになりました。

• 検索機能も強化され、ベクトル埋め込みを使用して類似項目を見つけることが可能になりました。データベースを最適に活用し、効率的な検索を実現しています。

• この革新的なポケモン図鑑のプロジェクトは、これからさらなる進化を遂げることが期待されます。これまでの取り組みを評価し、新機能の追加に向けてさらなる支援を行っていきます。

• ポケモンファンにとっては夢のようなプロジェクトが現実化し、これからの展開が楽しみです。

未来のポケモン図鑑：夢を現実にする革新的なプロジェクト

Conclusion:

ポケモンファンにとって夢のようなプロジェクトが現実化し、AIを活用したポケモン図鑑の製作が進行中です。これからの展開が楽しみです。

Q & A