I made this AI tool in 69 lines of code in single HTML file.

Hi Geeks!

In this blog, I am going to share with you my latest project - a simple AI tool that I built in just 69 lines of code within a single HTML file. With the growing popularity of Artificial Intelligence and its applications, I wanted to demonstrate how easy it is to create a basic AI tool with minimal effort and code. Whether you are a beginner in the field of AI or an experienced developer, I believe this blog will provide some useful insights and inspiration for your future AI projects.

Idea

The idea is simple, Find a closest suitable word meaning for a phrase given as input.

Tech

You gussed it right, I'm going to use OpenAI's model to find that word. And for the frontend, Bootstrap will be fine.

Let's CODE...

I will breakdown this coding part into 2 parts as javascript, frontend. So let's dive in.

Writing the fetch() API

First of all we're going to code an API that will take our prompt and return us a reponse. See code Below

const response = await fetch(url, {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                    'Authorization': 'Bearer $your-openai-api-key'
                },
                body: JSON.stringify({
                    "model": "text-davinci-003",
                    "prompt": `find one word for this phrase : ${that_phrase}`,
                    "temperature": 0.7,
                    "max_tokens": 256,
                    "top_p": 1,
                    "frequency_penalty": 0,
                    "presence_penalty": 0
            })

Now in prompt, You see that i've just sent a phrase and said that "find one word for this phrase" and OpenAI' model will do it's work and as a reponse we will get json.

That json will filled with lots of data that we don't need for this project so i've made it simple for you.

.then(response => response.json()).then(
                data => { 
                    let response = data['choices'][0]['text'];
                    console.log(response);
                    document.getElementById('reponse-display').innerText = "That word is : " + response
                 }
            )

Now it will extract that text reponse came from OpenAI and store it in reponse variable. And there's an element in the frontend that will show the text as well. that is why i wrote the line.

document.getElementById('reponse-display').innerText = "That word is : " + response

Also at the bottom i put a code to trigger this API as shown below.

<script>
    let button = document.getElementById('find-button');
        button.addEventListener('click', (() => {
            let user_input = document.getElementById('phraseInput').value
            generateWord('https://api.openai.com/v1/completions', user_input)
        }))
</script>

And that is all. Javascript part is done.

Frontend

As i said earlier, I will be using Bootstrap. And I'm not going to install it. Because it's a very small project, I will be using cdn links to get job done.

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <script defer src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
        crossorigin="anonymous"></script>

By pasting this code into the head tag of the HTML file, I can use the a power of Bootstrap. So let's goto bootstrap and get forms to make UI better.

I will copy form from Bootstap and edit according to the need. That is all. Below

<div>
        <div class="mb-3">
            <label for="phraseInput" class="form-label">Write your phrase below</label>
            <textarea type="text" class="form-control" id="phraseInput" aria-describedby="emailHelp" placeholder="For Eg. Walking in sunrise while listening to beautiful music."></textarea>
        </div>
        <button type="button" id="find-button" class="btn btn-primary">Find</button>
    </div>

Below this form I will place the h2 tag to display that response word.

<h2 style="margin-top: 2rem;" id="reponse-display">Click "Find" to find a word for your phrase</h2>

That's it. The Tool is ready to deploy and for the i see netlify is the easiest.

Final Thoughts

Altough, this tool is complete but i've got more ideas to implement into this so i will keep updating the app.

Also this project is open to all to contribute. So fork the repo and make changes, and i will push it.

Here's the app

Thank you!

Yo! i keep building exciting and interesting things around so don't forget to follow!.