نمونه اسکریپت ChatBot با استفاده از ChatGPT API، HTML، CSS، و JavaScript


در دنیای امروز، با گسترش روزافزون فناوری و نیازهای کاربران به تعاملات هوشمند، ساخت یک ربات چت یا همان ChatBot، به یک ضرورت تبدیل شده است. این روند، مخصوصاً در بخش‌های خدمات مشتری، آموزش، و حتی سرگرمی، نقش مهمی ایفا می‌کند. در این مقاله، قصد داریم به صورت جامع و کامل، نحوه ساخت نمونه اسکریپت ChatBot بر پایه API قدرتمند ChatGPT، همراه با طراحی واسط کاربری زیبا و کاربرپسند، با بهره‌گیری از HTML، CSS و JavaScript را شرح دهیم.
در ابتدا، باید بدانید که API ChatGPT، برای توسعه‌دهندگان این امکان را فراهم می‌کند که بتوانند هوش مصنوعی پیشرفته‌ای را در برنامه‌ها و وبسایت‌های خود پیاده‌سازی کنند. این API، بر پایه مدل‌های زبانی GPT-3 و GPT-4، قادر است متون طبیعی و انسانی را تولید کند، سؤالات کاربران را درک کرده، و پاسخ‌های مرتبط و معقول ارائه دهد. بنابراین، کلید اصلی در ساخت یک ChatBot کارآمد، ارتباط صحیح میان سمت کاربری و سمت سرور است، که این ارتباط، از طریق درخواست‌های HTTP و پاسخ‌های API برقرار می‌شود.

طراحی قالب HTML




در مرحله اول، باید یک ساختار HTML پایه برای واسط کاربری ایجاد کنیم. در اینجا، قسمت‌هایی نظیر ناحیه چت، فرم ورود پیام، و دکمه ارسال، اهمیت ویژه دارند. این عناصر باید به صورت منطقی و منظم قرار گیرند تا کاربر حین تعامل، حس راحتی و سادگی داشته باشد. برای مثال، یک div اصلی برای نمایش پیام‌ها، یک فرم برای وارد کردن پیام، و یک دکمه ارسال، در نظر گرفته می‌شود. در کد زیر، نمونه‌ای از ساختار HTML آورده شده است:
html  


<!DOCTYPE html>


<html lang="fa">


<head>


<meta charset="UTF-8" />


<meta name="viewport" content="width=device-width, initial-scale=
  1. 0"/>


<title>ChatBot با API ChatGPT</title>


<link rel="stylesheet" href="style.css" />


</head>


<body>


<div class="chat-container">


    <div id="chatbox" class="chatbox"></div>


    <form id="chatForm" class="chat-form">


        <input type="text" id="userInput" placeholder="پیام خود را وارد کنید..." autocomplete="off"/>


        <button type="submit">ارسال</button>


    </form>


</div>


<script src="script.js"></script>


</body>


</html>

در این کد، بخش `div` با کلاس `chat-container`، فضایی برای نمایش تمامی پیام‌ها ایجاد می‌کند. فرم `chatForm` شامل ورودی متن و دکمه است که کاربر پیام خود را تایپ و ارسال می‌کند. استفاده از `autocomplete="off"`، تجربه کاربری خوبی را فراهم می‌کند، چون باعث می‌شود مرورگر از پیشنهادهای قبلی جلوگیری کند.

استایل CSS برای ظاهری جذاب




در مرحله بعد، باید ظاهر واسط کاربری را طراحی کنیم تا کاربر احساس راحتی و رضایت کند. CSS، این وظیفه را بر عهده دارد. با استایل مناسب، می‌توانیم طراحی مدرن، جذاب و کاربرپسند ایجاد کنیم. برای مثال، رنگ‌ها، فونت‌ها، فاصله‌ها و انیمیشن‌ها، نقش مهمی در زیبایی و کارایی دارند. نمونه استایل CSS، در فایل `style.css` به صورت زیر است:
css  


body {


    font-family: Tahoma, Geneva, Verdana, sans-serif;


    background-color: #f0f2f5;


    display: flex;


    justify-content: center;


    align-items: center;


    height: 100vh;


    margin: 0;


}
.chat-container {


    width: 400px;


    height: 600px;


    background-color: #fff;


    box-shadow: 0 4px 10px rgba(0,0,0,
  1. 1);


    display: flex;


    flex-direction: column;


    padding: 10px;


    border-radius: 8px;


}
.chatbox {


    flex: 1;


    overflow-y: auto;


    padding: 10px;


    border: 1px solid #ddd;


    border-radius: 4px;


    background-color: #fafafa;


}
.chat-form {


    display: flex;


    margin-top: 10px;


}
#userInput {


    flex: 1;


    padding: 8px;


    border: 1px solid #ccc;


    border-radius: 4px;


    font-size: 14px;


}
button ...  ← ادامه مطلب در magicfile.ir