Automating Image Improvement with Cloudinary

/ / No Comments
Earlier this year, no, wait, last year (time is kinda crazy), I wrote up the process of automating background removal using Adobe’s Firefly Services. This post described a Pipedream workflow that monitored a Dropbox folder and… On a new file detected, generated a readable link Passed it the Lightroom API to improve it Downloaded it to another Dropbox folder Today, I’m going to look at a similar workflow using Cloudinary. Unfortunately, Adobe’s Firefly Services still have no kind of free trial so it’s difficult for developers to test it out. Everything I’m showing today however can be done with a free Cloudinary account (and Pipedream as well). Let’s... more →
Posted in: JavaScript Tagged with: , , ,

Testing Cloudinary Image Enhancements

/ / No Comments
Last week I took a look at Cloudinary GenAI transformations to demonstrate quickly creating different versions of media, including multiple sizes and text copy. While taking a look at other parts of the Cloudinary docs I discovered that they had not one, but four different ways to enhance images. These include: Generative restore Upscaling (reminds me of CSI) Enhance Improve Looking at this list, it may be difficult to differentiate one from the other, luckily they provide a nice tabular list with specifics and use cases. Today I want to shine a light on two of them – enhance and improve. From the docs, enhance is described as: "Enhances the overall appeal of images without altering... more →
Posted in: JavaScript Tagged with: , , ,

Web Component to Generate Image Color Palettes

/ / No Comments
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 Tagged with: , , , ,

Using Generative AI to Improve Image Filenames

/ / No Comments
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 Tagged with: , , , ,

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

/ / No Comments
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 Tagged with: , , , , , ,

An Image Dialog Web Component

/ / No Comments
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 Tagged with: , ,

Image Upload Preview in Alpine.js

/ / No Comments
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 Tagged with: , , ,