指導老師:林俊銘 Dr. Chun-Min Lin
學生組員:組員:11244001劉柏瑞、11244006蔡易展、11244007黃珮珊、11244008李淑庭、11244017賴智昕、11244024劉名益、11244028葉淂賢、11244029柳玉亭
專題期間:2025/9 (Semester 1141) - 2026/6 (Semester 1142)
(By ChatGPT)
Exploring the Applications of Smart Store Technologies and Their Business Models
📙 偏重技術與營運整合分析 An Analytical Study on the Integration of Smart Retail Technologies and Operational Models
📗 偏重創新與商業轉型 Technological Innovations and Business Model Transformations in Smart Retailing
📕 若有比較與評估的成分 A Comparative Analysis of Smart Store Technologies and Retail Business Models
📓 偏重策略與實務應用 Strategic Applications and Business Model Design for Smart Retail Stores
4.1 專題成果報告 (Docs):包括專題名稱、摘要、前言、文獻或專有名詞說明、成果、結論與建議。
4.2 簡報(Slides)
4.3 Video (optional)
主題困難度(50%)
主題完整度(30%)
每周進度完成度(20%)
以上皆以個人貢獻度的個人分數評分。例如,主題困難度為50,但該組員完全沒有參與,則仍為 0 分。但主要製作的組員為50。但若確實為合作產出,則兩人都可得50。
6.1 學期目標
6.2 學年目標
Week02 颱風假(線上討論)
延續學長姊的"智慧考題系統"繼續延伸。
這個題目,是在做一個網路上的"選擇題測驗系統",可以做為演講的時候的遊戲,或者作為新人訓練時候的測驗。
主要的技術,是(1)必須要寫網路程式。這部分會由老師帶領一個學長(卜光明)來做。本組同學一起學習。
除了寫程式比較困難之外,這個系統有以下幾個部分的工作,可以讓同學參與:
(2)收集與整理考題分類,例如,學校新生入學最常見的問題。
(3)拍攝專題影片。
(4)設計專題品牌,設計標題、標語、LOGO、海報等。
(5)其他尚未想到的工作
(1)期中考核,老師打分數,看大家半學期的表現
(2)期末考核。預計在第16周,可能會上台報告(如果系上沒辦,就我們自己組內報告,老師評分)
(3)三下期中考核
(4)三下期末成果報告。會需要向全系報告,有校外評審。需繳交DOCX、PPTX、MP4
分工:需進一步討論,老師也可能要求全部同學所有技術都要先嘗試,以後再分工。
我們的專題主要技術為網頁程式設計。同學除了學網頁程式設計,還必須要學習影片拍攝與美工與文案設計。(多媒體)
之後每周進度,我們會由老師+學長分享程式設計進度。但是由同學們分享影片拍攝學習進度和其他工作進度。
1.海報軟體練習(初級、中級、高級)
初級:老師出題中
中級:老師出題中
高級:老師出題中
2.影片軟體練習(一部)
老師出題中
1.第一次會議,了解學長正在進行的線上考試系統。
2.討論拍攝影片的相關學習。
1.討論專題進度
✨這學期代辦事項:
專題企畫簡報(約第16週時繳交)(給評審打分而已,不上台報告)
拍一部影片(預計將影片放至系網,期許能夠有千人點閱! 影片種類、時間都不限,但老闆只有一個要求 「有趣」)(系上沒有強制要求,但當作是我們第一次的練習、試水溫)
✨下學期待辦事項:
簡報(需上台報告)
word檔
改進舊影片or拍新影片
程式設計小組,目前有三位:珮珊、名益、柏瑞
⚠️要記得找光明學長拿程式檔案⚠️
1.講解評分方式:
每個禮拜由老師打個人分數
依據每人每週五所匯報的進度進行打分
進度請匯報給珮珊,由珮珊進行統整後,上傳至google sites
⚠️沒交也不會提醒喔~就是得到一個漂亮的鴨蛋🥚
2.進度安排(❌大忌:每週開會只聽聽而已,卻沒動作)
每週需有進度:
程式組-根據老師給的流程進行
影片組-自行討論、籌畫影片(有需要就自行約一約開會)
💡影片用途:1. 專題報告時播放 2.放上系網招生 >>> ⏳時間:約3分內 🎬類型:有趣
1.影片組:擬定進度與定期討論時間,詳情如下:
🕐暫定討論時間:星期一、二早上、星期四、五下午 ⚠️若都不行,就假日線上⚠️
📆進度:
week 8:影片方向、劇本大綱(一)
week 9 :劇本大綱(二)、影片細節描述
week 10:劇本大綱完成
week 11:拍攝(一)
week 12:拍攝(二)
week 13:拍攝完成
week 14:產出成果和修改
week 15:產出成果和修改
week 16:交報告、影片
2.大家提出對影片方向&劇本大綱的想法:
淂賢:以短影片的形式呈現,可以開頭拋出一個問題,抓住觀眾的注意力。場景的部分,不一定要電腦教室,可以拍山脈、學校周邊的風景等等 ,有點像是過場素材那樣,這樣可以讓畫面更豐富一 點,比較不會讓人會感覺無聊。
🔗提供相關連結:https://www.youtube.com/watch?v=VawRg-QJ2nY
柏瑞:像淂賢一樣以短影片的形式呈現,可以寫一個劇本像網紅howhow拍的影片那般,有起承轉合,將有趣的橋段與我們要表達的事物結合在一起。
🔗提供相關連結:https://youtu.be/OoLBsi9nYuM?si=6n4vvtbrFaaONCAE
珮珊:像日本的日清泡麵廣告一樣,可能有好幾集30s的有趣短劇,既可以接在一起也可以拆開來,以符合不同場合的需要(ex:專題報告時or系網),且以分集的方式,比較不會讓人覺得影片太長而乏味。此外每集角色可以有關係,但不明講,讓觀眾自己發現巧思?
🔗提供相關連結:https://www.youtube.com/watch?v=I5o1cckR008
淑庭:一樣是以短劇的形式,可能可以五集,每集有不同角色代入,旁白的部分可以考慮一下,目前不確定。
智昕:提出相關舉例影片並對大家的想法進行分析&建議&提出大家互略的問題點等等。此外建議拍攝手法的改進:要用情境去營造問題,而不是感覺像影片中的人在提出問題,對觀眾來說後者的做法比較像是單純在看影片主角碰到的問題,與自己較無關聯,進而無法產生共鳴。因此應該用更生活化、貼近觀眾情況的情境。💡ex:很多困難作業→提出詢問問題→進入工商時間
🔗提供相關連結:
https://youtu.be/faMjos9Wd9c?si=iu6BNV0e83HHxcxA
https://youtu.be/G_D9YTn8Epc?si=cA7wM4jO9Q4ulR_P
https://youtu.be/-t2taEi6q4s?si=3df0zlQ1pJqXsoJN
🎥拍攝手法:一個人從介仁川堂(2C到2E)走來→人的背影→用情境去營造問題(抓住觀眾注意)(引導觀眾思考問題) →詢問問題💡ex:你是否想過如果有一個程式可以幫助我們完成任務該有多好?
11244001劉柏瑞
-本週進度:了解影片拍攝方向,我提出自身建議(可以運用how how的影片當做模板,來去介紹我們的專題,且不失有趣)
-預計下禮拜進度:劇情劇本的構想
-聽到或看到甚麼:得到啟發,有看到具體拍攝手法(起承轉合),以及劇情大綱的構想,重點在於是如何去引導問題,並去呈現出有趣性去吸引觀眾。
🔗提供相關連結:https://youtu.be/OoLBsi9nYuM?si=6n4vvtbrFaaONCAE
11244006蔡易展
-本週進度:影片方向、劇本大綱(一)
-預計下禮拜進度:劇本大綱(二)、影片細節描述
-聽到或看到什麼:預定的每週進度、劇本初稿、拍攝方式。在其他人發表劇本想法時,如有疑問的同時,也能聆聽疑問的地方。並且把疑問的點提出來,讓大家一起來討論出劇本大綱的構想,重點在於要怎麼提出一個引導式的問題來讓高中生想看這部影片
11244007黃珮珊
-本週進度:
影片組部分-參與開會,並拍攝照片、提供微不足道的建議和想法、撰寫大概的會議紀錄,方便大家日後查閱,會再找時間進行詳細整理,並放在Google site上。
程式組部分-創建GitHub帳號,並透過AI幫助,成功寫出第一個html網頁,並額外進行測試,加一行中英敘述,不過並不如我預期那般呈現,因此詢問AI原因,並加以除錯改進,此外將AI提供的流程紀錄在文件中,方便日後查閱學習。
-預計下禮拜進度:摸索一下GitHub平台的各功能,因為感覺很複雜,不太熟悉操作。
-聽到或看到甚麼:這個過程讓我想到以前考過的網頁證照,但是這與我當初用的軟體完全不同,GitHub 感覺比較偏讓我們從頭開始學,因此感覺也比較有挑戰一點。此外GitHub平台的介面功能似乎頗多,而且全英文,讓我覺得有點混亂和複雜,不過創帳號時的驗證方式是聽哪一個選項是鼓聲,我覺得這個蠻有趣的,讓我印象有點深刻。
🔗奉上微不足道的練習成果網址:https://huang-pei-shan.github.io/my-first-website/
11244008李淑庭
-本週進度:這禮拜進度:影片方向、劇本大綱(一)。
-預計下禮拜進度:劇本大綱(二)、影片細節描述
-聽到或看到甚麼:聽到大家的意見都很有創意,而且討論都很熱絡,參考了許多影片,而我本身注重的是影片的吸引性,也會觀察到每個人的關注點都不同。
11244017賴智昕
-本週進度:影片方向、劇本大綱1
-預計下禮拜進度:劇本大綱2、影片細節描述
-聽到或看到甚麼:排定每週進度、劇本初稿,拍攝手法/方式
🔗提供相關連結:
https://youtu.be/faMjos9Wd9c?si=iu6BNV0e83HHxcxA
https://youtu.be/G_D9YTn8Epc?si=cA7wM4jO9Q4ulR_P
https://youtu.be/-t2taEi6q4s?si=3df0zlQ1pJqXsoJN
11244024劉名益
-本週進度:成功創建 GitHub 也花了一點時間摸索這個網站 過程中遇到了蠻多問題的 生成網址 不太熟悉 請教了珮珊、我哥 終於是把它搞好了
也利用AI寫了第一個程式碼 並且增加了其他的元素進去 個人覺得還不錯看 歡迎大家參考 🤭
🔗GitHub 網址:https://liu-ming-yi.github.io/First-code/first.html
也會觀摩網路上其他人教的JavaScript的影片 學習一下有哪些程式碼可以去做了解 並且知道如何運用
🔗影片網址:https://www.youtube.com/live/uhLg6nVVTzY?si=5RmkKE-McfjoBCpm
-預計下禮拜進度:利用AI幫助設計網站 上傳一張照片jpg,並且顯示在index.html網頁上。
看第二集同樣的作者創作的教學影片
-聽到或看到什麼:目前看到了一些簡單的程式碼 主要是簡單的呈現一些 字體 那應為之前沒有學習過相關的資訊 所以說我非常地不熟 這些方面可能還要請教 珮珊、老師 請你們多多包涵拉 (●'◡'●)
因為GitHub都是英文字體 但我有聽說GitHub可以設定中文 但是找了一會還是沒發現
去了網路上找了一下 原來要使用Plugin 來輔助 才有可能把介面變成中文(漢化) 我試過了3次 都是沒成功.... 所以我還是右鍵翻譯好了
11244028葉淂賢
-本週進度:影片方向、劇本大綱。
-預計下禮拜進度:劇本大綱(二)、影片細節描述。
-聽到或看到什麼:線性故事,起承轉合,一般電影會有開頭、衝突、節尾這三個階段。
但考量到我們專題影片是要拍一部兩到三分鐘的影片,所以我覺得在影片開頭的時候,可以提出一個引導式問題,例如可以問:你有沒有想過如果有一套程式,可以解決你的課堂上的報告作業,提高你的學習效率,你會想嘗試嗎?
🔗提供相關連結:https://www.youtube.com/watch?v=VawRg-QJ2nY
11244029柳玉亭
-本週進度:影片方向、劇本大綱(一)
-預計下禮拜進度:劇本大綱(二)、影片細節描述
-聽到或看到甚麼:看到其他人都很積極的表達自己的想法也很認真的對待 也能在其他人有疑問的時候能去聽大家的不同意見然後再一起討論 總結最後大家一致認同的意見。
1.簡單瀏覽上禮拜團隊與個人的進度與成果:
老闆看完後,沒有其他太多的想法,但就代表說 做甲袂䆀👍(做的不錯)
老闆提醒程式組的同學,真正的大魔王是資料庫,等教材完成,就可以開始練習!
老闆對影片的想法實在不太多,但是對於程式新增功能的部分可是有20多年的心得,在這一塊有滿滿的想法,可以提點我們!
2.進行影片內容簡單討論:
等學長姊這星期五將程式再往上提升一階段,整體程式定案且更為具體之後,我們就比較可以根據現有程式的功能或用途等面向去想。
屆時需凸顯與學長姊專題不一樣的地方(有新增新功能等......)
⚠️要將報告模板傳給同學們⚠️
1.劇本架構討論
公益影片架構:✅
🔻人走過去(側拍、特效:畫面漸暗)
🔻旁白:你是否想過有一個網站可以提升學習效率?(貫穿影片的核心)
(加旁白,比較不無聊) (問題備案:夢想類的問題 💡ex:你會想要寫怎麼樣的程式?)
🔻情境1 (上方所述:人走過去+畫面漸暗+旁白)
🔻情境2 (主角苦惱+救世主詢問並慢慢引導進入主題)
🔻情境3 (下方所述:程式畫面+主題核心展現)
🔻程式畫面(從進到遠)
🔻討論畫面
🔻解決問題
🔻標語
✌結束
🔗參考影片連結:https://m.youtube.com/watch?v=btUtofVWWqw
宣傳廣告架構:
🔻引導
🔻程式畫面(程式→人)
🔻討論畫面
🔻解決問題
🔻標語
✌結束
🔗參考影片連結:https://m.youtube.com/watch?v=-V4v3Z85yyg (0:00~0:35)
定案:公益影片架構✅
※可藉由黑畫面+字幕+旁白=進行引導
🔗參考影片連結:youtube.com/watch?si=j9doFTzmsCHvzERG&v=Y23RPY7vQrE&feature=youtu.be
※旁白加入時機:黑畫面之後,程式畫面之前
※器材:領夾式麥克風、手機腳架(視情況而定)
2.劇本台詞、情境詳細討論
請看劇本👉https://docs.google.com/document/d/1Xc9cCx6IHzbaZG-BGVU7FrE_NiVd5BLp6qwrLejhqjQ/edit?usp=sharing
已設定共用,歡迎大家共同編輯,改進劇本💪
1.劇本台詞、情境詳細討論
📢決定新增情境4(主角實際操作+帶來的效果與好處)
🕐粗略估計各情境時長:
情境1→15s
情境2→45s
情境3→1m15s (核心)
情境4→45s
台詞&情境之詳情 請看劇本👇https://docs.google.com/document/d/1Xc9cCx6IHzbaZG-BGVU7FrE_NiVd5BLp6qwrLejhqjQ/edit?usp=sharing
已設定共用,歡迎大家共同編輯,改進劇本💪
2.品牌名&標語Slogan發想
品牌名發想:大致上以象徵智慧、文學造詣高的人物之面向去思考
品牌名決定方式:進行兩輪投票
👉第一輪投票:一人三票、10選2 👉第二輪投票:一人一票、2選1
候選名單
↪智慧問答系統(原本的名字) 0票
↪IAS(智慧問答系統的縮寫) 1票
↪Jimmy AI(除了象徵我們智慧的老闆之外,亦代表這款系統的創意發想人) 2票
↪文昌帝君0203(掌管文運、考試與功名的神祇,0203為祂的生辰) 7票/2票
↪文曲星(掌管文運的星宿) 0票
↪至聖先師-孔子(有教無類之教育理念的開創者) 0票
↪藍色鳶尾Aristea ecklonii/Blue Iris(象徵智慧、靈性) 7票/5票👑
↪八重櫻(象徵教養很好、端莊 ) 0票
↪金蓮花(象徵著勝利、成功) 0票
↪鼠尾草(象徵智慧與長壽) 1票
標語發想:xxx—學習上的好幫手。 / xxx讓我有更多的自由時間。
標語決定方式:代入品牌名後,順口的獲選。
👇最終決定👇
✅品牌名:藍色鳶尾AI / Blue Iris AI👉藍色鳶尾象徵"智慧" ※注音小教室:鳶ㄩㄢˉ
🔗關於藍色鳶尾之根據、來源連結:
https://www.picturethisai.com/zh-tw/language-flower/Aristea_ecklonii.html
✅標語Slogan:藍色鳶尾 AI / Blue Iris AI —學習上的好幫手。
3.決定地點、角色、器材等相關事宜
地點
—情境1:走廊
—情境2:教室
—情境3:電腦教室
—情境4:電腦教室、宿舍、教室、各地
角色
—主角:劉柏瑞 飾演
—救世主:葉淂賢 飾演
—爆肝的人1:黃珮珊 飾演
—爆肝的人2:劉名益 飾演
—旁白:李淑庭 擔任
工作人員
—攝影:該場戲未入境的人都可以擔任
—機動、道具、器材、場佈組:大家互相幫忙,團隊合作
器材
—畫質好的手機
—領夾式麥克風*N
(目前沒有,可能需要動用經費💰)(建議:1000元以下,需打統編開發票08152423)
—手機支架(視情況所需)
✨老闆獨家贊助:指向型麥克風、手機支架,歡迎善加利用✨
※小插曲:因為有時大家不小心討論太high,會以為這個系統是統整資料的,忘記本意是出題目,因此萌生不如就新增「統整資料」功能的想法,不過僅供參考(☞゚ヮ゚)☞
11244001劉柏瑞
-本週進度:與組員一起完成劇本,內容由四個場景組成,其中包含角色的安排、場地的選取、劇情三的介紹系統和劇情四最後用練習達到成果等
-預計下禮拜進度:拍攝1
-聽到或看到甚麼:我看到我們在經過了頭腦風暴後,順利的完成了劇本,雖然還不確定拍攝進度和成果是否能達到我們想要的成果,不過目前都還不錯、算是有好的開始吧
11244006蔡易展
-本週進度:大家一起利用星期四下午的時間到圖書館討論室討論劇情四要如何收尾以及我們的品牌名稱/標語,最後還分配拍攝的場景跟地點。
-預計下禮拜進度:拍攝1
-聽到或看到甚麼:劇本的結尾大家討論的很順利,但是在討論我們的品牌名稱跟標語我們討論了非常的久,最後是提出一堆覺得可以的品牌名稱後,大家一起來投票決定要那個品牌名稱。最終大家投票出來的藍色鳶尾花是當作我們的專題品牌名稱。
11244007黃珮珊
-本週進度:影片部分,參與開會討論品牌、拍攝等相關事宜。程式部分,使用google文件建立關於學習程式的筆記,但還很粗糙、簡略,會逐步慢慢完善。已把老師指定的「學習GitHub平台」之1~7項全數完成,都建在week08所提供的網站首頁上。此外在上週考試期間,突發奇想,將專業英文所要考的內容與程式結合,建立單字練習網站,給予大家有不同、多樣的複習管道,並且作為我一個初步學習程式的小作品。
-預計下禮拜進度:把自己的GitHub筆記整理完善,並增加對GitHub 平台和程式碼的相關知識,時間上如果充裕,就朝老師指定的「學習資料庫supabase」練習前進。
-聽到或看到甚麼:上禮拜看到單字練習網站真的呈現出來在網頁上時,蠻有成就感,雖然是詢問程式得來的,但仍舊有一點點小激動,效果比我想像中的好,後面還增加了洗牌功能,不過中間也是除了一點錯,這次的成功讓我覺得程式果然很有趣。但有成功就有失敗,在練習RWD時,我把index、css、json都建好了,並放在RWD資料夾底下,但選擇發布來源時,資料夾的地方卻只有根目錄和/docs,一直懷疑哪裡出錯了,大概找錯找了3個小時,也一直有在跟AI洽談、諮詢,程式碼也檢查過了,開始懷疑是平台建置出問題,因為我一直被平台寄信說建置錯誤、工作流程取消¯\_(ツ)_/¯,後面突然腦袋抽了一下,決定直接在原本網站後方自行輸入RWD網頁的路徑,就連到我建的RWD網頁了,原來根本就沒錯,RWD網頁早就建立好了,只是要連過去的方法被AI誤導了,導致我一直在鑽研為什麼不能選擇RWD資料夾作為發布來源。最後決定在原本網站的首頁建立按鈕,以便可以直接連到RWD網頁。懷疑過程式碼,也懷疑過平台,卻沒有懷疑過AI,本週心得總結就是「大意了」。
🔗提供相關連結:
我的第一個網站:https://huang-pei-shan.github.io/my-first-website/
RWD響應式網頁:http://huang-pei-shan.github.io/my-first-website/rwd/index.html
專業英文單字練習網站:https://huang-pei-shan.github.io/word-test-/
學習筆記:https://docs.google.com/document/d/1WNimXeWV4ee8fivIJvKYRI_97UebHX0zqvbBLRRu_D0/edit?usp=sharing
11244008李淑庭
-本週進度:一起討論後面情境四的劇本大綱,以及思考品牌名稱、標語,最後分配場景的地點和角色的分配。
-預計下禮拜進度:拍攝1
-聽到或看到甚麼:我看到大家討論都很熱絡也很有自己的創意,所以情境3有很多地方沒有很齊全,但希望下次拍攝可以順利。此外設計了logo,請至11/13開會紀錄查看。
11244017賴智昕
-本週進度:劇本定稿
-預計下禮拜進度:拍攝1
-聽到或看到甚麼:在這次會議裡,我們討論了劇本結尾,並訂定了品牌名稱,在這個過程中,團隊合作是非常重要的
11244024劉名益
-本週進度:成功創建 Supabase 並且設定好資料庫 也利用了在Github 上建立了與Supabase 連結的網頁 但是目前遇到的困難 Project URL 似乎起不了作用 我會在繼續尋找相關的影片 看網友說可能要另外創建 .env的環境變數 他的功能就是可以抓去 像是Key 或是 API 等資料 我也有看 YT上別人的教學
🔗影片網址:https://www.youtube.com/live/uFXweZepi1o?si=3XCaAsfSn24Kx9Q4
-預計下禮拜進度:繼續看HTML教學 第三部分 繼續設定Supabase 的東西
-聽到或看到甚麼:目前看到了 程式上的錯誤資訊 那目前還在摸索中 也有學到了其他HTML的標籤用法 如 img 超連結 新分頁 還有簡單的CSS 顏色代碼
11244028葉淂賢
-本週進度:討論劇本情境四要如何收尾以及品牌名稱要取什麼名稱。
-預計下禮拜進度:試拍情境一與情境二的劇本。
-聽到或看到甚麼:雖然劇本結尾討論得很順利,然而在品牌名稱發想的部分,大家都在絞盡腦汁,想出最合適的品牌名稱。最終投票選出藍色鳶尾花當作品牌名稱。
11244029柳玉亭
-本週進度:從缺、待補( ఠ ͟ʖ ఠ)
-預計下禮拜進度:從缺、待補( ఠ ͟ʖ ఠ)
-聽到或看到甚麼:從缺、待補( ఠ ͟ʖ ఠ)
1.了解現在系統的開發狀況:
有購買GPT API,以方便我們將使用者輸入的資料回傳給GPT,並進行出題。
上傳資料的方式不一定只能用文字,也可以使用連結,但目前使用連結的方法時好時壞。
目前看到的功能:作答完畢後會出現分數以及正確答案
預計一個禮拜內,學長會將程式上傳到老師的GitHub帳號,以便我們拍片使用。
組員提供的其他想法:是否可以引進別的AI的開源碼直接做使用?
老師回答:目前不行,但有一個小AI正在問世,或許以後可行,不過可能需要黃仁勳出產的GPU。
1.正式拍攝影片:情境1&情境2
拍攝:採用不同鏡位的方式進行
收音:因雜音眾多,因此選擇事後配音
設備:5個人的手機
場景:學校走廊&露天走廊、一樓樓梯~二樓某處的陽台
演員:劉柏瑞、葉淂賢
攝影組:蔡易展、黃珮珊、賴智昕、劉名益、葉淂賢
後援組:李淑庭、柳玉亭
11244001劉柏瑞
-本週進度:拍攝情境一和情境二
-預計下禮拜進度:拍攝二
-聽到或看到甚麼:首先在拍攝的時候我覺得和我想像的不一樣,在進行實體拍攝時要考慮的東西有很多,不管是鏡頭的角度、人物的動作、還是受到干擾(可能有人路過等)種種不可控因素,這些是在寫劇本的時候沒有想過或以前沒有遇過的,不過幸好在大家的努力之下有順利的完成了,希望之後的拍攝可以一切順利,之後可以越做越好。
11244006蔡易展
-本週進度:拍攝情境一與情境二
-預計下禮拜進度:拍攝二
-聽到或看到甚麼:本週進行第一次情境試拍。在拍攝的過程中,要先考慮到是否有物品干擾。像在拍攝情境一的時候,我們就有嘗試用雙機位拍攝。剛開始沒想到第二台拍攝者會入境;後來想到了!因此我們用了不同的方式拍攝。情境二,同樣用雙機位的方式進行拍攝;在拍攝過程中要先思考一下怎麼拍才不會被樹枝遮住來影響我們拍攝的成果,不過在大家的努力之下,我們完成情境一跟二的拍攝。希望之後的情境可以越拍越好。
11244007黃珮珊
-本週進度:參與拍攝、整理自己的GitHub筆記
-預計下禮拜進度:先放棄整理筆記,朝老師指定的練習前進
-聽到或看到甚麼:拍攝的部分,心得就是「臺上一分鐘,臺下十年功」,雖然從以前就覺得拍影片確實就是如此,但這次拍影片,更讓我體驗到了這種無力感,事前準備了很多,所有的東西我們都盡力想得完善,但正式拍攝的時候總是有一些問題浮出,很多因素在影響著整個拍攝,總給人一種吃力不討好的感覺。我們這次拍攝花了大概1.5小時,但可能內容只是影片的1.5分鐘,讓我真的很佩服那些戲劇、電影的製作組們,整個影片都是他們付出的心血呢。
程式的部分,受到了挫折,雖然跟程式完全沒關係,總之決定先放棄整理筆記了,原本打算有系統性的整理GitHub的使用攻略,讓其他同學如果想學程式或使用GitHub也可以輕鬆上手,但發現GitHub真的一堆功能,光是首頁就好幾個。在撰寫攻略時,我自己需要先去理解該功能,但是GitHub內部的說明是英文的,雖然可以直翻成中文,但有的時候翻譯可能不正確,導致讀起來整段很抽象,因此光是整理並理解一個部分,就花上許多心力和時間,這是放棄的第一個原因。第二個原因,是因為每一個功能點進去後,都可以再往下延伸至更多的功能,讓我有點不知所措,不知道要全部做完再做下一個功能的介紹,還是先停在一部分,先做另一個功能的介紹,所以有一點做到懷疑人生。不過透過這次的經驗,讓我很佩服老師,可以有系統性的整理出上課講義,讓我們上課的時候只要跟著講義學習並自己補充重點就好,從0開始整理真的很不容易呢。最後一個原因,是因為感覺這樣整理,好像有點偏離了方向,沒有學到程式,反而變成了文書處理的感覺,然後自己也整理得很鬱卒,還不如構思創意、創新的網站,似乎會比較開心一點,因此目前學習筆記的部分,打算學到什麼記什麼,系統性的整理就等以後有心力的時候再做,所以目前只開放給老師檢視這拙劣的筆記,其他同學若有興趣想觀摩我的筆記,可能要等一陣子了,也可能等不到了?¯\_( ͡° ͜ʖ ͡°)_/¯。
🔗提供相關連結:
學習筆記:https://docs.google.com/document/d/1WNimXeWV4ee8fivIJvKYRI_97UebHX0zqvbBLRRu_D0/edit?usp=sharing
11244008李淑庭
-本週進度:拍攝情境一和情境二
-預計下禮拜進度:拍攝二
-聽到或看到甚麼:在拍攝時,要考慮到的不只是場景、還有角色在鏡頭下的表現,以及各種不同角度的拍攝,收音問題⋯等問題,我覺得我們影片以第一次而言算不錯了,因為整個調整及收音都要花許多時間,一個畫面都不知拍了多少次,卡了多少遍,才有滿意的成果,我也相信會越拍越好。
11244017賴智昕
-本週進度:拍攝一
-預計下禮拜進度:拍攝二
-聽到或看到甚麼:我們在拍攝時,使用了多個鏡頭、多個視角,讓我們的畫面不會太單調,在拍攝過程中,我也盡可能的去了解淺在問題,同時也有進行場勘,再拍攝時也會有些突發狀況(例如:有人路過、意料之外的聲音、天氣因素等),我們必須去依依排除這些突發事項。
11244024劉名益
-本週進度:
1.重新創建Github的Project 並優化之前的內容以及新增一些人性化的功能
2.查詢LM Studio 並查詢了一些相關資料 感覺可以加在我們的程式裡面
3.LM Studio:主要功能可以自己訓練AI 它裡面會有蠻多的小模型可以選擇 但是前提你的記憶體要夠大 不然到時候運算過程會爆掉( ° ʖ °)
4.繼續學習HTML的語法
-預計下禮拜進度:繼續收尋LM Studio 的資訊 及 Supabase 的設定(繼續摸索中) 可惜我哥還沒交到 不然就可以狂問他了
-聽到或看到甚麼:在重新整理的Github過程 我發現了感覺還可以再加入一堆東西進去 蠻多靈感的🍄順便把相同的資料全部放在一起 不然到時候還要跑去其他資料夾找 有一點麻煩 所以我就把它全部統整到一起了(╹ڡ╹ )Supabase 資料庫的部分 Emm 還是沒有成功 感覺少了一點東西🤔 這部分因為是算蠻新的東西 所以可能還要再等等看吧 看網路上面會不會有人出教學 目前一樣是卡在 Project URL LM Studio 的功能類:似ChatGPT 可以在裡面問一堆問題也可以餵一堆資訊給他讓他學習是個非常棒的語言模型 想要玩看看的話可以去下載試試看(⁎⁍̴̛ᴗ⁍̴̛⁎)
🔗提供相關連結:
1.HTML:https://www.youtube.com/watch?v=AlLwsrTOAgU&list=PLqivELodHt3iF_Spzdz_6LsOSPOyfDx-R&index=3
2.LM Studio:https://youtu.be/c7t08lPxwW4?si=DfNcGBDfkuX_MvyF
3.GitHub Project 1:https://liu-ming-yi.github.io/Learn-HTML/Web-Design-1/Index.html
4.GitHub Project 2:https://liu-ming-yi.github.io/Learn-HTML/Web-Images-Design-2/Index.html
11244028葉淂賢
-本週進度:拍攝情境一與情境二
-預計下禮拜進度:拍攝二
-聽到或看到甚麼:這禮拜進行第一次的試拍,之前討論劇本內容的時候,沒有仔細考慮到情境一與情境二的場景是否會因為有樹枝遮擋,進而影響拍攝效果。不過我們嘗試用雙機位的方式(用了兩台手機以上攝影),就不太會受到影響,同一個情境拍攝的角度也會比較豐富。
11244029柳玉亭
-本週進度:從缺、待補( ఠ ͟ʖ ఠ)
-預計下禮拜進度:從缺、待補( ఠ ͟ʖ ఠ)
-聽到或看到甚麼:從缺、待補( ఠ ͟ʖ ఠ)
🔗提供相關連結:
1.討論專題後續進行方向
使用AI進行影片生成
目前推薦使用Google的Gemini 3
聽說打幾個關鍵字就可以進行生成
2.原訂將程式上傳到GitHub的部分
因為碰到一些難題,所以目前將專題的全部程式上傳到GitHub的部分可能要延後。
1.研究、測試利用AI生成影片
前情提要:因為Gemini 3的影片額度有上限,因此改用別的方法。
工具:Gemini 3的Nano banana(生成圖片)➕Grok(生成影片)
指令:詳細下指令過程,需登入以下贊助者的帳號查看。
成果:如右圖所示,完整圖片&影片部分請查看LINE群組。
✨獨家贊助:淂賢的Gemini 3 Pro帳號、柏瑞&名益的Grok帳號、名益的筆電✨
(老師現身:圖書館實在要頒發獎狀給你們 :)
11244001劉柏瑞
-本週進度:了解Ai影片並實際去生產
-預計下禮拜進度:拍攝影片or繼續研究AI生成影片
-聽到或看到甚麼:這週我們利用google Gemini和grok來實際去做測試,在測試的時侯我們發現ai在生成影片的時侯需要下的指令需要準確,例如當你輸入人物動作要自然時,會使得影片人物動作加快,或是人物和場景會突然出現和放大,但如果將要描述的場景詳細化,例如我要人物有坐下的動作呈現,它就會變得正常且符合我們想要的需求,雖然此次測試的影片長度沒有很長,但我相信之後我們可以讓影片變的更長且完整。
11244006蔡易展
-本週進度:使用生程式AI生成影片
-預計下禮拜進度:拍攝影片or繼續研究AI生成影片
-聽到或看到甚麼:因為我們目前還沒有程式,因此沒有辦法繼續拍下一個情境。老師請我們先轉向研究AI,我們使用了Gemini pro跟Grok來生成照片跟影片。先用請Gemini生成圖片之後,丟給Grok生成影片,但丟給Grok生成我們所要的影片時,需要給Grok準確的指令;不然會憑空出現人物等等的東西。準確給Grok指令,不但可以生成我們所要的影片,也不會受到任何使用限制。
11244007黃珮珊
-本週進度:參與開會,一起測試如何利用AI製作影片。完成老師指定的資料庫Supabase 練習。
-預計下禮拜進度:整理程式相關筆記,或者將腦中的靈感具象化成網頁。
-聽到或看到甚麼:
影片組部分-我們原本是要用Gemini 3製作影片,不過因為需要pro版本,且次數有限,因此我們另批蹊徑,我們先利用Gemini 3的Nano Banana產生我們要的圖片,再將這個圖片貼到Grok生成影片,之後再陸續下一些指令修改,雖然指令有時候可能下得不好,所以影片會呈現一個很奇怪、獵奇的走向,不過整個過程很輕鬆也很有趣,大家一起研究AI,一起互相吐槽AI,最後也產生不錯的成果,相信我們再多測試、研究一下,可以產出更棒的成果。至於要怎麼剪接在一起,我覺得可以中間弄特效轉場,這是最簡單、粗暴的方法,另一個方法就是,將第一個影片的最後一個畫面截圖,再貼給Nano Banana繼續生成可能同一個風格辦公室但是不同辦公環境的圖片,或者貼給Grok生成不一樣的影片,就不會導致影片的生成被侷限在過往的紀錄,因此不管怎麼下指令,都無法呈現出我們要的樣子。然後發現有新聞說,因為Gemini 3太夯!所以要限縮免費次數,如果我們是用免費版的話,就可能會受到波及。此外我有查到別人分享利用Gemini 3 Pro製作HTML,並直接在HTML中有一個影片介紹相關的東西的指令,或許我們可以參考並改進看看。(不太確定理解的對不對,但他應該是一個網頁沒錯?)
程式組部分-這次先進行了資料庫Supabase的練習,雖然也是有產生一些問題,但我覺得整體過程還算順利。一開始搞了一個烏龍,GitHub網頁並沒有跑出資料庫的資料,後來發現,因為我沒有在資料庫輸入資料,當然沒有出現(◔◡◔),輸入完之後,仍舊無法顯示出來,就開始問AI可能的原因,並進行一些排查,一開始AI叫我檢查資料庫中的RLS是否開啟,如果開啟的話會沒有辦法顯示,不過他提供給我的步驟,我在頁面中根本找不到,因此最後直接把資料庫的頁面圖片貼給AI檢查,AI說:「你當然找不到,因為你沒有開啟RLS,所以RLS這方面沒有問題!」,最後AI叫我檢查一下網頁F12的錯誤資訊,發現程式碼中的宣告const supabase有問題,因為名稱跟資料庫的名稱一樣,因此會有衝突,所以改名稱就可以了。不過,還是沒有顯示,這就很神奇了,所以我又在資料庫那邊摸索一下,因為感覺不能太相信AI,果然還是要找一下RLS在哪裡,自己檢查一下,最後在一個小小按鈕不起眼的地方找到RLS,發現明明就是開啟的,所以才沒有辦法顯示,感覺又被AI傷了一次,經過這件事,結論就是「又大意了」。
🔗提供相關連結:
Gemini 3太夯! Google要限縮免費使用次數:https://reurl.cc/XamqZa
其他人利用Gemini 3 Pro製作的HTML 來源:FB-王伯達觀點:https://reurl.cc/1kG3Kp
沉浸式網頁紀錄片生成器 (Powered by Gemini 3 Pro) 來源:FB社團-AI 萬事屋-王伯達觀點:
https://www.facebook.com/groups/1400404308754327/posts/1416790670449024/
GitHub-Supabase 會員列表:https://huang-pei-shan.github.io/supabase-member-page/
11244008李淑庭
-本週進度:利用AI產生影片
-預計下禮拜進度:拍攝影片or繼續研究AI生成影片
-聽到或看到甚麼:因為我們沒有程式的關係,所以沒法繼續下一個情境拍攝,而我們則是先轉向研究起AI,我們利用了Gemini pro 最新功能Nano Banana Pro生成AI圖片,在起初我們用了很多AI軟體,例如:night cafe ,看他人生成的影片,卻也發現現在大多只能生成不到10秒的短片,有點像是GIF圖。所以我們改用先生成AI圖片,再利用Grok生成影片,然後前後拼接。雖然中途因為下指令而煩惱,但生成出來的圖片已經很好了。基本上遇到的問題是在打指令上,AI會誤解我們的意思,以及生成的影片大多都不超過10秒以上,所以可能要用拼接的方式。
11244017賴智昕
-本週進度:探討AI生成影片
-預計下禮拜進度:拍攝影片or繼續研究AI生成影片
-聽到或看到甚麼:原本我們這周的進度是拍攝第三、四幕,但由於遇到突發事故,因而改成探討AI生成影片,在這次過程中,我們用了許多不同的AI工具,並嘗試下指令生成圖片/影片,雖然在下指令時遇到些問題、AI生成狀況百出,但最後成果還不錯!希望未來我們更能掌握這項技術。
11244024劉名益
-本週進度:
1.重新創建 Github 的 Project 並優化之前的內容以及新增一些人性化的功能,例如返回到主頁
2.繼續學習 Html 並且新增其他功能或優化
3.利用 Gemini 與 Grok 來達成圖片動畫 (我覺得這個方面 可以多去下指令 達到 自己認為理想的圖片與動畫)
-預計下禮拜進度:
1.應為目前老師給的任務我基本上都弄得差不多了,可能就繼續把我的 Github 上面的程式碼 做一個優化吧?或是看看可不可以新增什麼好玩或有趣的東西
2.繼續使用 Gemini 與 Grok 下達不同的指令來創作一個動畫
-聽到或看到甚麼:
1.目前程式碼可能遇到了一些問題,所以我們改用了AI生成動畫看看可不可以做出一個另人滿意的動畫,那在這個過程我看到了大家團結的力量,有人提出問題,有人給出意見,也有人嘗試著下達指令,只為了生成出那短短幾秒的動畫,但在這個過程中,看到大家這麼認真的在使用AI科技這個部份我覺得非常的好,就是大家齊聚一堂很認真的討論,最後成功並顯示了出來。缺點:雖然AI可以快速幫我們實現動畫與圖片不過想要達成自己滿意的作品還需要更多耐心與AI 溝通,再來是如果想要讓影片時間變得更長的話,可能需要剪接,讓兩個影片結合在一起,不過這個方法可能會出現一點問題,像是兩邊的可能人物、裝潢、環境等等都會出現偏差,還有人物的臉型有時候會變一坨,看起來很像在看鬼片的樣子。我覺得這個還需要再等一會,因此這個技術才剛剛發佈不久,但是能做到這樣已經蠻好的
2.Supabase 資料庫的部分,終於成功顯示出來了,看了一下錯誤問題,原來在連結資料庫的部分, 原本程式碼的 62行 這邊用了 const supabase 因為定義名稱與supabase名稱撞在一起了 很像會衝突 所以在前端html那邊才會顯示不出來資料庫裡面的內容,那只要把這個部分改成其他的東西,可以隨便打拉反正名字不要一樣,就不會有衝突的問題。
🔗提供相關連結:
1.Gemini:https://gemini.google.com/app?hl=zh-TW 強大的AI 可以滿足你各種需求
2.Grok:https://grok.com/ 可以讓圖片變成動畫
3.GitHub Project 1:https://liu-ming-yi.github.io/Learn-HTML/Web-Design-1/Index.html 這次新增了流星雨
4.GitHub Project 1 Introduction:https://liu-ming-yi.github.io/Learn-HTML/Web-Design-1/Introduction-to-tag-syntax.html 這個是Project 1的語法解釋
5.GitHub Supabase:https://liu-ming-yi.github.io/Supabase/ 會員名單
11244028葉淂賢
-本週進度:使用生程式AI生成影片
-預計下禮拜進度:拍攝影片or繼續研究AI生成影片
-聽到或看到甚麼:使用 Google Gemini 和 Grok 分別生成圖片以及影片。雖然 Gemini Pro 的用戶能夠生成影片,但是每天最多只能生成兩部。所以換了一種方式,用Gemini生成圖片(Nano banana)之後,再丟到Grok上生成影片。這樣不但可以產出影片,也沒有使用上的限制;唯一的遺憾是Grok生成影片只有六秒,比 Gemini少了兩秒。
11244029柳玉亭
-本週進度:從缺、待補( ఠ ͟ʖ ఠ)
-預計下禮拜進度:從缺、待補( ఠ ͟ʖ ఠ)
-聽到或看到甚麼:從缺、待補( ఠ ͟ʖ ఠ)
🔗提供相關連結:
1.測試AI製作影片的能力(使用之AI為Grok)
主要測試方向:真實照片中的人物臉型是否會變化、連貫性、指令接收正確性
測試方法:找我們拍影片時的照片→開啟Grok→上傳照片→下指令:右邊的女生打左邊的男生→生成影片→將生成的影片的結尾做截圖→開啟新的Grok→上傳截圖→進行另一段影片生成
測試結果:
📌人物臉部的扭曲程度,會隨著截圖影片結尾再進行生成的次數增加而變嚴重。
📌若將影片結尾部分截圖,再進行生成,基本上看起來還算聯貫,但缺點就是人的臉或動作可能會隨著生成次數增加而漸漸扭曲。
📌AI是可以分辨左右邊的,如同我們所下的指令,成功讓右邊的女生對左邊的男生打了一拳,因此看起來指令接收正確性算高。
2.考慮更換專題方向
原因:因為我們的出題程式是網頁的形式,但GPT要求一定要是透過下載的那種APP形式,才可以引進GPT做使用,因此這部分的程式碼學長和老師還需要花上一些時間處理及改善,所以考慮更換不同的主題,以免影響後續專題的進度。
好處:有更多學習的空間、不會跟學長姐做的重疊、影片後續部分不會卡住。
壞處:進度要重新制定、影片劇本要改(主角的課業壓力→在校園迷路)
結果:全數同意更換專題方向🎉
3.新專題方向:智慧地圖系統
用意:方便各人士(學生、老師、家長、或其他校外人士)在偌大的學校中,可以輕鬆找到各教室、空間的位置。
特點:不管中文、英文、代號、暱稱等,都可以進行搜尋,並呈現出該地點的相關介紹以及在地圖上的位置,甚至可以進行導航。
使用場合延伸:可以應用在慈濟醫院,讓病人和家屬可以在偌大的醫院中,找到各科門診,讓求醫之路更順利。
目前進度:老師已經先架好基本程式與資料庫,並將這部分程式轉交給名益。
✨待新增功能:
👉將各教室不為人知的暱稱加上。
❓問題點:如何蒐集這些不為人知的暱稱?
👉點選教室名稱時,跑出該地點所在的樓層圖,並在地圖上用紅點標示該地點。
❓問題點:一個一個進行標示嗎?有1700個教室,會花上很多時間。
📌解決重點:或許同樓層的,可以共用一張樓層的圖片,但利用坐標軸的方式,可能先在資料庫為每間教室進行紀錄,以便後續進行不同位置的標示。
👉讓使用者可以根據需求,對不同的欄位進行排序。
❓問題點:搜尋結果是否會根據排序,而被重置?
👉根據使用者位置,進一步做路線指引、導航。
👉將圖片變成SVG檔,這樣即使放大或縮小也不會失真。
待完成事項&急迫度:
拍攝三校區地圖(影響程式開發進程)(未分配人員)=簡報製作(12/24繳交)(未分配人員)>影片(期末繳交)
📢老闆提點:影片內容除了有趣外,也可以把拍地圖&寫程式的過程片段放進去,有點像花絮畫面那樣:)
⋆。。˚ ☁︎ ˚。⋆。˚☽˚。⋆獨家採訪時間⋆。。˚ ☁︎ ˚。⋆。˚☽˚。⋆
📢獨家採訪:
名益寫出了一個導航地圖,在此程式中結合了OpenStreetMap開放街圖從而進行製作,儘管整體仍有許多Bug(定位位置不正確、搜尋不到正確地點等),但老闆覺得這是很好的作品,千萬不要放棄這項製作,可以去進行解決,並完善它,這對以後的履歷是非常有幫助的。
💥本採訪重點:
鼓勵其他同學也不要輕易放棄,或覺得自己的哪件事哪個部分做不好,就羞於見人,這些都是很好的經驗,可以幫助自己成長。
11244001劉柏瑞
-本週進度:研究ai影片生成和用Supabase做測驗教室位子
-預計下禮拜進度:拍攝校區照片or製作簡報
-聽到或看到甚麼:一開始我們先用之前拍的照片來去做實驗,用Grok把本來不會動的人做出動作,最後發現效果蠻好的,不管是動作的流暢度還是整體畫面上的呈現都很自然,過後是題目的轉換,因為老師和學長那邊有一些困難還沒解決,因此我們的專題主題換成學校教室位置呈現,目前只有用supabase來去做教室的查詢,在頁面中去搜尋要找的地方,它會給出相關詞匯的教室名稱,之後可能會變成在一個平面圖的呈現,並用紅點來去標記教室,點進去可能會介紹教室等內容,最後就是想ppt要如何去製作、三個校區的照片要怎麼搜集、和影片的製作。
11244006蔡易展
-本週進度:AI生成、地圖系統測試
-預計下禮拜進度:拍攝校區照片or製作簡報
-聽到或看到甚麼:本周跟上周一樣繼續嘗試使用Ai生成影片。然而,因技術上遇到難以解決的問題,因此臨時換了一個新的主題。新的主題是改成做一個可以找尋校園教室的地圖,只要輸入教室的代碼就會顯示出位置在地圖上,讓經常需要跑校區上課的同學,可以不用在煩惱教室在哪裡。如這個東西用成功的話,老師希望可以拿到慈濟醫院做使用,讓需要到慈濟醫院看醫生的病人可以不用在煩惱哪個科在哪裡怎麼尋找
11244007黃珮珊
-本週進度:參與開會,一起測試如何利用AI製作影片。與老師和名益一起了解目前老師已經初步做好的程式和資料庫,並討論接下來要新增的功能以及方向等。
-預計下禮拜進度:看看名益程式那邊有沒有甚麼我幫得上的地方(雖然感覺不多¯\_( ͡° ͜ʖ ͡°)_/¯ ),可能提供一些想法之類的。
-聽到或看到甚麼:我感覺我還是不夠了解程式的世界,像是要把資料庫的URL和key這類敏感的資訊藏起來,就會寫在config.js,老實說,我完全不知道為甚麼,哈哈哈,不過名益馬上就可以get到老師的點,讓我很佩服,總覺得很厲害,心裡會想說「這就是天賦嗎」哈哈哈,不過他除了天賦以前應該也有花很多時間去學習,總之讓我有種望塵莫及的感覺,哈哈,算是有一點挫敗。然後因為不懂上述提到的那個部分,所以昨天瘋狂問了劉名益一堆問題,也算是懂了一點點,但可能不夠全面。可能還是要多多學習。
11244008李淑庭
-本週進度:繼續研究AI影片和研究Supabase 測試頁面
-預計下禮拜進度:拍攝校區照片or製作簡報
-聽到或看到甚麼:AI影片的部分可以利用分鏡的方式,用比較短的秒數連結成影片,一樣是用Grok製作成短片,效果還不錯,只出了一點錯誤而已,而且很逼真。除了研究AI影片外,也聽到老師和學長這邊的出了一個問題,GPT沒法處理網頁資料,所以我們轉換成使用一個網頁結合資料庫,生成Supabase 測試頁面,此頁面中,可以搜尋會議,就會跑出學校裡有會議詞的地點,而點進某一個地點,就會前往另一個頁面,上面有介紹,底下有地圖,進階一點可能加個標示位置的紅點。
我們現在主要是先去拍三個校區的照片、想PPT的內容怎麼做,最後有時間再去拍影片。
11244017賴智昕
-本週進度:AI生成、地圖系統測試
-預計下禮拜進度:拍攝校區照片or製作簡報
-聽到或看到甚麼:本周我們依舊在使用Ai生成影片。然而,因技術上的問題,讓我們不得不改變主體,於是我們的主體改成製作智能的地圖系圖,幫助在特定區域容易迷路的人。
11244024劉名益
-本週進度:
1.繼續利用 Gemini 與 Grok 來達成圖片動畫
2.利用老師們已經初步做好的html 追加新的功能
3.大家一起討論如何讓AI生成的影片能夠讓影片時間變得更長,以及人物動作的變化
4.利用AI設計一張地圖 功能:定位自己在哪裡
5.利用AI新增新網站的功能:排序、收尋不僅可以打中文、教室代號也可以了、利用PicNo那一欄來抓取圖片對應圖片
-預計下禮拜進度:
1.繼續使用 Gemini 與 Grok 下達不同的指令來創作一個動畫
2.繼續跟AI聊天,讓她生產出一個另我滿意的程式碼
-聽到或看到甚麼:
1.目前老師說我們可能會需要重新設計新的網頁,因為原本的AI出題,有遇到一些問題,所以我們決定改用其他的方法
2.在新的網頁中我看到了1000多筆的資料,這些資料都需要新增一些功能如:圖片顯示..等等
3.也有看到原網頁也有出現一些小小的BUG 但這些都已經修復好了
🔗提供相關連結:
1.Gemini:https://gemini.google.com/app?hl=zh-TW 強大的AI 可以滿足你各種需求
2.Grok:https://grok.com/ 可以讓圖片變成動畫
3.GitHub Supabase TblSpace 查詢:https://liu-ming-yi.github.io/CampusMap01/
11244028葉淂賢
-本週進度:使用生成式ai生成影片以及測試supabase 找尋教室
-預計下禮拜進度:拍攝校區照片or製作簡報
-聽到或看到甚麼:這週跟上週一樣繼續嘗試用AI生成影片,不過原本的題目碰到了技術上難以解決的問題,所以臨時換了一個新主題。改成做一個可以尋找教室的功能,只要輸入教室名稱就會顯示位置,讓需要跑校區上課的人,不用再擔心找不到教室在哪裡。
11244029柳玉亭
-本週進度:從缺、待補( ఠ ͟ʖ ఠ)
-預計下禮拜進度:從缺、待補( ఠ ͟ʖ ఠ)
-聽到或看到甚麼:從缺、待補( ఠ ͟ʖ ఠ)
🔗提供相關連結:
因為原先規劃的線上考題系統,遇到了"網站無法直接向AI發送訊息"的技術難題。在取得同學們同意之下,題目朝向"校園地圖"的系統設計。
地圖系統除了程式+資料庫的學習之外,還有SVG檔案的製作與學習。
以下是老師與AI討論SVG的部分內容
將走廊平面圖從 JPG 轉為 SVG(保留線條與文字)
把一張含線條與文字的 JPG 轉成可編輯的 SVG,有三種常見做法。你可以依照精度與時間成本選擇。
方法一:自動向量化(快速,但文字通常變形)
工具選擇: Inkscape「Trace Bitmap」、Illustrator「Image Trace」、Potrace/Autotrace。
適用情境: 線條清晰、對文字無高保真需求,或可接受文字轉為路徑。
操作要點:
先做影像預處理: 調高對比、轉灰階、去噪、二值化,讓線條更乾淨。
分層追蹤: 先追線條(路徑),再獨立追符號(廁所、無障礙、出口)。
文字結果: 多數情況文字會變成「路徑」,不可編輯字元。若要保留可編輯文字,請改用方法二或三。
優缺點:
優點: 快速、線條保留度高。
缺點: 文字不可編輯,細節可能需要手動修補。
方法二:OCR 取文字+向量化線條(折衷,常用於地圖/平面圖)
流程概述:
線條向量化: 用 Inkscape/Illustrator 的追蹤功能,把牆、門、箭頭、樓梯、出口符號轉為路徑。
文字 OCR: 用 Tesseract、ABBYY、Google Drive OCR 等抽取文字(如「2E301」「男」「女」「無障礙」)。
重置文字: 在 SVG 中用 重新排版,手動微調位置/字距/字體。
關鍵技巧:
字型選擇: 若原圖無特定品牌字,選可讀性高的 Noto Sans / Noto Sans CJK / Source Sans。中英文混排更穩。
座標準確: 先在向量化後的線條層上加輔助框(房間中心點或門邊),再放置文字,保證對齊。
符號處理: 男/女/無障礙等可用簡單 SVG 路徑或字形圖示(Icon 路徑),避免位圖殘影。
成果特性: 線條是路徑、文字可編輯,檔案乾淨且後續維護容易。
方法三:手工重建為純 SVG(最高品質、最可維護)
做法: 直接用 SVG 形狀與文字重畫:
走廊與牆面: 、、。
門與開口: 或 ,用不同筆畫樣式代表門向與開口。
箭頭與出口: 自訂 或重複利用符號 …。
房號文字: 精確定位,必要時搭配 text-anchor="middle"。
適合情境: 你要長期維護、可程式化生成(例如逐層樣式切換、互動、高對比模式、可存取描述)。
附加好處: 文字可搜尋、可複製;線條可變更顏色/粗細;易加入互動(如點房號顯示資訊)。
三種常見方式,分別適用於不同需求:
✅ 方法一:(最簡單,但無法互動)
優點: 快速、相容性高,像 JPG 一樣使用。
缺點:
SVG 會被當作「圖片」,無法直接控制裡面的 、 等元素。
無法加互動(例如點房號顯示資訊、滑鼠移入變色)。
CSS 無法直接選擇 SVG 內部元素。
✅ 方法二:(可互動,但較少用)
優點: SVG 仍保留原始結構,可加互動。
缺點:
無法用外部 CSS/JS 操作裡面的元素(除非用 iframe 通訊)。
不如 相容性高,部分舊版瀏覽器不支援。
✅ 方法三:直接嵌入 SVG 原始碼(最強大,推薦)
優點:
可用 CSS/JS 操作 SVG 裡的每個元素(例如 .room:hover { fill: #ff0; })。
可加互動、動畫、響應式設計。
可用
</code>、<code>aria-label</code> 增加可存取性。</li> </ul> <li><strong>缺點:</strong> HTML 檔案會變大;若 SVG 很複雜,維護較難。</li> </ul> <p></p> <p>🔧 補充技巧</p> <ul><li>若你用 <code><img></code> 或 <code><object></code>,SVG 檔案需獨立儲存(如 <code>floorplan.svg</code>)。</li> <li>若你用嵌入方式,可搭配 Vue/React 等框架做互動式導覽。</li> <li>若你希望房號可點擊、顯示資訊、變色等,<strong>一定要用嵌入方式</strong>。</li> </ul> <!--EndFragment --></BODY></HTML>
可以的 👍。如果你想用「方法三」(直接嵌入 SVG 原始碼)但又希望 SVG 檔案獨立存放,在 HTML 中匯入,有幾種方式:
1.
優點:最簡單,瀏覽器支援度高。
缺點:SVG 被當成圖片,無法直接操作裡面的 、 等元素。
2.
優點:保留 SVG 結構,可互動。
缺點:外部 CSS/JS 不容易直接存取裡面的元素。
3. </code></p> <p><p><iframe src="floorplan.svg" width="800" height="600">
優點:完整載入獨立 SVG,支援互動。
缺點:和主頁面隔離,需跨文件溝通。
4. 最佳做法:用 或
:
(需把 SVG 存在 或外部 sprite):
→ 適合重複使用某些符號或房間圖示。
完全可以 👍。SVG 本身就是「向量圖形」,天生就能在不同解析度下保持清晰,而且它的 viewBox 與 百分比寬高設計,讓它非常適合 RWD(Responsive Web Design)。
🌐 SVG 在 RWD 的應用方式
1. 使用 viewBox + 百分比寬高
viewBox 定義了座標系統(例如 900×1600)。
width="100%" 讓 SVG 隨容器寬度縮放。
height="auto" 保持比例。
2. 外部檔案匯入也能 RWD
即使你用 或 ,只要在 CSS 設定:
img, object, embed, iframe { max-width: 100%; height: auto; }
就能讓 SVG 隨容器縮放。
3. 保持比例與排版
保持比例:建議設定 preserveAspectRatio="xMidYMid meet",避免拉伸變形。
自適應容器:SVG 會依容器大小縮放,適合放在 flex/grid 版面中。
互動元素:如果你在 SVG 裡有 或 ,它們也會隨縮放保持相對位置。
4. 進階 RWD 技巧
媒體查詢:可用 CSS 在不同螢幕大小下改變 SVG 顏色或隱藏某些元素。
互動式地圖/平面圖:可在小螢幕隱藏文字,只顯示房間框;大螢幕顯示完整標示。
可存取性:加上
</code> 或 <code>aria-label</code>,讓螢幕閱讀器在不同裝置上也能讀取。</li> </ul> <!--EndFragment --></BODY></HTML>
HTML 可以先顯示一張 JPG 畫面,再在上面「疊放」一個 SVG(例如紅色框框、箭頭、標示),只要使用 CSS 的 position: absolute 就能做到。
下面給您一個完整可用的、最乾淨的範例。
請存成 index.html:
<!DOCTYPE html>
<html lang="zh-Hant">
<head>
<meta charset="UTF-8">
<title>Overlay SVG on JPG</title>
<style>
.container {
position: relative; /* 讓 SVG 可以疊在 JPG 上 */
display: inline-block;
}
.base-image {
display: block;
width: 600px; /* 可調整 */
}
.overlay-svg {
position: absolute;
top: 0; /* 相對於容器定位 */
left: 0;
width: 600px; /* 與 JPG 同寬 */
height: auto;
pointer-events: none; /* 不阻擋滑鼠事件(必要!) */
}
</style>
</head>
<body>
<h2>JPG 上疊一個 SVG 紅色框框</h2>
<div class="container">
<!-- 底層 JPG -->
<img src="test.jpg" class="base-image" alt="Base Image">
<!-- 疊在上面的 SVG(紅色框,示範用) -->
<svg class="overlay-svg" xmlns="http://www.w3.org/2000/svg">
<!-- 紅色框框示例,依需要修改座標 -->
<rect x="100" y="80" width="200" height="120"
stroke="red" stroke-width="4" fill="none"/>
</svg>
</div>
</body>
</html>
📌 JPG 是背景
📌 SVG 透明背景,可畫紅框、箭頭、文字等
📌 SVG 透過 position: absolute 叠在 JPG 上方
📌 且 pointer-events: none 讓滑鼠仍可操作底圖
只改 SVG rect 的座標即可:
<rect x="100" y="80" width="200" height="120"
stroke="red" stroke-width="4" fill="none"/>
例如:
x = 左右位置
y = 上下位置
width、height = 框的大小
只要把 <svg> 改成:
<object data="svg01.svg" class="overlay-svg" type="image/svg+xml"></object>
即可把完整 SVG 疊上 JPG!
1.測試上次所要求追加的功能之成果
✅排序功能
(❓珮珊的建議:看不太出來點欄位可以進行排序,建議做個上下箭頭的圖示或註明,也可以點選後會變深色作表示)
✅點選空間名稱會跑出樓層圖
(⚠️有些地點圖片從缺,需補)
2.討論網站後續的相關優化&追加功能
📝缺少資料區:
📌某些地點圖片從缺,需補
🎨網站美化區:
📌網站畫面、文字設計更具美觀 (※言下之意:不要那麼陽春)
📌標題、欄位名稱專業&中文化 (SpaceNo=空間編號、SpaceName=空間名稱、CampusNo=.....)
📌有些欄位不需要顯示給使用者看 (sID、PicNo)
📌將CampusNo的內容轉換為實際校區名稱 (如果是1就顯示中央、2:介仁、3:建國)
📌將Floor的內容轉換為空間實際所在的樓層
✨新增功能區:
📌新增返回鍵,並返回到剛剛所查詢的結果
📌新增透過暱稱、別名,也可以查得到地點
📌RWD 響應式網頁:讓網站在不同裝置(如電腦、平板、手機)上都能自動調整版面配置
📌出現地圖的時候,將所查詢的空間用紅框框起來 (❓如果引進RWD,那版面是否會跑掉)
📢老闆有話要說:
學校目前沒有這種功能的網站,如果以後網站夠穩定,打算跟總務處申請,在校區各地圖的下方貼上我們網站的QRcode,讓大家可以掃描作使用。
QRcode下方還要註明「經營管理學系+我們的學號&名字」,好好地為我們系爭取一番知名度💪
📌 功能導向型
- 「校園地圖查詢系統」
- 「智慧校園定位平台」
- 「校園空間導覽網站」
🌱 學習與教育導向型
- 「跨域學習:校園地圖查詢專題」
- 「非資工生的校園資訊化嘗試」
- 「從零開始的校園地圖專案」
🎨 創意與文化導向型
- 「我的校園在哪裡?」
- 「校園尋路:學生自製地圖平台」
- 「走讀校園:互動地圖專題」
✨最終定案✨
校園尋路:慈大空間查詢平台
1.報告目前程式組網站的進度
預計新增的功能大致上都已完成,還有一些比較複雜的需要更多時間處理。
目前網站已上傳至GitHub: https://liu-ming-yi.github.io/CampusMap01/
由於是架設在GitHub上,所以會有延遲,甚至延遲到很像有bug,這屬正常現象。
📢老闆有話要說:
如果有其他同學對程式有興趣,歡迎向名益詢問相關事項,並一同學習、成長。
1.介紹目前網站的功能&大家試用
✅美化功能區除了網站畫面、文字設計外,其餘部分都已完成。網站外觀的部分會再陸續作調整。(美化功能區之詳情,請查看12/08之紀錄)
✅新增功能區已新增返回鍵,並且可以回到剛剛搜尋的結果。其餘部分較困難,仍在努力。(新增功能區之詳情,請查看12/08之紀錄)
⭐各方面進行優化
一開始進入網站時,顯示全部的資料
將排序順序變更為數字→英文→中文。
(還有其他優化事項,但是太雜且程式一直在變動,恕不一一列出,因為我也有點忘了(◔◡◔))
🔍發現可疑點:在校本部寫說有大林慈濟醫院、台北慈濟醫院,感覺就不太可能存在,不過還是需要實際確認是否為真。若需要修改要到資料庫進行。
2.老師交辦事項
考慮新增功能:計數器。💡ex:今日/這個月/今年/目前 在線/來訪人數
缺少的樓層和拍得比較歪的照片需要分配人力補拍,拍攝時盡量保持置中。
影片劇本隨著主題的改變需要進行內容變更
📢老闆有話要說:對網站有想法、想新增功能都可以在LINE群組提出來,讓老闆知曉你的想法與貢獻,此外小幫手也會一併將你的貢獻紀錄在Google Site中。
3.初步簡單的討論簡報
如圖所示。此外目前尚未分配人員進行製作。
4.整理需要補拍的照片
透過人工的方式,檢查沒有超連結的空間名稱,並將其照片編號記錄在Excel上,待整理之後,轉換成Google sheets並進行全體共用,亦新增一些功能,方便大家作使用、紀錄。
5.全體出發拍照(介仁校區)
📷進行方式:兩人一組,分別去介仁不同區域進行補拍。
22A-4、22A-B1:珮珊&名益
22C-3:易展&玉亭
22G-Extra:柏瑞&淑庭
22H-2、22H-3、22H-B1:智昕&淂賢
🖼️結果回報
22A-4、22A-B1:沒有平面圖❌
22C-3:完成✅
22G-Extra:完成✅
22H-2、22H-3、22H-B1:前兩項完成✅ 22H-B1為地下停車場,沒有平面圖❌
※小插曲:地下停車場雖然沒有平面圖,但是有很兇的狗,雖然有人牽著,但還是嚇到我們兩個優秀的組員了。因此我們幾人會合後,決定一起再去一次地下停車場,絕對不是想被嚇,是要一起去找地圖(●ˇ∀ˇ●) 此外,為了特別紀錄這個團結的時刻,因此將過程錄了下來,詳情請查看LINE群(☞゚ヮ゚)☞
✨獨家場外支援:名益的哥哥,提供程式方面相關技術之協助✨
------------------我是分隔線(⌐■_■)------------------
📌待新增功能:
計數器 💡ex:今日/這個月/今年/目前 在線/來訪人數 ---由帥氣的老闆所提供✨
(如果要做這個,需要向老師詢問,因為跟資料庫有關係)
把標題變成凍結窗格 ---由珮珊所提供✨
原因:當使用者在查閱一堆資料的過程中,如果面對一些欄位不懂是什麼意思時,就不用滑到最上面才能查看標題,且也可以隨時進行排序。
右下角加top按鈕,以馬上回到最頂端,進行查詢。---由珮珊所提供✨
原因:感覺就很方便
右上角有按鈕可以切換英文版 ---由珮珊所提供✨
原因:外籍生在找教室方面,可能比我們更困難,可能中文不好,也不好問人,有了英文版的除了可以自己努力找看看外,也可以拿著這個地圖向其他人比手畫腳來問路。
重設/清除搜尋結果按鈕,以返回到一開始所有資料的地方。 ---由珮珊所提供✨
校區/樓棟篩選。 ---由名益所提供✨
(截至2025/12/14)
📌已完成新增功能:
✅把標題變成凍結窗格>>浮動標題
凍結窗格會讓頁面裡面再多一個頁面,因此改成浮動標題的形式,依舊可以達到同樣效果。
✅右下角加top按鈕
✅重設/清除搜尋結果按鈕
✅校區/樓棟篩選
(截至2025/12/14)
11244001劉柏瑞
-本週進度:討論ppt製作 、平面圖拍攝
-預計下禮拜進度:做簡報&拍照
-聽到或看到甚麼:這禮拜有看到程式組寫的supabase並實際的去測試,也了解到需要樓層的平面圖的照片,因此我們當天有去拍攝,也完成介人校區的照片,之後便是討論ppt,有討論背景、目標、拆解圖和流程圖等。
11244006蔡易展
-本週進度:討論專題PPT的內容與拍攝介仁校區平面圖
-預計下禮拜進度:做簡報&拍照
-聽到或看到甚麼:看到程式組把平面圖放置上去,不過還有一些地方沒拍到或漏拍的。需要到現場補拍攝 這禮拜已先將介仁校區的平面圖拍攝完畢,目前只剩下建國與中央校區需要找平面圖拍攝 預計下週會先去拍攝中央校區的平面圖,拍攝完畢之後會協助拍攝建國校區的平面圖
11244007黃珮珊
-本週進度:修復返回鍵的bug&修改程式(但目前看到的成品都不是我修改和修復的,詳細情況請看後面的解釋)、提供一些建議和新增功能上的想法、當測試員測試網站有沒有bug或可以改進的地方、製作補拍照片紀錄表、與大家一起去補拍照片
-預計下禮拜進度:持續提供建議並測試網站、開始做報告、可以的話補拍照片完成
-聽到或看到甚麼:這週主要都是在向劉名益提一些建議,和發想新功能以及測試網站實際用起來順不順手,有沒有要改進的地方,我是覺得我的建議已經是多到會被嫌煩的程度了,哈哈哈。此外也有幾次機會是在修復bug和修改程式。分別講一下這部分的心路歷程,首先是修復bug,大概花了一兩個小時,在弄返回鍵的bug,終於弄好了,結果劉名益傳給我的那版程式好像原本就是錯的,所以返回鍵雖然沒有bug了,但其他部分有問題,他那邊的程式必須要先修好才行,所以我修改的整版程式變廢案了。再來是修改程式的部分,我和劉名益在學校裡用他的筆電一起修改程式,我們把排序順序變成數字、英文、中文此外在使用者一開始進入網站時就載入全部的資料,接著我們把前10筆的功能砍掉,因為感覺不太會用到,結果我們一砍掉前10筆的功能,整個程式都壞了,然後就又回到原點了,因為我們前面修改好的部分沒有存檔備份,所以後續變成劉名益回宿舍改了。哈哈哈,蠻好笑的,花了一堆時間和心力,但結果是回到原點。
這禮拜我比較多的貢獻可能是把還沒有照片的地方整理出來,並做成記錄表,讓大家使用。在做這個記錄表的過程中,發現之前的課程都沒有白上,因為有使用一些之前在不同課程上學到的功能,像是Excel的資料剖析和移除重複項。此外,感覺自從大量接觸程式後,生活感覺都不知不覺的跟程式和網站有關係,像是這星期四的課程,老師要我們構思一個網站,我們幾個就討論的很熱烈。除此之外似乎也潛移默化地改變我的思考方式,在玩遊戲的時候,會思考這個部分的程式應該會怎麼寫、在改善補拍照片紀錄表的時候,要讓儲存格中的文字和函式結合,第一個想到的不是那些符號或函式,而是下意識的想打print,自己覺得蠻好笑的,感覺腦中有點錯亂了,哈哈哈。除了以上這些事項外,我們在開完會還一起去補拍介仁的照片,整個過程比較有印象的就是大家一起去停車場找地圖,雖然說是找地圖,但比較像是大家一起壯膽想去被狗狗嚇,雖然沒有收穫到地圖,但收穫到溫暖有趣的回憶,也不枉此行了。這週的心得很雜很亂,但也代表最近的體悟和收穫很多,不管是實質上的網站優化還是一些回憶等。總結一下心得,大概就是「很開心參與這項專題的製作,在各方面都收穫很多!」。
🔗提供相關連結:
補拍照片進度表https://docs.google.com/spreadsheets/d/1iYgY1pHPBX8eZ1euTTU4f8Z1qtLL8Dz6WyxWc1QD2EM/edit?usp=sharing
11244008李淑庭
-本週進度:分配拍照工作、討論PPT怎麼做
-預計下禮拜進度:做簡報&拍照
-聽到或看到甚麼:延續上禮拜老師所講的Supabase測試頁面,看到資訊組的進度如此快速,已經把一些照片給用上去了,就只有少部分的照片還沒拍而已,所以這禮拜的工作就是把照片補齊,還有思考PPT的內容,前面的部分都可以去參考其他論文所寫,在寫的途中,還是會搞不清楚定位在哪,這個頁面算是什麼類型的,但在網路上也會看到許多類似的東西,所以沒有太大的問題,而心智圖的部分則是先述寫文字內容,在請Notebook生成,看起來會比較好看,因為自己畫的可能不是很清楚,而後面的時間則是在介仁校區拍照,有些地方沒有平面圖,所以先拍個地點的畫面做替代。
11244017賴智昕
-本週進度:地圖拍攝、報告構想
-預計下禮拜進度:做簡報&拍照
-聽到或看到甚麼:我們這周討論了期末報告的構想,同時也前往拍攝地圖(缺少的),我們目前已處理好介人校區的,只剩建國與中央的,再來就是要做簡報了
11244024劉名益
-本週進度:
(一)新增一鋤一些功能與人性化設計
1.多欄位搜尋: 空間名稱 、空間編號、圖片編號 (之後圖片拍完會隱藏-只給我知道ww
2.校區篩選、樓棟篩選: 下拉式選單,根據 校區名稱、在哪棟樓 進行校區篩選。
3.搜尋優化: 依據輸入關鍵字,顯示或隱藏 前 10 筆相關結果 和 重設 / 返回所有資料 按鈕。
4.保留關鍵字: 當前的搜尋關鍵字、校區、樓棟 會被寫入 URL 參數,以確保頁面重新整理或分享連結後,篩選狀態不會遺失。
(二)表格顯示與排序
1.排序功能: 僅允許 空間編號 欄位進行點擊排序(如果其他欄位也想加入也可以在跟我說)
2.自然排序法: 確保包含數字和字母的編號(如 A10, A2, A100)可以由小到大或由大到小排列
3.排序按鈕: 在 空間編號 欄位標題旁顯示三角形符號(▴▾)來指示目前的排序方向。 (可以多點幾次看回不會排序亂掉幫我測試)
4.第一排深色欄位與浮動文字: 採用統一的深色背景和白色文字
5.浮動表頭: 當使用者向下滾動超過原始表格時,表頭會固定在頁面頂部,並且表頭的寬度會與原始表格寬度同步 (還原跟Excel類似的凍窗效果)
(三)輔助相關
1.標記點選: 對應點選的資料 進行標記
2.回到頂端按鈕: 提供一個浮動的「🔝」按鈕 。當使用者向下滾動超過 300px 時顯示,點擊後會平滑滾動至頁面頂部。
(四)OCR
1.跟我哥哥一起討論 OCR 的一些功能 目前簡單的測試,把圖片的文字框選起來 看到結果產生出來的還不錯
缺點:每次生成一個空間教室的框框 就會生成出一張獨有的圖片 假設收尋10個不同的空間編號 那就會生產出10張的圖片
優點:不知道是不是我電腦好的關西 生成一張標記的圖片只需要10秒內 我覺得這在免費的情況下來說 算蠻不錯的
-預計下禮拜進度:
1.繼續使用 Gemini 來詢問程式碼可以再添加甚麼功能以及優化相關的
2.查詢 SVG 主要是做什麼用的 並且進行測試
-聽到或看到甚麼:在程式上面的部分 我覺得不用太擔心 除非要弄比較困難的設定如想要把存放API的檔案 改到後端 等等(可能之後才會用) 然後supabase的資料可能有一些檔案需要做一些變動 那這個不是說很急 所以慢慢來用就好 #老師加油 我也聽到了珮珊同學給我非常多的意見與回饋 很感謝她 : )真好都有這麼多的想法 我該向她學習 資料上還有一些圖片沒有拍完 再麻煩大家一起完成喽 再來是PPT的部分 目前只有初步的討論 可能最近 就會把PPT製作出來了 大家一起加油
🔗提供相關連結:
1.Gemini:https://gemini.google.com/app?hl=zh-TW 強大的AI 可以滿足你各種需求
2.Visual Studio Code:我覺得蠻方便的 可以在裡面裝一個AI環境 直接在裡面詢問 也可以直接讀取我們的程式碼 是個非常不錯的編輯軟體
3.GitHub Supabase TblSpace 查詢:https://liu-ming-yi.github.io/CampusMap01/
4.Excel 圖片缺失:https://docs.google.com/spreadsheets/d/1iYgY1pHPBX8eZ1euTTU4f8Z1qtLL8Dz6WyxWc1QD2EM/edit?gid=1626009029#gid=1626009029
珮珊把目前缺失的圖片全部整理出來了我們可以根據這個來去拍缺失的圖片
11244028葉淂賢
-本週進度:討論專題PPT的內容與拍攝介仁校區平面圖
-預計下禮拜進度:做簡報&拍照
-聽到或看到甚麼:這禮拜看到程式組把平面圖放置上去,不過還是有一些地方需要到現場去拍攝。這禮拜已先將介仁校區的平面圖拍攝完畢,目前只剩下建國與中央校區需要找平面圖拍攝。預計下禮拜會先去拍攝中央校區的平面圖,拍攝完畢之後會繼續協助拍攝建國校區的平面圖。
11244029柳玉亭
-本週進度:從缺、待補( ఠ ͟ʖ ఠ)
-預計下禮拜進度:從缺、待補( ఠ ͟ʖ ఠ)
-聽到或看到甚麼:從缺、待補( ఠ ͟ʖ ఠ)
🔗提供相關連結:從缺、待補( ఠ ͟ʖ ఠ)
1.檢查目前網站的進度
除了上述紀錄中提到已新增的功能外,也會持續對功能或設計方面做優化。
2.補拍照片(早上空堂&下午放學)
中央和敬樓1F-5F(由易展&淂賢拍攝)
中央勤耕樓1F-9F(由易展&淂賢拍攝)
中央大愛樓9F-10F(由易展&淂賢拍攝)
中央大捨樓1F-6F(由易展&淂賢拍攝)
中央地下室停車場(由易展&淂賢拍攝)
建國不分區樓層圖1F-4F(由珮珊&名益拍攝)
1.挑選簡報模板
簡報模板網站:Canva、Slidesgo
Canva:較少選擇,都是那幾個常客重複看到,但可以用中文進行關鍵字查詢。
Slidesgo:選擇多元,有許多意想不到的設計,但只能用英文進行關鍵字查詢。
最終選擇Slidesgo網站,經過挑選後,選擇模板之名稱為「STEM Education Workshop for Teachers」,將模板下載後,放在Canva供大家編輯、使用。
2.討論報告
討論是否有哪裡需要改進
💡ex:Supabase優點→Supabase特色
(因為感覺只寫優點,而不寫缺點,會被評說只挑好的講,因此建議換個標題)
💡ex:Supabase整合網頁流程圖→整合網頁流程圖
(既然都寫Supabase了,那也可以把GitHub加進流程圖裡,不然兩個工具,卻只寫一個,看起來很怪。除了內容須做變動外,標題也須做更改。)
11244001劉柏瑞
-本週進度:製作專題報告
-預計下禮拜進度:完成並繳交專題簡報、補拍照片
-聽到或看到甚麼:在這個禮拜我負責完成專題報告的專業背景分析,也和組員一起討論報告要怎麼去寫,決定製作方向和細節修改,雖然我的部分還有很多需要修改,但我會努力去修改的
11244006蔡易展
-本週進度:拍攝中央校區地面圖與選定專題報告模板
-預計下禮拜進度:完成並繳交專題簡報、補拍照片
-聽到或看到甚麼:這禮拜二上午利用空堂時間,前往中央校區拍攝空間資訊查詢系統所需要的樓層地面圖。經檢查後,發現有幾塊區域需要補拍。下禮拜會在利用空堂時間去中央校區補拍。也會利用時間拍建國校區的樓層地面圖
11244007黃珮珊
-本週進度:拍建國校區1-4樓不分區樓層圖、整理資料庫檔案、製作專題簡報
-預計下禮拜進度:完成並繳交專題簡報、補拍照片、遵從劉名益工作上的吩咐
-聽到或看到甚麼:這禮拜主要都是在弄簡報,我的部分的內容在上禮拜假日已經大致完成了,所以這禮拜就是把它弄到新的模板,並進行排版和最後再調整一下內容就好了。除此之外,這禮拜還幫劉名益簡單處理一下資料庫的檔案,他把檔案丟給我處理,我打開的時候發現是亂碼,所以就利用老師在課堂教的方法,解決這個問題,真的是「學以致用」呢!感覺學習沒有白費!有一點點的成就感!另外在星期五時,我們還一起去聽了學長姊的專題報告,發現評審的講評很犀利,讓我不禁覺得,我們到時候真的可以順利報告嗎,感覺會被批的很慘,不過從現在開始努力準備,一定沒問題的吧?希望專題可以順利地完成!大家加油!
🖤跟專題無關的心得,不過還是想在這邊為12/19遭受恐怖攻擊的亡者哀悼🕯️🍀 意外跟明天總是不知道哪一個先來呢,希望大家都可以平安、健康!
11244008李淑庭
-本週進度:做PPT、挑選PPT模板
-預計下禮拜進度:完成並繳交專題簡報、補拍照片
-聽到或看到甚麼:這禮拜主要是針對PPT挑選比較符合主題的模板,但因為在挑選模板的時候花的時間太久,導致很多東西要回家才完成,而假日就是把之前的東西轉移到新模板上,我主要負責專案內容部分,畫拆解圖及流程圖和說明工作內容,當然報告都是互相幫忙完成的,所以基本上這禮拜在處理專題PPT的事情。
11244017賴智昕
-本週進度:製作專題報告、挑選PPT模板
-預計下禮拜進度:完成並繳交專題簡報、補拍照片
-聽到或看到甚麼:我們這周正準備了我們組的專題報告,同時也挑選了適合的模板,再次活動中,我發現原來還有許多不同類型模板可以使用,這讓我大開眼界
11244024劉名益
-本週進度:製作專題報告、網頁新增計數器
-預計下禮拜進度:完成並繳交專題簡報、補拍照片
-聽到或看到甚麼:看到了同學一起討論PPT的模板,報告基本上都做的差不多了,接下來就是換程式組的部分了我會努力加油的。然後資料庫目前檔案在我這邊也感謝珮珊幫我修改好檔案👍👍
11244028葉淂賢
-本週進度:拍攝中央校區地面圖與選定專題報告模板
-預計下禮拜進度:完成並繳交專題簡報、補拍照片
-聽到或看到甚麼:這禮拜二上午的空堂期間,前往中央校區拍攝空間資訊查詢系統所需要的地面圖。經檢查地面圖圖片之後,發現扔有幾塊區域的地面圖需再補拍。下禮拜會再次前往中央校區進行需要補拍的區域。
11244029柳玉亭
-本週進度:從缺、待補( ఠ ͟ʖ ఠ)
-預計下禮拜進度:從缺、待補( ఠ ͟ʖ ఠ)
-聽到或看到甚麼:從缺、待補( ఠ ͟ʖ ఠ)
🔗提供相關連結:從缺、待補( ఠ ͟ʖ ఠ)
1.讓老闆檢查簡報,並討論需修改的內容
📢老闆有話要說:
SWOT的部分有發現錯字,下次不能讓老闆幫忙改這種錯誤喔
11244001劉柏瑞
-本週進度:完成專題簡報
-預計下禮拜進度:準備期末考
-聽到或看到甚麼:在簡報的部分我們分別完成了專案背景分析、專案目標、專案內容、專案排程與查核點、預期效果、工作團隊分析、成本與運算分析等七大項,而在製作的過程中有遇到許多的問題,不管是專案背景的分析、想要達成的目標又或者是流程圖的安排都使我在過程中感到困難重重,但幸好在大家的努力下成功的解決了,也謝謝老師的指導讓我們知道要怎麼做,讓這份簡報能更完整
11244006蔡易展
-本週進度:從缺、待補( ఠ ͟ʖ ఠ)
-預計下禮拜進度:從缺、待補( ఠ ͟ʖ ఠ)
-聽到或看到甚麼:從缺、待補( ఠ ͟ʖ ఠ)
🔗提供相關連結:從缺、待補( ఠ ͟ʖ ఠ)
11244007黃珮珊
-本週進度:完成專題簡報並繳交
-預計下禮拜進度:準備期末考,等待寒假到來~寒假有機會就繼續努力寫專題程式或者開發新的小工具(▀̿Ĺ̯▀̿ ̿)
-聽到或看到甚麼:透過完成專題簡報,讓我對整個專題有更深入的了解,像是背景和目標等等,雖然這樣有點感覺像之前學長姐專題發表會上評審所說的先有了結果才回頭補背景與目標 ,不過我想這也沒有絕對的對或錯,就只是思考方向和處理方式不同而已。我們的這種方式可以讓我們在實務上有更多的操作機會,且也學習到更豐富的知識,缺點就是最後回頭補那些背景和目標時可能會不夠有力,另一種方法是一開始就花時間在思考並鋪陳背景,可能導致最後實際實務上操作的不多,評審或許會批說金玉其外,敗絮其中。所以我覺得沒有絕對好或壞的方法,只有適合的方法。
11244008李淑庭
-本週進度:完成專題簡報、暫停專題小組討論
-預計下禮拜進度:準備期末考
-聽到或看到甚麼:這禮拜主要是把專題的簡報再次修改,把一些錯字及內容簡單的再修改一下,謝謝老師指導讓我們知道簡報該如何做、及大家的努力一起讓這個簡報更加完整。而因為要期末考,所以這個禮拜沒有小組討論。
11244017賴智昕
-本週進度:完成專題簡報
-預計下禮拜進度:準備期末考
-聽到或看到甚麼:我們這周把簡報的最後部份完成,並給老師過目與修改指點,感謝大家的共同努力完成這項任務,下一次還有更艱難的任務在等著我們。
11244024劉名益
-本週進度:
1.加入一些科技元素 看起來部會這麼單調
2.把一些圖片沒有的資訊刪除 如(冷凍櫃、公共區域等)
3.把檔案內變成數學符號的資料都修改好
4.一起幫忙完成簡報
-預計下禮拜進度:
1.可能先著重在其中段考 先停止專題
-聽到或看到甚麼:
1.目前程式組的部分還有一 些圖片可能沒有需要拍攝 但這也不急 然後我可能等寒假有空閒的時候 會開始研究定位、OCR等技術 開始著重在這個部分
2.在製作簡報的時候我看到大家都蠻認真在製作這一份簡報的 雖然還有一些小小的地方 需要修改 也謝謝老師的指導 讓我們簡報變得更好
※老師金句:我覺得製作報告不是說一定要對這個國家有貢獻而去製作這個專題,而是要從製作專題的時候有去學到裡面的知識
11244028葉淂賢
-本週進度:完成專題簡報
-預計下禮拜進度:準備期末考
-聽到或看到甚麼:這禮拜除了修改自己應完成的專題簡報內容之外,也詢問簡報哪個部分是需要一起幫忙。謝謝指導老師的指導與勉勵,以及大家的共同努力,才能讓專題簡報的內容不僅更加豐富之外,也大幅提升了專業性。
11244029柳玉亭
-本週進度:從缺、待補( ఠ ͟ʖ ఠ)
-預計下禮拜進度:從缺、待補( ఠ ͟ʖ ఠ)
-聽到或看到甚麼:從缺、待補( ఠ ͟ʖ ఠ)
🔗提供相關連結:從缺、待補( ఠ ͟ʖ ఠ)
11244024劉名益
1/5 寒假前一周進度
本周進度:優化程式碼、SQL優化
資料庫&程式碼:
剛剛發現了 資料庫 Advisor 有發出警告 似乎少了一些東西導致的 目前已經修好了
資料庫的SQL有點亂因為全部都寫在一起 看得比較亂
主要優化了 TblSpace 權限 和 daily_page_views 計數器的部分 讓工作人員方便看懂
以及新增了(深色模式 / 淺色模式) #太陽太大可以用淺色 顯示的比較清楚 光線暗的話可以用深色
不知道有沒有用 反正就增加了
OCR&遠端:
查了前端OCR技術 Tesseract.js(別人寫好的) 並使用
VS Code遠端操控 主要使用模組 Live Server 來進行
遇到狀況:
資料庫&程式碼:
原本網站的F12 錯誤訊息 是因為少了資料庫Table裡面的計數器(之前不小心被我刪除)所以才會報錯誤
剛剛遇到問題是SQL寫太亂導致一下執行一下刪除 然後 就沒有新增計數器的資料
OCR&遠端:
Tesseract.js 因為太爛了 所以我決定寒假去試試 Google Cloud Vision API
#果然還是付費最讚ww
因為是第一次使用遠端Live Server 我不太會用
目前遇到狀況很像是雙方都需要裝VS Code 然後帳號很像需要使用同一個(不太清楚)
#所以我放棄這個VS Code 遠端 我寒假在家裡架設還比較快@交給我哥處理了.w.
1.討論專題接下來努力的方向
影片組:將查詢系統進行包裝、拍攝行銷/推廣影片 (目的:增加使用者&曝光度)
(參考做法:可以利用AI製作出影片雛形,再進行學習、或效仿)
程式組:增加更多功能、操作介面更友善
2.雖然有分工,但彼此需互相知道對方的工作內容並學習
每個人都要知道程式組做了什麼?怎麼做? (老師會再找程式組的同學討論並整理哪些是其他同學需要知道的部分,後續會讓大家試作、體驗)
即使分工上不是專門製作影片的同學,也需要學會製作影片的相關技巧
📢結論:老闆不喜歡雖然大家進行了分工,但卻不知道彼此正在做的內容❌
3.複習相關基本技能技巧(Word格式設定、PPT製作、APA格式等)
方式:暫定每隔兩、三週會進行小測驗 (後續會再公布相關時間點&要做的事項)
內容:APA的認識、Word長文件排版等 (後續會再公布相關時間點&要做的事項)
用意:畢竟這是一門課,不希望浪費這門課的時間,希望大家可以複習並學到一些東西,雖然可以不要太有壓力,但也不能太輕鬆喔!
4.討論後續須繳交之成果報告相關事宜
最後須繳交之項目有:Word、PPT、video
屆時可能會指定某人負責製作Word、PPT
系上最後會將各組的Word彙整成冊,並存放在系辦,供日後教育部查核以及學弟妹翻閱之用。因為是永久流傳,因此要更謹慎一點,尤其要避免錯字。
5.討論請AI協助的相關建議與提點
可以用AI協助,但不能全部丟給AI後,將產生的結果直接拿上台報告
(原因:沒有用心和努力❌) (建議作法:將產出的結果修改後再上台報告✅)
💡ex:我們需要兩分鐘的腳本,提出我們的需求等等。產出結果之後,我們再來討論,哪些可以保留,哪些則可以修改一下。
不要讓AI一直拍馬屁,千萬不要沒有提出任何詳細的需求就結束對話,這是最懶惰的做法 💡ex:我要做影片,幫我想腳本。
📢老師使用AI的小撇步---每次都會詢問AI兩件事✌
1.對於這件事情,請告訴我,我有哪些沒想到的嗎?
2.請幫我看看這裡面有哪些錯誤?
6.考慮使用API技術
考慮把金鑰加在後端,以防別人盜用,亂改資料庫的資料。
※金鑰可以理解為改資料的權限。
※單純從GitHub查詢,就像是Google文件共用中的檢視者。
※如果要紀錄有幾個人來,就要將計數寫進資料庫,此時就變成像是Google文件共用中的編輯者。
7.老師可能需要負責承辦這次的成果發表會,屆時會找我們八位來進行協助。
8.最後叮嚀-學習都要留下紀錄
💡ex:之前做的第一個系統「藍色鳶尾AI / Blue Iris AI」之相關資料可以留著,也是一種成果,屆時寫進簡報裡說不定可以加分。
(關於「藍色鳶尾AI / Blue Iris AI」這部分之詳情,請查看2025/11/13之紀錄)
⭐影片組相關研究之簡單成果報告
淑庭:學習AI剪片&上字幕,但由於沒有文稿,因此無法實際操作、試用看看。
柏瑞:研究如何讓一張圖片動起來,並且有聲音。💡ex:讓照片上的狗動起來並說話🐶
1.程式組代辦事項
於地圖上之目的地處標記紅點。(後續需要大家一起事先為各地點進行座標定位)
訪客使用紀錄/閱覽紀錄:需紀錄/儲存訪客的查詢動作,包含結果、時間點、點了那些按鈕等。 👉此項目將會用到寫資料之技術 ---已由名益同學於3/6開發出來✅
一進入學校時,怎麼知道哪個樓在學校的哪裡?
💡解決辦法:先放校區的總地圖,再放樓層圖 。👉此項目將會用到圖形處理之技術
2.影片組代辦事項
劇本修改微調、拍攝影片。
設計品牌Logo、slogan。(亦可沿用以前之設計,詳情請查看2025/11/13之紀錄)
設計問卷:平台的實用性 or 平台有沒有幫到你。(※非必要但做了或許會加分)
3.安排各週進度,詳情如下:
📆進度:
week 2:各週進度安排
week 3 :完成問卷題目、完善劇本
week 4~7:問卷發放、影片拍攝
week 8:問卷回收、影片拍攝結束
week 9:期中考
week 10~11:問卷分析、剪片
week 12~14:製作PPT&Word
📝備註:預計十五、十六週發表。
📢老師金句提點:計劃趕不上變化,很正常, 不用修改以前的計畫也沒關係!
1.討論新版劇本-以下為文字敘述版
主角: (迷路中...看著地圖在想老師研究室在哪?)
主角: (剛好有人經過,便開口詢問)你好,你知道XX研究室在哪嗎?
👆此部分主角總共需要詢問三次:兩次路人(❌拒絕)、一次引路人(✅回答問題)
路人: (拒絕主角的詢問,此部分台詞自由發揮)
👆此部分路人需要拒絕主角兩次❌
引路人: 嗯...我不清楚欸,不過我有一個好工具可以幫助你!
👆此部分引路人不能拒絕主角,需回答主角問題✅
主角: 喔~那是什麼?
引路人: 來!讓我告訴你!
切螢幕錄影畫面,介紹本系統的使用方法與各式功能(暫定30秒)
主角: 好謝謝,我知道了!(走到研究室)(畫面:先拍門牌,然後拍主角走進去)
1.決定問卷類型
學術型問卷:跟理論有關,因此不能亂問問題。
商業型問卷:針對想知道的部分進行詢問。
💡ex:公司想知道顧客對於產品的想法、喜歡什麼樣的活動
📢最終定案:商業型問卷
發想問卷之前情提要:把此系統當作是一個產品,暫定為往需求面做發想
💡ex:想知道哪個族群最需要用到這種查地圖的系統
❌錯誤示範:想知道軟體好不好用
2.問卷題目發想
形式:網路問卷 ✨老闆獨家贊助:透過老闆的人脈,填答人數可達100人✨
題目發想方法:大家先腦力激盪共同發想問題,腦力激盪完後再找範本或詢問AI
(AI Prompt: 你覺得我們還有什麼沒問到或沒想到的嗎?)
題數:不宜太多,30題以內為佳
(⚠️但先不要因為題數有太多的設限,也不要設限於系統現在設計到哪裡,雖然有些功能目前並沒有,但依舊可以詢問相關問題,作為以後系統新功能開發的事先調查。)
有趣的街頭實驗(僅供參考,無須實際執行):
請一個同學來試用本查詢系統,目標為找到某教室,然後計時所花費的秒數。
(⚠️需在我們不告訴他使用方式的前提下)
3.系統功能更新:新增引導功能
🔗系統連結:https://liu-ming-yi.github.io/CampusMap01/
📢老師金句提點:
即便仍不完美,但依然可以當作一個ending。
不要怕被老師挑戰或質問,答不上來就說「這是我們沒注意到的部分,謝謝老師的提醒」。
📜以下為初步發想之問卷(未修改):
1.我曾經有在學校找不到教室的經驗
2.當我找不到路時喜歡看地圖
3. 當我找不到路時喜歡問人
4.我認為/喜歡/對於用網路看地圖會感到滿意
5.我認為現在的校園地圖在表達方面夠清楚
6.我曾經看了地圖但還不是知道目的地在哪裡
7.我會因為看不懂地圖而轉而利用其他的地圖工具
8.我去陌生地點時會使用電子地圖(Google map)
9.我很容易可以找到學校的地圖的告示牌
10.我認為我有很好的空間掌握能力
11.當我向人問路的結果不符合期待時,會想轉為使用電子地圖
12.當我找不到路時,我會覺得很慌張/焦慮/煩躁
13. 我會擔心電子地圖上的資訊(如:飲水機、廁所位置)不夠即時或精確
14. 我偏好地圖上能顯示目標地點的『真實照片』或『建築外觀』
15. 我發現電子地圖(如 Google Maps)常無法準確標示校園內的小徑、穿堂或室內捷徑。
🔗正式問卷連結:https://forms.gle/UkTaqXDoBXpZuYL58
✨感謝老闆為我們修改問卷✨
1.討論各項成果後續發展方向
程式:於目的地標示紅點/框 (※可參考老師詢問AI之結果)、加入目的地之樓棟位於學校何處的平面圖、其餘各項目可持續再優化。
🔗老師與AI討論目的地標示紅點/框之結果:
https://chatgpt.com/share/69cef427-2d50-83a7-ac8f-2821d520efc4
問卷:已無問題,可進行發放。
🔗問卷填答連結:https://forms.gle/UkTaqXDoBXpZuYL58
影片:現在版本過於單純、直白,建議可以跟AI討論劇本。可以將老師詢問AI的結果作為主要方向,有了方向後,再討論其中的細節。
🔗老師與AI討論影片之結果:https://chatgpt.com/share/69ce1a39-90c0-83a2-a915-acf568d5e617
劉柏瑞同學奉命為影片主要負責人,於4/2下午帶領大家討論劇本,並在下午17:30時,繳交所完成之劇本內容給老師審查。
🔗經討論後的正式劇本:
https://docs.google.com/document/d/14AvCwi2y58LojqdlWGnDYPm6nXHMfxglvq9Qt46qTdA/edit?usp=sharing
老師建議:想加入類似學生服儀不標準的橋段:
💡我們要開發APP,然後來找老師求救。我們雖然都穿制服但卻穿拖鞋就進老師研究室。然後老師就對我們從頭到腳看一輪,並說叫我們回去重新穿好衣服再回來找他。(※詳情請參考相關範例連結)
🔗相關範例連結https://www.facebook.com/share/r/1NP2jJ4nWQ/
⚠️再三叮嚀:可以用AI,但不能一句回覆都不看、不思考、不消化,就將結果丟給老師,這是沒有用心的表現。
2.發表會之相關內容
暫定十六週發表,但可能因為畢業典禮的關係,而提早一個禮拜至十五週發表。
預計最終需繳交之成果:Word、PPT、MP4
1.正式拍攝上禮拜所擬定的腳本
拍攝範圍: [李淑庭:到了樓梯口... ~ 主角:喔~我看到了... ] (※請搭配劇本查閱👇)
🔗劇本連結:
https://docs.google.com/document/d/14AvCwi2y58LojqdlWGnDYPm6nXHMfxglvq9Qt46qTdA/edit?usp=sharing
拍攝:採用不同鏡位的方式進行
收音:尚不清楚雜音是否眾多,是否選擇事後配音,仍待考慮
設備:手機
場景:男宿門口&學校走廊&一樓樓梯口&2E104教室
演員:劉柏瑞、李淑庭
攝影組:蔡易展、葉淂賢
後援&給意見組:黃珮珊、劉名益
請假:賴智昕、柳玉亭
1.正式拍攝上上禮拜所擬定的腳本
拍攝範圍: 接續上禮拜進度之場景一未拍攝部分 (※請搭配劇本查閱👇)
🔗劇本連結:
https://docs.google.com/document/d/14AvCwi2y58LojqdlWGnDYPm6nXHMfxglvq9Qt46qTdA/edit?usp=sharing
拍攝:採用不同鏡位的方式進行
收音:事後配音
設備:手機
場景:停車棚&停車棚外圍石子路、學校走廊&2E104教室&2E101教室
演員:劉柏瑞、李淑庭、賴智昕、葉淂賢、黃珮珊(客串一下)、劉名益(客串一下)
攝影組:蔡易展
請假:柳玉亭
2.討論專題相關事宜
🚩影片進度check
建議第九週完成拍攝素材,後續可以留一些時間後製、補素材、調整、修改
🚩APP進度check
程式組第九週之前和老師討論。已經有紅框框的程式碼,但每個查詢結果框框的位置、大小,都不一樣,要將座標寫在資料庫裡(四個資料:跟網頁上方的距離、左邊的距離、框框的長跟寬) ,這部分要再研究怎麼弄會比較快速、方便,盡量不動用到大家,但沒有更好辦法的話,就只能大家分個150筆資料去設定座標。
🎉劉名益已於4/16晚上研發出紅點點程式,並開發出可以在圖片直接標記的程式工具,以方便將各教室座標寫入資料庫,後續會再將圖片標記工具進行相關的調整、修改,以完善整個流程,讓座標的寫入更為順利🎉
🚩問卷進度check
老師會幫我們發給大一、大二的學生(預計可能會有70-80人)、教職員(希望可以有20人以上回收)、其他系老師認識的學生。
⚠️我們每位同學也要想想看,我們可以發給誰?
🚩校園地圖三摺頁設計(大小A4)、校園地圖海報設計(大小A3)
三折頁須獨立製作,最後會選一個當作最後的版本,並進行印製,預計印50-100份,發表的時候要給評審,其他的要放在各校區處室發放、借閱。
💡ex:校長室、學務處、教務處
三折頁大概架構:
正面1:封面-三折頁標題、我們專題系統的QRcode
正面2:我們專題的基本資料
正面3:花蓮市地圖-標出各校區位置,以及相關重要路名、地標
背面1:中央校區大範圍平面圖-標示各樓棟名稱或代號
背面2:建國校區大範圍平面圖-標示各樓棟名稱或代號
背面3:介仁校區大範圍平面圖-標示各樓棟名稱或代號
🔎關於校區地圖設計之例子,可上網搜尋「campus map」
⚠️先暫定第十週 4/30(四)看個人進度。
🚩開始撰寫結案報告與時程
Word須獨立撰寫。如果分工寫的話,會有前後不連貫的問題。
PPT最後一週再根據Word的架構做就行,此部分較不困難。
Word簡略大綱說明如下:
專題背景:遇到什麼問題?
文獻、技術說明:用到那些工具? 💡ex:資料庫
架構:我們的系統弄了哪些東西、功能? 💡ex:篩選功能
結果:什麼相關分析結果? 💡ex:問卷分析結果
結論與建議:此專題的結論
⭐以上僅供參考,詳細撰寫大綱請參考過去學長姐的範例,詳情請看LINE群組。
⚠️暫定第十一週 5/7(四)看初步進度
⚠️第十二週 5/14(四)指定某位同學進行彙整
⚠️第十三週 5/21(四)請老師加入協助
🚩期末發表場佈分工
只借到6/5(五)中午以後的時間,因此6/4(四)下午可能要留時間演練或布置。
⭐可參考專題發表會攻略進行準備,詳情請看LINE群組。
❗❗組內小問題:雖然平時大家都有在進行分工,但卻沒有相關的負責窗口,導致要了解某項作業的進度時,不知道該詢問誰。
⚠️6/5(五)專題發表⚠️
📢必要繳交項目:Word、PPT📢
⭐加分項:影片MP4⭐
⚠️6/5(五)專題發表⚠️
📢必要繳交項目:Word、PPT📢
⭐加分項:影片MP4⭐
⚠️6/5(五)專題發表⚠️
📢必要繳交項目:Word、PPT📢
⭐加分項:影片MP4⭐
1.正式拍攝4/2所擬定的腳本
拍攝範圍: 場景二:下課之後 (※請搭配劇本查閱👇)
🔗劇本連結:
https://docs.google.com/document/d/14AvCwi2y58LojqdlWGnDYPm6nXHMfxglvq9Qt46qTdA/edit?usp=sharing
拍攝:採用單一鏡位的方式進行
收音:事後配音
設備:手機
場景:2E104教室
演員:劉柏瑞、黃珮珊、李淑庭、賴智昕、劉名益、葉淂賢
攝影組:智昕的弟弟-偉翔
後援&給意見組:各位演員們
請假:柳玉亭
❓不知去向:蔡易展
✨特別感謝獨家場外支援:智昕的弟弟-偉翔,協助畫面之拍攝✨
1.討論各項成果之進度
APP
▶需修改「空間詳細資料與平面圖」中容易誤解的文字敘述:
空間位置👉樓層平面圖;校園總圖👉校區平面圖
▶建國的校區平面圖加上紅框框
三折頁
▶加上公車資訊是不錯的想法,但如果三折頁要放很久,就不能放容易變動的資訊▶最後會擷取各三折頁的優點, 以及思考要放哪些資訊,然後再做成最終版本
影片
▶剩老師研究室的部分要拍,已於當天下午拍攝完畢✅
▶下星期四 5/7 需繳交影片初版⚠️
問卷
▶仍需再繼續發送問卷,目標為100人 ※目前截至 2026/05/01 填答人數為 71 人
▶下星期四 5/7 需將填答人數衝至100人,並進行分析⚠️
Word
▶每個人需各自撰寫一份Word
▶5/14 (四) 需檢查個人Word進度⚠️
2.相關時程活動公告
5/24 (日) 以前需將Word定稿
待Word定稿後,再進行製作PPT
5/31 (日) 各組須繳交Word和PPT最終版
6/4 (四)下午七、八節,為第一次場佈時間,有空的成員們,還請務必把此時段空下來,協助老闆場佈 ※但以個人自身的事務為優先,有空再來幫忙就好!
6/5 (五) 中午時段,為第二次場佈時間,請務必完成專題發表會所有的佈置作業
⚠️6/5 (五) 下午14:30,專題發表會正式開始!⚠️
⚠️6/5 (五) 下午14:30,專題發表會正式開始!⚠️
⚠️6/5 (五) 下午14:30,專題發表會正式開始!⚠️
1.檢查各項進度
APP
▶「空間詳細資料與平面圖」中容易誤解的文字敘述已更改,但改錯方向了:
空間位置👉區域位置❌;校園總圖👉區域平面圖❌
※已提醒相關人員,後續會進行修正📝
📢已於2026/05/10 AM:1:00修正✅
▶相關人員宣稱已將建國校區平面圖加上紅框框,但經測試者檢查後,發現並沒有成功❌
※已提醒相關人員,後續會進行檢查並修正📝
🔎發現是因為網路問題,導致圖片沒能上傳成功
📢已於2026/05/10 AM:1:00修正✅
影片
▶大致上已完成85%,已進行剪輯處理過,剩下配音、特效轉場、字幕等
問卷
▶人數仍舊不足,需要再進行發放 ※目前截至 2026/05/07 填答人數為 74 人
Word (※同上禮拜所述)
▶每個人需各自撰寫一份Word
▶5/14 (四) 需檢查個人Word進度⚠️
1.影片剪輯
進行畫面細部調整,並加上配音、特校、音效等
剩下字幕、片尾尚未加上
1.觀看完整版影片 ※可至LINE群組觀看
2.海報製作
每人須獨立製作一份
A2直式
▶於5/28(四)繳交⚠️
1.討論Word需補充之部分
目錄須加上頁碼
需要新增圖目表&表目錄
GPT協作→Gemini、Claude協作
加上各成員的反思與心得
2.討論簡報製作之內容
介紹主題、成員
直接實機示範,至平台進行操作,尋找空間。💡ex:巴達善
(※不建議這邊放QRcode → 大家拿起手機掃掃描 可能會造成混亂、失去注意力)
闡述專題背景、痛點、動機
闡述問卷分析之結果 (※挑幾個比較有趣、顯著性、足以支撐專題發展的數據)
闡述專題用到的系統&技術 (※一兩頁足矣)
結論、建議 (※條例式)
影片欣賞 (※可能30秒左右,看剩下多少時間)
💡表格的部分都可以考慮放進簡報,較好呈現、簡明扼要
⚠️放很多字會被打槍
3.討論專題發表之相關事項
主講人:淑庭
技術部分之主講人:名益
發表時間:12分鐘
⚠️專題發表開始前,要記得去找老師拿三折頁和海報⚠️
思考點
1.發表會的會場,把所有可以想到的設備、器材都列出清單。
2.有些內容是場地該有的,必須檢查,例如投影、聲控等。有些是必須借用的,例如告示牌、評審桌等。有些可能須自備的。自備還可以包括多次使用的或是一次性的,例如海報、布條。我們把以上分成固定設備、借用設備,以及自備多次、與自備單次。
(1)固定設備:投影機、聲控、白板或投影幕、空調、
(2)借用設備:評審桌、評審椅
(3)自備多次:評審桌桌巾、評審桌文具、水杯、演講名稱的大型多年用拍照布置看板(需考慮保存空間與質感)
(4)自備單次:布條、海報、
接待處
會場
Lecture hall、Lecture Venue Setup
Lecture Capturing | AT Video Networks
考慮製作所有的present的同學的母校(高中職學校)的校旗
也製作慈濟大學的校旗(自己用),還有系旗+院旗。系旗、院旗、校旗、國旗。
材料:布?
懸掛:繩子掛?旗桿?
IDEA
Campus Map 2026 印刷摺頁 30-100份
Campus Map 2026海報年曆 30-100份
Campus map 2026 短影片