chore: modify few features

app.py

@@ -35,19 +35,19 @@ def get_player_info(player_backend_user_id):
         save_latest_player_data()
         with open("latest_player_data.json", "r", encoding="utf-8") as file:
             player_info = json.load(file)
-        with open('latest_player_data.json', 'r') as f:
+        with open("latest_player_data.json", "r") as f:
             datas = json.load(f)
 
         processed_datas = {}
 
         for k, v in datas.items():
-            log = v['adventure_logs']
+            log = v["adventure_logs"]
             filtered_log = [record for record in log if not record.startswith("恭喜")]
-            processed_log = [record.rsplit(',', 1)[0] for record in filtered_log]
-            concat_log = ' '.join(processed_log)
+            processed_log = [record.rsplit(",", 1)[0] for record in filtered_log]
+            concat_log = " ".join(processed_log)
             processed_datas[k] = concat_log
 
-        with open('processed_adventure_logs.json', 'w') as f:
+        with open("processed_adventure_logs.json", "w") as f:
             json.dump(processed_datas, f)
 
     if player_backend_user_id in player_info:
@@ -213,6 +213,9 @@ with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
             cancel_player_name = gr.Button(
                 "取消", elem_id="cancel_player_name", visible=False
             )
+            player_name_too_long = gr.Markdown(
+                "# 暱稱過長，請重新輸入", visible=False, elem_id="player_name_too_long"
+            )
 
         with gr.Row():
             player_name_next_step = gr.Button(
@@ -277,6 +280,13 @@ with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
             start_generate_story = gr.Button(
                 "開始寫作故事", visible=False, elem_id="start_generate_story"
             )
+            weaving = gr.Button(
+                "星際夥伴努力撰寫故事中...",
+                visible=False,
+                elem_id="weaving",
+                size="lg",
+                interactive=False,
+            )
 
         with gr.Row():
             bot1 = gr.Chatbot(visible=False)
@@ -363,15 +373,25 @@ with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
         queue=False,
     )
 
+    def check_plyer_name_length(player_name):
+        if len(player_name) > 10:
+            return (
+                gr.update(visible=True),
+                gr.update(visible=False),
+                gr.update(visible=True),
+            )
+        else:
+            return gr.update(visible=True), gr.update(visible=True), gr.update(False)
+
     confirm_player_name.click(
         lambda: (gr.update(interactive=False), gr.update(visible=False)),
         None,
         [player_name, confirm_player_name],
         queue=False,
     ).then(
-        lambda: create_visibility_updates(True, 2),
-        None,
-        [cancel_player_name, player_name_next_step],
+        check_plyer_name_length,
+        player_name,
+        [cancel_player_name, player_name_next_step, player_name_too_long],
         queue=False,
     ).then(
         **set_player_name_args
@@ -429,14 +449,16 @@ with gr.Blocks(theme=seafoam, css=get_content("css/style.css")) as demo:
     start_generate_story.click(
         lambda: gr.update(visible=False), None, start_generate_story, queue=False
     ).then(
-        lambda: create_visibility_updates(True, 4),
+        lambda: create_visibility_updates(True, 5),
         None,
-        [bot1, bot2, bot3, bot4],
+        [bot1, bot2, bot3, bot4, weaving],
         queue=False,
     ).then(
         **get_llm_response_args
     ).then(
         lambda: gr.update(visible=True), None, [select_story], queue=False
+    ).then(
+        lambda: gr.update(visible=False), None, [weaving], queue=False
     )
 
     select_story.select(

css/style.css

@@ -331,15 +331,21 @@ input[type="range"]::-ms-track {
 }
 
 .selected {
-    color: #fff;
-    background: #12d2ab;
-    border: 2px solid #02b28f;
-    border-radius: 8px;
+    color: #fff !important;
+    background: #12d2ab !important;
+    border: 2px solid #02b28f !important;
+    border-radius: 8px !important;
 }
 
 .message {
-    background: rgba(0,0,0,0.05);
-    border: None;
+    background: rgba(0,0,0,0.05) !important;
+    border: None !important;
+}
+
+#processing {
+    margin: 20vh 10vw;
+    height: 30vh;
+    font-size: 2rem;
 }
 
 .code_wrap {
@@ -349,6 +355,12 @@ input[type="range"]::-ms-track {
     margin: 1vh 1vw 1vh 1vw;
 }
 
+#certificate [aria-label="Download"]{
+    background: #12d2ab !important;
+    color: #fff !important;
+    border: 5px solid #02b28f !important;
+}
+
 #select_story {
     display: flex;
     justify-content: space-evenly;

utils/completion_reward.py

@@ -35,6 +35,7 @@ gcs_client = storage.Client(
     credentials=creds, project=service_account_info_dict["project_id"]
 )
 
+
 class CompletionReward:
     def __init__(self):
         self.player_backend_user_id = None
@@ -129,7 +130,7 @@ class CompletionReward:
         )
         self.player_certificate_url = public_url
 
-        return gr.Image(public_url, visible=True)
+        return gr.Image(public_url, visible=True, elem_id="certificate")
 
     def to_dict(self):
         return {
@@ -318,13 +319,16 @@ class AWSAgent:
 class GoogleAgent:
     from google.cloud import aiplatform
     from vertexai.preview.generative_models import GenerativeModel
+
     SERVICE_ACCOUNT_INFO = os.getenv("GBQ_TOKEN")
     service_account_info_dict = json.loads(SERVICE_ACCOUNT_INFO)
     SCOPES = ["https://www.googleapis.com/auth/cloud-platform"]
 
-    creds = Credentials.from_service_account_info(service_account_info_dict, scopes=SCOPES)
+    creds = Credentials.from_service_account_info(
+        service_account_info_dict, scopes=SCOPES
+    )
     aiplatform.init(
-        project='junyiacademy',
+        project="junyiacademy",
         service_account=service_account_info_dict,
         credentials=creds,
     )
@@ -349,11 +353,15 @@ class GoogleAgent:
         while retry_attempts < 5:
             try:
                 logging.info("Google Generating response...")
-                model_response = self.gemini_pro_model.generate_content(f"{system_prompt}, 以下是我的冒險故事 ```{user_log}```")
-                
+                model_response = self.gemini_pro_model.generate_content(
+                    f"{system_prompt}, 以下是我的冒險故事 ```{user_log}```"
+                )
+
                 chinese_converter = OpenCC("s2tw")
 
-                return chinese_converter.convert(model_response.candidates[0].content.parts[0].text)
+                return chinese_converter.convert(
+                    model_response.candidates[0].content.parts[0].text
+                )
 
             except Exception as e:
                 retry_attempts += 1
@@ -499,7 +507,7 @@ class ImageProcessor:
         body_x, body_y = left + 20, title_y + 60  # Adjust position as needed
 
         for line in paragraph.split("\n"):
-            wrapped_lines = textwrap.wrap(line, width=65)
+            wrapped_lines = textwrap.wrap(line, width=70)
             for wrapped_line in wrapped_lines:
                 draw.text((body_x, body_y), wrapped_line, font=body_font, fill="black")
                 body_y += 30

utils/completion_reward_utils.py

@@ -57,7 +57,7 @@ def check_is_in_completion_reward(player_backend_user_id):
                     gr.update(visible=False),
                     gr.update(visible=False),
                     gr.update(visible=False),
-                    gr.Image(value, visible=True),
+                    gr.Image(value, visible=True, elem_id="certificate"),
                 )
         else:
             return (