AI Driven Design - 以OpenAI(ChatGPT+DALL-E)自動化網站製作

更新於 發佈於 閱讀時間約 5 分鐘

早在20世紀70年代就已經出現人工智慧語言-PROLOG語言,但此時這個語言還不是所謂的自然語言(接近人類的語言),直到80年代的第五代程式語言,被認為是未來軟體的開發方式;於是日本開始在第五代計算機系統專案上,投入了大量的研究和資金;而後90年代是類神經網路的出現,到21世紀的機器學習深度學習陸續出現。奠定了如今生成式AI工具的大量興起。

而在這樣大量AI工具已然成熟的狀況下,AI通用化(普及化)已是趨勢。數位產品的設計應該在這樣的發展下,思維要跟著改變,也就是所謂的AI Driven Design。個人與企業應該都要去思考,如何利用這些AI工具讓自己加快成長,利用AI自動化地節省不必要的資源浪費,將資源放置在更重要的決策上。

這裡我以一個簡單的方式來示範,我們在教育現場的使用需求,發展出一個協助工作流程的生成式AI產品。

OpenAI(ChatGPT+DALL-E)自動CI/CD產生特教網頁遊戲

這個需求主要來自於PTWA的特教班老師們,有這樣的需求。需要利用一些網頁的小遊戲來輔助教學。

首先連結好ChatGPT所使用的OpenAI API GPT-3,做為產生網站與圖片的API程式碼。關於chatgpt2website的程式專案說明,在另外的blog有進一步解釋。

然後利用flaskbootstrap 4wtform等套件完成以下介面。

raw-image

在inputbox輸入greedy snake game(貪吃蛇),然後執行Generate Website按鈕去呼叫openai.Completion.create function。

raw-image

這次又使用貪吃蛇做為例子。過了一分鐘左右產生以下網站。

raw-image

若覺得不夠完美,想要做修改,可以在首頁的下方按下Generated Websites的清單。

raw-image

進去後清單如下:

raw-image

點擊該檔案名稱(snake_game_1.html)旁邊的edit,進去以下編輯器畫面,所使用的是現成的套件CKEditor(一種WYSIWYG的免費套件),馬上就可以編輯剛從ChatGPT產生的網頁。

raw-image

修改遊戲畫面的背景顏色,立即產生效果。

raw-image
raw-image

也可以透過Create Image按鈕中呼叫openai.Image.create function產生圖片,透過編輯器放入剛產生的網站中。

raw-image
raw-image
raw-image

把紅點換成由AI產生出來的漢堡圖片。


以上所有的程式碼與圖片,都是AI從網路上學習並自動修改得來的,我只是換背景顏色和把紅點變成漢堡而以。這已經是不久未來的工作型態。

AI Driven Design是我們需要培養的思維。在做任何事情之前,我們要先找到可以協助我們的AI工具,然後以高維度來思考AI工具間的配合與創意產生,產生人類在工作中的價值。

目前即將面臨挑戰的工作就是繪圖師。生成式AI-Midjourney的毀滅性橫空出世,讓不懂繪圖的人也能產生高藝術性價值的圖片,其實很大部份人類從中扮演的角色,是培養文字描述(關鍵字)的精準度美感的敏銳度。我是支持生成式AI著作權的合法使用性,也就是所謂的「導演論」。這是不可逆的趨勢,就像當年MP3事件到各大音樂媒體公司不得不承認,並配合發行MP3合法下載的過程一樣,只會經過陣痛期但不會倒退。另外也包含之前提到的編劇也是,只要分潤機制做好,沒有人不樂觀其成。

prompt: 80s anime still, a young and beautiful girl showing her whole body with big eyes, charming lips, slender legs, wearing snow hat, sitting on the top center of mountain around cloud. retro fashion, muted pastel colors, by Tsukasa Hojo and Toshihiro Kawamoto

prompt: 80s anime still, a young and beautiful girl showing her whole body with big eyes, charming lips, slender legs, wearing snow hat, sitting on the top center of mountain around cloud. retro fashion, muted pastel colors, by Tsukasa Hojo and Toshihiro Kawamoto

上面的文字語法在Midjourney會產生這樣風格的圖片(但每次都不一樣,AI具有隨機性,現在其他人貼一樣的語法也不會一樣)。但這麼多張圖片,要選擇哪一張繼續精煉該圖片,是需要有思想的人類選擇出來的。

接著再用D-ID讓演員失業XD(人類的情感表達是複雜的,這頂多只能取代vTuber和新聞主播)

AI發展的加速,將成為一股強大力量,促使人類的思維也跟著改變。


留言
avatar-img
留言分享你的想法!
avatar-img
Ivan Chiou的沙龍
11會員
29內容數
脫北者的程視設界
Ivan Chiou的沙龍的其他內容
2024/06/20
這篇文章分享作者經歷申請出國留學的過程,包含取得學生簽證、入學大學以及感謝幫助的人。作者也提到在出國前仍在就讀臺藝大並完成課業,並對未來的英語寫作與拍攝生涯充滿期待。
Thumbnail
2024/06/20
這篇文章分享作者經歷申請出國留學的過程,包含取得學生簽證、入學大學以及感謝幫助的人。作者也提到在出國前仍在就讀臺藝大並完成課業,並對未來的英語寫作與拍攝生涯充滿期待。
Thumbnail
2023/12/29
這兩年在PAIA的時光,我們做了很多新的嘗試。 除了以下系統面的東西之外 PAIA系統上到雲端 正式區使用K8S自動擴展 使用Jenkins建置完整CI/CD mlgame上到PIP PAIA GA數據蒐集與廣告串接 VIP金鑰與AI認證機制 完成雲端付款機制與OpenID串接 P
Thumbnail
2023/12/29
這兩年在PAIA的時光,我們做了很多新的嘗試。 除了以下系統面的東西之外 PAIA系統上到雲端 正式區使用K8S自動擴展 使用Jenkins建置完整CI/CD mlgame上到PIP PAIA GA數據蒐集與廣告串接 VIP金鑰與AI認證機制 完成雲端付款機制與OpenID串接 P
Thumbnail
2023/11/28
參加技術研討會,就是去玩。 以前不是很喜歡參加社群,主要是因為自己覺得研究技術都沒時間,哪有時間花在social。 但後來發現,大部份的年輕工程師,很需要社交工程;也就是害怕寫code太孤獨,因此需要參加社群。那社群自然就成為培養年輕工程師,成為資深的最佳培養皿。 社群有廣大的年輕
Thumbnail
2023/11/28
參加技術研討會,就是去玩。 以前不是很喜歡參加社群,主要是因為自己覺得研究技術都沒時間,哪有時間花在social。 但後來發現,大部份的年輕工程師,很需要社交工程;也就是害怕寫code太孤獨,因此需要參加社群。那社群自然就成為培養年輕工程師,成為資深的最佳培養皿。 社群有廣大的年輕
Thumbnail
看更多
你可能也想看
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
沙龍一直是創作與交流的重要空間,這次 vocus 全面改版了沙龍介面,就是為了讓好內容被好好看見! 你可以自由編排你的沙龍首頁版位,新版手機介面也讓每位訪客都能更快找到感興趣的內容、成為你的支持者。 改版完成後可以在社群媒體分享新版面,並標記 @vocus.official⁠ ♥️ ⁠
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
每年4月、5月都是最多稅要繳的月份,當然大部份的人都是有機會繳到「綜合所得稅」,只是相當相當多人還不知道,原來繳給政府的稅!可以透過一些有活動的銀行信用卡或電子支付來繳,從繳費中賺一點點小確幸!就是賺個1%~2%大家也是很開心的,因為你們把沒回饋變成有回饋,就是用卡的最高境界 所得稅線上申報
Thumbnail
在正式以比較技術面角度來認識 ChatGPT / GPT 之前,我們先用幾個簡單的例子來認識 ChatGPT 以及語言模型可以做到怎樣的事情。 什麼是 ChatGPT? 簡單來說明,ChatGPT 是一個背後使用 GPT 語言模型的對話機器人,而它可以做什麼事情了?我們先來使用幾個常見的語言相關的任
Thumbnail
在正式以比較技術面角度來認識 ChatGPT / GPT 之前,我們先用幾個簡單的例子來認識 ChatGPT 以及語言模型可以做到怎樣的事情。 什麼是 ChatGPT? 簡單來說明,ChatGPT 是一個背後使用 GPT 語言模型的對話機器人,而它可以做什麼事情了?我們先來使用幾個常見的語言相關的任
Thumbnail
前言 AI人工智慧已經無孔不入的進入我們的日常生活中, 像是最火紅的ChatGPT、Midjourney…等等。 很多人不同的生成式AI創作歌曲、繪畫、寫文章、寫論文! 下一步是不是「自己的工作會被AI取代」? 讓我們一起來探討它! 何謂AI? AI(人工智慧)是人類設計出來的程式或機器所展現的智慧
Thumbnail
前言 AI人工智慧已經無孔不入的進入我們的日常生活中, 像是最火紅的ChatGPT、Midjourney…等等。 很多人不同的生成式AI創作歌曲、繪畫、寫文章、寫論文! 下一步是不是「自己的工作會被AI取代」? 讓我們一起來探討它! 何謂AI? AI(人工智慧)是人類設計出來的程式或機器所展現的智慧
Thumbnail
在chatgpt誕生之前,在下甚喜視國外之頂尖人工智慧公司,如deepmind等,其程式碼,惟程度不及,常需查詢官方文件,或運用print土法煉鋼大法,以觀察資料輸入函數前與輸出函數後之異同,遇到艱澀難懂語法大多需要費時於搜尋網路資源,近其覺得chatgpt可為之師,未來自行學習程式之人,如不明所見
Thumbnail
在chatgpt誕生之前,在下甚喜視國外之頂尖人工智慧公司,如deepmind等,其程式碼,惟程度不及,常需查詢官方文件,或運用print土法煉鋼大法,以觀察資料輸入函數前與輸出函數後之異同,遇到艱澀難懂語法大多需要費時於搜尋網路資源,近其覺得chatgpt可為之師,未來自行學習程式之人,如不明所見
Thumbnail
前言 ChatGPT 的熱門程度早已想當然而,企業們爭相開始導入 OpenAI 技術的應用,好比進入了 AI 群雄割據的年代,不過 Microsoft Copilot 的主權宣示,這個重視高生產力時代,將會暫時遠離一場腥風血雨的爭鬥。 回歸本次的主角「AI 客服機器人」,筆者將他應用於課程回覆的狀況
Thumbnail
前言 ChatGPT 的熱門程度早已想當然而,企業們爭相開始導入 OpenAI 技術的應用,好比進入了 AI 群雄割據的年代,不過 Microsoft Copilot 的主權宣示,這個重視高生產力時代,將會暫時遠離一場腥風血雨的爭鬥。 回歸本次的主角「AI 客服機器人」,筆者將他應用於課程回覆的狀況
Thumbnail
ChatGPT 的全名是「Generative Pre-trained Transformer」,簡稱 GPT。GPT 是一個由 OpenAI 開發的自然語言處理模型,它使用大量的文本資料來訓練自己並且可以生成自然語言文本,可以進行文章寫作、問答、對話等多種語言任務。在中文使用者中,通常也會稱其為「
Thumbnail
ChatGPT 的全名是「Generative Pre-trained Transformer」,簡稱 GPT。GPT 是一個由 OpenAI 開發的自然語言處理模型,它使用大量的文本資料來訓練自己並且可以生成自然語言文本,可以進行文章寫作、問答、對話等多種語言任務。在中文使用者中,通常也會稱其為「
Thumbnail
作者:陳華夫 AI深度學習的圖像識別、人臉辨識、機器翻譯、及自動駕駛都有比人類優勢創新之處。深度學習無法學得抽象的概念知識,因此無法遷移學習(TL),但人類的學習卻可以學習遷移(ToL),因此人類擁有通用智慧。
Thumbnail
作者:陳華夫 AI深度學習的圖像識別、人臉辨識、機器翻譯、及自動駕駛都有比人類優勢創新之處。深度學習無法學得抽象的概念知識,因此無法遷移學習(TL),但人類的學習卻可以學習遷移(ToL),因此人類擁有通用智慧。
Thumbnail
人工智慧語言-PROLOG語言,但此時這個語言還不是所謂的自然語言(接近人類的語言),直到80年代第五代程式語言,被認為是未來軟體的開發方式;於是日本開始在第五代計算機系統專案上,投入了大量的研究和資金;而後90年代是類神經網路的出現,到21世紀的機器學習、深度學習陸續出現。奠定了如今生成式AI工具
Thumbnail
人工智慧語言-PROLOG語言,但此時這個語言還不是所謂的自然語言(接近人類的語言),直到80年代第五代程式語言,被認為是未來軟體的開發方式;於是日本開始在第五代計算機系統專案上,投入了大量的研究和資金;而後90年代是類神經網路的出現,到21世紀的機器學習、深度學習陸續出現。奠定了如今生成式AI工具
Thumbnail
最近玩了一下近期很紅的 AI 工具 包括 Chat GPT,Midjourney 等 也看了網上許多人,對人工智慧 對各項領域的影響,以及未來發展性 個人主觀覺得,AI 在 5~10 年內 會有劃時代的進步,到時候的確 所有人的生活,產業型態都會改變 有些事物,會顯得格外重要 低階技術的迭代 先說,
Thumbnail
最近玩了一下近期很紅的 AI 工具 包括 Chat GPT,Midjourney 等 也看了網上許多人,對人工智慧 對各項領域的影響,以及未來發展性 個人主觀覺得,AI 在 5~10 年內 會有劃時代的進步,到時候的確 所有人的生活,產業型態都會改變 有些事物,會顯得格外重要 低階技術的迭代 先說,
Thumbnail
近來 OpenAI 推出新一代 ChatGPT 聊天機器人,又讓各界開始對於人工智慧在教育方面的應用,卻也產生了無限的爭辯與想像。 隨著疫情逐漸趨緩與各國解封,《AI+教育》 又再度重新獲得各界矚目,而且 AI 智慧也大幅提升,讓我們看看幾項值得關注的《AI+教育》 創新應用....
Thumbnail
近來 OpenAI 推出新一代 ChatGPT 聊天機器人,又讓各界開始對於人工智慧在教育方面的應用,卻也產生了無限的爭辯與想像。 隨著疫情逐漸趨緩與各國解封,《AI+教育》 又再度重新獲得各界矚目,而且 AI 智慧也大幅提升,讓我們看看幾項值得關注的《AI+教育》 創新應用....
Thumbnail
從MidJourney的AI生成算圖(繪圖)工具(可)讓人參賽得獎,到Open AI的Chat GPT聊天機器人(可回答、翻譯、寫程式、寫文章、藝文創作等),在2022年間讓我們普羅大眾玩得不亦樂乎,蹦出新滋味與玩法,彷彿AI這玩意兒又往人類想像的科技未來目標推進了好幾碼。
Thumbnail
從MidJourney的AI生成算圖(繪圖)工具(可)讓人參賽得獎,到Open AI的Chat GPT聊天機器人(可回答、翻譯、寫程式、寫文章、藝文創作等),在2022年間讓我們普羅大眾玩得不亦樂乎,蹦出新滋味與玩法,彷彿AI這玩意兒又往人類想像的科技未來目標推進了好幾碼。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News