# Week 0x01 - GradioDay1 (2025/03/08)
> [color=#8805bc][time=Sat Mar 08 2025 21:00:00]
> 簡報/講義：[Gradio Note](/geoHTeJpRdSoBLtMcuIRkA)

[TOC]

## 共筆

- 課程與講義製作 (花生)
- 大概 4 小時構思講什麼
- 整個時間約 10 hr (講義 + demo code)
- 預計第一次可以製作出一個初步的成品供後續接續的使用(?)
- 第二輪預計講 Git
- [為什麼學 python？](https://ithelp.ithome.com.tw/articles/10352210)
- 不一定完全正確，但是 「學習」 一定是對的
- 寫 python 分成：
- notebook
- 多為 `.ipynb` 檔案
- 可以一格一格的執行看結果
- 容易觀察程式碼變化
- 適合報告 or 教學
- 要注意程式執行的順序
- 工作坊預計以這個為主
- script
- `.py`
- 比較嚴謹的檔案架構
- 不好 debug 與細節測試
- 開發環境
- [colab](https://colab.google/)
- notebook
- [replit](https://replit.com/)
- notebook 分成
- 程式碼區塊
- 寫程式的地方
- 文字區塊
- 文件/註解/etc
- 輸出區塊
- kernel
- 執行階段
- 執行很久會很混亂，可以重新啟動來清除既存的變數等等
- 彩蛋 (?)
- power mode
- 打字震動
- hackmd 也有
- how do i turn this on
- 
- 每次開起來都要重新安裝套件 (發呆太久會斷線也要重來)
- MAC 如果要分享畫面需要注意權限問題
- 沒想到我們稍微卡在mac的螢幕分享問題
- FYI: https://www.click-ap.com/meet/faq/macscreenshare
### 正式 Session
- pip: 其中一個最常見的python的套件管理工具
- 聽說 [`uv`](https://github.com/astral-sh/uv) 很厲害
- `%pip` 是 notebook 專用語法
- gradio
- 在 launch 加上 `debug=True`
- 用簡單的 python 程式快速開發搭建一個網站
- demo 給主管看 (?)
- qt 跟 tkinter 等套件學習成本很高
- 網頁可以跨平臺
- (程式請看[這裡](https://colab.research.google.com/drive/18kQcVKZRlnAMa4956wYljmUdW_R-NbU8))
- 酷酷的圖形化/視覺化程式
- 
- 支援多種圖形化輸入 (?)
- CheckBox 元件
- 可以當做布林值 (boolean) 的輸入
- 
- 以下可以對照圖片看

            def proc_str(query, is_lower):
                if is_lower:
                    return query.lower()
                return query.upper()

            gr.Interface(
                fn=proc_str,
                inputs=["text", "checkbox"], # <- 我是左邊的輸入框以及打勾勾的框框
                outputs="text"    # <- 我是右邊的文字輸入框
            ).launch()

- 圖片元件 (輸入圖片)
- 文字可以用 `markdown` 或 `html`
- 輸入框都有文字標籤 (label)
- 是參數名稱來的
- 因為 python 可以吃中文參數(?)，可以放中文
- 也可以給個 `label` 參數
- 上傳檔案
- 會真的傳到你架這個服務的 server 上面
- 如果你用 *COLAB* 的話，時間到就關掉沒了唷
- 能結合 AI 自動生成程式範例 (Google Gemini)
- 缺點 && 解法
- interface 僅對應到單一 $\rightarrow$ function
- 無法自定排版、要複雜功能 -> 用 `gr.Blocks()`
- 可以用 row 或 column 來製作不同排版
- 畫面太小它會自動 rwd (自動排版 for newbie)
- 之後會講管理多個使用者同時操作的問題

- 

---
**Colab debug 好用資訊 可以更清楚知道發生什麼事**
- 剛剛花生說在 colab 中 gradio 不會顯示 traceback 其實可以在 launch 的參數中加入 `debug=True` 就會顯示了
- 在Colab或iPython環境中，因為程式執行問題，如果加了`debug=True`，那一格codeblock會一直處於執行狀態，因此debug完成以後記得把`debug=True`拿掉並重新run 一次code
- 
E.g.

def proc_str(query, is_lower):
    if is_lower:
        return query.lower()
    return query.upper()

gr.Interface(
    fn=proc_str,
    inputs=["text", "checkbox"],
    outputs="text"
).launch(debug=True)  # 在這裡加!!!

## Feedback

- 全螢幕 字放大
- 子母畫面

講解code的時候可以瀏覽器全螢幕

## 下回預告

如何管理 Gradio 多使用者下的狀況

## 個人心得 & 聊天室
+ 臭臭同事擺薰香ww 擺空氣清淨機

是我的錯覺還是剛才飛董的音量大小長得像是正弦波圖形
↑度

笑了 有點像 “現在你會python了 現在開始開發大規模分散演算法吧”www

還在混亂中ww

是說有工作環境是在使用 ipynb 的嗎
> 窩不知道，我沒有在用 python，我都在寫 js/ts
> [name=stanley2058]

> 我沒有在公司看過人用 ipynb
還是我都待在舒適圈
[name=david02653]

> 我朋友是用ipynb 當開發工具。 我不會寫程式不太清楚 [name=d.f.]

這就是 MAC 的不合理之處嗎

What Happend now?
Need a simple brief $\rightarrow$ k
↑看共筆阿

剛好看到網路上筆記有說明 ::-1 補在這邊(?)

list = [1,2,3,4,5,6]

list2 = list[:]       #起始、結束、改變量都不指定，複製全部
[1, 2, 3, 4, 5, 6]

list2 = list[::2]     #第一項開始，間隔一個
[1, 3, 5]

list2 = list[::-2]    #最後一項開始，間隔一個
[6, 4, 2]

list2 = list[:2]      #前兩項資料
[1, 2]

list2 = list[-2:]     #後兩項資料
[5, 6]

list2 = list[2:-2]    #按照索引值取
[3, 4]