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.
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.
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.
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.
@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>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/robot.ico"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>ManuelChatGPT</title>
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div id="app">
<div id="chat_container"></div>
<form>
<textarea name="prompt" rows="1" cols="1" placeholder="Ask ManuelChatGPT...">
</textarea>
<button type="submit"><img src="assets/send.svg"></button>
</form>
</div>
<script type="module" src="/script.js"></script>
</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 (
`
<div class="wrapper
${isAi && 'ai'}">
<div
class="chat">
<div
class="profile">
<img
src="${isAi ? bot : user}"
alt="${isAi ? 'bot' :
'user'}"
/>
</div>
<div
class="message" id=${uniqueID}>${value}</div>
</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
➜ 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.
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.
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č --- "
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.
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!
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!
Nema komentara:
Objavi komentar