🌐 Gradio: a web page from a Python function · Gradio: หน้าเว็บจากฟังก์ชัน Python · Gradio：用一个 Python 函数做网页

📄 price_app.py

"""price_app.py — challenge 2: the coin price, in a browser."""
import json
import urllib.request

import gradio as gr

BITKUB = "https://api.bitkub.com/api/v3/market/ticker"


def price_of(coin):
    """Ask Bitkub what one coin is worth in baht."""
    pair = coin + "_THB"
    with urllib.request.urlopen(BITKUB + "?sym=" + pair, timeout=30) as response:
        coins = json.load(response)
    if not coins:
        return "Bitkub does not know " + coin, ""

    # Bitkub sends a list even for one coin, and every number arrives as text.
    # The field is percent_change, with an underscore. Print the whole answer
    # once and read the names; guessing them costs more time than looking.
    now = coins[0]
    price = float(now["last"])
    moved = float(now["percent_change"])

    arrow = "up" if moved >= 0 else "down"
    return (format(price, ",.2f") + " baht",
            arrow + " " + format(abs(moved), ".2f") + "% today")


with gr.Blocks(title="Coin prices") as demo:
    gr.Markdown("## What is it worth right now?")
    with gr.Row():
        coin = gr.Dropdown(["BTC", "ETH", "XRP", "DOGE"], value="BTC",
                           label="Coin")
        go = gr.Button("Check", variant="primary")
    with gr.Row():
        baht = gr.Textbox(label="One coin costs")
        change = gr.Textbox(label="Since midnight")

    # Two outputs, so the function returns two things, in this order.
    go.click(fn=price_of, inputs=coin, outputs=[baht, change])

    # Run it once as the page opens, so it is never blank.
    demo.load(fn=price_of, inputs=coin, outputs=[baht, change])

if __name__ == "__main__":
    demo.launch()

🖥️ WHAT IT PRINTED · live, from Bitkub

BTC -> ('2,799,289.64 baht', 'down 2.13% today')
ETH -> ('89,288.30 baht', 'down 1.88% today')

📄 words_app.py

"""words_app.py — challenge 3: what Python really thinks your text is."""
import unicodedata

import gradio as gr


def look_closely(text):
    """Three questions about one piece of text, and three honest answers."""
    if not text:
        return "", "", ""

    # split() looks for spaces. Thai and Chinese do not use them between
    # words, so a whole sentence comes back as a single item.
    words = text.split()
    counted = (str(len(words)) + " by split(), "
               + str(len(text)) + " characters")
    if len(words) == 1 and len(text) > 12:
        counted = counted + "  <- split() found no spaces to cut on"

    # len() counts code points. A Thai vowel or tone mark is its own one,
    # so the number is often larger than the letters a reader sees.
    pieces = []
    for letter in text[:14]:
        pieces.append(letter + " = " + unicodedata.name(letter, "unknown"))
    inside = "\n".join(pieces)

    # isdigit is true for Thai numerals, and int() reads them.
    numbers = ""
    if text.strip().isdigit():
        numbers = text.strip() + " is a number to Python: " + str(int(text.strip()))
    elif text.strip().isnumeric():
        numbers = (text.strip() + " is numeric but not a digit. Its value is "
                   + str(unicodedata.numeric(text.strip()[0])))
    else:
        numbers = "not a number"

    return counted, inside, numbers


demo = gr.Interface(
    fn=look_closely,
    inputs=gr.Textbox(label="Paste anything", lines=3),
    outputs=[gr.Textbox(label="How many words"),
             gr.Textbox(label="What the first letters really are", lines=8),
             gr.Textbox(label="Is it a number?")],
    title="What Python thinks your text is",
    examples=[["the cat sat on the mat"], ["ดวงวันนี้เป็นยังไง"],
              ["今天的运势如何"], ["๑๒๓"], ["café"]],
)

if __name__ == "__main__":
    demo.launch()

🖥️ WHAT IT PRINTED · four things pasted in

the cat sat    3 by split(), 11 characters      not a number
ดวงวันนี้      1 by split(), 9 characters       not a number
๑๒๓            1 by split(), 3 characters       is a number to Python: 123
café           1 by split(), 4 characters       not a number

📄 image_app.py

"""image_app.py — challenge 4: a picture goes in, a changed picture comes out."""
import gradio as gr
from PIL import Image, ImageFilter, ImageOps


def change(picture, what, angle):
    """Take a picture and hand a different one back.

    type="pil" on the input means gradio gives this function a Pillow
    image, not a file path and not a grid of numbers.
    """
    if picture is None:
        return None, ""

    if what == "grey":
        changed = ImageOps.grayscale(picture)
    elif what == "blur":
        changed = picture.filter(ImageFilter.GaussianBlur(4))
    elif what == "edges":
        changed = picture.convert("L").filter(ImageFilter.FIND_EDGES)
    else:
        changed = ImageOps.invert(picture.convert("RGB"))

    if angle:
        # expand=True grows the canvas so a turned corner is not cut off.
        changed = changed.rotate(angle, expand=True, resample=Image.BICUBIC)

    return changed, (what + ", turned " + str(angle) + " degrees, now "
                     + str(changed.width) + "x" + str(changed.height))


with gr.Blocks(title="Change a picture") as demo:
    gr.Markdown("## Drop a picture in")
    with gr.Row():
        with gr.Column():
            before = gr.Image(type="pil", label="Yours")
            what = gr.Radio(["grey", "blur", "edges", "invert"],
                            value="grey", label="Do what to it")
            angle = gr.Slider(0, 270, value=0, step=90, label="Turn it")
            go = gr.Button("Change it", variant="primary")
        with gr.Column():
            after = gr.Image(label="Changed")
            note = gr.Textbox(label="What happened")

    go.click(fn=change, inputs=[before, what, angle], outputs=[after, note])

if __name__ == "__main__":
    demo.launch()

🖥️ WHAT IT PRINTED · one real PNG, four ways

opened ac_title.png at 898x674
grey    -> grey, turned 90 degrees, now 674x898
blur    -> blur, turned 90 degrees, now 674x898
edges   -> edges, turned 90 degrees, now 674x898
invert  -> invert, turned 90 degrees, now 674x898

📄 quiz_app.py

"""quiz_app.py — challenge 4: a quiz that keeps your score, and only yours."""
import random

import gradio as gr

WORDS = [("cat", "แมว"), ("rain", "ฝน"), ("market", "ตลาด"),
         ("mountain", "ภูเขา"), ("rice", "ข้าว"), ("teacher", "ครู"),
         ("friend", "เพื่อน"), ("water", "น้ำ")]


def ask_one():
    """Pick a word and the three wrong answers to show beside it."""
    english, thai = random.choice(WORDS)
    wrong = random.sample([t for _, t in WORDS if t != thai], 3)
    choices = wrong + [thai]
    random.shuffle(choices)
    return english, thai, choices


def start():
    """Set up the first question and an empty score."""
    english, thai, choices = ask_one()
    score = {"right": 0, "asked": 0, "answer": thai}
    return ("How do you say **" + english + "**?",
            gr.Radio(choices=choices, value=None, label="Pick one"),
            "", score)


def answer(chosen, score):
    """Mark it, then ask the next one.

    score arrives as this browser's own copy and is handed straight back.
    A plain global would be shared by everyone who opened the page.
    """
    if chosen is None:
        return gr.skip(), gr.skip(), "Pick one first.", score

    score["asked"] = score["asked"] + 1
    if chosen == score["answer"]:
        score["right"] = score["right"] + 1
        said = "Right. " + chosen
    else:
        said = "No, it was " + score["answer"]

    english, thai, choices = ask_one()
    score["answer"] = thai
    running = (said + "   —   " + str(score["right"]) + " of "
               + str(score["asked"]))
    return ("How do you say **" + english + "**?",
            gr.Radio(choices=choices, value=None, label="Pick one"),
            running, score)


with gr.Blocks(title="Thai words") as demo:
    gr.Markdown("## Thai words")
    question = gr.Markdown()
    choices = gr.Radio(choices=[], label="Pick one")
    result = gr.Markdown()

    # State is invisible. Every browser that opens this page gets its own,
    # and it is handed to any function that asks for it.
    score = gr.State({"right": 0, "asked": 0, "answer": ""})

    go = gr.Button("Answer", variant="primary")
    go.click(fn=answer, inputs=[choices, score],
             outputs=[question, choices, result, score])

    demo.load(fn=start, inputs=None,
              outputs=[question, choices, result, score])

if __name__ == "__main__":
    demo.launch()

🖥️ WHAT IT PRINTED · right, wrong, and nothing picked

start  -> How do you say **market**?   answer is ตลาด
right  -> Right. ตลาด   -   1 of 1
wrong  -> No, it was ครู   -   1 of 2
none   -> Pick one first.
score kept: {'right': 1, 'asked': 2}

📄 agent_app.py

"""agent_app.py — challenge 5: give the model a tool, in a browser."""
import json
import os
import urllib.request

import gradio as gr
from smolagents import OpenAIServerModel, ToolCallingAgent, tool

# Where the model runs. These defaults use Ollama on this computer.
LLM_URL = os.environ.get("LLM_URL", "http://localhost:11434/v1")
# A small model that is good at tool calls beats a big one that is not.
# A 14B on a laptop with no graphics card takes about a minute per answer.
LLM_MODEL = os.environ.get("LLM_MODEL", "llama3.2")

# The OpenAI client always sends a key. Ollama accepts any word.
LLM_KEY = os.environ.get("LLM_KEY", "ollama")

BITKUB = "https://api.bitkub.com/api/v3/market/ticker"


@tool
def coin_price(symbol: str) -> str:
    """Look up what one coin is worth in Thai baht, right now.

    Args:
        symbol: the coin's ticker, for example BTC or ETH
    """
    # No double quotes in the line above. That description is copied into
    # the tool list the model is shown, and a small model will copy it
    # straight back into its answer, quotes and all, which is then not
    # valid JSON. It costs a whole step every time.
    pair = symbol.upper().strip() + "_THB"
    with urllib.request.urlopen(BITKUB + "?sym=" + pair, timeout=30) as response:
        coins = json.load(response)
    if not coins:
        return "no coin called " + symbol + " on Bitkub"
    return ("1 " + symbol.upper() + " = "
            + format(float(coins[0]["last"]), ",.2f") + " baht")


llm = OpenAIServerModel(model_id=LLM_MODEL, api_base=LLM_URL, api_key=LLM_KEY)

# The list of tools is the whole permission system. A tool that is not in
# this list cannot be called, however nicely anyone asks.
agent = ToolCallingAgent(tools=[coin_price], model=llm)


def think(message, history):
    """Say something while it works, then replace it with the answer.

    An agent takes tens of seconds. yield puts a word on the screen at once,
    so the page does not just sit there looking broken.
    """
    yield "thinking, and deciding whether to look anything up..."
    try:
        # max_steps so a model that cannot work out what to do gives up,
        # rather than looping until you close the tab.
        yield str(agent.run(message, max_steps=6))
    except Exception as trouble:
        yield "no answer: " + str(trouble)


demo = gr.ChatInterface(
    think,
    title="Ask about coins",
    description="Nobody wired a button. The model decides when to look.",
    examples=["What is one bitcoin worth in baht?",
              "Is ETH cheaper than BTC today?",
              "What is the capital of Thailand?"])

if __name__ == "__main__":
    demo.launch()

🖥️ WHAT IT PRINTED · llama3.2 on this laptop, 6.5 seconds

default model: llama3.2
Calling tool: 'coin_price' with arguments: {'symbol': 'BTC'}
Observations: 1 BTC = 2,815,197.21 baht
Calling tool: 'final_answer'
Final answer: 2,815,197.21
6.5s, yielded 2