PFP Studio Devlog #1.5

ok so here’s the thing.

everyone has that moment where they’re picking a profile pic and they just… can’t decide. you’re staring at 12 photos that all look basically the same and you pick one based on vibes.

i wanted to fix that.

the idea is simple. upload your photos, the app checks each face, scores them on actual stuff (is it centered, is the face big enough, is it well lit, is it sharp or blurry), then ranks them. #1 wins. done.

---

getting started was rougher than expected

i’d used html/css/js before but this was my first real React project. spent an embarrassing amount of time confused about why my component wasn’t showing up before realizing i named it uploadZone instead of UploadZone. React treats lowercase as HTML tags. learned that one the hard way.

also had a white screen moment that lasted way longer than i want to admit. turned out export default App was just… missing. one line.

---

the model files situation

face-api.js needs ML model files to detect faces. downloaded them through the browser. seemed fine. then got this error: “tensor should have 864 values but has 617.”

turns out the browser saved them as HTML files instead of the actual binary. re-downloaded them properly, everything worked.

---

where it’s at now

the core scoring works. it reads pixel data from each face region, runs four checks, combines them into a total score, and sorts the photos. tested it and the ranking actually makes sense.

next: working on the logic and reasoning behind the best pfp and then later making the app look nice :)

we’ll see how that goes.

-Ziyaad