Note: Outerbase is in beta so things are subject to change. Using the command mentioned in the article, I successfully communicated from the front end with leap AI on Sept 28, 2023.

Prompt for the cover image: "We held on to hope of better days coming, and when we did we were right. In psychedelic style with cosmic background. The image should have a sky with star"

I would like to express my sincere gratitude to Hashnode and Outerbase for providing this incredible opportunity. Participating in this event has been an enriching learning experience and a true privilege.

Also, the main intention me was to create a working Outerbase Leap AI integration Command so I have not put a lot of effort in the front-end application. The application is to just show how you can use those Commands to interact with a front end application.

What is Outerbase?

Outerbase is a modern, cloud-based database interface that enhances teamwork and efficiency.

It features EZQL, a natural language to SQL agent for easy data queries.

Commands to automate your workflows.

Dashboard to create graphs to visualize the database, to create graphs we need to use queries.

An SQLite database with 1GB of storage.

Ability to connect an existing Postgres, and MySql database.

It's suitable for developers for simplified database management, product teams for direct data access, and businesses for a comprehensive database view and cost reduction.

What is Leap AI?

Leap AI lets you build powerful AI workflows in minutes that scale to millions.

With Leap, you can generate AI images, music, and finetune models directly in our dashboard or add these features to your app with best-in-class APIs and SDKs.

What is the tech stack used?

When building an application, it’s important to carefully choose the technologies and tools that will be used in its development. In this section, I will take a closer look at the tech stack used to build Post iT and explore how each technology contributes to the functionality and user experience of the app:

• Next.js 13.5.2 /app directory as the React-based framework for building the application

• Outerbase Commands to communicate with Leap AI.

• TypeScript for adding static typing to JavaScript.

• Tailwind CSS is the utility-first CSS framework for styling the application.

• Next Themes for adding light and dark mode support

• Hashnode for providing this opportunity and platform to share and write great articles.

• Zod for client-side validation

• shadcn/ui for components

Problems faced

While creating this application I came across some difficulties but with the support from the Outerbase Team, I was able to solve them. Without their support, I would not have been able to complete this application since one of the problems I faced was with my Command to get the images, and with the Command I created nothing was getting returned even with Status 200 but Steve from Outerbase came to the rescue.

Understanding the application

This is a basic simple application showing the combined potential of using Outerbase with Leap AI.

In this application, users have the option to send a prompt to Leap AI from the front end using Outerbase Command, and then on the homepage, all the images that were successfully generated are displayed along with the prompt used to create that image.

So the way this application works is the user can send a request to generate an image. Internally when a request is sent it gets added to the queue to get processed which can take a couple of seconds and then if the image gets successfully generated then it is displayed on the Home page.

To make this application completely work for you clone it. My repo.

Then go to Outerbase and create the following mentioned Commands. The third one is completely optional and I have only put it here since while experimenting it worked.

If you have questions on how to create a Command in Outerbase check their official documentation, alternatively you can also refer to this article.

For creating the commands you will need an API key from Leap AI. They have a free tier with the ability to generate 100 images.

Once you are done creating those commands, in the cloned repo go to the main page.tsx and change the fetch URL to the one you created for the get request, and then go to app --> image-request --> request-form --> form.tsx and insert the Outerbase Command URL for the POST request you created.

Commands

Here are the list of command codes that I used:

1. Command to send a POST request:
   I have used a JS node

async function requestImage() {
    const url = 'https://api.tryleap.ai/api/v1/images/models/MODEL_NUMBER/inferences';
    const headers = {
        'Accept': 'application/json',
        'Authorization': 'Bearer YOUR_LEAP_AI_API_KEY',
        'Content-Type': 'application/json'
    };
    const data = {
        "prompt": {{request.body.prompt}},
        "negativePrompt": "asymmetric, watermarks",
        "steps": 50,
        "width": 1024,
        "height": 1024,
        "numberOfImages": 1,
        "promptStrength": 7,
        "seed": 4523184
    };

    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(data)
        });
        
        return response.json();
    } catch (error) {
        console.error(error);
        return "Error";
    }
}

URL and Headers:

• The URL points to the Leap AI image generation API endpoint for a specific model. The model number would need to be provided.

• The headers handle authentication, content type, and API response format:

  • The Authorization header passes the API key for authentication.

  • Accept specifies wanting a JSON response from the API.

  • Content-Type indicates the request body will be JSON.

Request Body Data:

• This contains all the parameters for configuring the image generation:

  • prompt - The text prompt describing what to generate an image of.

  • negativePrompt - Text to discourage certain things from appearing.

  • steps - The number of GENERIC SDL steps to run. More steps produces higher quality.

  • width/height - Size of the generated image(s) in pixels.

  • numberOfImages - Number of images to generate based on the prompt.

  • promptStrength - Controls how strictly the AI will adhere to the prompt.

  • seed - A random seed for consistent results across requests.

Making the API Request:

• The request is made using the fetch API with the POST method.

• The defined headers and JSON stringified request body are passed in the call.

• The response is parsed as JSON and returned.

Error Handling:

• try/catch is used for error handling.

• Any errors are logged to the console.

• On error it will return the "Error" string.

So in summary, the code handles:

• Constructing the API request with authentication and headers

• Building the request body with generation parameters

• Making the API call

• Parsing and returning the response

• Error handling

This Outerbase Command allows to programmatically generate images from text prompts using the Leap AI API.

1. Command to get all the Images

   I have used a JS node. Also, I am only returning images that have been successfully generated.

async function getImages() {
    try {
        const allImages = await fetch(`https://api.tryleap.ai/api/v1/images/models/MODEL_NUMBER/inferences?onlyFinished=true&pageSize=50`, {
            method: "GET",
            headers: {
                'authorization': 'Bearer API_KEY',
                'accept': 'application/json',
            },

        });
       return decoder.decode(await allImages.arrayBuffer() || new Uint8Array())
    } catch (error) {
        console.error(error);
        return "Error"
    }
}

1. Command to send a message to my discord server.

   Upon further experimenting I was able to do an integration to send a message to my Discord server with the server's webhook when someone requests an image.

   For this implementation, I just created a second node on my command to send a POST request (first command).

async function discordMessage() {
    const data = {
        "content": `someone requested an image generation`,
        "username": 'Outerbase-leap-integration'
    };
    const headers = {
        'Content-Type': 'application/json'
    };
    try {
        await fetch('YOUR_DISCORD_SERVER_WEBHOOK_URL', {
            method: 'POST',
            headers: headers,
            body: JSON.stringify(data)
        });
        return "OK";
    } catch (error) {
        console.error(error);
        return "Error";
    }
}

Verification:

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1695892015940/3b991460-64d6-4294-adda-66b7bbd3ac8e.png align="center")

Once you are done creating those commands, in the cloned repo go to the main page.tsx and change the fetch URL to the one you created for the get request, and then go to app --> image-request --> request-form --> form.tsx and insert the Outerbase Command URL for the POST request you created in the fetch request.

Public Repo Link

Github Repo: https://github.com/trace2798/leap-outerbase

Current Demo Deployment: https://leap-outerbase.vercel.app/
(I might un-deploy it in the future so I have provided the demo video.) (When you try to generate an image it may not be generated since there is a limit of 100 images that can be generated with the free API, considering that I am providing a Demo video)

Demo Video Link

Youtube Link: https://youtu.be/6QHYFYVJJt4

I hope this article helps you. If you have any questions, feel free to leave a comment and I will respond to it as soon as possible.

Happy Hacking !!!