Cara menggunakan ChatGPT untuk membina templat tapak web dengan cepat

Selamat datang ke dunia pemprosesan bahasa semula jadi dan pembelajaran mesin yang menarik! Hari ini, kami akan meneroka keupayaan ChatGPT, alat kecerdasan buatan yang paling canggih pada masa ini, yang dibangunkan oleh syarikat OpenAI. Sudah tentu, anda juga boleh menganggapnya sebagai robot pintar. Salah satu ciri ChatGPT yang paling mengagumkan ialah keupayaannya untuk menjana kod sumber berdasarkan penerangan ringkas.

Bayangkan anda boleh membina tapak web yang lengkap dengan cepat tanpa perlu menulis baris demi baris kod sendiri Adakah itu tidak boleh dipercayai? Walau bagaimanapun, ChatGPT boleh membantu kami menyedari keperluan sedemikian. Sekarang marilah kita bersama-sama untuk menyaksikan keajaiban!

Dengan kuasa ChatGPT, kami akan cuba membina struktur templat tapak web yang lengkap secara automatik dari awal dan melihat ketepatan dan kecekapan hasilnya.

Percubaan ini bukan sahaja mempamerkan keupayaan ChatGPT, tetapi juga memberi kita gambaran tentang cara teknologi masa depan boleh merevolusikan cara kita membangun dan membina tapak web. Sekarang, mari kita selami perkara yang boleh dilakukan oleh ChatGPT!

Apa yang akan kita bina?

Tapak web yang akan kami bina menggunakan ChatGPT akan memaparkan petikan rawak pada halaman utama dalam fail teks yang dipanggil "quotes.txt".

Apabila anda melawati tapak web, aplikasi membaca kandungan fail quotes.txt dan kemudian secara rawak memilih petikan daripada senarai petikan dan menghantarnya ke bahagian hadapan dan memaparkan ia pada halaman web.

Selain itu, halaman tersebut mengandungi butang berlabel "Tukar Sebut Harga" yang apabila diklik akan menyegarkan halaman dan memaparkan petikan rawak yang lain.

Jadi mari kita mulakan dengan meminta ChatGPT menjana senarai petikan Steve Jobs:

Seterusnya kami mahu ChatGPT menjana penerangan halaman tapak web:

berdasarkan teks Penerangan kami, ChatGPT ialah menjana respons komprehensif dengan arahan langkah demi langkah dan kod sumber yang ditulis dalam Python dan menggunakan rangka kerja web Flask:

Untuk menggunakan kod yang disediakan, kita perlu mencipta folder projek dan fail dalam folder projek baharu ini menggunakan arahan berikut: Tanda petikan disalin ke fail quotes.txt.

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

Seterusnya, salin kod sumber yang disediakan oleh ChatGPT untuk app.py fail ke dalamnya.

Kod ini ialah contoh asas aplikasi Flask yang memaparkan petikan rawak daripada fail yang dipanggil "quotes.txt" pada halaman utama tapak web.

app = Flask(__name__) mencipta aplikasi Flask baharu dan menyerahkannya kepada apl pembolehubah.

@app.route('/') penghias digunakan untuk menentukan laluan halaman utama tapak web. Fungsi home() dipanggil apabila laluan ini diakses.

Di dalam fungsi, skrip membuka fail "quotes.txt" menggunakan fungsi open() dan memperuntukkan kandungan fail kepada petikan pembolehubah menggunakan kaedah .readlines().

Kemudian, menggunakan fungsi random.choice(petikan), skrip memilih petikan secara rawak daripada senarai petikan. Petikan yang dipilih dihantar sebagai pembolehubah bernama "petikan" kepada templat home.html yang dikembalikan untuk dipaparkan dalam penyemak imbas. Baris

if __name__ == '__main__': digunakan untuk menyemak sama ada skrip dijalankan secara langsung atau diimport sebagai modul. Jika berjalan terus, baris app.run(debug=True) memulakan pelayan web pembangunan dan menjalankan aplikasi. Parameter debug=True membolehkan penyahpepijat interaktif semasa pembangunan.

Arahan seterusnya yang kami terima daripada ChatGPT boleh dilihat dalam tangkapan skrin berikut:

Mari kami ikut langkah yang dicadangkan oleh ChatGPT untuk mencipta templat folder baharu dan mencipta fail baharu home.html dalam folder ini:

Tukar kod HTML daripada ChatGPT Salin dan tampal ke dalam rumah .html.

这是一个 HTML 页面模板，它显示一个标题为“史蒂夫·乔布斯的名言”的网页，一个具有相同标题的标题标签，一个显示从后端传递的名言的 div 元素，以及一个标有“更改名言”的按钮，单击它时，重新加载网页。该模板还链接了一个 CSS 文件，用于设置网页样式。

接下来我们将收到有关将 CSS 代码包含到 Flask 项目中的说明：

通过输入以下命令再次遵循这些说明：

$ mkdir static
$ touch static/styles.css

最后，我们将 CSS 代码从 ChatGPT 复制并粘贴到 styles.css。

就是这样，我们准备测试一切是否按要求工作。输入以下命令启动Web 开发服务器：

$ python app.py

然后，我们应该在命令行上看到以下响应：

服务器在本地端口 5000 上运行，接着，在浏览器中输入127.0.0.1:5000就可以访问该网站了：

现在，我们的网站页面就完成了，通过浏览器，我们将看到我们希望的页面输出样式，与我们的要求完全相符合。

选择并显示随机报价，我们可以使用“Change Quote”按钮随机选择一个新的并更新，我们将得到以下页面效果：

总结

关于ChatGPT这个AI工具，它可以实现的事情，远不止实现一个网站页面模板，它可以做的事情还非常多，ChatGPT的出现，算是AI领域的一个重大突破，为啥这样说，因为，它的语言模型更加接近人类语言，不会像一个机器人那样死板，它会有所变通，如果你也喜欢AI，热爱机器学习的话，可以自行下载安装一个来体验一下，在使用的过程种，用英文语言跟它交流会比用中文更加友好。

当然，并不是说不可以用中文，中文也一样可以的，它做了大量的训练，支持很多国家的语言。

Atas ialah kandungan terperinci Cara menggunakan ChatGPT untuk membina templat tapak web dengan cepat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!