Meowfolio: I Built an AI Scrapbook for the Cats You Meet Outside 🐱🌿
This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass
What I Built
There's a difference between seeing a cat and knowing a cat.
The first time, it's just an orange cat sitting outside a shop. The next time, you recognize its face. Eventually, you start looking for it whenever you walk down that street.
And then, somehow, this random neighborhood cat becomes part of your day.
I liked that idea.
For this week's Touch Grass challenge, I wanted to build something around the little things we notice when we actually go outside. Not another productivity dashboard, fitness tracker, or AI chatbot.
Something a little more personal.
So I built Meowfolio.
Meowfolio is a private, browser-based scrapbook for the cats you meet outside, powered by open-weight computer vision running locally in your browser.
!Meowfolio — Little cats, big memories
The idea is simple: every neighborhood cat deserves a little page in your memories.
You take a photograph, let AI find the cat, give it a name, and save that encounter. The next time you meet that cat, you can add another sighting to its profile.
Over time, these ordinary encounters become a personal scrapbook of the animals you've met.
Here's what that looks like:
1. Go outside and meet a cat. Photograph it using your phone's camera or select an existing picture.
2. Let AI find the cat. An open-weight object-detection model locates cats in the photograph. If there are several, you choose which one to document.
3. Give your new friend a name. Create a new profile or manually associate the sighting with a cat you've already saved.
4. Keep the memory. Save the original photograph, date, an optional note, and an optional location.
5. Come back someday. Open the cat's profile and revisit every encounter.
Each cat gets its own scrapbook page, complete with a chronological history and photographs.
!Meowfolio's pink retro scrapbook displays cat photo cards labeled computer kitty, kitty, and Noir, with encounter counts and last-seen dates. The collection contains five saved cats.
_My Meowfolio collection. Every cat gets its own little corner of the internet, stored privately in my browser._
I also built a Story Studio that turns saved photographs into 1080×1920 story cards. There are three visual themes, adjustable photo framing, and local PNG export.
And because running AI models on a phone isn't always convenient, there's a Save Photo for Later feature. You can capture the moment now and process the photograph when you have time.
I wanted the interface to feel like something you might have discovered on the internet in 2003.
So Meowfolio has pink pixel windows, chunky borders, old-school buttons, Polaroid-inspired photographs, and a little pixel-cat mascot.
That aesthetic wasn't just decoration.
A scrapbook should feel like a place where you keep things that matter to you, even if they seem insignificant to everyone else.
The cat is the reason to go outside. The app is just where the memory lives.
Demo
🐱 Try Meowfolio live
Meowfolio runs directly in your browser. There's no account to create, no application to install, and no API key to configure.
To try it yourself:
1. Open Meowfolio on your phone or desktop.
2. Choose Camera or Add Photo and select a picture containing a cat.
3. Tap Find the Cat. On first use, the app asks permission before downloading the AI models.
4. Let the local detector find the cat. If multiple cats are detected, choose the one you want.
5. Name your cat and save its first encounter.
6. Open the scrapbook and revisit the cat's profile.
!Two encounters, one familiar face. Meowfolio keeps each sighting as part of the cat's growing history.
Reload the website, and your saved memories should still be there in the same browser.
You can also save an unprocessed photograph to your local inbox, add another encounter to a saved cat, export a story card, or download a private backup of your collection.
I tested the end-to-end application on my Android phone, and the test passed successfully. That was an especially satisfying milestone because Meowfolio is meant to be used while you're out exploring, not just demonstrated on a desktop.
One limitation worth mentioning: the first model download requires internet access. Afterward, the browser can reuse cached model assets, although browser caches are not guaranteed to persist forever.
Code
Meowfolio is open source, and the complete implementation is available on GitHub.
{% github ThunderKhan/meowfolio %}
Repository: ThunderKhan/meowfolio
Live application: mymeowfolio.vercel.app
Release: v0.1.0 — Touch Grass Edition
License: Mozilla Public License 2.0 (MPL-2.0)
The repository includes the application source, local AI pipeline, browser storage layer, model evaluation results, automated tests, and technical documentation.
You can clone it, inspect the implementation, run it locally, or build on it under the project's open-source license.
How I Built It
Meowfolio has two main parts: the AI pipeline that understands a photograph and the scrapbook that remembers the encounter.
The interesting part is that both run in the user's browser.
1. Real computer vision without an inference server
I used two open-weight models:
YOLOS-tiny handles object detection. It examines the image and identifies where the cats are.
DINOv2-small generates visual embeddings from the selected cat crop. Meowfolio stores normalized 384-dimensional representations alongside encounters for research and future matching experiments.
Both models run through Transformers.js, using WebAssembly inside a dedicated Web Worker.
The pipeline looks like this:
!Pastel pixel-art flowchart inside a pink, retro computer window, surrounded by playful, sleeping, and reading cats. A photo enters YOLOS-tiny for cat detection, then DINOv2-small creates a visual embedding. A human chooses whether the sighting belongs to a new or saved cat, and the result is stored in IndexedDB before appearing in the scrapbook.
_The Meowfolio pipeline: open-weight AI handles detection and visual embeddings, while the human makes the final identity decision._
The Web Worker keeps expensive inference operations away from the main UI thread, so the application can still display progress and respond to the user.
I pinned the model revisions and added browser-side caching to avoid unnecessary downloads.
2. My first model choice didn't work
I initially explored YOLOv10n for cat detection.
On paper, it looked suitable.
In practice, the Transformers.js version I was using didn't support that model architecture through the browser pipeline I needed.
So I changed direction.
I tested YOLOS-tiny with real Chromium/WebAssembly execution and used it as the detector.
It was a useful reminder that a model being impressive isn't enough.
It also has to work in the environment where people will actually use it.
For Meowfolio, that meant a browser on an ordinary device, not a GPU server.
3. The feature I deliberately didn't ship
This was probably the most interesting part of building Meowfolio.
My original vision included automatic recognition of cats you'd encountered before.
Imagine taking a photograph and having the scrapbook suggest:
“Hey, this might be the orange cat you met last Tuesday!”
To explore that, I built a matching evaluation using DINOv2 embeddings and a dataset of 50 photographs of individual cats.
I separated development data from a held-out evaluation and compared different matching strategies.
The selected centroid-based approach produced correct familiar-cat suggestions for 14 of 20 held-out repeat cases, counting four processing failures in that total.
But there was a problem.
In one test, I deliberately removed the photographed cat's real identity from the saved gallery.
The model still suggested a different cat.
It was a false positive.
For a casual demo, it might have been tempting to ignore that mistake.
But think about what it means for a scrapbook.
If the application confidently merges two different cats into the same history, every later memory becomes a little less trustworthy.
So I made a decision:
I disabled automatic familiar-cat suggestions in the public release.
The application still uses real local AI for detection and embedding extraction. Users can also manually associate new sightings with cats they've saved previously.
But Meowfolio doesn't pretend to know something the model hasn't demonstrated reliably.
I preserved the evaluation methodology, threshold, results, and failure case in the public evaluation report.
I think this is one of the most valuable aspects of working with open models.
You can inspect the behavior, challenge your assumptions, and decide not to ship a capability when the evidence doesn't support it.
4. Keeping everything in the browser
The frontend uses React, TypeScript, Vite, and Tailwind CSS.
Instead of building a conventional backend, I used IndexedDB for the scrapbook.
It stores the cat profiles, original photographs, encounter history, embeddings, notes, and optional location information.
The save operations use database transactions to avoid partially saved encounters.
There's no account system and no cloud-hosted database of people's cat photographs.
Model files are downloaded from approved external hosts after user consent, but the actual photograph processing happens locally.
I also built JSON backup and restore because browser storage can be cleared or evicted, and Meowfolio doesn't offer automatic cloud synchronization.
The architecture is intentionally straightforward:
Static website + local AI + local storage.
5. Making it usable beyond a demo
A working model pipeline is only one part of a usable application.
I had to deal with model initialization, download consent, slow mobile inference, interrupted scans, IndexedDB upgrades, preserving unsaved photographs, and keeping the interface responsive on smaller screens.
One Android test uncovered a blocked IndexedDB upgrade that prevented a photograph from being saved.
That led me to improve how database connections respond to version changes and how blocked storage initialization recovers.
I also added lazy-loaded application sections, paginated cat galleries, deferred image decoding, and improved asset caching.
For testing, I used Vitest, Playwright, real Chromium/WASM model runs, and Lighthouse.
In CI Lighthouse measurements, mobile performance improved from 78 to 100 after the performance pass. Those are synthetic lab scores, not measurements of real-world Android inference speed.
And finally, I verified the application on my Android phone.
It was satisfying to see the whole experience work on the kind of device it was actually designed for.
Why Does Open Innovation Matter?
I could have built Meowfolio using a hosted computer-vision API.
The architecture would have been fairly straightforward: upload a photograph, wait for a server to analyze it, and receive a result.
But that wasn't what I wanted.
I didn't think a photograph of a neighborhood cat needed to travel to somebody else's inference server just so I could add it to my scrapbook.
Using open-weight models made a different approach possible.
The data stays closer to the person who created it
The AI models come to the browser instead of the photograph being sent to a remote inference API.
Cat photos, names, embeddings, notes, and optional coordinates remain in local browser storage.
This doesn't eliminate every privacy consideration, and it doesn't make browser storage permanent.
But it gives the application a much smaller data-sharing footprint than a conventional hosted inference service.
I can inspect and change the behavior
Open models gave me the freedom to experiment with different implementations, examine their limitations, pin model revisions, and evaluate matching strategies.
That mattered when the familiar-cat recognition experiment failed.
I wasn't forced to accept an opaque confidence score as proof that two photographs showed the same animal.
I could measure the failure, document it, and choose a more trustworthy interaction.
There is no per-photo inference bill
The application doesn't need a paid model API every time someone photographs a cat.
Once the assets are available, inference runs on the user's device using their own computing resources.
That makes the core experience easier to keep publicly accessible as a small open-source project.
Other people can build on it
The source code is available under MPL-2.0, with attribution for the model creators, conversions, and major runtime dependencies.
Someone could improve the interface, evaluate a better detector, build a more rigorous open-set recognition experiment, or adapt the same approach to birds, plants, or other things people notice outdoors.
The project doesn't have to end with my version of it.
Open innovation made it possible to build something private, inspectable, and inexpensive to run. It also made it possible to admit where the AI wasn't good enough yet.
And for me, that's just as important.
A small reason to go outside
There's something funny about building an AI project for a challenge called Touch Grass.
Usually, the goal of a software project is to make people spend more time using it.
Here, I wanted almost the opposite.
Meowfolio doesn't count your steps. It doesn't maintain a daily streak. It doesn't send notifications telling you to go find another cat.
It doesn't need to.
Maybe there's a cat you always see near your house.
Maybe there's one that appears every morning near your college.
Maybe you've walked past the same animal dozens of times without ever thinking about it.
Now you have a small excuse to notice.
You can give that cat a name, remember when you met it, and slowly build a collection of tiny encounters.
And when you're finished, you can put your phone away and keep walking.
Little cats. Big memories.
🐱 Try Meowfolio
💻 Explore the source code
🌿 Built for Hacktoberfest 2026 — Week 1: Touch Grass.
10 reactions · 3 comments
Mentions
Meowfolio: I Built an AI Scrapbook for the Cats You Meet Outside 🐱🌿 This is a submission for the Hacktoberfest Open-Source AI Challenge Week 1: Touch Grass What I Built There's a difference between seeing a cat and knowing a cat. The first time, it's just an orange cat sitting outside a shop. The next time, you recognize its face. Eventually, you start looking for it whenever you walk down that street. And then, somehow, this random neighborhood cat becomes part of your day. I liked that idea. For this week's Touch Grass challenge, I wanted to build something around the little things we notice when we actually go outside. Not another productivity dashboard, fitness tracker, or AI chatbot. Something a little more personal. So I built Meowfolio. Meowfolio is a private, browser-based scrapbook for the cats you meet outside, powered by open-weight computer vision running locally in your browser. !Meowfolio — Little cats, big memories The idea is simple: every neighborhood cat deserves a little page in your memories. You take a photograph, let AI find the cat, give it a name, and save that encounter. The next time you meet that cat, you can add another sighting to its profile. Over time, these ordinary encounters become a personal scrapbook of the animals you've met. Here's what that looks like: 1. Go outside and meet a cat. Photograph it using your phone's camera or select an existing picture. 2. Let AI find the cat. An open-weight object-detection model locates cats in the photograph. If there are several, you choose which one to document. 3. Give your new friend a name. Create a new profile or manually associate the sighting with a cat you've already saved. 4. Keep the memory. Save the original photograph, date, an optional note, and an optional location. 5. Come back someday. Open the cat's profile and revisit every encounter. Each cat gets its own scrapbook page, complete with a chronological history and photographs. !Meowfolio's pink retro scrapbook displays cat photo cards labeled computer kitty, kitty, and Noir, with encounter counts and last-seen dates. The collection contains five saved cats. _My Meowfolio collection. Every cat gets its own little corner of the internet, stored privately in my browser._ I also built a Story Studio that turns saved photographs into 1080×1920 story cards. There are three visual themes, adjustable photo framing, and local PNG export. And because running AI models on a phone isn't always convenient, there's a Save Photo for Later feature. You can capture the moment now and process the photograph when you have time. I wanted the interface to feel like something you might have discovered on the internet in 2003. So Meowfolio has pink pixel windows, chunky borders, old-school buttons, Polaroid-inspired photographs, and a little pixel-cat mascot. That aesthetic wasn't just decoration. A scrapbook should feel like a place where you keep things that matter to you, even if they seem insignificant to everyone else. The cat is the reason to go outside. The app is just where the memory lives. Demo 🐱 Try Meowfolio live Meowfolio runs directly in your browser. There's no account to create, no application to install, and no API key to configure. To try it yourself: 1. Open Meowfolio on your phone or desktop. 2. Choose Camera or Add Photo and select a picture containing a cat. 3. Tap Find the Cat. On first use, the app asks permission before downloading the AI models. 4. Let the local detector find the cat. If multiple cats are detected, choose the one you want. 5. Name your cat and save its first encounter. 6. Open the scrapbook and revisit the cat's profile. !Two encounters, one familiar face. Meowfolio keeps each sighting as part of the cat's growing history. Reload the website, and your saved memories should still be there in the same browser. You can also save an unprocessed photograph to your local inbox, add another encounter to a saved cat, export a story card, or download a private backup of your collection. I tested the end-to-end application on my Android phone, and the test passed successfully. That was an especially satisfying milestone because Meowfolio is meant to be used while you're out exploring, not just demonstrated on a desktop. One limitation worth mentioning: the first model download requires internet access. Afterward, the browser can reuse cached model assets, although browser caches are not guaranteed to persist forever. Code Meowfolio is open source, and the complete implementation is available on GitHub. {% github ThunderKhan/meowfolio %} Repository: ThunderKhan/meowfolio Live application: mymeowfolio.vercel.app Release: v0.1.0 — Touch Grass Edition License: Mozilla Public License 2.0 (MPL-2.0) The repository includes the application source, local AI pipeline, browser storage layer, model evaluation results, automated tests, and technical documentation. You can clone it, inspect the implementation, run it locally, or build on it under the project's open-source license. How I Built It Meowfolio has two main parts: the AI pipeline that understands a photograph and the scrapbook that remembers the encounter. The interesting part is that both run in the user's browser. 1. Real computer vision without an inference server I used two open-weight models: YOLOS-tiny handles object detection. It examines the image and identifies where the cats are. DINOv2-small generates visual embeddings from the selected cat crop. Meowfolio stores normalized 384-dimensional representations alongside encounters for research and future matching experiments. Both models run through Transformers.js, using WebAssembly inside a dedicated Web Worker. The pipeline looks like this: !Pastel pixel-art flowchart inside a pink, retro computer window, surrounded by playful, sleeping, and reading cats. A photo enters YOLOS-tiny for cat detection, then DINOv2-small creates a visual embedding. A human chooses whether the sighting belongs to a new or saved cat, and the result is stored in IndexedDB before appearing in the scrapbook. _The Meowfolio pipeline: open-weight AI handles detection and visual embeddings, while the human makes the final identity decision._ The Web Worker keeps expensive inference operations away from the main UI thread, so the application can still display progress and respond to the user. I pinned the model revisions and added browser-side caching to avoid unnecessary downloads. 2. My first model choice didn't work I initially explored YOLOv10n for cat detection. On paper, it looked suitable. In practice, the Transformers.js version I was using didn't support that model architecture through the browser pipeline I needed. So I changed direction. I tested YOLOS-tiny with real Chromium/WebAssembly execution and used it as the detector. It was a useful reminder that a model being impressive isn't enough. It also has to work in the environment where people will actually use it. For Meowfolio, that meant a browser on an ordinary device, not a GPU server. 3. The feature I deliberately didn't ship This was probably the most interesting part of building Meowfolio. My original vision included automatic recognition of cats you'd encountered before. Imagine taking a photograph and having the scrapbook suggest: “Hey, this might be the orange cat you met last Tuesday!” To explore that, I built a matching evaluation using DINOv2 embeddings and a dataset of 50 photographs of individual cats. I separated development data from a held-out evaluation and compared different matching strategies. The selected centroid-based approach produced correct familiar-cat suggestions for 14 of 20 held-out repeat cases, counting four processing failures in that total. But there was a problem. In one test, I deliberately removed the photographed cat's real identity from the saved gallery. The model still suggested a different cat. It was a false positive. For a casual demo, it might have been tempting to ignore that mistake. But think about what it means for a scrapbook. If the application confidently merges two different cats into the same history, every later memory becomes a little less trustworthy. So I made a decision: I disabled automatic familiar-cat suggestions in the public release. The application still uses real local AI for detection and embedding extraction. Users can also manually associate new sightings with cats they've saved previously. But Meowfolio doesn't pretend to know something the model hasn't demonstrated reliably. I preserved the evaluation methodology, threshold, results, and failure case in the public evaluation report. I think this is one of the most valuable aspects of working with open models. You can inspect the behavior, challenge your assumptions, and decide not to ship a capability when the evidence doesn't support it. 4. Keeping everything in the browser The frontend uses React, TypeScript, Vite, and Tailwind CSS. Instead of building a conventional backend, I used IndexedDB for the scrapbook. It stores the cat profiles, original photographs, encounter history, embeddings, notes, and optional location information. The save operations use database transactions to avoid partially saved encounters. There's no account system and no cloud-hosted database of people's cat photographs. Model files are downloaded from approved external hosts after user consent, but the actual photograph processing happens locally. I also built JSON backup and restore because browser storage can be cleared or evicted, and Meowfolio doesn't offer automatic cloud synchronization. The architecture is intentionally straightforward: Static website + local AI + local storage. 5. Making it usable beyond a demo A working model pipeline is only one part of a usable application. I had to deal with model initialization, download consent, slow mobile inference, interrupted scans, IndexedDB upgrades, preserving unsaved photographs, and keeping the interface responsive on smaller screens. One Android test uncovered a blocked IndexedDB upgrade that prevented a photograph from being saved. That led me to improve how database connections respond to version changes and how blocked storage initialization recovers. I also added lazy-loaded application sections, paginated cat galleries, deferred image decoding, and improved asset caching. For testing, I used Vitest, Playwright, real Chromium/WASM model runs, and Lighthouse. In CI Lighthouse measurements, mobile performance improved from 78 to 100 after the performance pass. Those are synthetic lab scores, not measurements of real-world Android inference speed. And finally, I verified the application on my Android phone. It was satisfying to see the whole experience work on the kind of device it was actually designed for. Why Does Open Innovation Matter? I could have built Meowfolio using a hosted computer-vision API. The architecture would have been fairly straightforward: upload a photograph, wait for a server to analyze it, and receive a result. But that wasn't what I wanted. I didn't think a photograph of a neighborhood cat needed to travel to somebody else's inference server just so I could add it to my scrapbook. Using open-weight models made a different approach possible. The data stays closer to the person who created it The AI models come to the browser instead of the photograph being sent to a remote inference API. Cat photos, names, embeddings, notes, and optional coordinates remain in local browser storage. This doesn't eliminate every privacy consideration, and it doesn't make browser storage permanent. But it gives the application a much smaller data-sharing footprint than a conventional hosted inference service. I can inspect and change the behavior Open models gave me the freedom to experiment with different implementations, examine their limitations, pin model revisions, and evaluate matching strategies. That mattered when the familiar-cat recognition experiment failed. I wasn't forced to accept an opaque confidence score as proof that two photographs showed the same animal. I could measure the failure, document it, and choose a more trustworthy interaction. There is no per-photo inference bill The application doesn't need a paid model API every time someone photographs a cat. Once the assets are available, inference runs on the user's device using their own computing resources. That makes the core experience easier to keep publicly accessible as a small open-source project. Other people can build on it The source code is available under MPL-2.0, with attribution for the model creators, conversions, and major runtime dependencies. Someone could improve the interface, evaluate a better detector, build a more rigorous open-set recognition experiment, or adapt the same approach to birds, plants, or other things people notice outdoors. The project doesn't have to end with my version of it. Open innovation made it possible to build something private, inspectable, and inexpensive to run. It also made it possible to admit where the AI wasn't good enough yet. And for me, that's just as important. A small reason to go outside There's something funny about building an AI project for a challenge called Touch Grass. Usually, the goal of a software project is to make people spend more time using it. Here, I wanted almost the opposite. Meowfolio doesn't count your steps. It doesn't maintain a daily streak. It doesn't send notifications telling you to go find another cat. It doesn't need to. Maybe there's a cat you always see near your house. Maybe there's one that appears every morning near your college. Maybe you've walked past the same animal dozens of times without ever thinking about it. Now you have a small excuse to notice. You can give that cat a name, remember when you met it, and slowly build a collection of tiny encounters. And when you're finished, you can put your phone away and keep walking. Little cats. Big memories. 🐱 Try Meowfolio 💻 Explore the source code 🌿 Built for Hacktoberfest 2026 — Week 1: Touch Grass.