Building an AI Search Engine with ZeroLM

In the quest to provide better, more context-aware search experiences, Large Language Models (LLMs) like GPT and Bard have paved the way for a new generation of search interfaces. Enter ZeroLM, an interface to these powerful language models, revolutionizing how we extract and interpret data.

In this tutorial, we will harness ZeroLM to build a simple, user-friendly web search interface. Unlike traditional search engines that offer a plethora of links, our version will use ZeroLM to generate precise, human-like responses to user queries.

Using Node.js for our server setup and basic HTML/CSS for the interface, we'll keep this walkthrough accessible even to beginners. Let's dive in and explore the future of search, powered by ZeroLM!

Prerequisites

To follow this tutorial, you will need:

Basic knowledge of JavaScript, HTML, and CSS.
Node.js and npm installed on your local machine.
An API Key from ZeroLM.

Step 1: Setting Up Your Node.js Server

First, let's create a new folder on your local machine where we'll build our project. We'll name this folder zerolm-search.
Inside this folder, create a new file named app.js. This file will be our main server file.
Install the necessary npm packages. We will need express for creating the server, body-parser to parse incoming requests, and node-fetch to send requests to ZeroLM. npm install express body-parser node-fetch

npm install express body-parser node-fetch dotenv

Now, open app.js and write the following code to set up a basic express server:


const express = require('express');
const bodyParser = require('body-parser');

require('dotenv').config();

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: false }));

app.listen(3000, function() {
    console.log('Server started on port 3000');
}

Step 2: Connecting to ZeroLM

Now, let's create a POST endpoint in our app.js file that will take the user's search query and send it to ZeroLM:


app.post('/search', async function(req, res) {
    const prompt = req.body.query;

		// Use dynamic import for node-fetch
    const fetch = (await import('node-fetch')).default;

    const response = await fetch("<https://zero-api.civai.co/get_answer>", {
        headers: {
            Authorization: "Bearer " + process.env.ZEROLM_API_KEY,
            "Content-Type": "application/json"
        },
        method: "POST",
        body: JSON.stringify({ prompt, llm: "bard" }) // llm supports bard, gpt3, gpt4
    });
    const data = await response.json();
    res.json(data.response);
});

Note: create .env file with below content:

ZEROLM_API_KEY=<YOUR_API_KEY>

replace <YOUR_API_KEY> with your ZeroLM API Key.

Step 3: Creating the Front-End

In the zerolm-search directory, create a new public folder. Inside the public folder, create two new files: index.html and main.css.
Open index.html and add the following HTML code:


<!DOCTYPE html>
<html>
<head>
    <title>ZeroLM Search</title>
    <link rel="stylesheet" type="text/css" href="main.css">
</head>
<body>
    <div class="search-container">
        <h1>ZeroLM Search</h1>
        <form id="search-form">
            <input type="text" id="search-input" placeholder="Search..." required>
            <button type="submit">Search</button>
        </form>
        <p id="search-result"></p>
    </div>
    <script src="<https://code.jquery.com/jquery-3.6.0.min.js>"></script>
    <script src="main.js"></script>
</body>
</html>

Next, let's add some basic styling to our search interface. Open main.css and add the following CSS code:


body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f5f5f5;
}

.search-container {
    text-align: center;
}

Now, let's add JavaScript to handle the form submission. In the public folder, create a new file named main.js and add the following JavaScript code:


$(document).ready(function() {
    $('#search-form').on('submit', function(e) {
        e.preventDefault();
        const query = $('#search-input').val();
        $.post('/search', { query }, function(data) {
            $('#search-result').text(data);
        });
    });
});

Step 4: Serving the Front-End

Finally, add this line of code to app.js to serve our front-end files:


app.use(express.static('public'));

Conclusion

Congratulations, you now have a basic AI-powered web search interface that uses the ZeroLM API! Remember that while this is a simplified example, ZeroLM can be used for more complex queries and in diverse applications.

You can start the server by typing node app.js in your terminal, and visit http://localhost:3000 in your browser to see the search interface in action. Try typing different queries and see how ZeroLM responds!

This concludes our tutorial on how to create a simple Google-like search interface using the ZeroLM API. As you've seen, with just a few lines of code, we were able to create a functional search engine powered by AI.

If you'd like to dive deeper, the complete source code for this tutorial is available for you to download and experiment with on our GitHub repository: ZeroLM Search Engine Github Repo

Furthermore, to see this concept taken further, you can also try out our live AI-powered search engine called Clair, available at clair.civai.co.

This takes the foundational concepts we've explored here and expands upon them to create a more fully-featured search engine experience.

Remember, this is just the beginning. The true power of AI and large language models like GPT-3, Bard, GPT-4, is how you can adapt them to meet your specific needs and challenges. Whether you're creating a search engine, developing a customer service chatbot, or anything in between, ZeroLM provides a powerful, flexible API interface to help you achieve your goals.

We hope this tutorial has inspired you to start thinking about the possibilities for integrating AI into your own projects. Happy coding!