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

Slide 1

Slide 1 text

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

Slide 4

Slide 4 text

会社情報会社名株式会社スリーシェイク設立日 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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

Slide 10

Slide 10 text

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

Slide 11

Slide 11 text

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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は、デフォルトでタグ内を読んでいて、その中にや <style>があると出力してしまう 13

Slide 14

Slide 14 text

LangChainでWebサイトの内容取得 ● cheerioWebBaseLoaderを使わず、タグ内のや<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, '')

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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