Python with Princess TaipingPython กับเจ้าหญิงไท่ผิง跟太平公猪学 Python

0Get ready: the notebookเตรียมตัว: โน้ตบุ๊ก准备：笔记本

⬇ Download the notebook ดาวน์โหลดโน้ตบุ๊ก 下载笔记本

1Variables: names that rememberตัวแปร: ชื่อที่จำได้变量：会记住东西的名字

step1_variables.py

# Step 1: variables. A variable is a name for a value.
import sys
import platform

pig = "Princess Taiping"              # text in quotes is a string
age = 3                            # a whole number is an int
print(pig, "is", age, "years old")

age = age + 1                      # a birthday: now the name age holds 4
print(pig, "is now", age)

version = platform.python_version()    # which Python is running this
machine = platform.machine()           # the kind of computer it runs on
place = sys.platform                   # where it runs: emscripten is a web browser
print("Python", version)
print("Machine:", machine)
print("Platform:", place)

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

Princess Taiping is 3 years old
Princess Taiping is now 4
Python 3.14.2
Machine: wasm32
Platform: emscripten

# Try it, step 1: your own name and age, and a birthday.
my_name = "Mali"
my_age = 10
print(my_name, "is", my_age)

my_age = my_age + 1
print("Happy birthday!", my_name, "is now", my_age)

2Lists: many things under one nameลิสต์: หลายอย่างในชื่อเดียว列表：一个名字装很多东西

step2_lists.py

# Step 2: lists. A list keeps many values in order, under one name.
import sys

snacks = ["mango", "sticky rice", "khao soi"]
print(snacks[0])                   # Python counts from 0, so [0] is the first
print(len(snacks), "snacks")       # len() counts what is in the list
snacks.append("roti")              # append() adds one more at the end
print(snacks)

modules = sorted(sys.stdlib_module_names)   # every module that comes with Python, A to Z
print(len(modules), "modules come with Python")
print("First:", modules[0])
print("Last:", modules[-1])        # [-1] is the last one

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

mango
3 snacks
['mango', 'sticky rice', 'khao soi', 'roti']
297 modules come with Python
First: __future__
Last: zoneinfo

# Try it, step 2: one more snack, and the modules built into Python itself.
import sys

snacks = ["mango", "sticky rice", "khao soi"]
snacks.append("banana roti")
print(snacks)
print(len(snacks), "snacks")

built_in = sys.builtin_module_names
print(len(built_in), "modules are built into Python")

3Ask the computer: platformถามคอมพิวเตอร์: platform问问电脑：platform

step3_ask_the_computer.py

# Step 3: ask the computer. platform tells you what your Python is running on.
import platform

print("Platform:", platform.platform())    # everything in one line
print("System:", platform.system())        # Emscripten is a web browser, Darwin is a Mac
print("Machine:", platform.machine())      # wasm32 is WebAssembly, arm64 is an Apple chip
bits = platform.architecture()             # a pair of answers, like a list of two
print("Bits:", bits[0])                    # [0] is the first answer
print("Python:", platform.python_implementation(), platform.python_version())

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

Platform: Emscripten-5.0.3-wasm32-32bit
System: Emscripten
Machine: wasm32
Bits: 32bit
Python: CPython 3.14.2

# Try it, step 3: Python's whole version line, and the computer's name.
import sys
import platform

print(sys.version)
print(platform.node())

4Dictionaries: find things by nameดิกชันนารี: หาของด้วยชื่อ字典：用名字找东西

step4_dictionaries.py

# Step 4: dictionaries. A dictionary finds a value by its name, called a key.
import sys
import platform

pig = {"name": "Princess Taiping", "food": "mango", "legs": 4}
print(pig["food"])                 # look up the key "food"
pig["colour"] = "pink"             # a new key, and its value
print(pig)

# sys.modules is a dictionary: the name of every module Python has opened
print(len(sys.modules), "modules are open")
print(sys.modules["platform"])     # look one up by its name: it says where it lives

python = {}                        # an empty dictionary, to fill in
python["version"] = platform.python_version()
python["system"] = platform.system()
python["machine"] = platform.machine()
print(python)
print("This is Python", python["version"], "on", python["system"])

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

mango
{'name': 'Princess Taiping', 'food': 'mango', 'legs': 4, 'colour': 'pink'}
788 modules are open
<module 'platform' from '/lib/python314.zip/platform.py'>
{'version': '3.14.2', 'system': 'Emscripten', 'machine': 'wasm32'}
This is Python 3.14.2 on Emscripten

# Try it, step 4: a best friend for Princess Taiping, and sys in its own dictionary.
import sys

pig = {"name": "Princess Taiping", "food": "mango", "legs": 4}
pig["best friend"] = "Mali"
print(pig)
print(sys.modules["sys"])

5For loops: again and againลูป for: ซ้ำแล้วซ้ำอีกfor 循环：一遍又一遍

step5_loops.py

# Step 5: for loops. Do the same thing for every item, one at a time.
import sys
import platform

for snack in ["mango", "sticky rice", "khao soi"]:
    print("Taiping eats", snack)     # the lines pushed in are what repeats

for name in sys.builtin_module_names:   # the modules built into Python itself
    print("🧰", name)

python = {"version": platform.python_version(), "system": platform.system(),
          "machine": platform.machine(), "bits": platform.architecture()[0]}
for key in python:                 # a loop over a dictionary gives its keys
    print(key, "=", python[key])

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

Taiping eats mango
Taiping eats sticky rice
Taiping eats khao soi
🧰 _abc
🧰 _ast
🧰 _asyncio
🧰 _bisect
🧰 _blake2
🧰 _bz2
🧰 _codecs
🧰 _codecs_cn
🧰 _codecs_hk
🧰 _codecs_iso2022
🧰 _codecs_jp
🧰 _codecs_kr
🧰 _codecs_tw
🧰 _collections
🧰 _contextvars
🧰 _csv
🧰 _ctypes
🧰 _datetime
🧰 _decimal
🧰 _elementtree
🧰 _functools
🧰 _heapq
🧰 _hmac
🧰 _imp
🧰 _io
🧰 _json
🧰 _locale
🧰 _lsprof
🧰 _lzma
🧰 _md5
🧰 _multibytecodec
🧰 _opcode
🧰 _operator
🧰 _pickle
🧰 _posixsubprocess
🧰 _pyodide_core
🧰 _queue
🧰 _random
🧰 _remote_debugging
🧰 _sha1
🧰 _sha2
🧰 _sha3
🧰 _signal
🧰 _socket
🧰 _sqlite3
🧰 _sre
🧰 _stat
🧰 _statistics
🧰 _string
🧰 _struct
🧰 _suggestions
🧰 _symtable
🧰 _sysconfig
🧰 _testbuffer
🧰 _testcapi
🧰 _testclinic
🧰 _testclinic_limited
🧰 _testinternalcapi
🧰 _testlimitedcapi
🧰 _thread
🧰 _tokenize
🧰 _tracemalloc
🧰 _types
🧰 _typing
🧰 _warnings
🧰 _weakref
🧰 _xxtestfuzz
🧰 _zoneinfo
🧰 _zstd
🧰 array
🧰 atexit
🧰 binascii
🧰 builtins
🧰 cmath
🧰 errno
🧰 faulthandler
🧰 fcntl
🧰 gc
🧰 itertools
🧰 marshal
🧰 math
🧰 mmap
🧰 posix
🧰 pyexpat
🧰 select
🧰 sys
🧰 termios
🧰 time
🧰 unicodedata
🧰 xxsubtype
🧰 zlib
version = 3.14.2
system = Emscripten
machine = wasm32
bits = 32bit

# Try it, step 5: snacks in capital letters, and counting with a loop.
import sys

snacks = ["mango", "sticky rice", "khao soi"]
for snack in snacks:
    print(snack.upper())

count = 0
for name in sys.builtin_module_names:
    count = count + 1
print(count, "counted by the loop, and len() says", len(sys.builtin_module_names))

6Booleans: True or False, and ifบูลีน: True หรือ False และ if布尔值：True 还是 False，还有 if

step6_booleans.py

# Step 6: booleans. A boolean is True or False, and "if" picks what to do.
import sys
import platform

print(5 > 3)                               # True
print("roti" in ["mango", "roti"])         # "in" asks: is it in there? True

print("statistics" in sys.modules)         # has Python opened statistics yet?
import statistics
print("statistics" in sys.modules)         # it has now

in_browser = "wasm" in platform.machine()  # wasm is in the name inside a web browser
if in_browser:
    print("🌐 Python is running inside your web browser!")
else:
    print("💻 Python is running on the computer itself.")

helpers = 0
for name in sys.builtin_module_names:
    if name.startswith("_"):               # True for one of Python's own helpers
        helpers = helpers + 1
print(helpers, "of the", len(sys.builtin_module_names), "built-in modules start with _")

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

True
True
False
True
🌐 Python is running inside your web browser!
69 of the 91 built-in modules start with _

# Try it, step 6: does a module called random come with Python?
import sys

has_random = "random" in sys.stdlib_module_names
print(has_random)
if has_random:
    print("🎲 random comes with Python!")

7Comparing: is it the same?การเปรียบเทียบ: เหมือนกันไหม?比较：一样吗？

step7_equal.py

# Step 7: comparing. == asks "are these the same?" One = only gives a name.
import sys
import platform

print(2 + 2 == 4)                  # True
print("Taiping" == "taiping")          # False: a capital letter makes it different
print("15" == 15)                  # False: text is not a number
print(int("15") == 15)             # True: int() turns the text into a number
print("mango" != "roti")           # != asks "are these different?" True

if sys.platform == "emscripten":
    print("🌐 A web browser")
elif sys.platform == "darwin":     # elif means "else, if this is True"
    print("🍏 A Mac")
elif sys.platform == "win32":
    print("🪟 Windows")
else:
    print("🐧 Something else:", sys.platform)

version = platform.python_version()   # for example "3.14.2"
minor = version.split(".")[1]         # the part after the first dot, "14"
if minor == "14":
    print("Python 3.14: say it pi-thon, because π is 3.14...")
elif minor == "13":
    print("Python 3.13")
else:
    print("Python", version)

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

True
False
False
True
True
🌐 A web browser
Python 3.14: say it pi-thon, because π is 3.14...

# Try it, step 7: capital letters, and lower().
print("Mango" == "mango")
print("Mango".lower() == "mango")   # lower() makes every letter small

if len("mango") == 5:
    print("Same!")

8Functions: give your code a nameฟังก์ชัน: ตั้งชื่อให้โค้ดของคุณ函数：给你的代码起个名字

step8_functions.py

# Step 8: functions. Give a few lines a name, then use them again and again.
import sys

def greet(name):
    print("你好 " + name + "! I am Princess Taiping.")

def is_open(module):
    return module in sys.modules   # return hands the answer back

def digits(number):
    return len(str(number))        # str() turns the number into text, to count its digits

greet("Mali")
greet("Xiaoming")
print("json is open:", is_open("json"))
print("turtle is open:", is_open("turtle"))
print("Biggest count:", sys.maxsize)       # the biggest number this Python counts with
print("That has", digits(sys.maxsize), "digits")

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

你好 Mali! I am Princess Taiping.
你好 Xiaoming! I am Princess Taiping.
json is open: True
turtle is open: False
Biggest count: 2147483647
That has 10 digits

# Try it, step 8: a function that doubles, and one that answers how many bits.
import platform

def double(number):
    return number * 2

def bits():
    return platform.architecture()[0]

print(double(21))
print(bits())

9A report card for your Pythonสมุดพกของ Python ของคุณ给你的 Python 做一张成绩单

step9_report.py

# Step 9: Princess Taiping's report card for your Python. Steps 1 to 8, all together.
import sys
import platform

def is_open(module):
    return module in sys.modules

def report():
    card = {}
    card["Python"] = platform.python_version()
    card["system"] = platform.system()
    card["machine"] = platform.machine()
    card["bits"] = platform.architecture()[0]
    card["in a browser"] = sys.platform == "emscripten"
    card["modules open"] = len(sys.modules)
    card["built-in modules"] = len(sys.builtin_module_names)
    card["IPython open"] = is_open("IPython")
    return card

card = report()
print("🐷 Princess Taiping's report card")
for key in card:
    print("   ", key, ":", card[key])

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

🐷 Princess Taiping's report card
    Python : 3.14.2
    system : Emscripten
    machine : wasm32
    bits : 32bit
    in a browser : True
    modules open : 790
    built-in modules : 91
    IPython open : True

# Try it, step 9: two more lines on the report card.
import sys
import platform

def report():
    card = {}
    card["Python"] = platform.python_version()
    card["machine"] = platform.machine()
    card["modules with Python"] = len(sys.stdlib_module_names)
    card["biggest count"] = sys.maxsize     # a line of your own
    return card

card = report()
for key in card:
    print("   ", key, ":", card[key])

10Make the browser talkทำให้เบราว์เซอร์พูด让浏览器说话

step10_speak.py

# Step 10: make the browser talk, the way Princess Taiping does.
from IPython.display import Javascript, display

def say(words, language):
    # JavaScript, the browser's own language: find a voice for the language, then speak
    script = """
    function talk() {
        const voices = speechSynthesis.getVoices().filter(v => v.lang.startsWith("LANGUAGE"));
        if (voices.length == 0) {
            element.textContent = "This browser has no voice for LANGUAGE.";
            return;
        }
        const line = new SpeechSynthesisUtterance("WORDS");
        line.voice = voices.find(v => v.name.startsWith("Google")) || voices[0];
        line.lang = line.voice.lang;
        speechSynthesis.speak(line);
    }
    if (speechSynthesis.getVoices().length > 0) {
        talk();
    } else {
        speechSynthesis.addEventListener("voiceschanged", talk, {once: true});
    }
    """
    script = script.replace("WORDS", words).replace("LANGUAGE", language)
    display(Javascript(script))    # Jupyter hands the JavaScript to the browser
    print("The browser was asked to say:", words)

say("你好！我是太平公猪。", "zh")

What it printed in JupyterLite, in a web browser สิ่งที่พิมพ์ออกมาใน JupyterLite บนเว็บเบราว์เซอร์ 在网页浏览器里的 JupyterLite 中打印出来的内容

The browser was asked to say: 你好！我是太平公猪。

# Try it, step 10: the browser says your name, then Thai. say() is step 10's: run it first.
say("Hello Mali", "en")
say("สวัสดีค่ะ เจ้าหญิงไท่ผิง", "th")

🧩Puzzles: be a Python detectiveปริศนา: เป็นนักสืบ Python谜题：做个 Python 小侦探

# Puzzle 1: Princess Taiping's secret message.
words = ["Pigs", "Yell", "Tremendously", "Happy", "Old", "Noises"]

# Puzzle 1: Princess Taiping's secret message: the first letter of every word.
words = ["Pigs", "Yell", "Tremendously", "Happy", "Old", "Noises"]

message = ""
for word in words:
    message = message + word[0]     # + joins two pieces of text
print(message)

# Puzzle 2: the longest name of a module that comes with Python.
import sys

longest = ""                        # the longest name so far: none yet
for name in sorted(sys.stdlib_module_names):   # sorted: the same order every time
    if len(name) > len(longest):
        longest = name
print("The longest name is", longest)
print("It has", len(longest), "letters")

# Puzzle 3: give your Python points, and stars to match.
import sys
import platform

def python_points():
    points = 0
    if platform.architecture()[0] == "64bit":
        points = points + 1
    if sys.version_info.minor > 12:
        points = points + 1
    if "json" in sys.modules:
        points = points + 1
    if len(sys.builtin_module_names) > 50:
        points = points + 1
    return points

points = python_points()
print("This Python has", points, "points")
print("⭐" * points)                  # * repeats a piece of text

# Puzzle 4: the treasure hunt. Each place says where to look next.
clues = {"door": "sofa", "sofa": "lamp", "lamp": "garden",
         "garden": "pond", "pond": "mango"}

# Puzzle 4: the treasure hunt. Follow the clues from the door to the mango.
clues = {"door": "sofa", "sofa": "lamp", "lamp": "garden",
         "garden": "pond", "pond": "mango"}

place = "door"
steps = 0
for clue in clues:                  # there are never more steps than clues
    if place != "mango":
        place = clues[place]
        steps = steps + 1
        print("Now look in the", place)
print("Found the", place, "in", steps, "steps!")

# Puzzle 5: which letter starts the most modules that come with Python?
import sys

counts = {}
for name in sorted(sys.stdlib_module_names):   # sorted: the same order every time
    if name[0] != "_":                  # Python's own helpers left out, as in step 6
        first = name[0].upper()
        if first in counts:             # in asks: is this key in the dictionary?
            counts[first] = counts[first] + 1
        else:
            counts[first] = 1
print(counts)

winner = ""
for letter in counts:
    if winner == "" or counts[letter] > counts[winner]:    # or: one True is enough
        winner = letter
print("Most modules start with", winner)

🛠️Bonus: make your own talking avatarโบนัส: สร้างอวตาร์พูดได้ของคุณเอง附加项目：做一个你自己的会说话的虚拟形象

avatar/avatar.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>My talking avatar</title>
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>🐷</text></svg>">
<style>
  body { font-family: sans-serif; background: #fffaf0; color: #262052; text-align: center; margin: 20px; }
  canvas { width: 300px; height: 300px; background: #c9ecff; border: 3px solid #262052; border-radius: 24px; }
  #words { min-height: 3em; max-width: 420px; margin: 10px auto; font-size: 18px; }
  input, button { font-size: 18px; padding: 6px 12px; margin: 4px; }
</style>
</head>
<body>
<h1>My talking avatar</h1>
<canvas id="face" width="300" height="300"></canvas>
<p id="words">Type something and press Say. Then wake up my brain!</p>
<p><input id="question" placeholder="Type here"> <button id="say">Say</button> <button id="mic">🎤</button></p>
<p><button id="wake">🧠 Wake up the brain</button></p>
<p id="status"></p>

<!-- The brain and the ears each run in a worker: a second small program beside
     the page, so the face never freezes while they think. Their code is here. -->
<script type="text/plain" id="brain-code">
import { WebWorkerMLCEngineHandler } from "https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.85/lib/index.js";
const handler = new WebWorkerMLCEngineHandler();
self.onmessage = (message) => handler.onmessage(message);
</script>
<script type="text/plain" id="ears-code">
import { pipeline } from "https://cdn.jsdelivr.net/npm/@huggingface/transformers@4.3.0/+esm";
const ears = await pipeline("automatic-speech-recognition", "onnx-community/whisper-tiny.en", { dtype: "q8", device: "wasm" });
self.postMessage("ready");
self.onmessage = async (message) => {
  const heard = await ears(message.data);
  self.postMessage(heard.text);
};
</script>

<script type="module">
// ---------- 1. Make it yours: change these three ----------
const NAME = "Pip";
const SKIN = "#ffb6cc";
const ABOUT = "You are Pip, a friendly piglet who helps children learn Python. " +
              "Answer in one or two short, simple sentences.";

// ---------- 2. The face: drawn again about 60 times a second ----------
const pen = document.getElementById("face").getContext("2d");
let talking = false;

function oval(x, y, wide, high, colour) {
  pen.beginPath();
  pen.ellipse(x, y, wide, high, 0, 0, Math.PI * 2);
  pen.fillStyle = colour;
  pen.fill();
  pen.lineWidth = 4;
  pen.strokeStyle = "#262052";
  pen.stroke();
}

function draw(time) {
  const seconds = time / 1000;
  let mouth = 0;                                  // 0 is shut, 1 is wide open
  if (talking) {
    mouth = 0.5 + 0.5 * Math.sin(seconds * 18);   // open, shut, open: about three times a second
  }
  let eye = 14;
  if (seconds % 4 > 3.85) {
    eye = 1;                                      // a blink, every four seconds
  }
  pen.clearRect(0, 0, 300, 300);
  oval(80, 70, 30, 40, SKIN);                     // ears
  oval(220, 70, 30, 40, SKIN);
  oval(150, 160, 115, 105, SKIN);                 // head
  oval(105, 130, 14, eye, "#262052");             // eyes
  oval(195, 130, 14, eye, "#262052");
  oval(150, 175, 38, 26, "#ff8fab");              // snout
  oval(137, 175, 6, 9, "#262052");                // nostrils
  oval(163, 175, 6, 9, "#262052");
  oval(150, 225, 22, 3 + 18 * mouth, "#8c2a48");  // mouth: taller as it opens
  requestAnimationFrame(draw);
}
requestAnimationFrame(draw);

// ---------- 3. The voice: the browser's own ----------
function say(text) {
  document.getElementById("words").textContent = NAME + ": " + text;
  speechSynthesis.cancel();
  const line = new SpeechSynthesisUtterance(text);
  const voices = speechSynthesis.getVoices().filter((voice) => voice.lang.startsWith("en"));
  line.voice = voices.find((voice) => voice.name.startsWith("Google")) || voices[0] || null;
  line.onstart = () => { talking = true; };
  line.onend = () => { talking = false; };
  line.onerror = () => { talking = false; };
  speechSynthesis.speak(line);
}

// The brain and the ears: each worker is made from the code in its box above.
function workerFrom(id) {
  const code = document.getElementById(id).textContent;
  const file = new Blob([code], { type: "text/javascript" });
  return new Worker(URL.createObjectURL(file), { type: "module" });
}

// ---------- 4. The brain: a small AI model, run in this browser by WebLLM ----------
const MODEL = "Qwen2.5-1.5B-Instruct-q4f16_1-MLC";
const status = document.getElementById("status");
const chat = [{ role: "system", content: ABOUT }];
let brain = null;

async function wakeBrain() {
  if (!navigator.gpu) {
    status.textContent = "This browser has no WebGPU. Try Chrome or Edge on a computer.";
    return;
  }
  const webllm = await import("https://cdn.jsdelivr.net/npm/@mlc-ai/web-llm@0.2.85/lib/index.js");
  brain = await webllm.CreateWebWorkerMLCEngine(workerFrom("brain-code"), MODEL, {
    initProgressCallback: (report) => {
      status.textContent = "Brain loading: " + Math.round(report.progress * 100) + "%";
    },
  });
  status.textContent = "My brain is awake. Ask me something!";
  document.getElementById("say").textContent = "Ask";
}

async function answer(question) {
  chat.push({ role: "user", content: question });
  document.getElementById("words").textContent = NAME + " is thinking…";
  const recent = [chat[0], ...chat.slice(1).slice(-6)];   // what it was told, and the last few turns
  const reply = await brain.chat.completions.create({ messages: recent, max_tokens: 100, temperature: 0.4 });
  const text = reply.choices[0].message.content;
  chat.push({ role: "assistant", content: text });
  say(text);
}

document.getElementById("wake").addEventListener("click", wakeBrain);
document.getElementById("say").addEventListener("click", () => {
  const box = document.getElementById("question");
  const text = box.value.trim();
  box.value = "";
  if (text === "") {
    return;
  }
  if (brain) {
    answer(text);
  } else {
    say(text);                                    // no brain yet: it just says your words
  }
});

// ---------- 5. The ears: Whisper, a small speech model, run in this browser ----------
const mic = document.getElementById("mic");
let ears = null;
let recorder = null;

function hear(sound) {                            // give the ears the sound; wait for the words
  return new Promise((done) => {
    ears.onmessage = (message) => done(message.data);
    ears.postMessage(sound);
  });
}

async function listen() {
  if (recorder) {
    recorder.stop();                              // pressed again: stop listening
    return;
  }
  if (!ears) {
    status.textContent = "Ears loading…";
    ears = workerFrom("ears-code");
    await new Promise((ready) => { ears.onmessage = ready; });
    status.textContent = "Ears ready.";
  }
  speechSynthesis.cancel();
  const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
  const pieces = [];
  recorder = new MediaRecorder(stream);
  recorder.ondataavailable = (event) => pieces.push(event.data);
  recorder.onstop = async () => {
    stream.getTracks().forEach((track) => track.stop());
    recorder = null;
    mic.textContent = "🎤";
    const box = new AudioContext({ sampleRate: 16000 });   // Whisper hears 16,000 numbers a second
    const sound = await box.decodeAudioData(await new Blob(pieces).arrayBuffer());
    const words = (await hear(sound.getChannelData(0))).replace(/\[.*?\]/g, "").trim();
    document.getElementById("question").value = words;
    document.getElementById("say").click();
  };
  recorder.start();
  mic.textContent = "⏹️";                          // talk, then press it to stop
}
mic.addEventListener("click", listen);
</script>
</body>
</html>