LangChain導入とGeminiを使った旅行プラン作成のサンプル作成 #9

takatea · 2025-01-13T08:38:20Z

やったこと

差分多くてすまぬ

新規導入系

※ LangChainはLLMを使うのを楽にしてくれるライブラリどす

主に以下3つ

src/agents/travelPlanner.ts
- LLMを実行するためのプロンプト等を定義していたり、呼べるようにするために設定を記述してる
src/components/samples/agent/GoogleMapWithDirection.tsx
- 経路情報を今回追加したファイルように変更したかったため、ほぼ同じなのでみなくてもok
src/routes/samples/agent/index.lazy.tsx
- このファイルでユーザにいろいろ入れてもらってLLMに検索、その結果を使ってもろもろ表示をしている

refactor系

sample系のファイルはすべてsamples/に移動させた
- そろそろ本格的にルーティング切っていくので、sampleは邪魔かなと
lazy設定
- 開いていないのに裏でGoogleMap等が開かれまくってコスト膨らんでいたので。UX的には裏でデータ取得等しているほうがいいけどsampleなのでlazyにしておく

残タスク

あとは宿泊先を取れるようにするために、以下のどちらかを実施したい

別のLLMを作成して、Web検索できるようにしたい
なにかしらのAPIを使う（bokking.com 等）

検索画面	検索結果	経路

実際にリリースする際にはドメインで制限かける

https://github.com/yamadashy/repomix

そもそものサンプルコードが改善の余地あり

※ プロンプトはおいおい調整しなきゃいけない

lazyにして先にloadして無駄なAPI叩かないように

chakra-ui v3にかわってめっちゃ使いにくくなった気がする...

※GoogleMapは旅行先だけ

takatea · 2025-01-13T08:39:13Z

src/components/ui/field.tsx

[NOTE]

ui配下の差分はすべて自動生成

takatea · 2025-01-13T08:40:59Z

src/routes/samples/agent/index.lazy.tsx

[NOTE]

routes/samples配下の差分は
このファイル以外みなくてok！

ただし本当に利用する際にはもう少しチューニングが必要なのでその点だけ気をつけうこと

takatea · 2025-01-13T08:43:55Z

src/agents/travelPlanner.ts

[NOTE]

https://js.langchain.com/v0.1/docs/modules/model_io/output_parsers/types/structured/

このあたり。
zodでjsonの戻り値を定義して、langchainに渡すと、langchain側でいい感じにpromptを作ってLLMになげてくれる。
このおかげで構造化された状態でアプリケーションはもろもろデータを使える。

takatea · 2025-01-13T08:44:42Z

.gitignore

@@ -20,3 +20,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# for LLM context


おすすめです

https://github.com/yamadashy/repomix

初見やったわ。
Devinもええけど高すぎるし全自動すぎるから、安く自力でできるようにしたい場合はrepomixを使って対話する方が勉強できて良きやな。

takatea · 2025-01-13T08:51:04Z

src/agents/travelPlanner.ts

+  - Google Mapの経路は、旅行先の経由地のみを含めてください。出発地は含めないでください。
+  - Google Mapの出発地と目的地は、旅行先の出発地と目的地のみを含めてください。


[NOTE]

このあたり工夫することでGoogleMapの経路は旅行先だけにしてます。
ただし、旅費は出発地を考慮して出してもらうようにしてます

＜具体例＞
東京から北海道の2泊3日の旅行は

東京 <-> 北海道
の旅費も必要だけどGoogleMapの経路としては不要

takatea · 2025-01-13T08:56:46Z

src/agents/travelPlanner.ts

+import { z } from "zod";
+
+const model = new ChatGoogleGenerativeAI({
+  modelName: "gemini-2.0-flash-exp",


Gemini2.0が異常に精度が高いので2.0にしてます
あと2.0がGAになるまではこのmodelは無料で利用できるのでとてもお得

※ ただし学習されちゃうので個人情報はいれないこと

RYoJiy

ごめん、確認遅くなった！
というか、全部sample作ってくれて、、ほんまにありがとう（なんも実装してなくてごめん）
LGTM！

RYoJiy · 2025-01-16T02:33:27Z

src/routes/samples/agent/index.lazy.tsx

+      <Field label={"出発地"} mb={4} required>
+        <NativeSelectRoot size="sm" width="240px">
+          <NativeSelectField
+            placeholder="Select option"


[NITS]
必須入力のselect要素でplaceholderが選択できるのが気になったけど、Chakra的には今の実装をsampleとして提供してたし、そもそもこの実装もsampleやしで、一旦気にせんでも良さそうやから、
（動作確認しましたよアピールのために）コメントだけ失礼しま

（旅行先をSelect optionで旅行プランを作成してみたら、沖縄に行くことになってたw）

実は必須に見えて必須になっていないんだよねw
送信できちゃう

Select optionを選択した場合には、ガチャガチャ要素にさせるという逆転の発想やわ。

旅行先をSelect optionで旅行プランを作成してみたら、沖縄に行くことになってたw
...
ガチャガチャ要素にさせるという逆転の発想やわ。

そういうことか、たしかにそれは良さそうw

RYoJiy · 2025-01-16T02:47:50Z

.gitignore

@@ -20,3 +20,6 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+# for LLM context


初見やったわ。
Devinもええけど高すぎるし全自動すぎるから、安く自力でできるようにしたい場合はrepomixを使って対話する方が勉強できて良きやな。

takatea added 28 commits January 13, 2025 15:51

add: Geminiつかう際のAPIキー

e78b013

実際にリリースする際にはドメインで制限かける

chore: repomix 使ってLLMにコード食べさせるため

6ccb4bc

https://github.com/yamadashy/repomix

chore: add langchain

91ab495

bun install

9b8d609

refactor: setを消す

13afbbe

そもそものサンプルコードが改善の余地あり

ベースとなるAgentを追加

8afd44a

※ プロンプトはおいおい調整しなきゃいけない

feat: 確認用のページを作成

065841a

bun run build

fd8b520

refactor: samplesは現時点でパスを避けておく

5742fde

lazyにして先にloadして無駄なAPI叩かないように

chore: router自動生成

81a3c47

feat: プロンプトチューニング

6538054

検索結果を用いてルートを検索できるようにする

b6b7147

いい感じに出るようにチューニング

fba35a6

bunx @chakra-ui/cli snippet add number-input field select

139e481

feat: 都道府県、プランテーマ等を選択できるようにした

88a73c2

chakra-ui v3にかわってめっちゃ使いにくくなった気がする...

feat: コンポーネントをわけるようにした

8c7143e

feat: Planner用のagentとして名前を再定義した

f1de85b

bunx @chakra-ui/cli snippet add native-select

8584656

feat: selectのフォーカスが機能せず時間かかりそうなので、ネイティブのselectBoxを利用するようにした

b0e0d1b

feat: 出発地を考慮するようにした

dacb30d

※GoogleMapは旅行先だけ

feat: コストを詳細に出せるようにした

0db497f

feat: 時間ごとにプランを出せるようにした

7efab45

悲観出力になるようにチューニング

f312303

feat: 一人あたりのコストとユーザが気になっていることを考慮したプランにできるように

a8ca9c3

プロンプトを少しチューニング

be28a85

refactor: formのstateはobjectで管理する

7f73de5

feat: 時期を選べれるようにした

3b249a7

bun run check

1a90b87

takatea commented Jan 13, 2025

View reviewed changes

src/components/ui/field.tsx

Copy link

Contributor Author

takatea Jan 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[NOTE]

ui配下の差分はすべて自動生成

refactor: importは絶対参照

afb6384

takatea commented Jan 13, 2025

View reviewed changes

src/routes/samples/agent/index.lazy.tsx

Copy link

Contributor Author

takatea Jan 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

[NOTE]

routes/samples配下の差分は
このファイル以外みなくてok！

refactor: 一旦チューニングしたのでTODOを消す

f761140

ただし本当に利用する際にはもう少しチューニングが必要なのでその点だけ気をつけうこと

takatea commented Jan 13, 2025

View reviewed changes

takatea requested a review from RYoJiy January 13, 2025 08:52

takatea marked this pull request as ready for review January 13, 2025 08:52

takatea commented Jan 13, 2025

View reviewed changes

RYoJiy approved these changes Jan 16, 2025

View reviewed changes

takatea merged commit 2047d99 into main Jan 16, 2025
1 check passed

takatea deleted the add-llm branch January 16, 2025 10:58

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

LangChain導入とGeminiを使った旅行プラン作成のサンプル作成 #9

LangChain導入とGeminiを使った旅行プラン作成のサンプル作成 #9

takatea commented Jan 13, 2025 •

edited

Loading

takatea Jan 13, 2025

takatea Jan 13, 2025

takatea Jan 13, 2025 •

edited

Loading

takatea Jan 13, 2025

RYoJiy Jan 16, 2025

takatea Jan 13, 2025 •

edited

Loading

takatea Jan 13, 2025

RYoJiy left a comment

RYoJiy Jan 16, 2025

takatea Jan 16, 2025 •

edited

Loading

RYoJiy Jan 16, 2025

takatea Jan 16, 2025 •

edited

Loading

RYoJiy Jan 16, 2025

		- Google Mapの経路は、旅行先の経由地のみを含めてください。出発地は含めないでください。
		- Google Mapの出発地と目的地は、旅行先の出発地と目的地のみを含めてください。

LangChain導入とGeminiを使った旅行プラン作成のサンプル作成 #9

LangChain導入とGeminiを使った旅行プラン作成のサンプル作成 #9

Conversation

takatea commented Jan 13, 2025 • edited Loading

やったこと

新規導入系

refactor系

残タスク

Choose a reason for hiding this comment

Choose a reason for hiding this comment

takatea Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

takatea Jan 13, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

RYoJiy left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

takatea Jan 16, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

takatea Jan 16, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

takatea commented Jan 13, 2025 •

edited

Loading

takatea Jan 13, 2025 •

edited

Loading

takatea Jan 13, 2025 •

edited

Loading

takatea Jan 16, 2025 •

edited

Loading

takatea Jan 16, 2025 •

edited

Loading