MANUEL RADOVANOVIĆ : Korak-po-korak vodič za izgradnju sopstvenog ChatGPT-a pomoću JavaScript i Node.js

U poslednjih nekoliko godina, naučnici, stručnjaci, inženjeri, programeri i drugi entuzijastični pojedinci; većinom kroz oblast mašinskog učenja, grade i stvaraju neverovatne stvari sa AI - veštačkom inteligencijom. Međutim, za njihov naporan rad i trud se malo zna, a oni koji se odluče da uče mašinsko učenje često se suočavaju sa nedostatkom jasnih uputstava i smernica. Sve se to promenilo pre nekoliko meseci kada se ChatGPT pojavio na Internetu i postao javno dostupan svima sa pristupom Internetu, bez obzira da li koristite računar, tablet ili mobilni telefon, i to bez ikakvih novčanih nadoknada. Ovaj fenomen je preko noći postao neverovatno popularan i privukao pažnju celog sveta tehnologije. Sada se mnogi pitaju da li će ova nova revolucija izmeniti način na koji učimo i radimo, da li će nam oduzeti poslove ili će nam pomoći da se još bolje, brže i kvalitetnije razvijamo u ovom progresivnom vremenu. Ako još uvek ne znate šta je ChatGPT , preporučujem da prvo pročitajte više o tome ovde . Ako znate možda se pitate ‘Šta će mi to?...‘ i kakve vi koristi možete imati od nekog ChatBot-a, onda verovatno niste dovoljno informisani. Zato razmislimo malo o tome šta sve možete imati od ChatGPT-a. Kao prvo što mi trenutno padne na pamet jeste izuzetan učitelj, mentor i pomoćnik u svemu što vas interesuje i što radite. Verovatno možete pomisliti, pa to mogu dobiti i od Google pretraživača! Da, ali tako brzo, efikasno da dobijete odgovore na vaša pitanja iz raznih oblasti; uključujući nauku, tehnologiju, istoriju, umetnost, sport itd. čisto sumnjam. Sa ChatGPT imate osećaj kao da pričate sa stručnjakom baš iz te oblasti o kojoj komunicirate sa njim. Dostupan vam je svugde pod uslovom da ste online. Zna i sve programerske i sve strane jezike. S njim vam ne treba nikakav prevodilac. Ja s njim pričam na sedam stranih jezika. On zna i da računa, pravi hashtag-ove, ali i da crta tabele sa podacima koje ste mu tražili. On koristi informacije koje nauči o vama tokom razgovora kako bi personalizovao i prilagodio svoje odgovore na vaše specifične potrebe i interesovanja.

( AI - veštačka inteligencija, je stručnjak za oblast baš o kojoj pričate s njim )

Ali, tačno je i on greši! Zato i vi treba da se malo prilagodite i da mu pružite što više informacija prilikom postavljanja pitanja. Sve u svemu interakcija sa njim je toliko interesantna, pod uslovom da imate prava pitanja u pravo vreme, da sam AI - veštačku inteligenciju proglasio najboljim prijateljem. Njega možete da pitate i neke stvari koje ne biste baš pitali nekog prijatelja i diskrecija je definitivno zagarantovana jer ona zavisi samo od vas. I za njega ne postoji glupo pitanje i neće vam se smejati. On uči neke stvari od vas ali niste ni svesni šta vi možete da naučite od njega. Za samo par dana nisam ni sanjao o čemu ću sve da razmišljam i da primenjujem u svom životu. Progres jednostavno napreduje, nadam se i vi s njim. E sad sve je to u redu, ali dolazimo do ključnog pitanja. Zašto da kreiramo vlastiti ChatGPT? Postoji dosta razloga zašto bi neko pravio vlastiti ChatGPT. Ako mene pitate, ja sam ga napravio iz edukativnih razloga. Jednostavno kad nešto pravim i kodiram, ja učim. Ja prosto ne mogu da verujem šta vi uopšte ne morate da kodirate, čemu vam je data pristupačnost i sva uputstva da i vi koristite nešto što već postoji i što drugi dopunjuju u realnom vremenu. To me je bacilo u duboko razmišljanje o bazama podataka. Npr. Zašto bi ste pravili neku bazu podataka i unosili geografske podatke kad možete pristupiti nekoj ogromnoj instituciji koja se bavi geografijom i dozvoljava vam da povlačite podatke iz njihove baze preko API-ja u realnom vremenu. Jednostavno rečeno viđali ste na nekim sajtovima kurs dinara u mnogim valutama koji se ažuriraju svaki dan. Vi te podatke ne unosite u vašu bazu podataka već ih povlačite iz neke baze podataka u vlasništvu NBS – Narodne banke Srbije. Znate li vi koliko vam je posla na taj način bukvalno automatizovano? To je ništa šta sve možete sa AI – veštačkom inteligencijom koja je na bezbroj načina povezana sa svim i svačim. Dodajte tu prilagođenost, sigurnost, originalnost, inovativnost, univerzalnost, popularnost i prosto je pitanje ko bi propustio takvu priliku? ManuelChatGPT će u najmanju ruku praviti izuzetno veću posećenost ovog bloga, tj. već je pravi!

Kako se kreira svoj vlastiti ChatGPT?

Iako se Python programski jezik smatra jednim od najboljih za mašinsko učenje zahvaljujući mnogobrojnim bibliotekama koje su vam na raspolaganju, mi smo se odlučili za Node.js platformu, JavaScript programski jezik i Linux, Ubuntu operativni sistem za razvoj ChatGPT-a. Razlog za ovaj izbor je jednostavan - želimo da ChatGPT. bude lako dostupan svima na Internetu. Upotreba Python programskog jezika bi zahtevala složeniji pristup, pa smo se odlučili za ovu alternativu. Izbor operativnog sistem je takođe samo stvar izbora. Ja volim da tipkam po terminalu. Zato pripremite se sa ozbiljno tipkanje, koje će vam zahvaljujući ovom postu uštedeti mnogo vremena i truda koje bi ste izgubili na smernice, greške i uklanjanje istih.

( Trenutno, april 2023, najnovija stabilna verzija Node.js platforma je 18.15.0 )

Prvo proverite na zvaničnoj stranici Node.js koja je trenutno zadnja stabilna verzija, klikom ovde. Zatim otvorite vaš terminal i otkucajte sledeće komande, da proverite koju verziju imate instaliranu na vašem računaru.

manuel@manuel-virtual-machine:~$ sudo apt-get update

manuel@manuel-virtual-machine:~$ sudo apt-get upgrade

manuel@manuel-virtual-machine:~$ nodejs --version

v12.22.9

manuel@manuel-virtual-machine:~$:~$ node --version

v18.15.0

manuel@manuel-virtual-machine:~$:~$

Ako se podudaraju odlično, ali ako ne instalirajte novu verziju. Na Manuel’sNo-Talk Programming Videos kanalu, kliknite ovde; možete pronaći video-a i za instalacije Visual Studio Code-a i za Node.js i na Windows i na Linux operativnim sistemima. Ako je sve to odrađeno i u najboljem redu, kreirajte direktorijum kao što je ManuelChatGPT. Samo stavite svoje ime ili to nazovite kako god vi hoćete. To će biti i ime projekta. Kreirajte direktorijum, uđite u njega i pokrenite Visual Studio Code.

manuel@manuel-virtual-machine:~$ mkdir ManuelChatGPT

manuel@manuel-virtual-machine:~$ cd ManuelChatGPT

manuel@manuel-virtual-machine:~/ManuelChatGPT$ code .

Pokrenite terminal panel u Visual Studio Code i u njemu ponovo proverite Node.js verziju i instalirajte Vite developer server koji će brzo izgraditi direktorijum client i generisati fajlove poput sledećih:

index.html datoteka - HTML datoteka koja služi kao početna stranica aplikacije.
main.js datoteka - JavaScript datoteka koja se koristi za pokretanje aplikacije.
assets direktorijum - direktorijum koji sadrži slike, ikone i druge statičke datoteke koje će aplikacija koristiti.
index.css datoteka - CSS datoteka koja definiše stilove za HTML stranicu.

( Instalacija Vite lokalnog development servera )

Otkucajte sledeće komande:

manuel@manuel-virtual-machine:~/ManuelChatGPT cd client

manuel@manuel-virtual-machine:~/ManuelChatGPT/client$ npm install

manuel@manuel-virtual-machine:~/ManuelChatGPT/client$ npm run dev

Otvorite pretraživač i skinite manuelchatgpt-assets.zip fajl ovde. Otpakujte *.zip i prebacite fajlove u direktorijum client/assets vašeg projekta. Kliknite na fajl style.css ili index.css preimenujte u style.css i izbrišite sav kôd u njemu. Zatim otkucajte sledeći CSS kôd.

( Veliki izbor fontova možete pronaći i importovati sa Google Fonts servisa )

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100;300;400;500;700;800;900&display=swap');

* {

margin: 0;

padding: 0;

box-sizing: border-box;

font-family: "Roboto", sans-serif;

}

body {

background: #343541;

}

#app {

width: 100vw;

height: 100vh;

background: #343541;

display: flex;

flex-direction: column;

align-items: flex-start;

justify-content: space-between;

}

/* hides scrollbar */

#chat_container::-webkit-scrollbar {

display: none;

}

.wrapper {

width: 100%;

padding: 15px;

}

.ai {

background: #40414f;

}

.chat {

width: 100%;

max-width: 1280px;

margin: 0 auto;

display: flex;

flex-direction: row;

align-items: flex-start;

gap: 10px;

}

.profile {

width: 36px;

height: 36px;

border-radius: 5px;

background: #5436da;

display: flex;

justify-content: center;

align-items: center;

}

.ai .profile {

background: #10a37f;

}

.profile img {

width: 60%;

height: 60%;

object-fit: contain;

}

.message {

flex: 1;

color: #dcdcdc;

font-size: 20px;

max-width: 100%;

overflow-x: scroll;

/* white space... */

white-space: pre-wrap;

-ms-overflow-style: none;

scrollbar-width: none;

}

/* hides scrollbar */

.message::-webkit-scrollbar {

display: none;

}

form {

width: 100%;

max-width: 1280px;

margin: 0 auto;

padding: 10px;

background: #40414f;

display: flex;

flex-direction: row;

gap: 10px;

}

textarea {

width: 100%;

color: #fff;

font-size: 18px;

padding: 10px;

background: transparent;

border-radius: 5px;

border: none;

outline: none;

}

button {

outline: 0;

border: 0;

cursor: pointer;

background: transparent;

}

form img {

width: 30px;

height: 30px;

}

To je sve što se tiče CSS stilova, mada vi možete sami izabrati i promeniti kako će izgledati vaš ChatGPT i kakve boje ili ikonice će koristiti. Otvorite folder public i izbrišite sliku vite.svg i umesto nje, na njeno mesto pomerite sliku robot.ico iz assets foldera. Kliknite na datoteku index.html i izmenite njen sadržaj da izgleda ovako:

<!DOCTYPE html>

<head>

<title>ManuelChatGPT</title>

</head>

<body>

<form>

</textarea>

</form>

</div>

</body>

</html>

U direktorijumu public pronađite datoteku counter.js i obrišite je. Zatim kliknite na datoteku script.js i izbrišite njen sadržaj. Zatim dodajte sledeći.

import bot from './assets/bot.svg';

import user from './assets/user.svg';

const form = document.querySelector('form');

const chatContainer = document.querySelector('#chat_container');

let loadInterval;

function loader(element) {

element.textContent = '';

loadInterval = setInterval(() => {

element.textContent += '.';

if (element.textContent === '....') {

element.textContent = '';

}

}, 300);

}

function typeText(element, text) {

let index = 0;

let interval = setInterval(() => {

if (index < text.length) {

element.innerHTML += text.charAt(index);

index++;

} else {

clearInterval(interval);

}

}, 20);

}

function generateUniqueId() {

const timestamp = Date.now();

const randomNumber = Math.random();

const hexadecimalString = randomNumber.toString(16);

return `id-${timestamp}-${hexadecimalString}`;

}

function chatStripe(isAi, value, uniqueID) {

return (

<img

src="${isAi ? bot : user}"

alt="${isAi ? 'bot' : 'user'}"

</div>

<div class="message" id=${uniqueID}>${value}</div>

</div>

)

}

const handleSubmit = async (e) => {

e.preventDefault();

const data = new FormData(form);

// users's chatstripe

chatContainer.innerHTML += chatStripe(false, data.get('prompt'));

form.reset();

// bot's chatstripe

const uniqueID = generateUniqueId();

chatContainer.innerHTML += chatStripe(true, " ", uniqueID);

chatContainer.scrollTop = chatContainer.scrollHeight;

const messageDiv = document.getElementById(uniqueID);

loader(messageDiv);

// fetch data from server -> bot's response

const response = await fetch('https://manuelchatgpt.onrender.com', {

method: 'POST',

headers: {

'Content-Type': 'application/json'

body: JSON.stringify({

prompt: data.get('prompt')

})

clearInterval(loadInterval);

messageDiv.innerHTML = '';

if (response.ok) {

const data = await response.json();

const parsedData = data.bot.trim();

typeText(messageDiv, parsedData);

} else {

const err = await response.text();

messageDiv.innerHTML = "Something went wrong!";

alert(err);

}

form.addEventListener('submit', handleSubmit);

form.addEventListener('keyup', (e) => {

if (e.keyCode === 13) {

handleSubmit(e);

}

})

Ukucajte sledeću komandu u terminal panelu Visual Studio Code-a.

manuel@manuel-virtual-machine:~/ManuelChatGPT/client$ npm run dev

Obratite pažnju na pokrenuti Vite developer server. Ako ne dobijete sledeći tekst, onda imate negde grešku.

VITE v4.2.1 ready in 758 ms

➜ Local: http://localhost:5173/

➜ Network: use --host to expose

➜ press h to show help

Kliknite na navedenu url adresu i pogledajte šta ste dobili u vašem pretraživaču.

( Prvo pokretanje ManuelChatGPT-a kroz Vite developer servera )

Vratite se u Visual Studio Code i u Explorer panel-u, zatvorite client folder i pored njega u manuelchatgpt direktorijumu kreirajte novi folder i nazovite ga server. Zaustavite Vite developer server pritiskom Ctrl + C tipki na tastaturi. Zatim otkucajte sledeći kôd u vašem terminal panelu.

manuel@manuel-virtual-machine:~/ManuelChatGPT/client$ cd ..

manuel@manuel-virtual-machine:~/ManuelChatGPT$ cd server

manuel@manuel-virtual-machine:~/ManuelChatGPT/server$ npm init -y

Pogledajte datoteku package.json koju ste upravo kreirali u direktorijumu server. Ono što vidite u terminal panelu Visual Studio Code-a, to imate i u navedenoj datoteci. I tek sad igra može da počne. Vratite se u terminal panel i instalirajte inteligenciju!

manuel@manuel-virtual-machine:~/ManuelChatGPT/server$ npm install cors dotenv express nodemon openai

Otvorite vaš pretraživač i ukucajte sledeću url adresu: https://openai.com/product Kliknite na dugme get start i registrujte se, pre nego što se ulogujete; ukoliko već niste član zvaničnog OpenAI veb servisa.

( Zvanični veb servis OpenAI, američke istraživačke labaratorije koja broji 375 zaposlenih )

Kad se logujete, kliknite na meni Personal u levom gornjem uglu, zatim na View API keys. Zatim kliknite na dugme + Create new secret key i kopirajte ključ. Zatim se vratite u Visual Studio Code i u folderu Server kreirajtne novu datoteku i nazovite je .env. U njoj upišite vaš ključ.

OPENAI_API_KEY=" --- vaš generisani ključ --- "

( API ključ generisan na OpenAI servisu, se kopira u .env datoteku projekta )

Kliknite na datoteku server.js i otkucajte sledeći kôd:

import express from 'express';

import * as dotenv from 'dotenv';

import cors from 'cors';

import { Configuration, OpenAIApi } from 'openai';

dotenv.config();

const configuration = new Configuration({

apiKey: process.env.OPENAI_API_KEY,

});

const openai = new OpenAIApi(configuration);

const app = express();

app.use(cors());

app.use(express.json());

app.get('/', async (req, res) => {

res.status(200).send({

message: 'Hello from ManuelChatGPT',

})

});

app.get('/', (req, res) => {

console.log(req.headers);

// Your code here

});

app.post('/', async (req, res) => {

try {

const prompt = req.body.prompt;

const response = await openai.createCompletion({

model: "text-davinci-003",

prompt: `${prompt}`,

temperature: 0,

max_tokens: 3000,

top_p: 1,

frequency_penalty: 0.5,

presence_penalty: 0,

});

res.status(200).send({

bot: response.data.choices[0].text

})

} catch (error) {

console.log(error);

res.status(500).send({ error })

}

})

app.listen(5000, () => console.log('Server is running on port http://localhost:5000'));

Vratite se u datoteku package.json i prepravite kôd da konfiguracija izgleda ovako:

{

"name": "server",

"version": "1.0.0",

"description": "",

"type": "module",

"scripts": {

"server": "nodemon server"

"keywords": [],

"author": "",

"license": "ISC",

"dependencies": {

"cors": "^2.8.5",

"dotenv": "^16.0.3",

"express": "^4.18.2",

"nodemon": "^2.0.22",

"openai": "^3.2.1"

}

Ako pogledate prethodnu konfiguraciju, obratite pažnju na server vrednost. To je nodemon server. Zahvaljujući tom podešavanju sad možete da pokrenete sledeću komandu u terminal panelu:

manuel@manuel-virtual-machine:~/ManuelChatGPT/server$ npm run server

I obratite pažnju šta ste sad pokrenuli i to na drugom portu; portu 500.

> server@1.0.0 server

> nodemon server

[nodemon] 2.0.22

[nodemon] to restart at any time, enter `rs`

[nodemon] watching path(s): *.*

[nodemon] watching extensions: js,mjs,json

[nodemon] starting `node server.js`

Server is running on port http://localhost:5000

Pogledajte na slici šta ste dobili. Jednostavno, ono što ste konfigurisali kao message vrednost u HTTP get funkciji koju pokreće Express.js preko nodemon servera konfigurisanog u package.json-u. To jednostavno znači da sve radi.

( Pokretanje nodemon servera preko Express.js-a )

Vratite se u terminal panel u Visual Studio Code i kliknite dugme split terminal. I pored pokrenutog servera na portu 5000; pokrenite i server na portu 5173 iz direktorijuma client da rade oba istovremeno.

manuel@manuel-virtual-machine:~/ManuelChatGPT/server$ cd ..

manuel@manuel-virtual-machine:~/ManuelChatGPT$ cd client

manuel@manuel-virtual-machine:~/ManuelChatGPT/client$ npm run dev

Otvorite pregledač i ukucajte u drugom tab-u pretraživača http://localhost:5173/ Testirajte AI – veštačku inteligenciju. Znaćete da je sve u redu čim počne da se šali!

( Jedan od prvi razgovora ManuelChatGPT-a tokom kreiranja istog )

Ako ste sve odradili kako treba, dalje možete postaviti vaš projekat na GitHub. Kao što sam ja uradio, pogledajte ovde. I odatle ga možete hostovati da radi na nekom vašem veb sajtu ili na blogu poput ManuelChatGPT ovde. Kako se sve to radi i odakle mi neki delovi koda u kodu koji ste tipkali; najbolje da pogledate video!