render dynamic

README.md

@@ -4,7 +4,7 @@ emoji: 📚
 colorFrom: red
 colorTo: blue
 sdk: gradio
-sdk_version: 4.36.0
+sdk_version: 4.37.2
 app_file: app.py
 pinned: false
 ---

app.py

@@ -4,9 +4,18 @@ from openai import OpenAI
 import json
 import tempfile
 
+is_env_local = os.getenv("IS_ENV_LOCAL", "false") == "true"
+print(f"is_env_local: {is_env_local}")
+
+# KEY CONFIG
+if is_env_local:
+    with open("local_config.json") as f:
+        config = json.load(f)
+        IS_ENV_PROD = "False"
+        OPEN_AI_KEY = config["OPEN_AI_KEY"]
+else:
+    OPEN_AI_KEY = os.getenv("OPEN_AI_KEY")
 
-
-OPEN_AI_KEY = os.getenv("OPEN_AI_KEY")
 OPEN_AI_CLIENT = OpenAI(api_key=OPEN_AI_KEY)
 
 
@@ -28,12 +37,18 @@ def generate_topics(model, max_tokens, sys_content, scenario, eng_level, user_ge
         "model": model,
         "messages": messages,
         "max_tokens": max_tokens,
+        "response_format": { "type": "json_object" }
     }
 
     response = OPEN_AI_CLIENT.chat.completions.create(**request_payload)
-    content = response.choices[0].message.content.strip()
+    content = response.choices[0].message.content
+    topics = json.loads(content)["topics"]
+    topics_text = json.dumps(topics)
 
-    return content
+    return topics_text
+
+def update_topic_input(topic):
+    return topic, gr.update(elem_classes=["btn-max-length", "btn-highlight"])
 
 def generate_points(model, max_tokens, sys_content, scenario, eng_level, topic, user_generate_points_prompt):
     """
@@ -287,7 +302,11 @@ def paragraph_save_and_tts(paragraph_text):
         # Handle the error appropriately (e.g., return an error message or a default audio path)
         return paragraph_text, None
 
-with gr.Blocks() as demo:
+CSS = """
+.btn-max-length { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.btn-highlight { border-color: yellow; }
+"""
+with gr.Blocks(css=CSS) as demo:
     with gr.Row():
         with gr.Column():
             # basic inputs
@@ -303,12 +322,31 @@ with gr.Blocks() as demo:
                 Give me 10 topics relevant to Scenario, 
                 for a paragraph. Just the topics, no explanation, use simple English language. 
                 Make sure the vocabulary you use is at english level.
+                output use JSON 
+
+                EXAMPLE:
+                "topics":["topic1", "topic2", "topic3", "topic4", "topic5", "topic6", "topic7", "topic8", "topic9", "topic10"]
             """
             user_generate_topics_prompt = gr.Textbox(label="Topics Prompt", value=default_generate_topics_prompt, visible=False)
-            generate_topics_button = gr.Button("AI Generate Topic Sentences")
-            topic_output = gr.Textbox(label="AI Generated Topic 主題")
-            topic_input = gr.Textbox(label="Topic")
-
+            
+            with gr.Row():
+                with gr.Column():
+                    topic_input = gr.Textbox(label="Topic")
+
+                with gr.Column():
+                    generate_topics_button = gr.Button("AI Generate Topic Sentences")
+                    topic_output = gr.Textbox(label="AI Generated Topic 主題", visible=False, value=[])
+
+                    @gr.render(inputs=topic_output)
+                    def render_topics(topics):    
+                        buttons = []
+                        topics_list = json.loads(topics)
+                        for i, topic in enumerate(topics_list):
+                            btn = gr.Button(topic, elem_id=f"topic_button_{i}", elem_classes=["btn-max-length"])
+                            btn.click(fn=update_topic_input, inputs=gr.Textbox(value=topic, visible=False), outputs=[topic_input, btn])
+                            buttons.append(btn)
+                        return buttons
+            
             gr.Markdown("## 3. Generate Points 要點")
             default_generate_points_prompt = """
                 Please provide main points to develop in a paragraph about topic in the context of scenario, 
@@ -487,9 +525,6 @@ with gr.Blocks() as demo:
             paragraph_save_output = gr.Textbox(label="Save and Share")
             audio_output = gr.Audio(label="Generated Speech", type="filepath")
 
-
-
-
     generate_topics_button.click(
         fn=generate_topics,
         inputs=[

requirements.txt

@@ -1,2 +1,2 @@
-gradio==4.36.0
+gradio==4.37.2
 openai>=1.16.2