[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
雙11於許多人而言,不只是單純的折扣狂歡,更是行事曆裡預定的,對美好生活的憧憬。 錢錢沒有不見,它變成了快樂,跟讓臥房、辦公桌、每天早晨的咖啡香升級的樣子! 這次格編突擊辦公室,也邀請 vocus「野格團」創作者分享掀開蝦皮購物車的簾幕,「加入購物車」的瞬間,藏著哪些靈感,或是對美好生活的想像?
Thumbnail
雙11於許多人而言,不只是單純的折扣狂歡,更是行事曆裡預定的,對美好生活的憧憬。 錢錢沒有不見,它變成了快樂,跟讓臥房、辦公桌、每天早晨的咖啡香升級的樣子! 這次格編突擊辦公室,也邀請 vocus「野格團」創作者分享掀開蝦皮購物車的簾幕,「加入購物車」的瞬間,藏著哪些靈感,或是對美好生活的想像?
Thumbnail
雙11購物節準備開跑,蝦皮推出超多優惠,與你分享實際入手的收納好物,包括貨櫃收納箱、真空收納袋、可站立筆袋等,並分享如何利用蝦皮分潤計畫,一邊購物一邊賺取額外收入,讓你買得開心、賺得也開心!
Thumbnail
雙11購物節準備開跑,蝦皮推出超多優惠,與你分享實際入手的收納好物,包括貨櫃收納箱、真空收納袋、可站立筆袋等,並分享如何利用蝦皮分潤計畫,一邊購物一邊賺取額外收入,讓你買得開心、賺得也開心!
Thumbnail
分享個人在新家裝潢後,精選 5 款蝦皮上的實用家居好物,包含客製化層架、MIT 地毯、沙發邊桌、分類垃圾桶及寵物碗架,從尺寸、功能到價格都符合需求,並提供詳細開箱心得與購買建議。
Thumbnail
分享個人在新家裝潢後,精選 5 款蝦皮上的實用家居好物,包含客製化層架、MIT 地毯、沙發邊桌、分類垃圾桶及寵物碗架,從尺寸、功能到價格都符合需求,並提供詳細開箱心得與購買建議。
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
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
Thumbnail
JavaScript 能做許多事,尤其透過瀏覽器的 API 或套件,我們得以悠游於巨量資料中,將資料轉換為與使用者溝通的介面,以下就來分享 15 個實用的 Vanilla JS 程式碼...
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News