Forem: Titus Efferian

How to use Stable Diffusion 3 to generate a similar image.

Titus Efferian — Mon, 22 Apr 2024 12:37:33 +0000

Stable Diffusion 3 from Stability AI has now been released and is available for public use. However, they currently only offer a REST API to test these models. Therefore, I tried using this on my local machine using Node.js code.



import fs from "node:fs";
import axios from "axios";
import FormData from "form-data";

const formData = {
  prompt: "prompt",
  output_format: "png",
  aspect_ratio: "16:9",
  seed: "645,508,968",
};

const response = await axios.postForm(
  `https://api.stability.ai/v2beta/stable-image/generate/sd3`,
  axios.toFormData(formData, new FormData()),
  {
    validateStatus: undefined,
    responseType: "arraybuffer",
    headers: {
      Authorization: `TOKEN`,
      Accept: "image/*",
    },
  },
);

if (response.status === 200) {
  fs.writeFileSync("./output.png", Buffer.from(response.data));
} else {
  throw new Error(`${response.status}: ${response.data.toString()}`);
}

If you prefer testing it without code, you can check and use your token wisely. Fireworks Playground

What is seed?

In Stable Diffusion, a seed is a number used to initialize the image generation process. It acts like a starting point for the AI to determine the random noise it uses to build the image. Here's a breakdown of how it works:

Random by default: If you don't specify a seed, Stable Diffusion will automatically choose a random seed number for each image generation. This results in completely different images every time you run the program with the same prompt.
Replicability with specific seed: However, if you set a specific seed value, Stable Diffusion will always use that same seed number to generate an image whenever you provide the same prompt along with that seed. This allows you to reproduce the same image again.
Making minor adjustments: You can use the same seed as a base and then tweak other settings in Stable Diffusion to see how they affect the image while keeping the overall content consistent.
Sharing results: Sharing the seed value along with your prompt allows others to recreate the exact image you generated, which can be useful for collaboration or tutorials.
Seed and image similarity: Interestingly, seeds that are close in value tend to generate images that share some similarities. This can be helpful if you're looking for variations on a theme. For example, using a seed value that's one number higher or lower than another seed might generate an image with a similar composition but with slight differences in details.

In summary, the seed value in Stable Diffusion acts like a recipe for generating random noise, which the AI then uses to build an image based on your text prompt. By controlling the seed, you can influence the reproducibility and explore variations of the generated images.

To generate a similar image, we need to utilize the seed parameter; using the same seed will produce similar images.

Here, I'm trying to create a prompt for a countryside scene across four seasons and also a picture with a weather ambience vibe, where the result is not exactly the same but produces a similar output in terms of how the landscape looks.

Generating Similar Image (4 different season)

seed -> 645,508,968

Spring Prompt

A countryside village with a clear blue sky, surrounded by sakura trees, in an anime art style.

Summer Prompt

A countryside village with a clear blue sky, surrounded by green trees, in an anime art style.

Autumn Prompt

A countryside village with a clear blue sky, surrounded by trees that are falling down in the autumn season, in an anime art style.

Winter Prompt

A countryside village with a clear blue sky, surrounded by a snow, in an anime art style.

Generating Similar Image (ambience vibes)

Seed -> 358,804,591

Default Prompt

In a dark alley illuminated by a neon light, the scene exudes Tokyo city vibes. It's foggy and ultra-realistic in 4K resolution. A cat, not facing the camera, sits in the middle of the alley street, with a bokeh focus on the cat. A vending machine is mounted on the wall.

Snow Ambience Prompt

In a dark alley illuminated by a neon light, the scene exudes Tokyo city vibes. It's foggy and ultra-realistic in 4K resolution, with a snowstorm and a thick layer of snow covering the street. A cat, not facing the camera, sits in the middle of the alley street, with a bokeh focus on the cat. A vending machine is mounted on the wall.

Rain Ambience Prompt

In a dark alley illuminated by a neon light, the scene exudes Tokyo city vibes. It's foggy and ultra-realistic in 4K resolution, with a heavy rainstorm creating a muddy environment. A cat, not facing the camera, sits in the middle of the alley street, sharply in focus with a bokeh effect. A vending machine is mounted on the wall.

Summary

While the output for each image is not exactly the same, it already has the same landscape structure if we use the same seeds and a similar prompt, with some customization added to create a new scene or ambience.

Resources

All the images here were generated by Stable Diffusion 3, including the cover image.

Stay Alive Using the Wake Lock API in Next.js

Titus Efferian — Mon, 15 Apr 2024 12:46:57 +0000

If we want to prevent our devices from going into a dim or sleep state, we can configure those settings from our screen options, depending on the OS we are using.

But how can we keep our screen always active using JavaScript? We can use the WakeLock API.

I am going to provide a simple explanation on how to implement the WakeLock API using the latest version of Next.js.

What is WakeLock?

WakeLock API provides a way to prevent devices from dimming or locking the screen when an application needs to keep running.

Implementation

Let’s try implementing the WakeLock API in Next.js. We are going to create a button that, when clicked, calls the WakeLock API and handles enabling and disabling the WakeLock.

Let's prepare the state to handle some enable/disable logic and to store the WakeLockSentinel.

  const [{ isWakeLocked, wakelock }, setWakeLock] = useState<{
    isWakeLocked: boolean;
    wakelock: WakeLockSentinel | null;
  }>({
    isWakeLocked: false,
    wakelock: null,
  });

Here, we aim to handle:

Feature detection: Only manage this onClick event for web browsers that already support the WakeLock API.
Release WakeLock: Handle disabling the WakeLock.
Enable WakeLock: Activate the WakeLock and store the WakeLockSentinel in the state.

const handleOnClick = useCallback(async () => {
  // feature detection
  if ("wakeLock" in navigator === false) {
    modals.openConfirmModal({
      title: "Wake lock not supported",
      children: <Text>Your browser does not support Wake Lock API.</Text>,
      labels: {
        cancel: "Close",
        confirm: "Ok",
      },
    });
    return;
  }
  // disable wakelock
  if (isWakeLocked) {
    wakelock?.release();
    setWakeLock((prev) => {
      return {
        ...prev,
        isWakeLocked: false,
      };
    });
    return;
  }
  // enable wakelock
  const temp = await navigator.wakeLock.request("screen");
  setWakeLock((prev) => {
    return {
      ...prev,
      isWakeLocked: true,
      wakelock: temp,
    };
  });
}, [isWakeLocked, wakelock]);

<Button
  size="xl"
  className={classes.control}
  variant="gradient"
  gradient={{
    from: isWakeLocked ? "red" : "blue",
    to: isWakeLocked ? "pink" : "cyan",
  }}
  onClick={handleOnClick}
>
  {isWakeLocked ? "Disable Wake Lock" : "Enable Wake Lock"}
</Button>;

Final Result

Resources

Morning Daily Routine Bot for Your Discord Server

Titus Efferian — Sat, 20 Jan 2024 13:47:30 +0000

Just after New Year's 2024, I suddenly had a simple idea to create a progress bar for every day until the 365th day of this year.

Currently, I am active on Discord in a server with my friends, and I want to try making a daily "good morning" message to greet all of my friends on Discord before we all start our day.

Here are the things:

I want to create a bot that will send a message every morning.
I don't want to pay any extra fees for the resources I will use.

I came up with using CircleCI for this, because CircleCI offers free tier automation.

Draw an image using nodejs canvas

To draw our custom image, we need to use
const Canvas = require('@napi-rs/canvas');.

First, let's try to draw the progress bar, as this is the most challenging part. The rest of the content is just text, and we need to adjust the coordinates.

// Coordinates and dimensions for the rectangle
const rectX = 50;
const rectY = canvas.height / 2 - 25;
const rectWidth = canvas.width - 100;
const rectHeight = 80;

// Draw a white rectangle
context.fillStyle = "white";
context.fillRect(rectX, rectY, rectWidth, rectHeight);

// Calculate the percentage of the year that has passed
const now = new Date();
const start = new Date(now.getFullYear(), 0, 0);
const diff = now - start;
const oneDay = 1000 * 60 * 60 * 24;
const day = Math.floor(diff / oneDay);
const yearLength = (new Date(now.getFullYear(), 11, 31) - start) / oneDay + 1; // Account for leap year
const progress = (day / yearLength) * rectWidth;

// Draw the green background color inside the rect, filling the calculated percentage of the width
context.fillStyle = "green";
context.fillRect(rectX, rectY, progress, rectHeight);

// Set up stroke style
context.strokeStyle = "black"; // Stroke color
context.lineWidth = 8; // Stroke width

// Draw the stroke on top of the filled rectangles
context.strokeRect(rectX, rectY, rectWidth, rectHeight);

And the result will look like this:

After that, it's just a matter of adding more text and positioning it in the right place.

// Set up the font style for the text
context.font = "bold 48px NotoSansJP";
context.fillStyle = "white";
context.textAlign = "center"; // This will align the text centrally
context.textBaseline = "middle"; // This will align the text in the middle of the baseline
const ohayouText = `おはようございました`;
const ohayouTextX = canvas.width / 2;
const ohayouTextY = rectY - 52;

// Draw the Japanese text
context.fillText(ohayouText, ohayouTextX, ohayouTextY);

// Set up the font style for the text
context.font = "bold 40px NotoSansJP";
context.fillStyle = "white";
context.textAlign = "center"; // This will align the text centrally
context.textBaseline = "middle"; // This will align the text in the middle of the baseline

// Calculate the position for the percentage text
const text = `${((day / yearLength) * 100).toFixed(2)}% HAS PASSED FOR THIS YEAR`;
const textX = canvas.width / 2; // This will center the text in the x-axis
const textY = rectY + rectHeight + 48; // This will position the text below the rectangle

// Draw the percentage text
context.fillText(text, textX, textY);

// Set up the font style for the Japanese text
context.font = "bold 28px NotoSansJP";
context.textAlign = "center"; // This will align the text centrally
context.textBaseline = "middle"; // This will align the text in the middle of the baseline
const keepItUpText = `今日も頑張りましょう。`;
const keepItUpTextX = canvas.width / 2;
const keepItUpTextY = textY + 48;

// Draw the Japanese text
context.fillText(keepItUpText, keepItUpTextX, keepItUpTextY);

And it will look like this:

Okay, now that we have finished drawing our custom image, it's time to send our image to the Discord channel using discord.js.

const {
  Client,
  Events,
  GatewayIntentBits,
  AttachmentBuilder,
} = require("discord.js");
const Canvas = require("@napi-rs/canvas");

const client = new Client({ intents: [GatewayIntentBits.Guilds] });

const TARGETED_CHANNEL = process.env.DISCORD_BOT_TARGETED_CHANNEL;
const token = process.env.DISCORD_TOKEN;

client.once(Events.ClientReady, async (readyClient) => {
  const canvas = Canvas.createCanvas(1000, 500);
  const context = canvas.getContext("2d");

  // ...Our previous canvas drawing code.

  try {
    // Convert canvas to buffer
    const buffer = canvas.toBuffer("image/png");
    // Create an attachment and send it
    const attachment = new AttachmentBuilder(buffer, { name: "progress.png" });
    readyClient.channels.cache
      .get(TARGETED_CHANNEL)
      .send({ files: [attachment] });
  } catch (error) {
    console.error("Error creating buffer:", error);
    readyClient.channels.cache
      .get(TARGETED_CHANNEL)
      .send("An error occurred while creating the image.");
  }
  client.destroy();
});

client.login(token);

CircleCI Configuration

Now, we are going to run our code inside the Node.js cimg container runtime.

version: 2.1
jobs:
  main_script:
    docker:
      - image: 'cimg/node:21.5.0'
    steps:
      - checkout
      - run:
          name: Install System Fonts
          command: |
            sudo apt-get update
            sudo apt-get install -y fontconfig
            sudo apt-get install -y libfontconfig1
      - run:
          name: Install Dependencies
          command: npm install
      - run:
          name: Run Node.js Script
          command: node main.js
workflows:
  version: 2
  build:
    jobs:
      - main_script

We need additional installations so our font can run inside the Docker container, as we are currently running our canvas inside a Docker container.

run:
  name: Install System Fonts
  command: |
    sudo apt-get update
    sudo apt-get install -y fontconfig
    sudo apt-get install -y libfontconfig1

Now, you just need to set up the scheduler using the CircleCI console.

Full Source Code
https://github.com/TitusEfferian/discord-cron-daily-ci