LangChainでWebサイトの内容取得やGitHubソースコード取得

LangChainでWebサイトの内容取得や GitHubソースコード取得 Copyright © 3-shake, Inc. All Rights Reserved. 2024年9月2日
株式会社スリーシェイク小渕周 1

自己紹介 • 小渕周（Shu Kobuchi）こぶシュー • https://x.com/shu_kob • 2023年12月スリーシェイク入社 ◦
Sreake 事業部 ◦ アプリケーション開発支援チームエンジニア ◦ 生成 AI アプリケーション開発等 ◦ 今はほぼほぼ Geminiを使用 ◦ 音声解析も 2

会社情報会社名株式会社スリーシェイク設立日 2015/1/15 Mission: インフラをシンプルにしてイノベーションが起こりやすい世界を作る Vision: 労苦〈Toil〉を無くすサービスを適正な価格で提供し続ける
Value: エンジニアリングレイヤーに横たわる人、手法、ツールがサイロ化されて労苦が発生しているプロセスをシンプルにしサービス機能開発に集中できるソリューション（SRE、DevSecOps、DataOps、HROps）を提供する 2015 2016 2017 2018 2019 2020 2021 2022 0 50 100 従業員: 200名over Engineer 60% 所在地東京都新宿区大京町22-1 グランファースト新宿御苑3F・4F　代表者代表取締役社長　吉田拓真 Google Cloud、AWSの両方に強みを持ち SREを軸にご支援 4

SREを主軸にクラウドネイティブ化/エンジニアリング内製化を支援 SRE/DevOps SecOps BizOps HR ・SRE総合支援からセキュリティ対策を全方位支援・生成AIの活用支援・ワンストップで脆弱性診断を行うセキュリティ対策SaaS
・クラウド型ETL/データパイプラインSaaSの決定版・あらゆるSaaSをノーコードで連携・ハイスキルフリーランスエンジニア紹介エージェント IT内製化 / 高度化クラウドネイティブ化モダナイゼーション ITアジリティ向上 5

Sreakeの概要 1. SREの考え方を軸にした全方位型のご支援クラウドネイティブインフラ・セキュリティ支援クラウドネイティブアプリケーション開発支援生成AIアプリケーション開発構築支援・コンテナ化、コンテナ運用ご支援　（Kubernetesに強み）・CI/CD環境構築支援・クラウドセキュリティ設計・運用支援
・Observability設計・運用支援データモダナイゼーション支援・コンテナ化対応などクラウドネイティブ対応に関するアプリケーション開発のご支援・アプリケーションモダナイゼーション支援・バックエンド開発支援（Go, Python, TypeScript）・フロントエンド開発支援（Vue, React）・Big Query/Dataplex データ基盤構築支援・BI（Looker）構築をフルスタックで支援・Snowﬂakeメインのデータ基盤構築支援・DBRE支援（Spanner/AlloyDB）・NewSQL（TiDB, YugabyteDB）支援・生成AIアプリ開発運用支援・社内情報検索のためのデータ設定支援・SREの考え方を元に開発後の運用支援・内製化のための生成AIワークショップ／ハンズオン開催 • 高度な技術力と幅広い領域の経験を持つエンジニアが多数在籍しており、伴走型でお客様に最適なクラウドネイティブ対応のご支援を行います。 • インフラ・アプリケーション・セキュリティなど含め全方位型で対応可能です。 SREの考え方を元に運用まで見据えたご支援を行います。 7

Sreakeの概要 3. 高度な技術力と自走できるメンバー • 生成AIやクラウドネイティブ技術は変化が激しく常に最新の技術領域に対して習得が必要です。Sreakeのエンジニアはこれら最新の技術領域に対するインプットとアウトプットを高速で行いながら、お客様のニーズに対して最適な提案ができるように取り組んでいます。 <弊社で監訳した書籍> <最新技術の調査・検証結果のアウトプット> <各分野の有識者によるアウトプット>
• 弊社メンバーが自走しながらお客様に対して提案型でのご支援をさせて頂いております。 • 技術のみであれば業務委託などのご支援で良いケースもありますが、提案型でのご支援という点もお客様の評価を頂いております。 8

アジェンダ • LangChainでWebサイトの内容取得 • LangChainでGitHubソースコード取得 • ※ JS版を使用しています。ご容赦ください󰢛 10

LangChainでWebサイトの内容取得 • チャット欄でURLを入れて、リンク先のページの要約や翻訳をしても、ページの中身を見てくれない • チャット欄にURL入れたらリンク先の情報を取得できるようにしてほしい • LLMがページをキャッシュしていれば、いけるケースも ◦ 最新の記事を読ませたらダメだった
12

LangChainでWebサイトの内容取得 • 実行例サンプルコード ◦ https://github.com/shu-kob/langchain-sample-code/blob/main/cheerioWebBaseL oader.ts • 使い方 ◦ https://js.langchain.com/v0.1/docs/integrations/document_loaders/web_loaders
/web_cheerio/ • 実行例 ◦ $ npx ts-node cheerioWebBaseLoader.ts https://www.touken-world.jp/tips/7398/ • ページによっては、コードが多く入ってしまう ◦ $ npx ts-node cheerioWebBaseLoader.ts https://www.gyomusuper.jp/ • cheerioWebBaseLoaderは、デフォルトで<body>タグ内を読んでいて、その中に<script>や <style>があると出力してしまう 13

LangChainでWebサイトの内容取得 • cheerioWebBaseLoaderを使わず、<body>タグ内の<script>や<style>を除去 ◦ https://github.com/shu-kob/langchain-sample-code/blob/main/webLoad.ts • 実行例 ◦ $ npx
ts-node webLoad.ts https://www.gyomusuper.jp/ • 比較的綺麗に取れるように 14 // HTMLの取得 const response = await fetch(url) const htmlText = await response.text() const cheerioText = cheerio.load(htmlText) // styleとscriptを除去 cheerioText('style').remove() cheerioText('script').remove() const bodyContent: string = cheerioText('body').text().replace(/\s+/g, '')

cheerioWebBaseLoaderについて • 長いページの場合は一旦要約して、プロンプトに入れる ◦ 200万トークン対応のGemini1.5など長大なトークン長に対応していたら要約が不要になる場合も • 将来的にLLMが最新のも含めてURLのページ取得に対応したら、不要になりそう 15

LangChainでGitHubリポジトリのソースコード取得 • 実行例サンプルコード ◦ https://github.com/shu-kob/langchain-sample-code/blob/main/githubLoader.ts • 使い方 ◦ https://js.langchain.com/v0.2/docs/integrations/document_loaders/web_loaders /github/
▪ GitHub Access Tokenを使うことで、Privateリポジトリの情報も取得可能 • 実行例 ◦ $ npx ts-node githubLoader.ts https://github.com/GoogleCloudPlatform/enterprise-knowledge-solution version1.2 • ソースコードは文量が多い ◦ ignorePathsで削るなど ◦ こちらも200万トークン対応のGemini1.5など長大なトークン長に対応していたら要約が不要になる場合も 17

ソースコード読解の実用例 • ソフトウェア開発への生成AI活用 ◦ プロジェクトマネージャが開発者に確認しなくても迅速に正確に仕様を把握可能 ◦ プロジェクトへの新規着任者がシステムの仕様理解迅速化 ◦ 仕様書を作らせるだけだとあっさりなので、各ファイルごとの仕様書も追加 GenAI
App Source Codes 仕様書作成指定したGitHubリポジトリのソースコードを読み取りソフトウェア開発支援生成 AI アプリ作成した仕様書を RAGに配置して、検索、質問が可能 LLM 「ソースコードから仕様書を作成してください」

LangChainでWebサイトの内容取得やGitHubソースコード取得

LangChainでWebサイトの内容取得やGitHubソースコード取得

Shu Kobuchi

More Decks by Shu Kobuchi

Other Decks in Programming

Featured

Transcript

LangChainでWebサイトの内容取得や GitHubソースコード取得 Copyright © 3-shake, Inc. All Rights Reserved. 2024年9月2日

自己紹介 • 小渕周（Shu Kobuchi）こぶシュー • https://x.com/shu_kob • 2023年12月スリーシェイク入社 ◦

会社概要 Copyright © 3-shake, Inc. All Rights Reserved. 3

会社情報会社名株式会社スリーシェイク設立日 2015/1/15 Mission: インフラをシンプルにしてイノベーションが起こりやすい世界を作る Vision: 労苦〈Toil〉を無くすサービスを適正な価格で提供し続ける

SREを主軸にクラウドネイティブ化/エンジニアリング内製化を支援 SRE/DevOps SecOps BizOps HR ・SRE総合支援からセキュリティ対策を全方位支援・生成AIの活用支援・ワンストップで脆弱性診断を行うセキュリティ対策SaaS

Sreakeのご紹介 Copyright © 3-shake, Inc. All Rights Reserved. 6

LangChainでWebサイトの内容取得やGitHub ソースコード取得 Copyright © 3-shake, Inc. All Rights Reserved. 9

アジェンダ • LangChainでWebサイトの内容取得 • LangChainでGitHubソースコード取得 • ※ JS版を使用しています。ご容赦ください󰢛 10

LangChainでWebサイトの内容取得 Copyright © 3-shake, Inc. All Rights Reserved. 11

LangChainでWebサイトの内容取得 • 実行例サンプルコード ◦ https://github.com/shu-kob/langchain-sample-code/blob/main/cheerioWebBaseL oader.ts • 使い方 ◦ https://js.langchain.com/v0.1/docs/integrations/document_loaders/web_loaders

LangChainでWebサイトの内容取得 • cheerioWebBaseLoaderを使わず、<body>タグ内の<script>や<style>を除去 ◦ https://github.com/shu-kob/langchain-sample-code/blob/main/webLoad.ts • 実行例 ◦ $ npx

LangChainでGitHubソースコード取得 Copyright © 3-shake, Inc. All Rights Reserved. 16

LangChainでGitHubリポジトリのソースコード取得 • 実行例サンプルコード ◦ https://github.com/shu-kob/langchain-sample-code/blob/main/githubLoader.ts • 使い方 ◦ https://js.langchain.com/v0.2/docs/integrations/document_loaders/web_loaders /github/

ご清聴ありがとうございました Copyright © 3-shake, Inc. All Rights Reserved. 19