Move images under Katib directory (#2354)

* Move images to /katib/components

* Apply a11y rules

content/en/docs/components/katib/early-stopping.md

@@ -121,7 +121,7 @@ to create an experiment from the UI.
 
 Once you reach the early stopping section, select the appropriate values:
 
-<img src="/docs/images/katib/katib-early-stopping-parameter.png"
+<img src="/docs/components/katib/images/early-stopping-parameter.png"
   alt="UI form to deploy an early stopping Katib experiment"
   class="mt-3 mb-3 border border-info rounded">
 
@@ -182,14 +182,14 @@ median-stop-2ml8h96d   EarlyStopped   True     15m
 In addition, you can check your results on the Katib UI.
 The trial statuses on the experiment monitor page should look as follows:
 
-<img src="/docs/images/katib/katib-early-stopping-trials.png"
+<img src="/docs/components/katib/images/early-stopping-trials.png"
   alt="UI form to view trials"
   class="mt-3 mb-3 border border-info rounded">
 
 You can click on the early stopped trial name to get reported metrics before
 this trial is early stopped:
 
-<img src="/docs/images/katib/katib-early-stopping-trial-info.png"
+<img src="/docs/components/katib/images/early-stopping-trial-info.png"
   alt="UI form to view trial info"
   class="mt-3 mb-3 border border-info rounded">
 

content/en/docs/components/katib/experiment.md

@@ -791,61 +791,70 @@ sequence of steps.
 
 To run a hyperparameter tuning experiment from the Katib UI:
 
-1. Follow the getting-started guide to [access the Katib
-   UI](/docs/components/katib/hyperparameter/#katib-ui).
+1. Follow the getting-started guide to
+   [access the Katib UI](/docs/components/katib/hyperparameter/#katib-ui).
 
 1. Click **Hyperparameter Tuning** on the Katib home page.
 
 1. Open the Katib menu panel on the left, then open the **HP** section and
    click **Submit**:
 
-   <img src="/docs/images/katib/katib-menu.png"
-       alt="The Katib menu panel"
-       class="mt-3 mb-3 border border-info rounded">
+   <img src="/docs/components/katib/images/menu.png"
+     alt="The Katib menu panel"
+     class="mt-3 mb-3 border border-info rounded">
 
-1. You should see tabs offering you the following options:
+1. You should be able to view tabs offering you the following options:
 
    - **YAML file:** Choose this option to supply an entire YAML file containing
      the configuration for the experiment.
 
-     <img src="/docs/images/katib/katib-deploy-yaml.png"
-         alt="UI tab to paste a YAML configuration file"
-         class="mt-3 mb-3 border border-info rounded">
+     <img src="/docs/components/katib/images/deploy-yaml.png"
+       alt="UI tab to paste a YAML configuration file"
+       class="mt-3 mb-3 border border-info rounded">
 
    - **Parameters:** Choose this option to enter the configuration values
      into a form.
 
-     <img src="/docs/images/katib/katib-deploy-form.png"
-         alt="UI form to deploy a Katib experiment"
-         class="mt-3 mb-3 border border-info rounded">
+     <img src="/docs/components/katib/images/deploy-parameters.png"
+       alt="UI form to deploy a Katib experiment"
+       class="mt-3 mb-3 border border-info rounded">
 
 View the results of the experiment in the Katib UI:
 
 1. Open the Katib menu panel on the left, then open the **HP** section and
    click **Monitor**:
 
-   <img src="/docs/images/katib/katib-menu.png"
-       alt="The Katib menu panel"
-       class="mt-3 mb-3 border border-info rounded">
+   <img src="/docs/components/katib/images/menu.png"
+     alt="The Katib menu panel"
+     class="mt-3 mb-3 border border-info rounded">
 
-1. You should see the list of experiments:
+1. You should be able to view the list of experiments:
 
-   <img src="/docs/images/katib/katib-experiments.png"
+   <img src="/docs/components/katib/images/experiment-list.png"
      alt="The random example in the list of Katib experiments"
      class="mt-3 mb-3 border border-info rounded">
 
 1. Click the name of your experiment. For example, click **random-example**.
 
-1. You should see a graph showing the level of validation and train accuracy for various
-   combinations of the hyperparameter values. For example, the graph below
-   shows learning rate, number of layers, and optimizer:
+1. There should be a graph showing the level of validation and train accuracy
+   for various combinations of the hyperparameter values (learning rate, number
+   of layers, and optimizer):
 
-   <img src="/docs/images/katib/katib-random-example-graph.png"
-       alt="Graph produced by the random example"
-       class="mt-3 mb-3 border border-info rounded">
+   <img src="/docs/components/katib/images/random-example-graph.png"
+     alt="Graph produced by the random example"
+     class="mt-3 mb-3 border border-info rounded">
+
+1. Below the graph is a list of trials that ran within the experiment:
+
+   <img src="/docs/components/katib/images/random-example-trials.png"
+     alt="Trials that ran during the experiment"
+     class="mt-3 mb-3 border border-info rounded">
+
+1. You can click on trial name to get metrics for the particular trial:
 
-1. Below the graph is a list of trials that ran within the experiment.
-   Click a trial name to see the trial data.
+   <img src="/docs/components/katib/images/random-example-trial-info.png"
+     alt="Trials that ran during the experiment"
+     class="mt-3 mb-3 border border-info rounded">
 
 ## Next steps
 

content/en/docs/components/katib/hyperparameter.md

@@ -71,7 +71,7 @@ that defines the properties of the PV.
 You can use the Katib user interface (UI) to submit experiments and to monitor
 your results. The Katib home page within Kubeflow looks like this:
 
-<img src="/docs/images/katib/katib-home.png"
+<img src="/docs/components/katib/images/home-page.png"
   alt="The Katib home page within the Kubeflow UI"
   class="mt-3 mb-3 border border-info rounded">
 
@@ -337,13 +337,13 @@ View the results of the experiment in the Katib UI:
 1. Open the Katib menu panel on the left, then open the **HP** section and
    click **Monitor**:
 
-   <img src="/docs/images/katib/katib-menu.png"
-       alt="The Katib menu panel"
-       class="mt-3 mb-3 border border-info rounded">
+   <img src="/docs/components/katib/images/menu.png"
+     alt="The Katib menu panel"
+     class="mt-3 mb-3 border border-info rounded">
 
 1. You should be able to view the list of experiments:
 
-   <img src="/docs/images/katib/katib-experiments.png"
+   <img src="/docs/components/katib/images/experiment-list.png"
      alt="The random example in the list of Katib experiments"
      class="mt-3 mb-3 border border-info rounded">
 
@@ -353,19 +353,19 @@ View the results of the experiment in the Katib UI:
    for various combinations of the hyperparameter values
    (learning rate, number of layers, and optimizer):
 
-   <img src="/docs/images/katib/katib-random-example-graph.png"
-       alt="Graph produced by the random example"
-       class="mt-3 mb-3 border border-info rounded">
+   <img src="/docs/components/katib/images/random-example-graph.png"
+     alt="Graph produced by the random example"
+     class="mt-3 mb-3 border border-info rounded">
 
 1. Below the graph is a list of trials that ran within the experiment:
 
-   <img src="/docs/images/katib/katib-random-example-trials.png"
+   <img src="/docs/components/katib/images/random-example-trials.png"
      alt="Trials that ran during the experiment"
      class="mt-3 mb-3 border border-info rounded">
 
 1. You can click on trial name to get metrics for the particular trial:
 
-   <img src="/docs/images/katib/katib-random-example-trial-info.png"
+   <img src="/docs/components/katib/images/random-example-trial-info.png"
      alt="Trials that ran during the experiment"
      class="mt-3 mb-3 border border-info rounded">
 

content/en/docs/components/katib/overview.md

@@ -67,7 +67,7 @@ For example, the following graph from Katib shows the level of validation accura
 for various combinations of hyperparameter values (the learning rate, the number of
 layers, and the optimizer):
 
-<img src="/docs/images/katib/katib-random-example-graph.png"
+<img src="/docs/components/katib/images/random-example-graph.png"
   alt="Graph produced by the random example"
   class="mt-3 mb-3 border border-info rounded">
 
@@ -109,7 +109,7 @@ You can submit Katib jobs from the command line or from the UI. (Learn more
 about the Katib interfaces later on this page.) The following screenshot shows
 part of the form for submitting a NAS job from the Katib UI:
 
-<img src="/docs/images/katib/katib-neural-architecture-search-ui.png"
+<img src="/docs/components/katib/images/nas-parameters.png"
   alt="Submitting a neural architecture search from the Katib UI"
   class="mt-3 mb-3 border border-info rounded">
 
@@ -123,9 +123,9 @@ You can use the following interfaces to interact with Katib:
   for information on how to access the UI.
   The Katib home page within Kubeflow looks like this:
 
-  <img src="/docs/images/katib/katib-home.png"
-      alt="The Katib home page within the Kubeflow UI"
-      class="mt-3 mb-3 border border-info rounded">
+  <img src="/docs/components/katib/images/home-page.png"
+    alt="The Katib home page within the Kubeflow UI"
+    class="mt-3 mb-3 border border-info rounded">
 
 - A gRPC API. Check the [API reference](/docs/reference/katib/v1beta1/katib).