😎

Google Gemini APIにリポジトリのソースコードごと送って質問する

2024/04/19に公開

JavaScript

LLM

Gemini

tech

Gemini 1.5 Proは 128,000 token context window扱えるということでこれはもうインデックス構築して牽くとかではなく全部含められるのではということで送信するようにしてみました

htmxのsrc/以下を送信した例

$ node askrepo.js 'What is the code for?' src/

HTTP Status Code: 200

Analysis of Provided Code Snippets:

Based on the file names and source code provided, it seems you're dealing with a collection of HTMX extensions. HTMX is a library that allows you to access modern browser features directly from HTML, using attributes for things like AJAX, CSS Transitions, WebSockets, and Server-Sent Events.

Here's a breakdown of each file's purpose:

src/ext/ajax-header.js: This extension ensures that the "X-Requested-With" header is set to "XMLHttpRequest" for HTMX-driven requests. This can be helpful for server-side code to distinguish between regular and AJAX requests.
src/ext/alpine-morph.js: Integrates with the Alpine.js library to provide "morphing" transitions when swapping content. Alpine.js is another library for declarative interactions within HTML.
src/ext/class-tools.js: Provides tools for manipulating classes on elements. It allows you to add, remove, toggle, and even set up sequences of class changes with delays using the classes attribute.
src/ext/client-side-templates.js: Allows the use of client-side templating libraries like Mustache, Handlebars, and Nunjucks to render responses from the server before they are swapped into the DOM.
src/ext/debug.js: A simple extension for debugging purposes. It logs HTMX events to the console, aiding in understanding the library's behavior.
src/ext/disable-element.js: Allows you to disable elements (like submit buttons) during an HTMX request to prevent multiple submissions.
src/ext/event-header.js: Adds information about the triggering event to the request headers, allowing the server to have more context about the action that led to the request.
src/ext/head-support.js: Enables merging of <head> tag content from HTMX responses into the current document's <head>. This allows for dynamic updates of things like title, meta tags, and stylesheets.
src/ext/include-vals.js: Allows you to include additional values in HTMX requests based on the include-vals attribute of an element.
src/ext/json-enc.js: Forces HTMX requests to use JSON encoding for parameters and sets the appropriate content type header.
src/ext/loading-states.js: Provides ways to show loading indicators while HTMX requests are in progress. You can control the visibility, classes, and aria-busy attributes of elements during requests.
src/ext/method-override.js: Allows you to use HTTP verbs beyond GET and POST with HTMX by setting the "X-HTTP-Method-Override" header.
src/ext/morphdom-swap.js: Uses the morphdom library to provide more efficient DOM diffing and updating when swapping content.
src/ext/multi-swap.js: Allows for swapping multiple elements within a single HTMX request using different swap styles for each element.
src/ext/path-deps.js: Enables refreshing elements based on changes to specific URL paths.
src/ext/path-params.js: Allows you to specify parameters within the URL path of an HTMX request.
src/ext/preload.js: Enables preloading of HTMX targets based on various triggers, like hovering or clicking on elements.
src/ext/remove-me.js: Allows you to set up elements to be automatically removed from the DOM after a certain delay.
src/ext/response-targets.js: Enables targeting different elements based on the HTTP response code of an HTMX request.
src/ext/restored.js: Provides a way to trigger events on elements that were restored from the history cache.
src/ext/sse.js: Adds support for Server-Sent Events (SSE) to HTMX, allowing for real-time updates from the server.
src/ext/ws.js: Adds support for WebSockets to HTMX, enabling bi-directional communication with the server.
src/htmx.d.ts: This file is a TypeScript definition file, which provides type information for the HTMX library for use in TypeScript projects.
src/htmx.js: This is the core HTMX library code, containing the main functionality and logic.
src/htmx.test.ts: This file appears to be a collection of examples demonstrating the usage of various HTMX functions and features.

~~https://gist.github.com/laiso/baa0763cee4e9b0534a72c8ab0cf6c97~~

GOOGLE_API_KEYは https://aistudio.google.com/app/apikey から取得できます

commonjsで記述したのはactions/github-scriptに組込みやすいようにするためです。外部ライブラリの依存も避けました

これを利用してIssueを立てたらソースコードを参照して返事をするBOTを作りました。以下で動作しています

入力できる規模はソースコード1-2万行程度で大きめのOSSリポジトリ(ReactやLangchain等)をすべて含めると Request payload size exceeds the limit: 20971520 bytes とGemini APIの制限にひっかかりました

なのでディレクトリ以下を指定できるようにしました。以下はNext.jsの特定のディレクトリを入力した結果

$ node askrepo.js askrepo.js 'what is ppr?' packages/next/src/client/

Understanding PPR in Next.js

Based on the provided source code snippets, PPR likely refers to Partial Page Rendering or a similar concept within Next.js. Let's analyze the code to understand its implementation and implications.

Evidence of PPR:

packages/next/src/client/components/router-reducer/navigate-reducer.ts: This file contains two implementations of the navigateReducer function: navigateReducer_PPR and navigateReducer_noPPR. The active implementation is chosen based on the value of the environment variable process.env.__NEXT_PPR. This suggests PPR is a feature toggle related to navigation and state updates.
packages/next/src/client/components/router-reducer/restore-reducer.ts: Similar to the navigateReducer, this file also checks process.env.__NEXT_PPR to determine how the cache is handled during restoration. This reinforces the idea of PPR being related to state management and optimization.

Potential Implications of PPR:

Optimized Navigation: The presence of different implementations based on PPR suggests that it might optimize navigation by only updating the parts of the page that have changed, instead of re-rendering the entire page. This could lead to faster transitions and improved performance.
Cache Management: The restoreReducer implementation for PPR updates the cache to drop prefetch data for segments with already received dynamic data. This hints at PPR impacting cache management during navigation, potentially preventing unnecessary re-fetching and state flashes.

Further Investigation:

To fully understand PPR, it would be helpful to:

Analyze the navigateReducer_PPR and updateCacheNodeOnNavigation functions: These functions likely contain the core logic of how PPR works, including how it determines which parts of the page to update and how it manages the cache.
Investigate the usage of process.env.__NEXT_PPR: Look for other instances of this environment variable to identify additional components affected by PPR and gain a more comprehensive understanding of its scope.

Conclusion:

While the provided snippets offer strong evidence for PPR being related to Partial Page Rendering or a similar optimization technique, further investigation is necessary to fully grasp its workings and impact on Next.js applications.

追記： Sat May 18 18:51:13

askrepoコマンドを日本語で質問できるようにしました
同コンテキストウィンドウを持ち、コストの低いGemini 1.5 Flashを使うように変更

@google/generative-aiを依存に追加したのでスタンドアロンなスクリプトではなく、インストールして呼び出すようにしました

git clone https://gist.github.com/laiso/3b5e87ad8b92aece3f6b7ecdecef3606 askrepo
cd askrepo
npm i
npm i -g .
which askrepo
export GOOGLE_API_KEY=XXX # https://aistudio.google.com/app/apikey

サンプル(jina-ai/readerで実行)

$ askrepo "このコードの設計を解説して" ./backend/

この
コードは、Firebase Cloud Functions を使用して、Webページのクロールと
検索機能を提供するバックエンドサービスを実装しています。

ファイル構成:

backend/.firebaserc: このファイルは Firebase プロジェクトの構成情報を定義しています。default プロジェクトとして reader-6b 7dc プロジェクトを使用することを指定しています。
backend/.gitignore: このファイルは Git リポジトリから無視するファイルやフォルダ
を定義しています。ログファイル、Firebase のキャッシュや構成ファイル、実行時のデータなどが含まれています。
backend/firebase.json: このファイルは Firebase Cloud Functions のデプロイメント設定を定義しています。Firestore
のルールファイルとインデックスファイル、Functions のデプロイメント設定が含まれています。
backend/functions/.editorconfig: このファイルはコードエディタの構成を定義し、コードのスタイルを統一するために使用
されます。
backend/functions/.env.example: このファイルは環境変数のサンプルを定義しています。実際の環境変数は backend/functions/.env ファイルに設定されます。
backend/functions/.puppeteerrc.cjs: このファイルは Puppeteer の構成を定義しています
。Puppeteer のキャッシュディレクトリを node_modules/puppeteer/walk-around-lame-gcp-build に変更しています。
backend/functions/integrity-check.cjs: このファイルは、GeoLite2-City.mmdb ファイルの整合性チェックを実行します
。このファイルが存在しない場合、エラーメッセージを出力してプロセスを終了します。
backend/functions/package-lock.json: このファイルは npm パッケージの依存関係をロックしています。
backend/functions/src/cloud-functions/crawler.ts: このファイルは、Web
ページのクロール機能を実装しています。
backend/functions/src/cloud-functions/searcher.ts: このファイルは、Webページの検索機能を実装しています。
backend/functions/src/db/crawled.ts: このファイルは、クロールされたWeb
ページのデータを Firestore に保存するためのモデルを定義しています。
backend/functions/src/db/img-alt.ts: このファイルは、画像のaltテキストのデータを Firestore に保存するためのモデルを定義しています。
backend/functions/src/db/searched.ts
: このファイルは、検索結果のデータを Firestore に保存するためのモデルを定義しています。
backend/functions/src/fetch.d.ts: このファイルは、undici ライブラリの型定義を定義しています。
backend/functions/src/index.ts:
このファイルは、Firebase Cloud Functions のエントリポイントです。他のモジュールをロードし、Firebase のサービスを初期化します。
backend/functions/src/services/alt-text.ts: このファイルは、画像のaltテキストを生成するためのサービスを実装しています。

backend/functions/src/services/brave-search.ts: このファイルは、Brave Search API を使用してWebページを検索するためのサービスを実装しています。

backend/functions/src/services/geoip.ts: このファイルは、IPアドレスから都市などの地理的な情報を取得
するためのサービスを実装しています。
backend/functions/src/services/puppeteer.ts: このファイルは、Puppeteer を使用してWebページをクロールするためのサービスを実装しています。
backend/functions/src/types.d.ts: このファイルは、langdetect ライブラリと jsdom ライブラリの型定義を定義しています。
backend/functions/src/utils/markdown.ts: このファイルは、Markdown テキストを整形するためのユーティリティ関数を定義しています。
backend/functions/src/utils/misc
.ts: このファイルは、一般的なユーティリティ関数を定義しています。
backend/functions/tsconfig.json: このファイルは、TypeScript コンパイラの構成を定義しています。
backend/storage.rules: このファイルは Firebase Storage のセキュリティルールを定義しています。

**
設計の概要:**

Firebase Cloud Functions: このコードは、Firebase Cloud Functions 上で実行されます。これにより、サーバーレスなアーキテクチャを実現し、スケーラビリティと信頼性を向上させています。
Firestore: Firestore は、クロールされたWebページのデータ
、画像のaltテキストのデータ、検索結果のデータを保存するために使用されます。
Puppeteer: Puppeteer は、Webページをクロールし、スクリーンショットをキャプチャするために使用されます。
Brave Search API: Brave Search API は、Webページを検索するために使用されます
。
GeoIP Service: GeoIP Service は、Maxmind の GeoLite2-City.mmdb データベースを使用してIPアドレスから都市などの地理的な情報を取得します。
AltText Service: AltText Service は、画像のaltテキストを生成するために、Canvas を使用して
画像をリサイズし、Blip API を使用して画像のキャプションを生成します。
Caching: このコードは、クロールされたWebページのデータと検索結果のデータをキャッシュすることで、パフォーマンスを向上させています。
Rate Limiting: Rate Limiting は、過
剰なリクエストを防ぎ、システムの安定性を維持するために使用されます。
Authorization: このコードは、Jina Embeddings の認証サービスを使用しています。

具体的なコード例:

backend/functions/src/cloud-functions/crawler.ts:
- @singleton () デコレータにより、CrawlerHost クラスはシングルトンとして初期化されます。
- crawl() 関数は、@CloudHTTPv2() デコレータにより、HTTP リクエストハンドラーとして定義されます。
- formatSnapshot() 関数は、クロールされたWebページ
  のデータを、Markdown、HTML、テキスト、スクリーンショットなどの形式に変換します。
backend/functions/src/cloud-functions/searcher.ts:
- @singleton() デコレータにより、SearcherHost クラスはシングルトンとして初期化されます。
- search () 関数は、@CloudHTTPv2() デコレータにより、HTTP リクエストハンドラーとして定義されます。
- fetchSearchResults() 関数は、Brave Search API を使用して検索結果を取得し、クロールされたWebページのデータを取得して、検索結果を整形します。

このコードの設計は、以下のような特徴を持っています。

モジュール化: 各機能が独立したモジュールとして実装されているため、コードの可読性と保守性を高めています。
依存性の注入: Tsyringe を使用して、依存関係を注入することで
、テストのしやすさを向上させています。
キャッシュ: データをキャッシュすることで、パフォーマンスを向上させています。
レート制限: レート制限機能により、システムの安定性を維持しています。
認証: Jina Embeddings の認証サービスを使用することで、セキュリティを
強化しています。

このコードは、以下のようなユースケースに適しています。

Webページの情報を収集する必要があるアプリケーション
Webページを検索する必要があるアプリケーション
画像のaltテキストを生成する必要があるアプリケーション

このコードは、以下のような拡張性を備えています。

新しいクロールターゲット: 新しいWebページのクロールをサポートするために、新しいクロールルールを追加できます。
新しい検索エンジン: 新しい検索エンジンをサポートするために、新しい検索サービスを実装できます。
新しい形式: 新しい出力形式をサポートするために、新しい形式
変換機能を実装できます。

まとめ:

このコードは、Firebase Cloud Functions を使用して、Webページのクロールと検索機能を提供するバックエンドサービスを実装しています。このコードは、モジュール化、依存性の注入、キャッシュ、レート制限、認証などの機能を備えており
、さまざまなユースケースに適しています。

Analysis of Provided Code Snippets:

Understanding PPR in Next.js

追記： Sat May 18 18:51:13

Discussion