005 - We Fix a Few Bugs

Jonathan and Caleb update on a few bugs and how we do image processing in the browser.

Show Notes

Jonathan and Caleb share some progress updates and how we do image processing in the browser to cut costs.

[01:23] Shower thoughts: reducing image size in the browser
[06:44] Creating a user account and removing background from profile photos
[12:28] We have a logo and a landing page

The Product: OpenHouse.social

Newsletter: factory.twostoryrobot.com

Twitter: @twostoryrobot

Instagram: @therobotfactorypod

Follow Jonathan: @thejonotron
Follow Caleb: @calebissharp

Creators & Guests

Host

Caleb Sharp

Full-stack developer at Two Story Robot

Host

Jonathan Bowers (he/him)

Founder of Two Story Robot. Developer turned entrepreneur.

What is The Robot Factory?

Follow along as we attempt to build and sell a SaaS company. A build in public behind the scenes journey of a small software agency, Two Story Robot, trying something new.

Jonathan: Welcome back to The Robot
Factory podcast, where we record ourselves

trying to build a startup and sell it.

I had a dream that, um,
we had a super cool logo.

That's it?

Caleb: Well, what did it look like?

Jonathan: I don't know.

It just was cool.

No, I didn't see it.

Um, because dreams or visuals in dreams
for me, don't, they're kind of weird.

They, they.

I dunno, I can't really retain them.

I just have this like sense that
things look a certain way, but

not actually anything specific.

And it was, I don't know what
the logo was, but it was cool.

Caleb: that's a shame.

I know what you mean though.

There's a whole subreddit actually
about flags that people have dreamt

of, and then they drew and upload.

I don't know how much, I think
it's mostly not real, but.

Some of them are very intricate stories.

Uh it's r/somnivexillology

Jonathan: somnivexillology

okay.

Caleb: It's um, it's ridiculous.

Jonathan: That's some of my best
ideas happen either in the shower

at night, you had a, you had an
idea in the shower the other day.

What was it?

Caleb: oh, ah, I can't remember,
but it might've been something

to do with images maybe.

Jonathan: tell me about images.

I think it was about image reduction

Caleb: Yeah.

Jonathan: or image size reduction.

I should say.

Caleb: It was either image size
reduction, or it was the other thing,

but I can talk about the image size
reduction because that's actually

relevant, which is nice for once.

pictures were too big.

We would upload them.

The server would crash.

And so the first solution
was to say, no big images.

But the problem is lots of people
have big images, especially when

they're being taken with like
a DSLR of a house or something.

So that's kind of not the best solution
we could have also just upped the amount

of memory we gave to the server, but
that's just kind of more expensive and

it might not even actually be necessary.

So

Jonathan: Yeah, because the images that
we like ultimately produce are not that

large because the social media sites
have have specific dimensions that

they are, that they're looking for.

And that's, it's pretty small.

Caleb: Yeah.

We already know our
like target resolution.

So, so we're wasting bandwidth to
upload larger images and we're just

there's no, yeah, there's a point.

So there was a couple, I think solutions
that we talked about, one of them

is using like a third party service.

We would send the images to, they would
resize them and send them back and then

we might upload them, which doesn't
really solve any bandwidth constraints.

I think that actually uses more bandwidth,

but

Jonathan: so.

Yeah.

Cause we got to send it there.

Then they got to do a thing and then
send a short, smaller image back.

And then we got to then take that.

Yeah.

Yeah.

Extra, extra steps

Caleb: More steps.

So

Jonathan: not, not free

Caleb: not free,

Jonathan: free,

Caleb: not free.

We made it.

Jonathan: If it's, if it's cheap,
it's not like it was going to

cost us thousands of dollars.

It was going to maybe cost us dollars.

Caleb: it might've saved time in
implementation, but I actually don't think

so because the solution that I went with
is to do it all in the browser, using

some fancy canvas wizardry, it can resize
the images and it can also compress them.

So like JPEG compression, you
can specify a quality settings so

you can make them even smaller.

Jonathan: Very cool.

So instead of now, if I am a real
estate agent and I have a photo

of a house that is, I don't know,
I don't even know how big photos

Caleb: 11

Jonathan: 12, 11 megabytes,

I was gonna say 12

Caleb: mm.

Close, close,

Jonathan: enough.

Okay.

11 megabytes, big.

Um, we had set it at, what was it?

Two megabytes, which was impossibly small.

I couldn't even find
images that were, that.

Caleb: which is surprising because
I had triple finding images on

my computer that were that big.

Jonathan: I was going to
Unsplash and downloading

the

Caleb: yeah.

Jonathan: images.

Yeah.

I, it was not that hard.

I just wasn't trying very much, uh,
so two megs was what we had set it at

and I just kept crashing the thing.

And when we demoed with, uh, with
Vann last time, uh, I think he

tried to upload an image that was.

And it gave him the same problem.

Caleb: Yeah.

Jonathan: so now we don't have that.

We don't have that issue, so that's nice.

And then the user, when they click
submit or upload or whatever, they

don't send all that image, they
just send a smaller version of it.

So that's nice.

Caleb: Yeah, I think an 11 megabyte image.

It depends on the contents
of the image, but it gets

compressed to like 200 kilobytes.

So on slow internet speeds.

That's much faster than, than it say.

It saves us money because it's
less expensive to render that

out because we have to load that
image into memory on the server.

So kind of a win-win

Jonathan: the other thing I think that
might be nice as I'm thinking about it.

Actually, it was something I was
thinking about as it was running today.

I just got back from a long run.

And one of the things I was

Caleb: we do all our, all our thinking,
just like, well, doing things.

Jonathan: yeah, well, that's the best time
you gotta, like, you have to give your

mind a chance to rest from the things that
like, and then it just sort of wanders.

I like that's one of the reasons
I like running is that my mind

just goes in different directions.

I tend to either listen to podcasts
or like vacantly listen to podcasts

and not really pay attention to them
and not know what's going on cause my

mind is going in different directions.

But one of the things I was
thinking about was mobile.

Being able to do some of these
image things on the go, I don't

know if that's a use case or not.

We'd have to maybe ask some folks,
I can imagine maybe you sort of

roll up to the roll-up to the house.

Uh, take a picture on your phone.

I mean, my phone takes amazing photos.

I like cameras on smartphones
these days are so cool.

I feel like I could take a
pretty good photo of a house.

And then just get a cool image and
post it straight to social media

without having to go back to the office.

Um, but I don't want to, I don't want
to send you an 11 meg photo, even though

I have 40 gigs of data, it's fine.

it's just going to take longer and
it's going to cost me, cost me money.

You had one approach, which you decided
not to do, and I couldn't, I don't quite

follow why you were using a library.

Caleb: Oh, yeah, I was using a library.

It didn't really do much.

It just had some nice, nice kinda
wrapping and abstraction for the

canvas API, but there was just some
bug in the library that And I didn't

really want to fix it because doing
it like manually just using the canvas

API directly wasn't that much harder.

So what does save time if it
worked, but it didn't work.

So I just scrapped it.

Jonathan: what's the other, you
were working on some other thing.

Caleb: one of the things that
we wanted was for people to.

Like, if you have an account, you can
specify like your name and like details

that won't change as well as upload like
a profile picture that will get stuck

in all the images or whatever image.

You're like a logo image.

I implemented all that cause then
all that existed before, so people

have profiles now and the, the image
generator can pull info from that.

So we can, that opens up some more
possibilities, but the cool thing.

One thing that we wanted to try was
when you upload like an image, I

think in most cases it's going to be
of like the real estate agents face.

Cause we thought it'd be a good
idea to remove like automatically

remove the backgrounds cause they
might, they might be headshots,

but they might not be transparent.

there was a couple ideas that
we had on how to do that.

One was using one of those
third-party services where you can

send them the image, it removes
the background and sends it back.

some of them also do other things
like cropping into the face and

Jonathan: Yeah, those are
surprisingly expensive.

Caleb: Right?

Yeah,

Jonathan: Yeah,

Caleb: I was looking at one and I think
it was just background removal and

it was like 50, probably us dollars
a month for like a hundred credit.

Jonathan: but what's a credit, like one

Caleb: Like one image, like you
could do a hundred images a month,

which

Jonathan: That just
seems wildly like, yeah.

That's 50 cents per image.

Caleb: Right.

Which is, yeah.

So instead of that, because we're
not making any money yet, so,

Jonathan: just spending money on time.

Caleb: uh, well, we don't
need to spend more money

Jonathan: Um,

Caleb: I found this model, it's a
machine learning model, you just

TensorFlow JS or, or whatever.

Um, but it, it runs in the browser.

So it all runs in the

Jonathan: that?

What's TensorFlow.

Caleb: TensorFlow is like a machine
learning library in Python and then

TensorFlow JS is though the JS thing
that runs in the browser JavaScript.

Yeah.

which that part isn't actually
super important, but it all,

it all runs in the browser.

It uses web.

Um, so use it the GPU.

So it's pretty fast.

but it's a model it's actually
meant for like pose estimation.

So for tracking, I think mostly in
videos, like people's arms sitting

around, we, we actually not this specific
model, but we used a very similar one.

We did a demo a couple of years
back of a giant robot that used pose

estimation and we projected it on a wall.

so it's a similar model to that.

But instead of using the points that
it generates, it also generates.

It's called like a segmentation mask.

I don't know what that means.

Uh, but basically it's

Jonathan: You

just, we're just, where did, what wizard
you used the words wizardry earlier.

And I feel like you've just
found a spell in a book and just

read it and some stuff happened.

Caleb: Yeah.

I just cracked open the Necronomicon
and came across this model.

I don't know what it does or what it's
for, but I know what it looks like.

it'll take an image as an input and then
it'll if it detects people, well, one

person it'll mark all the pixels that
make up that person as like one or a

value between zero and one closer to one.

If it's more person like can closer to
zero, if it's less person like that.

So like the background would be all zeros.

Um, but anyway, that generates
like a mask, which you can then.

overlay onto the original images and
basically just cut out the person.

and because it all runs in the
browser, we can cut out the

person before even uploading it.

it doesn't cost us anything except for the
storage costs, saving the profile picture.

Jonathan: But we don't have to do the
cutout on the server, which is nice.

I mean,

don't have to use that funny.

One of those funny services,
why wouldn't we use this in?

Like, why would we put this in the
browser for the user to do like, they're

not, they don't have to do anything.

It just happens automatically,
but why make their computer do it?

Caleb: this model is meant to run
for videos and like near real time.

And it's also like it runs on
phones and stuff, so that those are

already pretty low power devices.

So I think we're pretty safe there.

Jonathan: I think we should, still have
the user upload the mask so that the image

with the background removed and the image
with the background still there So for

one, if they just decide, I don't want
this particular image to have the, the

background removed, I want it to be in
the little circle that we have designed.

or maybe I'm going to do something
fun where I actually want to put

like a banner between myself and
the background that's in my photo.

Like maybe the photo is kind of cool.

It's, uh, an, a vista or
a sunset or something.

And I like that, but I want to also, I
just think it gives us some more options.

and it's always nicer to not
throw away information if we can.

Caleb: I think we could do that.

Um, I do see what you're saying, but yeah,
to answer your question on why we do it in

the browser, it's just to save us money.

Jonathan: Okay.

Yeah.

Caleb: because it doesn't take that long
right now, there is like a checkbox.

So you can turn off the
background rule if you want.

Um, but because it's, it's already
a button that you know, is going to

be like uploading stuff and saving.

Like users would, they'd
be expecting to load.

So it adds like an extra second
to remove the background.

So it's kind of, it's an actually super
noticeable, um, and people I don't think

would often be changing this image.

It's not like, I think if this were
to happen every time they wanted to

generate like a social media image
that might start to add up and get

kind of annoying, but this is a pretty

Jonathan: Yeah, it sort of just
once we just upload the photo, once

we save it and then we use it over
and over and over again, unlike the

photo of the house, they're going to
be uploading that many, many times.

So other updates, we might be
pretty close to having a logo.

Uh, I think it's looks kind of cool.

It can be very trendy.

Caleb: trendy.

What does

that here?

Jonathan: feels trendy.

It's good gradients.

Caleb: What logo doesn't have

gradients.

Jonathan: And we have I've mocked up
like really rough, uh, landing page.

So I'm hoping that, we can have the
landing page design finished by Monday,

and then we could have it all, wrapped up.

Implemented and maybe even like, not
launched, but like soft launched, like

just make it live next week sometime.

And we'll have, um, have
the landing page up.

What do you think about that?

If, if we get, if we get a design
kind of agreed on on Monday,

um, do you think that you'd be

able

Caleb: big, big if

Jonathan: of it next week?

Caleb: probably unless, unless
your landing page is doing some

like super complicated stuff

I seem to recall, like a month
ago we had a very similar goal

Jonathan: of what having a
landing page by the end of.

Caleb: having a landing page and then
soft launch by the end of the week.

Yeah,

Jonathan: Yeah, I know,
but it feels close now.

Caleb: yeah.

This time, this

Jonathan: Yeah.

I mean, we've got lots of other
stuff we're trying to work on.

So this feels like a
bit of a side project.

Caleb: I also think we've made more
progress towards it than we did last time.

We've already started on it.

So it's easier to

Jonathan: Yup.

And, and I've had, and we've had like
some other, like I've had a conversation.

We had a conversation with
Vann, and I meet with, uh,

another real estate agent next.

Oh no, not next week.

He had to

Caleb: Yeah, then, then you'd like to
send out a bunch of, bunch of messages

Jonathan: I sent out two to
one person got back to me.

Um, they run a, it's a pretty, like
one of the larger real estate agents

in our town re sorry, real estate
agencies, real estate corporations.

like if you scroll the about, or the
team page, there's I want to say 20,

20 people or something
plus plus support staff.

Uh, he seems interested.

I don't, I don't know.

We'll see, we'll see, we'll
chat with him in a little,

over a little under two weeks.

I'm excited about that one
because, because it is.

20 agents or so, And, uh, the other
person hasn't got back to me, I

think maybe my email went to spam.

I don't know.

We'll see.

I do, I do know how to get
ahold of her on social media.

So

Caleb: Hmm.

Okay.

Jonathan: I'll give it a few days
and then bug her us on social media.

Caleb: What

Jonathan: I think that'll be okay.

Cause she follows me on Strava.

So that feels, that feels fine.

Caleb: maybe you can, you can like
write a, write a message in your route.

Jonathan: I would, I
was thinking about that.

I was gonna I was going to post
because you can post images and Strava.

I was going to make some images with, um,

Hey, check it out.

Talk to me.

I can make this for you.

Caleb: yeah.

Jonathan: Or do that,
do that running thing.

When you run, run art and make art

Caleb: Yeah, that might, it depends on how
long the messages that might take a while

Jonathan: the other thing that I was
thinking is, Launching, because we're

doing two things where we are launching
this product called OpenHouse.Social,

but we're also launching this thing,
this podcast, which is a thing about

OpenHouse.Social, and maybe some other,
some other projects that we're working on.

I was thinking about launching
the, like a newsletter for this,

the meta piece, the robot factory,
launching that really, really soon.

And.

Promote, like just talking about it really
loudly and saying, Hey, here's the thing.

We're doing a signup to our newsletter
and be notified once we, once we

launch our podcast and you'll get
like, whatever, we'll tell you about

the project that we're working on.

Caleb: do you want to.

Launch a newsletter before
we launched the podcast,

Jonathan: Yes.

Yeah.

Not, not a newsletter, just
like a subscription for them.

Like just like, Hey, sign
up, get a newsletter.

And then like, we'll be straight
in your inbox as soon as, as

soon as this happens.

Cause there's a few people that
I was talking to that were like,

yeah, that sounds kind of cool.

Like I'm on it.

I want to see how that goes.

I know my buddy, uh, one of my other
buddies isn't into entrepreneurship.

He probably listening.

Caleb: Yeah.

Okay.

Maybe that makes sense then if
there are people that are already

interested so that they don't forget
if we have some way to notify them,

Jonathan: yeah.

And then just kinda get, get
some support, like some retweets

when we, when we fully launched.

Yeah.

Caleb: Retweets.

Jonathan: Uh, anyways, that's
what I'm thinking about.

I hope that we can make everything happen.

It's feeling it's feeling really
close, so I'm excited about it.

Caleb: Lots of possibility right now.

It feels like lots of open,
open pathways right now.

Jonathan: Yeah, but we still
gotta validate some stuff.

So I'm excited to talk
with more customers.

And I think it's going to be a lot easier
once we have a little landing page that

we can iterate on really quickly to,
once we get some feedback, like once we

talk with this real estate agent in a
couple of weeks, um, getting some of his

feedback will be really helpful and we can
reflect that back onto the landing page.

Caleb: Yeah.

Hopefully by then we have
like more of a polished thing

to show, to be kind of cool.

Maybe even a thing that's
already ready to like pay for.

Jonathan: Yeah.

I mean, even like I have no
problems charging for something.

Like if, if, if, so one of the strategies
that I think we should start with

is doing things that don't scale.

So this, this particular real
estate agent that I'm talking to, I

think he could use it pretty soon.

And all we'd have to do is come
up with a custom template for him.

And that would be a little bit of
manual labor to make that thing.

Maybe a special flag that we
put in, uh, in the backend.

And then boom, here you go.

Sign up.

Uh, well here's your Stripe invoice and
it's, it's rolling and start using it.

Caleb: Yeah, that'd be sweet
times, 20 people or whatever

Jonathan: I don't know if
he'd have all 20 on, but yeah,

maybe a couple.

Caleb: 20 bucks a month.

Times 10.

Jonathan: 20 bucks a month.

Yeah, we gotta ask him what the price is.

We don't even know what the prices are.

This is going to be.

Caleb: How much is the mortgage usually

Jonathan: Yeah.

How much is a mortgage

Caleb: what's uh, yeah.

So the relatable.

Jonathan: is less than a mortgage

Caleb: Yeah.

Jonathan: or maybe not

Caleb: Is that, is that like the
equivalent of less than a cup of

coffee for real estate agents?

Jonathan: yeah.

Less than a cup of coffee a day.

It's definitely going to be
less than a cup of coffee a day.

Caleb: Yeah.

That's a lot of

Jonathan: that's for sure.

Anyways, um, that's where we are

Caleb: you have been listening
to The Robot Factory.

I've been Caleb Sharp.

Jonathan: And I am Jonathan Bowers,

Caleb: Ah, see you next time.

Jonathan: see ya.