GitGen

Inspiration

Wnen gemini 1.5 pro was announced with its massive 1M token context window, it sparked a grand idea in my mind. With such a large context window, couldn't I just upload my entire codebase and have the model write for me code with my codebase as context. I hadn't considered doing this before because of context limitations facing other LLM solutions. Github being my main code store was the obvious choice, it also already had github issues which served as perfect goal to give the LLM to follow. I was also facing an issue that many of us know too well. Oftentimes, developers may come across repositories written in languages they don't understand, such as Russian or Chinese. This language barrier can hinder collaboration and comprehension, as important elements like code comments, README files, and file names may be difficult for non-native speakers to interpret. GitGen aims to break down language barriers and enable developers from diverse linguistic backgrounds to collaborate effectively on any projects hosted on GitHub/GitLab.

Problem

The first problem GitGen solves is solving github issues by harnessing the power of gemini to generate code solutions.

The second problem that GitGen solves is the language barrier encountered by developers when collaborating and working on projects hosted on GitHub/GitLab, particularly when encountering repositories with comments, README files, and file names in languages they don't understand. By leveraging translation capabilities, GitGen enables users to easily translate these elements into a language of their choice, thereby facilitating collaboration and comprehension across languages.

What it does

First Use: This app connects to GitHub to help users explore a GitHub repository's issues and codebase. Users paste a GitHub URL that is used to pull issues and code related to that repo. Users can view a list of issues from the GitHub repository and select an issue to view its details, such as its title, comments count, author profile_pic. After selecting an issue, users can choose specific files from the repository tree View that might be relevant to solving the issue. They can explore the repository's file tree, select files, and view their content to ensure they have the right context. Once an issue is selected and context files are chosen, users can generate a solution for the issue using gemini. The app sends the issue details and the selected files' content to Gemini to generate a solution. The generated solution is then displayed to the user, helping them understand and resolve the issue. The use can can download or copy the solution code contents.

Second Use: The app streamlines the process of translating code comments (localization) and file names by allowing users to input a GitHub/GitLab repository URL, pulling the repository, and providing an interface to navigate through files. When a file is selected, GitGen utilizes Google Gemini to translate the comments and file names from the original language to the user's selected language.

How I built it

Framework: I used Next.js to build my app. It's a tool that helps in creating web applications with ease. Styling: For making my app look good, I used Tailwind CSS. It's a handy tool that simplifies the process of styling web pages Integration with GitHub/GitLab: GitHub/GitLab API provides access to GitHub/GitLab repositories and allows developers to perform various actions programmatically. I utilized the GitHub/GitLab API to fetch a repo from a given URL and then raw code from selected files, enabling seamless integration with GitHub/GitLab. Code Editor: To make it easier for users to view and edit code within my app, I used CodeMirror. It's a JavaScript-based text editor that provides features like syntax highlighting and editing capabilities, enhancing the user experience. Translation: I used Google Gemini to help translate code comments from one language to another. This feature makes it easier for developers who speak different languages to collaborate and understand each other's code comments.

Challenges I ran into

Limited translation capabilities for lower resource language:One challlenge I faced was Gemini failing to translate some lower resource languages.

Recursive Code Fetching: One challenge I faced was fetching code contents recursively based on the file path using the GitHub/GitLab API. To overcome this, I had to design a method that navigates through the directory structure of the repository and fetches the code files accordingly.

Creating Treeview: Another hurdle was creating a treeview to display the fetched code files. I had to devise a way to organize the files hierarchically and present them in a user-friendly manner. This involved implementing a tree data structure and rendering it in the frontend using the mui library

Accomplishments that Iam proud of

Recursively Fetching Code Files: I successfully implemented a method to recursively fetch code files based on their paths. This required understanding the directory structure of repositories and devising a solution to navigate through them efficiently.

Utilizing GitHub API: I learned and effectively used the GitHubAPI for fetching repositories, issues and retrieving raw code contents. This involved understanding API endpoints, authentication mechanisms, and data retrieval methods.

What I learned

Recursively Fetching Code Files: I gained valuable experience in recursively fetching code files based on their paths. This taught me how to navigate through directory structures efficiently.

GitHub Integration: Through this project, I learned how to work with the GitHub API for tasks such as authentication, fetching repositories, and retrieving raw code contents. This expanded my understanding of integrating external APIs into our applications and leveraging their functionalities.

Integrating Gemini: By integrating with Gemini API, I learned how to generate streams from text input for faster interactions, Count tokens using the designated token counter and how to create complex prompts to solve novel use cases like mine of solving a github issue or translating code comments in files. This has opened my mind to what Gemini is, a reasoning engine that can be used to generate content like text, code etc

Managing Application State: The project reinforced the importance of managing application state in a React-based application. I learned to track multiple state variables, such as the current repository, selected issues, selected files, token counts, and loading indicators, ensuring a smooth user experience.

What's next for GitGen

Customization Options: Providing users with customization options to tailor their translation experience according to their preferences. This could include customizable themes, syntax

Ability to Directly make a PR using the code solution providedProviding users with Ability to Directly make a PR using the code solution provided.

Built With

• google-gemini
• javascript
• nextjs
• typescript