Forem: TZGyn

Chat with any git repo

TZGyn — Sat, 10 May 2025 13:29:17 +0000

In my recent post on how to convert any git repo into llm readable format, there is an use case for this and that is feed it into a llm to chat.

I have just added the chat feature, check out the github repo, or the website here

You can also directly deploy it on railway: one click deploy

This post will be explain the features of the chat and how to use it, the code is more interesting than this post to be honest, so make sure to check out the github link.

Here's the summary on how it works:

Clone the repo
parse all files (ignore some like .git folder)
ask gemini/mistral-ocr to parse special files like images and pdfs
convert them into llm readable format like markdown

Now we have the text version of the repo, we can feed it to large context llm like gemini and directly chat with it.

And you can change the repo:

There is one problem that needs to be solved, and that is speed, since the project stores the repo data, we need to somehow reuse that to improve the chat speed. I have made the repo setting to allow to input commit and branch, so if the settings match with the ones the app had stored, we can immediately reuse the processed data with doing unnecessary processing.

That's all from this post, make sure to check out the repo to learn more about this project. It is made with svelte with hono as api, all in one folder which is kinda cool.

Turn any git repo into llm readable format

TZGyn — Fri, 02 May 2025 07:32:26 +0000

Recently I came across a repo that allows you to talk to any github repo, its called Talk to Github. After looking at their codebase, I found an interesting repo that makes this site possible, and that is gitingest. In this post I will be going into details on how this repo works and how I made a simple JS implementation with image/pdf processing.

This repo turns any publicly available github repo and turns it into llm friendly format. Here is an example of turn gitingest repo into llm friendly format:

First, it clones it repo into a temporary directory, then by traversing through every folder and files, it will convert the file name and file content into llm readable format. It also filters out unnecessary folders and files like .git folder an package-lock.json. One downside is that it also filters documents like images and pdfs. The program also allows you to ingest the codebase at any commit, it will first clone the repo and checkout the commit before converting them into llm format.

Like any typical js dev, I decided to write my own implementation in js and add image/pdf processing with gemini and the latest mistral-ocr model.

Heres what I need to do:

Clone the input repo
checkout to the commit/branch if given
loop through every files, filters out the ignored patterns and process them
converts them into llm readable format like gitingest
deletes the cloned repo in disk

1. Clone the repo & 2. checkout commit/branch

Since this requires shell command, I decided to use bun for the entire project. Bun has a bun in shell command $ which is super convenient to run shell command and get its output (output is not used in this case). My approach is to clone the repo into a random generated folder name under a tmp folder.

This is how I clone the git repo, I decided to make it to accept any git provider as it shouldnt add much complexity

import { $ } from 'bun'
import { nanoid } from 'nanoid'

const commit = '' // ur commit id (if given)
const branch = '' // ur branch name (if given)

const id = nanoid()
const dir = `tmp/${id}`
const cloneArgs = []
if (!commit) {
    cloneArgs.push('--depth=1') // save disk space
}
if (branch && !['main', 'master'].includes(branch)) {
    cloneArgs.push('--branch', branch)
}
await $`git clone ${repo} ${cloneArgs.join(' ')} tmp/${id}`

if (commit) {
    await $`cd ${dir} && git checkout ${commit}`
}

3. loop through every files, filters out the ignored patterns and process them

The original implementation in gitingest repo using node system, and uses a recursive method to process the node (folder/file) and its children (if folder). When the node is a folder, it will call the process with each of its children as the argument, and when the node is a file, it will return its name and content. Things changed a bit when the file is an image or pdf, we have to use gemini to describe the image and mistral-ocr to accurately process the pdf. Here is the js implementation of it:

ignore-patterns.ts

import ignore = require('ignore')

// from gitingest (removed images (images are readable now) and some dotfiles (more context on the project))
export const patterns = [
    // Python
    '*.pyc',
    '*.pyo',
    '*.pyd',
    '__pycache__',
    '.pytest_cache',
    '.coverage',
    '.tox',
    '.nox',
    '.mypy_cache',
    '.ruff_cache',
    '.hypothesis',
    'poetry.lock',
    'Pipfile.lock',
    // JavaScript/FileSystemNode
    'node_modules',
    'bower_components',
    'package-lock.json',
    'yarn.lock',
    '.npm',
    '.yarn',
    '.pnpm-store',
    'bun.lock',
    'bun.lockb',
    // Java
    '*.class',
    '*.jar',
    '*.war',
    '*.ear',
    '*.nar',
    '.gradle/',
    'build/',
    '.settings/',
    '.classpath',
    'gradle-app.setting',
    '*.gradle',
    // IDEs and editors / Java
    '.project',
    // C/C++
    '*.o',
    '*.obj',
    '*.dll',
    '*.dylib',
    '*.exe',
    '*.lib',
    '*.out',
    '*.a',
    '*.pdb',
    // Swift/Xcode
    '.build/',
    '*.xcodeproj/',
    '*.xcworkspace/',
    '*.pbxuser',
    '*.mode1v3',
    '*.mode2v3',
    '*.perspectivev3',
    '*.xcuserstate',
    'xcuserdata/',
    '.swiftpm/',
    // Ruby
    '*.gem',
    '.bundle/',
    'vendor/bundle',
    'Gemfile.lock',
    '.ruby-version',
    '.ruby-gemset',
    '.rvmrc',
    // Rust
    'Cargo.lock',
    '**/*.rs.bk',
    // Java / Rust
    'target/',
    // Go
    'pkg/',
    // .NET/C//
    'obj/',
    '*.suo',
    '*.user',
    '*.userosscache',
    '*.sln.docstates',
    'packages/',
    '*.nupkg',
    // Go / .NET / C//
    'bin/',
    // Version control
    '.git',
    '.svn',
    '.hg',
    // Virtual environments
    'venv',
    '.venv',
    'env',
    'virtualenv',
    // Temporary and cache files
    '*.log',
    '*.bak',
    '*.swp',
    '*.tmp',
    '*.temp',
    '.cache',
    '.sass-cache',
    '.eslintcache',
    '.DS_Store',
    'Thumbs.db',
    'desktop.ini',
    // Build directories and artifacts
    'build',
    'dist',
    'target',
    'out',
    '*.egg-info',
    '*.egg',
    '*.whl',
    '*.so',
    // Documentation
    'site-packages',
    '.docusaurus',
    '.next',
    '.nuxt',
    // Other common patterns
    // Minified files
    '*.min.js',
    '*.min.css',
    // Source maps
    '*.map',
    // Terraform
    '.terraform',
    '*.tfstate*',
    // Dependencies in various languages
    'vendor/',
]

const ig = ignore().add(patterns)

export const isIgnored = (file: string) => {
    return ig.ignores(file)
}

import { createGoogleGenerativeAI } from '@ai-sdk/google'
import { Mistral } from '@mistralai/mistralai'
import { OCRResponse } from '@mistralai/mistralai/models/components'
import { generateText } from 'ai'
import * as path from 'path'
import { isIgnored } from './ignore-patterns'

const google = Bun.env.GEMINI_API_KEY
    ? createGoogleGenerativeAI({
            apiKey: Bun.env.GEMINI_API_KEY,
      })
    : null

const mistral = Bun.env.MISTRAL_API_KEY
    ? new Mistral({
            apiKey: Bun.env.MISTRAL_API_KEY,
      })
    : null

async function getAllFilesStats(rootPath: string, dirPath: string) {
    const files = await fs.readdir(dirPath)
    const arrayOfFiles: {
        path: string
        type: string
        content: string
        pdfParsed?: OCRResponse
        imageDescription?: string
    }[] = []

    for (const file of files) {
        const filePath = path.join(dirPath, file)
        const bunFile = Bun.file(filePath)
        const fileStat = await bunFile.stat()

        if (isIgnored(path.relative(rootPath, filePath))) {
            continue
        }

        if (fileStat.isDirectory()) {
            arrayOfFiles.push(
                ...(await getAllFilesStats(rootPath, filePath)),
            )
        } else {
            if (bunFile.type.startsWith('application/pdf') && mistral) {
                const base64 = (await bunFile.bytes()).toBase64()

                arrayOfFiles.push({
                    path: path.relative(rootPath, filePath),
                    type: bunFile.type,
                    content: await bunFile.text(),
                    pdfParsed: await mistral.ocr.process({
                        model: 'mistral-ocr-latest',
                        document: {
                            type: 'document_url',
                            documentUrl: 'data:application/pdf;base64,' + base64,
                        },
                        includeImageBase64: true,
                    }),
                })
            } else if (bunFile.type.startsWith('image/') && google) {
                const arrayBuffer = await bunFile.arrayBuffer()
                const { text } = await generateText({
                    model: google('gemini-2.0-flash'),
                    messages: [
                        {
                            role: 'user',
                            content: [
                                {
                                    type: 'text',
                                    text: `
                                        Description this image as detailed as possible
                                        Dont make any unneccessary comments like "Here's a detailed description of the image"
                                        The description is most likely going to be used to improve other llm's understanding of the image, so give as much details as possible
                                        Only generate the description of the image, no chatting
                                    `,
                                },
                                { type: 'image', image: arrayBuffer },
                            ],
                        },
                    ],
                })

                arrayOfFiles.push({
                    path: path.relative(rootPath, filePath),
                    type: bunFile.type,
                    content: await bunFile.text(),
                    imageDescription: text,
                })
            } else {
                arrayOfFiles.push({
                    path: path.relative(rootPath, filePath),
                    type: bunFile.type,
                    content: await bunFile.text(),
                })
            }
        }
    }

    return arrayOfFiles
}

4. converts them into llm readable format like gitingest

Since our data structure contains image description and parsed pdf information, we have to take that into account when convert each file information into llm format

import { OCRResponse } from '@mistralai/mistralai/models/components'

const formatFiles = (
    files: {
        path: string
        type: string
        content: string
        pdfParsed?: OCRResponse
        imageDescription?: string
    }[],
) => {
    const text = files
        .map((file) => {
            let output = '='.repeat(48)
            output += '\n'
            output += 'FILE: ' + file.path.split('/').pop()
            output += '\n'
            output += '='.repeat(48)
            output += '\n'
            output +=
                file.type.split(';')[0] === 'application/pdf'
                    ? JSON.stringify(file.pdfParsed)
                    : file.type.split(';')[0].startsWith('image/')
                    ? file.imageDescription
                    : file.content
            return output
        })
        .join('\n\n')
    return text
}

5. deletes the cloned repo in disk

import * as fs from 'node:fs/promises'

await fs.rm(dir, { recursive: true, force: true })

There are some improves that can be made to this, the obvious one is to also process the generated pdf data from mistral. We can also improves the performance by storing the result into a db and returns it to the user on repeated requests. I have the db implementation already in the github repo below.

JS Implementation: github

You can also directly deploy it on railway: one click deploy

Thank you for reading, checkout my github profile https://github.com/TZGyn for my other open source projects. I love writing my own implementation of other projects to improve my knowledge and skill.

Update

Here is the code to convert the pdf response from mistral into markdown

const formatPDFResponse = (parsedPDF?: OCRResponse) => {
    if (!parsedPDF) return ''

    return parsedPDF.pages
        .map((page) => {
            return page.markdown + '\n'
        })
        .join('\n')
}

How to turn any website into png

TZGyn — Fri, 10 Jan 2025 19:18:11 +0000

In this tutorial we will be using puppeteer to screenshot/screen record any website. For a full api version made with bun and nitro go here.

Prerequisite:

chromium installed on your computer
bun (for top level await, you can also copy the code to a express server for the same result)

Screenshot any website

Puppeteer made it really easy to screenshot any webpage, they provided a screenshot api with option to switch between visible or full page screenshot. All you need to do is spawn a new chrome browser, go to the website, and use the screenshot api to take a screenshot, the function will return the image data.

Here is the following code to screenshot the landing page of shadcn ui.

import puppeteer from 'puppeteer'

const url = 'https://ui.shadcn.com'

const browser = await puppeteer.launch()

const page = await browser.newPage()

await page.goto(url, {
    waitUntil: 'networkidle2',
})

const data = await page.screenshot({ fullPage: true })

await browser.close()

Result

Screen Record with smooth scrolling

Puppeteer has builtin screen recorder, check out https://pptr.dev/api/puppeteer.page.screencast, but you will be limited to webm format and 30 fps. So we are going to use puppeteer-screen-record package for simpler setup.

To implement smooth scrolling, we will be simulating a touch scroll instead of a mouse scroll.

The following code will record a full page scroll on shadcn ui and write it to video.mp4.

import puppeteer from 'puppeteer'
import { PuppeteerScreenRecorder } from 'puppeteer-screen-recorder'

const browser = await puppeteer.launch()

const page = await browser.newPage()

await page.goto(url, {
    waitUntil: 'networkidle2',
})

const recorderOptions = {
    fps: 60,
}

const recorder = new PuppeteerScreenRecorder(page, recorderOptions)

await recorder.start('video.mp4')

const height = await page.evaluate(() => {
    return document.body.scrollHeight
})

// simulating touch scroll
const session = await page.createCDPSession()

await session.send('Input.synthesizeScrollGesture', {
    x: 0,
    y: 0,
    yDistance: -height,
    speed: 400,
})

await recorder.stop()

await browser.close()

Adding Dark Mode

import puppeteer from 'puppeteer'

const url = 'https://ui.shadcn.com'

const browser = await puppeteer.launch()

const page = await browser.newPage()

// dark mode
await page.emulateMediaFeatures([
    {
        name: 'prefers-color-scheme',
        value: 'dark',
    },
])

await page.goto(url, {
    waitUntil: 'networkidle2',
})

const data = await page.screenshot({ fullPage: true })

await browser.close()

Result

That's all, checkout my github for my other projects, I love to implement stuff from scratch and share my knowledge through open sourcing my work.

How to get device information from user requests

TZGyn — Sun, 15 Sep 2024 18:16:29 +0000

Getting each request's device information is good for analytics, it can help with understanding your business target audience. However, fingerprinting too much information may lead to violating some privacy laws.

This post will be discussing the use of User-Agent header in every network request.

Every browser and most IOT devices, even cli apps include a User-Agent header in every request. This header contains information about the device such as model, OS, browser and sometimes processor information as well.

Example user agent from iPhone 11 Pro:



Mozilla/5.0 (iPhone; CPU iPhone OS 14_6 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.3 Mobile/15E148 Safari/604.1

You may notice that the user agent does not include details such as which the exact model version. This is because the header is used to let the server serves different content based on the requesting device, for example, some websites serve mobile and desktop version of their site. So the exact model version is not required to perform this action.

In my last post how to make a url shortener. One feature that can be built on top of a service like this is analytics, this can be done by reading the User-Agent header in the request and parse the information.

The following tutorial will be using hono (nodejs) to get the request header, it can be done with any language, you just need be able to access the request headers.

Create a new hono app following their guide and add a new request route.



app.get("/header", (c) => {
    const userAgent = c.req.header("User-Agent");
    return c.text(userAgent || "");
});

Now you are able to get the user agent, how do you get the device information with code? This is where parser comes in. Usually the user agent follows a particular format, for example:



User-Agent: <product> / <product-version> <comment>

However, this can be easily changed from the client side, so by using a public parser we can avoid the hassle to make one ourselves. I don't recommend making one as it is a very tedious task and a waste of time that can be used to learn other stuff.

More user agent examples from firefox.

This is a example user agent regex file from a popular repository ua-parser.

The best parser I found in overall is ua-parser-js which is javascript only. The one I used for my url shortener service, which is using golang, is a combination of 2 parsers to match the result retrieved by ua-parser-js.

Start by installing the parser.



npm install ua-parser-js
npm install -D @types/ua-parser-js # for typescript

Then add the parser to the header route.



import { UAParser } from "ua-parser-js";

app.get("/header", (c) => {
    const userAgent = c.req.header("User-Agent");

    const parser = new UAParser(userAgent);
    return c.json(parser.getResult());
});

Then you should be able to get your device information.

That's all, now you are able to get the device information of your users, it can be used to serve different content based on device type, disable request logging if the request is made by a bot (very useful in my opinion), log the device to provide analytics and more.

Feel free to share ideas for me to explore, I am interested in learning web stuff and I do open source work in my free time.

How to make a URL Shortener from scratch

TZGyn — Sun, 15 Sep 2024 08:46:51 +0000

Making applications from scratch is my favorite way to learn how they work. This post will be discussing on how to make a URL Shortener from scratch.

URL shortener is extremely easy to make, great way to learn a language as a beginner in my opinion. The harder part is adding custom domains, analytics (such as getting user device information), grouping links and other features added on top of the URL shortener service. So here is how you can make one from scratch.

In this tutorial we will be using hono (nodejs), drizzle orm and postgres, but it can be done with any language and framework, check out my sveltekit/golang implementation kon.sh, source code in github.

Start by creating a new hono project



npm create hono@latest

Then fill in the following information



create-hono@0.13.1
Ok to proceed? (y)
create-hono version 0.13.1
? Target directory url-shortener
? Which template do you want to use? nodejs
? Do you want to install project dependencies? yes
? Which package manager do you want to use? npm

Make sure you have your postgres database ready and create a new database called url-shortener.

Under src/ folder there should be a index.ts file, this file contains the code to run your api server. Here we need to add 2 api routes.

create shortener
catch-all route to redirect incoming requests

src/index.ts



import { serve } from "@hono/node-server";
import { Hono } from "hono";

const app = new Hono();

app.post("/api/shortener", async (c) => {
    // create shortener route
    return c.text("Not yet implemented");
});

app.get("/:code", async (c) => {
    // redirect
    return c.text("Not yet implemented");
});

const port = 3000;
console.log(`Server is running on port ${port}`);

serve({
    fetch: app.fetch,
    port,
});

Now we can install drizzle orm and initialize our database. First, install the required packages



npm i drizzle-orm postgres
npm i -D drizzle-kit

Then we need to create a new db folder under the src folder, and add index.ts for initializing the db client, and schema.ts for the database schema.

src/db/schema.ts



import { pgTable, text, varchar } from "drizzle-orm/pg-core";

export const shortener = pgTable("shortener", {
    id: text("id").primaryKey(),
    link: varchar("link", { length: 255 }).notNull(),
    code: varchar("code", { length: 255 }).notNull().unique(),
});

src/db/index.ts



import { drizzle } from "drizzle-orm/postgres-js";
import postgres from "postgres";
import * as schema from "./schema";

const queryClient = postgres(
    "postgres://postgres:password@127.0.0.1:5432/url-shortener"
);
export const db = drizzle(queryClient, { schema });

Then create a drizzle.config.ts file at the root folder.

drizzle.config.ts



// drizzle.config.ts
import { defineConfig } from "drizzle-kit";

export default defineConfig({
    schema: "./src/db/schema.ts",
    out: "./drizzle",
    dialect: "postgresql",
    dbCredentials: {
        url: "postgres://postgres:password@127.0.0.1:5432/url-shortener",
    },
});

Run npx drizzle-kit push to push the schema to the database.



npx drizzle-kit push

After all the setup, we can finally work on the api, run npm run dev to start the server



npm run dev

First make a random string generator. Create a new folder under src named utils, then create a index.ts file.

src/utils/index.ts



export function generateId(length: number) {
    let result = "";
    const characters =
        "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
    const charactersLength = characters.length;
    for (let i = 0; i < length; i++) {
        result += characters.charAt(
            Math.floor(Math.random() * charactersLength)
        );
    }
    return result;
}

Then update the create shortener route.



+ import { generateId } from "./utils";
+ import { shortener } from "./db/schema";
+ import { db } from "./db";

app.post("/api/shortener", async (c) => {
-       // create shortener route
+
+       const body = await c.req.json();
+
+       const link = body.link;
+
+       const code = generateId(6);
+
+       await db.insert(shortener).values({
+           id: generateId(8),
+           link,
+           code,
+       });
-       return c.text("Not yet implemented");
+       return c.json({ code });
});

Then you can make a post request to the endpoint containing the link to generate a new shortener. Here's an example using Thunder Client in my VSCode:

Finally, update the redirect api.



+ import { eq } from "drizzle-orm";

app.get("/:code", async (c) => {
-       // redirect
+
+       const code = c.req.param("code");
+
+       const link = await db
+           .select()
+           .from(shortener)
+           .where(eq(shortener.code, code));
+
+       if (link.length === 0) {
+           return c.text("Invalid code");
+       }
-       return c.text("Not yet implemented");
+       return c.redirect(link[0].link);
});

Then navigate to http://localhost:3000/{code} on your browser and you will be redirected to the original link.

That's it. URL shortener is a great way to start learning a new language, you get to use the language's popular backend framework and learn to communicate with database with the language.

There are so much more to explore, such as generating QR code for your shortener, recording redirects for analytics, custom domains and more. These are not covered in this tutorial.

Check out my github to see my works, all my projects are open source and free for anyone to learn and contribute.

I am also open for new ideas, although my current skill may not match the difficulty. Feel free to share them in the comments.