# Meow Tarot ## Week 12 ---- ## 莫名其妙的副檔名 + 突然發現可以用 `Hello.👻` 這種檔名 + [Mojo](https://www.modular.com/mojo) 支援 `.🔥` 當作程式碼副檔名 + [CrabLang](https://github.com/crablang/crab/issues/53) 也準備支援 `.🦀` 當作程式碼副檔名 + VSCode 可以到 Files Associations 建立副檔名跟程式語言的關聯  ---- ## Gradio + [Gradio](https://github.com/gradio-app/gradio) 可以用來建立 Web App 超方便的框架 + 使用純 Python 撰寫，也可以自訂 CSS + 完全不需要煩惱同步非同步的問題 ---- ## Interface + 使用 Interface 簡單建立基本的 IO 介面 ```python= import gradio as gr def f(message: str): return message.upper() demo = gr.Interface(f, inputs="text", outputs="text") demo.launch() ``` ---- ## 圖片處理也是輕輕鬆鬆 ```python= import numpy as np import gradio as gr def sepia(input_img): sepia_filter = np.array( [[0.393, 0.769, 0.189], [0.349, 0.686, 0.168], [0.272, 0.534, 0.131]]) sepia_img = input_img.dot(sepia_filter.T) return sepia_img / sepia_img.max() demo = gr.Interface(sepia, "image", "image") demo.launch() ``` ---- ## Be a Man 界面 DIY ```python= import gradio as gr with gr.Blocks() as demo: inn = gr.Textbox(label="這是個輸入") out = gr.Textbox(label="這是個輸出") btn = gr.Button("大寫！") def f(s: str): return s.upper() btn.click(f, inn, out) demo.launch() ``` ---- ## 超讚的 Chatbot 類別 ```python= import gradio as gr with gr.Blocks() as demo: bot = gr.Chatbot().style(height=600) msg = gr.Textbox() def SendMessage(msg: str, history: list): resp = "喵喵喵" history.append([msg, resp]) return None, history msg.submit(SendMessage, [msg, bot], [msg, bot]) demo.launch() ``` ---- ## State 使用 Session State 控制每個使用者獨立的狀態 ```python= import gradio as gr with gr.Blocks() as demo: cart = gr.State([]) def add_item(cart, item): cart.append(item) return cart, ", ".join(cart) inn = gr.Textbox() out = gr.Textbox() inn.submit(add_item, [cart, inn], [cart, out]) demo.launch() ``` ---- ## Style 可以自訂主題、字體、標題、圖示和 CSS 控制 ```python= import gradio as gr title = "Meow Meow Meow" css = "#input_text {padding: 50px !important}" font = [gr.themes.GoogleFont("Pacifico")] theme = gr.themes.Soft(font=font) with gr.Blocks(theme=theme, title=title, css=css) as demo: chatbot = gr.Chatbot().style(height=600) message = gr.Textbox(elem_id="input_text") def SendMessage(msg: str, history: list): resp = "**Meow Meow Meow**" # 支援 Markdown history.append([msg, resp]) return None, history message.submit(SendMessage, [message, chatbot], [message, chatbot]) demo.launch(favicon_path="Data/Duck.png") ``` ---- ## 薯條塔羅 Demo Time!