Ad
invite friends
فناوری

ساخت یک وب سایت کامل با استفاده از ChatGPT در 1 دقیقه

به دنیای هیجان انگیز پردازش زبان طبیعی و یادگیری ماشینی خوش آمدید! امروز، ما قابلیت‌های ChatGPT را بررسی خواهیم کرد، یک مدل زبان پیشرفته که توسط OpenAI توسعه یافته است. یکی از چشمگیرترین ویژگی های ChatGPT توانایی آن در تولید کد منبع بر اساس توضیحات ساده است. تصور کنید که بتوانید یک وب سایت کامل را تنها در یک دقیقه بدون نوشتن یک خط کد خودتان بسازید. خیلی خوب به نظر می رسد که واقعیت داشته باشد؟ بیایید کشف کنیم!
با قدرت ChatGPT سعی می‌کنیم به طور خودکار یک وب‌سایت کامل را از ابتدا بسازیم و ببینیم نتایج چقدر دقیق و کارآمد هستند. این آزمایش نه تنها قابلیت‌های ChatGPT را به نمایش می‌گذارد، بلکه نگاهی اجمالی به آینده دارد که چگونه فناوری می‌تواند روش توسعه و ساخت وب‌سایت‌ها را متحول کند. بنابراین، بیایید وارد آن شویم و ببینیم ChatGPT چه کاری می تواند انجام دهد!

قرار است چه چیزی بسازیم؟

وب‌سایتی که می‌خواهیم با ChatGPT بسازیم، نقل قول تصادفی از یک فایل متنی به نام «quotes.txt» را در صفحه اصلی نمایش می‌دهد. هنگامی که به وب سایت دسترسی پیدا می‌شود، برنامه محتوای فایل quotes.txt را می‌خواند و سپس یک نقل قول تصادفی را از لیست نقل قول‌ها انتخاب می‌کند و آن را به قسمت جلویی که در صفحه وب نمایش داده می‌شود ارسال می‌کند. علاوه بر این، صفحه وب حاوی دکمه‌ای با عنوان “تغییر نقل قول” است، وقتی روی آن کلیک کنید، صفحه را رفرش می‌کند و نقل قول تصادفی دیگری را نشان می‌دهد.

پس بیایید از ChatGPT بخواهیم لیستی از نقل قول‌های معروف استیو جابز را تهیه کند:

در مرحله بعد توضیحی از وب سایتی که می خواهیم توسط ChatGPT ایجاد شود ارائه دهید:

بر اساس توضیحات متنی ما، ChatGPT یک پاسخ جامع ایجاد می کند که دستورالعمل های گام به گام و کد منبع نوشته شده در پایتون و استفاده از فرم ورک وب Flask است:

برای استفاده از کد ارائه شده باید با استفاده از دستورات زیر یک پوشه و فایل های پروژه در داخل این پوشه پروژه جدید ایجاد کنیم:

$ mkdir flask-quotes
$ cd flask-quotes
$ touch quotes.txt
$ touch app.py

با قرار دادن 20 نقل قول تولید شده در فایل quotes.txt شروع کنید.

سپس کد منبعی را که ChatGPT برای فایل app.py ارائه کرده است در آن کپی کنید.

این کد یک مثال اساسی از یک برنامه Flask است که نقل قول تصادفی از فایلی به نام “quotes.txt” را در صفحه اصلی وب سایت نمایش می دهد.

خط app = Flask(name) یک برنامه Flask جدید ایجاد می‌کند و آن را به برنامه متغیر اختصاص می‌دهد.

دکوراتور @app.route(‘/’) برای تعریف یک مسیر برای صفحه اصلی وب‌سایت استفاده می‌شود. تابع home() زمانی فراخوانی می‌شود که به این مسیر دسترسی داشته باشید. در داخل تابع، اسکریپت فایل “quotes.txt” را با استفاده از تابع open() باز می‌کند و محتوای فایل را با استفاده از روش .readlines() به نقل قول‌های متغیر اختصاص می‌دهد. سپس با استفاده از تابع random.choice(quotes)، اسکریپت یک نقل قول تصادفی را از لیست نقل قول ها انتخاب میکند. نقل قول انتخاب شده به عنوان متغیری به نام “quote” به قالب home.html ارسال می‌شود که برای نمایش در مرورگر بازگردانده می‌شود.

خط if name == ‘main‘: برای بررسی اینکه آیا اسکریپت مستقیما اجرا می شود یا به عنوان یک ماژول وارد می شود استفاده می شود. اگر مستقیماً اجرا شود، خط app.run(debug=True) وب سرور توسعه را راه اندازی می کند و برنامه را اجرا می کند. آرگومان debug=True برای فعال کردن اشکال‌زدای تعاملی در طول توسعه استفاده می‌شود.

دستورالعمل‌های بعدی که از ChatGPT دریافت کرده‌ایم در تصویر زیر قابل مشاهده است:

بیایید مراحل پیشنهادی ChatGPT را دنبال کنیم و یک پوشه جدید ایجاد کنیم و داخل این پوشه یک فایل جدید به نام home.html ایجاد کنیم:

$ mkdir templates
$ touch templates/home.html

کد HTML را از ChatGPT در home.html کپی کرده و جایگذاری کنید. این یک الگوی HTML است که یک صفحه وب را با عنوان «نقل قول‌های معروف استیو جابز»، یک تگ سرصفحه با همین عنوان، یک عنصر div که نقل قول ارسال شده از باطن را نمایش می‌دهد و یک دکمه با عنوان «تغییر نقل قول» را نمایش می‌دهد. وقتی روی آن کلیک می شود، صفحه وب را دوباره بارگیری می کند. این الگو همچنین یک فایل CSS را برای استایل دادن به صفحه وب پیوند می‌دهد.

در مرحله بعد، دستورالعمل‌هایی را برای گنجاندن کد CSS در پروژه Flask دریافت می کنیم:

با وارد کردن دستورات زیر دوباره این دستورالعمل را دنبال کنید:

$ mkdir static
$ touch static/styles.css

و در نهایت کد CSS را از ChatGPT در styles.css کپی کنید.
همین است، ما آماده ایم آزمایش کنیم که آیا همه چیز طبق انتظار کار می‌کند یا خیر.

وب سرور توسعه را با وارد کردن راه اندازی کنید:

$ python app.py

سپس باید در خط فرمان پاسخ زیر را مشاهده کنید:

سرور بر روی پورت 5000 به صورت محلی اجرا می شود. بنابراین می توانید با وارد کردن 127.0.0.1:5000 در مرورگر خود به وب سایت دسترسی پیدا کنید:

بسیار عالی، وب‌سایت در حال بارگیری است و خروجی‌ای که دریافت می‌کنیم کاملاً با آنچه درخواست کرده‌ایم مطابقت دارد. یک نقل قول تصادفی انتخاب شده و نمایش داده می شود. ما می توانیم از دکمه “تغییر نقل قول” برای انتخاب تصادفی یک مورد جدید و به روز رسانی خروجی استفاده کنیم:

منبع
منبع

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا