قبلاً ChatGPT، مدل زبان پیشرفته طراحی شده توسط OpenAI را ملاقات کرده اید که از یادگیری ماشینی برای درک زبان طبیعی و ایجاد پاسخ هایی شبیه به انسان استفاده می کند. این پایگاه دانش گسترده ای دارد و با “درک” پیچیده خود از زبان می تواند به عنوان یک دستیار قدرتمند برای هر کسی که در جستجوی اطلاعات است عمل کند. می تواند به طیف گسترده ای از سوالات پاسخ دهد، مشاوره ارائه دهد، در مورد موضوعات مختلف گفتگو کند، و خود را در زمینه های زیادی ثابت کرده است.
اما آیا ChatGPT می تواند صفحات وب ایجاد کند؟ بیایید آن را به کار بگیریم و بفهمیم.
توجه داشته باشید که این با استفاده از ChatGPT 3.5، قبل از انتشار آخرین نسخه نوشته شده است.
بیایید با چند HTML اولیه شروع کنیم. با توجه به اینکه ChatGPT قبلاً خود را به عنوان یک دستیار کدنویس و برنامه نویسی با استعداد ثابت کرده است، این نباید آزمایش زیادی باشد.
در اینجا دستوری که با ChatGPT برای ایجاد موفقیت آمیز صفحه HTML “Hello, World” استفاده کردیم، آمده است:
یک «سلام، جهان» ساده ایجاد کنید. صفحه وب با استفاده از HTML
ChatGPT HTML اصلی زیر را تولید کرد که جای تعجب نیست، آنچه را که در نظر گرفته شده بود انجام داد.
<!DOCTYPE html>
<html>
<head>
<title>Hello, World!</title>
</head>
<body>
<h1>Hello, World!</h1>
</body>
</html>ChatGPT به ما توصیه می کند که آن را در فایلی با پسوند “.html” قرار داده و با مرورگر خود باز کنیم. ماموریت انجام شد.
من با اسکرین شات زحمت نمی کشم. همه شما قبلاً خروجی HTML بدون قالب را دیده اید.
بیایید از ChatGPT بخواهیم تا همه چیز زیباتر به نظر برسد.
آیا می توانید با استفاده از CSS این صفحه را بسیار بهتر جلوه دهید؟
ChatGPT روی موارد زیر می ریزد:
این مثال از CSS برای تغییر رنگ پس‌زمینه صفحه وب به آبی روشن، وسط متن روی صفحه، تغییر رنگ عنوان به navy و افزایش اندازه فونت عنوان به 4em استفاده می‌کند.
می توانید با css بازی کنید و به صفحه وب خود سبک دهید.
همچنین این یک تمرین خوب است که css را در یک فایل جداگانه قرار دهید و آن را به فایل index.html خود پیوند دهید.
که شبیه این است:
یک صفحه وب ساده که توسط ChatGPT با استفاده از HTML و CSS ایجاد شده است
مطمئناً یک پیشرفت است، اما این هنوز هم بازی کودکانه است. با این حال، قبل از اینکه ادامه دهیم، اجازه دهید توصیه ChatGPT را بپذیریم و HTML و CSS خود را از هم جدا کنیم.
چگونه می توانم CSS را در یک فایل جداگانه قرار دهم و آن را به فایل index.html خود پیوند دهم؟
شما می توانید یک فایل CSS جداگانه ایجاد کنید و آن را با استفاده از عنصر پیوند درون فایل HTML خود پیوند دهید
headبخش فایل HTML شما در اینجا مثالی از نحوه انجام این کار آورده شده است:
- یک فایل جدید به نام ” در همان فهرست فایل “index.html” خود ایجاد کنید.
- کد CSS خود را به فایل ” اضافه کنید.
- در فایل “index.html” خود، خط زیر را در داخل آن اضافه کنید
headبخش:
<link rel="stylesheet" type="text/css" href=">این
relویژگی رابطه بین سند جاری و سند پیوند شده را مشخص می کندtypeویژگی نوع سند پیوند شده را مشخص می کند وhrefویژگی مکان سند پیوند شده را مشخص می کند.- هر دو فایل را ذخیره کنید و “index.html” را در مرورگر وب خود باز کنید. اکنون باید سبک‌های از ” در صفحه وب اعمال شوند.
همچنین می‌توانید فایل‌های css را از پیوندهای آنلاین، مانند «
همچنین در صفحه وب شما اعمال خواهد شد و نیازی نیست آن را در فهرست محلی خود قرار دهید.
یک صفحه وب به سبک Craigslist ایجاد کنید که کارهای زیر را انجام می دهد:
– به من اجازه می دهد یک آگهی جدید اضافه کنم
– به من اجازه می دهد تبلیغات موجود را حذف کنم
– به من اجازه می دهد تمام تبلیغات موجود را فهرست کنم
– به من اجازه می دهد یک آگهی موجود را ویرایش کنم
ایجاد یک صفحه وب به سبک Craigslist شامل استفاده از ترکیبی از HTML، CSS، جاوا اسکریپت و یک زبان باطن مانند PHP یا Node.js برای مدیریت جنبه‌های پویا صفحه وب است. در اینجا مثالی از اینکه ساختار اصلی صفحه وب ممکن است به نظر برسد آورده شده است:
<!DOCTYPE html>
<html>
<head>
<title>Craigslist-style Webpage</title>
<link rel="stylesheet" type="text/css" href=">
</head>
<body>
<h1>Craigslist-style Webpage</h1>
<form id="add-ad-form">
<label for="title">Title:</label>
<input type="text" id="title" name="title">
<br>
<label for="description">Description:</label>
<textarea id="description" name="description"></textarea>
<br>
<button type="submit">Add Ad</button>
</form>
<table id="ads-table">
<thead>
<tr>
<th>Title</th>
<th>Description</th>
<th>Actions</th>
</tr>
</thead>
<tbody>
<!-- This section will be populated with ads using JavaScript -->
</tbody>
</table>
<script src="script.js"></script>
</body>
</html>صفحه جلویی به دست آمده بدون عملکرد پس‌زمینه، ظاهر چندان خوبی ندارد. پس می پرسم:
آیا می توانید با استفاده از یک فایل CSS وب سایت را حرفه ای تر جلوه دهید؟ من دوست دارم پالت رنگی رنگ های ملی ایتالیا باشد.
و ChatGPT اجباری می کند (دکمه “افزودن” حتی وقتی بالای آن قرار می گیرید قرمز می شود).
فرم ساده HTML با سبک ایجاد شده توسط ChatGPT
اما در مورد جاوا اسکریپت چطور؟ بیایید ببینیم که ChatGPT می تواند آن را اضافه کند یا خیر.
آیا می توانید جاوا اسکریپت را برای افزودن یک تبلیغ جدید به لیست و نمایش آن اضافه کنید؟
// Get references to the form and table
const addAdForm = document.querySelector("#add-ad-form");
const adsTable = document.querySelector("#ads-table tbody");
// Handle the form submit event
addAdForm.addEventListener("submit", function(event) {
event.preventDefault();
// Get the values from the form inputs
const title = document.querySelector("#title").value;
const description = document.querySelector("#description").value;
// Create a new table row and add the ad data
const newRow = document.createElement("tr");
newRow.innerHTML = `
<td>${title}</td>
<td>${description}</td>
<td>
<button>Edit</button>
<button>Delete</button>
</td>
`;
// Add the new row to the table
adsTable.appendChild(newRow);
// Clear the form inputs
addAdForm.reset();
});و نتایج:
فرم HTML نیمه کاربردی با استفاده از جاوا اسکریپت ایجاد شده توسط ChatGPT
بد نیست. با چند دستور از هیچ، به HTML زشت، به HTML زیباتر، به جاوا اسکریپت که این کار را انجام می دهد، رفتیم. چیزی.
بیایید چیزی مفید را امتحان کنیم. در زیر دستور ایجاد یک صفحه اصلی ساده (اما بالقوه مفید) برای وبلاگ، با برخی الزامات خاص ارائه شده است.
بیایید یک صفحه وب ایجاد کنیم. از شما می‌خواهم HTML و CSS و هر آنچه را که برای ایجاد یک صفحه اصلی وبلاگ لازم است بنویسید که این الزامات را رعایت کند:
– صفحه از عرض 1024 پیکسل استفاده می کند
– در بالای صفحه عنوان با فونت بزرگ خواهد بود
– در زیر آن باید یک ردیف پیوند به 3 صفحه مفید در وبلاگ وجود داشته باشد
– در زیر این یک بنر تبلیغاتی قابل کلیک خواهد بود که با اندازه استاندارد صنعت مطابقت دارد
– در زیر قسمتی از آخرین وبلاگ ها وجود دارد که باید 6 آخرین ورودی را در یک طرح کاشی با 2 ردیف 3 کاشی نشان دهد.
– در زیر آخرین ورودی های وبلاگ باید یک بخش “درباره” وجود داشته باشد که اطلاعات مربوط به مؤسس وب سایت را همراه با عکس آنها فهرست می کند.
– در زیر این باید یک پاورقی معمولی، از جمله
– از lorem ipsum برای پر کردن متن استفاده کنید
– صفحه باید جذاب و با استفاده از سبک مدرن باشد
– باید یک افکت شناور CSS بر روی آخرین کاشی های وبلاگ وجود داشته باشد
در اینجا HTML و CSS تولید شده توسط ChatGPT آمده است:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Blog</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 1024px;
margin: 0 auto;
padding: 1rem;
}
h1 {
font-size: 2.5rem;
text-align: center;
margin-bottom: 1rem;
}
nav {
display: flex;
justify-content: center;
margin-bottom: 1rem;
}
nav a {
text-decoration: none;
color: #333;
margin: 0 1rem;
}
.banner {
display: block;
width: 728px;
height: 90px;
background-color: #ccc;
margin: 0 auto 1rem;
text-align: center;
line-height: 90px;
}
.blogs {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin-bottom: 1rem;
}
.blog {
width: 32%;
background-color: #f0f0f0;
padding: 1rem;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
cursor: pointer;
}
.blog:hover {
transform: translateY(-10px);
}
.about {
display: flex;
margin-bottom: 1rem;
}
.about img {
width: 150px;
height: 150px;
object-fit: cover;
border-radius: 50%;
margin-right: 1rem;
}
.about p {
flex: 1;
}
footer {
background-color: #333;
color: #fff;
padding: 1rem;
text-align: center;
font-size: 0.875rem;
}
</style>
</head>
<body>
<h1>My Awesome Blog</h1>
<nav>
<a href="#">Useful Page 1</a>
<a href="#">Useful Page 2</a>
<a href="#">Useful Page 3</a>
</nav>
<a href="#" class="banner">Ad - 728x90</a>
<div class="blogs">
<div class="blog">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
</div>
<div class="blog">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
</div>
<div class="blog">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
</div>
<div class="blog">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
</div>
<div class="blog">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
</div>
<div class="blog">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p>
</div>
</div>
<div class="about">
<img src="founder.jpg" alt="Founder's Photo">
<div>
<h2>About the Founder</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis. Integer sit amet tincidunt turpis, a lacinia ligula.</p>
</div>
</div>
<footer>
© 2023 My Awesome Blog. All Rights Reserved.
</footer>
</body>
</html>و اینم محصول نهایی:
صفحه اصلی وبلاگ ساده ایجاد شده توسط ChatGPT
خیلی خوب به نظر می رسد منظورم این است که مطمئناً با راهنمایی های اضافی CSS در اعلان ظاهر بهتری پیدا می کند، اما در کل شروع بدی نیست. حتی روی کاشی ها اثر شناور دارد که در کاشی سمت چپ بالا قابل مشاهده است (در قسمت شناور کمی بلند شده است).
یک نکته این است که من “6 آخرین ورودی در یک طرح کاشی کاری شده با 2 ردیف از 3 کاشی” را درخواست کردم، اما ChatGPT این کاشی کاری را در 2 ایجاد کرد. ستون ها بجای.
به نظر می رسد که ChatGPT با چند دستور ساده و سرراست، مطمئناً برخی از قابلیت ها را برای ایجاد صفحات وب نشان می دهد. من تعجب می کنم که وقتی از او خواسته می شود چیزی پویا تولید کند چگونه عمل می کند و چگونه به انسان دستور می دهد اجزای مختلف را به هم ببافد. تستی برای دفعه بعد
متیو مایو (@mattmayo13) یک دانشمند داده و سردبیر KDnuggets، منبع آنلاین مهم علم داده و یادگیری ماشین است. علایق او در پردازش زبان طبیعی، طراحی و بهینه سازی الگوریتم، یادگیری بدون نظارت، شبکه های عصبی و رویکردهای خودکار برای یادگیری ماشین است. متیو دارای مدرک کارشناسی ارشد در علوم کامپیوتر و دیپلم در رشته داده کاوی است. می توان با او در editor1 در kdnuggets تماس گرفت[dot]com
