Zenn
😎

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

2024/04/19に公開
JavaScript
#
LLM
Gemini
tech

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

https://blog.google/technology/ai/google-gemini-next-generation-model-february-2024/

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.

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

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

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

https://github.com/laiso/github-issue-bot-google-gemini-api/actions/runs/8724784938/workflow

入力できる規模はソースコード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.

Discussion