app.py

import base64
import gradio as gr
from gradio_client import Client

# Start the Qwen API client.
client = Client("Qwen/Qwen2.5-72B-Instruct")

SYSTEM_PROMPT = (
    "You are an assistant and you will ask yes or no questions about sea creatures. "
    "Your goal is to guess the sea creature that the user has in mind from these questions. "
    "You will never deviate from this task. Only when you find the answer, write it between <answer></answer> tags. "
    "Start asking now. If your answer is wrong, continue asking. Never ask the user for the answer."
)

def start_game():
    history = []
    result = client.predict(
        query="",
        history=history,
        system=SYSTEM_PROMPT,
        api_name="/model_chat"
    )
    assistant_message = result[1][-1][1]
    history.append(("", assistant_message))
    
    answer_buttons_update = gr.update(visible=True)
    eval_buttons_update = gr.update(visible=False)
    restart_update = gr.update(visible=False)
    continue_update = gr.update(visible=False)
    
    return (
        gr.update(visible=True, value=assistant_message),  # assistant_display
        gr.update(visible=True, value=""),                 # final_answer_display
        history,                                           # state
        answer_buttons_update,                             # btn_yes
        answer_buttons_update,                             # btn_no
        answer_buttons_update,                             # btn_dont_know
        eval_buttons_update,                               # btn_correct
        eval_buttons_update,                               # btn_incorrect
        "",                                                # final_state
        restart_update,                                    # btn_restart
        continue_update                                    # btn_continue
    )

def process_turn(user_answer, history):
    result = client.predict(
        query=user_answer,
        history=history,
        system=SYSTEM_PROMPT,
        api_name="/model_chat"
    )
    assistant_message = result[1][-1][1]
    history.append((user_answer, assistant_message))
    final_answer = ""
    if "<answer>" in assistant_message and "</answer>" in assistant_message:
        start_idx = assistant_message.index("<answer>") + len("<answer>")
        end_idx = assistant_message.index("</answer>")
        final_answer = assistant_message[start_idx:end_idx].strip()
    if final_answer:
        assistant_update = gr.update(visible=False)
        final_text = f"**My guess:** **{final_answer}**"
        answer_update = gr.update(visible=False)
        eval_update = gr.update(visible=True)
        restart_update = gr.update(visible=False)
        continue_update = gr.update(visible=False)
    else:
        assistant_update = gr.update(visible=True, value=assistant_message)
        final_text = ""
        answer_update = gr.update(visible=True)
        eval_update = gr.update(visible=False)
        restart_update = gr.update(visible=False)
        continue_update = gr.update(visible=False)
    return (
        assistant_update,
        final_text,
        history,
        answer_update,
        answer_update,
        answer_update,
        eval_update,
        eval_update,
        final_answer,
        restart_update,
        continue_update
    )

def process_yes(history):
    return process_turn("Yes", history)

def process_no(history):
    return process_turn("No", history)

def process_dont_know(history):
    return process_turn("I don't know", history)

def evaluate_correct(final_state):
    new_text = "**My guess is correct! Shall we play again?**"
    return (
        new_text,
        gr.update(visible=False),
        gr.update(visible=False),
        gr.update(visible=True, value="Play Again"),
        gr.update(visible=False)
    )

def evaluate_incorrect(final_state):
    new_text = "**Let's continue, press the continue button.**"
    return (
        new_text,
        gr.update(visible=False),
        gr.update(visible=False),
        gr.update(visible=False),
        gr.update(visible=True, value="Continue")
    )

def continue_game(history):
    result = client.predict(
        query="",
        history=history,
        system=SYSTEM_PROMPT,
        api_name="/model_chat"
    )
    assistant_message = result[1][-1][1]
    history.append(("", assistant_message))
    return (
        gr.update(visible=True, value=assistant_message),
        gr.update(visible=True, value=""),
        history,
        gr.update(visible=True),
        gr.update(visible=True),
        gr.update(visible=True),
        gr.update(visible=False),
        gr.update(visible=False),
        "",
        gr.update(visible=False),
        gr.update(visible=False)
    )

def restart_game():
    global client
    client = Client("Qwen/Qwen2.5-72B-Instruct")
    return start_game()

css = """
body, .gradio-container {
    font-family: 'Roboto', sans-serif;
    background-color: #f0f2f5;
    background-image: url('https://cdn.glitch.global/e803869d-6fae-4322-93f8-f15353a38bf3/pexels-jeremy-bishop-1260133-2397651.jpg?v=1740128669007') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    background-attachment: fixed !important;
    color: #333;  /* Varsayılan yazı rengi */
}

/* Tüm yazıların rengini siyah yapmak için */
* {
    color: black !important; /* Butonlar dışındaki tüm yazıları siyah yapar */
}

/* Üstteki başlık için stil */
.header-text {
    text-align: center;
    margin-top: 20px;
    font-size: 2em;
    color: #4261a8;
}

/* Özel buton sınıfımız: my-button */
.my-button {
    background-color: #4261a8 !important;
    color: #fff !important;
    border: none !important;
    transition: transform 0.3s, background-color 0.3s !important;
}
.my-button:hover {
    background-color: #1c4196 !important;
    transform: scale(1.05);
}

/* Soru kutusu */
.question-box {
    border: 2px solid #ccc;
    padding: 10px;
    border-radius: 5px;
    margin: 10px auto;
    width: 80%;
    text-align: center;
    background-color: rgba(173, 216, 230, 0);
}

/* Gradio Markdown’un varsayılan arka planını şeffaf yapmak */
.question-box .gr-prose {
    background-color: transparent !important;
    box-shadow: none !important;
    border: none !important;
}

.final-answer {
    font-size: 2em;
    font-weight: bold;
    text-align: center;
    margin: 20px;
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 20px;
}

/* Gradio footer kısmını gizle */
footer, .footer, .gradio-footer {
    display: none !important;
}
"""


# Light mode zorunluluğu için ek CSS
custom_css = """
:root {
    color-scheme: light;
}
""" + css

# Yerel ikonu Base64'e çevirme
with open("tubitech-su.png", "rb") as image_file:
    encoded_string = base64.b64encode(image_file.read()).decode("utf-8")
icon_data_uri = f"data:image/png;base64,{encoded_string}"

icon_html = f"""
<div style="position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 1000;">
    <div style="width: 60px; height: 60px; background-color: white; border-radius: 50%; 
                display: flex; justify-content: center; align-items: center; 
                box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);">
        <img src="{icon_data_uri}" alt="Icon" style="width: 50px; height: auto;">
    </div>
</div>
"""

with gr.Blocks(css=custom_css, theme=gr.themes.Default()) as demo:
    # Üstteki başlık
    gr.Markdown("### TUBITECH # 9694 - Sea Creature Akinator", elem_classes="header-text")
    
    # Arayüz elemanları
    assistant_display = gr.Markdown(
        value="", 
        label="", 
        show_label=False, 
        elem_classes="question-box"
    )
    final_answer_display = gr.Markdown(
        value="", 
        label="", 
        show_label=False, 
        elem_classes="final-answer"
    )
    
    with gr.Row(elem_classes="button-group"):
        btn_yes = gr.Button("Yes", elem_classes=["my-button"])
        btn_no = gr.Button("No", elem_classes=["my-button"])
        btn_dont_know = gr.Button("I don't know", elem_classes=["my-button"])
    
    with gr.Row(elem_classes="button-group"):
        btn_correct = gr.Button("Correct", visible=False, elem_classes=["my-button"])
        btn_incorrect = gr.Button("Incorrect", visible=False, elem_classes=["my-button"])
    
    btn_restart = gr.Button("Play Again", visible=False, elem_classes=["my-button"])
    btn_continue = gr.Button("Continue", visible=False, elem_classes=["my-button"])
    
    state = gr.State([])
    final_state = gr.State("")
    
    # Sayfa yüklendiğinde oyunu başlat
    demo.load(
        fn=start_game,
        outputs=[
            assistant_display,
            final_answer_display,
            state,
            btn_yes,
            btn_no,
            btn_dont_know,
            btn_correct,
            btn_incorrect,
            final_state,
            btn_restart,
            btn_continue
        ]
    )
    
    # Butonların click event'leri
    btn_yes.click(
        fn=process_yes,
        inputs=[state],
        outputs=[
            assistant_display,
            final_answer_display,
            state,
            btn_yes,
            btn_no,
            btn_dont_know,
            btn_correct,
            btn_incorrect,
            final_state,
            btn_restart,
            btn_continue
        ]
    )
    btn_no.click(
        fn=process_no,
        inputs=[state],
        outputs=[
            assistant_display,
            final_answer_display,
            state,
            btn_yes,
            btn_no,
            btn_dont_know,
            btn_correct,
            btn_incorrect,
            final_state,
            btn_restart,
            btn_continue
        ]
    )
    btn_dont_know.click(
        fn=process_dont_know,
        inputs=[state],
        outputs=[
            assistant_display,
            final_answer_display,
            state,
            btn_yes,
            btn_no,
            btn_dont_know,
            btn_correct,
            btn_incorrect,
            final_state,
            btn_restart,
            btn_continue
        ]
    )
    
    btn_correct.click(
        fn=evaluate_correct,
        inputs=[final_state],
        outputs=[
            final_answer_display,
            btn_correct,
            btn_incorrect,
            btn_restart,
            btn_continue
        ]
    )
    btn_incorrect.click(
        fn=evaluate_incorrect,
        inputs=[final_state],
        outputs=[
            final_answer_display,
            btn_correct,
            btn_incorrect,
            btn_restart,
            btn_continue
        ]
    )
    
    btn_restart.click(
        fn=restart_game,
        inputs=[],
        outputs=[
            assistant_display,
            final_answer_display,
            state,
            btn_yes,
            btn_no,
            btn_dont_know,
            btn_correct,
            btn_incorrect,
            final_state,
            btn_restart,
            btn_continue
        ]
    )
    
    btn_continue.click(
        fn=continue_game,
        inputs=[state],
        outputs=[
            assistant_display,
            final_answer_display,
            state,
            btn_yes,
            btn_no,
            btn_dont_know,
            btn_correct,
            btn_incorrect,
            final_state,
            btn_restart,
            btn_continue
        ]
    )
    
    gr.HTML(icon_html)
    
demo.launch(debug=True, show_error=True)