Forem: Esteban

I created my own NFT collection of Pixel Art RPG avatars

Esteban — Thu, 28 Sep 2023 10:10:21 +0000

When I was a kid I remember my first videogame was Super Mario Land. The moment I started playing and seeing the character sprite moving and jumping I was completely hooked. I don't remember how old I was, but I do know I was spending hours playing until the batteries died. I wouldn't even realize the sun went down and I'd often end up playing in complete darkness.

From there, I started exploring all kinds of video games and genres for the GameBoy Pocket. From Donkey Kong, Kirby's Dream Land, Bomberman, and Wario Land to the Pokemon series: Red, Blue, Yellow, Silver, and Gold.

Later on, I had a Playstation (PSX) and discovered RPG games through the Final Fantasy series. The whole endeavor of following the adventure of the main character, leveling up, building your team, and improving your gear and skillset over time had a grip over me like nothing else. I was particularly drawn to JRPG titles. Those leaned more toward heavy grinding and a deeper storyline, as well as a particular aesthetic, brighter, more colorful, and upbeat.

Although graphics had improved significantly, I still had a predilection for the 16 and 32-bit games with an isometric perspective. Examples of such games were Final Fantasy VI, Breath of Fire IV, Grandia, and Suikoden 2 to name a few, but I could go on with many more.

This love for the pixel art world has stayed constant over time. I'd follow and sporadically play new pixel-art JRPGs, I also used to print pixel-art posters for decoration. A very good friend of mine even did a papercraft model of Vivi Ornitier from Final Fantasy IX because he knew I was amazed at the character:

Finally, when I was a recent graduate from college, I wanted to do something fun and flashy for my personal portfolio to stand out while looking for a job, so I implemented an interactive portfolio using Phaser.js. The idea was to make it look like a JRPG game level with a character that could move around and interact with different objects representing each section of a CV. It wasn't of much quality but it was really fun 🕺.

Generative AI and NFTs

I have been getting increasingly interested for a while in blockchain, crypto, and more recently generative AIs.

The appearance of text-to-image AI generators blew my mind. First I came to know about OpenAI's DALL-E which I played with for a bit, especially simple prompts with different art styles to marvel at how a penguin or a flower could be portrayed through Impressionism, Realism, or Renaissance.

I then played for a bit with Stable Diffusion and it was mind-bending. I even tried to run it locally on my Macbook and almost get cooked Macbook.

The level of detail in the images that were generated by these models made me realize we are at the beginning of a computing revolution. I've primarily dabbled with text-to-image models and tried image-to-image a couple of times, but I can only imagine the possibilities for creators, artists, and designers. It is a huge powerful tool. Moreover, a friend of mine showed me the inpainting plugin for Adobe Photoshop (which he now uses daily), and I was taken aback.

Non-Fungible Tokens or NFTs are based on the ERC-21 standard. They represent unique, non-fungible tokens. As opposed to an ERC-20 token in the Ethereum blockchain, these can be traded but each of them represents their own entity. The common example of a fungible token is any 5€ bill that can be swapped for any other and they represent the same value. NFTs each have a unique identifier, that along with custom metadata makes the token identifiable and traceable across the blockchain transaction history. Patrick Collins explains the whole ballgame quite nicely in his YouTube channel:

NFTs can have some metadata associated with them. It can be an image, a gif, a video, or even a piece of ownership.

They started out initially focused on digital art, and ever since, plenty of artists, creators, and hobbyists, have jumped on the NFT wagon. Very well-known NFT art collections are the Bored Ape Yacht Club and the CoolCats. Nowadays you can invest, trade, and exchange NFTs in multiple marketplaces like OpenSea, Rarible, and SuperRare.

Some other uses for NFTs are ticketing, virtual real estate or even tokenizing actual real estate.

Motivation

I started scouting OpenSea for collections with the JRPG, RPG, and Pixel Art themes and didn't really find much.

Then I thought to myself that it would be cool to have a collection of NFTs that evoked those characters from the JRPG games I love. And, for them to be generated using a combination of classes, traits, attributes, and gear so that no two characters would be the same. Getting that collectibles vibe on.

Creating the NFT Collection

I set out to create 64 different images by combining three different sets: character classes, color schemas, and weapons. I decided to keep it very simple.

I asked ChatGPT to generate 20 different prompts to feed the AI model using the prompt:

I want to generate a bunch of prompts that will be used to generate images using machine learning. To do that, I will give you a list of classes, a list of colors, and a list of weapons. I want you to write 20 prompts that I can use to generate images by combining these groups of words. The classes are barbarian, druid, wizard, paladin, priest, warlock, and shaman. The colors are blue, red, green, yellow, pink, white, and black. The weapons are scepter, axe, sword, two swords, bow, hammer.

The result of executing the prompt is a list of character descriptions featuring the class, color scheme, and weapon of choice. Here are a couple of examples of the generated output:

A shaman with tribal tattoos, wearing a headdress of feathers and bones, holding a mystical green gem.
A barbarian warrior swinging a massive hammer, covered in yellow war paint, ready for battle.

Descriptive, succinct, and to the point. On to the next step.

The next step in line is to feed each prompt to a text-to-image AI generator and generate 4 images per prompt to get some variability within the same description. For the A shaman with tribal tattoos, wearing a headdress of feathers and bones, holding a mystical green gem. prompt, here is an example of a generated image:

The final step was to create a collection in OpenSea with the generated characters. I chose this platform as 98% of the NFT traffic goes through their portal, and listing NFTs comes at no cost for the winter using lazy minting.

I created each of the NFTs manually, this was a proof-of-concept so I didn't want to dive into the particularities of programmatically automating the image generation and listing on the marketplace. Eventually, I want to learn more about how to streamline a similar workflow of image generation > minting NFT > announce the thing somewhere.

Additionally, I assigned each NFT with different Traits based on the class, color scheme, alternative color scheme, weapon, and alternative weapon.

I set a price of 0.11 ETH (~174 USD) per image at the time of writing.

Finally, what was left was to publish the collection, and then Role Pixel Guild was born.

What's next

I want to keep learning more about generative AI and automate the whole process of generating different prompts based on different cues, then feeding those prompts to other models I found in HuggingFace that look amazing, and listing the images I like the most as NFTs.

All in all, although there was no coding involved in this exercise, I very much enjoyed the process of getting to a handful of images I liked and publishing them. If you enjoy JRPGs, pixel art, and the likes as much as myself, consider purchasing one of the NFTs and throw me a message in private if you have any ideas or projects we could work on, I feel the new wave of AI is just starting.

Have fun!

Validating data in PHP objects using magic methods

Esteban — Fri, 22 Sep 2023 11:20:38 +0000

I've been working with PHP lately and when deserializing a model I wanted to have a generic way of adding validations for its properties, so I wondered whether there was a way for hooking into an object's properties while getting/setting them, much like the Proxy object in javascript.

I found that magic methods in PHP would do the trick. Magic methods overwrite the object's default functionality when the event that triggers them happens. The most commonly used is the __construct() method, the constructor for the object.

Using the __get and __set magic methods, we can hook into the property when getting & setting it and run our custom logic. Hence, creating a bunch of validators to verify we're not assigning them any forbidden values:

class User {
   public $allowedProperties = [ 'firstName', 'email' ];    
   private $firstName;
   private $email;

   public function __set($propertyName, $value) {
      if (!in_array($propertyName, $this->allowedProperties)) {
         throw new Exception('Property: ' . $propertyName . ' not supported');
      }

      $validator = $propertyName . 'Validator';
        $isPropertyValueValid = $this->$validator($value);
        if (!$isPropertyValueValid) {
            throw new Exception('Value: ' . $value . ' for: ' . $propertyName);
        }
        $this->$propertyName = $value;
    }

    public function __get($propertyName) {
        if (!in_array($propertyName, $this->allowedProperties)) {
            throw new Exception('Property: ' . $propertyName . ' not supported');
        }
        return $this->$propertyName;
    }

    private function firstNameValidator($value) {
        return is_string($value) && strlen($value) < 25;
    }

    private function emailValidator($value) {
        return filter_var($value, FILTER_VALIDATE_EMAIL);
    }
}


$user = new User();
$user->firstName = 'Ahhhh I am longer than 25 characters nooooooo'; // throw Exception
$user->email = 'esteban@gmail.com';

It is important to point out that by using this strategy we'll lose any static analysis we have, so it's a choice to make.

Have fun!

Twilio Conversations client resilient setup

Esteban — Mon, 08 Aug 2022 20:10:00 +0000

With Twilio Conversations SDK 2.0 release there is a new way of creating the client and setting up the event handlers. As stated in the documentation and contrary to previous versions, when the client is created in order to guarantee it has been properly initialized we must wait for the stateChanged event to fire and check the passed state to verify the initialization was completed:

import { Client } from '@twilio/conversations';

const client = new Client(token);

// Before you use the client, subscribe to the `'stateChanged'` event and wait 
// for the `'initialized'` state to be reported.
client.on('stateChanged', (state) => {
  if (state === 'initialized') {
    // Use the client
  }
}

What if we have a momentarily unreliable connection? Simply by changing the network quality in Chrome's network tab to Slow the Twilio Client refused to initialize and that was it.

In order to make the process a bit more resilient I wrote a function that wraps the initialization event inside a promise that resolves when the client is successfully initialized and tries to recreate the client using an exponential backoff promise otherwise.

//wait is a helper function that will wait a given number of seconds.
const wait = (ms) => new Promise((res) => setTimeout(res, ms));

const createTwilioClientWithRetries = (token, depth = 0) => {
    return new Promise((resolve, reject) => {
        //Create a new Twilio Client for the token.
        const twilioClient = new Client(token);

        twilioClient.on('stateChanged', async (state) => {
            try {
                if (state === 'initialized') {
                    resolve(twilioClient);
                }
                if (state === 'failed') {
                    if (depth > 5) {
                        throw new Error("Too many retries");
                    }
                    else {
                        dispatch(setError({
                            type: TWILIO_TOKEN_FAILURE,
                            message: "Twilio Token Error"
                        }));
                        await wait(2 ** depth * 10);
                        return await createTwilioClientWithRetries(token, depth + 1);
                    }
                }
            } catch (err) {
                reject("Too many retries");
            }
        });         
    });
}

Initially I tried to shut the client down with await twilioClient.shutdown() before calling the next iteration but it would prevent me from creating any further instances of the client afterwards for some reason.

Have fun!

Permalink: https://www.estebansastre.com/create-twilio-client-join-conversation/

Send emails asynchronously with Sendgrid and node.js, AWS SQS, AWS Lambda

Esteban — Fri, 01 Jul 2022 07:50:45 +0000

Recently in TheGoodPsy we experienced an uptick in the number of signups & concurrent users.
This is generally a good thing, an increase in traffic means that a project is gaining traction (or a DDoS attack but we surely hope it wasn't that and that kind of attacks would generate way more traffic than the numbers we were experiencing).

Our backend is in node.js and we deploy in the AWS ecosystem. As part of our user flow, we use email both for notifications as a response to a user action (transactional) and some custom marketing automation. Sendgrid is our service of choice for those matters.

Initially in order to send emails the approach was quite simple, send an email to a user using a given template whenever we saw the need to:

const sendCustomMailTemplate = async (templateId, toMail, data) => {
    const msg = {
      to: toMail,
      from: fromMail,
      templateId: templateId,
      dynamicTemplateData: {
        ...data
      },
    };
    await sgMail.send(msg);
}

This approach worked fine at the beginning. The problem with it though is that sending an email is synchronous and blocks the main thread. If enough emails are needed to be sent at the same time we'd run into problems.

A possible solution for this would be to use native node.js Worker Threads and offload the email sending into them. That would be initially possible but those workers live in memory and we'd lose on features like persist, retry on failures, batch processing of multiple emails, logging, etc... Or at least we'd need to implement them manually.

Eventually, we settled for a simpler solution using AWS SQS queues.

By using an external queue to process email sending jobs, we'd offload all the email processing & sending outside of the backend leaving it free to do other work.

The architecture of the new system is simple:

The backend enqueues messages in SQS and a lambda function consumes them and is in charge of processing them and sending the emails. As simple as that. This situation can be leveraged with lambda because one of the triggers that lambdas integrate with are messages being added to a SQS queue, so all the heavy lifting is done for us, nice.

Now, we can manually create both the SQS queue and the lambda function through the AWS console and play around with their multiple parameters, but the Serverless framework wraps around all that complexity and provides developers with a bunch of tooling to automate and easily create serverless applications. It even has a Node SQS worker template that we can use to serve as a starting point.

The template utilizes the lift plugin to leverage AWS CDK and expand Serverless' functions to avoid all the yak-shaving at the beginning. One can always tweak the parameters afterward, be it from the serverless.yml configuration file or directly from the AWS console.

So to have a working SQS/Lambda pair with the trigger already configured, we create the function:

$ serverless create --template aws-nodejs --name email-consumer

We install the necessary packages:

$ npm install --save @sendgrid/client @sendgrid/mail serverless serverless-lift

And we tweak the serverless.yml configuration to use serverless-lift and set Sendgrid's credentials:

service: email-sender

frameworkVersion: '3'

provider:
  name: aws
  stage: <your stage>
  region: <your_region>
  runtime: nodejs14.x

constructs:
  email-queue:
    type: queue
    worker:
      handler: handler.consumer
      environment:
        SENDGRID_API_KEY: <SENDGRID_API_KEY>

plugins:
  - serverless-lift

When we hit deploy, Serverless will take care of creating the resources:

serverless deploy



Deploying worker-project to stage dev (us-east-1)

✔ Service deployed to stack worker-project-dev (175s)

functions:
  worker: worker-dev-jobsWorker (167 kB)
jobs: https://sqs.us-east-1.amazonaws.com/000000000000/email-sender

The URL in jobs is your SQS URL. What's left is to program the consumer logic in the lambda and substitute calls to sendCustomMailTemplate() in the backend by our new enqueuing logic: enqueueMail().

The consumer:

const setupMailClient = async () => {
    sgMail.setApiKey(API_KEY);
    sgClient.setApiKey(API_KEY);
    sgClient.setDefaultHeader("Content-Type", "application/json");
}

const sendCustomMailTemplate = async ({
    ... we have the same sync email sending logic here ...
}


const consumer = async (event) => {
    //Setup the mail client with the Sendgrid API key
    await setupMailClient();

    //Go through all records (1 by default, change in serverless.yml)
    //extract info about the email and send it calling Sendgrid.
    const promises = event.Records.map(async record => {
        const { body, messageAttributes } = record;

        const parsedBody = JSON.parse(body);

        const {
            templateId,
            toMail,
            data
        } = parsedBody;

        await sendCustomMailTemplate({
            templateId,
            toMail,
            data
        });
    });

    await Promise.all(promises);
}

And in the backend, the enqueueMail() logic:

const enqueueMail = async ({ templateId, toMail, data }) => {
    const AWS_SQS_EMAIL_QUEUE_URL = "YOUR_SQS_URL>";

    const messageBody = JSON.stringify({
        templateId,
        toMail,
        data
    });

    const messageParams = {
        // Remove DelaySeconds parameter and value for FIFO queues
        // DelaySeconds: 10,
        MessageAttributes: {},
        MessageBody: messageBody,
        QueueUrl: AWS_SQS_EMAIL_QUEUE_URL
    };

    const promise = new Promise(
        (resolve, reject) => 
            SQS.sendMessage(messageParams, (err, data) => err ? 
                reject(err) : 
                resolve(data)
            )
    );
    return promise;
}

And that's it!
Have fun!

Permalink: https://www.estebansastre.com/send-emails-node-sendgrid-aws-sqs-lambda/

Show Google Calendar events in Fullcalendar with React

Esteban — Thu, 30 Jun 2022 21:21:19 +0000

For convenience, Psychologists in TheGoodPsy are able to connect to their Google Calendar to see their events along with the appointments local to the platform in order to prevent clashes between the two. It is quite easy to add an appointment with a patient in one calendar and propose an appointment in the other without noticing.

Google Identity Services became the new authentication flow enforced by Google, forcing newly created credentials to use it by default without allowing to fallback to Google Sign-In Platform.

While there are some tutorials about how to connect a React application to Google Calendar using the old method, I couldn't find almost any tutorial about the specific flow we needed to implement, so I decided to write my own.

In order to keep the article brief, I won't be explaining how to create credentials & configure the OAuth screen here, there is plenty of documentation about how to do it.

A couple details about our user flow:

We are using the User Code Model because we need to handle ourselves refreshing the authorization tokens from the backend.
We are using the Popup mode for the OAuth permission screen, so the user stays in the app instead of being redirected.

Sign-In to Google

We make use of the @react-oauth/google' library to configure the auth flow, ux_mode, and scopes for getting the authorization token that we will then use to ask Google for the authentication token to make API calls.

It all starts with a simple button:

<GoogleButton
    id='google-calendar-connection'
    label='Connect Google Calendar'
    onClick={googleLogin}
/>

The googleLogin function opens the OAuth screen and calls the backend passing the authorization token to get the access token:

const getGoogleAccessToken = async (authorizationCode) => {
    const response = await axios.post(
        `/api/google/accesstoken`, 
        { authorizationCode }
    );

    if (response.data.access_token) {
        localStorage.setItem("google_access_token", JSON.stringify(response.data.access_token));
    }

    if (response.data.expiry_date) {
        localStorage.setItem("google_access_token_expiry_date", JSON.stringify(response.data.expiry_date));
    }

    return response.data;  
}


const fetchGoogleAccessToken = async (tokenResponse) => {
    const accessToken = await getGoogleAccessToken(tokenResponse.code);
    if (localStorage.getItem("google_access_token")) {
        setGoogleCalendarSync(true);
    }
    return accessToken;
}


const googleLogin = useGoogleLogin({
    onSuccess: fetchGoogleAccessToken,
    onError: error => console.log(error),
    flow: 'auth-code',
    ux_mode: 'popup',
    scope: GOOGLE_CALENDAR_SCOPES
});

The API endpoint that handles the getGoogleAccessToken() function call:

const getAccessToken = async (req, res) => {
    const { authorizationCode } = req.body;
    const user = req.user;

    // Get access and refresh tokens (if access_type is offline)
    let { tokens } = await oauth2Client.getToken(authorizationCode);
    oauth2Client.setCredentials(tokens);

    let userGoogleAuthentication;
    userGoogleAuthentication = await user.getGoogleAuthentication();

    //If the user has already a google authentication, update the refresh token,
    //otherwise create a google authentication object and associate it to the user.
    if (userGoogleAuthentication) {
        await userGoogleAuthentication.update({ refresh_token: tokens.refresh_token });
    }
    else {
        userGoogleAuthentication =
            await GoogleAuthentication.create({
                refresh_token: tokens.refresh_token,
                userId: user.id
            });
    }

    return res.status(200).json({ ...tokens });
}

Now we have the access & refresh tokens in the browser's localStorage as google_access_token and google_access_token_expiry_date respectively. What's left is to fetch the Google Calendar events as part of the function that fetches events for the events property of FullCalendar. Baked into this bit is the functionality to refresh the token in the backend if the current one has expired.

This is the frontend part:

const refreshGoogleAccessToken = async () => {
    const response = await axios.post(
        `/api/google/refreshtoken`,
        {}
    );

    if (response.data.access_token) {
        localStorage.setItem("google_access_token", JSON.stringify(response.data.access_token));
    }

    if (response.data.expiry_date) {
        localStorage.setItem("google_access_token_expiry_date", JSON.stringify(response.data.expiry_date));
    }

    return response.data;
}

//API call to the Google Calendar endpoint.
const googleEventsFetch = async ({ token, from, until }) => {
    const response = await fetch(
        `${GOOGLE_CALENDAR_EVENTS_API_URL}/?key=${GOOGLE_CALENDAR_API_KEY}&orderBy=startTime&singleEvents=true&timeMin=${from.toISOString()}&timeMax=${until.toISOString()}`,
        {
            headers: {
                Authorization: `Bearer ${token}`,
            },
        }
    );
    return response;
}

//Small wrapper around functionality
const getGoogleEvents = async ({ token, from, until }) => {
    if (from && until) {
        const response = await googleEventsFetch({ token, from, until });

        if (response.status === OK) {
            const data = await response.json();
            return {
                status: response.status,
                items: data.items
            }
        }
        else {
            return {
                status: response.status,
                items: []
            }
        }
    }
    else return [];
}


// Load events from Google Calendar between 2 dates.
const loadGoogleCalendarEvents = useCallback(async (from, until) => {
    const googleAccessToken = localStorage.getItem("google_access_token");
    const googleAccessTokenExpirationDate = localStorage.getItem("google_access_token_expiry_date");

    //If the's an expiration date in the offline storage.
    if (googleAccessTokenExpirationDate && googleAccessToken) {
        const googleAccesTokenExpirationDateParsed = parseInt(googleAccessTokenExpirationDate);
        const gAccesTokenExpDateMoment = moment(googleAccesTokenExpirationDateParsed);
        const currentDateMoment = moment();

        //If the token has expired.
        if (currentDateMoment.isAfter(gAccesTokenExpDateMoment)) {
            localStorage.removeItem("google_access_token_expiry_date");
            localStorage.removeItem("google_access_token");

            //Get a new access token & expiry_date with the refresh token.
            const { access_token: newAccessToken} = await refreshGoogleAccessToken();

            if (newAccessToken) {
                const newResponse = await getGoogleEvents({
                    token: newAccessToken,
                    from,
                    until
                });

                if (newResponse.status === OK) {
                    setGoogleCalendarSync(true);
                    return newResponse.items;
                }
                else {
                    setGoogleCalendarSync(false);
                    return [];
                }           
            }
        }
        // If the token hasn't expired yet.
        else {
            const response = await getGoogleEvents({
                token: googleAccessToken,
                from,
                until
            });

            if (response.status === OK) {
                return response.items;
            }
            else { //Token expired
                setGoogleCalendarSync(false);
            }
        }
    }
    else {
        return [];
    }
}, []);


const fetchEvents = async (fetchInfo, successCallback) => {    
    const googleEvents = await loadGoogleCalendarEvents(fetchInfo.start, fetchInfo.end);
    //...Merging googleEvents with local events..
}

<FullCalendar
    ...attributes...
    events={fetchEvents} // alternatively, use the `events` setting to fetch from a feed
/>

And finally, the API endpoint asks for a refresh token. Refresh tokens are stored for each user in the DB.

const refreshToken = async (req, res) => {
    const user = req.user;
    const userGoogleAuthentication = await user.getGoogleAuthentication();

    if (userGoogleAuthentication) {
        const tokenResponse = await oauth2Client.refreshToken(userGoogleAuthentication.refresh_token);
        return res.status(200).json({ ...tokenResponse.tokens });
    }
    else {
        return res.sendStatus(500);
    }
}

That's it, hopefully, it is helpful for someone else.
Have fun!

Permalink: https://www.estebansastre.com/google-calendar-events-fullcalendar-react/