hello

README.md

@@ -1,8 +1,8 @@
 ---
 title: SecretSanta
-emoji: 🌍
-colorFrom: gray
-colorTo: gray
+emoji: 🎄
+colorFrom: green
+colorTo: red
 sdk: gradio
 sdk_version: 6.0.2
 app_file: app.py

SarasaFixedTC-Regular.ttf

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:4b83a30eaf68d86fb7d2d275c812dc1f6148a84aef9e13748cb2d0e3823c8402
+size 25098552

app.py

@@ -0,0 +1,864 @@
+import random
+import time
+
+import gradio as gr
+from wcwidth import wcswidth
+
+
+def quick_draw(
+    n,  # 要抽出的數量
+    do_shuffle,  # 是否在抽獎前先打亂原始名單
+    no_self,  # 是否禁止抽到自己
+    names: str,  # 名單字串（以換行分隔）
+    frame_delay_scale,  # 延遲時間縮放倍率，用於加速或減速動畫
+    emoji,  # 用於顯示箭頭的表情符號
+    char_delay=0.01,  # 每個字元出現的延遲（製造打字動畫效果）
+    item_delay=0.1,  # 每項抽完後的延遲（項目間動畫）
+):
+    # 先將 names 字串拆成列表（以換行為分隔）並移除空白行
+    src_names = [name for name in names.strip().split("\n") if name]
+
+    # 若名單人數不足 n，補上「編號 i」
+    if len(src_names) < n:
+        for i in range(n - len(src_names)):
+            src_names.append(f"編號 {i}")
+
+    # 目標名單（會被打亂後作為抽中結果）
+    dst_names = src_names.copy()
+    random.shuffle(dst_names)
+
+    # 若 do_shuffle 為 True，也把原始名單打亂
+    random.shuffle(src_names) if do_shuffle else None
+
+    # 根據 frame_delay_scale 調整延遲（用來快轉／慢動作用）
+    char_delay *= frame_delay_scale
+    item_delay *= frame_delay_scale
+
+    # 若不允許抽到自己，需重新洗牌 dst_names，直到沒有任何同名配對
+    if no_self:
+        while True:
+            for src_name, dst_name in zip(src_names, dst_names):
+                if src_name == dst_name:  # 有抽到自己的情況
+                    break
+            # 若有抽到自己，重新洗牌後再檢查
+            if src_name == dst_name:
+                random.shuffle(dst_names)
+                continue
+            break
+
+    msg = list()  # 用來累積每一筆抽獎輸出
+
+    # 逐一比對 src -> dst
+    for src_name, dst_name in zip(src_names, dst_names):
+
+        # 若抽到自己
+        if src_name == dst_name:
+            msg.append(f"{src_name} 送給自己！")
+        else:
+            msg.append(f"{src_name} {emoji}→ {dst_name}")
+
+        # 若設定了 char_delay，則逐字輸出動畫
+        if char_delay:
+            for i in range(len(msg[-1])):
+                # 產生目前的輸出畫面（前面完整行 + 最後一行逐字顯示）
+                yield "\n".join(msg[:-1] + [msg[-1][: i + 1]])
+                time.sleep(char_delay)
+
+        # 每個項目完成後的延遲動畫
+        if item_delay:
+            yield "\n".join(msg)
+            time.sleep(item_delay)
+
+    # 最終完整結果
+    yield "\n".join(msg)
+
+
+def simple_start(n, names: str):
+    # 將輸入的 names 字串按行拆解，並移除空白行
+    name_list = [name for name in names.strip().split("\n") if name]
+
+    # 若名單數量不足 n，則以「編號 i」補足
+    if len(name_list) < n:
+        for i in range(n - len(name_list)):
+            name_list.append(f"編號 {i}")
+
+    # 將名單再組合成以換行分隔的字串
+    name_list = "\n".join(name_list)
+    return names, name_list, name_list, ""
+
+
+def simple_draw(
+    src_name_text: str,  # 左側來源名單（尚未抽中的人）
+    dst_name_text: str,  # 右側目標名單（可被抽到的人）
+    results: str,  # 已抽結果字串
+    frame_delay_scale,  # 動畫速度縮放倍率
+    do_shuffle,  # 是否隨機選取來源 index
+    no_self,  # 是否禁止抽到自己
+    enable_sfx,  # 是否啟用音效
+    emoji,  # 顯示箭頭符號
+    turn_time=0.25,  # 每輪滾動時間
+    n_turns=3,  # 滾輪來回次數
+    n_blink=3,  # 中獎後閃爍次數
+    blink_delay=0.1,  # 閃爍間隔
+):
+    # 若來源名單已空 → 全部抽完
+    if not src_name_text.strip():
+        gr.Info(title="訊息", message="抽完了！")
+        yield src_name_text, dst_name_text, results, None
+        return
+
+    # 拆解來源與目標名單為列表
+    src_names = [name for name in src_name_text.strip().split("\n")]
+    dst_names = [name for name in dst_name_text.strip().split("\n")]
+
+    # 套用動畫時間倍率
+    turn_time *= frame_delay_scale
+    blink_delay *= frame_delay_scale
+
+    # 如果啟用音效，載入音檔
+    rlt_sfx = get_sfx("roulette.wav") if enable_sfx else None
+    win_sfx = get_sfx("win.mp3") if enable_sfx else None
+
+    # 建立格式化名稱＋箭頭，並處理全形/半形字寬
+    def get_arrow(name, width):
+        pad_len = width - wcswidth(name) + 2  # 計算補齊空白寬度
+        return name + " " * pad_len + emoji  # 在名字後補空白並加箭頭
+
+    # 選取來源 index（可選擇洗牌或固定從 0 開始）
+    src_idx = random.choice(range(len(src_names))) if do_shuffle else 0
+    # 隨機選取目標 index
+    dst_idx = random.choice(range(len(dst_names)))
+
+    # 若不允許抽到自己 → 調整 dst_idx
+    if no_self:
+        # 特例：只有兩人時，抽到自己會導致死循環，需要特殊邏輯
+        if len(src_names) == 2:
+            src_left_idx = (src_idx + 1) & 1  # 另一個 index
+            if src_names[src_left_idx] in dst_names:
+                dst_idx = dst_names.index(src_names[src_left_idx])
+        else:
+            # 一般情況下，若抽到自己就重新選擇
+            while src_names[src_idx] == dst_names[dst_idx]:
+                dst_idx = random.choice(range(len(dst_names)))
+
+    dst_name = dst_names[dst_idx]  # 最終目標（被抽中的人）
+
+    # 計算字寬，使箭頭對齊
+    max_dst_name_width = max(wcswidth(s) for s in dst_names)
+    max_src_name_width = max(wcswidth(s) for s in dst_names)
+
+    # 在來源名單中標示出「目前正在抽的人」
+    curr_src_name = get_arrow(src_names[src_idx], max_src_name_width)
+    curr_src_names = src_names[:src_idx] + [curr_src_name] + src_names[src_idx + 1 :]
+    src_name_text = "\n".join(curr_src_names)
+
+    # 顯示來源列表的更新（右側尚未進入滾動）
+    yield src_name_text, dst_name_text, results, None
+
+    # 將實際要抽出的人從來源名單移除
+    src_name = src_names.pop(src_idx)
+
+    # 產生當前滾動階段的目的名單（某一行加上箭頭）
+    def get_curr_names(i):
+        if i is None:
+            return "\n".join(dst_names)  # 無高亮，顯示完整列表
+
+        selected_item = get_arrow(dst_names[i], max_dst_name_width)
+        curr_names = dst_names[:i] + [selected_item] + dst_names[i + 1 :]
+        return "\n".join(curr_names)
+
+    # 設定滾輪動畫的延遲（越滾越慢）
+    delay = turn_time / len(dst_names)
+
+    # 主滾動動畫：前後來回 n_turns 次
+    for _ in range(n_turns):
+        # 從頭滾到尾
+        for i in range(0, len(dst_names)):
+            yield src_name_text, get_curr_names(i), results, f"{rlt_sfx}{i}"
+            time.sleep(delay)
+
+        # 從尾倒回到頭
+        for i in range(len(dst_names) - 2, 0, -1):
+            yield src_name_text, get_curr_names(i), results, f"{rlt_sfx}{i}"
+            time.sleep(delay)
+
+        delay *= 2  # 每次回合後增加等待時間（營造減速效果）
+
+    # 最終慢慢滾到中獎者的位置
+    for i in range(0, len(dst_names)):
+        yield src_name_text, get_curr_names(i), results, f"{rlt_sfx}{i}"
+        if dst_names[i] == dst_name:
+            break
+        time.sleep(delay)
+    time.sleep(delay)
+
+    # 昇格畫面 → 目標列表停止滾動，高亮中獎者
+    yield src_name_text, get_curr_names(None), results, win_sfx
+
+    # 中獎閃爍效果
+    for _ in range(n_blink):
+        yield src_name_text, get_curr_names(None), results, None
+        time.sleep(blink_delay)
+        yield src_name_text, get_curr_names(i), results, None
+        time.sleep(blink_delay)
+
+    # 將已被抽中的目標從名單移除
+    dst_names.pop(i)
+
+    # 記錄抽獎結果
+    if src_name == dst_name:
+        results = f"{results}{src_name} 抽到自己！\n"
+    else:
+        results = f"{results}{src_name} {emoji}→ {dst_name}\n"
+
+    # 更新名單（顯示在前端）
+    yield "\n".join(src_names), "\n".join(dst_names), results, None
+
+    # 若只剩 1 對 1，則自動進行最後一次配對
+    if len(dst_names) == 1:
+        src_name = src_names.pop(0)
+        dst_name = dst_names.pop(0)
+        results = f"{results}{src_name} {emoji}→ {dst_name}"
+        yield "\n".join(src_names), "\n".join(dst_names), results, None
+
+
+def gr_textarea(label, interactive=False, lines=10, max_lines=10):
+    """
+    建立一個 Gradio TextArea（多行文字輸入框）
+
+    參數：
+        label        — 顯示在元件上的標籤文字
+        interactive  — 是否允許使用者編輯（False 時僅能顯示）
+        lines        — 預設顯示的行數高度
+        max_lines    — 最大可擴張到的行數高度
+
+    功能：
+        - 用於顯示抽籤名單或抽籤結果
+    """
+    return gr.TextArea(
+        label=label,
+        lines=lines,
+        max_lines=max_lines,
+        interactive=interactive,
+    )
+
+
+def gr_slider(label, value=10, minimum=2, maximum=300):
+    """
+    建立一般範圍調整用 Slider（滑桿）
+
+    參數：
+        label    — 標籤文字
+        value    — 預設值
+        minimum  — 最小值
+        maximum  — 最大值
+
+    功能：
+        - 常用於「參與人數」、「輪盤大小」等需要數值輸入的場景
+    """
+    return gr.Slider(label=label, value=value, minimum=minimum, maximum=maximum)
+
+
+def gr_slider_delay(label, value, minimum=0, maximum=1, step=0.01):
+    """
+    建立可用於動畫速度控制的 Slider
+
+    參數：
+        label    — 標籤文字
+        value    — 預設值
+        minimum  — 最小值
+        maximum  — 最大值
+        step     — 調整步進（例如 0.01）
+
+    功能：
+        - 用於 frame_delay_scale（動畫速率倍率）
+        - 使用小步進可使動畫速度更細緻
+    """
+    return gr.Slider(
+        label=label,
+        value=value,
+        minimum=minimum,
+        maximum=maximum,
+        step=step,  # 微調精度
+    )
+
+
+def draw_roulette(arr: list[str], index: int) -> str:
+    # 陣列長度
+    n = len(arr)
+    if n == 0:
+        return
+
+    # 將陣列平均分配到四邊（上、右、下、左）
+    side_length = n // 4  # 每側的基本數量
+    remainder = n % 4  # 平均分配後剩餘的數量
+
+    # 依照剩餘數量，從上→右→下依序多分配 1 個
+    length_top = side_length + (1 if remainder > 0 else 0)
+    length_right = side_length + (1 if remainder > 1 else 0)
+    length_bottom = side_length + (1 if remainder > 2 else 0)
+    length_left = side_length  # 左側不額外補
+
+    # 用索引切分四邊
+    idx_top_end = length_top
+    idx_right_end = idx_top_end + length_right
+    idx_bottom_end = idx_right_end + length_bottom
+
+    list_top = arr[0:idx_top_end]
+    list_right = arr[idx_top_end:idx_right_end]
+    list_bottom = arr[idx_right_end:idx_bottom_end]
+    list_left = arr[idx_bottom_end:]
+
+    # 計算所有字串最大寬度（支援全形字）
+    max_text_width = max((wcswidth(s) for s in arr), default=0)
+
+    # 每格寬度 = 最大字寬 + padding
+    cell_width = max_text_width + 2
+    # 使 cell_width 為奇數，以便在中央置中
+    if cell_width % 2 == 0:
+        cell_width += 1
+
+    # 上方格子一排的總寬度
+    box_inner_width = length_top * cell_width
+
+    # 左右兩側格子的總高度（每項佔 2 行，中間留空）
+    max_side_items = max(length_right, length_left)
+    box_inner_height = (max_side_items * 2) + 1
+
+    # 建立空白網格，後續會在上面放置「@」
+    grid = [[" " for _ in range(box_inner_width)] for _ in range(box_inner_height)]
+
+    # 目標位置（@）的座標
+    target_pos = None
+
+    # 判斷 index 屬於哪一側，並計算其在圓形 ASCII 中的實際位置
+    if 0 <= index < idx_top_end:
+        # 屬於上側
+        local_idx = index
+        center_x = (local_idx * cell_width) + (cell_width // 2)
+        target_pos = (0, center_x)  # row=0 → 第一行
+    elif idx_top_end <= index < idx_right_end:
+        # 屬於右側
+        local_idx = index - idx_top_end
+        target_row = 1 + (local_idx * 2)  # 每項佔兩行
+        target_pos = (target_row, box_inner_width - 2)
+    elif idx_right_end <= index < idx_bottom_end:
+        # 屬於下側（需反向映射）
+        local_idx = index - idx_right_end
+        offset_from_right = local_idx
+        visual_slot_from_left = (length_top - 1) - offset_from_right
+        center_x = (visual_slot_from_left * cell_width) + (cell_width // 2)
+        target_pos = (box_inner_height - 1, center_x)
+    else:
+        # 屬於左側
+        local_idx = index - idx_bottom_end
+        target_row = (box_inner_height - 2) - (local_idx * 2)
+        target_pos = (target_row, 1)  # 左側靠內一格
+
+    # 在 grid 上標記 @ 位置
+    if target_pos:
+        row, col = target_pos
+        if 0 <= row < box_inner_height and 0 <= col < box_inner_width:
+            grid[row][col] = "@"
+
+    # 上方標籤需要向右縮排（給左右側留空間）
+    left_margin_width = cell_width
+
+    # 上邊文字（置中）
+    top_labels = "".join([get_centered_cell(s, cell_width) for s in list_top])
+
+    # 開始組建輸出內容
+    outputs = list()
+
+    # 上方第一行：空白 + 上側文字
+    outputs.append(" " * left_margin_width + " " + top_labels)
+    # 上方第二行：空白 + 上框線
+    outputs.append(" " * left_margin_width + " " + "#" * box_inner_width + " ")
+
+    # 中間內容（含左側與右側）
+    for row in range(box_inner_height):
+        left_char = " " * cell_width  # 預設左側為空
+        right_char = " " * cell_width  # 預設右側為空
+
+        # 左右項目位於 (row - 1) % 2 == 0 的行上
+        if (row - 1) % 2 == 0:
+            # 計算左側 index（從下往上排）
+            calc_left_idx = (box_inner_height - 2 - row) // 2
+            is_in_left = 0 <= calc_left_idx < len(list_left)
+            if is_in_left and (box_inner_height - 2 - row) % 2 == 0:
+                left_char = get_right_align_cell(list_left[calc_left_idx], cell_width)
+
+            # 計算右側 index（從上往下排）
+            calc_right_idx = (row - 1) // 2
+            is_in_right = 0 <= calc_right_idx < len(list_right)
+            if is_in_right and (row - 1) >= 0:
+                right_char = get_left_align_cell(list_right[calc_right_idx], cell_width)
+
+        # grid[row] 中可能有 @ 或空白
+        row_content = "".join(grid[row])
+
+        # 左 / 框線 / 右
+        outputs.append(f"{left_char}#{row_content}#{right_char}")
+
+    # 下方框線
+    outputs.append(" " * left_margin_width + " " + "#" * box_inner_width + " ")
+
+    # 下方文字排在框線下方（注意 bottom list 是反向排列）
+    bottom_padding_cells = length_top - length_bottom
+    bottom_border = "".join([get_centered_cell(s, cell_width) for s in list_bottom[::-1]])
+    bottom_labels = (" " * cell_width * bottom_padding_cells) + bottom_border
+
+    outputs.append(" " * left_margin_width + " " + bottom_labels)
+
+    return "\n".join(outputs)
+
+
+def get_centered_cell(text, width):
+    # 計算字串的實際寬度（支援全形字）
+    text_width = wcswidth(text)
+
+    # 如果字串本身超過格子寬度，直接回傳（不裁切）
+    if text_width >= width:
+        return text
+
+    # 需要補的空白總量
+    total_space = width - text_width
+
+    # 左右平均分配空白
+    left_space = total_space // 2
+    right_space = total_space - left_space
+
+    # 回傳：左空白 + 文字 + 右空白
+    return " " * left_space + text + " " * right_space
+
+
+def get_right_align_cell(text, width):
+    # 計算字串寬度
+    text_width = wcswidth(text)
+
+    # 若字串比格子寬，不處理
+    if text_width >= width:
+        return text
+
+    # 左側需要補多少空白，使文字靠右
+    # 最右邊保留一格空白，讓版面不緊貼
+    left_space = width - text_width - 1
+
+    # 回傳：左空白 + 文字 + 最右一格空白
+    return " " * left_space + text + " "
+
+
+def get_left_align_cell(text, width):
+    # 計算字串寬度
+    text_width = wcswidth(text)
+
+    # 若字串比格子寬，直接回傳
+    if text_width >= width:
+        return text
+
+    # 讓文字靠左，右側補空白（右側 -1 是為了留一格邊界空位）
+    right_space = width - text_width - 1
+
+    # 回傳：左邊固定一格空白 + 文字 + 右邊空白
+    return " " + text + " " * right_space
+
+
+def make_pre_html(content):
+    # 將 ASCII 輸出包裝成 HTML，利用 <pre> 保留字元排版
+    # 外層 div 用於樣式設定（例如固定寬度、捲動條等）
+    return f'<div class="ascii-container"><pre class="ascii">{content}</pre></div>'
+
+
+def get_sfx(path):
+    # 回傳 HTML <audio> 標籤，用於播放音效
+    # autoplay 會使音效自動播放
+    # /gradio_api/file=path 為 Gradio 的檔案 URL
+    return f'<audio src="/gradio_api/file={path}" autoplay></audio>'
+
+
+def draw_roulette_html(arr, index):
+    # 呼叫 draw_roulette 生成 ASCII 輪盤
+    # 再用 make_pre_html 包成 HTML 並回傳
+    return make_pre_html(draw_roulette(arr, index))
+
+
+def galaxy_start(n, names: str, shuffle):
+    # 將輸入 names 以換行切割成列表，並移除空白行
+    name_list = [name for name in names.strip().split("\n") if name]
+
+    # 若名單數量不足 n，則以「編號 i」補足
+    if len(name_list) < n:
+        for i in range(n - len(name_list)):
+            name_list.append(f"編號 {i}")
+
+    # src_names 為來源名單的副本（後續可依需求洗牌）
+    src_names = name_list[::]
+
+    # 若 shuffle = True，將來源名單打亂
+    if shuffle:
+        random.shuffle(src_names)
+
+    return draw_roulette_html(name_list, -1), src_names, name_list[::], ""
+
+
+def galaxy_draw(
+    src_names: list,  # 左側：尚未抽出的人（來源名單）
+    dst_names: list,  # 右側：可被抽到的人（目標名單）
+    html,  # 目前顯示的 ASCII 輪盤 HTML
+    results,  # 已抽紀錄字串
+    frame_delay_scale,  # 動畫速度倍率
+    no_self,  # 是否禁止抽到自己
+    enable_sfx,  # 是否啟用音效
+    emoji,  # 箭頭符號
+    turn_time=0.1,  # 每輪滾動時間參數
+    n_turns=5,  # 完整繞圈次數（未指定 index）
+    acc_factor=2,  # 每輪速度加倍倍率（越滾越快）
+    n_blink=3,  # 結果出現後閃爍次數
+    blink_delay=0.1,  # 閃爍延遲
+):
+    # 若來源名單已空 → 全部抽完
+    if not src_names:
+        gr.Info(title="訊息", message="抽完了！")
+        yield html, results, None
+        return
+
+    # 套用速度倍率
+    turn_time *= frame_delay_scale
+    blink_delay *= frame_delay_scale
+
+    # 載入音效
+    rlt_sfx = get_sfx("roulette.wav") if enable_sfx else None
+    win_sfx = get_sfx("win.mp3") if enable_sfx else None
+
+    # 隨機挑一個目標 index
+    idx = random.choice(range(len(dst_names)))
+
+    # 禁止抽到自己的處理
+    if no_self:
+        # 特例：只剩 2 人時避免死循環
+        if len(src_names) == 2:
+            if src_names[-1] in dst_names:
+                idx = dst_names.index(src_names[-1])
+        else:
+            # 一般情況 → 若抽到自己就重抽 index
+            while src_names[0] == dst_names[idx]:
+                idx = random.choice(range(len(dst_names)))
+
+    # 取出來源名單的第一人（固定第一項，而非隨機）
+    src_name = src_names.pop(0)
+
+    # 在結果欄先加上「來源 →」
+    results = f"{results}{src_name} {emoji}→ "
+
+    # 先輸出一次更新
+    yield html, results, None
+
+    # 初始滾動區間（愈滾愈快）
+    delay = turn_time / len(dst_names)
+
+    # 主轉盤滾動迴圈（未鎖定目標）
+    for _ in range(n_turns):
+        for i in range(len(dst_names)):
+            yield draw_roulette_html(dst_names, i), results, f"{rlt_sfx}{i}"
+            time.sleep(delay)
+        # 每一圈後加速
+        delay *= acc_factor
+
+    # 最終跑到指定 index 的滾動
+    for i in range(len(dst_names)):
+        yield draw_roulette_html(dst_names, i), results, f"{rlt_sfx}{i}"
+        time.sleep(delay)
+        if i == idx:
+            break
+
+    # 中獎特效：顯示無選取狀態的輪盤，播放勝利音效
+    yield draw_roulette_html(dst_names, -1), results, win_sfx
+
+    # 閃爍效果（選取框消失 / 出現交替）
+    for _ in range(n_blink):
+        yield draw_roulette_html(dst_names, -1), results, None
+        time.sleep(blink_delay)
+        yield draw_roulette_html(dst_names, i), results, None
+        time.sleep(blink_delay)
+
+    # 更新 HTML 顯示最後位置
+    html = draw_roulette_html(dst_names, i)
+
+    # 取出目標名單中的中獎者
+    dst_name = dst_names.pop(idx)
+
+    # 在結果欄加上目標名字
+    results = f"{results}{dst_name}\n"
+
+    # 若目標名單剩 1 人 → 自動配對最後一組
+    if len(dst_names) == 1:
+        src_name = src_names.pop(0)
+        dst_name = dst_names.pop(0)
+        results = f"{results}{src_name} {emoji}→ {dst_name}"
+
+    # 回傳最終畫面
+    yield html, results, None
+
+
+def change_title(text):
+    # 回傳 Markdown 標題（第一層標題）
+    # 加上 "# " 使文字以大標題方式顯示
+    return f"# {text}"
+
+
+def change_sub_title(text):
+    # 回傳 Markdown 子標題（第三層標題）
+    # 加上 "### " 使文字成為較小的子標題
+    return f"### {text}"
+
+
+with gr.Blocks(title="交換禮物抽籤") as app:
+    # 顯示主標題（Markdown）
+    title_md = gr.Markdown("# 🎄 交換禮物抽籤")
+    # 顯示副標題（Markdown）
+    sub_title_md = gr.Markdown("### 一起來快樂的交換禮物吧！")
+
+    # 左側 sidebar 區域（設定面板）
+    with gr.Sidebar(width=350):
+
+        # 參加者名稱輸入區（多行文字）
+        names = gr_textarea("📝 人名", True)
+
+        # 基礎設定區（Accordion 預設展開）
+        with gr.Accordion("🛠️ 基本設定", open=True):
+            # 參與者人數（從名稱過濾後補足用）
+            n_people = gr_slider("🙋‍♂️ 參與者人數")
+
+            # 動畫延遲倍率控制（速度加減速）
+            frame_delay_scale = gr_slider_delay("⏱️ 影格延遲比率", 1.0, 0, 2, 0.1)
+
+            # 是否打亂來源名單
+            do_shuffle = gr.Checkbox(label="🔀 隨機順序")
+
+            # 是否禁止抽到自己
+            no_self = gr.Checkbox(label="🙅 不會抽到自己")
+
+            # 是否啟用音效
+            enable_sfx = gr.Checkbox(label="🔔 啟用音效", value=True)
+
+        # 進階設定區（Accordion 預設收合）
+        with gr.Accordion("⚙️ 詳細設定", open=False):
+            # UI 顯示的主標題
+            title = gr.Textbox("🎄 交換禮物抽籤", label="🎉 主標題")
+
+            # UI 顯示的副標題
+            sub_title = gr.Textbox("一起來快樂的交換禮物吧！", label="🎈 副標題")
+
+            # 禮物 emoji（例如：🎁）
+            gift_emoji = gr.Textbox("🎁", label="🔢 禮物符號")
+
+            # 背景音樂設定，可 loop
+            bgm = gr.Audio(
+                "bgm.mp3",
+                type="filepath",
+                autoplay=True,
+                loop=True,
+                label="🎶 背景音樂",
+            )
+
+            # 供 SFX 注入 HTML 用（隱藏）
+            sfx_html = gr.HTML(elem_classes="hidden")
+
+    # 第一個頁籤：快速抽籤模式
+    with gr.Tab("🚀 快速抽籤"):
+        quick_results = gr_textarea("🎯 抽籤結果")
+        quick_btn = gr.Button("▶️ 抽籤！")
+
+    # 第二個頁籤：簡易輪盤模式
+    with gr.Tab("✨ 簡易輪盤"):
+        with gr.Group():
+            with gr.Row():
+                # 左側：送禮物者名單
+                simple_src = gr_textarea("📤 送禮物的人")
+                # 中間：收禮物者名單
+                simple_dst = gr_textarea("📬 收禮物的人")
+                # 右側：抽籤結果
+                simple_results = gr_textarea("🎯 抽籤結果")
+
+        # 控制按鈕：開始 或 下一個
+        with gr.Row():
+            simple_start_btn = gr.Button("▶️ 開始")
+            simple_next_btn = gr.Button("⏭️ 下一個")
+
+    # 第三個頁籤：華麗輪盤模式（ASCII 螢幕動畫）
+    with gr.Tab("🎡 華麗輪盤"):
+        with gr.Group():
+            with gr.Row():
+
+                # 左側大區域：顯示 ASCII 輪盤（HTML）
+                with gr.Column(scale=2, elem_classes="ascii-container"):
+                    galaxy_roulette = gr.HTML(elem_classes="ascii-container")
+
+                # 右側：抽籤結果
+                with gr.Column(scale=1):
+                    galaxy_results = gr_textarea("🎯 抽籤結果")
+
+                # 使用 State 儲存來源名單與目標名單
+                galaxy_src = gr.State(None)
+                galaxy_dst = gr.State(None)
+
+        # 操作按鈕：開始 or 下一輪
+        with gr.Row():
+            galaxy_start_btn = gr.Button("▶️ 開始")
+            galaxy_next_btn = gr.Button("⏭️ 下一個")
+
+    # 當使用者修改主標題時，更新左上角的 Markdown 顯示
+    title.change(
+        change_title,  # 觸發的函式
+        title,  # 函式輸入（使用者輸入的文字）
+        title_md,  # 輸出到 Markdown 元件
+        show_progress="hidden",
+    )
+
+    # 修改副標題時同理更新 UI
+    sub_title.change(change_sub_title, sub_title, sub_title_md, show_progress="hidden")
+
+    # -------------------------
+    # 🚀 快速抽籤模式按鈕
+    # -------------------------
+    quick_btn.click(
+        quick_draw,  # 使用快速抽籤函式
+        [
+            n_people,  # 抽幾人
+            do_shuffle,  # 是否洗牌
+            no_self,  # 是否禁止抽到自己
+            names,  # 名字來源
+            frame_delay_scale,
+            gift_emoji,
+        ],
+        quick_results,  # 輸出到快速抽籤結果框
+        show_progress="hidden",
+        concurrency_limit=100,  # 限制此事件在多位使用者同時執行的最大數量
+    )
+
+    # -------------------------
+    # ✨ 簡易輪盤：開始按鈕
+    # -------------------------
+    simple_start_btn.click(
+        simple_start,  # 初始化名單
+        [n_people, names],  # 輸入參數
+        [names, simple_src, simple_dst, simple_results],  # 多輸出
+        show_progress="hidden",
+    )
+
+    # -------------------------
+    # ✨ 簡易輪盤：下一個按鈕
+    # -------------------------
+    simple_next_btn.click(
+        simple_draw,
+        [
+            simple_src,  # 來源名單
+            simple_dst,  # 目標名單
+            simple_results,  # 抽籤結果
+            frame_delay_scale,
+            do_shuffle,
+            no_self,
+            enable_sfx,
+            gift_emoji,
+        ],
+        [simple_src, simple_dst, simple_results, sfx_html],  # 更新名單 + 音效輸出
+        show_progress="hidden",
+        scroll_to_output=True,
+        concurrency_limit=100,
+    ).then(
+        lambda: None, None, sfx_html  # 動畫結束後清空 sfx_html
+    )
+
+    # -------------------------
+    # 🎡 華麗輪盤：開始按鈕
+    # -------------------------
+    galaxy_start_btn.click(
+        galaxy_start,
+        [n_people, names, do_shuffle],
+        [
+            galaxy_roulette,  # ASCII 輪盤顯示
+            galaxy_src,  # 儲存來源名單狀態
+            galaxy_dst,  # 儲存目標名單狀態
+            galaxy_results,  # 結果文字
+        ],
+        show_progress="hidden",
+    )
+
+    # -------------------------
+    # 🎡 華麗輪盤：下一個按鈕（動畫版輪盤）
+    # -------------------------
+    galaxy_next_btn.click(
+        galaxy_draw,
+        [
+            galaxy_src,  # 狀態來源名單
+            galaxy_dst,  # 狀態目標名單
+            galaxy_roulette,  # ASCII 畫面
+            galaxy_results,  # 抽籤結果
+            frame_delay_scale,
+            no_self,
+            enable_sfx,
+            gift_emoji,
+        ],
+        [galaxy_roulette, galaxy_results, sfx_html],  # 新畫面 + 結果 + 音效
+        show_progress="hidden",
+        concurrency_limit=100,
+    )
+
+    # ============================================================
+    # 本地儲存功能（Local Storage）
+    # ============================================================
+
+    # 要儲存的 UI 元件（會同步保存至瀏覽器 Local Storage）
+    stored_components: list[gr.Textbox] = [
+        names,
+        n_people,
+        frame_delay_scale,
+        do_shuffle,
+        no_self,
+        enable_sfx,
+        title,
+        sub_title,
+        gift_emoji,
+    ]
+
+    # 觸發儲存事件的條件：當上述元件的 value 改變
+    triggers = [c.change for c in stored_components]
+
+    # 建立可以儲存整組資料的 BrowserState（本地瀏覽器儲存）
+    local_storage = gr.BrowserState(
+        [c.value for c in stored_components],  # 預設值
+        storage_key="storage-key",  # 儲存 key
+        secret="secret",  # 加密用（防篡改）
+    )
+
+    # App 載入時 → 從 LocalStorage 還原 UI 設定
+    @app.load(inputs=local_storage, outputs=stored_components)
+    def load_from_local_storage(data):
+        return data
+
+    # 當使用者修改任一設定 → 自動更新 LocalStorage
+    @gr.on(triggers, inputs=stored_components, outputs=local_storage)
+    def save_to_local_storage(*data):
+        return data
+
+    # ============================================================
+    # 啟動應用程式
+    # ============================================================
+    app.launch(
+        css_paths="style.css",  # 自訂 CSS
+        theme=gr.themes.Ocean(
+            text_size=gr.themes.sizes.text_lg,
+            radius_size=gr.themes.sizes.radius_lg,
+            spacing_size=gr.themes.sizes.spacing_lg,
+            primary_hue=gr.themes.colors.lime,  # 主題顏色
+        ),
+        allowed_paths=[  # 允許本地檔案存取
+            "SarasaFixedTC-Regular.ttf",
+            "win.mp3",
+            "roulette.wav",
+        ],
+        share=False,  # 是否生成可分享連結
+        footer_links=[None],  # 隱藏 footer 連結
+        pwa=True,  # 啟用 PWA（可安裝成 APP）
+        favicon_path="favicon.png",
+    )

bgm.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3b4c7dcb77a1e151e6a68f87d8865fa4537aad4f66ac0731c3c312c4b6a46615
+size 2643844

gen-roulette-sfx.py

@@ -0,0 +1,80 @@
+import wave
+
+import numpy as np
+
+# 參數設定
+sample_rate = 44100  # 取樣率 (Hz)
+duration = 0.5  # 音效長度 (秒)
+num_impacts = 1  # 撞擊次數，可自行調整
+
+# 建立空的音訊 buffer
+num_samples = int(sample_rate * duration)
+audio = np.zeros(num_samples, dtype=np.float32)
+
+
+# 產生單一撞擊聲的函式
+def generate_impact(sample_rate, max_length_ms=5):
+    """
+    回傳一個短促的撞擊聲波形 (numpy 1D array)。
+    使用白噪音 * 指數衰減包絡，模擬鋼珠撞擊的高頻 'click'。
+    """
+    length_ms = np.random.uniform(2, max_length_ms)  # 2~5ms 的撞擊長度
+    length_samples = int(sample_rate * length_ms / 1000.0)
+
+    t = np.arange(length_samples) / sample_rate
+
+    # 指數衰減包絡，衰減越快越「硬」
+    decay_rate = np.random.uniform(600, 1200)  # 衰減速率隨機
+    envelope = np.exp(-decay_rate * t)
+
+    # 高頻噪音，模擬金屬撞擊的尖銳感
+    noise = np.random.randn(length_samples)
+
+    impact = noise * envelope
+
+    # 控制單一撞擊的音量
+    impact *= np.random.uniform(0.4, 0.9)
+
+    return impact
+
+
+# 產生多個撞擊，時間點分佈在 0.5 秒內
+# 為了模擬鋼珠逐漸減速，可以讓後面時間的撞擊較密集
+times = np.linspace(0.0, duration, num_impacts + 2)[1:-1]  # 避開完全 0 和完全結尾
+# 稍微往後擠，形成「一開始快、後面密」的感覺
+times = times**1.4 * (duration / (times[-1] ** 1.4))
+
+for impact_time in times:
+    impact = generate_impact(sample_rate)
+    start_idx = int(impact_time * sample_rate)
+
+    end_idx = start_idx + len(impact)
+    if start_idx >= num_samples:
+        continue
+    if end_idx > num_samples:
+        impact = impact[: num_samples - start_idx]
+        end_idx = num_samples
+
+    audio[start_idx:end_idx] += impact
+
+# 簡單做一下整體衰減包絡，避免尾端太突兀
+t_all = np.linspace(0, duration, num_samples, endpoint=False)
+global_env = np.exp(-t_all * 4.0)  # 4 可調大一點讓衰減更快
+audio *= global_env
+
+# 避免削波：正規化到 -1.0 ~ 1.0 區間內，並留一點安全裕度
+max_val = np.max(np.abs(audio))
+if max_val > 0:
+    audio = audio / max_val * 0.9
+
+# 轉成 16-bit PCM 並輸出為 WAV 檔
+output_name = "roulette_ball.wav"
+with wave.open(output_name, "w") as wf:
+    wf.setnchannels(1)  # 單聲道
+    wf.setsampwidth(2)  # 16-bit
+    wf.setframerate(sample_rate)
+
+    audio_int16 = (audio * 32767).astype(np.int16)
+    wf.writeframes(audio_int16.tobytes())
+
+print(f"已輸出音效檔：{output_name}")

reduce-vol.py

@@ -0,0 +1,15 @@
+import math
+
+import fire
+from pydub import AudioSegment
+
+
+def reduce_volume(src_path, dst_path, volume_ratio):
+    audio = AudioSegment.from_file(src_path)
+    vol_change = 20 * math.log10(volume_ratio)
+    quieter = audio + vol_change
+    quieter.export(dst_path)
+
+
+if __name__ == "__main__":
+    fire.Fire(reduce_volume)

requirements.txt

@@ -0,0 +1 @@
+wcwidth

roulette.wav

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:2a305d3354e59e0de031237d62d79e7f9840129733c61c0e4e1842b6986e75f1
+size 4615

style.css

@@ -0,0 +1,50 @@
+@font-face {
+    font-family: "HelloFont";
+    src: url("/gradio_api/file=SarasaFixedTC-Regular.ttf") format("truetype");
+    font-weight: normal;
+    font-style: normal;
+}
+
+* {
+    font-family: "HelloFont";
+}
+
+.hidden {
+    display: none;
+}
+
+.ascii-container {
+    overflow-x: auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    max-height: 100vh;
+    margin: auto 0 !important;
+}
+
+.ascii {
+    font-family: 'HelloFont';
+    white-space: pre;
+    line-height: 1;
+    letter-spacing: 0;
+    display: inline-block;
+    padding: 20px;
+    margin: auto 0 !important;
+}
+
+input[type="number"]::-webkit-outer-spin-button,
+input[type="number"]::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+    text-align: right;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+    appearance: textfield;
+    text-align: right;
+}
+
+.divider {
+    display: none;
+}

win.mp3

@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:0d08dd8f463d581fb7e811520546b1fc2d3b34148890e511feddf4848722f083
+size 41325