Minting Singular Interactive Tokens on Tezos with AI assistance
I took part of an afternoon to see if I could create a simple showcase for some photos I took today of the melting snow. I used the OpenAI ChatGPT bot to generate code, did some HTML and JavaScript tweaks, and uploaded the zip file using teia. Here’s how I did it. End result can be viewed at https://objkt.com/asset/hicetnunc/805580 . (This article also published in collectible form on fxhash articles)
One of the coolest things about tezos is the built-in support for interactive HTML NFTs on most marketplaces. I am in love with interactive NFTs and I wondered if I could create an interactive version of two images I took today. The snow cover was phenomenally beautiful, and by afternoon, most had melted. I wanted to create a token that allowed the user to crossfade from one image to the other based on the mouse location.
Open AI ChatGPT Code Generation
The whole internet is in an uproar over Open AI’s Chat GPT bot, but it’s a remarkable tool that has many potential use cases. One of them is generating simple code. Here was my first query designed to generate the html file with some JavaScript:
write javascript code that fades between
two images controlled by the x mouse coordinate
This was amazing, and at least set up a framework that did only what I needed. When I tried the code there were areas I thought could use some modification, and I also wanted to add touchscreen support for mobile devices.
One of the coolest features of ChatGPT is its contextual memory of the chat.
I asked the bot to update the code it had generated:
The bot used programming best practices (gleaned from the web’s knowledge) and added an additional event listener for “touchmove” and abstracted the handler so both mouse moves and touch moves would be processed by the same “updateOpacity” function. Brilliant!
I made some further modifications to ensure it would display at the right aspect ratio, get rid of the scroll border, transition more smoothly, and I optimized the code a bit (using the realization that only one image has to change opacity). All that was left was to package and mint it.
Packaging HTML for Tezos
Hic et nunc pioneered the minting of an HTML-based token by uploading a zip file. To be honest, I have no idea what it does on the back-end. Possibly it unzips it and uploads it to IPFS as a folder, but I haven’t seen the code.
Because I primarily use Windows, I am always frustrated by having to open the folder in Windows Explorer and clicking around to create a zip archive. I wanted to be able to do it inside the Visual Studio Code terminal (or any command line). This was made easier by a quick web search and the discovery of the availability of the Unix “tar” command in later versions of Windows.
Did you know the command line “tar” on windows could create zip files?
I used the following the command in the terminal and voila.
tar -a -cf ArchiveName.zip .Minting the Token
I tried a few options that had been made defunct by transitions in the tezos ecosystem. I landed on teia.art. Under the hamburger menu resides “Mint OBJKT”.
(apparently I missed you can do this directly on objkt)
Then it’s a simple form fill for NFT description and issuing details.
A few tense moments later I was able to view the token on teia.
And beautifully rendered on objkt.
Finally…
As a part of my personal mission to expand the concept of what NFTs can be, this was a fun exercise in playing with a few new tools and sharing my delight at the natural phenomena just outside my window.
Thanks for reading along!
