Add finditparts example, update readme with screenshots of the debugger (#27)

README.md

@@ -119,6 +119,27 @@ curl -X POST -H 'Content-Type: application/json' -H 'x-api-key: {Your local API
 }' http://0.0.0.0:8000/api/v1/tasks
 ```
 
+## Debugging Skyvern
+Skyvern's visualizer allows you to debug every interaction Skyvern takes on the web.
+
+### Tasks, Steps, and Actions
+Each API request you sent to Skyvern is called a "task". Each task is made up of "steps" which are the individual actions Skyvern takes to complete the task. Each step is made up of "actions" which are the individual interactions Skyvern takes on a particular website.
+
+Every time you call the API, you will be given a task_id you can use to find a task within the visualizer. Within each task, you'll be able to interact with each step, and see the specific actions Skyvern took to complete the task.
+
+In the screenshot below, we're navigating to finditparts.com and searching for a truck part. You'll see each action it took listed there, alongside the reasoning behind each action.
+<p align="center">
+  <img src="images/skyvern_visualizer_debug_llm_response.png"/>
+</p>
+
+
+In addition to the actions suggested by the LLM in text form, Skyvern's visualizer also shows the state of the screen at the time of the action, with a 1:1 action to screenshot mapping. This allows you to see exactly what Skyvern saw when it made a decision, and debug any issues that may have arisen. 
+
+<p align="center">
+  <img src="images/skyvern_visualizer_debug_action_screenshot.png"/>
+</p>
+
+
 
 # Real-world examples of Skyvern
 <!-- > TODO (suchintan):

streamlit_app/visualizer/sample_data.py

@@ -5,6 +5,17 @@ class SampleTaskRequest(TaskRequest):
     name: str
 
 
+finditparts_sample_data = SampleTaskRequest(
+    name="Finditparts",
+    url="https://www.finditparts.com",
+    navigation_goal="Search for the specified product id, add it to cart and then navigate to the cart page",
+    data_extraction_goal="Extract all product quantity information from the cart page",
+    navigation_payload={
+        "product_id": "W01-377-8537",
+    },
+)
+
+
 geico_sample_data = SampleTaskRequest(
     name="Geico",
     url="https://www.geico.com",
@@ -175,4 +186,5 @@ geico_sample_data = SampleTaskRequest(
     },
 )
 
-supported_examples = [geico_sample_data]
+
+supported_examples = [geico_sample_data, finditparts_sample_data]

streamlit_app/visualizer/streamlit.py

@@ -119,39 +119,43 @@ with execute_tab:
             with create_column:
                 run_task, copy_curl = st.columns([3, 1])
                 task_request_body = supported_examples[i]
+
+                unique_key = f"{task_request_body.name}"
                 copy_curl.button(
-                    "Copy cURL", on_click=lambda: copy_curl_to_clipboard(task_request_body=task_request_body)
+                    "Copy cURL",
+                    key=f"copy_curl_{unique_key}",
+                    on_click=lambda: copy_curl_to_clipboard(task_request_body=task_request_body),
                 )
-                with st.form("task_form"):
+                with st.form(f"task_form_{unique_key}"):
                     run_task.markdown("## Run a task")
 
                     example = supported_examples[i]
                     # Create all the fields to create a TaskRequest object
-                    st_url = st.text_input("URL*", value=example.url, key="url")
+                    st_url = st.text_input("URL*", value=example.url, key=f"url_{unique_key}")
                     st_webhook_callback_url = st.text_input(
-                        "Webhook Callback URL", key="webhook", placeholder="Optional"
+                        "Webhook Callback URL", key=f"webhook_{unique_key}", placeholder="Optional"
                     )
                     st_navigation_goal = st.text_input(
                         "Navigation Goal",
-                        key="nav_goal",
+                        key=f"nav_goal_{unique_key}",
                         placeholder="Describe the navigation goal",
                         value=example.navigation_goal,
                     )
                     st_data_extraction_goal = st.text_input(
                         "Data Extraction Goal",
-                        key="data_goal",
+                        key=f"data_goal_{unique_key}",
                         placeholder="Describe the data extraction goal",
                         value=example.data_extraction_goal,
                     )
                     st_navigation_payload = st.text_area(
                         "Navigation Payload JSON",
-                        key="nav_payload",
+                        key=f"nav_payload_{unique_key}",
                         placeholder='{"name": "John Doe", "email": "abc@123.com"}',
                         value=example.navigation_payload,
                     )
                     st_extracted_information_schema = st.text_area(
                         "Extracted Information Schema",
-                        key="extracted_info_schema",
+                        key=f"extracted_info_schema_{unique_key}",
                         placeholder='{"quote_price": "float"}',
                         value=example.extracted_information_schema,
                     )