Gradio筆記1_不用碰到js,css也能藉由短短幾行python code產生網站介面

 

pip install gradio


此時會自動安裝一堆的相依套件




預覽透過7860這個port開啟
http://127.0.0.1:7860



上述執行都是用直接python 去RUN的方式,當我們調整程式要Reload時候都要中斷再重新RUN十分麻煩。可以透過下gradio指令的方式來快速讓他讀取到存入的變更,並自動刷新網頁且不用中斷。
gradio my_gradio.py --demo-name=web_demo

gradio {你所指定的.py檔案名稱} --demo-name={你這邊要launch網站的變數別名}


當然假設今天想將demo網頁分享給其他人,也完全不需要花時間搞捨麼租用主機
跟架設虛擬主機等等步驟,只需要調整.launch()
括號後面參數設置為share=True即可分享跨網域給全世界,只要這隻應用仍然開著RUN的話。


測試程式碼

import gradio as gr

def greet(Name,is_morning,temperature):
    msg = "Good morning" if is_morning else "Good afternoon"
    greeting = f"{msg} {Name}. It is {temperature} 攝氏溫度."
    celsius = (temperature - 32) * 5 / 9
    return greeting,round(celsius,2)

#必要三個參數:輸入/輸出
web_demo = gr.Interface(fn=greet, # 指定function不指定就給None
                        inputs=["text","checkbox",gr.Slider(0,60)],
                        outputs=["text","number"],clear_btn=None,submit_btn="送出",
                        #theme="soft"
                        #theme="gradio/Glass"
                        theme="gradio/monochrome"
                        )
web_demo.launch(share=True)
#預設參數share=False,改True就可以跨網域分享給全世界



Gradio本身有不同網頁預設樣式主題供你挑選,比方預設樣式我們不喜歡可以切換成以下幾種不同風格。
theme="gradio/monochrome"



theme="gradio/Glass"

theme="soft"

而預設帶出來的Clear 跟 Submit若想隱藏或更改文字預設英文顯示字眼
比方更改為中文也是可以


若想將clear 按鈕拿掉就設置為None即可

關於theme樣式主題如果要更改類似全域性字體或是要挑選不同配置對應要生成怎樣的code
可以打以下python code來自動帶出預設gradio樣式參數配置的demo網頁來查看效果
Theme Builder測試案例程式

import gradio as gr
gr.themes.builder()








可以在此去預覽套用後的樣式呈現,只要按Load Theme即可所見及所得。
這邊基本上都幫你把網頁基本架構常見需要客製化的屬性參數都拉出來變成介面調參並可以
在View Code去複製粘貼對於theme配置產生的程式要怎麼套用的範例程式。





留言

這個網誌中的熱門文章

何謂淨重(Net Weight)、皮重(Tare Weight)與毛重(Gross Weight)

Architecture(架構) 和 Framework(框架) 有何不同?_軟體設計前的事前規劃的藍圖概念

(2021年度)駕訓學科筆試準備題庫歸納分析_法規是非題