From 22082952ea7eaaddb93f4d7e47f99d4a26cf213d Mon Sep 17 00:00:00 2001
From: sky leilani <45158875+skyleilani@users.noreply.github.com>
Date: Tue, 19 Sep 2023 12:46:23 -0400
Subject: [PATCH 01/10] update photos and directions

---
 .../create-component-pane.png                 | Bin 16553 -> 0 bytes
 .../create-transform-camera.png               | Bin 0 -> 10639 bytes
 .../detectioncam-component-panel.png          | Bin 46081 -> 0 bytes
 .../empty-detectioncam-component-panel.png    | Bin 57159 -> 0 bytes
 .../transform-camera-attributes.png           | Bin 0 -> 67153 bytes
 .../transform-camera-config.png               | Bin 0 -> 55977 bytes
 .../services/try-viam-color-detection.md      |  26 +++++++++---------
 7 files changed, 13 insertions(+), 13 deletions(-)
 delete mode 100644 assets/tutorials/try-viam-color-detection/create-component-pane.png
 create mode 100644 assets/tutorials/try-viam-color-detection/create-transform-camera.png
 delete mode 100644 assets/tutorials/try-viam-color-detection/detectioncam-component-panel.png
 delete mode 100644 assets/tutorials/try-viam-color-detection/empty-detectioncam-component-panel.png
 create mode 100644 assets/tutorials/try-viam-color-detection/transform-camera-attributes.png
 create mode 100644 assets/tutorials/try-viam-color-detection/transform-camera-config.png

diff --git a/assets/tutorials/try-viam-color-detection/create-component-pane.png b/assets/tutorials/try-viam-color-detection/create-component-pane.png
deleted file mode 100644
index d6f6a4622ca8de45ef4283815bd7775d1b7a4a9e..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/assets/tutorials/try-viam-color-detection/create-transform-camera.png b/assets/tutorials/try-viam-color-detection/create-transform-camera.png
new file mode 100644
index 0000000000000000000000000000000000000000..0fad1ed8b6f1ebf7e41b6a4ee11bb2db644943da
GIT binary patch
diff --git a/assets/tutorials/try-viam-color-detection/detectioncam-component-panel.png b/assets/tutorials/try-viam-color-detection/detectioncam-component-panel.png
deleted file mode 100644
index f796b469a30f444c395a2c1b4cab0761ae126183..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/assets/tutorials/try-viam-color-detection/empty-detectioncam-component-panel.png b/assets/tutorials/try-viam-color-detection/empty-detectioncam-component-panel.png
deleted file mode 100644
index 6d8c66af53e68ad36c01630566dae568e568cb2b..0000000000000000000000000000000000000000
GIT binary patch
diff --git a/assets/tutorials/try-viam-color-detection/transform-camera-attributes.png b/assets/tutorials/try-viam-color-detection/transform-camera-attributes.png
new file mode 100644
index 0000000000000000000000000000000000000000..23cce894091b2ca2353cd54c754df690812b1f6e
GIT binary patch
diff --git a/assets/tutorials/try-viam-color-detection/transform-camera-config.png b/assets/tutorials/try-viam-color-detection/transform-camera-config.png
new file mode 100644
index 0000000000000000000000000000000000000000..032c509b418acf97322e964f591fd6b382ee125a
GIT binary patch
diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index ed3f1d4242..e37f95d366 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -99,7 +99,7 @@ Add the vision service object to the services array in your rover’s raw JSON c
 {{% /tab %}}
 {{< /tabs >}}
 
-The configuration adds a `model` of `type` `color_detector` with the color as a parameter.
+The configuration adds a model of type `color_detector` with the color as a parameter.
 The `color_detector` is a heuristic-based detector that draws boxes around objects according to their hue.
 
 Click **Save config** and head to the **Components** tab.
@@ -113,7 +113,7 @@ Object colors can vary dramatically based on the light source.
 We recommend you verify the desired color detection value under actual lighting conditions.
 To determine the color value from the actual cam component image, you can use a pixel color tool, like [Color Picker for Chrome](https://chrome.google.com/webstore/detail/color-picker-for-chrome/clldacgmdnnanihiibdgemajcfkmfhia).
 
-If the color is not reliably detected, increase the `hue_tolerance_pct`.
+If the color is not reliably detected, drag the `Hue Tolerance` slider to the right or navigate to the `Raw JSON` tab to increase the `hue_tolerance_pct`.
 
 Note that the detector does not detect black, perfect greys (greys where the red, green, and blue color component values are equal), or white.
 {{< /alert >}}
@@ -128,12 +128,12 @@ To view output from the color detector overlaid on images from a physical camera
 Navigate to the **Components** tab in the Viam app and scroll to the **Create Component** section.
 To create a [transform camera](/components/camera/transform/):
 
-1. Enter a name for **Name**, for example `detectionCam`.
-2. Select `camera` as the **Type**.
-3. Select `transform` as the **Model**.
-4. Click **Create Component**.
+1. Click **Create Component**.
+2. Select `camera` as the type.
+3. Select `transform` as the model.
+4. Enter a name for **Name**, for example `detectionCam`, and click **Create**.
 
-![The Viam app showing the Create Component panel populated with a camera component. The name is detectionCam, the type is camera, and the model is transform.](/tutorials/try-viam-color-detection/create-component-pane.png)
+{{<imgproc src="/tutorials/try-viam-color-detection/create-transform-camera.png" resize="900x" declaredimensions=true alt="The Viam app showing the Create Component panel populated with a camera component. The name is detectionCam, the type is camera, and the model is transform.">}}
 
 Viam generates an empty **Attributes** section for the detection camera's component panel.
 The panel's **Attribute Guide** section displays the available attributes for the selected component.
@@ -142,9 +142,9 @@ The panel's **Attribute Guide** section displays the available attributes for th
 Attribute Guides always prefix required attributes with an asterisk.
 {{% /alert %}}
 
-![The Viam app showing the detectionCam component section. The Attributes section contains a skeleton configuration, including source, pipeline, type, and attributes. The Attributes Guide section lists the available camera component attributes. There are buttons labeled Data Capture Configuration, and Frame, and a drop-down labeled, Depends On. On the upper right there is a trash bin icon.](/tutorials/try-viam-color-detection/empty-detectioncam-component-panel.png)
+{{<imgproc src="/tutorials/try-viam-color-detection/transform-camera-config.png" resize="900x" declaredimensions=true alt="The Viam app showing the detectionCam component section. The Attributes section contains a skeleton configuration, including source, pipeline, type, and attributes. The Attributes Guide section lists the available camera component attributes. There are buttons labeled Data Capture Configuration, and Frame, and a drop-down labeled, Depends On. On the upper right there is a trash bin icon.">}}
 
-Copy the following JSON configuration into the Attributes section:
+Copy the following JSON configuration into the **Attributes** section:
 
 ```json {class="line-numbers linkable-line-numbers"}
 {
@@ -166,16 +166,16 @@ Copy the following JSON configuration into the Attributes section:
 | `source` | `cam` | The name of the physical camera on the rover, which provides the visual feed to get detections from. |
 | `attributes` | | The attributes of this detectionCam. |
 | `attributes.detector_name` | `my_color_detector` | The name of this detectionCam. |
-| `attributes.confidence_threshold` | `0.3` (30%) | The percentage of confidence in the color being present the detection service needs to detect a color. |
+| `attributes.confidence_threshold` | `0.3` (30%) |  The percentage of confidence needed by the detection service to identify a color. |
 | `type` | `detections` | The type of the component. |
 
-![The Viam app showing the detectionCam component section. It contains the Attributes section with a skeleton configuration, including source, pipeline, type, and attributes. The panel has an Attributes section populated with transform camera component attributes. The are buttons labeled Data Capture Configuration, and Frame, and a drop-down labeled, Depends On. On the upper right there is a trash bin icon.](/tutorials/try-viam-color-detection/detectioncam-component-panel.png)
+{{<imgproc src="/tutorials/try-viam-color-detection/transform-camera-attributes.png" resize="900x" declaredimensions=true alt="The Viam app showing the detectionCam component section. The Attributes section contains a skeleton configuration, including source, pipeline, type, and attributes. The Attributes Guide section lists the available camera component attributes. There are buttons labeled Data Capture Configuration, and Frame, and a drop-down labeled, Depends On. On the upper right there is a trash bin icon.">}}
 
 After adding the component and its attributes, click **Save config**.
 
-## Test your transform camera in the CONTROL tab
+## Test your transform camera in the **Control** tab
 
-In the **Control** tab, click on your base component and add the detection camera from the **Select Cameras** drop down.
+In the **Control** tab, click on your base component and enable the detection camera from the **Live Feeds** section.
 
 Next, enable the keyboard and move your rover around until your camera detects the configured color.
 Each time the camera detects the color, you will see a red rectangle around the color labeled with the detection confidence level.

From 86f337b73ac2cf712664fd517f1bb9021d18cd53 Mon Sep 17 00:00:00 2001
From: sky leilani <45158875+skyleilani@users.noreply.github.com>
Date: Tue, 19 Sep 2023 16:56:53 -0400
Subject: [PATCH 02/10] change photo link

---
 docs/tutorials/services/try-viam-color-detection.md | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index e37f95d366..ea67dd95e2 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -73,7 +73,7 @@ Navigate to your robot's **Config** tab on the [Viam app](https://app.viam.com/r
 
 Your configuration should look like the following:
 
-{{<imgproc src="/try-viam/try-viam/vision-service-config.png" resize="x600" alt="The vision service configuration panel showing the color set to a reddish color, the hue tolerance set to 0.06, and the segment size set to 100.">}}
+![The vision service configuration panel showing the color set to a reddish color, the hue tolerance set to 0.06, and the segment size set to 100.](/try-viam/try-viam/vision-service-config.png)
 
 {{% /tab %}}
 {{% tab name="JSON Template" %}}
@@ -133,7 +133,7 @@ To create a [transform camera](/components/camera/transform/):
 3. Select `transform` as the model.
 4. Enter a name for **Name**, for example `detectionCam`, and click **Create**.
 
-{{<imgproc src="/tutorials/try-viam-color-detection/create-transform-camera.png" resize="900x" declaredimensions=true alt="The Viam app showing the Create Component panel populated with a camera component. The name is detectionCam, the type is camera, and the model is transform.">}}
+{{<imgproc src="/tutorials/try-viam-color-detection/create-transform-camera.png" resize="350x" declaredimensions=true alt="The Viam app showing the Create Component panel populated with a camera component. The name is detectionCam, the type is camera, and the model is transform.">}}
 
 Viam generates an empty **Attributes** section for the detection camera's component panel.
 The panel's **Attribute Guide** section displays the available attributes for the selected component.
@@ -142,7 +142,7 @@ The panel's **Attribute Guide** section displays the available attributes for th
 Attribute Guides always prefix required attributes with an asterisk.
 {{% /alert %}}
 
-{{<imgproc src="/tutorials/try-viam-color-detection/transform-camera-config.png" resize="900x" declaredimensions=true alt="The Viam app showing the detectionCam component section. The Attributes section contains a skeleton configuration, including source, pipeline, type, and attributes. The Attributes Guide section lists the available camera component attributes. There are buttons labeled Data Capture Configuration, and Frame, and a drop-down labeled, Depends On. On the upper right there is a trash bin icon.">}}
+![The Viam app showing the detectionCam component section. The Attributes section contains a skeleton configuration, including source, pipeline, type, and attributes. The Attributes Guide section lists the available camera component attributes. There are buttons labeled Data Capture Configuration, and Frame, and a drop-down labeled, Depends On. On the upper right there is a trash bin icon.](/tutorials/try-viam-color-detection/transform-camera-config.png)
 
 Copy the following JSON configuration into the **Attributes** section:
 
@@ -169,7 +169,7 @@ Copy the following JSON configuration into the **Attributes** section:
 | `attributes.confidence_threshold` | `0.3` (30%) |  The percentage of confidence needed by the detection service to identify a color. |
 | `type` | `detections` | The type of the component. |
 
-{{<imgproc src="/tutorials/try-viam-color-detection/transform-camera-attributes.png" resize="900x" declaredimensions=true alt="The Viam app showing the detectionCam component section. The Attributes section contains a skeleton configuration, including source, pipeline, type, and attributes. The Attributes Guide section lists the available camera component attributes. There are buttons labeled Data Capture Configuration, and Frame, and a drop-down labeled, Depends On. On the upper right there is a trash bin icon.">}}
+![The Viam app showing the detectionCam component section. The Attributes section contains a skeleton configuration, including source, pipeline, type, and attributes. The Attributes Guide section lists the available camera component attributes. There are buttons labeled Data Capture Configuration, and Frame, and a drop-down labeled, Depends On. On the upper right there is a trash bin icon.](/tutorials/try-viam-color-detection/transform-camera-attributes.png)
 
 After adding the component and its attributes, click **Save config**.
 

From 175e62f947b788bd16c7aff0b7421cd8736ce086 Mon Sep 17 00:00:00 2001
From: Naomi Pentrel <5212232+npentrel@users.noreply.github.com>
Date: Tue, 19 Sep 2023 11:55:47 -0400
Subject: [PATCH 03/10] Update send-security-photo.md (#1864)

---
 docs/tutorials/projects/send-security-photo.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/projects/send-security-photo.md b/docs/tutorials/projects/send-security-photo.md
index 2dcb10fb4e..b6891d26a0 100644
--- a/docs/tutorials/projects/send-security-photo.md
+++ b/docs/tutorials/projects/send-security-photo.md
@@ -116,7 +116,7 @@ Click the **Services** subtab.
     Select the **Path to Existing Model On Robot** for the **Deployment** field.
     Then specify the absolute **Model Path** as where your tflite file lives and any **Optional Settings** such as the absolute **Label Path** as where your labels.txt file lives and the **Number of threads** as 1.
 
-   1. **Configure an mlmodel detector**
+1. **Configure an mlmodel detector**
 
     Add a [vision service](/services/vision/) with the name `myPeopleDetector`, type `vision` and model `mlmodel`.
     Click **Create service**.

From abe255f112b5fc21dbdbd1c464ab78c6a3325060 Mon Sep 17 00:00:00 2001
From: andf-viam <132301587+andf-viam@users.noreply.github.com>
Date: Tue, 19 Sep 2023 12:49:30 -0400
Subject: [PATCH 04/10] DOCS-1118: Add tgz support to registry (#1831)

---
 docs/extend/custom-components-remotes.md       | 2 +-
 docs/extend/modular-resources/_index.md        | 8 ++++----
 docs/extend/modular-resources/configure.md     | 4 ++--
 docs/extend/modular-resources/key-concepts.md  | 2 +-
 docs/extend/modular-resources/upload/_index.md | 7 ++++---
 docs/manage/CLI.md                             | 2 +-
 6 files changed, 13 insertions(+), 12 deletions(-)

diff --git a/docs/extend/custom-components-remotes.md b/docs/extend/custom-components-remotes.md
index 8aea4324f5..a45b730da6 100644
--- a/docs/extend/custom-components-remotes.md
+++ b/docs/extend/custom-components-remotes.md
@@ -15,7 +15,7 @@ description: "Implement custom components and register them on a server configur
 [Modular resources](/extend/modular-resources/key-concepts/) are the preferred method of creating custom resource implementations for SDKs with module support unless you are hosting `viam-server` on a non-Linux system or have another issue with compilation.
 {{% /alert %}}
 
-If a type or model of [component](/components/) you are working with is not [built-in to the Viam RDK](/internals/rdk/), or [available from the Viam Registry as a module](/extend/modular-resources/key-concepts/), you can use a [Viam SDK](/program/apis/) to code a custom resource implementation, host it on a server, and add it as a [remote](/manage/parts-and-remotes/) of your robot.
+If a type or model of [component](/components/) you are working with is not [built-in to the Viam RDK](/internals/rdk/), or [available from the Viam registry as a module](/extend/modular-resources/key-concepts/), you can use a [Viam SDK](/program/apis/) to code a custom resource implementation, host it on a server, and add it as a [remote](/manage/parts-and-remotes/) of your robot.
 
 Once you have coded your custom component and configured the remote servers, you can control and monitor your component with the Viam SDKs, like any other component.
 
diff --git a/docs/extend/modular-resources/_index.md b/docs/extend/modular-resources/_index.md
index 61b4e367df..8adbfbd5e9 100644
--- a/docs/extend/modular-resources/_index.md
+++ b/docs/extend/modular-resources/_index.md
@@ -24,15 +24,15 @@ For example, you can:
 These custom implementations are called *modular resources*, and are made available for use on a robot through {{< glossary_tooltip term_id="module" text="modules" >}}.
 A module can provide one or more modular resources, and can be added to your robot from the Viam registry.
 
-## The Viam Registry
+## The Viam registry
 
 The [Viam registry](https://app.viam.com/registry) allows hardware and software engineers to collaborate on their robotics projects by writing and sharing custom modules with each other.
 You can add a module from the Viam registry directly from your robot's **Configuration** tab in [the Viam app](https://app.viam.com/), using the **+ Create component** button.
 
 The code behind any modular resource can be packaged as a {{< glossary_tooltip term_id="module" text="module" >}} and uploaded to the Viam registry.
-Once the module has been uploaded to the Registry, you can [deploy the module](/extend/modular-resources/configure/) to any robot in your organization from [the Viam app](https://app.viam.com/).
+Once the module has been uploaded to the registry, you can [deploy the module](/extend/modular-resources/configure/) to any robot in your organization from [the Viam app](https://app.viam.com/).
 
-### Uploading to Viam Registry
+### Uploading to Viam registry
 
 After you finish programming your module, you can [upload your module to the Viam registry](/extend/modular-resources/upload/) to make it available for deployment to robots.
 As part of the upload process, you decide whether your module is *private* (visible only to other members of your [organization](/manage/fleet/organizations/)), or *public* (visible to all Viam users).
@@ -64,7 +64,7 @@ To get started working with modular resources:
 
 - Browse the [Viam registry](https://app.viam.com/registry) to see modules uploaded by other users.
 
-- [Deploy a module](/extend/modular-resources/configure/) to your robot from the Registry.
+- [Deploy a module](/extend/modular-resources/configure/) to your robot from the registry.
 
 - Browse the [modular resources tutorials](/extend/modular-resources/examples/) for examples of deploying and using custom modular resources on your robot.
 
diff --git a/docs/extend/modular-resources/configure.md b/docs/extend/modular-resources/configure.md
index 8444d317a8..3caafa4adb 100644
--- a/docs/extend/modular-resources/configure.md
+++ b/docs/extend/modular-resources/configure.md
@@ -95,7 +95,7 @@ This pane lists the models provided by the module, any [components](/components/
 
 {{<imgproc src="extend/modular-resources/configure/deployed-module-with-component.png" resize="1000x" declaredimensions=true alt="The module subtab of the config tab showing the realsense custom module configuration pane includes the update management section showing version update management options version type, set to Patch (X.Y.Z) and version set to 0.0.3">}}
 
-### Configure version update management for a Registry module
+### Configure version update management for a registry module
 
 When you add a module to your robot, you can also configure how that module updates itself when a newer version becomes available from the Viam registry.
 By default, a newly-added module is set to pin to the specific patch release (**Patch (X.Y.Z)**) of the version you added, meaning that the module will *never automatically update itself*.
@@ -123,7 +123,7 @@ For any version type other than **Patch (X.Y.Z)**, the module will upgrade as so
 If, for example, the module provides a motor component, and the motor is running, it will stop while the module upgrades.
 {{% /alert %}}
 
-### Create a new modular resource from a Registry module
+### Create a new modular resource from a registry module
 
 Once you have [added a module](#add-a-module-from-the-viam-registry) from the Viam registry, you can add any number of the modular resources it provides to your robot by adding new components or services configured with your modular resources' [model](/extend/modular-resources/key-concepts/#models).
 
diff --git a/docs/extend/modular-resources/key-concepts.md b/docs/extend/modular-resources/key-concepts.md
index a110f14e84..3141924072 100644
--- a/docs/extend/modular-resources/key-concepts.md
+++ b/docs/extend/modular-resources/key-concepts.md
@@ -19,7 +19,7 @@ A module provides definitions for one or more pairs of [APIs](#valid-apis-to-imp
 
 When the module initializes, it registers those pairs on your robot, making the functionality defined by that pair available for use.
 
-You can [upload your own modules to the Viam registry](/extend/modular-resources/upload/) or can [add existing modules from the Registry](/extend/modular-resources/configure/).
+You can [upload your own modules to the Viam registry](/extend/modular-resources/upload/) or can [add existing modules from the registry](/extend/modular-resources/configure/).
 
 See [Creating a custom module](/extend/modular-resources/create/) for more information.
 
diff --git a/docs/extend/modular-resources/upload/_index.md b/docs/extend/modular-resources/upload/_index.md
index bd55451df7..1dfec1e527 100644
--- a/docs/extend/modular-resources/upload/_index.md
+++ b/docs/extend/modular-resources/upload/_index.md
@@ -119,7 +119,7 @@ To upload your custom module to the [Viam registry](https://app.viam.com/registr
    On a successful update, the command will return a link to the updated module in the Viam registry.
 
 1. Package your custom module to get it ready to upload to the Viam registry.
-   Currently, the Registry only supports `tar.gz` or `tar.xz` format.
+   Your packaged module must use the `.tar.gz` or `.tgz` extension.
    Use the command below specific for the language of your module:
 
    - To package a module written in Go, run the following commands from the same directory as your `meta.json` file:
@@ -155,7 +155,8 @@ To upload your custom module to the [Viam registry](https://app.viam.com/registr
       - `darwin/amd64` - macOS computers running the Intel `x86_64` architecture.
       - `linux/arm64` - Linux computers or {{< glossary_tooltip term_id="board" text="boards" >}} running the `arm64` (`aarch64`) architecture, such as the Raspberry Pi.
       - `linux/amd64` - Linux computers or {{< glossary_tooltip term_id="board" text="boards" >}} running the Intel `x86_64` architecture.
-   - `path` - provide the path to the compressed archive, in `tar.gz` or `tar.xz` format, that contains your custom module code.
+   - `path` - provide the path to the compressed archive that contains your custom module code.
+      Your archive must use the `.tar.gz` or `.tgz` extension.
 
    {{% alert title="Important" color="note" %}}
    The `viam module upload` command only supports one `platform` argument at a time.
@@ -203,7 +204,7 @@ To update an existing module in the [Viam registry](https://app.viam.com/registr
    On a successful update, the command will return a link to the updated module in the Viam registry.
 
 1. Package your custom module to get it ready to upload to the Viam registry.
-   Currently, the Registry only supports `tar.gz` or `tar.xz` format.
+   Your packaged module must use the `.tar.gz` or `.tgz` extension.
    Use the command below specific for the language of your module:
 
    - To package a module written in Go, run the following commands from the same directory as your `meta.json` file:
diff --git a/docs/manage/CLI.md b/docs/manage/CLI.md
index 621e3c2090..7706abcd75 100644
--- a/docs/manage/CLI.md
+++ b/docs/manage/CLI.md
@@ -390,7 +390,7 @@ When you `upload` a module, the command validates your local packaged module to
 The following criteria are checked for every `upload`:
 
 * The packaged module must exist on the filesystem at the path provided to the `upload` command.
-* The packaged module must use the `.tar.gz` extension.
+* The packaged module must use the `.tar.gz` or `.tgz` extension.
 * The entry point file specified in the [`meta.json` file](#the-metajson-file) must exist on the filesystem at the path specified.
 * The entry point file must be executable.
 

From fc3599a40eae59bcf70cdfaf6dd6efaaa61142c1 Mon Sep 17 00:00:00 2001
From: sky leilani <45158875+skyleilani@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:24:54 -0400
Subject: [PATCH 05/10] integrate comments

---
 docs/tutorials/services/try-viam-color-detection.md | 11 +++++------
 1 file changed, 5 insertions(+), 6 deletions(-)

diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index ea67dd95e2..19a1431f10 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -99,7 +99,6 @@ Add the vision service object to the services array in your rover’s raw JSON c
 {{% /tab %}}
 {{< /tabs >}}
 
-The configuration adds a model of type `color_detector` with the color as a parameter.
 The `color_detector` is a heuristic-based detector that draws boxes around objects according to their hue.
 
 Click **Save config** and head to the **Components** tab.
@@ -113,7 +112,7 @@ Object colors can vary dramatically based on the light source.
 We recommend you verify the desired color detection value under actual lighting conditions.
 To determine the color value from the actual cam component image, you can use a pixel color tool, like [Color Picker for Chrome](https://chrome.google.com/webstore/detail/color-picker-for-chrome/clldacgmdnnanihiibdgemajcfkmfhia).
 
-If the color is not reliably detected, drag the `Hue Tolerance` slider to the right or navigate to the `Raw JSON` tab to increase the `hue_tolerance_pct`.
+If the color is not reliably detected, drag the **Hue Tolerance** slider to the right or navigate to the **Raw JSON** tab to increase the `hue_tolerance_pct`.
 
 Note that the detector does not detect black, perfect greys (greys where the red, green, and blue color component values are equal), or white.
 {{< /alert >}}
@@ -123,15 +122,15 @@ Note that the detector does not detect black, perfect greys (greys where the red
 Viam [camera](/components/camera/) components can be [physical](/components/camera/webcam/) like the one already configured on the rover, or virtual.
 A virtual camera transforms the output from a physical camera.
 
-To view output from the color detector overlaid on images from a physical camera, you need to configure a [transform camera](/components/camera/transform/).
+To view output from the color detector overlaid on images from a physical camera, configure a [transform camera](/components/camera/transform/).
 
-Navigate to the **Components** tab in the Viam app and scroll to the **Create Component** section.
+Navigate to the **Components** tab in the Viam app and click the **Components** subtab.
 To create a [transform camera](/components/camera/transform/):
 
-1. Click **Create Component**.
+1. Click **Create Component** in the lower-left corner of the page.
 2. Select `camera` as the type.
 3. Select `transform` as the model.
-4. Enter a name for **Name**, for example `detectionCam`, and click **Create**.
+4. Enter a name, for example `detectionCam`, and click **Create**.
 
 {{<imgproc src="/tutorials/try-viam-color-detection/create-transform-camera.png" resize="350x" declaredimensions=true alt="The Viam app showing the Create Component panel populated with a camera component. The name is detectionCam, the type is camera, and the model is transform.">}}
 

From fda46b8aadfa9d469df638d45018013b918710b8 Mon Sep 17 00:00:00 2001
From: sky leilani <45158875+skyleilani@users.noreply.github.com>
Date: Tue, 19 Sep 2023 13:32:37 -0400
Subject: [PATCH 06/10] add camera link

---
 docs/tutorials/services/try-viam-color-detection.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index 19a1431f10..94ed12b853 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -25,7 +25,7 @@ weight: 3
 The [vision service](/services/vision/) enables a robot to use its cameras to see and interpret the world around it.
 The service also allows you to create different types of detectors with which the robot can recognize objects, scan QR codes, perform optical quality inspections, sort different colored objects, take measurements, and more.
 
-In this tutorial you will learn how to configure a color detector with the vision service and how to leverage that detector with a transform camera to detect the color red.
+In this tutorial you will learn how to configure a color detector with the vision service and how to leverage that detector with a [transform camera](/components/camera/transform/) to detect the color red.
 
 You can follow this tutorial with a [rented Viam Rover](https://app.viam.com/try) or with [your own Viam Rover](/try-viam/rover-resources/).
 

From b4b14658be6a9cff7538e27a90adc01f4023e2a1 Mon Sep 17 00:00:00 2001
From: sky leilani <45158875+skyleilani@users.noreply.github.com>
Date: Tue, 19 Sep 2023 17:12:26 -0400
Subject: [PATCH 07/10] resize image

---
 docs/tutorials/services/try-viam-color-detection.md | 13 ++++++-------
 1 file changed, 6 insertions(+), 7 deletions(-)

diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index 94ed12b853..84429b8a32 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -122,17 +122,16 @@ Note that the detector does not detect black, perfect greys (greys where the red
 Viam [camera](/components/camera/) components can be [physical](/components/camera/webcam/) like the one already configured on the rover, or virtual.
 A virtual camera transforms the output from a physical camera.
 
-To view output from the color detector overlaid on images from a physical camera, configure a [transform camera](/components/camera/transform/).
+To view output from the color detector overlaid on images from a physical camera, configure a transform camera.
 
 Navigate to the **Components** tab in the Viam app and click the **Components** subtab.
-To create a [transform camera](/components/camera/transform/):
 
-1. Click **Create Component** in the lower-left corner of the page.
-2. Select `camera` as the type.
-3. Select `transform` as the model.
-4. Enter a name, for example `detectionCam`, and click **Create**.
+2. Click **Create Component** in the lower-left corner of the page.
+3. Select `camera` as the type.
+4. Select `transform` as the model.
+5. Enter a name, for example `detectionCam`, and click **Create**.
 
-{{<imgproc src="/tutorials/try-viam-color-detection/create-transform-camera.png" resize="350x" declaredimensions=true alt="The Viam app showing the Create Component panel populated with a camera component. The name is detectionCam, the type is camera, and the model is transform.">}}
+{{<imgproc src="/tutorials/try-viam-color-detection/create-transform-camera.png" resize="500x" declaredimensions=true alt="The Viam app showing the Create Component panel populated with a camera component. The name is detectionCam, the type is camera, and the model is transform.">}}
 
 Viam generates an empty **Attributes** section for the detection camera's component panel.
 The panel's **Attribute Guide** section displays the available attributes for the selected component.

From 63e044272b2dbe985f29b2957bab47cf2c66ba2a Mon Sep 17 00:00:00 2001
From: sky leilani <45158875+skyleilani@users.noreply.github.com>
Date: Wed, 20 Sep 2023 15:16:25 -0400
Subject: [PATCH 08/10] edit wording

---
 docs/tutorials/services/try-viam-color-detection.md | 9 ++++-----
 1 file changed, 4 insertions(+), 5 deletions(-)

diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index 84429b8a32..95723033e4 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -122,10 +122,9 @@ Note that the detector does not detect black, perfect greys (greys where the red
 Viam [camera](/components/camera/) components can be [physical](/components/camera/webcam/) like the one already configured on the rover, or virtual.
 A virtual camera transforms the output from a physical camera.
 
-To view output from the color detector overlaid on images from a physical camera, configure a transform camera.
-
-Navigate to the **Components** tab in the Viam app and click the **Components** subtab.
+To view output from the color detector overlaid on images from a physical camera, configure a transform camera:
 
+1. Navigate to the **Components** tab in the Viam app.
 2. Click **Create Component** in the lower-left corner of the page.
 3. Select `camera` as the type.
 4. Select `transform` as the model.
@@ -175,12 +174,12 @@ After adding the component and its attributes, click **Save config**.
 
 In the **Control** tab, click on your base component and enable the detection camera from the **Live Feeds** section.
 
-Next, enable the keyboard and move your rover around until your camera detects the configured color.
+Next, enable the keyboard and move your rover around until your camera detects the specified color.
 Each time the camera detects the color, you will see a red rectangle around the color labeled with the detection confidence level.
 
 ![Base component panel displaying an example color detection.](/tutorials/try-viam-color-detection/detected-example.png)
 
-If you scroll down in the **Control** tab, you can also click on the detectionCam's own section to view its stream there.
+Scroll down in the **Control** tab and select the dedicated section for detectionCam to access its live stream.
 
 ## Next Steps
 

From 72f55868c4d3d1814799b8f3d27f47403cc127b7 Mon Sep 17 00:00:00 2001
From: sky leilani <45158875+skyleilani@users.noreply.github.com>
Date: Wed, 20 Sep 2023 22:19:51 -0400
Subject: [PATCH 09/10] switch paragraphs

---
 docs/tutorials/services/try-viam-color-detection.md | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index 95723033e4..b1e70c3429 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -22,11 +22,11 @@ weight: 3
 # SMEs: Hazal
 ---
 
+In this tutorial you will learn how to configure a color detector with the vision service and how to leverage that detector with a [transform camera](/components/camera/transform/) to detect the color red.
+
 The [vision service](/services/vision/) enables a robot to use its cameras to see and interpret the world around it.
 The service also allows you to create different types of detectors with which the robot can recognize objects, scan QR codes, perform optical quality inspections, sort different colored objects, take measurements, and more.
 
-In this tutorial you will learn how to configure a color detector with the vision service and how to leverage that detector with a [transform camera](/components/camera/transform/) to detect the color red.
-
 You can follow this tutorial with a [rented Viam Rover](https://app.viam.com/try) or with [your own Viam Rover](/try-viam/rover-resources/).
 
 {{< alert title="Tip" color="tip" >}}

From 7c97ba17c691e708479b306d34ee15612f30157c Mon Sep 17 00:00:00 2001
From: sky leilani <45158875+skyleilani@users.noreply.github.com>
Date: Thu, 21 Sep 2023 09:33:43 -0400
Subject: [PATCH 10/10] integrate comment

---
 docs/tutorials/services/try-viam-color-detection.md | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/tutorials/services/try-viam-color-detection.md b/docs/tutorials/services/try-viam-color-detection.md
index b1e70c3429..f89690c4ef 100644
--- a/docs/tutorials/services/try-viam-color-detection.md
+++ b/docs/tutorials/services/try-viam-color-detection.md
@@ -124,7 +124,7 @@ A virtual camera transforms the output from a physical camera.
 
 To view output from the color detector overlaid on images from a physical camera, configure a transform camera:
 
-1. Navigate to the **Components** tab in the Viam app.
+1. Navigate to the **Config** tab in the Viam app and click the **Components** subtab.
 2. Click **Create Component** in the lower-left corner of the page.
 3. Select `camera` as the type.
 4. Select `transform` as the model.
