AIと地図を組み合わせてロケーションを生成する
こんにちは皆さん、愛すべき皆さん！
私の名前はケビン・ウエハラ、iFoodのスタッフフロントエンドエンジニア、スピーカーでコンテンツクリエーターです。
この記事では、地図を使用し、OpenAPIとの統合を行ってロケーションを生成する個人的なアプリケーションを紹介します。特定の場所で最もよく知られている目的地や場所をルーティングできるアプリを想像してみてください。
フロントエンドで地図を扱うことは、私が個人的にまだ経験したことがなく、非常に複雑だと思っていました（今もそう思いますが、かなり少なくなりました）。地図、ポリゴンのレンダリング、クライアントで処理されるすべての空間データについて、どうやってこれをやっているのかと疑問に思いました。魔法？違います！それは技術です...
iFoodのフロントエンドで直面した課題について話す価値があるかもしれませんが、それは別の記事で。ここでは、デモアプリの構築に非常に実用的に焦点を当てたいと思います。
主なアイデアは、アプリを紹介し、地図を使ったアプリの構築に適したツールの概要を提供することです。ユーザーがテキストフィールドに何かを書き込むと、地理的な質問であれ、OpenAIがロケーションを提案し、地図と対話することができるようになるフロントエンドに地図を統合する方法を紹介します。
ここでの目標は、地図を扱ういくつかのツールを紹介し、市場で使用されているものを紹介することです。アプリケーションはVite + Reactライブラリを使用してフロントエンドツールとして構築され、Typescript、MapLibre、Tailwind、そしてOpenAIを使用しています。
導入
以前言及したように（ネタバレ）、フロントエンドのテンプレートとしてReactとTypescriptを使用し、パッケージ/依存関係の管理とプロジェクトの作成にViteを使用します。Vite（rollupの使用）だけでも、別の記事に値します。しかし、この記事の目的から逸脱しないように、最後にそれぞれのドキュメントへのリンクをご用意しました。したがって、Create React App（CRA）を使わずにViteを使用し、必要なものすべてを提供し、シンプルでスリムなアーキテクチャを実現します。
また、Tailwindを使用してアプリケーションにスタイルを簡単かつ繊細にケアし、私たちの生活を楽にします。
さらに、オープンソースのMaplibreライブラリを使用して地図をレンダリングします。React Map GLは、さまざまなReactコンポーネントを提供し、地図上でのインタラクションを可能にします。さらに、MapTilerを地図のスタイリングに使用します。MapTilerは、素晴らしい清潔感のある地図を提供し、ある程度のリクエストまで無料で利用可能です。デモ用のアプリなので、この点については心配することはありませんが、この点は覚えておいてください（OpenStreetMapsのオープンソースの地図スタイルを使用することもできます）。
要約すると、以下を使用します:
Vite（テンプレート）
React + Typescript
Tailwind（CSSフレームワーク）
MapLibre（地図レンダリングライブラリ）
OpenAI - AIツール
基本的には、次のようなウェブアプリケーションを作成します:
以上
技術
OpenAI
OpenAIは、アメリカにある人工知能に関する研究所です。さまざまな製品とAPIを持っており、最もよく知られているのがChatGPTです。
このデモでは、そのAPIの1つをAIモデルを通じて使用する予定です。無料クォータは5ドル以下ですが、このデモではそれを超えて使用し、やや高いコストが発生しました。
アカウントを作成した後、OpenAIのPlaygroundも使用できるようになります:
MapLibre
MapLibreは、あなたのアプリケーションに地図を公開するためのオープンソースライブラリです。GPU加速のベクターブロックレンダリングとWebGLにより最適化された表示が可能です。
MapTiler
MapTilerはカスタマイズ可能なスタイルのマッププロバイダです。無料のアカウントを作成できますが、リクエストにクォータがあり、それらの使用には料金が発生します。
MapTilerは、このアプリケーションにとって必須ではありません。もう一つの選択肢として、オープンソースのOpenStreetMaps（OSM）マッピングプロバイダを利用することもできます。
React Map GL
MapLibre/Mapboxに統合されたコンポーネントのライブラリで、あなたのアプリケーションで使用できます。コンポーネントに統合する自身のフックを使用でき、開発者の生活をより簡単にします :)
Show me the code
まず、Viteを使用してReactとTypescriptを使用してアプリケーションを作成します:
yarn create vite openai-maps --template react-ts
プロジェクトに入り、依存関係をインストールします:
yarn
そして、アプリケーションを実行します:
yarn dev
初期スクリーンとプロジェクトが開始されたところです:
その後、公式ドキュメントに従ってtailwindを設定します:
次に、.envファイルにAPI Keyをマッピングして作成します:
OpenAIとMapTilerでアカウントを作成してapi keyを取得する必要があります。
次に、必要な依存関係をインストールします:
yarn add maplibre-gl react-map-gl openai
App.tsxを変更して、MapLibreの地図とMapTilerのスタイルを使用します:
さぁ、私たちのアプリケーションに地図ができました:
次に、3つのコンポーネントを作成します：LoadingSpinner、NavigationLabel、Sideber:
src/componentsディレクトリ内に作成します
LoadingSpinner
ただのローディングコンポーネントです:
SideBar
サイドバーのコンポーネントで、検索フィールドとOpenAIから取得した結果を含みます:
NavigationLabel
OpenAIによって生成されたロケーションを取得し、選択された後、react-map-glのフックを使用してその場所に移動する（flyTo()関数使用）コンポーネントです:
次に、ServiceとしてOpenAIとの統合を作成します:
そして、魔法のようです！
OpenAIからのレスポンスを、JSONフォーマットされたAPIコールとしてシミュレートします。
おかげで次のコンスタントを使用:
これで、ユーザーが打ち込んだものと期待するフォーマットとを結合し、コンポーネントを正しくレンダリングできます。
OpenAIのPlaygroundで見ることができます:
最後に、すべてのコンポーネントとServiceを呼び出してApp.tsxをリファクタリングします:
ContextAPI、Redux、Jotai、Zustandなどのステート管理を使用していません。単に状態を使用し、prop-drilling経由で渡しています。
最後に、IAを地図生成に使用するアプリケーションが完成しました。素晴らしいですね？
簡単に言うと、これが全てです
この記事で紹介したプレゼンテーションは、NodeBRのチャンネルでライブ配信されました:
それでは今日はこれで終わりです！
いつも元気でね！
NodeBR Linktree: https://linktr.ee/nodebr
連絡先：
Youtube: https://www.youtube.com/@ueharakevin/
Linkedin: https://www.linkedin.com/in/kevin-uehara
Instagram: https://www.instagram.com/uehara_kevin/
Twitter: https://twitter.com/ueharaDev
Github: https://github.com/kevinuehara
dev.to: https://dev.to/kevin-uehara
Email: uehara.kevin@gmail.com
こちらの記事はdev.toの良い記事を日本人向けに翻訳しています。
https://dev.to/nodebr/integrando-ia-com-mapas-para-geracao-de-localizacoes-411p
