iT邦幫忙

2026 iThome 鐵人賽

DAY 16
0
Vibe Coding

學生身份如何每天透過Vibe Coding每天做跨領域的創新項目系列 第 16 篇

Day 16 文本?電影海報?線上策展?繞這麼多,其實最後是想要講 QR Code!

  • 分享至 

  • xImage
  •  

【Day 16】文本?電影海報?線上策展?繞這麼多,其實最後是想要講 QR Code!

掃個QR code,我們來看個文本改編的「電影」吧!midjourney示意圖!
▲ 圖 1:掃個 QR Code,我們來看場文本改編的「電影」吧!Midjourney 概念示意圖

今天我們也是來玩便攜式 vibe coding 吧!
不過其實已經有很多領域都說過了,
這次要不然⋯⋯
來說說看在數位人文上面很經常會遇到的線上策展吧!
儘管本身坊間就有很多線上策展平台,
以拖拉式的方式,或許是網頁,或許 VR 體驗,
透過線上的形式看藝術品,
但是或許互動的形式可以更加有趣⋯⋯


日常觀察與展覽經驗:北美館與超現實大師馬格利特

之前還挺常去北美館看展的說,這是超現實大師馬格利特的畫!
▲ 圖 2:之前還挺常去北美館看展的說,這是超現實大師馬格利特(René Magritte)的畫!

好吧我們回歸講解一下策展這回事吧!關於策展(Curation),會有以下三大重點,儘管每次我都只記得挑選🤣。

策展的三大核心精神

  1. 挑選:從龐雜的資訊或物件中,精準過濾出具代表性與對話性的核心元素。
  2. 安排:透過動線、視覺、次序的編排,決定觀眾接收訊息的節奏與前後順序。
  3. 詮釋:賦予展品或主題清晰的觀點(定錨),與當代社會或觀眾產生深刻連結。

馬格利特作品的線上說明!
▲ 圖 3:馬格利特作品的線上說明與多模態詮釋介面

以上的資料蒐集同樣是取自 Google AI 模式的說明,沒記錯的話之前上 HKMA 策展課程好像也是這樣子說。

當我們獲得數位內容的授權,可能是虛擬的蒙娜麗莎,虛擬的翠玉白菜,我們同樣能夠透過 vibe coding 度身訂造我們在線上展示的線上展覽頁面或者虛擬博物館。

  • 虛擬博物館:像是之前的光劍遊戲其實也可以轉化為,控制人物在虛擬空間前後左右移動,在 3D 的虛擬博物館空間看各種平面或者立體的線上展品。
  • 線上展覽:當然我們也可以像之前設計個人頁面一樣,用網頁的形式介紹實體展覽的展品資訊,然後再次像上次光劍遊戲一樣有機會可以引流市場的人到線下參觀,這不失為一種行銷的策略。

文本策展與 AIGC 小秘技:Midjourney 搭配 ChatGPT 製成「電影海報」

因為我不算什麼藝術家,不過可以拿來策展的內容也不單單只是畫作或者雕塑品,用文學的角度來看,文本也可能是一種藝術品!

那麼我們這次規劃多幾層!畢竟我自己就是一個有累積個人創作文本的人,然後我習慣會用 AIGC 嘗試為每一篇文本製作封面,有點像電影海報。

當然這邊也多說明一下 AIGC 小秘技!或許大家生成圖像不一定會用 ChatGPT 或 Gemini 來生成圖像,畢害早期 2022 年 ChatGPT 或 Gemini 還沒有做到現在多模態生成的功能,都是圍繞在文字產出這個部份。當時的人們可能都會用 Stable Diffusion 或者 Midjourney 做圖像生成,直到現在依然因為精緻程度以及個性化程度,依然有很多人用這兩個工具來製作圖像。

但是圖像上的文字生成依然是一個難關,儘管 ComfyUI 可以協助 Stable Diffusion 解決這個問題。但是或許大家都會注意到 ChatGPT 在生成圖像加上在圖像插入文字,儘管是繁體中文也已經能夠做到精緻化的處理,所以我們不妨用 Midjourney(這是我習慣使用的工具)製作出圖像後,再丟到 ChatGPT 加上文章的標題。讓圖像變成一個封面或者像是電影海報的內容吧!


Vibe Coding 實戰 Prompt 提煉:打造「致幻技電影館」互動體驗

話說會提起電影海報,是因為這次策展的規劃如下:

製作一個手機頁面方便顯示的介面,設計一個體驗名為「致幻技電影館」,這是一個如同視覺小說的遊戲,有對話框,玩家來到了一個奇怪的電影館,有一點破舊,於是打算進去探索一下,來到一個櫃檯發現裏面有一個員工,但因為四周太暗看不到對方的臉孔。

店員會問玩家是不是要看電影?玩家在好奇心驅使底下儘管害怕但說是,於是店員要求玩家出示 QR code,這個時候能夠使用相機的權限隨便掃描任何的 QR code,並且根據 QR code 掃出來的內容匹配以下四套電影之一:囍不喜、電子籤、氛圍編程、情人館。隨後我會上傳圖像及文本讓你設計對話內容。

玩家掃描 QR code 之後便會出現相關的電影海報,可以選擇看或不看,不看的話海報會先收藏起來,之後也可以重新選擇回來。之後決定後店員便會引領自己到陰暗的電影院看電影。根據不同的文本內容會有不同的心得,沒想到意外的電影館裏面店員會在自己旁邊聊天。最後看完後會看見店員可愛的外表(性別不明但是擁有雌雄同體的可愛外表,為什麼永遠都是這個⋯⋯),自己似乎心動了,或許自己應該再約這個店員多看一點電影,店員也親暱的叫對方有機會多來,然後結束這次的體驗。最後有一個如同電影落幕的名單,說明文本及圖像創作者叫做「白櫻蒼成」。

💡 提示:以上內容直接複製並傳送至 Google AI Studio 或 Antigravity,即可全自動生成具備相機掃描 QR Code 權限與視覺小說式互動流程的「致幻技電影館」完整專案!


手機端實作突破:相機 QR Code 權限與 AI Studio 多媒體上傳技巧

掃QR code的功能!
▲ 圖 4:在手機端 Google AI Studio 實作相機呼叫與 QR Code 即時掃描功能

手機AIStudio上載檔案的畫面!
▲ 圖 5:在手機端 AI Studio 縮小瀏覽器畫面,即可在程式碼檢視頁面直接上傳外部文本與海報檔案

不單單只是 QR code 的權限,這次要挑戰的也包括透過手機瀏覽器的 AI Studio 上載文件及圖像(記得要按儲存)讓 AI Studio 讀取上載文件建立比較完整的體驗。

至此透過篩選出自己科幻的文學文本及製作 AI 圖像,透過手機上載文件及 QR Code 掃描的機制,建構出有趣的互動性線上展示體驗。希望符合數位人文跟策展的概念吧。

在手機端 QRcode 的掃碼結果跟電影海報!

▲ 圖 6:在手機端 QRcode 的掃碼結果跟電影海報!


📌 本篇重點整理

核心維度 重點摘要
策展概念(Curation) Vibe coding 前,先盤點手上有什麼數位內容材料,精準篩選適合素材、用心安排互動動線與節奏,並賦予全新的詮釋觀點(定錨),確保在生成數位體驗前具備充足且具差異化的規劃。
虛擬博物館與線上策展 透過 Vibe coding 我們能快速打造線上展覽與虛擬展館,無論是 3D 空間漫遊還是沉浸式視覺小說,皆能創造具吸引力的數位體驗,更可發揮將線上人流引導至線下實體參觀的行銷綜效。
AIGC 跨工具海報工作流 活用 Midjourney 在影像精緻度與藝術風格上的強大優勢,生成底圖後再丟進 ChatGPT 進行精準繁體中文字體排版渲染,無痛解決圖像生字難題,產出極富質感的電影海報封面。
手機端 Vibe Coding 技巧 不僅能讓 AI 實作調用手機相機掃描 QR Code 的互動權限,更可透過「縮小手機瀏覽器視窗」的小技巧,直接在 AI Studio 程式碼介面上傳自訂文本與圖像資源,實現多媒體整合開發!

上一篇
Day 15 我們從地圖出發,用遊戲化的方式,不單單是要了解地域文化,向前推演,還要看這個地方的未來!
下一篇
Day 17 邪門歪道!從企業官網的網頁結構分析企業!
系列文
學生身份如何每天透過Vibe Coding每天做跨領域的創新項目 共 19 篇
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言