feat: enhance game interaction with custom choice input and update scene handling

src/agent/runner.py

@@ -3,6 +3,10 @@
 import logging
 from dataclasses import asdict
 from typing import Dict, Optional
+import uuid
+
+from agent.image_agent import generate_image_prompt
+from agent.tools import generate_scene_image
 
 from agent.llm_graph import GraphState, llm_game_graph
 from agent.models import UserState
@@ -41,15 +45,33 @@ async def process_step(
     if ending and ending.get("ending_reached"):
         ending_info = ending["ending"]
         if (
-            ("description" not in ending_info
-                or not ending_info["description"])
+            ("description" not in ending_info or not ending_info["description"])
             and user_state.story_frame
         ):
             for e in user_state.story_frame.endings:
                 if e.id == ending_info.get("id"):
                     ending_info["description"] = e.description
                     break
+
+        ending_desc = ending_info.get("description") or ending_info.get(
+            "condition", ""
+        )
+        change_scene = await generate_image_prompt(ending_desc, user_hash)
+        if change_scene.change_scene == "no_change":
+            change_scene.change_scene = "change_completely"
+            if not change_scene.scene_description:
+                change_scene.scene_description = ending_desc
+
+        image_path = await generate_scene_image.ainvoke(
+            {
+                "user_hash": user_hash,
+                "scene_id": f"ending_{uuid.uuid4()}",
+                "change_scene": change_scene,
+            }
+        )
+
         response["ending"] = ending_info
+        response["image"] = image_path
         response["game_over"] = True
     else:
         if (

src/css.py

@@ -1,6 +1,6 @@
-# Custom CSS for fullscreen image with overlay
+# Custom CSS for fullscreen image with overlay and styled form components
 custom_css = """
-/* Make the image container fullscreen */
+/* -------- FULLSCREEN BACKGROUND & NARRATIVE -------- */
 .image-container {
     position: fixed !important;
     top: 0 !important;
@@ -9,26 +9,28 @@ custom_css = """
     height: 100vh !important;
     z-index: 1 !important;
 }
-
 .image-container img {
     width: 100vw !important;
     height: 100vh !important;
     object-fit: cover !important;
 }
 
-/* Style the overlay content */
 .overlay-content {
     position: fixed !important;
     bottom: 0 !important;
     left: 0 !important;
     right: 0 !important;
-    background: linear-gradient(transparent, rgba(0,0,0,0.8)) !important;
+    background: linear-gradient(
+        transparent, rgba(0,0,0,0.8)
+    ) !important;
     padding: 40px 20px 20px !important;
     z-index: 10 !important;
     color: white !important;
 }
+.overlay-content .form {
+    background: transparent !important;
+}
 
-/* Style the narrative text */
 .narrative-text {
     background: rgba(0,0,0,0.7) !important;
     border: none !important;
@@ -39,11 +41,6 @@ custom_css = """
     border-radius: 10px !important;
     margin-bottom: 10px !important;
 }
-
-img {
-    pointer-events: none;
-}
-
 .narrative-text textarea {
     background: transparent !important;
     border: none !important;
@@ -52,84 +49,90 @@ img {
     font-size: 15px !important;
     resize: none !important;
 }
+img {
+    pointer-events: none;
+}
 
-/* Style the choice buttons */
-.choice-buttons {
+/* -------- CHOICE SECTION -------- */
+.choice-area {
     background: rgba(0,0,0,0.7) !important;
     border-radius: 10px !important;
     padding: 10px !important;
 }
 
-.choice-buttons label {
+.choice-buttons {
+    background: transparent !important;
+    border-radius: 10px !important;
+    padding: 10px !important;
+}
+.choice-buttons > div,
+.choice-buttons fieldset {
+    background: transparent !important;
+    border: none !important;
+}
+.choice-buttons label,
+.choice-buttons label span {
     color: white !important;
     font-size: 14px !important;
 }
-
-/* Fix radio button backgrounds */
 .choice-buttons input[type="radio"] {
     background: transparent !important;
     border: 2px solid white !important;
 }
-
 .choice-buttons input[type="radio"]:checked {
     background: white !important;
 }
-
 .choice-buttons .form-radio {
     background: transparent !important;
 }
-
-/* Style radio button containers */
-.choice-buttons > div {
-    background: transparent !important;
-}
-
-.choice-buttons fieldset {
-    background: transparent !important;
-    border: none !important;
-}
-
-/* Remove any remaining white backgrounds */
 .choice-buttons * {
     background-color: transparent !important;
 }
-
 .choice-buttons input {
     background-color: transparent !important;
     border: 1px solid rgba(255,255,255,0.5) !important;
     color: white !important;
 }
 
-.choice-buttons label span {
+/* Bold legend/label, no background */
+.choice-area .form-label,
+.choice-area legend {
+    background: transparent !important;
     color: white !important;
+    border: none !important;
 }
 
-/* Hide gradio header and footer */
-.gradio-header, .gradio-footer {
-    display: none !important;
+/* -------- CUSTOM INPUT FIELD -------- */
+.choice-input textarea {
+    background: transparent !important;
+    border: none !important;
+    color: white !important;
+    border-radius: 10px !important;
+    outline: none !important;
+    box-shadow: none !important;
+    font-size: 15px !important;
+    padding: 10px !important;
+}
+.choice-input {
+    background: none !important;
+    margin-top: 10px !important;
 }
 
-/* Hide image control buttons using correct DOM selector */
-.image-container .icon-button-wrapper {
+/* -------- UI MISCELLANEOUS -------- */
+.gradio-header,
+.gradio-footer {
     display: none !important;
 }
-
+.image-container .icon-button-wrapper,
 .image-container .icon-buttons {
     display: none !important;
 }
-
-/* Position the back button in the top-right corner */
 #back-btn {
     position: fixed !important;
     top: 10px !important;
     right: 10px !important;
     z-index: 20 !important;
 }
-
-/* Make form element transparent */
-.overlay-content .form {
-    background: transparent !important;
-}
 """
 
 # CSS for the loading indicator
@@ -140,14 +143,12 @@ loading_css_styles = """
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: rgba(0, 0, 0, 0.8); /* Semi-transparent black */
-    /* When Gradio makes this gr.Column visible, it will set display:flex !important; (or similar). */
-    /* These properties will then apply to center the content of the Column: */
+    background-color: rgba(0, 0, 0, 0.8);
     justify-content: center;
     align-items: center;
-    z-index: 9999; /* Ensure it's on top */
+    z-index: 9999;
 }
-#loading-indicator .loading-text { /* Style for the text inside */
+#loading-indicator .loading-text {
     color: white;
     font-size: 2em;
     text-align: center;

src/game_constructor.py

@@ -136,6 +136,7 @@ async def start_game_with_settings(
             gr.update(),
             gr.update(),
             gr.update(),  # game components unchanged
+            gr.update(),  # custom choice
         )
 
     character = Character(
@@ -146,7 +147,7 @@ async def start_game_with_settings(
     )
 
     game_setting = GameSetting(character=character, setting=setting_desc, genre=genre)
-    
+
     asyncio.create_task(start_music_generation(user_hash, "neutral"))
 
     # Запускаем LLM-граф для инициализации истории
@@ -171,4 +172,5 @@ async def start_game_with_settings(
         gr.update(value=scene_text),  # game_text
         gr.update(value=scene_image),  # game_image
         gr.update(choices=scene_choices, value=None),  # game_choices
+        gr.update(value="", visible=True),  # custom choice
     )

src/main.py

@@ -44,7 +44,7 @@ async def return_to_constructor(user_hash: str):
 async def update_scene(user_hash: str, choice):
     logger.info(f"Updating scene with choice: {choice}")
     if not isinstance(choice, str):
-        return gr.update(), gr.update(), gr.update()
+        return gr.update(), gr.update(), gr.update(), gr.update()
 
     result = await process_step(
         user_hash=user_hash,
@@ -54,11 +54,15 @@ async def update_scene(user_hash: str, choice):
 
     if result.get("game_over"):
         ending = result["ending"]
-        ending_text = ending.get("description") or ending.get("condition", "")
+        ending_text = (
+            ending.get("description") or ending.get("condition", "")
+        ) + "\n[THE END]"
+        ending_image = result.get("image")
         return (
             gr.update(value=ending_text),
-            gr.update(value=None),
-            gr.Radio(choices=[], label="", value=None),
+            gr.update(value=ending_image),
+            gr.Radio(choices=[], label="", value=None, visible=False),
+            gr.update(value="", visible=False),
         )
 
     scene = result["scene"]
@@ -67,10 +71,11 @@ async def update_scene(user_hash: str, choice):
         scene.get("image", ""),
         gr.Radio(
             choices=[ch["text"] for ch in scene.get("choices", [])],
-            label="What do you choose?",
+            label="What do you choose? (select an option or write your own)",
             value=None,
             elem_classes=["choice-buttons"],
         ),
+        gr.update(value=""),
     )
 
 
@@ -107,6 +112,7 @@ async def start_game_with_music(
         gr.update(),
         gr.update(),
         gr.update(),  # game components unchanged
+        gr.update(),  # custom choice unchanged
     )
 
     # First, get the game interface updates
@@ -254,12 +260,20 @@ with gr.Blocks(
                 elem_classes=["narrative-text"],
                 lines=3,
             )
-            game_choices = gr.Radio(
-                choices=[],
-                label="What do you choose?",
-                value=None,
-                elem_classes=["choice-buttons"],
-            )
+            with gr.Column(elem_classes=["choice-area"]):
+                game_choices = gr.Radio(
+                    choices=[],
+                    label="What do you choose? (select an option or write your own)",
+                    value=None,
+                    elem_classes=["choice-buttons"],
+                )
+                custom_choice = gr.Textbox(
+                    label="",
+                    show_label=False,
+                    placeholder="Type your option and press Enter",
+                    lines=1,
+                    elem_classes=["choice-input"],
+                )
 
     # Event handlers for constructor interface
     setting_suggestions.change(
@@ -316,6 +330,7 @@ with gr.Blocks(
             game_text,
             game_image,
             game_choices,
+            custom_choice,
         ],
     )
 
@@ -334,7 +349,13 @@ with gr.Blocks(
     game_choices.change(
         fn=update_scene,
         inputs=[local_storage, game_choices],
-        outputs=[game_text, game_image, game_choices],
+        outputs=[game_text, game_image, game_choices, custom_choice],
+    )
+
+    custom_choice.submit(
+        fn=update_scene,
+        inputs=[local_storage, custom_choice],
+        outputs=[game_text, game_image, game_choices, custom_choice],
     )
 
     demo.unload(cleanup_music_session)