app.py

import gradio as gr

# Replace the CSV data loading with in-memory data
data = [
    
    {"蛛絲馬跡": 1, "嫌疑犯": "5冰淇淋師傅", "直接證據": "SAS", "間接證據": "RHS SSS", "嫌疑犯圖片": "./5冰淇淋師傅.png"},
    {"蛛絲馬跡": 2, "嫌疑犯": "7候選人", "直接證據": "SSS", "間接證據": "SAS ASA AAS", "嫌疑犯圖片": "./7候選人.png"},
    {"蛛絲馬跡": 3, "嫌疑犯": "8列車長", "直接證據": "SAS", "間接證據": "無", "嫌疑犯圖片": "./8列車長.png"},
    {"蛛絲馬跡": 4, "嫌疑犯": "2農夫", "直接證據": "SSS", "間接證據": "無", "嫌疑犯圖片": "./2農夫.png"},
    {"蛛絲馬跡": 5, "嫌疑犯": "1漁夫", "直接證據": "RHS", "間接證據": "SAS SSS", "嫌疑犯圖片": "./1漁夫.png"},
    {"蛛絲馬跡": 6, "嫌疑犯": "4廚師", "直接證據": "ASA", "間接證據": "無", "嫌疑犯圖片": "./4廚師.png"},
    {"蛛絲馬跡": 7, "嫌疑犯": "3女僕", "直接證據": "RHS", "間接證據": "SAS SSS", "嫌疑犯圖片": "./3女僕.png"},
    {"蛛絲馬跡": 8, "嫌疑犯": "6棋士", "直接證據": "AAS", "間接證據": "ASA", "嫌疑犯圖片": "./6棋士.png"},
    {"蛛絲馬跡": 9, "嫌疑犯": "10芭蕾舞者", "直接證據": "SSS", "間接證據": "SAS AAS ASA", "嫌疑犯圖片": "./10芭蕾舞者.png"},
    {"蛛絲馬跡": 10, "嫌疑犯": "9 DJ", "直接證據": "SAS", "間接證據": "無", "嫌疑犯圖片": "./9 DJ.png"},
    {"蛛絲馬跡": 11, "嫌疑犯": "16造型師", "直接證據": "RHS", "間接證據": "SSS", "嫌疑犯圖片": "./16造型師.png"},
    {"蛛絲馬跡": 12, "嫌疑犯": "12教宗", "直接證據": "SSS", "間接證據": "無", "嫌疑犯圖片": "./12教宗.png"},
    {"蛛絲馬跡": 13, "嫌疑犯": "14音樂家", "直接證據": "ASA AAS", "間接證據": "無", "嫌疑犯圖片": "./14音樂家.png"},
    {"蛛絲馬跡": 14, "嫌疑犯": "13軍人", "直接證據": "ASA", "間接證據": "無", "嫌疑犯圖片": "./13軍人.png"},
    {"蛛絲馬跡": 15, "嫌疑犯": "17和尚", "直接證據": "ASA AAS", "間接證據": "無", "嫌疑犯圖片": "./17和尚.png"},
    {"蛛絲馬跡": 16, "嫌疑犯": "18歌手", "直接證據": "AAS", "間接證據": "ASA", "嫌疑犯圖片": "./18歌手.png"},
    {"蛛絲馬跡": 17, "嫌疑犯": "11醫生", "直接證據": "SAS", "間接證據": "無", "嫌疑犯圖片": "./11醫生.png"},
    {"蛛絲馬跡": 18, "嫌疑犯": "15壽司師傅", "直接證據": "SAS", "間接證據": "AAS ASA SSS", "嫌疑犯圖片": "./15壽司師傅.png"},
    {"蛛絲馬跡": 19, "嫌疑犯": "21郵差", "直接證據": "RHS", "間接證據": "SAS SSS", "嫌疑犯圖片": "./21郵差.png"},
    {"蛛絲馬跡": 20, "嫌疑犯": "19籃球員", "直接證據": "RHS", "間接證據": "SSS SAS", "嫌疑犯圖片": "./19籃球員.png"},
    {"蛛絲馬跡": 21, "嫌疑犯": "22法官", "直接證據": "ASA AAS", "間接證據": "無", "嫌疑犯圖片": "./22法官.png"},
    {"蛛絲馬跡": 22, "嫌疑犯": "20漫畫家", "直接證據": "ASA AAS", "間接證據": "無", "嫌疑犯圖片": "./20漫畫家.png"},
    {"蛛絲馬跡": 23, "嫌疑犯": "25殺手", "直接證據": "ASA AAS", "間接證據": "無", "嫌疑犯圖片": "./25殺手.png"},
    {"蛛絲馬跡": 24, "嫌疑犯": "28科學家", "直接證據": "ASA AAS", "間接證據": "無", "嫌疑犯圖片": "./28科學家.png"},
    {"蛛絲馬跡": 25, "嫌疑犯": "27太空人", "直接證據": "SSS", "間接證據": "ASA AAS RHS", "嫌疑犯圖片": "./27太空人.png"},
    {"蛛絲馬跡": 26, "嫌疑犯": "23酒保", "直接證據": "AAS", "間接證據": "ASA", "嫌疑犯圖片": "./23酒保.png"},
    {"蛛絲馬跡": 27, "嫌疑犯": "24魔術師", "直接證據": "ASA", "間接證據": "AAS", "嫌疑犯圖片": "./24魔術師.png"},
    {"蛛絲馬跡": 28, "嫌疑犯": "26保全", "直接證據": "ASA", "間接證據": "AAS", "嫌疑犯圖片": "./26保全.png"}
]


# To store the indirect evidence dynamically
indirect_evidence_store = ""

def query_data(clue_number):
    global indirect_evidence_store
    try:
        clue_number = int(clue_number)
        row = next((item for item in data if item['蛛絲馬跡'] == clue_number), None)
        if row:
            suspect = row['嫌疑犯']
            direct_evidence = row['直接證據']
            indirect_evidence_store = row['間接證據'] if row['間接證據'] else "無間接證據"
            image_url = row['嫌疑犯圖片'] if row['嫌疑犯圖片'] else None
            return (
                f"嫌疑犯: {suspect}\n直接證據: {direct_evidence}",
                gr.update(visible=True),
                gr.update(value="", visible=False),
                image_url if image_url else None
            )
        else:
            return (
                "未找到相關資料，請檢查蛛絲馬跡號碼是否正確。",
                gr.update(visible=False),
                gr.update(value="", visible=False),
                None
            )
    except ValueError:
        return (
            "請輸入有效的數字。",
            gr.update(visible=False),
            gr.update(value="", visible=False),
            None
        )

def show_indirect_evidence():
    global indirect_evidence_store
    return gr.update(value=indirect_evidence_store, visible=True)

def reset_fields():
    global indirect_evidence_store
    indirect_evidence_store = ""
    return (
        "",
        gr.update(visible=False),
        gr.update(value="", visible=False),
        gr.update(value="", visible=True),
        None
    )

# Create the Gradio interface
with gr.Blocks() as demo:
    gr.Markdown("<h1>嫌疑犯ABC的現身</h1>")
    gr.Markdown("<h3>法官系統</h3>")
    
    with gr.Row():
        input_box = gr.Textbox(label="請輸入蛛絲馬跡號碼", placeholder="例如: 11", lines=1)
        query_button = gr.Button("查詢")
    
    with gr.Row():
        with gr.Column(scale=1):
            output_box = gr.Textbox(label="查詢結果", interactive=False)
        with gr.Column(scale=1):
            image_output = gr.Image(label="嫌疑犯圖片", visible=True, elem_id="suspect-image")
    
    indirect_button = gr.Button("間接證據", visible=False)
    indirect_output = gr.Textbox(label="間接證據內容", interactive=False, visible=False)
    reset_button = gr.Button("重新查詢")

    # Bind actions to functions
    query_button.click(
        query_data,
        inputs=input_box,
        outputs=[output_box, indirect_button, indirect_output, image_output]
    )
    indirect_button.click(
        show_indirect_evidence,
        inputs=None,
        outputs=indirect_output
    )
    reset_button.click(
        reset_fields,
        inputs=None,
        outputs=[input_box, indirect_button, indirect_output, output_box, image_output]
    )

# Add inline CSS to adjust image size
demo.css = """
#suspect-image img {
    max-width: 150px;
    max-height: 150px;
}
"""

# Launch the Gradio app
demo.launch()