Strengthening the Missing Side Hair Segmentation

We’d been fixing other parts of the app for a while, but one issue had been left unresolved.

Me:

“We’ve been fixing everything else, but the lower side hair still hasn’t been segmented properly. We’ve never really solved that part.”

Claude:

“You’re right. Before moving on to the next feature, we should get the hair segmentation working correctly first.

I’ll analyze the code.

There are probably two main causes.

The Hair Segmentation model itself struggles with hair below the ears and around the neck. Confidence drops significantly in side-profile photos.
In the current code, the TF.js fallback intentionally removes the bottom 30% of the mask.

Let’s improve the segmentation result by applying morphological closing. We’ll also make the hairEndY detection more tolerant so it can recognize sparse mask pixels near the bottom. Hopefully, that will recover the missing side hair.”

Me:

“Sounds good. Let’s see the result.”

To be honest, I still don’t fully understand terms like morphological closing, dilation, or hairEndY.

But that’s okay.

With vibe coding, I’ve learned that I don’t have to understand every technical term immediately.

I just need to keep reading, asking questions, and collaborating with AI.

A White Screen Appears

A few minutes later…

Me:

“Alright, let’s run it…

Claude, the page isn’t loading. It’s just a white screen.”

Claude:

“It broke. Let me investigate.

First, I’ll check for JavaScript syntax errors.”

A moment later…

“No syntax errors.

That means it’s more likely a runtime issue.

I’ll check whether it’s related to the dependency loading order.”

Then…

The conversation reached the context limit.

Time for another “Memento” moment.

I worked on something else for a while before returning to the project.

Picking Up Where We Left Off

Me:

“Claude, here’s the TXT file containing our previous conversation, along with the index.html. Let’s continue where we left off.”

Claude:

“The files you uploaded aren’t the hair styling project we were working on.

This project only contains and loads /src/main.jsx.

The hair segmentation and Face Landmarker code we’ve been working on isn’t here.”

Me:

“Oops… my mistake.

I uploaded the wrong project.

Let me send the correct files.”

After reviewing the correct files, Claude found what was probably the real culprit.

Claude:

“Looking back through our previous work, the most suspicious part is the dilate() and erode() functions.

They’re performing nested loops over a 512×512 image with a large radius, resulting in roughly 100 million operations, repeated across four different angles.

That amount of computation can easily block the main thread, making the application appear frozen with nothing but a white screen.

Let’s optimize that first.”

Sometimes the bug isn’t where you expect it.

And sometimes the hardest part of vibe coding isn’t writing new features.

It’s retracing your own steps after the conversation memory runs out.