DOCS-1070: Pt4: Update config UI instructions for services and more t…

…utorials (viamrobotics#1827)

docs/services/base-rc/_index.md

@@ -1,6 +1,6 @@
 ---
 title: "Base Remote Control Service"
-linkTitle: "Remote Control"
+linkTitle: "Base Remote Control"
 weight: 60
 type: "docs"
 description: "The base remote control service allows you to remotely control a base with an input controller like a gamepad."
@@ -33,12 +33,11 @@ You must configure a [base](/components/base/) with a [movement sensor](/compone
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Services** subtab and navigate to the **Create service** menu.
-Select the type `Navigation` and enter a name for your service.
+Click the **Services** subtab, then click **Create service** in the lower-left corner.
+Select the type `Base Remote Control`.
+Enter a name for your service, then click **Create**.
 
-Click **Create service**:
-
-![An example configuration for a Base Remote Control service in the Viam app Config Builder.](/services/base-rc/base-rc-ui-config.png)
+![An example configuration for a base remote control service in the Viam app Config Builder.](/services/base-rc/base-rc-ui-config.png)
 
 {{% /tab %}}
 {{% tab name="JSON Template" %}}
@@ -72,8 +71,8 @@ Click **Create service**:
 {{% /tab %}}
 {{< /tabs >}}
 
-Next, add the JSON `"attributes"` you want the service to have.
-The following attributes are available for Base Remote Control services:
+Edit and fill in the attributes as applicable.
+The following attributes are available for base remote control services:
 
 | Name | Type | Inclusion | Description |
 | ---- | ---- | --------- | ----------- |

docs/services/data/configure-data-capture.md

@@ -12,10 +12,10 @@ tags: ["data management", "cloud", "sync"]
 
 To capture data from one or more robots, you must first add the [data management service](../):
 
-1. On your robot's **Config** page, navigate to the **Services** tab.
-2. At the bottom of the page you can create a service.
+1. From your robot's **Config** tab, navigate to the **Services** subtab.
+2. Click **Create service** in the lower-left corner of the page.
    Choose `Data Management` as the type and specify a name for your data management service, for example `data-manager`.
-3. Then click `Create Service`.
+3. Click **Create**.
 4. On the panel that appears, you can manage the capturing and syncing functions individually and specify the interval and directory.
    If the capture frequency or the directory is not specified, the data management service captures data at the default frequency every 0.1 minutes (after every 6 second interval) in the default `~/.viam/capture` directory.
 

docs/services/ml/_index.md

@@ -18,18 +18,10 @@ The ML Model service allows you to deploy machine learning models to your robots
 {{< tabs >}}
 {{% tab name="Builder" %}}
 
-Navigate to the [robot page on the Viam app](https://app.viam.com/robots).
-Click on the robot you wish to add the ML model service to.
-Select the **Config** tab, and click on **Services**.
-
-Scroll to the **Create Service** section.
-
-1. Select `mlmodel` as the **Type**.
-2. Enter a name as the **Name**.
-3. Select `tflite_cpu` as the **Model**.
-4. Click **Create Service**.
-
-![Create a machine learning models service](/services/ml-models-service.png)
+Navigate to your robot's **Config** tab on the [Viam app](https://app.viam.com/robots).
+Click the **Services** subtab and click **Create service** in the lower-left corner.
+Select the `ML Model` type, then select the `TFLite CPU` model.
+Enter a name for your service and click **Create**.
 
 You can choose to configure your service with an existing model on the robot or deploy a model onto your robot:
 

docs/services/navigation/_index.md

@@ -33,10 +33,9 @@ Make sure the [movement sensor](/components/movement-sensor/) you use supports [
 {{% tab name="Config Builder" %}}
 
 Navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Services** subtab and navigate to the **Create service** menu.
-Select the type `navigation` and enter a name for your service.
-
-Click **Create service**:
+Click the **Services** subtab, then click **Create service** in the lower-left corner.
+Select the type `Navigation`.
+Enter a name for your service, then click **Create**.
 
 ![An example configuration for a Navigation service in the Viam app Config Builder.](/services/navigation/navigation-ui-config.png)
 
@@ -106,7 +105,7 @@ Click **Create service**:
 {{% /tab %}}
 {{< /tabs >}}
 
-Next, add the JSON `"attributes"` you want the service to have.
+Edit and fill in the attributes as applicable.
 The following attributes are available for `Navigation` services:
 
 | Name | Type | Inclusion | Description |

docs/services/vision/classification.md

@@ -27,23 +27,15 @@ The types of classifiers supported are:
 
 ## Configure an `mlmodel` classifier
 
-To create a `mlmodel` classifier, you need an [ML model service with a suitable model](../../ml/).
-
-Navigate to the [robot page on the Viam app](https://app.viam.com/robots).
-Click on the robot you wish to add the vision service to.
-Select the **Config** tab, and click on **Services**.
-
-Scroll to the **Create Service** section.
+To create an `mlmodel` classifier, you need an [ML model service with a suitable model](../../ml/).
 
 {{< tabs >}}
 {{% tab name="Builder" %}}
 
-1. Select `vision` as the **Type**.
-2. Enter a name as the **Name**.
-3. Select **ML Model** as the **Model**.
-4. Click **Create Service**.
-
-![Create vision service for mlmodel](/services/vision/mlmodel.png)
+Navigate to your robot's **Config** tab on the [Viam app](https://app.viam.com/robots).
+Click the **Services** subtab and click **Create service** in the lower-left corner.
+Select the `Vision` type, then select the `ML Model` model.
+Enter a name for your service and click **Create**.
 
 In your vision service's panel, fill in the **Attributes** field.
 

docs/services/vision/detection.md

@@ -51,19 +51,10 @@ If the color is not reliably detected, increase the `hue_tolerance_pct`.
 {{< tabs >}}
 {{% tab name="Builder" %}}
 
-Navigate to the [robot page on the Viam app](https://app.viam.com/robots).
-Click on the robot you wish to add the vision service to.
-Select the **Config** tab, and click on **Services**.
-
-Scroll to the **Create Service** section.
-To create a [vision service](/services/vision/):
-
-1. Select `vision` as the **Type**.
-2. Enter a name as the **Name**.
-3. Select **Color Detector** as the **Model**.
-4. Click **Create Service**.
-
-![Create vision service for color detector](/services/vision/color_detector.png)
+Navigate to your robot's **Config** tab on the [Viam app](https://app.viam.com/robots).
+Click the **Services** subtab and click **Create service** in the lower-left corner.
+Select the `ML Model` type, then select the `Color Detector` model.
+Enter a name for your service and click **Create**.
 
 In your vision service's panel, select the color your vision service will be detecting, as well as a hue tolerance and a segment size (in pixels):
 
@@ -153,21 +144,13 @@ Proceed to [test your detector](#test-your-detector).
 A machine learning detector that draws bounding boxes according to the specified tensorflow-lite model file available on the robot’s hard drive.
 To create a `mlmodel` classifier, you need an [ML model service with a suitable model](../../ml/).
 
-Navigate to the [robot page on the Viam app](https://app.viam.com/robots).
-Click on the robot you wish to add the vision service to.
-Select the **Config** tab, and click on **Services**.
-
-Scroll to the **Create Service** section.
-
 {{< tabs >}}
 {{% tab name="Builder" %}}
 
-1. Select `vision` as the **Type**.
-2. Enter a name as the **Name**.
-3. Select **ML Model** as the **Model**.
-4. Click **Create Service**.
-
-![Create vision service for mlmodel](/services/vision/mlmodel.png)
+Navigate to your robot's **Config** tab on the [Viam app](https://app.viam.com/robots).
+Click the **Services** subtab and click **Create service** in the lower-left corner.
+Select the `Vision` type, then select the `ML Model` model.
+Enter a name for your service and click **Create**.
 
 In your vision service's panel, fill in the **Attributes** field.
 

docs/services/vision/segmentation.md

@@ -29,19 +29,10 @@ It is slower than other segmenters and can take up to 30 seconds to segment a sc
 {{< tabs >}}
 {{% tab name="Builder" %}}
 
-Navigate to the [robot page on the Viam app](https://app.viam.com/robots).
-Click on the robot you wish to add the vision service to.
-Select the **Config** tab, and click on **Services**.
-
-Scroll to the **Create Service** section.
-To create a [vision service](/services/vision/):
-
-1. Select `vision` as the **Type**.
-2. Enter a name as the **Name**.
-3. Select **Radius Clustering Segmenter** as the **Model**.
-4. Click **Create Service**.
-
-![Create vision service for obstacles_pointcloud](/services/vision/obstacles_pointcloud.png)
+Navigate to your robot's **Config** tab on the [Viam app](https://app.viam.com/robots).
+Click the **Services** subtab and click **Create service** in the lower-left corner.
+Select the `Vision` type, then select the `Radius Clustering Segmenter` model.
+Enter a name for your service and click **Create**.
 
 In your vision service's panel, fill in the **Attributes** field.
 
@@ -138,19 +129,10 @@ The label and the pixels associated with the 2D detections become the label and
 {{< tabs >}}
 {{% tab name="Builder" %}}
 
-Navigate to the [robot page on the Viam app](https://app.viam.com/robots).
-Click on the robot you wish to add the vision service to.
-Select the **Config** tab, and click on **Services**.
-
-Scroll to the **Create Service** section.
-To create a [vision service](/services/vision/):
-
-1. Select `vision` as the **Type**.
-2. Enter a name as the **Name**.
-3. Select **Detector to 3D Segmenter** as the **Model**.
-4. Click **Create Service**.
-
-![Create vision service for detector_3d_segmenter](/services/vision/detector_3d_segmenter.png)
+Navigate to your robot's **Config** tab on the [Viam app](https://app.viam.com/robots).
+Click the **Services** subtab and click **Create service** in the lower-left corner.
+Select the `Vision` type, then select the `Detector to 3D Segmenter` model.
+Enter a name for your service and click **Create**.
 
 In your vision service's panel, fill in the **Attributes** field.
 

docs/tutorials/get-started/confetti-bot.md

@@ -34,7 +34,7 @@ You can expand on this project to turn a motor based on other types of inputs, s
 ### Hardware
 
 * A macOS or Linux computer
-* A [Raspberry Pi](https://a.co/d/bxEdcAT), with a [microSD card](https://www.amazon.com/Lexar-Micro-microSDHC-Memory-Adapter/dp/B08XQ7NGG1/ref=sr_1_13), set up using [these instructions](https://docs.viam.com/installation/prepare/rpi-setup/).
+* A [Raspberry Pi](https://a.co/d/bxEdcAT), with a [microSD card](https://www.amazon.com/Lexar-Micro-microSDHC-Memory-Adapter/dp/B08XQ7NGG1/ref=sr_1_13), set up using [these instructions](/installation/prepare/rpi-setup/).
 * A big button, like [this one](https://www.amazon.com/EG-STARTS-Buttons-Illuminated-Machine/dp/B01LZMANZ7/ref=sxts_b2b_sx_reorder_acb_business).
 Check the wiring diagram for the specific model you have as you wire the button.
 * A mini confetti cannon, like [this one](https://www.amazon.com/Confetti-Poppers-Party-Accessory-Pack/dp/B074SP7FZH/ref=sr_1_4)
@@ -52,7 +52,7 @@ The STL files we use for 3D printing are adapted to the size of this motor, but
 
 * [Python3](https://www.python.org/download/releases/3.0/)
 * [pip](https://pip.pypa.io/en/stable/#)
-* [viam-server](https://docs.viam.com/installation/#install-viam-server)
+* [viam-server](/installation/#install-viam-server)
 * [Viam Python SDK](https://python.viam.dev/)
 
 ## Set up your hardware
@@ -121,33 +121,31 @@ We named ours ConfettiBot.
 
 ![A robot page header in the Viam app, its under the location work, and named ConfettiBot.](/tutorials/confetti-bot/app-name-confettibot.png)
 
-Then navigate to the robot’s **CONFIG** tab to start configuring your components.
+Then navigate to the robot’s **Config** tab to start configuring your components.
 
 {{< tabs >}}
 {{% tab name="Builder UI" %}}
 
 ### Configure the Pi as a board
 
-Click on the **Components** subtab and navigate to the **Create component** menu.
+Click on the **Components** subtab and click **Create component** in the lower-left corner of the page.
 
-Add your {{< glossary_tooltip term_id="board" text="board" >}} with the name `party`, type `board` and model `pi`.
-Click **Create Component**.
+Add your {{< glossary_tooltip term_id="board" text="board" >}} with type `board` and model `pi`.
+Enter `party` for the name of your [board component](/components/board/), then click **Create**.
 
-![Create component panel, with the name attribute filled as party, type attribute filled as board and model attribute filled as pi.](/tutorials/confetti-bot/app-board-create.png)
-
-You can name your board whatever you want as long as you refer to it the same way in your code, we picked `party` for fun.
+You can name your board whatever you want as long as you refer to it the same way in your code; we picked `party` for fun.
 Your board configuration should now look like this:
 
 ![Board component configured in the Viam app, the component tab is named party, with a type attribute board and model attribute pi.](/tutorials/confetti-bot/app-board-attribute.png)
 
 ### Configure the motor
 
-Add your [motor](https://docs.viam.com/components/motor/) with the name “start”, type `motor`, and model `gpio`.
+Click on the **Components** subtab and click **Create component** in the lower-left corner of the page.
+Select `motor` for the type and `gpio` for the model.
+Enter `start` for the name of your [motor component](/components/motor/), then click **Create**.
 Again, we named it “start” to refer to the button being pressed, but this name is up to you as long as you remember the name and use the same name in the code later.
 
-![Create component panel, with the name attribute filled as start, type attribute filled as motor and model attribute filled as gpio.](/tutorials/confetti-bot/app-motor-create.png)
-
-After clicking **Create Component**, there is a pin assignment type toggle.
+After clicking **Create**, there is a pin assignment type toggle.
 Select **In1/In2** since that is compatible with the type of input our motor controller expects.
 In the drop downs for A/In1 and B/In2, choose `13 GPIO 27` and `15 GPIO 22` and for PWM choose `11 GPIO 17` corresponding to our wiring.
 

docs/tutorials/projects/bedtime-songs-bot.md

@@ -63,10 +63,10 @@ First, add your personal computer's webcam to your robot as a [camera](/componen
 {{< tabs >}}
 {{% tab name="Builder UI" %}}
 
-Click on the **Components** subtab and navigate to the **Create component** menu.
+Click the **Components** subtab, then click **Create component** in the lower-left corner of the page.
 
-Add your [camera](https://docs.viam.com/components/board/) with the name `cam`, type `camera`, and model `webcam`.
-Click **Create Component**.
+Select `camera` for the type, then select `webcam` for the model.
+Enter `cam` for the name of your [camera component](/components/camera/), then click **Create**.
 
 ![Creation of a `webcam` camera in the Viam app config builder. The user is selecting the video_path configuration attribute from the drop-down menu](../../tutorials/bedtime-songs-bot/video-path-ui.png)
 

docs/tutorials/projects/guardian.md

@@ -260,59 +260,66 @@ scp labels.txt [email protected]:/home/pi/labels.txt
 {{% tab name="Builder UI" %}}
 
 Next, navigate to the **Config** tab of your robot's page in [the Viam app](https://app.viam.com).
-Click on the **Services** subtab and navigate to the **Create service** menu.
+Click the **Services** subtab.
 
 1. **Add an ML model service.**
 
-   The [ML model service](/services/ml/) allows you to deploy the provided machine learning model to your robot.
-   Create an ML model with the name `mlmodel`, the type `mlmodel` and the model `tflite_cpu`.
-   Then click **Create Service**.
+  The [ML model service](/services/ml/) allows you to deploy the provided machine learning model to your robot.
 
-   In the new ML Model panel, select **Path to Existing Model On Robot** for the **Deployment**.
+  Click **Create service** in the lower-left corner of the page.
+  Select type `ML Model`, then select model `TFLite CPU`.
+  Enter `mlmodel` as the name for your ML model service, then click **Create**.
 
-   Then specify the absolute **Model Path** as `/home/pi/effdet0.tflite` and the **Label Path** as `/home/pi/labels.txt`.
+  In the new ML Model panel, select **Path to existing model on robot** for the **Deployment**.
+
+  Then specify the absolute **Model path** as `/home/pi/effdet0.tflite` and the **Label path** as `/home/pi/labels.txt`.
 
 2. **Add a vision service.**
 
-   Next, add a [detector](/services/vision/detection/) as a vision service to be able to make use of the ML model.
-   Create an vision service with the name `detector`, the type `vision` and the model `mlmodel`.
-   Then click **Create Service**.
+  Next, add a [detector](/services/vision/detection/) as a vision service to be able to make use of the ML model.
+
+  Click **Create service** in the lower-left corner of the page.
+  Select type `Vision`, then select model `ML Model`.
+  Enter `detector` as the name, then click **Create**.
 
-   In the new detector panel, select the `mlmodel` you configured in the previous step.
+  In the new detector panel, select the `mlmodel` you configured in the previous step.
 
-   Click **Save config** in the bottom left corner of the screen.
+  Click **Save config** in the bottom left corner of the screen.
 
 3. **Add a `transform` camera.**
 
-   To be able to test that the vision service is working, add a `transform` camera which will add bounding boxes and labels around the objects the service detects.
+  To be able to test that the vision service is working, add a `transform` camera which will add bounding boxes and labels around the objects the service detects.
 
-   Click on the **Components** subtab and navigate to the **Create component** menu.
-   Create a [transform camera](/components/camera/transform/) with the name `transform_cam`, the type `camera` and the model `transform`.
+  Navigate to the **Components** subtab of the **Config** tab.
+  Click **Create component** in the lower-left corner of the page.
 
-   Replace the attributes JSON object with the following object which specifies the camera source that the `transform` camera will be using and defines a pipeline that adds the defined `detector`:
+  Select `camera` for the type, then select `transform` for the model.
+  Enter `transform_cam` as the name for your [transform camera](/components/camera/transform/), then click **Create**.
 
-   ```json
-   {
-   "source": "cam",
-   "pipeline": [
-       {
-       "type": "detections",
-       "attributes": {
-           "detector_name": "detector",
-           "confidence_threshold": 0.6
-       }
-       }
-   ]
-   }
-   ```
+  Replace the attributes JSON object with the following object which specifies the camera source that the `transform` camera will be using and defines a pipeline that adds the defined `detector`:
+
+  ```json
+  {
+  "source": "cam",
+  "pipeline": [
+      {
+      "type": "detections",
+      "attributes": {
+          "detector_name": "detector",
+          "confidence_threshold": 0.6
+      }
+      }
+  ]
+  }
+  ```
 
-   Click **Save config** in the bottom left corner of the screen.
+  Click **Save config** in the bottom left corner of the screen.
 
 {{% /tab %}}
 
 {{% tab name="Raw JSON" %}}
 
-Next, on the [`Raw JSON` tab](/manage/configuration/#the-config-tab), replace the configuration with the following configuration which configures the [ML model service](/services/ml/), the [vision service](/services/vision/), and a [transform camera](/components/camera/transform/):
+Next, on the [**Raw JSON** tab](/manage/configuration/#the-config-tab), replace the configuration with the following configuration which configures the [ML model service](/services/ml/), the [vision service](/services/vision/), and a [transform camera](/components/camera/transform/):
 
 ```json {class="line-numbers linkable-line-numbers" data-line="31-48,50-69"}
 {