如何使用ChatGPT快速構(gòu)建一個(gè)網(wǎng)站模板
英文: https://medium.com/codingthesmartway-com-blog/build-a-complete-website-using-chatgpt-in-1-minute-16edef87bc30
歡迎來(lái)到令人興奮的自然語(yǔ)言處理和機(jī)器學(xué)習(xí)世界！今天，我們將探索 ChatGPT 的功能，它是由 OpenAI 公司開(kāi)發(fā)的目前最先進(jìn)的人工智能工具。當(dāng)然，你也可以將其看作是一個(gè)智能機(jī)器人。ChatGPT 最令人印象深刻的功能之一是它能夠根據(jù)簡(jiǎn)單的描述生成源代碼。
mkdir flask-quotescd flask-quotestouch quotes.txttouch app.py
首先，我們需要將生成的 20 個(gè)引號(hào)復(fù)制到文件 quotes.txt 中。
接下來(lái)，將ChatGPT 為文件app.py 提供的源代碼復(fù)制到其中。
此代碼是 Flask 應(yīng)用程序的一個(gè)基本示例，它在網(wǎng)站主頁(yè)上顯示來(lái)自名為“quotes.txt”的文件中的隨機(jī)引用。
app = Flask(__name__) 創(chuàng)建一個(gè)新的 Flask 應(yīng)用程序并將其分配給變量 app。
@app.route('/') 裝飾器用于定義網(wǎng)站主頁(yè)的路由。訪問(wèn)此路由時(shí)調(diào)用函數(shù) home()。
在函數(shù)內(nèi)部，腳本使用 open() 函數(shù)打開(kāi)“quotes.txt”文件，并使用 .readlines() 方法將文件內(nèi)容分配給變量 quotes。
然后，使用 random.choice(quotes) 函數(shù)，腳本從報(bào)價(jià)列表中隨機(jī)選擇一個(gè)報(bào)價(jià)。選定的引用作為名為“quote”的變量傳遞給返回以在瀏覽器中呈現(xiàn)的 home.html 模板。
if __name__ == '__main__': 行用于檢查腳本是直接運(yùn)行還是作為模塊導(dǎo)入。如果直接運(yùn)行，則 app.run(debug=True) 行啟動(dòng)開(kāi)發(fā) Web 服務(wù)器并運(yùn)行應(yīng)用程序。debug=True 參數(shù)用于在開(kāi)發(fā)期間啟用交互式調(diào)試器。
我們從 ChatGPT 收到的下一條指令可以在以下屏幕截圖中看到：
讓我們按照 ChatGPT 建議的步驟創(chuàng)建一個(gè)新文件夾 templates，并在該文件夾中創(chuàng)建一個(gè)新文件 home.html：
mkdir templatestouch templates/home.html
將 ChatGPT 中的 HTML 代碼復(fù)制并粘貼到 home.html 中。
這是一個(gè) HTML 頁(yè)面模板，它顯示一個(gè)標(biāo)題為“史蒂夫·喬布斯的名言”的網(wǎng)頁(yè)，一個(gè)具有相同標(biāo)題的標(biāo)題標(biāo)簽，一個(gè)顯示從后端傳遞的名言的 div 元素，以及一個(gè)標(biāo)有“更改名言”的按鈕，單擊它時(shí)，重新加載網(wǎng)頁(yè)。該模板還鏈接了一個(gè) CSS 文件，用于設(shè)置網(wǎng)頁(yè)樣式。
接下來(lái)我們將收到有關(guān)將 CSS 代碼包含到 Flask 項(xiàng)目中的說(shuō)明：
通過(guò)輸入以下命令再次遵循這些說(shuō)明：
$ mkdir static$ touch static/styles.css
最后，我們將 CSS 代碼從 ChatGPT 復(fù)制并粘貼到 styles.css。
就是這樣，我們準(zhǔn)備測(cè)試一切是否按要求工作。輸入以下命令啟動(dòng)Web 開(kāi)發(fā)服務(wù)器：
python app.py然后，我們應(yīng)該在命令行上看到以下響應(yīng)：
服務(wù)器在本地端口 5000 上運(yùn)行，接著，在瀏覽器中輸入127.0.0.1:5000就可以訪問(wèn)該網(wǎng)站了：
現(xiàn)在，我們的網(wǎng)站頁(yè)面就完成了，通過(guò)瀏覽器，我們將看到我們希望的頁(yè)面輸出樣式，與我們的要求完全相符合。
選擇并顯示隨機(jī)報(bào)價(jià)，我們可以使用“Change Quote”按鈕隨機(jī)選擇一個(gè)新的并更新，我們將得到以下頁(yè)面效果：
總結(jié)
關(guān)于ChatGPT這個(gè)AI工具，它可以實(shí)現(xiàn)的事情，遠(yuǎn)不止實(shí)現(xiàn)一個(gè)網(wǎng)站頁(yè)面模板，它可以做的事情還非常多，ChatGPT的出現(xiàn)，算是AI領(lǐng)域的一個(gè)重大突破，為啥這樣說(shuō)，因?yàn)?，它的語(yǔ)言模型更加接近人類語(yǔ)言，不會(huì)像一個(gè)機(jī)器人那樣死板，它會(huì)有所變通，如果你也喜歡AI，熱愛(ài)機(jī)器學(xué)習(xí)的話，可以自行下載安裝一個(gè)來(lái)體驗(yàn)一下，在使用的過(guò)程種，用英文語(yǔ)言跟它交流會(huì)比用中文更加友好。
當(dāng)然，并不是說(shuō)不可以用中文，中文也一樣可以的，它做了大量的訓(xùn)練，支持很多國(guó)家的語(yǔ)言。
好了，今天內(nèi)容就先分享到這里了，希望你會(huì)喜歡，如果你覺(jué)得有用的話，請(qǐng)記得點(diǎn)贊我，關(guān)注我，并將這篇文章分享給你的朋友，也許能夠幫助到他。
前端大學(xué) 公眾號(hào) 祝 您:2023 年暴富！萬(wàn)事如意！
分享前端干貨，點(diǎn)贊就是最大的支持,
比心??