سایت خود را با هوش مصنوعی طراحی کنید
مرحله بعدی این است که امتحان کنید آیا ربات ChatGPT می تواند برای صفحات وب اصلی کد ایجاد کند یا خیر.
در این مثال، از هوش مصنوعی خواستیم تا خطوطی از کد HTML بنویسد تا برخی از صفحات مورد نیاز ما را ایجاد کند. اولین prompt ایجاد یک صفحه اصلی با استفاده از طراحی واکنشگرا بوت استرپ است.
Prompt: با استفاده از طراحی واکنشگرا Bootstrap یک قالب صفحه اصلی ایجاد کن. منوی صفحه اصلی، سرویس ها، نمونه کارها، وبلاگ و درباره ما را در هدر قرار بده.
<!DOCTYPE html>
<html>
<head>
<title>My Website</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”></script>
</head>
<body>
<header>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>My Website</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”index.html”>Home</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”services.html”>Services</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”portfolio.html”>Portfolio</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”blog.html”>Blog</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”about.html”>About Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class=”container”>
<div class=”jumbotron text-center”>
<h1>Welcome to My Website</h1>
<p>This is a template for a simple website using Bootstrap.</p>
</div>
</div>
</body>
</html>
چت بات با خطوطی از کدها برای یک صفحه اصلی همانطور که ز شما خواسته بودید پاسخ داد. ما این کد را آزمایش کردیم تا مطمئن شویم که به درستی کار می کند، و به صورت زیر در مرورگر به نظر رسید:
گاهی اوقات، هنگام تلاش برای نوشتن یک اسکریپت طولانی تر، ربات چت ممکن است در اواسط راه از کار بیفتد. وقتی این اتفاق می افتد، شما سه گزینه دارید:
اسکریپت نویسی را ادامه دهید – prompt بعدی را وارد کنید تا ChatGPT از همان جایی که متوقف شد ادامه یابد. توصیه می کنیم در صورت امکان از این روش برای صرفه جویی در زمان استفاده کنید.
- بازسازی پاسخ – روی این دکمه در بالای چت باکس کلیک کنید. این کار باعث می شود که چت بات پاسخ قبلی را از ابتدا بازنویسی کند. با این حال، ممکن است همان خطا را دریافت کنید.
- گپ جدید – اگر روش های قبلی کار نکرد، این دکمه را در سمت چپ بالای صفحه فشار دهید. توجه داشته باشید که با استفاده از این روش نمی‌توانید از سوالات بعدی استفاده کنید و باید از ابتدا شروع کنید.
- در مرحله بعد، از ChatGPT خواستیم با استفاده از همین روش، یک قالب وبلاگ با طرح کارتی ایجاد کند.
جزئیات مربوط به طراحی واکنشگرا Bootstrap را حذف کردیم تا بررسی کنیم آیا می تواند زمینه را از prompt قبلی درک کند یا خیر.
prompt: یک صفحه دیگر برای یک صفحه وبلاگ ایجاد کن. این کار تو باید تمام نوشته های وبلاگ روی وب‌سایت را با طرح‌بندی کارتی فهرست کند.
<!DOCTYPE html>
<html>
<head>
<title>My Blog</title>
<link rel=”stylesheet” href=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js”></script>
</head>
<body>
<header>
<nav class=”navbar navbar-expand-lg navbar-light bg-light”>
<a class=”navbar-brand” href=”#”>My Website</a>
<button class=”navbar-toggler” type=”button” data-toggle=”collapse” data-target=”#navbarNav” aria-controls=”navbarNav” aria-expanded=”false” aria-label=”Toggle navigation”>
<span class=”navbar-toggler-icon”></span>
</button>
<div class=”collapse navbar-collapse” id=”navbarNav”>
<ul class=”navbar-nav”>
<li class=”nav-item”>
<a class=”nav-link” href=”index.html”>Home</a>
</li>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”services.html”>Services</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”portfolio.html”>Portfolio</a>
</li>
<li class=”nav-item”>
<li class=”nav-item active”>
<a class=”nav-link” href=”blog.html”>Blog</a>
</li>
<li class=”nav-item”>
<a class=”nav-link” href=”about.html”>About Us</a>
</li>
</ul>
</div>
</nav>
</header>
<div class=”container”>
<div class=”row”>
<div class=”col-md-4″>
<div class=”card”>
<img class=”card-img-top” src=”https://via.placeholder.com/350×۱۵۰″ alt=”Card image cap”>
<div class=”card-body”>
<h4 class=”card-title”>Blog Post Title 1</h4>
<p class=”card-text”>Some quick example text to build on the card title and make up the bulk of the card’s content.</p>
<a href=”#” class=”btn btn-primary”>Read More</a>
</div>
</body>
</html>
چت بات با موفقیت به سوال بعدی پاسخ داد و خطوط کد را همانطور که خواسته بودیم ایجاد کرد. این کد زمانی که آن را روی مرورگر بارگذاری می کنیم نیز کار می کند.
جدا از نوشتن کد برای قالب های صفحه وب، چت بات می تواند عناصر خاصی را نیز تولید کند. در اینجا مثالی از نحوه ایجاد یک فرم تماس ساده توسط ربات چت آمده است.
prompt: یک صفحه وب ساده حاوی فرم تماس ایجاد کن. فیلدهای زیر را وارد ایجاد کن: نام، آدرس ایمیل و شماره تلفن.
<!DOCTYPE html>
<html>
<head>
<title>Contact Form</title>
<link rel=”stylesheet” href=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css” integrity=”sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z” crossorigin=”anonymous”>
</head>
<body>
<div class=”container”>
<form action=”submit-form.php” method=”post”>
<div class=”form-group”>
<label for=”name”>Name:</label>
<input type=”text” class=”form-control” id=”name” name=”name”>
</div>
<div class=”form-group”>
<label for=”email”>Email address:</label>
<input type=”email” class=”form-control” id=”email” name=”email”>
</div>
<div class=”form-group”>
<label for=”phone”>Phone number:</label>
<input type=”tel” class=”form-control” id=”phone” name=”phone”>
</div>
<input type=”submit” class=”btn btn-primary” value=”Submit”>
</form>
</div>
<script src=”https://code.jquery.com/jquery-3.5.1.slim.min.js” integrity=”sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj” crossorigin=”anonymous”></script>
<script src=”https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js” integrity=”sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN” crossorigin=”anonymous”></script>
<script src=”https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js” integrity=”sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV” crossorigin=”anonymous”></script>
</body>
</html>
توجه داشته باشید که این کد از Bootstrap نیز استفاده می کند، حتی اگر ما آن را در prompt مشخص نکرده ایم. برای اطمینان از کارکرد کد، آن را با استفاده از Replit آزمایش کرده‌ایم:
کاربران همچنین ممکن است از مدل هوش مصنوعی برای تولید کد CSS برای تولید عناصر طراحی خاص مانند فونت ها، طرح های رنگی وب سایت و اندازه عناصر استفاده کنند.
ادغام اسکریپت های ChatGPT را با تم ها و قالب های موجود وردپرس در نظر بگیرید. به این ترتیب، شما مجبور نیستید از ابتدا الگوها و طرح‌بندی‌ها ایجاد کنید و می‌توانید روی افزودن عناصر طراحی جدید به صفحات خود تمرکز کنید.
می توانید کد CSS سفارشی را در قالب وردپرس وارد کنید، از جمله استفاده از ویژگی سفارشی ساز داخلی، ایجاد یک تم فرزند یا استفاده از افزونه هایی مانند Simple Custom CSS و Custom CSS Pro.
تولید محتوای سایت با ChatGPT
با توجه به قابلیت های پردازش زبان، استفاده از ChatGPT برای تولید محتوای وب سایت یکی از رایج ترین کاربردهای آن است. هوش مصنوعی می تواند ایده ها و پیش نویس ها را در عرض چند ثانیه تولید کند و در وقت شما صرفه جویی کند.
ما از این مدل برای ایجاد محتوا برای صفحات ثابت و پست های وبلاگ استفاده خواهیم کرد.
بیایید با درخواست از ChatGPT برای نوشتن محتوای ثابت مانند صفحه درباره ما شروع کنیم. اطمینان حاصل کنید که تمام اطلاعات مهم در مورد وب سایت و کسب و کار خود را در prompt قرار دهید تا به چت بات اجازه دهید تا موضوع را درک کند.
همچنین می توانید از ChatGPT برای وبلاگ نویسی و نوشتن پست های وبلاگ برای وب سایت خود استفاده کنید. شما می توانید عبارات خاصی را بر اساس تحقیقات کلمات کلیدی خود بگنجانید تا وبلاگ را از نظر سئو بهینه تر کنید. در اینجا، از آن خواستیم تا در مورد انتخاب یک نام دامنه خوب، یک نام ایجاد کند.
اگر مخاطبین خاصی را در ذهن دارید، به مدل هوش مصنوعی بگویید محتوای وب سایت را با سبک زبانی خاص ایجاد کند تا با ویژگی ها و سطح تخصص آن مطابقت داشته باشد.
به عنوان مثال، می‌توانید از چت‌بات بخواهید که همان موضوع را به زبان ساده‌تری برای دانش‌آموزان پایه هشتم توضیح دهد.
همچنین می توان از این مدل هوش مصنوعی برای کمک به ایجاد فرمت های محتوای دیگر مانند ویدیو یا پادکست استفاده کرد. به این ترتیب، کاربر می تواند به سرعت یک اسکریپت تولید کند، اگرچه ممکن است نیاز به انجام برخی تنظیمات در استایل و قالب داشته باشد.
به خاطر داشته باشید که ChatGPT و سایر تولیدکنندگان محتوای هوش مصنوعی نمی توانند محتوای کاملی برای وب سایت شما بنویسند. تصحیح و ویرایش انسانی هنوز برای اطمینان از کیفیت بالای پست‌ها ضروری است.
محدودیت های استفاده از ChatGPT برای ساخت یک وب سایت
اگرچه ChatGPT از توانایی ابزارهای موجود با هوش مصنوعی فراتر می رود، اما ChatGPT هنوز محدودیت هایی دارد.
در حال حاضر، بارزترین مسئله در مورد دقت اطلاعات است. مدل هوش مصنوعی می تواند پاسخی قابل قبول اما نادرست به کاربر بدهد. این به این دلیل است که نمی تواند اطلاعات را بررسی کند.
دانش ChatGPT بیشتر از داده های سال ۲۰۲۱ می آید. از آنجایی که OpenAI اطلاعات مربوط به سال ۲۰۲۲ را به مدل می‌دهد، ممکن است اطلاعات نادرست یا قدیمی برای سوالات مرتبط با موضوعات جدیدتر تولید کند.
بنابراین، کاربر باید پاسخ‌های ChatGPT را قبل از اعمال آن در پروژه خود بررسی کند. نادیده گرفتن فرآیند ویرایش انسانی برای محتوای وب سایت تولید شده توسط هوش مصنوعی می تواند منجر به شهرت نام تجاری بد از طریق انتشار اطلاعات نادرست شود.
در مورد جنبه فنی هم همینطور. وقتی وب‌سایتی را با استفاده از هوش مصنوعی می‌سازید، بهتر است تمام کدهایی را که با استفاده از سرویس‌هایی مانند Replit تولید می‌کند، قبل از افزودن آن به وب‌سایت خود آزمایش کنید.
حتما بررسی کنید که آیا ChatGPT همان کدی را که درخواست کرده‌اید به شما می‌دهد یا خیر. در حال حاضر، مدل هوش مصنوعی به جای پرسیدن یک سوال روشن‌کننده برای یک کوئری مبهم، تمایل کاربر را حدس می‌زند.
نتیجه گیری
پیشرفت چشمگیر در فناوری هوش مصنوعی امروزه توسعه وب سایت مبتنی بر هوش مصنوعی را امکان پذیر کرده است. ChatGPT می تواند با ایجاد کدهای لازم و ارائه توصیه های مختلف برای سرعت بخشیدن به روند توسعه، به ایجاد وب سایت ها کمک کند.
مدل هوش مصنوعی نیز برای همه قابل دسترسی است و آن را حتی برای مبتدیان کاملا گزینه خوبی می کند.
با این حال، ChatGPT و سایر ابزارهای مجهز به هوش مصنوعی، از جمله سازندگان وب سایت های هوش مصنوعی، با محدودیت هایی همراه هستند. به عنوان مثال، آنها می توانند پاسخ نادرستی به سوال شما ارائه دهند یا به دستورالعمل های مضر پاسخ دهند.
بنابراین، در حالی که استفاده از ChatGPT می تواند به شما در صرفه جویی در زمان کمک کند، ویرایش انسانی هنوز در ساخت وب سایت هایی با هوش مصنوعی ضروری است.
پرسش های متداول ساخت وب سایت با ChatGPT
در این بخش به برخی از سوالات متداول در مورد نحوه ساخت وب سایت با ChatGPT پاسخ خواهیم داد.
ChatGPT چقدر هزینه دارد؟
- ChatGPT دو گزینه برای قیمت هایش دارد: رایگان و ChatGPT Plus. نسخه رایگان دارای محدودیت ۵۰۰ کلمه و یک دوره رفرش سازی ۱۰ دقیقه است. ChatGPT Plus ماهانه ۲۰ دلار هزینه دارد و این محدودیت ها را حذف می کند.
ChatGPT برای چه چیزی می تواند استفاده شود؟
- ChatGPT بر اساس مدل پردازش زبان طبیعی (NLP) است که آن را قادر می‌سازد تا متنی شبیه انسان بر اساس prompt کاربر تولید کند. برخی از رایج ترین کاربردها عبارتند از ترجمه متون، نوشتن محتوا و تولید کد برنامه نویسی.
آیا می توانید یک وب سایت سفارشی با ChatGPT ایجاد کنید؟
- توسعه وب سایت ChatGPT تا حدودی امکان پذیر است. مدل هوش مصنوعی می تواند به کاربران کمک کند تا خطوط کدی را برای تشکیل صفحات وب، ارائه پیشنهادات طراحی و ایجاد محتوای وب بنویسند. با این حال، برای اطمینان از اینکه تمام اطلاعات تولید شده توسط ربات چت، هنوز به ویرایش انسانی نیاز دارید.
