How to Build Your Own AI-Generated Instagram App

We’ve been living in a time where creativity is boxed in, cornered by limits, bound by the rules of an old game. A time where your canvas is pre-determined and your content is dictated by the whims of social platforms.

That time, my friend, is over.

We’re entering a world where the power of expression is truly in your hands. A world unchained, unfiltered — as expansive and diverse as the ideas buzzing in your mind. A world that whispers, “defy the norms, challenge the narrative.” A world where success isn’t about where you post your content, but the essence of the content itself.

In this world, your content isn’t confined by algorithms and your monetization isn’t constrained by platforms. You are in command.

The NFT space was the first glimpse into such a world. Now, we have a new companion in this journey. A catalyst, a liberator: AI.

We’re seeing that AI is not just an assistant, but an accomplice in your creative endeavors. Partners capable of building and crafting an Instagram for you, a canvas tailored to your taste, to your style, to your content. And the best part? You host it, you control it, you own it on Pinata.

In this blog post, I’ll walk you through an exciting journey of creating your own Instagram app using AI. I’ll utilize the capabilities of Midjourney to generate images, ChatGPT to generate code, and Pinata to host our resulting app. Let’s explore this new world.

Using Midjourney to Generate Images

Midjourney is an exceptional platform that allows you to generate creative and unique images. If you’re new to using Midjourney for generating images, check out this extensive tutorial which explains how to use the Midjourney Discord to prompt images. If you have at least made it to the Midjourney Discord and have prompted an image already, this tutorial will get you through.

For our images in this tutorial, I prompted Midjourney with:

Whatever images you end up selecting, you’ll want to upscale them before downloading. To upscale an image, simply select U1, U2, U3 or U4 of the images you want upscaled.

The result of upscaling:

Next, you’ll want to download the images from Discord to your device. To do so, click on the image and click Open in Browser in the bottom left. Once the images have been open in browser, right click Save Image As… to your device.

Once downloaded, you will want to upload them to Pinata to generate links to the images. You could use the links from Discord before you downloaded them to your device. However, this leaves the life of the image at the whims of Discord’s and Midjourney’s retention policies. To prevent dead links, upload to Pinata or another provider.

To upload to Pinata, go to https://pinata.cloud and create an account if you don’t have one. Once created, click Add Files in the upper right to upload your images. Upload them as single files.

Once uploaded, to open and grab the URLs of the images, simply click on the file name or the eye next to the file name.

Here is one of those links hosted through my personal Pinata dedicated gateway with custom domain:

https://kyletut.com/ipfs/QmS8WWdbaZud3kAj9npA9m19g4dxvWzhCLc3Pm7LKTaSse

We will be using these image URL links in our prompt of ChatGPT in the next section.

Using ChatGPT to Generate Code

With your images ready, it’s time to create your AI-generated Instagram app. For this, we’ll use OpenAI’s ChatGPT to generate the necessary HTML, CSS, and JavaScript code. Here are the steps:

Visit the OpenAI website and sign up for an account if you haven’t already. Navigate to the ChatGPT section. I used ChatGPT-4 for this tutorial.

Begin a conversation with ChatGPT, providing it with detailed instructions on what you want. For our example, I asked it to create a simple mobile webpage that displays five images, where each image page can be navigated to using swipe gestures as detailed below.

This will result in an output of code by ChatGPT. I’m still learning the best ways to prompt ChatGPT but have found simple prompts that are built upon over iterations to work best.

You will need to copy the code provided by ChatGPT and paste the code into a text editor on your desktop. I use Sublime Text. Once pasted in the editor, save it to your device.

Once saved as an html file, open the file with a browser. It should open in your browser like so:

Once open in your browser, you’ll want to right click Inspect the page. Once you’ve right clicked Inspect, be sure you put into mobile view. You can do so by clicking the Mobile/Tablet icon next to Elements.

Then, start playing with the functionality. After seeing the initial code in browser in mobile format, I gave ChatGPT suggestions.

ChatGPT addressed the issue and rebuilt the webpage. If ChatGPT stops generating code before it is finished, simply type “continue”.

It takes a bit of back and forth to get things right. Just keep prompting and adding suggestions:

Once you’re satisfied with the generated code, copy it and save it as an .html file on your device using your text editor. This file will be used in the final section of this tutorial.

If you just want to use the final code produced for this tutorial and make changes to it, see below. The easiest way to do this would be to copy it and paste it into ChatGPT and tell ChatGPT to swap out URLs and make specific changes you desire.

As you may have seen in the prompts above, the code below has some additional features beyond just an image carousel operated by swipe. I also made sure to add swipe up functionality to interact with a button menu and have the last page linking out to pinata.cloud as the end of the carousel. Again, be sure to test and learn and have fun with it!

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SpaceCows</title>
    
    <style>
        /* Ensure the images take up the full height of the viewport */
        body, html, .swiper-container, .swiper-slide {
            height: 100%;
            width: 100%;
            margin: 0;
            padding: 0;
            overflow: hidden;
        }

        /* Center the images in the slides */
        .swiper-slide {
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
        }

        /* Make the images fill their container while maintaining their aspect ratio */
        .swiper-slide img {
            object-fit: cover;
            width: 100%;
            height: 100%;
            position: absolute;
            z-index: 1;
        }

        /* Style the menu */
        .menu {
            position: absolute;
            bottom: 0;
            width: 100%;
            display: flex;
            justify-content: center;
            padding: 10px;
            box-sizing: border-box;
            transform: translateY(100%);
            transition: transform 0.3s ease-in-out;
            background: rgba(109, 87, 255, 0.0);
            z-index: 2;
        }

        /* Style the buttons */
        .menu a {
            display: inline-block;
            margin: 0 10px;
            padding: 10px 20px;
            background: #6D57ff;
            color: #ffffff;
            border-radius: 20px;
            font-family: 'Arial';
            text-decoration: none;
        }

    </style>

    
    <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css" />
</head>
<body>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide">
                <img src="https://kyletut.com/ipfs/QmbuiG5uQ52cQ3YQYo2aXMazrU2YQc4iFbKoh6P3cohQEF" alt="">
                <div class="menu">
                    <a href="https://twitter.com/KyleTut">Twitter</a>
                    <a href="https://www.linkedin.com/in/kyletut/">LinkedIn</a>
                    <a href="https://medium.com/@kyletut">Medium</a>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="https://kyletut.com/ipfs/QmXzfX469VxHCcwVSsYy98DoDceFzseB8NDg5gBh2AoSGq" alt="">
                <div class="menu">
                    <a href="https://media0.giphy.com/media/3o6gDWzmAzrpi5DQU8/giphy.gif?cid=ecf05e47jdkqxo42ihbzwxwaqt2n4fkll8kqlore6ove3l8x&ep=v1_gifs_search&rid=giphy.gif&ct=g">Buy</a>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="https://kyletut.com/ipfs/QmfZ3NaBd3awa7PHvyNpjofKg1Sk5HtuN5nzXsWR2isyna" alt="">
                <div class="menu">
                    <a href="https://media0.giphy.com/media/3o6gDWzmAzrpi5DQU8/giphy.gif?cid=ecf05e47jdkqxo42ihbzwxwaqt2n4fkll8kqlore6ove3l8x&ep=v1_gifs_search&rid=giphy.gif&ct=g">Buy</a>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="https://kyletut.com/ipfs/QmS8WWdbaZud3kAj9npA9m19g4dxvWzhCLc3Pm7LKTaSse" alt="">
                <div class="menu">
                    <a href="https://media0.giphy.com/media/3o6gDWzmAzrpi5DQU8/giphy.gif?cid=ecf05e47jdkqxo42ihbzwxwaqt2n4fkll8kqlore6ove3l8x&ep=v1_gifs_search&rid=giphy.gif&ct=g">Buy</a>
                </div>
            </div>
            <div class="swiper-slide">
                <img src="https://kyletut.com/ipfs/QmTrupRvziCckEJherb6qVT4r5eBpditfZpycrDb7AK6LA" alt="">
                <div class="menu">
                    <a href="https://pinata.cloud">Pinata</a>
                </div>
            </div>
        </div>
    </div>

    
    <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js"></script>
    <script>
        // Initialize Swiper
          var swiper = new Swiper('.swiper-container', {
            direction: 'horizontal',
            loop: false,
            on: {
                slideChange: function () {
                    // On last slide, redirect to another page
                    if (this.isEnd) {
                        setTimeout(function() {
                            window.location.href = 'https://pinata.cloud';
                        }, 1500);  // Delay of 1.5 seconds
                    }
                },
            },
        });

        // Initialize Hammer.js
        var hammertime = new Hammer(swiper.el);

        // Handle swipeup and swipedown
        hammertime.get('swipe').set({ direction: Hammer.DIRECTION_VERTICAL });

        hammertime.on('swipeup', function(ev) {
            document.querySelector('.swiper-slide-active .menu').style.transform = 'translateY(0)';
        });

        hammertime.on('swipedown', function(ev) {
            document.querySelector('.swiper-slide-active .menu').style.transform = 'translateY(100%)';
        });

    </script>
</body>
</html>

Upload the Code to Pinata

With the images and webpage ready, we’ll now upload the code to Pinata. Here’s how:

Click on the Add Files button in the upper right and upload the HTML file you created in the previous sections.

After the upload process completes, Pinata will provide you with a URL for your HTML file.

Visit this URL in any mobile web browser to view your AI-generated Instagram with swipeable images. This tutorial only shows how to create a mobile optimized webpage. If you wish to make it desktop friendly, you will need to prompt ChatGPT to do so.

And that’s it! You’ve successfully created a mobile webpage with swipeable images using Midjourney, ChatGPT, and Pinata.

Check out my AI-generated Instagram:

Mobile-friendly only: https://kyletut.com/ipfs/QmPCiDhPuJLsFdZ6o8w3PraBiYqTRGAvkFeLsKCC545vqh

And, yes, the majority of this blog was written with AI.

Happy Pinning!