Show your love for open source with a custom billboard image based on live data from your GitHub contribution graph.
- enter your github username to use your own contribution graph
- use any of the preset styles or a custom prompt
- no limits in place currently...
- please consider sponsoring me on github to help cover the API costs 🙏
First we take a screenshot of your GitHub contribution graph using headless chrome via Kernel.
Then, we use nano banana to create a billboard image with a green screen background and your contribution graph on top.
Breaking this into its own step helps the image model match your contribution graph more closely, though it likely still won't be 100% accurate.
Lastly, we use nano banana again to create the final composite image with a specific style.
One-shot example
Note: I tried several different approaches for getting the billboard content to match the source contribution graph as closely as possible. For example, here's what happens when you try to have nano banana one-shot the output:
Notice how the billboard has a similar texture, but the contents differ greatly from the source contribution graph. I attribute this to the model having to "do too much" in one pass, which is why I ended up going with a solution which broke the task into 2 passes.
- TypeScript, React, Next.js - webapp
- Convex - backend and database
- Vercel - web hosting and analytics
- Kernel - hosted headless browser
- OpenRouter - used to call the gemini nano banana api
MIT © Travis Fischer
I'm providing this project for free, but if you've found it useful, please consider sponsoring me on GitHub to help cover the API costs.