Show HN: Thumbnail.ai – Just paste a blog post link and get a thumbnail | Hacker News Reader

Show HN: Thumbnail.ai – Just paste a blog post link and get a thumbnail

thumbnail.ai

121 pointsjusthw71 comments

Love the demo links under the search bar: "Try these: TechRadar, AVC, Paul Graham, BBC, Medium, Pulse".

I think one mistake a lot of people make on their landing page is to just give the user an empty search box and force them to come up with what to type as a test, rather than showing them a test yourself, which I imagine would significantly increase conversion.

Agreed, like that it was prefilled, but just a note the article for Paul Graham is "The Bus Ticket Theory of Genius".

But the image that came up wasn't for a bus ticket, it was for a raffle ticket, which basically has nothing to do with a bus ticket except it has the word "ticket" in common. So on one hand it kind of highlighted what I don't like about services like this in that you get relatively dumb results that are basically just doing keyword matches, and the images actually have nothing to do with the story.

Edit: OK, actually none of the images really make sense. Since these are curated results I'd expect them to show the best of what can be generated. Instead:

- TechRadar, Apple's privacy labels reveals Whatsapp and Facebook Messenger's hunger for user data: Show's a Samsung phone

- AVC, Temper Tantrum - AVC: Maybe, kinda fits, but looks to me just like a sad little girl, not a girl having a temper tantrum.

- BBC, The nuclear lighthouses built by the Soviets in the Arctic - BBC Reel: OK, this one fits exactly, but the image is just taken straight from the blog post.

- Medium, I’ve Been in Venture Capital for Two Months. Here’s What Still Makes No Sense: A completely random picture of a forest.

- Pulse, If There Aren't Any Typos In This Essay, We Launched Too Late!: A somewhat bizarro picture of someone on a scooter with a rocket on their back.

TBH if I wanted to promote my blog post I'd just do my own stock image search and use that instead.

It searches for an image only if the post doesn't have an image already. AVC and PG's in this case don't include pics so it made one. It will get better in v2. This is just the mvp version.

Oh definitely! Removing every little friction is key. Thanks

Those links are super useful - might I recommend making them a bit more obvious? I didn't notice them until I came back to HN and read the comments

agreed, just make the text #fff

On the demo links the change image box does not work. Whereas on pages where I pasted the URL myself I can change the image. Sorry if that’s a poor explanation of what I mean but I hope it makes sense.

I hacked and open-sourced a similar Python project last year to programmatically generate images based on templates by using a headless Google Chrome, allowing for the full gamut of CSS tricks: https://github.com/minimaxir/imgmaker

It's currently being used in production where I work to generate some social media thumbnails which would otherwise be difficult to do using conventional Python image libraries.

This is using puppeteer as well. I checked yours out, it's pretty cool.

Using headless Firefox with a cloned profile allows you to easily screenshot services you're logged into. I will post the steps someday when I have my space on the net.

I'm using Statically (https://statically.io/) which offers screenshot API so thumbnail can be generated automatically. In my blog template, I use the following snippet:

  <meta property="og:image" content="https://cdn.statically.io/screenshot/<%- post.link %>">

Nice. This is a very different service though.

Hi HN, I built this MVP because using an image editor to create thumbnails for my blog posts was time consuming.

Good thumbnails can bring a lot of traffic to a post specially when shared on social networks. There are just 4 templates now and will add more. Please try your blog posts and I would love to hear your feedback.

This could be great in combination with a blog plugin.

I'm not sure how useful it is for entries that already have a nice image, don't those posts already look great in most social networks? And if you are interested in traffic generation like that your entries probably have at least one image placed somewhere and the necessary HTML tags to use them set up.

When the article has no image it seems more useful, with the image insertion feature you have there :)

I took a moment to understand that the form changes the background of the generated image, because the first entry of mine I tried already had an image, so I did not get what `background` was referencing.

To just offer to download the image then might be not enough. Many authors won't know how to embed them as an image used by social networks. Not sure how to solve that without going the plugin route, a smaller step could be presenting the needed html, or showing a guide how to use the generated image with some popular blog engines?

Great points. It definitely could use clearer steps and instructions. Thanks much for your feedback.

Why is it better than opengraph ? (excluding platforms that don't use opengraph tag)

This is for opengraph. It gives you a nice image you can link to in the open graph meta tags.

In fact, the end result is something very similar to Twitter Cards.

Ah, got it.

it's not! inaccessible text preview, image should already be in your post meta if you want it to show up in a twitter card. :\

hey, a bugreport for you: not all sites have favicon.

I specifically chose to not have one on my site, so URLs like 'https://egorfine.com/en/articles/painless-meetings/' will render a "broken image" icon on the top right.

Thanks egor.

Are you also purposely not using title tags and description tags as well? I ran a couple pages from your site and they're all the same. May not be good for SEO as well.

Yeah, it's sort of intentional. It's a personal page that has zero useful content (except maybe https://egorfine.com/en/articles/) and is mostly kept as a dumpster with misc stuff accumulated over the decades.

Is there really any "AI"? It seems to just take the title and apply it to 4 templates.

ai is the Internet country code top-level domain for Anguilla. I wouldn’t take the endings at face value.

In that case, what does the site have to do with Anguilla? /r

Hey justhw, I launched something similar [1] a few months back. I’d love to talk with you about your stack. Here are the three biggest problems I ran into.

1. Request timeouts

Even "fast" blogs sometimes have hiccups or rate-limit scrapers/crawlers. The more I scale the more often I see requests timing out. I've tried to mitigate this with retry buttons and trying the request again, but it doesn't always work.

2. Scaling Puppeteer

I saw from another of your comments that this is built on top of Puppeteer. From my experience, trying to scale to even 3 concurrent renders starts to fall apart when you have to spin up a new Chrome instance for each request.

I've looked into Browserless [2] but they charge per second of usage, and I'm not at the point where I want to have that big of an expense.

3. Getting a relevant image

I love that your tool adds an image to the thumbnail as well! I struggled with searching Unsplash using the text in the title of the article but they never came out that well.

I love it when people make these massively useful services stitching together a few simple tools. Congrats on the launch!

[1] https://mugshotbot.com [2] https://www.browserless.io

Hi joel, we can def chat. Email in profile.

Would love to hear some sort of summary though :)

Hey joe, I actually haven't had scaling issues yet since the requests are relatively few but I run it on a cpu optimized server so that might be helping out. As for getting a relevant image I use pixabay.com, their TOS and database is a lot. Tip when searching for image, filter your title using keyword extraction library [1] to simplify the query. Hope that answers some things.

Edit: * their TOS is user friendly and they carry more images. [1] = https://pypi.org/project/rake-nltk/

I use Bannerbear[1] for this purpose. Works well and the founder is doing the whole "Open Startup"[2] thing, so that's cool too.

[1] https://www.bannerbear.com/

[2] https://www.bannerbear.com/open/

This is pretty cool. I recently built a "StumbleUpon for eCommerce stores" (https://www.shiny.sale/) and did quite a bit of research trying to find a good screenshot API. I eventually settled on ApiFlash.

I would definitely use this once I got into editorial content. I have a few suggestions for your homepage though:

1. The 3 steps you outline are still too vague, especially step 3 ("upload it to your blog post"). Makes it sound like this will be one of my main images. I'd suggest some more detailed instructions for different blog platforms.

2. Is there no API or other way to auto-generate an image? If not, I'd suggest that be your next feature.

3. One of the examples (BBC) I generated resulted in a 3.3MB PNG file. You maybe want to provide some better compression/minification options for people. You definitely shouldn't be creating high-res PNGs when images are involved.

4. It was also 2400x1260 which doesn't qualify as a "Thumbnail" IMO. You may want to generate files closer to the preferred social specs. Twitter, for example, wants files < 5MB and don't need to be anywhere near that big[1].

Anyway, hope that is helpful feedback. Great idea and MVP. Keep it up!

[1] https://developer.twitter.com/en/docs/twitter-for-websites/c...

> did quite a bit of research trying to find a good screenshot API.

Would be interested in this research if you’re willing to share: Chris at urlbox.io

Excellent points. Thanks much.

This is great! It’s such a frustrating process to jump out of a text editor to create an image and put it back in a post. I’ll try this out for my next article or post!

I just search for something vaguely similar on Unsplash and call it a day.

Where do the images come from on posts that don't have image content (eg http://paulgraham.com/genius.html has a ticket image)? What's the copyright situation there?

They're from free sites (pixabay currently...will add more).

https://pixabay.com/service/terms/#license

Images and videos are released under the Pixabay License and may be used freely for almost any purpose - even commercially. Attribution is appreciated, but not required.

I would like to use this for a service of mine once it has an API (added my email in the list).

But if I send a link that has no relevant images on its page, I would prefer to receive no image (or maybe the favicon image) than a unrelated, keyword-matched stock image.

This looks awesome, any thoughts on making this automated?

Here’s a similar product I ran into here a while ago that uses the info in the other meta tags (title, description) to automate the creation of these images: https://www.mugshotbot.com/

I also built something similar called Thumblink, which takes a screenshot of the page to create these images: https://thumblink.com

There were a lot of features that I did not build because it would take more than a week. I think automation will be important once I get a steady amount of users.

It appears that your logo is 404ing so I get a "broken image" link in the corner of the images.

https://ipfs.io/ipfs/QmWUrYw7zrcnWLEyFafnGgxuZWGuXQ8eDJNHc3J...

That's not the generator, it's supposed to be the site's favicon

I checked the URL and it pointed at the generator domain.

Nice catch, will fix.

I generate screenshots/thumbnails in two sizes during the build process of https://datacrayon.com/. They're used for twitter cards and to make the homepage a little more interesting!

It's an interesting idea. It did not make good thumbnails for my blog posts. I would not have used any of what it generated.

If it did generate images I liked, I would be interested in using it, but I'd prefer to use it as part of a build step rather than adhoc per blog post.

Would you mind sharing the link you tried with? It could help me out. Thanks.

Sure, I tried https://mattgreer.dev/articles/mate-and-i3 I thought maybe it didn't work so well because the main image on that page is an svg? But this page has a png and had the same results, https://mattgreer.dev/articles/sega-saturn-and-transparency/

here are the results I got: https://i.imgur.com/yzmbc22.png

Also realizing the main png on that page is only 444x444, so maybe that's the issue. I do have larger images for twitter in meta tags, but I get using those defeats the purpose :)

Thanks matt, I found the problem, fixing it now. Here's how it should look. https://ibb.co/Kqr2zfZ

Nice, that looks good! Not the best source image, but that's my fault.

Not your fault btw, there were words with spaces appended to end of your image url's which I needed to encode.

Nice work! I like the quick rendering too.

However, I don't believe any AI was used for this, so the actual TLD is a bit inappropriate here. A ".io" TLD would would have been more fitting.

Not every slice of bread needs to be spread with butter. Similarly, not every project requires AI.

Maybe it's based in Anguilla :-)

Nice domain- any backstory to it?

thumbnail.ninja was not available this was available for regular price.

I got a 500 error on any pages within https://murex.rocks but every other site I tried worked fine. Really cool project this and polished rather nicely.

The demo look cool. How do you find background image? unsplash? I am currently building my SaaS on top on puppeteer to generate screenshots as well.

This is great! Seems like something that would best be suited for a build process though, any thoughts on that?

Yeah, that might be the way to go long term? but I wanted to ship fast and get something that works out in the field.

Completely makes sense! Good stuff

Unfortunately it doesn't seem to work for my blog. Pasting an article link returns a 500 Server Error.

Can you share the link you tried it with? It will help me.

I am getting the 500 error with two of my Webflow sites, but the blog section only. One example URL: https://www.stockbrief.com.au/blog/welcome-to-stock-brief

Thanks much, that was useful. I think it's all right now. https://thumbnail.ai/create?link=https%3A%2F%2Fwww.stockbrie...

I will keep improving it in the coming weeks.

Sure. https://leite.dev/posts/review-final-fantasy-xiv/

Loved it. Forwarded to my team to try it out. :D Great stuff.

This is similar to Bannerbear's offering but better! Good job!

...fake/inaccessible twitter cards?

That's a preview of what they would look like when shared on twitter.

Reply on news.ycombinator.com