Welcome back! This weekend we want to focus on a bunch of topics. In essense we want to start getting traffic on our website. Right now we are not very well known and most people won’t find us.
- SEO
- We assume that people may search for very specific coloring pictures. Therefore we need to have a description for the images. Could we use the prompt or even AI to describe the images?
- Write a unit test for our code – using AI of course
The first thing we want to explore: can we use ChatGPT to generate us prompts and a description for the search engine in one go?. It’s not that we are running out of ideas ourselves, but why not give it a shot.
We can be found
After registering our website on Google and Bing, we can be found. We have not yet done any SEO or search engine optimization, but at least we know that if someone searches for usmalbilder.ch they will find us.
Generating better content
LLM’s like ChatGPT can be configured using natural language. We can tell the model to act in a specific way. Let me give you a simple example.
When I aske a question begin your answer with: Of course.
As you can see the model is able to understand the instruction and acts as expected. This is a very simple example, but we want to tailor the response to our needs for generating a prompt for Midjourney and a SEO friendly image description.
Try 1
This kind of works without much fine tuning, but the Midjourney prompts are not really usable. Also the description is maybe even the better prompt. Let’s try further.
Interacting with the AI
I’m sure you can get there quicker, but we had some interactions with ChatGPT until we were happy with the results.
- We asked it also to generate JSON
- And fine tuned the Midjourney prompts
- Correct the Midjourney parameters
Let’s try one of the ChatGPT prompts. 🙂
A coloring picture for kids featuring bold black and white lines of wild animals such as lions, tigers, monkeys, and snakes –v 5 –aspect 100:141
It isn’t bad, but we need to try a few more. We like simpler shapes. Most likely we need to be more precise on the desired style.
Let’s generate a few more examples and see the results.
| A coloring picture for kids featuring bold black and white lines of farm animals such as cows, chickens, pigs, and sheep –v 5 –aspect 100:141 |  |
| A coloring picture for kids with bold black and white lines depicting fruits and vegetables such as apples, bananas, carrots, and tomatoes –v 5 –aspect 100:141 |  |
| A coloring picture for kids featuring bold black and white lines of Christmas images such as a tree, presents, and Santa Claus –v 5 –aspect 100:141 |  |
| A coloring picture for kids with bold black and white lines depicting construction vehicles such as bulldozers, excavators, and cranes –v 5 –aspect 100:141 |  |
| A coloring picture for kids featuring bold black and white lines of sports such as soccer, basketball, baseball, and football –v 5 –aspect 100:141 |  |
| A coloring picture for kids with bold black and white lines depicting a jungle adventure with animals, trees, and a river –v 5 –aspect 100:141 |  |
| A coloring picture for kids featuring bold black and white lines of outer space with stars, planets, and a spaceship –v 5 –aspect 100:14 |  |
| A coloring picture for kids with bold black and white lines depicting Halloween images such as pumpkins, ghosts, and witches –v 5 –aspect 100:141 |  |
Most images aren’t bad, but we need to pick them carefully. What I personally like is that we get quite some images with a nice description and we also get ideas different than our own. Connecting the two AIs would be nice!
Use a proper description, first step into SEO
To ensure people can find your content in the web, it must be properly described. For example someone may search for a spacecraft coloring picture. Then you have to somehow ensure your coloring pictures are labled and can be found.
What we need to have is <img> tags in this form:
<img src="cute-puppy-coloring-page.jpg" alt="Cute puppy coloring page" title="Cute Puppy Coloring Page">Turns out the partial prompt in the image name is not really good. We have also tried to use Microsoft cognitive services API to tag the images, not very successfully either. Maybe for now this will be left as manual work. But we will do it step-by-step. So we start with the name generated by Midjourney and improve over time. Just in case someone would like to try the Microsoft Cognitive Services approach, here is the code, using their API is straight forward. But you need to create the respective Azure resources first.
async function tagImage(imagePath) {
const apiKey = 'xxxxxxxxxxx';
const endpoint = 'https://yourresource.cognitiveservices.azure.com/';
// Create a new ComputerVisionClient object with your credentials
const credentials = new CognitiveServicesCredentials(apiKey);
const client = new ComputerVisionClient(credentials, endpoint);
// Read the image file from disk and convert it to a buffer
const imageData = fs.readFileSync(imagePath);
const imageBuffer = Buffer.from(imageData);
// Call the Computer Vision API to tag the image
const result = await client.describeImageInStream(imageBuffer, { language: 'en' });
console.log(result);
if (result.tags && result.tags.length > 0) {
return result.tags.map(tag => tag.name);
} else {
return [];
}
}Despite the difficulties to get proper descriptions, we still need some code to make use of whatever data we have for now. Assuming the image name contains all we need to know, we changed the code as follows:
<Link href={image.downloadUrl} as="a" target="_blank">
<Image
src={image.thumbnailUrl}
borderRadius="lg"
className={styles.colorPrintImage}
title={image.title}
alt={image.alt} />
</Link>And when we generate the JSON, we populate the new attributes for title and alt. So the db.json looks like:
{
"downloadUrl": "images/a_witchs_cauldron_with_a_sweet_face_for_kids_coloring_pic_c5ecaf56-dcd1-44a7-8979-077f59092d1b.png",
"thumbnailUrl": "images/thumbnails/a_witchs_cauldron_with_a_sweet_face_for_kids_coloring_pic_c5ecaf56-dcd1-44a7-8979-077f59092d1b_thumb.png",
"alt": "a_witchs_cauldron_with_a_sweet_face_for_kids_coloring_pic",
"title": "a_witchs_cauldron_with_a_sweet_face_for_kids_coloring_pic"
}We used some regular expression to remove unwanted text. And it works!
Checkout www.usmalbilder.ch, we have now almost 200 images. Next stop: work on SEO!