কিভাবে chatgpt ওয়েব সাইট তৈরি করবেন । How To Create ChatGpt Website Bangla
প্রিয় বন্ধুরা,
আশা করি সকলেই ভালো আছেন। আমিও অনেক অনেক ভালই আছি। আজকে আমি আপনাদের সামনে যে টিউন নিয়ে হাজির হয়েছি। আশা করি আপনি এ রকমি একটি টিউন হয়ত খুজতেছেন।
.png "Open Ai ChatGpt") |
Open Ai ChatGpt |
তবে Open Ai ChatGpt Website তৈরি করার আগে এর সম্পর্কে খুটিনাটি না জানলে কেমন হয়ে যায় না।তাই খুব সংক্ষিপ্ত আকারে ChatGpt সম্পর্কে আপনাদের কিছু বলার ক্ষুদ্র প্রচেষ্টা। আশা করি সকলেই সাথেই থাকবেন।
# ChatGPT কি ?
ChatGPT হল OpenAI এর পণ্য, যা GPT-3.5 ব্যবহার করে তৈরি করা। GPT (Generative Pre-trained Transformer) হল একটি কনভলিউশনাল নিউরাল নেটওয়ার্ক আধারিত ভাষা মডেল। এটি প্রশিক্ষিত হয় বেশ বড় পরিমাণের টেক্সট ডেটা দিয়ে, যা ব্যবহার করে সৃজনশীলভাবে সন্ধান করে সঠিক উত্তর দেয়। GPT-3.5 হল GPT মডেলের একটি আধুনিক সংস্করণ, যা তার পূর্ববর্তী সংস্করণের উন্নত করে নিয়েছে। GPT-3.5-এ অনেক বেশি টেক্সট ডেটা ব্যবহার করা হয়েছে এবং এর পারফরমেন্স গুলো আরও উন্নত করা হয়েছে। ChatGPT একটি চ্যাট ইন্টারফেসে ব্যবহার করা যায়, যাতে ব্যবহারকারীরা প্রশ্ন করতে পারেন এবং ভালো উত্তর পায়।
# Chatgpt কিভাবে ব্যবহার করবো ?
ChatGPT ব্যবহার করা খুবই সহজ। আপনি নিচের ধাপগুলি অনুসরণ করে ব্যবহার শুরু করতে পারেনঃ-
১। প্রথমেই, আপনার একাউন্টে লগ ইন করুন বা সাইটে নিবন্ধন করুন যদি প্রয়োজন হয়।
.২। এরপর, সাধারণ প্রশ্ন বা যে কোনও বিষয়ের উপর আপনি প্রশ্ন লিখুন এবং "Enter" চাপুন।
.৩। ChatGPT আপনাকে উত্তর দেবে যাতে আপনি চ্যাট সংক্রান্ত আরও প্রশ্ন করতে পারেন। আপনি প্রশ্নের পরিবর্তে "human" লিখলেন, যদি আপনি একটি মানুষের সাহায্য প্রয়োজন হয়।
.৪। চ্যাট সমাপ্ত করতে চাইলে, আপনি প্রশ্নের পরিবর্তে "exit" লিখতে পারেন।
আপনি ChatGPT ব্যবহার করে বিভিন্ন ধরনের প্রশ্ন করতে পারেন, উদাহরণস্বরূপঃ-
"পায়থনে 'for' লুপ কিভাবে কাজ করে ?"
"ডাটাবেস সার্ভার গুগল ক্লাউড প্ল্যাটফর্মে কিভাবে স্থাপন করতে পারি ?"
এইভাবে ChatGPT আপনাকে সাহায্য করতে পারবে প্রকৃত ভাষায় বিষয়ের উপর আলোচনা করে। তবে মনে রাখবেন, ChatGPT নতুন তথ্য বা পরিসংখ্যানের জন্য অনুপ্রাণিত নয়, কারণ এর জ্ঞান কাট অগ্রাধিকার সঙ্গে জুড়ে থাকে (knowledge cutoff)।
# Chatgpt চালুকারী প্রতিষ্ঠান
Chatgpt চালুকারী প্রতিষ্ঠান হল Open Ai. ChatGPT একটি "Chat-based Generative Pre-trained Transformer" এবং GPT হ'ল "Generative Pre-trained Transformer" থেকে উদ্ভুত। GPT-3.5 আমার জন্য নির্দিষ্ট প্রশিক্ষিত মডেল, যা OpenAI দ্বারা তৈরি করা হয়েছে। এটি একটি কম্পিউটার মডেল যা সাধারণ মানুষের মধ্যে চ্যাট করতে পারে এবং সংযোগ স্থাপন করতে পারে এমন বিভিন্ন প্রতিষ্ঠানগুলির জন্য ব্যবহার করা হয়।
GPT-3.5 অত্র মডেলের সাথে আমি যুক্ত করা হয়েছেন, যা আপনাদের সাথে চ্যাট করে ঘটনা নির্দিষ্ট জ্ঞান এবং সহায়তা প্রদান করতে পারে। এটি আমার কাছে 2021 সালের মাঝামাঝি তথ্য ধারণ করে, অনেক বিষয়ে জ্ঞানও করে, তবে এই তারিখের পরবর্তী ঘটনাবলী বা নতুন তথ্য জানে না। তাই, যদি আপনার প্রশ্ন নতুন বিষয়ে বা সময়কালের পরের তথ্যের উপর ভিত্তি করে, তবে ChatGpt সম্ভাব্যতঃ সেটি জানতে পারবো না।
# ChatGpt Api Key
"ChatGPT API key" হল একটি অ্যাপ্লিকেশন প্রোগ্রামিং ইন্টারফেস (API) কি যেখানে আপনি OpenAI-র সরঞ্জাম GPT-3.5 ব্যবহার করতে পারেন। একটি API key সরবরাহ করা হয় যার মাধ্যমে আপনি ChatGPT API-কে অ্যাক্সেস করতে পারেন। API key আপনার অ্যাকাউন্টের সাথে সংযুক্ত থাকে এবং অ্যাপ্লিকেশন ডেভেলপমেন্টে ব্যবহার করা হয়।
আপনি API key-টি OpenAI হিসাবে পেতে পারেন লগইন করে ওপেনএআই.কম ওয়েবসাইটে। একবার আপনি লগইন করে থাকেন, আপনি "APIs" সেকশনে যেতে পারেন এবং সেখানে আপনার API key পেতে পারেন অথবা নতুন একটি তৈরি করতে পারেন।
আপনি কোডের মধ্যে API key-টি ব্যবহার করে অনুরোধ পাঠাতে পারেন API কল করতে। এটি সহজভাবে আপনাকে ChatGPT-র সাথে ইন্টারঅ্যাকশন করতে দেয় এবং মেশিন লার্নিং মডেলের প্রশিক্ষন করতে সাহায্য করে।
# How To Create ChatGpt Website Bangla
তো বন্ধুরা এখন আমরা একটি ChatGpt Web Page তৈরি করব ChatGpt Api Key ব্যবহার করে। নিচের তিনটি ফাইল দেওয়া হলঃ-
১। Html
২। Css And
৩। Javascript
# এইস টি এম এল ফাইল
<!DOCTYPE html>
<!-- Coding By CodingNepal - www.codingnepalweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>ChatGPT Clone in JavaScript | SMsudipBD.Com</title>
<link rel="stylesheet" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- Google Fonts Link For Icons -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200" />
<script src="script.js" defer></script>
</head>
<body>
<!-- Chats container -->
<div class="chat-container"></div>
<!-- Typing container -->
<div class="typing-container">
<div class="typing-content">
<div class="typing-textarea">
<textarea id="chat-input" spellcheck="false" placeholder="Enter a prompt here" required></textarea>
<span id="send-btn" class="material-symbols-rounded">send</span>
</div>
<div class="typing-controls">
<span id="theme-btn" class="material-symbols-rounded">light_mode</span>
<span id="delete-btn" class="material-symbols-rounded">delete</span>
</div>
</div>
</body>
</html>
# সি এস এস ফাইল
/* Import Google font - Poppins */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
:root {
--text-color: #FFFFFF;
--icon-color: #ACACBE;
--icon-hover-bg: #5b5e71;
--placeholder-color: #dcdcdc;
--outgoing-chat-bg: #343541;
--incoming-chat-bg: #444654;
--outgoing-chat-border: #343541;
--incoming-chat-border: #444654;
}
.light-mode {
--text-color: #343541;
--icon-color: #a9a9bc;
--icon-hover-bg: #f1f1f3;
--placeholder-color: #6c6c6c;
--outgoing-chat-bg: #FFFFFF;
--incoming-chat-bg: #F7F7F8;
--outgoing-chat-border: #FFFFFF;
--incoming-chat-border: #D9D9E3;
}
body {
background: var(--outgoing-chat-bg);
}
/* Chats container styling */
.chat-container {
overflow-y: auto;
max-height: 100vh;
padding-bottom: 150px;
}
:where(.chat-container, textarea)::-webkit-scrollbar {
width: 6px;
}
:where(.chat-container, textarea)::-webkit-scrollbar-track {
background: var(--incoming-chat-bg);
border-radius: 25px;
}
:where(.chat-container, textarea)::-webkit-scrollbar-thumb {
background: var(--icon-color);
border-radius: 25px;
}
.default-text {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
height: 70vh;
padding: 0 10px;
text-align: center;
color: var(--text-color);
}
.default-text h1 {
font-size: 3.3rem;
}
.default-text p {
margin-top: 10px;
font-size: 1.1rem;
}
.chat-container .chat {
padding: 25px 10px;
display: flex;
justify-content: center;
color: var(--text-color);
}
.chat-container .chat.outgoing {
background: var(--outgoing-chat-bg);
border: 1px solid var(--outgoing-chat-border);
}
.chat-container .chat.incoming {
background: var(--incoming-chat-bg);
border: 1px solid var(--incoming-chat-border);
}
.chat .chat-content {
display: flex;
max-width: 1200px;
width: 100%;
align-items: flex-start;
justify-content: space-between;
}
span.material-symbols-rounded {
user-select: none;
cursor: pointer;
}
.chat .chat-content span {
cursor: pointer;
font-size: 1.3rem;
color: var(--icon-color);
visibility: hidden;
}
.chat:hover .chat-content:not(:has(.typing-animation), :has(.error)) span {
visibility: visible;
}
.chat .chat-details {
display: flex;
align-items: center;
}
.chat .chat-details img {
width: 35px;
height: 35px;
align-self: flex-start;
object-fit: cover;
border-radius: 2px;
}
.chat .chat-details p {
white-space: pre-wrap;
font-size: 1.05rem;
padding: 0 50px 0 25px;
color: var(--text-color);
word-break: break-word;
}
.chat .chat-details p.error {
color: #e55865;
}
.chat .typing-animation {
padding-left: 25px;
display: inline-flex;
}
.typing-animation .typing-dot {
height: 7px;
width: 7px;
border-radius: 50%;
margin: 0 3px;
opacity: 0.7;
background: var(--text-color);
animation: animateDots 1.5s var(--delay) ease-in-out infinite;
}
.typing-animation .typing-dot:first-child {
margin-left: 0;
}
@keyframes animateDots {
0%,44% {
transform: translateY(0px);
}
28% {
opacity: 0.4;
transform: translateY(-6px);
}
44% {
opacity: 0.2;
}
}
/* Typing container styling */
.typing-container {
position: fixed;
bottom: 0;
width: 100%;
display: flex;
padding: 20px 10px;
justify-content: center;
background: var(--outgoing-chat-bg);
border-top: 1px solid var(--incoming-chat-border);
}
.typing-container .typing-content {
display: flex;
max-width: 950px;
width: 100%;
align-items: flex-end;
}
.typing-container .typing-textarea {
width: 100%;
display: flex;
position: relative;
}
.typing-textarea textarea {
resize: none;
height: 55px;
width: 100%;
border: none;
padding: 15px 45px 15px 20px;
color: var(--text-color);
font-size: 1rem;
border-radius: 4px;
max-height: 250px;
overflow-y: auto;
background: var(--incoming-chat-bg);
outline: 1px solid var(--incoming-chat-border);
}
.typing-textarea textarea::placeholder {
color: var(--placeholder-color);
}
.typing-content span {
width: 55px;
height: 55px;
display: flex;
border-radius: 4px;
font-size: 1.35rem;
align-items: center;
justify-content: center;
color: var(--icon-color);
}
.typing-textarea span {
position: absolute;
right: 0;
bottom: 0;
visibility: hidden;
}
.typing-textarea textarea:valid ~ span {
visibility: visible;
}
.typing-controls {
display: flex;
}
.typing-controls span {
margin-left: 7px;
font-size: 1.4rem;
background: var(--incoming-chat-bg);
outline: 1px solid var(--incoming-chat-border);
}
.typing-controls span:hover {
background: var(--icon-hover-bg);
}
/* Reponsive Media Query */
@media screen and (max-width: 600px) {
.default-text h1 {
font-size: 2.3rem;
}
:where(.default-text p, textarea, .chat p) {
font-size: 0.95rem!important;
}
.chat-container .chat {
padding: 20px 10px;
}
.chat-container .chat img {
height: 32px;
width: 32px;
}
.chat-container .chat p {
padding: 0 20px;
}
.chat .chat-content:not(:has(.typing-animation), :has(.error)) span {
visibility: visible;
}
.typing-container {
padding: 15px 10px;
}
.typing-textarea textarea {
height: 45px;
padding: 10px 40px 10px 10px;
}
.typing-content span {
height: 45px;
width: 45px;
margin-left: 5px;
}
span.material-symbols-rounded {
font-size: 1.25rem!important;
}
}
# জাভা স্ক্রিপ্ট ফাইল
const chatInput = document.querySelector("#chat-input");
const sendButton = document.querySelector("#send-btn");
const chatContainer = document.querySelector(".chat-container");
const themeButton = document.querySelector("#theme-btn");
const deleteButton = document.querySelector("#delete-btn");
let userText = null;
const API_KEY = "PASTE-YOUR-API-KEY-HERE"; // Paste your API key here
const loadDataFromLocalstorage = () => {
// Load saved chats and theme from local storage and apply/add on the page
const themeColor = localStorage.getItem("themeColor");
document.body.classList.toggle("light-mode", themeColor === "light_mode");
themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" : "light_mode";
const defaultText = `<div class="default-text">
<h1>ChatGPT Clone</h1>
<p>Start a conversation and explore the power of AI.<br> Your chat history will be displayed here.</p>
</div>`
chatContainer.innerHTML = localStorage.getItem("all-chats") || defaultText;
chatContainer.scrollTo(0, chatContainer.scrollHeight); // Scroll to bottom of the chat container
}
const createChatElement = (content, className) => {
// Create new div and apply chat, specified class and set html content of div
const chatDiv = document.createElement("div");
chatDiv.classList.add("chat", className);
chatDiv.innerHTML = content;
return chatDiv; // Return the created chat div
}
const getChatResponse = async (incomingChatDiv) => {
const API_URL = "https://api.openai.com/v1/completions";
const pElement = document.createElement("p");
// Define the properties and data for the API request
const requestOptions = {
method: "POST",
headers: {
"Content-Type": "application/json",
"Authorization": `Bearer ${API_KEY}`
},
body: JSON.stringify({
model: "text-davinci-003",
prompt: userText,
max_tokens: 2048,
temperature: 0.2,
n: 1,
stop: null
})
}
// Send POST request to API, get response and set the reponse as paragraph element text
try {
const response = await (await fetch(API_URL, requestOptions)).json();
pElement.textContent = response.choices[0].text.trim();
} catch (error) { // Add error class to the paragraph element and set error text
pElement.classList.add("error");
pElement.textContent = "Oops! Something went wrong while retrieving the response. Please try again.";
}
// Remove the typing animation, append the paragraph element and save the chats to local storage
incomingChatDiv.querySelector(".typing-animation").remove();
incomingChatDiv.querySelector(".chat-details").appendChild(pElement);
localStorage.setItem("all-chats", chatContainer.innerHTML);
chatContainer.scrollTo(0, chatContainer.scrollHeight);
}
const copyResponse = (copyBtn) => {
// Copy the text content of the response to the clipboard
const reponseTextElement = copyBtn.parentElement.querySelector("p");
navigator.clipboard.writeText(reponseTextElement.textContent);
copyBtn.textContent = "done";
setTimeout(() => copyBtn.textContent = "content_copy", 1000);
}
const showTypingAnimation = () => {
// Display the typing animation and call the getChatResponse function
const html = `<div class="chat-content">
<div class="chat-details">
<img src="images/chatbot.jpg" alt="chatbot-img">
<div class="typing-animation">
<div class="typing-dot" style="--delay: 0.2s"></div>
<div class="typing-dot" style="--delay: 0.3s"></div>
<div class="typing-dot" style="--delay: 0.4s"></div>
</div>
</div>
<span onclick="copyResponse(this)" class="material-symbols-rounded">content_copy</span>
</div>`;
// Create an incoming chat div with typing animation and append it to chat container
const incomingChatDiv = createChatElement(html, "incoming");
chatContainer.appendChild(incomingChatDiv);
chatContainer.scrollTo(0, chatContainer.scrollHeight);
getChatResponse(incomingChatDiv);
}
const handleOutgoingChat = () => {
userText = chatInput.value.trim(); // Get chatInput value and remove extra spaces
if(!userText) return; // If chatInput is empty return from here
// Clear the input field and reset its height
chatInput.value = "";
chatInput.style.height = `${initialInputHeight}px`;
const html = `<div class="chat-content">
<div class="chat-details">
<img src="images/user.jpg" alt="user-img">
<p>${userText}</p>
</div>
</div>`;
// Create an outgoing chat div with user's message and append it to chat container
const outgoingChatDiv = createChatElement(html, "outgoing");
chatContainer.querySelector(".default-text")?.remove();
chatContainer.appendChild(outgoingChatDiv);
chatContainer.scrollTo(0, chatContainer.scrollHeight);
setTimeout(showTypingAnimation, 500);
}
deleteButton.addEventListener("click", () => {
// Remove the chats from local storage and call loadDataFromLocalstorage function
if(confirm("Are you sure you want to delete all the chats?")) {
localStorage.removeItem("all-chats");
loadDataFromLocalstorage();
}
});
themeButton.addEventListener("click", () => {
// Toggle body's class for the theme mode and save the updated theme to the local storage
document.body.classList.toggle("light-mode");
localStorage.setItem("themeColor", themeButton.innerText);
themeButton.innerText = document.body.classList.contains("light-mode") ? "dark_mode" : "light_mode";
});
const initialInputHeight = chatInput.scrollHeight;
chatInput.addEventListener("input", () => {
// Adjust the height of the input field dynamically based on its content
chatInput.style.height = `${initialInputHeight}px`;
chatInput.style.height = `${chatInput.scrollHeight}px`;
});
chatInput.addEventListener("keydown", (e) => {
// If the Enter key is pressed without Shift and the window width is larger
// than 800 pixels, handle the outgoing chat
if (e.key === "Enter" && !e.shiftKey && window.innerWidth > 800) {
e.preventDefault();
handleOutgoingChat();
}
});
loadDataFromLocalstorage();
sendButton.addEventListener("click", handleOutgoingChat);
এখন আপনি আমাদের ChatGpt Web Page এর একটি ডেমো দেখে আসতে পারেন। ভালো লাগলে আপনিও আপনার ChatGpt Website বানাতে পারেন।
পরিশেষে আজকের মত এখানেই বিদায় নিচ্ছি। সকলেই ভালো থাকুন , সুস্থ থাকুন। এত ক্ষন আমার সাথে থাকার জন্য - ধন্যবাদ।
ট্যাগসঃ- কিভাবে chatgpt ওয়েব সাইট তৈরি করবেন । How To Create ChatGpt Website Bangla,ChatGPT,GPT-3.5,AI চ্যাটবট,আর্টিফিশিয়াল ইন্টেলিজেন্স (AI) চ্যাটবট,জেনারেটিভ প্রি-ট্রেইনড ট্রান্সফর্মার (GPT), ওপেনএআই (OpenAI) চ্যাটবট,বট ইন্টেলিজেন্স,ল্যাংগুয়েজ মডেল
|
SMsudipBD.Com
Web Development & Design. |
Zip file করে download link দিলে বেশি ভালো হয়
ReplyDeleteoh! ok. next time try this.
Delete