Add code for data analysis

.gitignore

@@ -21,6 +21,7 @@ dist
 wandb
 output
 checkpoints_flant5_3b
+.gradio/certificate.pem
 
 # Data
 *.pkl

README.md

@@ -38,6 +38,15 @@ FastChat's core features include:
 - [Fine-tuning](#fine-tuning)
 - [Citation](#citation)
 
+----
+
+For Software Areana, please follow the following extra steps:
+1. Set your E2B API Key: `export E2B_API_KEY=<YOUR_API_KEY>`
+2. Custom Component Build: Follow https://www.gradio.app/guides/custom-components-in-five-minutes to set up environment. Go into `custom_components/sandboxcomponent` and run `gradio cc install`, `gradio cc build`.
+3.  Use `pip install custom_components/sandboxcomponent/dist/gradio_sandboxcomponent-xxx-py3-none-any.whl` to install the custom components.
+
+----
+
 ## Install
 
 ### Method 1: With pip

analysis/replicate_traj.py

@@ -0,0 +1,79 @@
+import json
+import time
+from datetime import datetime
+from selenium import webdriver
+from selenium.webdriver.common.action_chains import ActionChains
+from selenium.webdriver.common.keys import Keys
+from selenium.webdriver.common.by import By
+import os
+
+def parse_timestamp(ts_str):
+    return datetime.fromisoformat(ts_str.replace('Z', '+00:00')).timestamp()
+
+def replay_interactions(json_file):
+    # Read interaction data
+    with open(json_file, 'r') as f:
+        data = json.load(f)
+
+    # Setup webdriver
+    driver = webdriver.Chrome()
+    actions = ActionChains(driver)
+
+    # Create screenshots directory
+    screenshots_dir = "interaction_screenshots"
+    os.makedirs(screenshots_dir, exist_ok=True)
+
+    try:
+        # Navigate to the sandbox URL
+        driver.get(data['sandboxUrl'])
+
+        # Initial pause to let page load
+        time.sleep(2)
+
+        # Take initial screenshot
+        driver.save_screenshot(os.path.join(screenshots_dir, "000_initial.png"))
+
+        # Process each interaction
+        prev_time = None
+        for idx, interaction in enumerate(data['userInteractionRecords'], 1):
+            current_time = parse_timestamp(interaction['time'])
+
+            # Wait appropriate time between actions
+            if prev_time is not None:
+                time_diff = current_time - prev_time
+                if time_diff > 0:
+                    time.sleep(time_diff)
+
+            # Replay the interaction
+            if interaction['type'] == 'resize':
+                driver.set_window_size(interaction['width'], interaction['height'])
+
+            elif interaction['type'] == 'scroll':
+                driver.execute_script(
+                    f"window.scrollTo({interaction['scrollLeft']}, {interaction['scrollTop']});"
+                )
+
+            elif interaction['type'] == 'click':
+                actions.move_by_offset(interaction['x'], interaction['y']).click().perform()
+                actions.reset_actions()
+
+            elif interaction['type'] == 'keydown':
+                actions.send_keys(interaction['key']).perform()
+                actions.reset_actions()
+
+            # Take screenshot after action
+            screenshot_name = f"{idx:03d}_{interaction['type']}.png"
+            driver.save_screenshot(os.path.join(screenshots_dir, screenshot_name))
+
+            prev_time = current_time
+
+        # Final pause and screenshot
+        time.sleep(2)
+        driver.save_screenshot(os.path.join(screenshots_dir, "final.png"))
+
+    finally:
+        driver.quit()
+        print(f"Screenshots saved in {screenshots_dir}/")
+
+if __name__ == "__main__":
+    replay_interactions('userInteractions.json')

custom_components/sandboxcomponent/.gitignore

@@ -0,0 +1,12 @@
+.eggs/
+dist/
+*.pyc
+__pycache__/
+*.py[cod]
+*$py.class
+__tmp/*
+*.pyi
+.mypycache
+.ruff_cache
+node_modules
+backend/**/templates/

custom_components/sandboxcomponent/README.md

@@ -0,0 +1,252 @@
+
+# `gradio_sandboxcomponent`
+<a href="https://pypi.org/project/gradio_sandboxcomponent/" target="_blank"><img alt="PyPI - Version" src="https://img.shields.io/pypi/v/gradio_sandboxcomponent"></a>  
+
+Gradio library for easily interacting with remote sandbox.
+
+## Installation
+
+```bash
+pip install gradio_sandboxcomponent
+```
+
+## Usage
+
+```python
+
+import gradio as gr
+from gradio_sandboxcomponent import SandboxComponent
+
+example = SandboxComponent().example_value()
+
+
+with gr.Blocks() as demo:
+    with gr.Tab("Sandbox Demo"):
+        with gr.Row():
+            gr.Markdown("## Sandbox")
+        with gr.Row():
+            SandboxComponent(
+                label="Sandbox Example",
+                value=("https://www.gradio.app/", "Hello World"),
+                show_label=True)
+
+
+if __name__ == "__main__":
+    demo.launch()
+
+```
+
+## `SandboxComponent`
+
+### Initialization
+
+<table>
+<thead>
+<tr>
+<th align="left">name</th>
+<th align="left" style="width: 25%;">type</th>
+<th align="left">default</th>
+<th align="left">description</th>
+</tr>
+</thead>
+<tbody>
+<tr>
+<td align="left"><code>value</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+tuple[str, str] | Callable | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">default text to provide in textbox. If callable, the function will be called whenever the app loads to set the initial value of the component.</td>
+</tr>
+
+<tr>
+<td align="left"><code>label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">the label for this component, displayed above the component if `show_label` is `True` and is also used as the header if there are a table of examples for this component. If None and used in a `gr.Interface`, the label will be the name of the parameter this component corresponds to.</td>
+</tr>
+
+<tr>
+<td align="left"><code>every</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Timer | float | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Continously calls `value` to recalculate it if `value` is a function (has no effect otherwise). Can provide a Timer whose tick resets `value`, or a float that provides the regular interval for the reset Timer.</td>
+</tr>
+
+<tr>
+<td align="left"><code>inputs</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+Component | Sequence[Component] | set[Component] | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">Components that are used as inputs to calculate `value` if `value` is a function (has no effect otherwise). `value` is recalculated any time the inputs change.</td>
+</tr>
+
+<tr>
+<td align="left"><code>show_label</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will display label.</td>
+</tr>
+
+<tr>
+<td align="left"><code>scale</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">relative size compared to adjacent Components. For example if Components A and B are in a Row, and A has scale=2, and B has scale=1, A will be twice as wide as B. Should be an integer. scale applies in Rows, and to top-level Components in Blocks where fill_height=True.</td>
+</tr>
+
+<tr>
+<td align="left"><code>min_width</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int
+```
+
+</td>
+<td align="left"><code>160</code></td>
+<td align="left">minimum pixel width, will wrap if not sufficient screen space to satisfy this value. If a certain scale value results in this Component being narrower than min_width, the min_width parameter will be respected first.</td>
+</tr>
+
+<tr>
+<td align="left"><code>interactive</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if True, will be rendered as an editable textbox; if False, editing will be disabled. If not provided, this is inferred based on whether the component is used as an input or output.</td>
+</tr>
+
+<tr>
+<td align="left"><code>visible</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will be hidden.</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_id</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">None</td>
+</tr>
+
+<tr>
+<td align="left"><code>elem_classes</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+list[str] | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">An optional list of strings that are assigned as the classes of this component in the HTML DOM. Can be used for targeting CSS styles.</td>
+</tr>
+
+<tr>
+<td align="left"><code>render</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+bool
+```
+
+</td>
+<td align="left"><code>True</code></td>
+<td align="left">If False, component will not render be rendered in the Blocks context. Should be used if the intention is to assign event listeners now but render the component later.</td>
+</tr>
+
+<tr>
+<td align="left"><code>key</code></td>
+<td align="left" style="width: 25%;">
+
+```python
+int | str | None
+```
+
+</td>
+<td align="left"><code>None</code></td>
+<td align="left">if assigned, will be used to assume identity across a re-render. Components that have the same key across a re-render will have their value preserved.</td>
+</tr>
+</tbody></table>
+
+
+### Events
+
+| name | description |
+|:-----|:------------|
+| `change` | Triggered when the value of the SandboxComponent changes either because of user input (e.g. a user types in a textbox) OR because of a function update (e.g. an image receives a value from the output of an event trigger). See `.input()` for a listener that is only triggered by user input. |
+| `input` | This listener is triggered when the user changes the value of the SandboxComponent. |
+| `submit` | This listener is triggered when the user presses the Enter key while the SandboxComponent is focused. |
+
+
+
+### User function
+
+The impact on the users predict function varies depending on whether the component is used as an input or output for an event (or both).
+
+- When used as an Input, the component only impacts the input signature of the user function.
+- When used as an output, the component only impacts the return signature of the user function.
+
+The code snippet below is accurate in cases where the component is used as both an input and an output.
+
+- **As output:** Is passed, passes text value as a {str} into the function.
+- **As input:** Should return, expects a {str} returned from function and sets textarea value to it.
+
+ ```python
+ def predict(
+     value: str | None
+ ) -> str | None:
+     return value
+ ```
+

custom_components/sandboxcomponent/backend/gradio_sandboxcomponent/__init__.py

@@ -0,0 +1,4 @@
+
+from .sandboxcomponent import SandboxComponent
+
+__all__ = ['SandboxComponent']