Updated UI and guidelines.

app/streamlit_meta_prompt.py

@@ -466,8 +466,8 @@ if __name__ == "__main__":
         st.session_state.initial_system_message = ""
     if 'initial_acceptance_criteria' not in st.session_state:
         st.session_state.initial_acceptance_criteria = ""
-    if 'system_message' not in st.session_state:
-        st.session_state.system_message = ""
+    if 'system_message_output' not in st.session_state:
+        st.session_state.system_message_output = ""
     if 'output' not in st.session_state:  
         st.session_state.output = ""
     if 'analysis' not in st.session_state:
@@ -485,6 +485,10 @@ if __name__ == "__main__":
         if 'acceptance_criteria_output' in st.session_state:
             st.session_state.initial_acceptance_criteria = st.session_state.acceptance_criteria_output
 
+    def clear_session_state():
+        for key in st.session_state.keys():
+            del st.session_state[key]
+
     if active_model_tab == "Simple":
         simple_model_name = simple_model_name_input
         advanced_executor_model_name = None
@@ -527,19 +531,35 @@ if __name__ == "__main__":
     max_output_age = max_output_age_input
     aggressive_exploration = aggressive_exploration_input
 
+    data_editor_data = st.data_editor(
+        [{"user_message": "", "expected_output": ""}],
+        column_config={
+            "user_message": st.column_config.TextColumn("User Message"),
+            "expected_output": st.column_config.TextColumn("Expected Output"),
+        },
+        hide_index=True,
+        use_container_width=True,
+    )
+
     col1, col2 = st.columns(2)
 
     with col1:
-        user_message = st.text_area("User Message", "").strip()
-        expected_output = st.text_area("Expected Output", "").strip()
-        initial_system_message = st.text_area("Initial System Message", st.session_state.initial_system_message).strip()
-        acceptance_criteria = st.text_area("Acceptance Criteria", st.session_state.initial_acceptance_criteria).strip()
+        with st.expander("Advanced Inputs"):
+            initial_system_message = st.text_area("Initial System Message", st.session_state.initial_system_message).strip()
+            acceptance_criteria = st.text_area("Acceptance Criteria", st.session_state.initial_acceptance_criteria).strip()
         
-        generate_button_clicked = st.button("Generate", type="primary")
+        col1_1, col1_2 = st.columns(2)
+        with col1_1:
+            generate_button_clicked = st.button("Generate", type="primary")
+        with col1_2:
+            clear_button_clicked = st.button("Clear", on_click=clear_session_state)
 
     with col2:
         if generate_button_clicked:
             try:
+                user_message = data_editor_data[0]["user_message"].strip()
+                expected_output = data_editor_data[0]["expected_output"].strip()
+
                 if active_model_tab == "Simple":
                     system_message, output, analysis, acceptance_criteria, chat_log = process_message_with_single_llm(
                         user_message,
@@ -604,10 +624,11 @@ if __name__ == "__main__":
                      key="system_message_output", height=100)
         st.button("Copy System Message", key="copy_system_message",
                   on_click=copy_system_message)
-        st.text_area("Output", st.session_state.output, height=100)
-        st.text_area("Analysis", st.session_state.analysis, height=100)
         acceptance_criteria_output = st.text_area(
             "Acceptance Criteria", key="acceptance_criteria_output", height=100)
         st.button("Copy Acceptance Criteria", key="copy_acceptance_criteria",
                   on_click=copy_acceptance_criteria)
+        st.text_area("Output", st.session_state.output, height=100)
+        st.text_area("Analysis", st.session_state.analysis, height=100)
+
         st.json(st.session_state.chat_log)

guidelines/gradio.md

@@ -1,29 +1,255 @@
-# Gradio Development Guidelines
-
-## Best Practices
-
-- Use `gr.Blocks` to create a structured UI layout with rows, columns, tabs, and accordions.
-- Organize related UI elements into groups using `gr.Group` for better readability and maintainability.
-- Provide clear labels and instructions for user inputs and interactions using `gr.Markdown` and `gr.Textbox`.
-- Use `gr.Dropdown` to allow users to select from a predefined list of options.
-- Implement buttons with `gr.Button` and assign appropriate callbacks using the `click` event.
-- Use `gr.Examples` to provide sample inputs for users to quickly test the app's functionality.
-- Handle file uploads and downloads using `gr.FileUpload` and `gr.FileDownload`.
-- Display output using appropriate components like `gr.Textbox`, `gr.Chatbot`, `gr.Dataframe`, etc.
-- Implement flagging functionality to allow users to report issues or provide feedback.
-- Use `gr.Accordion` to hide detailed information that may not be necessary for all users.
-- Provide a clear and concise title for the app using the `title` parameter in `gr.Blocks`.
-- Use `gr.ClearButton` to allow users to reset input fields and start over.
-
-## Principles
-
-- Prioritize usability and user experience in the app's design and layout.
-- Ensure the app is responsive and works well on different screen sizes and devices.
-- Optimize performance by minimizing unnecessary computations and caching results when possible.
-- Follow PEP 8 style guidelines for Python code.
-- Document the app's purpose, usage instructions, and code to enhance maintainability.
-- Test the app thoroughly to identify and fix bugs, edge cases, and performance issues.
-- Consider accessibility and ensure the app can be used by people with different abilities.
-- Provide clear feedback to users about the app's status and results.
-- Allow users to customize the app's behavior through settings and options.
-- Design the app to be modular and extensible, allowing for future enhancements and new features.
+# 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.
+  - Example:
+    ```python
+    with gr.Accordion("Initial System Message & Acceptance Criteria", open=False):
+        # Components inside the accordion
+    ```
+
+## 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.
+
+## 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.
+
+Here's an example of deploying a Gradio interface to Hugging Face Spaces:
+
+```python
+import gradio as gr
+
+def greet(name):
+    return f"Hello, {name}!"
+
+iface = gr.Interface(fn=greet, inputs="text", outputs="text")
+
+iface.launch(share=True)
+```
+
+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.
+
+## 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.
+
+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!
+

guidelines/streamlit.md

@@ -1,30 +1,643 @@
-# Streamlit Development Guidelines
-
-## Best Practices
-
-- Use `st.session_state` to store and share data across the app, such as input data, output results, and UI state.
-- Organize code into functions for better readability and maintainability. 
-- Use `st.expander` to group related UI elements and allow users to collapse/expand sections.
-- Provide options for users to import/export data, such as using `st.file_uploader` and `st.download_button`.
-- Use `st.columns` to create responsive layouts and align UI elements.
-- Provide clear labels and instructions for user inputs and interactions.
-- Handle exceptions and display user-friendly error messages using `st.warning`.
-- Use `st.spinner` to indicate when long-running operations are in progress.
-- Allow users to customize and control the app's behavior through widgets like `st.slider`, `st.selectbox`, etc.
-- Use `st.dataframe` to display interactive tables, with features like row selection.
-- Implement callbacks using `on_click` or `on_change` to respond to user interactions.
-- Use `st.sidebar` to display additional information or controls without cluttering the main UI.
-- Organize the app's UI elements in a logical order, grouping related functionality together.
-
-## Principles
-
-- Prioritize usability and user experience in the app's design and layout.
-- Ensure the app is responsive and works well on different screen sizes.
-- Optimize performance by minimizing unnecessary computations and caching results when possible.
-- Follow PEP 8 style guidelines for Python code.
-- Document the app's purpose, usage instructions, and code to enhance maintainability.
-- Test the app thoroughly to identify and fix bugs, edge cases, and performance issues.
-- Consider accessibility and ensure the app can be used by people with different abilities.
-- Provide clear feedback to users about the app's status and results.
-- Allow users to customize the app's behavior through settings and options.
-- Design the app to be modular and extensible, allowing for future enhancements and new features.
+# Streamlit Guideline
+
+## 1. Framework Overview
+
+### Introduction to Streamlit
+Streamlit is an open-source app framework specifically designed for Machine Learning and Data Science teams. It allows developers to create web apps for their data projects quickly and efficiently using Python scripting. Streamlit's key features include its simplicity, ease of use, and the ability to build and deploy apps rapidly.
+
+### Key Features
+- **Simplicity**: Streamlit's API is designed to be intuitive and easy to use, making it accessible for both beginners and experienced developers.
+- **Rapid Development**: With Streamlit, you can go from idea to app in minutes, thanks to its reactive programming model.
+- **Python-Centric**: Streamlit leverages Python for all the coding, making it a favorite among data scientists and ML engineers.
+- **Rich Widgets**: Streamlit provides a variety of widgets like sliders, buttons, and text inputs, which enhance user interaction with the app.
+
+### Advantages
+- **No Frontend Experience Required**: Developers can focus on Python scripting without needing to learn HTML, CSS, or JavaScript.
+- **Automatic UI Updates**: Streamlit automatically updates the web app when the script is modified, facilitating rapid prototyping.
+- **Seamless Integration**: It integrates well with other Python libraries and tools commonly used in data science and ML.
+
+## 2. Installation and Setup
+
+### Step-by-Step Installation
+1. **Install Streamlit**: Open your terminal and run the following command to install Streamlit using pip:
+   ```bash
+   pip install streamlit
+   ```
+2. **Verify Installation**: To ensure Streamlit is installed correctly, run:
+   ```bash
+   streamlit hello
+   ```
+   This command will open a sample app in your default web browser.
+
+### Setting Up a New Project
+1. **Create a New Directory**:
+   ```bash
+   mkdir my_streamlit_app
+   cd my_streamlit_app
+   ```
+2. **Create a Python Script**: Create a new Python file, e.g., `app.py`.
+3. **Write Your First App**: Open `app.py` in your favorite text editor and add the following lines:
+   ```python
+   import streamlit as st
+
+   st.title("My First Streamlit App")
+   st.write("Hello, world!")
+   ```
+4. **Run Your App**: In the terminal, run:
+   ```bash
+   streamlit run app.py
+   ```
+   This command will start a local web server and open your app in the browser.
+
+### Prerequisites and Dependencies
+- **Python**: Ensure Python 3.6 or later is installed on your system.
+- **Pip**: Pip should be installed to manage Python packages.
+
+## 3. Core Concepts
+
+### Fundamental Concepts and Principles
+- **Reactive Programming**: Streamlit follows a reactive programming model where changes in the script automatically update the app.
+- **Widgets**: Streamlit provides various widgets (e.g., sliders, buttons, text inputs) to interact with the app.
+- **Layouts and Containers**: Streamlit allows you to organize your app's layout using columns, containers, and expanders.
+
+### Architecture and Design Patterns
+- **Single-Page App**: Streamlit apps are typically single-page applications where the entire app runs within a single HTML page.
+- **State Management**: Streamlit manages the state of the app automatically, but you can use session state for more complex state management.
+
+## 4. Component Structure
+
+### Creating and Structuring Components
+
+Streamlit provides a variety of components to build interactive web applications. These components range from simple text displays to complex widgets that allow user input. Understanding how to structure and use these components is crucial for building effective Streamlit apps.
+
+Here is the list of components with brief descriptions, examples, and links to the reference page:
+
+### Basic Components
+
+* `st.title()`: Display a title.
+	+ Example: `st.title("My Streamlit App")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/text/st.title)
+* `st.header()`: Display a header.
+	+ Example: `st.header("Welcome to My App")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/text/st.header)
+* `st.subheader()`: Display a subheader.
+	+ Example: `st.subheader("This is a subheader")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/text/st.subheader)
+* `st.text()`: Display fixed-width text.
+	+ Example: `st.text("Some fixed-width text")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/text/st.text)
+* `st.markdown()`: Render markdown text.
+	+ Example: `st.markdown("**Bold** and *italic* text")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/text/st.markdown)
+* `st.latex()`: Display mathematical expressions formatted as LaTeX.
+	+ Example: `st.latex(r"\alpha + \beta = \gamma")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/text/st.latex)
+* `st.write()`: Write a generic piece of text or data.
+	+ Example: `st.write("Here's a dataframe:", df)`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/write-magic/st.write)
+* `st.dataframe()`: Display a dataframe.
+	+ Example: `st.dataframe(df)`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/data/st.dataframe)
+* `st.table()`: Display a static table.
+	+ Example: `st.table(df)`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/data/st.table)
+* `st.json()`: Display JSON data.
+	+ Example: `st.json(df.to_json())`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/data/st.json)
+* `st.button()`: Create a button.
+	+ Example: `if st.button("Click me"): st.write("Button clicked!")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.button)
+* `st.checkbox()`: Create a checkbox.
+	+ Example: `agree = st.checkbox("I agree")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.checkbox)
+* `st.radio()`: Create a radio button group.
+	+ Example: `option = st.radio("Choose an option", ["Option 1", "Option 2"])`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.radio)
+* `st.selectbox()`: Create a select box.
+	+ Example: `choice = st.selectbox("Select an option", ["A", "B", "C"])`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.selectbox)
+* `st.multiselect()`: Create a multiselect box.
+	+ Example: `multi_choices = st.multiselect("Choose multiple options", ["X", "Y", "Z"])`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.multiselect)
+* `st.slider()`: Create a slider.
+	+ Example: `value = st.slider("Select a value", 0, 100, 50)`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.slider)
+* `st.text_input()`: Create a text input box.
+	+ Example: `text = st.text_input("Enter some text")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.text_input)
+* `st.number_input()`: Create a number input box.
+	+ Example: `number = st.number_input("Enter a number")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.number_input)
+* `st.date_input()`: Create a date input box.
+	+ Example: `date = st.date_input("Select a date")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.date_input)
+* `st.time_input()`: Create a time input box.
+	+ Example: `time = st.time_input("Select a time")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.time_input)
+* `st.file_uploader()`: Allow file uploads.
+	+ Example: `file = st.file_uploader("Upload a file")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.file_uploader)
+
+### Layout Components
+
+* `st.sidebar()`: Add content to the sidebar.
+	+ Example: `st.sidebar.title("Sidebar Title")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/layout/st.sidebar)
+* `st.columns()`: Create columns for layout.
+	+ Example: `col1, col2 = st.columns(2)`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/layout/st.columns)
+* `st.expander()`: Create an expandable container.
+	+ Example: `with st.expander("Click to expand"): st.write("Expanded content")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/layout/st.expander)
+* `st.container()`: Insert a multi-element container.
+	+ Example: `c = st.container()`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/layout/st.container)
+* `st.empty()`: Insert a single-element container.
+	+ Example: `c = st.empty()`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/layout/st.empty)
+* `st.tabs()`: Insert containers separated into tabs.
+	+ Example: `tab1, tab2 = st.tabs(["Tab 1", "Tab 2"])`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/layout/st.tabs)
+
+### Status Components
+
+* `st.progress()`: Display a progress bar.
+	+ Example: `with st.progress(100): do_something()`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/status/st.progress)
+* `st.spinner()`: Display a spinning wheel.
+	+ Example: `with st.spinner("Wait for it..."): do_something()`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/status/st.spinner)
+* `st.success()`: Display a success message.
+	+ Example: `st.success("Done!")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/status/st.success)
+* `st.error()`: Display an error message.
+	+ Example: `st.error("Error message")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/status/st.error)
+* `st.warning()`: Display a warning message.
+	+ Example: `st.warning("Warning message")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/status/st.warning)
+* `st.info()`: Display an info message.
+	+ Example: `st.info("Info message")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/status/st.info)
+* `st.exception()`: Display an exception message.
+	+ Example: `st.exception("Exception message")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/status/st.exception)
+* `st.stop()`: Stop the app.
+	+ Example: `st.stop()`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/status/st.stop)
+
+### Navigation Components
+
+* `st.page_link()`: Display a link to another page in a multipage app.
+	+ Example: `st.page_link("app.py", label="Home", icon="🏠")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/widgets/st.page_link)
+* `st.navigation()`: Configure the available pages in a multipage app.
+	+ Example: `st.navigation({"Your account": [log_out, settings]})`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/navigation/st.navigation)
+* `st.page()`: Define a page in a multipage app.
+	+ Example: `home = st.Page("home.py", title="Home", icon="🏠")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/navigation/st.page)
+* `st.switch_page()`: Programmatically navigate to a specified page.
+	+ Example: `st.switch_page("pages/my_page.py")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/navigation/st.switch_page)
+
+### Execution Flow Components
+
+* `st.form()`: Create a form that batches elements together with a “Submit” button.
+	+ Example: `with st.form(key="my_form"): name = st.text_input("Name")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/execution-flow/st.form)
+* `st.form_submit_button()`: Create a form submit button.
+	+ Example: `st.form_submit_button("Sign up")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/execution-flow/st.form_submit_button)
+* `st.dialog()`: Insert a modal dialog that can rerun independently from the rest of the script.
+	+ Example: `@st.dialog("Sign up") def email_form(): name = st.text_input("Name")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/execution-flow/st.dialog)
+* `st.fragment()`: Define a fragment to rerun independently from the rest of the script.
+	+ Example: `@st.fragment(run_every="10s") def fragment(): df = get_data()`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/execution-flow/st.fragment)
+* `st.rerun()`: Rerun the script immediately.
+	+ Example: `st.rerun()`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/execution-flow/st.rerun)
+* `st.stop()`: Stop the app.
+	+ Example: `st.stop()`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/execution-flow/st.stop)
+
+### Caching and State Components
+
+* `st.cache_data()`: Function decorator to cache functions that return data.
+	+ Example: `@st.cache_data def long_function(param1, param2): return data`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/caching-and-state/st.cache_data)
+* `st.cache_resource()`: Function decorator to cache functions that return global resources.
+	+ Example: `@st.cache_resource def init_model(): return pipeline("sentiment-analysis", model="distilbert-base-uncased-finetuned-sst-2-english")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/caching-and-state/st.cache_resource)
+* `st.session_state()`: Session state is a way to share variables between reruns, for each user session.
+	+ Example: `st.session_state["key"] = value`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/caching-and-state/st.session_state)
+* `st.query_params()`: Get, set, or clear the query parameters that are shown in the browser's URL bar.
+	+ Example: `st.query_params["key"] = value`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/caching-and-state/st.query_params)
+
+### Utilities Components
+
+* `st.context()`: st.context provides a read-only interface to access cookies and headers.
+	+ Example: `st.context.cookies`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/utilities/st.context)
+* `st.help()`: Display object’s doc string, nicely formatted.
+	+ Example: `st.help(st.write)`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/utilities/st.help)
+* `st.html()`: Renders HTML strings to your app.
+	+ Example: `st.html("<p>Foo bar.</p>")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/utilities/st.html)
+* `st.experimental_user()`: st.experimental_user returns information about the logged-in user of private apps on Streamlit Community Cloud.
+	+ Example: `if st.experimental_user.email == "[email protected]": st.write("Welcome back,", st.experimental_user.email)`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/utilities/st.experimental_user)
+
+### Testing Components
+
+* `st.testing.v1.AppTest`: Simulates a running Streamlit app for testing.
+	+ Example: `at = AppTest.from_file("streamlit_app.py")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/st.testing.v1.apptest)
+* `st.testing.v1.ElementTree`: A representation of container elements.
+	+ Example: `at.sidebar`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreeblock)
+* `st.testing.v1.Block`: A representation of container elements.
+	+ Example: `at.sidebar`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreeblock)
+* `st.testing.v1.Element`: The base class for representation of all elements.
+	+ Example: `at.title`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreeelement)
+* `st.testing.v1.Button`: A representation of st.button and st.form_submit_button.
+	+ Example: `at.button`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreebutton)
+* `st.testing.v1.ChatInput`: A representation of st.chat_input.
+	+ Example: `at.chat_input`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreechatinput)
+* `st.testing.v1.Checkbox`: A representation of st.checkbox.
+	+ Example: `at.checkbox`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreecheckbox)
+* `st.testing.v1.ColorPicker`: A representation of st.color_picker.
+	+ Example: `at.color_picker`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreecolorpicker)
+* `st.testing.v1.DateInput`: A representation of st.date_input.
+	+ Example: `at.date_input`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreedateinput)
+* `st.testing.v1.Multiselect`: A representation of st.multiselect.
+	+ Example: `at.multiselect`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreemultiselect)
+* `st.testing.v1.NumberInput`: A representation of st.number_input.
+	+ Example: `at.number_input`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreenumberinput)
+* `st.testing.v1.Radio`: A representation of st.radio.
+	+ Example: `at.radio`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreeradio)
+* `st.testing.v1.SelectSlider`: A representation of st.select_slider.
+	+ Example: `at.select_slider`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreeselectslider)
+* `st.testing.v1.Selectbox`: A representation of st.selectbox.
+	+ Example: `at.selectbox`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreeselectbox)
+* `st.testing.v1.Slider`: A representation of st.slider.
+	+ Example: `at.slider`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreeslider)
+* `st.testing.v1.TextArea`: A representation of st.text_area.
+	+ Example: `at.text_area`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreetextarea)
+* `st.testing.v1.TextInput`: A representation of st.text_input.
+	+ Example: `at.text_input`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreetextinput)
+* `st.testing.v1.TimeInput`: A representation of st.time_input.
+	+ Example: `at.time_input`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreetimeinput)
+* `st.testing.v1.Toggle`: A representation of st.toggle.
+	+ Example: `at.toggle`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/app-testing/testing-element-classes#sttestingv1element%5Ftreetoggle)
+
+### Custom Components
+
+* `st.components.v1.declare_component()`: Create and register a custom component.
+	+ Example: `declare_component("custom_slider", "/frontend")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/custom-components/st.components.v1.declare_component)
+* `st.components.v1.html()`: Display an HTML string in an iframe.
+	+ Example: `html("<p>Foo bar.</p>")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/custom-components/st.components.v1.html)
+* `st.components.v1.iframe()`: Load a remote URL in an iframe.
+	+ Example: `iframe("docs.streamlit.io")`
+	+ [Reference](https://docs.streamlit.io/develop/api-reference/custom-components/st.components.v1.iframe)
+    
+### Examples of Different Types of Components
+
+#### Functional Components
+Functional components are straightforward and used for displaying static content.
+
+```python
+st.title("Welcome to My App")
+st.header("Main Features")
+st.subheader("Feature 1")
+st.text("This is a description of feature 1.")
+st.markdown("**Feature 2** is also important.")
+```
+
+#### Stateful Components
+Stateful components involve user interaction and can change based on user input.
+
+```python
+if 'count' not in st.session_state:
+    st.session_state.count = 0
+
+def increment_counter():
+    st.session_state.count += 1
+
+st.button('Increment', on_click=increment_counter)
+st.write('Count:', st.session_state.count)
+```
+
+### Lifecycle Methods or Hooks
+
+Streamlit does not have traditional lifecycle methods like React, but you can use callbacks and session state to manage component behavior.
+
+```python
+if 'count' not in st.session_state:
+    st.session_state.count = 0
+
+def increment_counter():
+    st.session_state.count += 1
+
+st.button('Increment', on_click=increment_counter)
+st.write('Count:', st.session_state.count)
+```
+
+## 5. UI Operations and Callbacks
+
+### Handling User Interactions and Events
+
+User interactions are a core part of any interactive web application. Streamlit provides various widgets to capture user input and trigger actions based on these inputs.
+
+#### Button Clicks
+Buttons are used to trigger actions. You can use the `on_click` parameter to define a callback function.
+
+```python
+if st.button('Click Me'):
+    st.write('Button Clicked!')
+```
+
+#### Form Submissions
+Forms are used to group related inputs and can be submitted together.
+
+```python
+with st.form(key='my_form'):
+    text_input = st.text_input(label='Enter some text')
+    submit_button = st.form_submit_button(label='Submit')
+
+if submit_button:
+    st.write(f'You entered: {text_input}')
+```
+
+#### Checkboxes
+Checkboxes are used to capture boolean inputs.
+
+```python
+agree = st.checkbox("I agree")
+if agree:
+    st.write("Great! You agreed.")
+```
+
+#### Radio Buttons
+Radio buttons allow users to select one option from a set.
+
+```python
+option = st.radio("Choose an option", ["Option 1", "Option 2"])
+st.write("You selected:", option)
+```
+
+#### Select Boxes
+Select boxes allow users to select one option from a dropdown.
+
+```python
+choice = st.selectbox("Select an option", ["A", "B", "C"])
+st.write("You selected:", choice)
+```
+
+#### Multiselect Boxes
+Multiselect boxes allow users to select multiple options.
+
+```python
+multi_choices = st.multiselect("Choose multiple options", ["X", "Y", "Z"])
+st.write("You selected:", multi_choices)
+```
+
+#### Sliders
+Sliders allow users to select a value from a range.
+
+```python
+value = st.slider("Select a value", 0, 100, 50)
+st.write("You selected:", value)
+```
+
+#### Text Inputs
+Text inputs allow users to enter text.
+
+```python
+text = st.text_input("Enter some text")
+st.write("You entered:", text)
+```
+
+#### Number Inputs
+Number inputs allow users to enter numeric values.
+
+```python
+number = st.number_input("Enter a number")
+st.write("You entered:", number)
+```
+
+#### Date and Time Inputs
+Date and time inputs allow users to select dates and times.
+
+```python
+date = st.date_input("Select a date")
+st.write("You selected:", date)
+
+time = st.time_input("Select a time")
+st.write("You selected:", time)
+```
+
+#### File Uploaders
+File uploaders allow users to upload files.
+
+```python
+file = st.file_uploader("Upload a file")
+if file is not None:
+    st.write("File uploaded:", file.name)
+```
+
+### Implementing and Using Callbacks
+
+Callbacks are functions that are called when a specific event occurs, such as a button click or form submission. Streamlit allows you to define callbacks using the `on_click` and `on_change` parameters.
+
+#### Callbacks with Session State
+Callbacks can be used to update the session state, allowing you to manage state across reruns of the app.
+
+```python
+if 'count' not in st.session_state:
+    st.session_state.count = 0
+
+def increment_counter():
+    st.session_state.count += 1
+
+st.button('Increment', on_click=increment_counter)
+st.write('Count:', st.session_state.count)
+```
+
+#### Callbacks with Forms
+Callbacks can also be used with forms to handle form submissions.
+
+```python
+with st.form(key='my_form'):
+    text_input = st.text_input(label='Enter some text')
+    submit_button = st.form_submit_button(label='Submit')
+
+if submit_button:
+    st.write(f'You entered: {text_input}')
+```
+
+#### Callbacks with Widgets
+Callbacks can be used with various widgets to handle user interactions.
+
+```python
+def on_change():
+    st.write(f'Value changed to: {st.session_state.slider_value}')
+
+st.slider('Select a value', 0, 100, key='slider_value', on_change=on_change)
+```
+
+By leveraging these components and callbacks, you can create interactive and dynamic Streamlit applications that respond to user inputs and actions.
+
+## 6. State Management
+
+### Framework's Approach to State Management
+- **Session State**: Streamlit provides a session state API to manage state across reruns of the app.
+- **Example**:
+  ```python
+  if 'count' not in st.session_state:
+      st.session_state.count = 0
+
+  def increment_counter():
+      st.session_state.count += 1
+
+  st.button('Increment', on_click=increment_counter)
+  st.write('Count:', st.session_state.count)
+  ```
+
+## 7. Routing
+
+### Routing System
+- Streamlit does not have a traditional routing system like React Router. All navigation is handled within the single-page app.
+
+## 8. Data Fetching
+
+### Fetching and Handling Data from APIs
+- **Example**:
+  ```python
+  import requests
+
+  response = requests.get('https://api.example.com/data')
+  data = response.json()
+  st.write(data)
+  ```
+
+### Error Handling and Loading States
+- **Error Handling**:
+  ```python
+  try:
+      response = requests.get('https://api.example.com/data')
+      response.raise_for_status()
+      data = response.json()
+      st.write(data)
+  except requests.exceptions.HTTPError as err:
+      st.error(f'Error fetching data: {err}')
+  ```
+- **Loading States**:
+  ```python
+  with st.spinner('Loading...'):
+      response = requests.get('https://api.example.com/data')
+      data = response.json()
+      st.write(data)
+  ```
+
+## 9. Styling
+
+### Recommended Approaches for Styling Components
+- **Custom CSS**: Streamlit allows custom CSS for styling.
+- **Example**:
+  ```python
+  st.markdown(
+      """
+      <style>
+      .stButton > button {
+          color: white;
+          background-color: red;
+      }
+      </style>
+      """,
+      unsafe_allow_html=True
+  )
+  ```
+
+### Implementing Responsive Design
+- Streamlit provides built-in responsive design features through its layout components (e.g., columns, containers).
+
+## 10. Performance Optimization
+
+### Guidelines for Optimizing Performance
+- **Caching**: Use Streamlit's caching mechanisms to optimize performance.
+- **Example**:
+  ```python
+  @st.cache
+  def fetch_data():
+      response = requests.get('https://api.example.com/data')
+      return response.json()
+
+  data = fetch_data()
+  st.write(data)
+  ```
+
+## 11. Testing
+
+### Recommended Testing Methodologies
+- **Unit Testing**: Use Python's unittest or pytest frameworks for unit testing.
+- **Integration Testing**: Streamlit apps can be tested using Selenium or other browser automation tools.
+
+## 12. Deployment
+
+### Building and Deploying Applications
+- **Streamlit Sharing**: Streamlit provides a free hosting service called Streamlit Sharing.
+- **Docker**: You can also deploy Streamlit apps using Docker.
+
+## 13. Best Practices and Common Pitfalls
+
+### Best Practices
+- **Modular Code**: Organize your code into modular functions and files.
+- **Consistent Styling**: Use custom CSS for consistent styling across the app.
+- **Error Handling**: Implement robust error handling for data fetching and user inputs.
+
+### Common Pitfalls
+- **Overusing Session State**: Avoid overusing session state for simple state management.
+- **Performance Issues**: Be mindful of performance issues, especially with large datasets.
+
+## 14. Community and Resources
+
+### Links to Official Documentation, Community Forums, and Helpful Resources
+- **Official Documentation**: [Streamlit Documentation](https://docs.streamlit.io/)
+- **Community Forum**: [Streamlit Forum](https://discuss.streamlit.io/)
+- **GitHub Repository**: [Streamlit GitHub](https://github.com/streamlit/streamlit)
+
+### Popular Tools, Extensions, and Libraries
+- **Streamlit Components**: [Streamlit Components](https://streamlit.io/components)
+- **Awesome Streamlit**: [Awesome Streamlit](https://awesome-streamlit.org/)
+
+### Notable Community Projects
+- **Streamlit Gallery**: [Streamlit Gallery](https://streamlit.io/gallery)
+- **Streamlit Cheat Sheet**: [Streamlit Cheat Sheet](https://share.streamlit.io/daniellewisdl/streamlit-cheat-sheet/app.py)
+
+## Conclusion
+
+This guideline provides a comprehensive overview of Streamlit, covering its installation, core concepts, component structure, UI operations, state management, data fetching, styling, performance optimization, testing, deployment, best practices, and community resources. By following this guide, developers can effectively utilize Streamlit to create efficient and interactive web applications for data science and machine learning projects.