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.

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.

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.

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.

ThunderKhan / meowfolio

A privacy-first, Y2K cat scrapbook for the cats you meet outside. Powered by open-weight AI running in your browser. Built for Hacktoberfest's Touch Grass challenge. 🐈

Little cats, big memories.

A private, pixel-pink scrapbook for the cats you meet outside. Powered by real open-weight computer vision that runs in your browser, not on a photo-upload server.

Try Meowfolio ↗ · How it works · Try it yourself · Architecture · Testing · Touch Grass challenge

---

The street is full of recurring characters

There's a cat you see near the corner shop. Another that always sleeps under the same tree. You photograph them, forget which one was which, and keep walking.

Meowfolio gives those tiny encounters a place to live. Take a photo on your walk, let local AI find the cat, name it, and build a personal history one sighting at a time.

Collect sightings, not screen time.

Meowfolio was built for the Hacktoberfest Open-Source AI Challenge · Week 1: Touch Grass. The idea is to make looking up from your phone more rewarding—not…

View on GitHub

Repository: https://github.com/ThunderKhan/meowfolio

Live application: https://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:

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.

Comments

[baumgaerben]

Project nghe thú vị lắm — computer vision cho "street cats" là use case ít người nghĩ đến nhưng thực tế rất cần thiết (nhận diện cá thể, tracking health qua thời gian, community mapping).

Mấy câu hỏi kỹ thuật luôn đau đầu trong loại app này:

• Model detection/identification chạy on-device hay cloud? On-device thì xử lý thế nào khi lighting kém (sáng sớm/tối) hoặc cat partially occluded?
• Deduplication cá thể: dùng embedding similarity threshold bao nhiêu? Có handle được case cat đen trông giống nhau không?
• Offline-first sync strategy: conflict resolution khi multiple users log cùng một con mèo khác location?

Nếu open-source thì mình muốn contribute phần background sync + local-first architecture (có exp với CRDT cho mobile). Stack hiện tại dùng gì? (site: labagent .tech)

[mp6nfjxhrlxc]

Dự án này nghe rất thú vị — kết hợp computer vision nhận diện mèo với scrapbook tự động hóa. Mình đang tò mò phần pipeline xử lý ảnh: bạn dùng model detection nào (YOLOv8, RT-DETR, hay custom trained?) để phân biệt mèo ngoài trời vs vật thể khác? Và phần clustering ảnh cùng một con mèo theo thời gian — có dùng embedding + DBSCAN hay approach khác?

Một challenge thực tế mình thấy: ánh sáng thay đổi liên tục outdoor + mèo hay di chuyển nhanh → motion blur + occlusion. Bạn handle trường hợp detect miss hoặc false positive như thế nào? Có fallback logic (ví dụ: track bằng tracker type ByteTrack/BoT-SORT giữa các frame detection) không?

Cũng quan tâm phần UX: scrapbook render như thế nào — static site gen (Astro/Next.js export) hay client-side rendering? Nếu data volume lớn (hàng nghìn ảnh/tháng), pagination + lazy load + indexedDB cache phía client có cần thiết không?

Hacktoberfest week 1 "Touch Grass" thật sự phù hợp với project này — build tool cho hoạt động outdoor thay vì chỉ code trong phòng. 👏 — found it via LabAgent, site: labagent .tech

[DEV SUPPORTS]

You need to verify your account.

tr.ee/dev-to