OpenAI 成近期頂流團隊？如何使用 OpenAI 和 Node.js 構(gòu)建 AI 圖像生成器？
摘要: 12月7號，知名人工智能研究機構(gòu) Open AI 在Youtub上發(fā)布視頻介紹使用OpenAI 和 DALL-E 模型創(chuàng)建一個網(wǎng)絡(luò)應(yīng)用程序，該應(yīng)用程序?qū)⒏鶕?jù)輸入的文本從頭開始生成圖像。https://www.youtube.com/watch?v=fU4o_BKaUZE
前言??
大家好，這里是opentiny-official小助手前沿技術(shù)文章分享，用最通俗易懂的話分享業(yè)界前沿WEB技術(shù)是我們的座右銘~
介紹??
OpenAI API 幾乎可以應(yīng)用于任何涉及理解或生成自然語言或代碼的任務(wù)。他們提供一系列適用于不同的任務(wù)模型，并且還能夠根據(jù)自己的需求微調(diào)自定義模型。這些模型可用于從內(nèi)容生成到語義搜索和分類的所有領(lǐng)域，例如文本補充、代碼編寫、SQL翻譯、JS助手聊天機器人等。
12月7號視頻發(fā)布他們介紹了使用DALL·E 模型生成并處理圖像，并將作為API使用，這意味著開發(fā)者可以將該系統(tǒng)構(gòu)建到他們的應(yīng)用程序、網(wǎng)站和服務(wù)中。
opentiny-official小助手也跟著他們一起體驗了一些這款廣為熱捧的AI藝術(shù)生成的體驗工具~ 大家也快來試試吧
看看效果??
這次他們使用了nodejs作為后端，并輸入文本描述“frog on a computer drinking coffee”?(一只在電腦旁喝咖啡的青蛙)，選擇圖片大小“Medium”，點擊“Generate”，接下來靜待片刻，就出現(xiàn)了如下的圖片~ 是不是還挺 cool 的！ 下面咱們就可以跟著作者一步一步的實現(xiàn)下。
實現(xiàn)??
第一步 設(shè)置和安裝依賴
打開vscode編輯器，安裝node.js依賴
我們需要安裝Express 去創(chuàng)建路由，dotenv用于環(huán)境變量的設(shè)置
接著打開package.json文件，分別創(chuàng)建start和dev命令
第二步 引入Express服務(wù)端和ENV變量
創(chuàng)建index.js文件作為入口文件，分別引入express和detenv
新建.env文件,設(shè)置端口號為5000
其中OPENAI_API_KEY需要從OPENAI網(wǎng)站上申請
第三步 新增 Route 和 Controller
接下來我們創(chuàng)建一個route文件 openaiRoutes.js, 并在index.js新增使用openai的路徑
openaiRoutes.js文件中新增
可以使用Postman工具測試接口，發(fā)送POST請求
接下來我們新建一個controller, controller里新建文件openaiController.js,在這個文件里我們定義一個生成圖像的函數(shù)
并在openaiRoutes.js文件里引入
同樣也可以用Postman測試接口，可以看到同上圖一樣的json返回。
第四步 OpenAI 庫的請求和響應(yīng)
接下來我們在openaiController.js文件中引入openai的API接口creatImage, 具體使用方法可以查看
creatImage函數(shù)中定義prompt為Ploar bear on ice skates（一只溜冰的北極熊），n數(shù)量為1，大小size為 512x512。
同樣，我們使用Postman測試接口，返回結(jié)果為imageUrl
點開url地址，可以看到如下圖片~ 哈哈，真的有一只在滑冰的北極熊~
第五步 請求body數(shù)據(jù)
接下來我們啟用body解析，在index.js文件中添加Enable body parser部分內(nèi)容
并在openaiController.js中獲取到body解析的數(shù)據(jù)
同樣，我們用Postman測試接口，并在body中增加參數(shù)，這次我們設(shè)置的prompt為“man on the moon”(月球上的人)，size選擇為“mudium”
打開imageUrl查看結(jié)果, 有沒有一種奇幻的感覺~
第六步 前端設(shè)置 Frontend Setup
接下來我們新建一個public文件夾去放置靜態(tài)資源文件，并在index.js文件中設(shè)置靜態(tài)文件。
public文件夾里我們新建index.html
并新增css文件夾用于存放css樣式 ，css樣式可查看?public文件夾下。
第七步 表單事件監(jiān)聽
接下來我們需要為第六步創(chuàng)建的表單增加事件監(jiān)聽，在public文件夾下新建js文件夾并新增main.js文件。
此時我們點擊generate按鈕會在控制臺打印prompt, size的信息。
第八步 新增GenerateImageRequest()函數(shù)
同樣是main.js文件里，我們補充GenerateImageRequest()函數(shù)去調(diào)用/openai/generateimage接口，并設(shè)置DOM中顯示圖像。
以上步驟補充完成之后我們就可以看看最終效果啦。
演示??
輸入框中輸入“brad traversy person web development”，大小輸入“Medium”，顯示效果如下：
輸入框中輸入“cow dancing on a rainbow while juggling”，大小輸入“Medium”，顯示效果如下：
最后?
以上就是 opentiny-official小助手 本周的前沿WEB技術(shù)分享了，也歡迎各位愛好WEB的小伙伴一起互助交流~??歡迎關(guān)注我們接下來的開源項目—OpenTiny， 微信搜索我們的微信小助手: opentiny-official，拉你進群，了解它最新的動態(tài)。
?? Code:?
??OpenAI Docs:?
? All Courses:?
?? Show Support Patreon:??PayPal:?
?? Follow Traversy Media On Social Media: Twitter:?
Instagram:?
Linkedin:?
