[AI線上應用實戰] Bubble.io 快速建立浮動聊天室

ECOE-avatar-img
發佈於資訊、程式 個房間
更新 發佈閱讀 2 分鐘

系列文章傳送門:

[AI線上應用實戰] 如何快速建立你的AI線上應用 使用Bubble.io #Bubble.io教學



在這篇文章中,將學會如何用Bubble快速建立Floating Box

通常使用Repeating Group元件可以快速達到呈列過去訊息,但是方向會是相反的,需要使用額外插件改變方向

raw-image


實際步驟

加入Chatroom Datatype:

raw-image

可以創建一個Reusable element

raw-image


加入RG插件,並且依照常見排版建好頁面

raw-image

Repeating Group Text的ID Attribute中,加入rg1

raw-image

RG1元件的RepeatingGroups ID設定rg1

raw-image

Repeating Group的框框內,加入想要加入的內容,例如每則訊息的ID、text、Icon即可,例如,在其中加入text元件,其內容是

raw-image

記得Search for需要按照日期Descending排列



此外,也可以建立workflow,監測是否有需要觸發AI,例如當用戶使用@bot的時候,就觸發OpenAI chatcompletion

raw-image



想要更有系統的學習嗎?

歡迎至Google BooksReadmoo購買《零基礎開發AI應用: Bubble實戰指南》。在本書中我們深入淺出的教您使用Bubble平台,並結合最新最潮的AI技術,讓你輕鬆完成你的創業夢。

raw-image



























留言
avatar-img
留言分享你的想法!
avatar-img
ECOE的沙龍
4會員
44內容數
ECOE的沙龍的其他內容
2025/02/03
付費工具:Mathpix 可以用螢幕矩形截圖的方式快速將數學公式、表格轉乘latex,用於latex文件或是Markdown,但月費蠻高的 免費替代品pix2tex 原始碼: https://github.com/lukas-blecher/LaTeX-OCR 精準度比mathpix差
Thumbnail
2025/02/03
付費工具:Mathpix 可以用螢幕矩形截圖的方式快速將數學公式、表格轉乘latex,用於latex文件或是Markdown,但月費蠻高的 免費替代品pix2tex 原始碼: https://github.com/lukas-blecher/LaTeX-OCR 精準度比mathpix差
Thumbnail
2024/12/31
在購買電腦支架時,常常需要考量電腦主機的重量,一台電腦具體而言多重呢? 以筆者的主機為例 機殼: 8kg (MONTECH 君主 Air 1000 Silent 靜音版 ATX) 顯示卡: 0.753kg (GeForce RTX™ 3060 VENTUS 3X 12G OC) 主機板: 1.
2024/12/31
在購買電腦支架時,常常需要考量電腦主機的重量,一台電腦具體而言多重呢? 以筆者的主機為例 機殼: 8kg (MONTECH 君主 Air 1000 Silent 靜音版 ATX) 顯示卡: 0.753kg (GeForce RTX™ 3060 VENTUS 3X 12G OC) 主機板: 1.
2024/11/15
(詳細API參考: Advanced Reference) 使用GPU是AI研究、工程中不可或缺的一部份, VRAM 使用對於深度學習和高性能計算領域至關重要。有效分析和管理 VRAM 使用能幫助我們提升模型效率,避免不必要的記憶體(內存)溢出問題。 本文將帶你快速上手 NVIDIA 的 Nsi
Thumbnail
2024/11/15
(詳細API參考: Advanced Reference) 使用GPU是AI研究、工程中不可或缺的一部份, VRAM 使用對於深度學習和高性能計算領域至關重要。有效分析和管理 VRAM 使用能幫助我們提升模型效率,避免不必要的記憶體(內存)溢出問題。 本文將帶你快速上手 NVIDIA 的 Nsi
Thumbnail
看更多
你可能也想看
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
透過蝦皮分潤計畫,輕鬆賺取零用金!本文分享5-6月實測心得,包含數據流程、實際收入、平臺優點及注意事項,並推薦高分潤商品,教你如何運用空閒時間創造被動收入。
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
單身的人有些會養寵物,而我養植物。畢竟寵物離世會傷心,植物沒養好再接再厲就好了~(笑)
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
不知你有沒有過這種經驗?衛生紙只剩最後一包、洗衣精倒不出來,或電池突然沒電。這次一次補貨,從電池、衛生紙到洗衣精,還順便分享使用心得。更棒的是,搭配蝦皮分潤計畫,愛用品不僅自己用得安心,分享給朋友還能賺回饋。立即使用推薦碼 X5Q344E,輕鬆上手,隨時隨地賺取分潤!
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
身為一個典型的社畜,上班時間被會議、進度、KPI 塞得滿滿,下班後只想要找一個能夠安靜喘口氣的小角落。對我來說,畫畫就是那個屬於自己的小樹洞。無論是胡亂塗鴉,還是慢慢描繪喜歡的插畫人物,那個專注在筆觸和色彩的過程,就像在幫心靈按摩一樣,讓緊繃的神經慢慢鬆開。
Thumbnail
這篇內容,將會講解什麼是「repeat迴圈」,以及與「repeat迴圈」相關的知識。包括repeat迴圈的簡介、break、continue。
Thumbnail
這篇內容,將會講解什麼是「repeat迴圈」,以及與「repeat迴圈」相關的知識。包括repeat迴圈的簡介、break、continue。
Thumbnail
浮動(float)是早期用來創建佈局的技術。元素可以向左或向右浮動,旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
Thumbnail
浮動(float)是早期用來創建佈局的技術。元素可以向左或向右浮動,旁邊的元素會環繞浮動元素。浮動元素通常用於圖文混排或簡單的兩欄佈局。
Thumbnail
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
Thumbnail
這系列是我在 2023 六角學院 Vue作品實戰班的筆記,筆記以本人理解的方式記錄。此篇主題為 Slot Props 進階應用 ,其中包含單筆資料、多筆資料。
Thumbnail
想了解如何製作適合自己的TG群組機器人來管理群組嗎? 以下將詳細的逐步教學。
Thumbnail
想了解如何製作適合自己的TG群組機器人來管理群組嗎? 以下將詳細的逐步教學。
Thumbnail
題目敘述 題目會給我們一組定義好的界面和需求,要求我們設計一個資料結構,可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。 RandomizedSet() 類別建構子 bool insert(int val) 插入元素的function界面 bool remove(int val
Thumbnail
題目敘述 題目會給我們一組定義好的界面和需求,要求我們設計一個資料結構,可以滿足平均O(1)的插入元素、刪除元素、隨機取得元素的操作。 RandomizedSet() 類別建構子 bool insert(int val) 插入元素的function界面 bool remove(int val
Thumbnail
在前一篇「教你如何用ChatGPT來製作Notion Quotes」中,我們學到了如何運用ChatGPT創建個人語錄庫,以豐富Notion數位空間。今天,我們與大家分享已完成的Notion Quotes模板,可供免費下載,輕鬆建立屬於自己的個人語錄庫,為Notion空間增添更多層次與深度。
Thumbnail
在前一篇「教你如何用ChatGPT來製作Notion Quotes」中,我們學到了如何運用ChatGPT創建個人語錄庫,以豐富Notion數位空間。今天,我們與大家分享已完成的Notion Quotes模板,可供免費下載,輕鬆建立屬於自己的個人語錄庫,為Notion空間增添更多層次與深度。
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
介紹有關於一些小修改的方便插件。
Thumbnail
第一個實戰,我們就先從如何連接自己的網站開始,當我們輸入「部落格」時,機器人就會輸出一個表格,只要點選「馬上觀看」,我們就可以直接連接到自己的部落格,此功能其實也可以運用在連接粉專或是其他想要觀看的網站唷!! Flex Message 實際製作教學 選擇模板 更改圖片 修改內容物 修改底部box
Thumbnail
第一個實戰,我們就先從如何連接自己的網站開始,當我們輸入「部落格」時,機器人就會輸出一個表格,只要點選「馬上觀看」,我們就可以直接連接到自己的部落格,此功能其實也可以運用在連接粉專或是其他想要觀看的網站唷!! Flex Message 實際製作教學 選擇模板 更改圖片 修改內容物 修改底部box
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News