Update app.py

app.py

@@ -13,11 +13,6 @@ SYSTEM_PROMPT = (
 )
 
 def start_game():
-    """
-    Starts the game; retrieves the first question.
-    The question box is visible, the final guess area is cleared,
-    the answer buttons are visible, the evaluation and restart/continue buttons are hidden.
-    """
     history = []
     result = client.predict(
         query="",
@@ -44,19 +39,10 @@ def start_game():
         eval_buttons_update,                               # btn_incorrect
         "",                                                # final_state
         restart_update,                                    # btn_restart
-        continue_update                                  # btn_continue
+        continue_update                                    # btn_continue
     )
 
 def process_turn(user_answer, history):
-    """
-    Sends the user's answer to the API.
-    If the API's response contains <answer> tags, the final guess has been made.
-      - In this case, the question box is hidden,
-      - The final guess is displayed in large and bold,
-      - The answer buttons are hidden,
-      - The evaluation buttons are visible.
-    If there is no final guess, the assistant's answer (question) is updated.
-    """
     result = client.predict(
         query=user_answer,
         history=history,
@@ -71,7 +57,7 @@ def process_turn(user_answer, history):
         end_idx = assistant_message.index("</answer>")
         final_answer = assistant_message[start_idx:end_idx].strip()
     if final_answer:
-        # Final guess made.
+        # Assistant kendini tahmin ettiyse, asistan metnini sakla, final cevabı göster
         assistant_update = gr.update(visible=False)
         final_text = f"**My guess:** **{final_answer}**"
         answer_update = gr.update(visible=False)
@@ -79,6 +65,7 @@ def process_turn(user_answer, history):
         restart_update = gr.update(visible=False)
         continue_update = gr.update(visible=False)
     else:
+        # Tahmin yoksa, asistan metnini göster, final cevabı temizle
         assistant_update = gr.update(visible=True, value=assistant_message)
         final_text = ""
         answer_update = gr.update(visible=True)
@@ -86,17 +73,17 @@ def process_turn(user_answer, history):
         restart_update = gr.update(visible=False)
         continue_update = gr.update(visible=False)
     return (
-        assistant_update,   # assistant_display
-        final_text,         # final_answer_display
-        history,            # state
-        answer_update,      # btn_yes
-        answer_update,      # btn_no
-        answer_update,      # btn_dont_know
-        eval_update,        # btn_correct
-        eval_update,        # btn_incorrect
-        final_answer,       # final_state
-        restart_update,     # btn_restart
-        continue_update     # btn_continue
+        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):
@@ -109,43 +96,26 @@ def process_dont_know(history):
     return process_turn("I don't know", history)
 
 def evaluate_correct(final_state):
-    """
-    If the final guess is correct:
-      - The final text is updated to "My guess is correct! Shall we play again?"
-      - The evaluation buttons are hidden.
-      - The "Play Again" button becomes visible.
-      - The "Continue" button remains hidden.
-    """
     new_text = "**My guess is correct! Shall we play again?**"
     return (
         new_text,
-        gr.update(visible=False),                        # btn_correct hidden
-        gr.update(visible=False),                        # btn_incorrect hidden
-        gr.update(visible=True, value="Play Again"),     # btn_restart visible
-        gr.update(visible=False)                         # btn_continue hidden
+        gr.update(visible=False),
+        gr.update(visible=False),
+        gr.update(visible=True, value="Play Again"),
+        gr.update(visible=False)
     )
 
 def evaluate_incorrect(final_state):
-    """
-    If the final guess is incorrect:
-      - The final text is updated to "Let's continue, press the continue button."
-      - The evaluation buttons are hidden.
-      - The "Continue" button becomes visible.
-    """
     new_text = "**Let's continue, press the continue button.**"
     return (
         new_text,
-        gr.update(visible=False),                        # btn_correct hidden
-        gr.update(visible=False),                        # btn_incorrect hidden
-        gr.update(visible=False),                        # btn_restart hidden
-        gr.update(visible=True, value="Continue")        # btn_continue visible
+        gr.update(visible=False),
+        gr.update(visible=False),
+        gr.update(visible=False),
+        gr.update(visible=True, value="Continue")
     )
 
 def continue_game(history):
-    """
-    When the "Continue" button is clicked, the assistant asks a new question with the current history.
-    The conversation history is preserved, the question box and answer buttons are reactivated.
-    """
     result = client.predict(
         query="",
         history=history,
@@ -155,29 +125,57 @@ def continue_game(history):
     assistant_message = result[1][-1][1]
     history.append(("", assistant_message))
     return (
-        gr.update(visible=True, value=assistant_message),  # assistant_display
-        gr.update(visible=True, value=""),                 # final_answer_display
-        history,                                           # state
-        gr.update(visible=True),                           # btn_yes
-        gr.update(visible=True),                           # btn_no
-        gr.update(visible=True),                           # btn_dont_know
-        gr.update(visible=False),                          # btn_correct
-        gr.update(visible=False),                          # btn_incorrect
-        "",                                                # final_state
-        gr.update(visible=False),                         # btn_restart
-        gr.update(visible=False)                          # btn_continue
+        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():
-    """
-    When the "Play Again" button is clicked, the game starts over (history is reset).
-    """
     global client
     client = Client("Qwen/Qwen2.5-72B-Instruct")
     return start_game()
 
-# Custom CSS:
 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;
+}
+
+/* Ü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;  /* Arka plan rengi */
+    color: #fff !important;               /* Yazı rengi */
+    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;
@@ -185,62 +183,84 @@ css = """
     margin: 10px auto;
     width: 80%;
     text-align: center;
+    background-color: rgba(173, 216, 230, 0); /* Yarı saydam soluk cyan */
 }
+
+/* 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;
+}
 """
 
-# Base64 encode the local icon image.
+# 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}"
 
-# Create the HTML for the fixed icon.
 icon_html = f"""
 <div style="position: fixed; bottom: 10px; left: 50%; transform: translateX(-50%); z-index: 1000;">
-    <img src="{icon_data_uri}" alt="Icon" style="width: 50px; height: auto;">
+    <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=css) as demo:
-    gr.Markdown("### TUBITECH # 9694 - Sea Creature Akinator")
+    # Üstteki başlık
+    gr.Markdown("### TUBITECH # 9694 - Sea Creature Akinator", elem_classes="header-text")
     
-    # The question asked by the assistant.
-    assistant_display = gr.Markdown(label="Question", elem_classes="question-box")
-    # Final guess area.
-    final_answer_display = gr.Markdown("", label="Guess", elem_classes="final-answer")
+    # show_label=False ve label="" ile ekstra çerçeveyi kapatıyoruz
+    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"
+    )
     
-    # Answer buttons: Yes, No, I don't know.
     with gr.Row(elem_classes="button-group"):
-        btn_yes = gr.Button("Yes")
-        btn_no = gr.Button("No")
-        btn_dont_know = gr.Button("I don't know")
+        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"])
     
-    # Evaluation buttons: Correct, Incorrect (hidden initially).
     with gr.Row(elem_classes="button-group"):
-        btn_correct = gr.Button("Correct", visible=False)
-        btn_incorrect = gr.Button("Incorrect", visible=False)
+        btn_correct = gr.Button("Correct", visible=False, elem_classes=["my-button"])
+        btn_incorrect = gr.Button("Incorrect", visible=False, elem_classes=["my-button"])
     
-    # Buttons displayed in the final state:
-    # - If correct, "Play Again"
-    btn_restart = gr.Button("Play Again", visible=False)
-    # - If incorrect, "Continue"
-    btn_continue = gr.Button("Continue", visible=False)
+    btn_restart = gr.Button("Play Again", visible=False, elem_classes=["my-button"])
+    btn_continue = gr.Button("Continue", visible=False, elem_classes=["my-button"])
     
-    # Hidden states:
     state = gr.State([])
     final_state = gr.State("")
     
-    # Start the game when the page loads.
+    # Sayfa yüklendiğinde oyunu başlat
     demo.load(
         fn=start_game,
         outputs=[
@@ -258,7 +278,7 @@ with gr.Blocks(css=css) as demo:
         ]
     )
     
-    # When answer buttons are clicked:
+    # Butonların click event'leri
     btn_yes.click(
         fn=process_yes,
         inputs=[state],
@@ -311,7 +331,6 @@ with gr.Blocks(css=css) as demo:
         ]
     )
     
-    # Evaluation buttons:
     btn_correct.click(
         fn=evaluate_correct,
         inputs=[final_state],
@@ -335,7 +354,6 @@ with gr.Blocks(css=css) as demo:
         ]
     )
     
-    # When the "Play Again" button is clicked:
     btn_restart.click(
         fn=restart_game,
         inputs=[],
@@ -354,7 +372,6 @@ with gr.Blocks(css=css) as demo:
         ]
     )
     
-    # When the "Continue" button is clicked:
     btn_continue.click(
         fn=continue_game,
         inputs=[state],
@@ -373,7 +390,6 @@ with gr.Blocks(css=css) as demo:
         ]
     )
     
-    # Add the fixed icon with the embedded base64 image.
     gr.HTML(icon_html)
     
 demo.launch(debug=True, show_error=True)