Web Component to Generate Image Color Palettes

Chalk this up to something that is probably not terribly useful, but was kind of fun to build. A few weeks ago I came across a site talking about the colors used in the Fallout TV show. I grabbed a screenshot of how they rendered it: Unfortunately, I didn’t make note of the site itself and I can’t seem to find it anymore. I really dug how it showed the palette of prominent colors directly beneath the image itself. Using this as inspiration, I looked into how I could automate this with a web component. To get the color palette, I turned to a library I’ve used many times before, Color Thief. Given an image, it can return either the most dominant color of an image or return an... more →
Posted in: JavaScript

Using Generative AI to Improve Image Filenames

Last night I had an interesting thought. Many times I work with images that have vague filenames. For example, screenshot_1_24_12_23.jpg. Given that there are many APIs out there that can look at an image and provide a summary, what if we could use that to provide a better file name based on the content of the image? Here’s what I was able to find. As always, I began by prototyping in Google AI Studio. I apologize for stating this in basically every post on the topic, but I really want to stress how useful that is for development. I used a very simple prompt: Write a one sentence short summary of this image. The sentence should be no more than five words. And then did a quick test: If... more →
Posted in: JavaScript

Using GenAI to Classify an Image as a Photo, Screenshot, or Meme

File this under the "I wasn’t sure if it would work and it did" category. Recently, a friend on Facebook wondered if there was some way to take a collection of photos and figure out which were ‘real’ photos versus memes. I thought it could possibly be a good exercise for GenAI and decided to take a shot at it. As usual, I opened up Google’s AI Studio and did a few initial tests: I then simply removed that image and pasted more info to test. From what I could see, it worked well enough. I then took the source code from AI Studio and began working. The Code # First, I grabbed some pictures from my collection, eleven of them, and tried to get a few photos, memes,... more →
Posted in: JavaScript

An Image Dialog Web Component

A lot of the talk (well, on Mastodon at least) lately concerning web components has been on "HTML Web Components". The idea is that web components can progressively enhance "regular" HTML in the DOM instead of completely blowing it away with the Shadow DOM. (You can find a deeper discussion of this in Jim Nielsen’s blog post.) This is something that’s been on my mind for a while now as well and I’ve kept my eyes open for opportunities to build web components that enhance, not replace, content. With that in mind, I built a really simple component that does something fun. We’ve all seen sites that use JavaScript to provide a thumbnail and detail view... more →
Posted in: JavaScript

Image Upload Preview in Alpine.js

So as I’ve said a few times now, I’m on kind of a trend here on rebuilding previous demos in either vanilla (i.e. no framework) JavaScript or my new favorite framework, Alpine.js. In that vein, I’ve got an update to a post I first wrote nearly a decade ago, "Adding a file display list to a multi-file upload HTML control". I followed that up with a Vue version here: "Vue Quick Shot – Image Upload Previews". The idea was to enhance a form that asks for image uploads by adding a simple preview of the image. This helps as it lets the user be sure they’ve selected the right file. Raymond Camden… more →
Posted in: JavaScript