Updated UI and behavior.

app/config.py

@@ -19,6 +19,7 @@ class PromptGroup(BaseModel):
 
 class MetaPromptConfig(BaseConfig):
     llms: Optional[dict[str, LLMConfig]]
+    default_llm_temperature: Optional[float] = 0.1
     aggressive_exploration: Optional[bool] = False
     examples_path: Optional[str]
     server_name: Optional[str] = None

app/gradio_meta_prompt.py

@@ -43,7 +43,16 @@ with gr.Blocks(title='Meta Prompt') as demo:
                 interactive=False,
                 wrap=True
             )
+        with gr.Column(scale=1, min_width=100):
+            with gr.Group():
+                json_file_object = gr.File(
+                    label="Import/Export JSON", file_types=[".json"], type="filepath",
+                    min_width=80
+                )
+                export_button = gr.Button("Export to JSON")
 
+    with gr.Row():
+        with gr.Column(scale=3):
             selected_example_input = gr.Textbox(
                 label="Selected Example Input",
                 lines=2,
@@ -57,13 +66,7 @@ with gr.Blocks(title='Meta Prompt') as demo:
                 value="",
             )
 
-        with gr.Column(scale=1):
-            with gr.Accordion("Import/Export JSON", open=False):
-                json_file_object = gr.File(
-                    label="Import/Export JSON", file_types=[".json"], type="filepath"
-                )
-                export_button = gr.Button("Export to JSON")
-
+        with gr.Column(scale=1, min_width=100):
             selected_group_mode = gr.State(None)  # None, "update", "append"
             selected_group_index = gr.State(None)  # None, int
             selected_group_input = gr.State("")
@@ -98,18 +101,22 @@ with gr.Blocks(title='Meta Prompt') as demo:
                             selected_row_index = gr.Number(
                                 label="Selected Row Index", value=index, precision=0, interactive=False
                             )
-                            delete_row_button = gr.Button(
-                                "Delete Selected Row", variant="secondary"
-                            )
-                        with gr.Row():
                             update_row_button = gr.Button(
                                 "Update Selected Row", variant="secondary"
                             )
-                            close_button = gr.Button("Close", variant="secondary")
+                            delete_row_button = gr.Button(
+                                "Delete Selected Row", variant="secondary"
+                            )
+                            # close_button = gr.Button("Close", variant="secondary")
 
-                        delete_row_button.click(
-                            fn=delete_selected_dataframe_row,
-                            inputs=[selected_row_index, input_dataframe],
+                        update_row_button.click(
+                            fn=update_selected_dataframe_row,
+                            inputs=[
+                                selected_example_input,
+                                selected_example_output,
+                                selected_row_index,
+                                input_dataframe,
+                            ],
                             outputs=[
                                 input_dataframe,
                                 selected_group_mode,
@@ -119,14 +126,9 @@ with gr.Blocks(title='Meta Prompt') as demo:
                             ],
                         )
 
-                        update_row_button.click(
-                            fn=update_selected_dataframe_row,
-                            inputs=[
-                                selected_example_input,
-                                selected_example_output,
-                                selected_row_index,
-                                input_dataframe,
-                            ],
+                        delete_row_button.click(
+                            fn=delete_selected_dataframe_row,
+                            inputs=[selected_row_index, input_dataframe],
                             outputs=[
                                 input_dataframe,
                                 selected_group_mode,
@@ -135,12 +137,13 @@ with gr.Blocks(title='Meta Prompt') as demo:
                                 selected_group_output,
                             ],
                         )
+
                     elif mode == "append":
                         with gr.Row():
                             append_example_button = gr.Button(
                                 "Append to Input Examples", variant="secondary"
                             )
-                            close_button = gr.Button("Close", variant="secondary")
+                            # close_button = gr.Button("Close", variant="secondary")
 
                         append_example_button.click(
                             fn=append_example_to_input_dataframe,
@@ -158,18 +161,18 @@ with gr.Blocks(title='Meta Prompt') as demo:
                             ],
                         )
 
-                    close_button.click(
-                        fn=lambda: None,
-                        inputs=[],
-                        outputs=[selected_group_mode],
-                    )
+                    # close_button.click(
+                    #     fn=lambda: None,
+                    #     inputs=[],
+                    #     outputs=[selected_group_mode],
+                    # )
 
     with gr.Tabs() as tabs:
 
         with gr.Tab("Scope"):
 
             with gr.Row():
-                submit_button = gr.Button("Generate", variant="primary")
+                scope_submit_button = gr.Button("Generate", variant="primary", interactive=False)
                 scope_clear_button = gr.ClearButton(
                     [
                         input_dataframe
@@ -303,16 +306,23 @@ with gr.Blocks(title='Meta Prompt') as demo:
                                     value="Generate",
                                     variant="secondary"
                                 )
+                                pull_task_description_output_button = gr.Button(
+                                    value="→ Pull Output", variant="secondary")
+                                pull_system_message_output_button = gr.Button(
+                                    value="Pull Output ←", variant="secondary")
 
                         with gr.Group():
                             acceptance_criteria_input = gr.Textbox(
                                 label="Acceptance Criteria (Compared with Expected Output [EO])",
                                 show_copy_button=True
                             )
-                            generate_acceptance_criteria_button = gr.Button(
-                                value="Generate",
-                                variant="secondary"
-                            )
+                            with gr.Row():
+                                generate_acceptance_criteria_button = gr.Button(
+                                    value="Generate",
+                                    variant="secondary"
+                                )
+                                pull_acceptance_criteria_output_button = gr.Button(
+                                    value="Pull Output ←", variant="secondary")
 
                         recursion_limit_input = gr.Number(
                             label="Recursion Limit",
@@ -443,10 +453,10 @@ with gr.Blocks(title='Meta Prompt') as demo:
                         with gr.Row():
                             evaluate_system_message_button = gr.Button(
                                 value="Evaluate", variant="secondary")
-                            copy_to_initial_system_message_button = gr.Button(
-                                value="Copy to Initial System Message", variant="secondary")
                     output_output = gr.Textbox(
                         label="Output", show_copy_button=True)
+                    acceptance_criteria_output = gr.Textbox(
+                        label="Acceptance Criteria", show_copy_button=True)
                     analysis_output = gr.Textbox(
                         label="Analysis", show_copy_button=True)
                     flag_button = gr.Button(
@@ -463,10 +473,10 @@ with gr.Blocks(title='Meta Prompt') as demo:
             examples = gr.Examples(config.examples_path, inputs=[
                 selected_example_input,
                 selected_example_output,
-                acceptance_criteria_input,
-                initial_system_message_input,
-                recursion_limit_input,
-                simple_model_name_input
+                # acceptance_criteria_input,
+                # initial_system_message_input,
+                # recursion_limit_input,
+                # simple_model_name_input
             ])
 
             prompt_model_tab_state = gr.State(value='Simple')
@@ -498,9 +508,22 @@ with gr.Blocks(title='Meta Prompt') as demo:
 
             config_state = gr.State(value=config)
 
+            scope_inputs_ready_state = gr.State(value=False)
             prompt_inputs_ready_state = gr.State(value=False)
 
     # set up event handlers for the scope tab
+    input_dataframe.change(
+        fn=lambda x: len(x) > 0, # input_dataframe has at least 1 data row 
+        inputs=[input_dataframe],
+        outputs=[scope_inputs_ready_state],
+    )
+
+    scope_inputs_ready_state.change(
+        fn=lambda x: [gr.update(interactive=x)] * 5,
+        inputs=[scope_inputs_ready_state],
+        outputs=[scope_submit_button, generate_description_button,
+                 generate_examples_directly_button, analyze_input_button, generate_briefs_button],
+    )
 
     json_file_object.change(
         fn=import_json_data,
@@ -514,7 +537,7 @@ with gr.Blocks(title='Meta Prompt') as demo:
         outputs=[json_file_object],
     )
 
-    submit_button.click(
+    scope_submit_button.click(
         fn=process_json_data,
         inputs=[
             config_state,
@@ -662,7 +685,7 @@ with gr.Blocks(title='Meta Prompt') as demo:
         fn=apply_suggestions,
         inputs=[config_state, description_output, suggestions_output,
                 input_dataframe, scope_model_name, temperature],
-        outputs=[description_output],
+        outputs=[description_output, suggestions_output],
     )
 
     # set up event handlers for the prompt tab
@@ -771,7 +794,7 @@ with gr.Blocks(title='Meta Prompt') as demo:
                 model_name_states["acceptance_criteria"],
                 model_temperature_states["acceptance_criteria"],
                 prompt_template_group],
-        outputs=[acceptance_criteria_input, logs_chatbot]
+        outputs=[acceptance_criteria_output, logs_chatbot]
     )
     generate_initial_system_message_button.click(
         generate_initial_system_message,
@@ -804,16 +827,26 @@ with gr.Blocks(title='Meta Prompt') as demo:
         ],
         outputs=[output_output]
     )
-    copy_to_initial_system_message_button.click(
+    pull_task_description_output_button.click(
+        lambda x: x,
+        inputs=[description_output],
+        outputs=[initial_system_message_input]
+    )
+    pull_system_message_output_button.click(
         lambda x: x,
         inputs=[system_message_output],
         outputs=[initial_system_message_input]
     )
+    pull_acceptance_criteria_output_button.click(
+        lambda x: x,
+        inputs=[acceptance_criteria_output],
+        outputs=[acceptance_criteria_input]
+    )
 
     prompt_clear_button.add([selected_example_input, selected_example_output,
                              acceptance_criteria_input, initial_system_message_input, 
                              system_message_output, output_output,
-                             analysis_output, logs_chatbot])
+                             acceptance_criteria_output, analysis_output, logs_chatbot])
 
     prompt_submit_button.click(
         process_message_with_models,
@@ -846,7 +879,7 @@ with gr.Blocks(title='Meta Prompt') as demo:
             system_message_output,
             output_output,
             analysis_output,
-            acceptance_criteria_input,
+            acceptance_criteria_output,
             logs_chatbot
         ]
     )
@@ -854,8 +887,8 @@ with gr.Blocks(title='Meta Prompt') as demo:
     flagging_inputs = [
         selected_example_input,
         selected_example_output,
-        acceptance_criteria_input,
-        initial_system_message_input
+        # acceptance_criteria_input,
+        # initial_system_message_input
     ]
 
     # Configure flagging

app/gradio_meta_prompt_utils.py

@@ -632,9 +632,10 @@ def generate_examples_using_briefs(
             description, new_example_briefs, input_json, generating_batch_size
         )
         examples = [
-            [example["input"], example["output"]]
+            [str(example["input"]), str(example["output"])]
             for example in result["examples"]
         ]
+
         return examples
     except Exception as e:
         raise gr.Error(f"An error occurred: {str(e)}")
@@ -651,7 +652,7 @@ def generate_examples_from_description(
             description, input_json, generating_batch_size
         )
         examples = [
-            [example["input"], example["output"]] for example in result["examples"]
+            [str(example["input"]), str(example["output"])] for example in result["examples"]
         ]
         return examples
     except Exception as e:
@@ -761,6 +762,6 @@ def apply_suggestions(config, description, suggestions, examples, model_name, te
         model = initialize_llm(config, model_name, {'temperature': temperature, 'max_retries': 3})
         generator = TaskDescriptionGenerator(model)
         result = generator.update_description(input_json, description, suggestions)
-        return result["description"]
+        return result["description"], gr.update(choices=result["suggestions"], value=[])
     except Exception as e:
         raise gr.Error(f"An error occurred: {str(e)}")

guidelines/gradio.md

@@ -1,255 +1,133 @@
 # Gradio Framework Guideline
 
-## 1. Framework Overview
-Gradio is a Python library that allows you to quickly create web interfaces for machine learning models, APIs, and other data science projects. It provides a simple way to build interactive demos and prototypes without requiring extensive web development knowledge.
-
-Key features of Gradio include:
-- Easy creation of user interfaces for machine learning models
-- Automatic generation of input and output components based on function signatures
-- Built-in support for various data types, such as text, image, audio, and video
-- Customizable layout and styling options
-- Sharing and collaboration features for showcasing your work
-
-## 2. Installation and Setup
-To install Gradio, you can use pip, the Python package installer. Open a terminal and run the following command:
-
-```
-pip install gradio
-```
-
-To set up a new project using Gradio, create a new Python file and import the gradio library:
-
-```python
-import gradio as gr
-```
-
-## 3. Core Concepts
-Gradio revolves around the concept of creating "interfaces" for your functions or machine learning models. An interface is a web page that allows users to interact with your code by providing inputs and receiving outputs.
-
-The core components of a Gradio interface are:
-- Input components: Widgets that allow users to provide input data, such as text boxes, file uploads, or dropdown menus.
-- Output components: Elements that display the results of your function or model, such as text, images, or plots.
-- Function or model: The Python function or machine learning model that takes the input data, processes it, and returns the output data.
-
-## 4. Component Structure
-Gradio provides various components that you can use to build your interface. Here are some commonly used components:
-
-- `gr.Textbox`: A text input component that allows users to enter single-line or multi-line text.
-  - Example: `user_message_input = gr.Textbox(label="User Message", show_copy_button=True)`
-- `gr.Number`: A numeric input component that allows users to enter numbers with specified precision, minimum, maximum, and step values.
-  - Example: `recursion_limit_input = gr.Number(label="Recursion Limit", value=config.recursion_limit, precision=0, minimum=1, maximum=config.recursion_limit_max, step=1)`
-- `gr.Dropdown`: A dropdown component that allows users to select an option from a list of choices.
-  - Example: `simple_model_name_input = gr.Dropdown(label="Model Name", choices=config.llms.keys(), value=list(config.llms.keys())[0])`
-- `gr.Checkbox`: A checkbox component that allows users to toggle a boolean value.
-  - Example: `aggressive_exploration = gr.Checkbox(label="Aggressive Exploration", value=config.aggressive_exploration)`
-- `gr.Button`: A button component that triggers an event when clicked.
-  - Example: `simple_submit_button = gr.Button(value="Submit", variant="primary")`
-- `gr.ClearButton`: A button component that clears the specified components when clicked.
-  - Example: `simple_clear_button = gr.ClearButton([user_message_input, expected_output_input, acceptance_criteria_input, initial_system_message_input], value='Clear All')`
-- `gr.Chatbot`: A chatbot component that displays a conversation-like interface with bubbles for messages.
-  - Example: `logs_chatbot = gr.Chatbot(label='Messages', show_copy_button=True, layout='bubble', bubble_full_width=False, render_markdown=False)`
-- `gr.Accordion`: A component that allows you to group other components within an accordion-style collapsible section.
+## Best Practices
+
+When using Gradio, consider the following best practices:
+
+- Keep your interface simple and intuitive for users to understand and use.
+- Provide clear instructions and examples to guide users on how to interact with your interface.
+- Validate and sanitize user inputs to prevent unexpected behavior or security vulnerabilities.
+- Handle errors gracefully and provide informative error messages to users.
+- Optimize the performance of your interface by minimizing the number of components and using caching when appropriate.
+- Test your interface thoroughly with various inputs and edge cases to ensure its robustness.
+- Use `gr.File` for file uploads and downloads. The file to download should be prepared before being passed into `gr.File`.
   - Example:
     ```python
-    with gr.Accordion("Initial System Message & Acceptance Criteria", open=False):
-        # Components inside the accordion
+    json_file = gr.File(
+        label="Import/Export JSON", file_types=[".json"], type="filepath"
+    )
     ```
+- `gr.Dataframe` doesn't support deleting rows. 
+- Set `col_count` to `(x, 'fixed')` to make the column width fixed.
+  - Example:
+    ```python
+    input_df = gr.DataFrame(
+        label="Input Examples",
+        headers=["Input", "Output"],
+        datatype=["str", "str"],
+        row_count=(1, "dynamic"),
+        col_count=(2, "fixed"),
+    )
+    ```
+- Use `gr.Accordion` to hide advanced or optional settings that are not required for basic usage.
+  - Example:
+    ```python
+    with gr.Accordion("Advanced Settings", open=False):
+        gr.Slider(0, 100, 50, label="Slider")
+    ```
+- Use `gr.Tabs` and `gr.Tab` to organize related components into separate views.
+  - Example:
+    ```python
+    with gr.Tabs() as llm_tabs:
+        with gr.Tab('Simple') as simple_llm_tab:
+            ...
+        with gr.Tab('Advanced') as advanced_llm_tab:
+            ...
+    ```
+- Use `gr.Examples` to provide sample inputs for users to test the interface.
+  - Example:
+    ```python
+    gr.Examples(
+        examples=[
+            ["Hello, world!", "Hello, world!"],
+            ["Hello, world!", "Hello, world!"],
+        ],
+        inputs=["text", "text"],
+    )
+- Use `gr.Markdown` to display formatted text, including links and images.
+- Use `gr.ClearButton` to allow users to clear specific components or the entire interface.
+- Use the `@gr.render` decorator to create dynamic apps with a variable number of components and event listeners. 
+  - Example:
+    ```python
+    import gradio as gr
 
-## 5. UI Operations and Callbacks
-Gradio allows you to define callbacks and event handlers to respond to user interactions and perform actions. Here are some common UI operation scenarios and how to handle them:
-
-1. Button Click Events:
-   - Use the `click()` method on a button component to specify the function to be called when the button is clicked.
-   - Example: `generate_acceptance_criteria_button.click(generate_acceptance_criteria, inputs=[...], outputs=[...])`
-
-2. Tab Selection Events:
-   - Use the `select()` method on a tab component to specify the function to be called when the tab is selected.
-   - Example: `simple_llm_tab.select(on_model_tab_select)`
-
-3. Flagging and Saving Data:
-   - Use the `FlagMethod` class to define a flagging callback that saves data when a flag button is clicked.
-   - Example: `flag_method = FlagMethod(flagging_callback, "Flag", "")`
-   - Attach the flagging callback to the flag button using the `click()` method.
-   - Example: `flag_button.click(flag_method, inputs=flagging_inputs, outputs=flag_button, preprocess=False, queue=False, show_api=False)`
-
-4. Clearing Components:
-   - Use the `ClearButton` component to clear specified components when clicked.
-   - Example: `clear_logs_button = gr.ClearButton([logs_chatbot], value='Clear Logs')`
-
-5. Loading Examples:
-   - Use the `gr.Examples` component to load examples from a file and populate the specified input components.
-   - Example: `examples = gr.Examples(config.examples_path, inputs=[...])`
-
-## 6. State Management
-Gradio provides a way to manage the state of your interface across multiple function calls. You can use the `gr.State()` component to store and pass data between functions.
-
-Here's an example of using state management in Gradio:
-
-```python
-import gradio as gr
-
-def update_count(count):
-    return count + 1
-
-count_state = gr.State(0)
-
-iface = gr.Interface(fn=update_count, inputs=count_state, outputs=count_state)
-iface.launch()
-```
-
-In this example, we define an `update_count` function that takes a count as input and increments it by 1. We create a Gradio interface with a `gr.State()` component initialized with a value of 0. The `update_count` function is called each time the interface is used, updating the count state.
-
-## 7. Routing
-Gradio supports creating multi-page interfaces using the `gr.Blocks()` class. You can define multiple pages and navigate between them using buttons or links.
-
-Here's an example of creating a multi-page interface with Gradio:
-
-```python
-import gradio as gr
-
-with gr.Blocks() as demo:
-    with gr.Tab("Page 1"):
-        # Components for page 1
-        pass
-    with gr.Tab("Page 2"):
-        # Components for page 2
-        pass
-
-demo.launch()
-```
-
-In this example, we create a Gradio interface using `gr.Blocks()` and define two tabs using `gr.Tab()`. Each tab represents a separate page in the interface, and you can add components specific to each page.
-
-## 8. Data Fetching
-Gradio allows you to fetch data from external sources, such as APIs or databases, and use it in your interface. You can use the `gr.inputs.Textbox()` component to accept user input and pass it to a function that fetches the data.
-
-Here's an example of fetching data from an API using Gradio:
-
-```python
-import gradio as gr
-import requests
-
-def get_data(query):
-    response = requests.get(f"https://api.example.com/data?query={query}")
-    return response.json()
-
-iface = gr.Interface(fn=get_data, inputs="text", outputs="json")
-iface.launch()
-```
-
-In this example, we define a `get_data` function that takes a query as input, makes a GET request to an API endpoint, and returns the response data as JSON. We create a Gradio interface with a text input component and a JSON output component.
-
-## 9. Styling
-Gradio provides options to customize the styling of your interface. You can use CSS classes and inline styles to modify the appearance of components.
-
-Here's an example of styling components in Gradio:
-
-```python
-import gradio as gr
-
-iface = gr.Interface(
-    fn=lambda x: x,
-    inputs=gr.inputs.Textbox(lines=5, label="Enter text"),
-    outputs="text",
-    title="Text Analysis",
-    description="Enter text to analyze its sentiment.",
-    css=".gradio-container {background-color: #f0f0f0;}",
-)
-iface.launch()
-```
-
-In this example, we create a Gradio interface with a text input component and a text output component. We customize the styling by providing a CSS class `.gradio-container` to set the background color of the interface container.
-
-## 10. Performance Optimization
-To optimize the performance of your Gradio interface, you can consider the following techniques:
-- Minimize the number of input and output components to reduce the amount of data transferred between the client and server.
-- Use caching to store and reuse the results of expensive computations.
-- Implement pagination or lazy loading for large datasets to load data incrementally.
-- Utilize asynchronous processing for time-consuming tasks to keep the interface responsive.
-
-Here's an example of using caching in Gradio:
-
-```python
-import gradio as gr
-
-@gr.cache()
-def expensive_computation(x):
-    # Perform expensive computation
-    return result
-
-iface = gr.Interface(fn=expensive_computation, inputs="text", outputs="text")
-iface.launch()
-```
-
-In this example, we define an `expensive_computation` function and decorate it with `@gr.cache()` to enable caching. Gradio will store the results of the function for each unique input and reuse them when the same input is provided again, avoiding redundant computations.
-
-## 11. Testing
-Gradio provides a way to write unit tests for your interfaces using the `gr.test()` function. You can define test cases with input data and expected output data to verify the correctness of your functions or models.
-
-Here's an example of writing tests for a Gradio interface:
-
-```python
-import gradio as gr
-
-def greet(name):
-    return f"Hello, {name}!"
-
-iface = gr.Interface(fn=greet, inputs="text", outputs="text")
-
-tests = [
-    {"input": "Alice", "output": "Hello, Alice!"},
-    {"input": "Bob", "output": "Hello, Bob!"},
-]
-
-gr.test iface, tests
-```
-
-In this example, we define a `greet` function and create a Gradio interface. We then define a list of test cases, each specifying an input value and the expected output value. Finally, we use `gr.test()` to run the tests and verify that the interface produces the expected outputs for the given inputs.
+    with gr.Blocks() as demo:
+        input_text = gr.Textbox(label="input")
 
-## 12. Deployment
-Gradio interfaces can be easily deployed to various platforms, such as Hugging Face Spaces, Heroku, or your own server. Gradio provides built-in support for deploying interfaces to Hugging Face Spaces.
+        @gr.render(inputs=input_text)
+        def show_split(text):
+            if len(text) == 0:
+                gr.Markdown("## No Input Provided")
+            else:
+                for letter in text:
+                    gr.Textbox(letter)
 
-Here's an example of deploying a Gradio interface to Hugging Face Spaces:
+    demo.launch()
+    ```
+- When using `@gr.render`, set the `key` argument for each component to preserve its value between re-renders.
+  - Example:
+    ```python
+    import gradio as gr
 
-```python
-import gradio as gr
+    with gr.Blocks() as demo:
+        text_count = gr.State(1)
+        add_btn = gr.Button("Add Box")
+        add_btn.click(lambda x: x + 1, text_count, text_count)
 
-def greet(name):
-    return f"Hello, {name}!"
+        @gr.render(inputs=text_count)
+        def render_count(count):
+            boxes = []
+            for i in range(count):
+                box = gr.Textbox(key=i, label=f"Box {i}")
+                boxes.append(box)
 
-iface = gr.Interface(fn=greet, inputs="text", outputs="text")
+            def merge(*args):
+                return " ".join(args)
 
-iface.launch(share=True)
-```
+            merge_btn.click(merge, boxes, output)
 
-In this example, we create a Gradio interface and call `iface.launch(share=True)` to deploy the interface to Hugging Face Spaces. Gradio will generate a unique URL for your interface, allowing others to access and interact with it.
+    merge_btn = gr.Button("Merge")
+    output = gr.Textbox(label="Merged Output")
 
-## 13. Best Practices and Common Pitfalls
-When using Gradio, consider the following best practices and common pitfalls:
-- Keep your interface simple and intuitive for users to understand and use.
-- Provide clear instructions and examples to guide users on how to interact with your interface.
-- Validate and sanitize user inputs to prevent unexpected behavior or security vulnerabilities.
-- Handle errors gracefully and provide informative error messages to users.
-- Optimize the performance of your interface by minimizing the number of components and using caching when appropriate.
-- Test your interface thoroughly with various inputs and edge cases to ensure its robustness.
+    demo.launch()
+    ```
+- Update component attributes with `gr.update()` in the return statement of the event callback function.
+  - Example:
+    ```python
+    def update_output(text):
+        return gr.update(value=text)
+    ```
+- Use `gr.State` to maintain the state of your interface between re-renders, and to synchronize the updating of multiple components.
+  - Example:
+    ```python
+    import gradio as gr
+    
+    def on_state_change(state: gr.State):
+        return gr.update(visible=state.value), gr.update(visible=state.value)
+
+    with gr.Blocks() as demo:
+        text1 = gr.Textbox(label="Text 1")
+        text2 = gr.Textbox(label="Text 2")
+        state = gr.State(value=True)
+        state.change(on_state_change, state, [text1, text2])
+
+    demo.launch()
+    ```
+## Common pitfalls to avoid
 
-Common pitfalls to avoid:
 - Overloading the interface with too many components or complex layouts, leading to a confusing user experience.
 - Failing to handle edge cases or unexpected inputs, resulting in errors or incorrect outputs.
 - Neglecting to secure your interface against potential security risks, such as unauthorized access or malicious inputs.
 - Forgetting to optimize the performance of your interface, leading to slow response times or resource exhaustion.
-
-## 14. Community and Resources
-Gradio has a vibrant community and provides various resources to help you get started and learn more about the framework. Here are some useful links:
-- Gradio Documentation: https://gradio.app/docs/
-- Gradio GitHub Repository: https://github.com/gradio-app/gradio
-- Gradio Examples: https://gradio.app/examples/
-- Gradio Community Forum: https://discuss.huggingface.co/c/gradio/33
-- Gradio Twitter: https://twitter.com/gradio
-
-These resources provide documentation, examples, and a platform to engage with the Gradio community, ask questions, and share your projects.
-
-Remember to refer to the Gradio documentation for the most up-to-date information and advanced usage scenarios.
-
-Happy building with Gradio!
+- When using `@gr.render`, not setting the `key` argument for components, causing their values to be lost between re-renders.