# Week 0x06 - GradioDay5 (2025/05/24)

> [color=#8805bc][time=Sat May 24 2025 21:00:00]
> 講義：https://hackmd.io/@hell-kitty/GradioDay5

[TOC]

## 共筆
- 要收尾了
- 提示欄位
- 用 textbox 加入提示資訊告訴使用者答案是否正確
- 取代原本的 toast
- 延伸閱讀：{%preview https://maxschmitt.me/posts/toasts-bad-ux %}
- gradio 有很多reuse 的component -> 適合作為refactor 的練習
- 把元件的 `interactive` 設定成 `False` 可以避免使用者改動欄位的值
- 透過 textbox 顯示文字格式
- 歷史記錄
- 記錄使用者答題記錄，輸入了什麼、正確、錯誤、正確率 ..etc
- 在確保使用流程的同時，有再來一次的狀況會需要把資料(變數) reset 回原本開始的狀態
- 重複利用類似的功能
- ~~clean code 派狂喜~~
- copilot 這類的助手其實很會寫重複的 code
- 透過傳參方式建立出可以重用的事件 pattern
- design pattern，啟動
- `app.launch(height=700)` -> 透過限制視窗大小 產生 scroll bar 方便小螢幕觀看 (不會有雙重卷軸)
- notebook 裡面比較有機會遇到需要捲動的狀況
- `trigger_mode` 可以定義使用者多次重複觸發同一個元件的行為

## 個人心得 & 聊天室

窩不熟 python，`**` 是 spread operator ㄇ？
↑ 我覺得是

df覺得df需要幫忙 QQQ

> copilot 這類的助手其實很會寫重複的 code

除了 windsurf，對就是你，你最爛

我好痛苦 修不好
container 認不到...volume

↓ 看來 highlight 會隨著編輯跳動
沒辦法，hackmd 的內文 anchor 是在後端更新的，所以你打字 -> (後端) -> 更新錨點 -> (通知前端更新) -> 更新顯示。所以一定會有延遲

看來是架構(?)本身的限制

為了即時同步協作有一個 truth (後端)，所以會有這種問題，要避免的話可能要在前端通靈下一個字會加在那裡

來玩新功能 (<- 檢視模式)

&uarr; how did u do that
?


這玩意兒是 css 之類的?
不會反映在編輯原文上欸

這很星爆，在 parse 出來的 html 外面會包一層 span 再上 style
所以是 markdown render 完再套一層這樣
嗎

度
wow

<span class="ui-emoji-reply-inline-span" data-inline-emoji-reply-id="54659204-9427-4e1d-902c-62b5873b9af7">
span 然後 span 會發生什麼事
</span>

看來答案是反白也什麼都不會顯示出來
> 

顯然手動弄了一個 span 就不會被偵測了
正常版本 span 內的 uuid 是對應按下去片段的表符嗎

有惹，要：`data-inline-emoji-reply-id`

唔，所以是我剛剛打錯了嗎
你剛剛打 `id`
哦哦
那那個 uuid 是隨機的嗎，只是用來記錄這次按下去這回事這樣
是隨機的 (對應到後端的 id)