diff --git a/docs/platform/how-to/create-environment.md b/docs/platform/how-to/create-environment.md new file mode 100644 index 00000000..585c070a --- /dev/null +++ b/docs/platform/how-to/create-environment.md @@ -0,0 +1,109 @@ +# Create an environment + +When you [create a project](create-project.md), you'll need to create at least one [environment](../changes.md#environments). This page describes how to create an environment in more detail. + +There are several ways you can create a new environment, if you've not created one as part of creating the project. For example, you can do it from the top-level kebab menu: + +![Create environment - kebab menu](../images/how-to/create-environment/create-environment-kebab-menu.png){width=60%} + +You can also create an environment from the main project screen: + +![Create environment - main project screen](../images/how-to/create-environment/create-environment-project-screen.png){width=60%} + +## Name and branch + +You now need to give your environment a name, and select (or create) the branch it is associated with: + +![Name and branch](../images/how-to/create-environment/name-branch.png){width=60%} + +You can enter any suitable name for your environment. Examples could be: production, testing, develop, staging, prototype, and so on. Any name that suits the use case can be used. + +An environment is always associated with a branch. You can select a branch that already exists (such as when you have connected your project to an existing Git repository), but you are also free to create any new branches you need - simply click `+ New branch` from the branch dropdown, in the `Environment settings` dialog. + +## Kafka hosting option + +There are three hosting options: + +1. Quix broker +2. Self-hosted +3. Confluent Cloud + +Each of these is described briefly in the following sections. + +### Quix broker + +The simplest and most convenient choice is to use Quix-managed Kafka. No installation of Kafka is required, and configuration can be done through the UI if you need to change the sensible default values. Very little knowledge of Kafka is expected, beyond basic familiarity with concepts such as [topics](../glossary.md#topic). + +There is a small charge for storage for messages persisted in a topic: + +![Topic storage](../images/how-to/create-environment/topic-storage.png){width=80%} + +### Self-hosted Kafka + +If you want to install and manage your own Kafka installation, you can do this too. You'll need to do more configuration, and be very familiar with details of Kafka hosting and configuration. Selecting this option presents you with a setup guide: + +![Self-hosted Kafka](../images/how-to/create-environment/self-hosted-kafka.png){width=90%} + +You also have the option to test your connection with the Kafka server before continuing. + +!!! tip + + You could use any Kafka solution here, for example [Redpanda](https://redpanda.com/){target=_blank}. + +### Confluent Cloud + +You can also use the Confluent Cloud hosting option. You can read documentation on [connecting to Confluent Cloud](../integrations/kafka/confluent-cloud.md). It is assumed you're familiar with [Confluent Cloud](https://www.confluent.io/){target=_blank}. + +## Data and streaming services + +The last step in creating an environment is to choose your data and streaming services option. + +![Data and streaming services](../images/how-to/create-environment/data-streaming-services.png){width=60%} + +There are two options here: + +* Standard +* High performance + +These options determine the following: + +* The amount of storage available to persisted topics +* The level of resources (CPU, RAM) allocated to streaming services + +### Persisted storage + +Persisted storage is when you enable persistence on a topic: + +![Topic persistence](../images/how-to/create-environment/topic-persistence.png){width=80%} + +When this option is selected, data in the topic is persisted to a Quix database (InfluxDB). This data can then be queried using the [Query API](../../apis/query-api/index.md), or played back into a topic using the [replay service](replay.md). + +!!! note + + Persisted storage is not the same as topic storage. Topic storage is charged separately, and relates to storage allocated to messages retained in a Kafka topic, for the [Quix broker option](#quix-broker). + +### Streaming services + +Services that experience improved performance when selecting the "High performance" option include the following: + +* GitService - this is the service that synchronizes your Quix environment with the project's Git repository. +* [Replay Service](replay.md) - enables replay of persisted data into a topic. +* [Streaming Reader](../../apis/streaming-reader-api/index.md) - service that enables a client to subscribe to a Quix topic. +* [Streaming Writer](../../apis/streaming-writer-api/index.md) - service that enables a client to publish to a Quix topic. +* [Query API](../../apis/query-api/index.md) - query data persisted in the Quix database. + +Generally, if you notice sluggish performance in one of these services, it may mean for the volumes and frequency of data you are processing, you might need the High performance option. + +!!! tip + + While you can't directly upgrade a standard environment to a high performance environment, you can create a new environment that uses the high performance option. You can create this environment using any branch (or even a new branch) suitable for your use case. For example, if you had a `staging` branch that was currently a standard environment, and you needed to upgrade it to a high performance environment, you could delete the environment, and create a new environment using the high performance option, and link it to the `staging` branch. + +### Use cases + +Standard is designed for proof-of-concept, experimentation, and testing environments. + +High performance is designed for production environments. + +## Next steps + +* [See the pricing page](https://quix.io/pricing){target=_blank} diff --git a/docs/platform/how-to/create-project.md b/docs/platform/how-to/create-project.md index f97df245..c452d746 100644 --- a/docs/platform/how-to/create-project.md +++ b/docs/platform/how-to/create-project.md @@ -6,6 +6,8 @@ This documentation describes how to create a new project, and populate it with t You can create as many environments in a project as you need. You can mark them as protected, and name them as needed, to align with your own development processes. This how-to simply shows one example project. +You can also read more details about environments in [How to create an environment](create-environment.md). + ## Creating a project To do anything useful with Quix, you'll need at least one project, and one environment. You can think of a project as corresponding to a Git repository, and an environment as corresponding to Git branch within that repository. diff --git a/docs/platform/images/how-to/create-environment/create-environment-kebab-menu.png b/docs/platform/images/how-to/create-environment/create-environment-kebab-menu.png new file mode 100644 index 00000000..a71545a8 Binary files /dev/null and b/docs/platform/images/how-to/create-environment/create-environment-kebab-menu.png differ diff --git a/docs/platform/images/how-to/create-environment/create-environment-project-screen.png b/docs/platform/images/how-to/create-environment/create-environment-project-screen.png new file mode 100644 index 00000000..96a474d8 Binary files /dev/null and b/docs/platform/images/how-to/create-environment/create-environment-project-screen.png differ diff --git a/docs/platform/images/how-to/create-environment/data-streaming-services.png b/docs/platform/images/how-to/create-environment/data-streaming-services.png new file mode 100644 index 00000000..17b24813 Binary files /dev/null and b/docs/platform/images/how-to/create-environment/data-streaming-services.png differ diff --git a/docs/platform/images/how-to/create-environment/name-branch.png b/docs/platform/images/how-to/create-environment/name-branch.png new file mode 100644 index 00000000..6d032b07 Binary files /dev/null and b/docs/platform/images/how-to/create-environment/name-branch.png differ diff --git a/docs/platform/images/how-to/create-environment/self-hosted-kafka.png b/docs/platform/images/how-to/create-environment/self-hosted-kafka.png new file mode 100644 index 00000000..d7dbfece Binary files /dev/null and b/docs/platform/images/how-to/create-environment/self-hosted-kafka.png differ diff --git a/docs/platform/images/how-to/create-environment/topic-persistence.png b/docs/platform/images/how-to/create-environment/topic-persistence.png new file mode 100644 index 00000000..083ef13b Binary files /dev/null and b/docs/platform/images/how-to/create-environment/topic-persistence.png differ diff --git a/docs/platform/images/how-to/create-environment/topic-storage.png b/docs/platform/images/how-to/create-environment/topic-storage.png new file mode 100644 index 00000000..30f42381 Binary files /dev/null and b/docs/platform/images/how-to/create-environment/topic-storage.png differ diff --git a/docs/platform/integrations/kafka/confluent-cloud.md b/docs/platform/integrations/kafka/confluent-cloud.md index dfd4f7ed..06e1f3be 100644 --- a/docs/platform/integrations/kafka/confluent-cloud.md +++ b/docs/platform/integrations/kafka/confluent-cloud.md @@ -5,7 +5,7 @@ Quix requires Kafka to provide streaming infrastructure for your Quix environmen When you create a new Quix environment, there are three hosting options: 1. **Quix Broker** - Quix hosts Kafka for you. This is the simplest option as Quix provides hosting and configuration. -2. **Self-Hosted Kafka** - This is where you already have existing Kafka infrastructure that you use, and you want to enable Quix to provide the stream processing platform on top of it. You can configure Quix to work with your existing Kafka infrastructure using this option. +2. **Self-Hosted Kafka** - This is where you already have existing Kafka infrastructure that you use, and you want to enable Quix to provide the stream processing platform on top of it. You can configure Quix to work with your existing Kafka infrastructure using this option. You could use any Kafka solution here, for example [Redpanda](https://redpanda.com/){target=_blank}. 3. **Confluent Cloud** - if you use Confluent Cloud for your Kafka infrastructure, then you can configure Quix to connect to your existing Confluent Cloud account. This documentation covers the third hosting option, Confluent Cloud. diff --git a/docs/platform/tutorials/computer-vision/add-service.md b/docs/platform/tutorials/computer-vision/add-service.md index 8ce61473..8bd627fd 100644 --- a/docs/platform/tutorials/computer-vision/add-service.md +++ b/docs/platform/tutorials/computer-vision/add-service.md @@ -2,7 +2,7 @@ In this lab you use everything you've learned so far, to add a new service to the pipeline. Specifically, you add a service to publish the number of cars captured by the TfL cams to a new topic. You will then observe the number of cars change in real time using the waveform view of the Quix Data Explorer. This service could be useful if you want to easily store the number of cars, or perhaps create an alarm if the number of cars rises above a certain threshold. This service is a simple example of filtering - where you filter out data you are not interested in for subsequent processing. -You develop this service on a feature branch, and then you create a PR to merge your new feature into the develop branch. This is a common pattern for development - you can test your new service on the feature branch, and then test again on the develop branch, before final integration into the production `main` branch. +You develop this service on a feature branch, and then you create a PR to merge your new feature into the tutorial branch. This is a common pattern for development - you can test your new service on the feature branch, and then test again, before final integration into the production `main` branch. ## Create an environment @@ -14,13 +14,11 @@ To create a new environment (and branch): 2. Create a new environment called `Cars Only`. -3. Create a new branch called `cars-only`. To do this, from the branch dropdown click `+ New branch` which displays the New branch dialog: - - ![New branch](./images/new-branch.png) +3. Create a new branch called `cars-only`. To do this, from the branch dropdown click `+ New branch` which displays the New branch dialog. !!! important - Make sure you branch from the `develop` branch, not `main`, as you are going to merge your changes onto the `develop` branch. + Make sure you branch from the `tutorial` branch, not `main`, as you are going to merge your changes back to the `tutorial` branch. 4. Complete creation of the environment using the default options. @@ -177,17 +175,15 @@ You now use the Quix Data Explorer to view the cars data in real time. ## Merge the feature -Once you are sure that the changes on your feature branch are tested, you can then merge your changes onto the develop branch. Here your changes undergo further tests before finally being merged into production. +Once you are sure that the changes on your feature branch are tested, you can then merge your changes onto the tutorial branch. Here your changes undergo further tests before finally being merged into production. -To merge your feature branch, `cars-only` into `develop`: +To merge your feature branch, `cars-only` into `tutorial`: 1. Select `Merge request` from the menu as shown: ![Merge request menu](./images/merge-request-menu.png) -2. In the `Merge request` dialog, set the `cars-only` branch to merge into the `develop` branch, as shown: - - ![Merge request dialog](./images/merge-request-dialog.png) +2. In the `Merge request` dialog, set the `cars-only` branch to merge into the `tutorial` branch. You are going to create a pull request, rather than perform a direct merge. This enables you to have the PR reviewed in GitHub (or other Git provider). You are also going to do a squash and merge, as much of the feature branch history is not required. @@ -195,13 +191,9 @@ To create the pull request: 1. Click `Create pull request`. You are taken to your Git provider, in this case GitHub. -2. Click the `Pull request` button: - - ![Pull request GitHub](./images/pull-request-github.png) +2. Click the `Pull request` button. -3. Add your description, and then click `Create pull request`: - - ![Pull request description](./images/pr-add-description.png) +3. Add your description, and then click `Create pull request`. 4. Get your PR reviewed and approved. Then squash and merge the commits: @@ -213,13 +205,11 @@ To create the pull request: You can just merge, you don't have to squash and merge. You would then retain the complete commit history for your service while it was being developed. Squash and merge is used in this case by way of example, as the commit messages generated while the service was being developed were deemed to be not useful in this case. -## Resync the Develop environment - -You have now merged your new feature into the `develop` branch in the Git repository. Your Quix view in the Develop environment is now out of sync with the Git repository. If you click on your Develop environment in Quix, you'll see it is now a commit (the merge commit) behind: +## Resync the environment -![Develop behind](./images/develop-behind.png) +You have now merged your new feature into the `tutorial` branch in the Git repository. Your Quix view in the Tutorial environment is now out of sync with the Git repository. If you click on your Tutorial environment in Quix, you'll see it is now a commit (the merge commit) behind. -You now need to make sure your Develop environment in Quix is synchronized with the Git repository. To do this: +You now need to make sure your Tutorial environment in Quix is synchronized with the Git repository. To do this: 1. Click on `Sync environment`. The `Sync environment` dialog is displayed. @@ -227,7 +217,7 @@ You now need to make sure your Develop environment in Quix is synchronized with 3. Click `Go to pipeline`. -Your new service will build and start in the Develop environment, where you can now carry out further testing. When you are satisfied this feature can be released tp production, then you would repeat the previous process to merge your changes to Production `main`. +Your new service will build and start in the Tutorial environment, where you can now carry out further testing. When you are satisfied this feature can be released to production, then you would repeat the previous process to merge your changes to Production `main`. ## 🏃‍♀️ Next step diff --git a/docs/platform/tutorials/computer-vision/get-project.md b/docs/platform/tutorials/computer-vision/get-project.md index 998dc078..3a7639c2 100644 --- a/docs/platform/tutorials/computer-vision/get-project.md +++ b/docs/platform/tutorials/computer-vision/get-project.md @@ -29,7 +29,7 @@ To fork the repository: 1. Navigate to the [Quix GitHub repository](https://github.com/quixio/computer-vision-demo){target="_blank"}. -2. Click the `Fork` button to fork the repo into your GitHub account (or equivalent Git provider if you don't have a GitHub account). Make sure you fork all branches, as you will be looking at the `develop` branch. +2. Click the `Fork` button to fork the repo into your GitHub account (or equivalent Git provider if you don't have a GitHub account). Make sure you fork all branches, as you will be looking at the `tutorial` branch. !!! tip @@ -76,15 +76,15 @@ To link Quix to this forked repository: You now need to add an environment to your project. This is explained in the following section. -## Create your Develop environment +## Create your environment -A Quix project contains at least one branch. For the purposes of this tutorial you will examine the `develop` branch of the project. In a Quix project a branch is encapsulated in an environment. You'll create a `Develop` environment mapped to the `develop` branch of the repository. +A Quix project contains at least one branch. For the purposes of this tutorial you will examine the `tutorial` branch of the project. In a Quix project a branch is encapsulated in an environment. You'll create a `Tutorial` environment mapped to the `tutorial` branch of the repository. -Now create an environment called `Develop` which uses the `develop` branch: +Now create an environment called `Tutorial` which uses the `tutorial` branch: -1. Enter the environment name `Develop`. +1. Enter the environment name `Tutorial`. -2. Select the `develop` branch from the dropdown. +2. Select the `tutorial` branch from the dropdown. Make sure the branch is protected, as shown in the following screenshot: @@ -104,42 +104,41 @@ At this point you can wait a few minutes for the pipeline services to completely ## Configure credentials -As the project uses Quix API credentials, you'll now need to configure your details for the services that require API keys. +As the project uses Quix API credentials, you'll now need to configure your credentials for the services that require API keys. The main ones are: + +* TfL camera feed - TfL API key +* Web UI - a bearer token ([PAT](../../how-to/personal-access-token-pat.md)) + +You need to [create secrets](../../how-to/environment-variables.md#create-a-secret-variable) for these and then assign them to the appropriate [environment variables](../../how-to/environment-variables.md). ### TfL camera feed -Open the service and edit the environment variable as shown here: +To get this service to run, you'll need to configure it with your TfL API key. + +Create a new secret that contains your TfL API key. Now link that secret to the `tfl_api_key` environment variable in the TfL camera feed service. -![TfL credentials](./images/tfl-credentials.png){width=60%} +[Read more about environment variables and secret management](../../how-to/environment-variables.md). ### Web UI service Note if you just want to try out the UI without performing the following steps, you can do that in the [demo](https://app-demo-computervisiondemo-prod.deployments.quix.ai/){target=_blank}. -When testing the UI you might find Google Maps does not load correctly for you - this is because the code has the Quix Google Maps API key. To work around this, you can set the Google Maps API key to an empty string. Google maps will then default to "developer mode" - the map will display correctly, but will be watermarked with 'for developer use'. To do this, in the Applications list, click on the `TfL image processing UI` application. +You'll need a [PAT](../../how-to/personal-access-token-pat.md) for the UI as it uses the Streaming ReaderAPI which needs to be authenticated. -To set the Google Maps API key to an empty string, you need to edit `src/app/app.module.ts` and modify the `apiKey` field in `AgmCoreModule.forRoot` to the following: +Once you have your PAT copied to the clipboard, create a new secret to contain it. Then link that secret to `bearerToken` environment variable for the UI. -``` typescript -AgmCoreModule.forRoot({ - apiKey: '' - }), -``` +[Read more about environment variables and secret management](../../how-to/environment-variables.md). -Also, you need your [workspace ID](../../how-to/get-environment-id.md) and a [PAT](../../how-to/personal-access-token-pat.md) to get the UI fully working. Once you have these, you'll need to access the code for the service, and set these values. +Other optional services may require similar configuration, for example, the Quix Amazon S3 connector service requires your S3 credentials if you want to use it. + +When testing the UI you see "For development purposes only" displayed on the map. Optionally, if you have a Google Maps API key, you can avoid this. -In the file `src/app/services/quix.service.ts`, locate the following code, and replace the place holders with your values: +To add your own Google Maps API key you need to edit `src/app/app.module.ts` and modify the `apiKey` field in `AgmCoreModule.forRoot` to include your Google Maps API key: ``` typescript -/*~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-*/ - /*WORKING LOCALLY? UPDATE THESE!*/ - private workingLocally = false; // set to true if working locally - private token: string = ''; // Create a token in the Tokens menu and paste it here - public workspaceId: string = ''; // Look in the URL for the Quix Portal your workspace ID is after 'workspace=' +AgmCoreModule.forRoot({apiKey: ''}), ``` -Other optional services may require similar configuration, for example, the Quix Amazon S3 connector service requires your S3 credentials if you want to use it. - ## See also If you are new to Quix it is worth reviewing the [recent changes page](../../changes.md), as that contains very useful information about the significant recent changes, and also has a number of useful videos you can watch to gain familiarity with Quix. diff --git a/docs/platform/tutorials/computer-vision/images/develop-behind.png b/docs/platform/tutorials/computer-vision/images/develop-behind.png deleted file mode 100644 index f306b131..00000000 Binary files a/docs/platform/tutorials/computer-vision/images/develop-behind.png and /dev/null differ diff --git a/docs/platform/tutorials/computer-vision/images/merge-request-dialog.png b/docs/platform/tutorials/computer-vision/images/merge-request-dialog.png deleted file mode 100644 index 4f74759c..00000000 Binary files a/docs/platform/tutorials/computer-vision/images/merge-request-dialog.png and /dev/null differ diff --git a/docs/platform/tutorials/computer-vision/images/new-branch.png b/docs/platform/tutorials/computer-vision/images/new-branch.png deleted file mode 100644 index d6b0f1aa..00000000 Binary files a/docs/platform/tutorials/computer-vision/images/new-branch.png and /dev/null differ diff --git a/docs/platform/tutorials/computer-vision/images/other-services-pipeline-segment.png b/docs/platform/tutorials/computer-vision/images/other-services-pipeline-segment.png deleted file mode 100644 index 06c0a903..00000000 Binary files a/docs/platform/tutorials/computer-vision/images/other-services-pipeline-segment.png and /dev/null differ diff --git a/docs/platform/tutorials/computer-vision/images/pipeline-overview-1.png b/docs/platform/tutorials/computer-vision/images/pipeline-overview-1.png deleted file mode 100644 index 53f8d19e..00000000 Binary files a/docs/platform/tutorials/computer-vision/images/pipeline-overview-1.png and /dev/null differ diff --git a/docs/platform/tutorials/computer-vision/images/pipeline-overview-2.png b/docs/platform/tutorials/computer-vision/images/pipeline-overview-2.png deleted file mode 100644 index f0e273d0..00000000 Binary files a/docs/platform/tutorials/computer-vision/images/pipeline-overview-2.png and /dev/null differ diff --git a/docs/platform/tutorials/computer-vision/images/pr-add-description.png b/docs/platform/tutorials/computer-vision/images/pr-add-description.png deleted file mode 100644 index a38e7eed..00000000 Binary files a/docs/platform/tutorials/computer-vision/images/pr-add-description.png and /dev/null differ diff --git a/docs/platform/tutorials/computer-vision/images/protected-branch.png b/docs/platform/tutorials/computer-vision/images/protected-branch.png index 33639647..42138a34 100644 Binary files a/docs/platform/tutorials/computer-vision/images/protected-branch.png and b/docs/platform/tutorials/computer-vision/images/protected-branch.png differ diff --git a/docs/platform/tutorials/computer-vision/images/pull-request-github.png b/docs/platform/tutorials/computer-vision/images/pull-request-github.png deleted file mode 100644 index e612d256..00000000 Binary files a/docs/platform/tutorials/computer-vision/images/pull-request-github.png and /dev/null differ diff --git a/docs/platform/tutorials/computer-vision/images/tfl-credentials.png b/docs/platform/tutorials/computer-vision/images/tfl-credentials.png deleted file mode 100644 index 2a9d52f8..00000000 Binary files a/docs/platform/tutorials/computer-vision/images/tfl-credentials.png and /dev/null differ diff --git a/docs/platform/tutorials/computer-vision/index.md b/docs/platform/tutorials/computer-vision/index.md index 9093fe73..e0bfa43a 100644 --- a/docs/platform/tutorials/computer-vision/index.md +++ b/docs/platform/tutorials/computer-vision/index.md @@ -2,7 +2,7 @@ In this tutorial you learn about a real-time computer vision application, using a [Quix template project](https://github.com/quixio/computer-vision-demo){target=_blank}. -The project uses the Transport for London (TfL) traffic cameras, known as Jam Cams, as the video input. The [YOLO v8](https://docs.ultralytics.com/) machine learning model is used to identify various objects such as types of vehicles. Additional services count the vehicles and finally the data is displayed on a map which is part of the web UI that has been creatde specially for this project. +The project uses the Transport for London (TfL) traffic cameras, known as Jam Cams, as the video input. The [YOLO v8](https://docs.ultralytics.com/) machine learning model is used to identify various objects such as types of vehicles. Additional services count the vehicles and finally the data is displayed on a map which is part of the web UI that has been created for this project. You'll fork the complete project from GitHub, and then create a Quix project from the forked repo, so you have a copy of the full application code running in your Quix account. You then examine the data flow through the project's pipeline, using tools provided by the Quix Portal. @@ -78,21 +78,7 @@ Follow these steps to locate your TfL API key: 6. You can now find your API Keys in the profile page. -Later, you'll need to configure the TfL service with your own TfL API key. To do this, open the service and edit the environment variable as shown here: - -![TfL credentials](./images/tfl-credentials.png){width=60%} - -### Google Maps API key - -When testing the project you might find Google Maps does not load correctly for you - this is because the code has the Quix Google Maps API key. To work around this, you can set the Google Maps API key to an empty string, and then enable "developer mode" in your browser - the maps then display correctly. - -To set the Google Maps API key to an empty string, you need to edit `app.module.ts` and modify the `apiKey` field in `AgmCoreModule.forRoot` to the following: - -``` typescript -AgmCoreModule.forRoot({ - apiKey: '' - }), -``` +Later, you'll need to configure the TfL service with your own TfL API key. ### Git provider @@ -106,17 +92,7 @@ If you want to use the Quix AWS S3 service (optional), you'll need to provide yo ## The pipeline -The following screenshots show the pipeline you build in this tutorial. - -The first part of the pipeline is: - -![pipeline overview](./images/pipeline-overview-1.png) - -The second part of the pipeline is: - -![pipeline overview](./images/pipeline-overview-2.png) - -There are several *main* stages in the pipeline: +There are several *main* stages in the [pipeline](https://portal.platform.quix.ai/pipeline?workspace=demo-computervisiondemo-prod&token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik1qVTBRVE01TmtJNVJqSTNOVEpFUlVSRFF6WXdRVFF4TjBSRk56SkNNekpFUWpBNFFqazBSUSJ9.eyJodHRwczovL3F1aXguYWkvb3JnX2lkIjoiZGVtbyIsImh0dHBzOi8vcXVpeC5haS9vd25lcl9pZCI6ImF1dGgwfDI4YWQ4NWE4LWY1YjctNGFjNC1hZTVkLTVjYjY3OGIxYjA1MiIsImh0dHBzOi8vcXVpeC5haS90b2tlbl9pZCI6ImMzNzljNmVlLWNkMmYtNDExZC1iOGYyLTMyMDU0ZDc5MTY2YSIsImh0dHBzOi8vcXVpeC5haS9leHAiOiIxNzM3ODI5NDc5LjIyMyIsImlzcyI6Imh0dHBzOi8vYXV0aC5xdWl4LmFpLyIsInN1YiI6ImtyMXU4MGRqRllvUUZlb01nMGhqcXZia29lRkxFRDVBQGNsaWVudHMiLCJhdWQiOiJxdWl4IiwiaWF0IjoxNjk1NzE2MDI4LCJleHAiOjE2OTgzMDgwMjgsImF6cCI6ImtyMXU4MGRqRllvUUZlb01nMGhqcXZia29lRkxFRDVBIiwiZ3R5IjoiY2xpZW50LWNyZWRlbnRpYWxzIiwicGVybWlzc2lvbnMiOltdfQ.Ndm0K2iNHPxDq1ohF-yb-6LzIqx_UY8Ptcq0kAwSNye12S3deX_eDkC4XqZqW2NoSLd3GsmWV9PZGetGGp2IlqshQFZtUMp6WP6hq917ZC1i8JFx93PAbY7NT_88nFDovVlaRcoTpWvI-03KbryLkAoB28c6qb3EFwjCWFBuy_yA4yjQ8uF0-AZ0R9Qi4IBaekXWqcgO0a91gVRg0oA_hnzJFoR-EnZ2G1ZSxtuVgnyyPuQTMUvzJuUT_IJTLzEB_kejX0pcXRZBIwHP8MWLB4mE5DtIdz4jm8WIA4eZJZ7ZCG4dk-adQwZ2BdkNknV5eEwRgRJL4ybaplkaDlR-dg){target=_blank}: 1. *TfL camera feed* - TfL Camera feed or "Jam Cams". This service retrieves the raw data from the TfL API endpoint. A list of all JamCams is retrieved, along with the camera data. The camera data contains a link to a video clip from the camera. These video clips are hosted by TfL in MP4 format on AWS S3. A stream is created for each camera, and the camera data published to this stream. Using multiple streams in this way enables a solution capable of horizontal scaling, through additional topic partitions and, optionally, replicated services in a consumer group. Once the camera list has been scanned, the service sleeps for a configurable amount of time, and then repeats the previous code. This reduces the load, and also means the API limit of 500 requests per minute is not exceeded. Messages are passed to the frame grabber. @@ -161,11 +137,11 @@ This tutorial is divided up into several parts, to make it a more manageable lea 4. [Object detection](object-detection.md) service. This is the YOLO v8 logic that identifies and annotates the objects identified in the frame. You examine the code and then see how to view the message data format used in the service, in real time. -5. [Web UI](web-ui.md) service. This is a JavaScript web client app that uses the Quix Streaming Reader API to read data from a Quix topic (the output of the stream merge service). There are various UI components that are beyond the scope of this tutorial. +5. [Web UI](web-ui.md) service. This is a web client app that uses the Quix Streaming Reader API to read data from a Quix topic (the output of the stream merge service). There are various UI components that are beyond the scope of this tutorial. 6. [Other services](other-services.md). The other services are fairly simple so are collected together for discussion. You can optionally investigate the message data format and code. -7. [Add new service](add-service.md). You add a new service to a feature branch, test it, and then merge to the develop branch. +7. [Add new service](add-service.md). You add a new service to a feature branch, test it, and then merge to the tutorial branch. 8. [Summary](summary.md). In this concluding part you are presented with a summary of the work you have completed, and also some next steps for more advanced learning about the Quix Platform. diff --git a/docs/platform/tutorials/computer-vision/other-services.md b/docs/platform/tutorials/computer-vision/other-services.md index 69eba214..01a88a5a 100644 --- a/docs/platform/tutorials/computer-vision/other-services.md +++ b/docs/platform/tutorials/computer-vision/other-services.md @@ -2,8 +2,6 @@ There are some additional services in the pipeline that provide useful functionality. These range from S3 storage of data to calculation of the maximum vehicles per day in a specific location. -![Other services](./images/other-services-pipeline-segment.png) - Briefly, these services are: * *Stream merge* - merges all the traffic cam streams into a single stream to make things easier to process in the UI. diff --git a/docs/platform/tutorials/computer-vision/summary.md b/docs/platform/tutorials/computer-vision/summary.md index 024e356d..69329873 100644 --- a/docs/platform/tutorials/computer-vision/summary.md +++ b/docs/platform/tutorials/computer-vision/summary.md @@ -11,27 +11,16 @@ In addition, you have see how in the Quix portal you can: * Learn how to examine the raw message data in the messages view * Examine and edit the code of a service -## Code Samples used - -While you forked a ready-to-go pipeline from GitHub and then explored it in this tutorial, it is possible to build your own pipeline in Quix using ready-made services called [Quix Code Samples](../../samples/samples.md). These code samples enable you to quickly build your own pipeline from scratch using these tested open source components. For example, there - -Here is a list of the Quix open source Code Samples related to this tutorial, with links to their code in the [Quix Code Samples GitHub repository](https://github.com/quixio/quix-samples){target=_blank}: - -* [TfL traffic camera feed](https://github.com/quixio/quix-samples/tree/main/python/sources/TFL-Camera-Feed) -* [TfL frame grabber](https://github.com/quixio/quix-samples/tree/main/python/transformations/TFL-Camera-Frame-Extraction) -* [Computer vision object detection](https://github.com/quixio/quix-samples/tree/main/python/transformations/Image-processing-object-detection) -* [Web UI](https://github.com/quixio/quix-samples/tree/main/nodejs/advanced/Image-Processing-UI) - -## Getting help - -If you need any assistance, we're here to help in the [Quix forum](https://forum.quix.io/){target="_blank"}. - ## Next Steps Here are some suggested next steps to continue on your Quix learning journey: -* Build something with our code samples. You could take the camera feed, frame grabber, and object detection code samples, and add your own service to these, for example add a custom UI, or a simple service that just logs vehicles for a road that you have a specific interest in (maybe you live there). +* Build something with our [code samples](../../samples/samples.md). You could take the camera feed, frame grabber, and object detection code samples, and add your own service to these, for example add a custom UI, or a simple service that just logs vehicles for a road that you have a specific interest in (maybe you live there). * Try the [Chat sentiment analysis tutorial](../sentiment-analysis/index.md). * If you decide to build your own connectors and apps, you can contribute something to the Code Samples. Visit the [GitHub Code Samples repository](https://github.com/quixio/quix-samples){target=_blank}. Fork our Code Samples repo and submit your code, updates, and ideas. What will you build? Let us know! We’d love to feature your application or use case in our [newsletter](https://www.quix.io/community/). + +## Get help + +If you have any further questions, we're here to help in the [Quix forum](https://forum.quix.io/){target="_blank"}. diff --git a/docs/platform/tutorials/sentiment-analysis/customize-the-ui.md b/docs/platform/tutorials/sentiment-analysis/customize-the-ui.md index 510fd1dd..c332301f 100644 --- a/docs/platform/tutorials/sentiment-analysis/customize-the-ui.md +++ b/docs/platform/tutorials/sentiment-analysis/customize-the-ui.md @@ -2,9 +2,9 @@ In this lab you use everything you've learned so far, to add a customization to the pipeline. Specifically, you change the name of the chat room in the web UI. -You develop this change on a feature branch, and then you create a PR to merge your new feature into the develop branch. +You develop this change on a feature branch, and then you create a PR to merge your new feature into the `tutorial` branch. -This is a common pattern for development - you can test your new service on the feature branch, and then test again on the develop branch, before final integration into the production `main` branch. +This is a common pattern for development - you can test your new service on the feature branch, and then test again on the `tutorial` branch, before final integration into the production `main` branch. ## Create an environment @@ -16,13 +16,11 @@ To create a new environment (and branch): 2. Create a new environment called `Rename Chat Room`. -3. Create a new branch called `rename-chat-room`. To do this, from the branch dropdown click `+ New branch` which displays the New branch dialog: - - ![New branch](./images/new-branch.png) +3. Create a new branch called `rename-chat-room`. To do this, from the branch dropdown click `+ New branch` which displays the New branch dialog. !!! important - Make sure you branch from the `develop` branch, not `main`, as you are going to merge your changes onto the `develop` branch. + Make sure you branch from the `tutorial` branch, not `main`, as you are going to merge your changes back into the `tutorial` branch. 4. Complete creation of the environment using the default options. @@ -68,21 +66,19 @@ At this point the redeployment will restart. You see the spinner as the service ![New name](./images/new-name.png) -Once you're happy with your change you can move on to merge this to the `develop` branch. +Once you're happy with your change you can move on to merge this to the `tutorial` branch. ## Merge the feature -Once you are sure that the changes on your feature branch are tested, you can then merge your changes onto the `develop`` branch. Here your changes undergo further tests before finally being merged into production. +Once you are sure that the changes on your feature branch are tested, you can then merge your changes onto the `tutorial` branch. Here your changes undergo further tests before finally being merged into production. -To merge your feature branch, `rename-chat-room` into `develop`: +To merge your feature branch, `rename-chat-room` into `tutorial`: 1. Select `Merge request` from the menu as shown: ![Merge request menu](./images/merge-request-menu.png) -2. In the `Merge request` dialog, set the `rename-chat-room` branch to merge into the `develop` branch, as shown: - - ![Merge request dialog](./images/merge-request-dialog.png) +2. In the `Merge request` dialog, set the `rename-chat-room` branch to merge into the `tutorial` branch. You are going to create a pull request, rather than perform a direct merge. This enables you to have the PR reviewed in GitHub (or other Git provider). You are also going to do a squash and merge, as much of the feature branch history is not required. @@ -106,13 +102,11 @@ To create the pull request: You can just merge, you don't have to squash and merge. You would then retain the complete commit history for your service while it was being developed. Squash and merge is used in this case by way of example, as the commit messages generated while the service was being developed were deemed to be not useful in this case. -## Resync the Develop environment - -You have now merged your new feature into the `develop` branch in the Git repository. Your Quix view in the Develop environment is now out of sync with the Git repository. If you click on your Develop environment in Quix, you'll see it is now a commit (the merge commit) behind: +## Resync the environment -![Develop behind](./images/develop-behind.png) +You have now merged your new feature into the `tutorial` branch in the Git repository. Your Quix view in the Tutorial environment is now out of sync with the Git repository. If you click on your Tutorial environment in Quix, you'll see it is now a commit (the merge commit) behind. -You now need to make sure your Develop environment in Quix is synchronized with the Git repository. To do this: +You now need to make sure your Tutorial environment in Quix is synchronized with the Git repository. To do this: 1. Click on `Sync environment`. The `Sync environment` dialog is displayed. @@ -120,7 +114,7 @@ You now need to make sure your Develop environment in Quix is synchronized with 3. Click `Go to pipeline`. -Your new service will build and start in the Develop environment, where you can now carry out further testing. When you are satisfied this feature can be released tp production, then you would repeat the previous process to merge your changes to Production `main`. +Your new service will build and start in the Tutorial environment, where you can now carry out further testing. When you are satisfied this feature can be released to production, then you would repeat the previous process to merge your changes to Production `main`. ## 🏃‍♀️ Next step diff --git a/docs/platform/tutorials/sentiment-analysis/get-project.md b/docs/platform/tutorials/sentiment-analysis/get-project.md index d6867fc0..3875d7ad 100644 --- a/docs/platform/tutorials/sentiment-analysis/get-project.md +++ b/docs/platform/tutorials/sentiment-analysis/get-project.md @@ -29,7 +29,7 @@ To fork the repository: 1. Navigate to the [Quix GitHub repository](https://github.com/quixio/chat-demo-app){target="_blank"}. -2. Click the `Fork` button to fork the repo into your GitHub account (or equivalent Git provider if you don't have a GitHub account). Make sure you fork all branches, as you will be looking at the `develop` branch. +2. Click the `Fork` button to fork the repo into your GitHub account (or equivalent Git provider if you don't have a GitHub account). Make sure you fork all branches, as you will be looking at the `tutorial` branch. !!! tip @@ -76,15 +76,15 @@ To link Quix to this forked repository: You now need to add an environment to your project. This is explained in the following section. -## Create your Develop environment +## Create your environment -A Quix project contains at least one branch. For the purposes of this tutorial you will examine the `develop` branch of the project. In a Quix project a branch is encapsulated in an environment. You'll create a `Develop` environment mapped to the `develop` branch of the repository. +A Quix project contains at least one branch. For the purposes of this tutorial you will examine the `tutorial` branch of the project. In a Quix project a branch is encapsulated in an environment. You'll create a `Tutorial` environment mapped to the `tutorial` branch of the repository. -Now create an environment called `Develop` which uses the `develop` branch: +Now create an environment called `Tutorial` which uses the `tutorial` branch: -1. Enter the environment name `Develop`. +1. Enter the environment name `Tutorial`. -2. Select the `develop` branch from the dropdown. +2. Select the `tutorial` branch from the dropdown. Make sure the branch is protected, by making sure the `This branch is protected` checkbox is selected. diff --git a/docs/platform/tutorials/sentiment-analysis/images/develop-behind.png b/docs/platform/tutorials/sentiment-analysis/images/develop-behind.png deleted file mode 100644 index f306b131..00000000 Binary files a/docs/platform/tutorials/sentiment-analysis/images/develop-behind.png and /dev/null differ diff --git a/docs/platform/tutorials/sentiment-analysis/images/merge-request-dialog.png b/docs/platform/tutorials/sentiment-analysis/images/merge-request-dialog.png deleted file mode 100644 index 6c371082..00000000 Binary files a/docs/platform/tutorials/sentiment-analysis/images/merge-request-dialog.png and /dev/null differ diff --git a/docs/platform/tutorials/sentiment-analysis/images/new-branch.png b/docs/platform/tutorials/sentiment-analysis/images/new-branch.png deleted file mode 100644 index 2cc4f09d..00000000 Binary files a/docs/platform/tutorials/sentiment-analysis/images/new-branch.png and /dev/null differ diff --git a/docs/platform/tutorials/sentiment-analysis/images/pipeline-view.png b/docs/platform/tutorials/sentiment-analysis/images/pipeline-view.png deleted file mode 100644 index 0700a4a3..00000000 Binary files a/docs/platform/tutorials/sentiment-analysis/images/pipeline-view.png and /dev/null differ diff --git a/docs/platform/tutorials/sentiment-analysis/images/running-ui.png b/docs/platform/tutorials/sentiment-analysis/images/running-ui.png deleted file mode 100644 index 41781424..00000000 Binary files a/docs/platform/tutorials/sentiment-analysis/images/running-ui.png and /dev/null differ diff --git a/docs/platform/tutorials/sentiment-analysis/images/sentiment-analysis-pipeline-segment.png b/docs/platform/tutorials/sentiment-analysis/images/sentiment-analysis-pipeline-segment.png deleted file mode 100644 index ddbc3e5f..00000000 Binary files a/docs/platform/tutorials/sentiment-analysis/images/sentiment-analysis-pipeline-segment.png and /dev/null differ diff --git a/docs/platform/tutorials/sentiment-analysis/images/web-ui-pipeline-segment.png b/docs/platform/tutorials/sentiment-analysis/images/web-ui-pipeline-segment.png index 9dd3488c..0765536a 100644 Binary files a/docs/platform/tutorials/sentiment-analysis/images/web-ui-pipeline-segment.png and b/docs/platform/tutorials/sentiment-analysis/images/web-ui-pipeline-segment.png differ diff --git a/docs/platform/tutorials/sentiment-analysis/index.md b/docs/platform/tutorials/sentiment-analysis/index.md index 9fe6178b..a78b061b 100644 --- a/docs/platform/tutorials/sentiment-analysis/index.md +++ b/docs/platform/tutorials/sentiment-analysis/index.md @@ -76,11 +76,7 @@ You also need to have a Git account. This could be GitHub, Bitbucket, GitLab, or ## The pipeline -This is the message processing pipeline for this project: - -![The pipeline](./images/pipeline-view.png) - -The main services in the pipeline are: +The main services in the [pipeline](https://portal.platform.quix.ai/pipeline?workspace=demo-chatappdemo-prod&token=eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6Ik1qVTBRVE01TmtJNVJqSTNOVEpFUlVSRFF6WXdRVFF4TjBSRk56SkNNekpFUWpBNFFqazBSUSJ9.eyJodHRwczovL3F1aXguYWkvb3JnX2lkIjoiZGVtbyIsImh0dHBzOi8vcXVpeC5haS9vd25lcl9pZCI6ImF1dGgwfDI4YWQ4NWE4LWY1YjctNGFjNC1hZTVkLTVjYjY3OGIxYjA1MiIsImh0dHBzOi8vcXVpeC5haS90b2tlbl9pZCI6ImMzNzljNmVlLWNkMmYtNDExZC1iOGYyLTMyMDU0ZDc5MTY2YSIsImh0dHBzOi8vcXVpeC5haS9leHAiOiIxNzM3ODI5NDc5LjIyMyIsImlzcyI6Imh0dHBzOi8vYXV0aC5xdWl4LmFpLyIsInN1YiI6ImtyMXU4MGRqRllvUUZlb01nMGhqcXZia29lRkxFRDVBQGNsaWVudHMiLCJhdWQiOiJxdWl4IiwiaWF0IjoxNjk1NzE2MDI4LCJleHAiOjE2OTgzMDgwMjgsImF6cCI6ImtyMXU4MGRqRllvUUZlb01nMGhqcXZia29lRkxFRDVBIiwiZ3R5IjoiY2xpZW50LWNyZWRlbnRpYWxzIiwicGVybWlzc2lvbnMiOltdfQ.Ndm0K2iNHPxDq1ohF-yb-6LzIqx_UY8Ptcq0kAwSNye12S3deX_eDkC4XqZqW2NoSLd3GsmWV9PZGetGGp2IlqshQFZtUMp6WP6hq917ZC1i8JFx93PAbY7NT_88nFDovVlaRcoTpWvI-03KbryLkAoB28c6qb3EFwjCWFBuy_yA4yjQ8uF0-AZ0R9Qi4IBaekXWqcgO0a91gVRg0oA_hnzJFoR-EnZ2G1ZSxtuVgnyyPuQTMUvzJuUT_IJTLzEB_kejX0pcXRZBIwHP8MWLB4mE5DtIdz4jm8WIA4eZJZ7ZCG4dk-adQwZ2BdkNknV5eEwRgRJL4ybaplkaDlR-dg){target_blank} are: 1. *UI* - provides the chat UI, and shows the sentiment being applied to the chat messages. @@ -102,7 +98,7 @@ This tutorial is divided up into several parts, to make it a more manageable lea 5. [Explore ther Twitch service](twitch-service.md) - you explore the service that interfaces Quix with Twitch using the [Twitch API](https://dev.twitch.tv/docs/api/){target=_blank}. -6. [Customize the UI](customize-the-ui.md) - you carry out a simple customization to the chat UI on a feature branch, and then merge your changes onto the develop branch. +6. [Customize the UI](customize-the-ui.md) - you carry out a simple customization to the chat UI on a feature branch, and then merge your changes onto the `tutorial` branch. 7. [Summary](summary.md) - you are presented with a summary of the work you have completed. diff --git a/docs/platform/tutorials/sentiment-analysis/sentiment-analysis-service.md b/docs/platform/tutorials/sentiment-analysis/sentiment-analysis-service.md index 5176834e..79ab6b31 100644 --- a/docs/platform/tutorials/sentiment-analysis/sentiment-analysis-service.md +++ b/docs/platform/tutorials/sentiment-analysis/sentiment-analysis-service.md @@ -2,18 +2,19 @@ In this part of the tutorial you learn about the sentiment analysis service. -![Sentiment analysis](./images/sentiment-analysis-pipeline-segment.png) - This service uses the Hugging Face model to calculate sentiment for messages, and these are then displayed on the web UI. -There are two deployments here, one for messages, and one for draft messages. +There are three deployed services here: + +1. Chat sentiment analysis +2. Drafts sentiment analysis +3. Twitch sentiment analysis ## 💡 Key ideas The key ideas on this page: * Hugging Face model is used to generate sentiment values -* There are two sentiment analysis services - one for messages and one for draft messages * How to examine message formats ## What it does @@ -28,7 +29,7 @@ The sentiment analysis service subscribes to the `chat-messages` topic and perfo The drafts sentiment analysis service performs sentiment analysis on messages published to the `drafts` topic and publishes sentiment values to the `drafts_sentiment` topic. -The UI subscribes to these topics, and can then display the setiment values in the UI. +The UI subscribes to these topics, and can then display the sentiment values in the UI. ## 👩‍🔬 Lab - Examine messages diff --git a/docs/platform/tutorials/sentiment-analysis/summary.md b/docs/platform/tutorials/sentiment-analysis/summary.md index be33c703..0eee3f4b 100644 --- a/docs/platform/tutorials/sentiment-analysis/summary.md +++ b/docs/platform/tutorials/sentiment-analysis/summary.md @@ -1,12 +1,12 @@ # Summary -In this tutorial you've learned: +In this tutorial you've: -* How to fork a GitHub repository and then integrate it with Quix +* Learned how to fork a GitHub repository and then integrate it with Quix * Examined the code for several services in the pipeline * Learned that web apps can read and write to Quix topics using the [Quix Streaming APIs](../../../apis/intro.md) -* Used the message view in the Quix UI to examine messages flowing on topics. -* Created a customization to the UI on a feature environment (branch) and then seen how to merge that to develop +* Used the message view in the Quix UI to examine messages flowing on topics +* Created a customization to the UI on a feature environment (branch) and then seen how to merge that to the `tutorial` branch ## Next Steps @@ -18,6 +18,6 @@ Here are some suggested next steps to continue on your Quix learning journey: What will you build? Let us know! We’d love to feature your application or use case in our [newsletter](https://www.quix.io/community/). -## Getting help +## Get help -If you need any assistance while following the tutorial, we're here to help in the [Quix forum](https://forum.quix.io/){target="_blank"}. +If you have any further questions, we're here to help in the [Quix forum](https://forum.quix.io/){target="_blank"}. diff --git a/docs/platform/tutorials/sentiment-analysis/try-the-ui.md b/docs/platform/tutorials/sentiment-analysis/try-the-ui.md index a8422689..739dc351 100644 --- a/docs/platform/tutorials/sentiment-analysis/try-the-ui.md +++ b/docs/platform/tutorials/sentiment-analysis/try-the-ui.md @@ -8,31 +8,25 @@ In this part of the tutorial you try out the UI to get a feel for the project an ## Prerequisites -You need your [workspace ID](../../how-to/get-environment-id.md) and a [PAT](../../how-to/personal-access-token-pat.md) to get the UI working. Once you have these, you'll need to access the code for the service, and set these values. +!!! tip + + If you just want to try out the UI without performing the following steps, you can do that in the [deployed project](https://sentimentdemoui-demo-chatappdemo-prod.deployments.quix.ai/chat){target=_blank}. -To do this, in the Applications list, click on the `Sentiment Demo UI` application. In the file `src/app/services/quix.service.ts`, locate the following code and replace the place holders with your values: +You need a [PAT](../../how-to/personal-access-token-pat.md) to get the UI working. -``` typescript -/*~-~-~-~-~-~-~-~-~-~-~-~-~-~-~-*/ - /*WORKING LOCALLY? UPDATE THESE!*/ - private workingLocally = false; // set to true if working locally - private token: string = ''; // Create a token in the Tokens menu and paste it here - public workspaceId: string = ''; // Look in the URL for the Quix Portal your workspace ID is after 'workspace=' -``` +Once you have this, you'll need to create a secret, and then use this secret in the `bearer_token` environment variable. -Note if you just want to try out the UI without performing the following steps, you can do that in the [demo](https://sentimentdemoui-demo-chatappdemo-prod.deployments.quix.ai/chat){target=_blank}. +[Read about environment variables and secret management](../../how-to/environment-variables.md). ## Try out the UI in your Quix account Now try out the UI you just deployed. To do this: -1. In the pipeline view find the UI service tile, as shown in the following screenshot: +1. In the pipeline view find the UI service tile: ![Deployed UI tile](./images/web-ui-pipeline-segment.png){width=200px} -2. In the service tile, click the external link icon to launch the UI in a new tab: - - ![The sentiment analysis demo page](./images/running-ui.png) +2. In the service tile, click the external link icon to launch the UI in a new tab. 3. Enter your username (it can be anything) and then type in some messages. Note that the typing indicator displays the sentiment as you type your message. diff --git a/docs/platform/tutorials/sentiment-analysis/ui-service.md b/docs/platform/tutorials/sentiment-analysis/ui-service.md index 5dd63f35..b8ef8d8b 100644 --- a/docs/platform/tutorials/sentiment-analysis/ui-service.md +++ b/docs/platform/tutorials/sentiment-analysis/ui-service.md @@ -4,11 +4,7 @@ In this part of the tutorial you learn about the web UI service. ![Web UI pipeline](./images/web-ui-pipeline-segment.png) -This provides the rather fancy interface for you to interact with this project. - -The following screenshot shows some chat taking place: - -![image processing web UI](./images/running-ui.png) +This provides the UI for you to interact with this app. ## 💡 Key ideas diff --git a/docs/platform/what-is-quix.md b/docs/platform/what-is-quix.md index 2b15f526..3444efcd 100644 --- a/docs/platform/what-is-quix.md +++ b/docs/platform/what-is-quix.md @@ -151,9 +151,10 @@ Event stream processing is implemented by building pipelines consisting of a ser Further, changes in this file in one environment can be merged into another environment, giving you the ability to test changes in one environment, before deploying into another, while the change history is retained in Git. -An example pipeline is shown in the following screenshot: - -![Pipeline View](../platform/tutorials/computer-vision/images/pipeline-overview-2.png) + You can see that a typical pipeline is built from sources, transforms, and destinations. diff --git a/layouts/background.jpg b/layouts/background.jpg new file mode 100644 index 00000000..9cc51780 Binary files /dev/null and b/layouts/background.jpg differ diff --git a/layouts/custom.yml b/layouts/custom.yml new file mode 100644 index 00000000..69f49bf7 --- /dev/null +++ b/layouts/custom.yml @@ -0,0 +1,53 @@ +size: { width: 1200, height: 630 } +layers: +#Set background image + - background: + image: layouts/background.jpg + +#Docs URL text + - size: { width: 150, height: 30 } + offset: { x: 144, y: 64 } + typography: + content: quix.io/docs + align: start + color: "#FFFFFF66" + font: + family: Inter + style: SemiBold + +#Page title text + - size: { width: 768, height: 336 } + offset: { x: 144, y: 126 } + typography: + content: "{{ page.title }}" + overflow: shrink + align: start + color: white + line: + amount: 3 + height: 1.2 + font: + family: Inter + style: SemiBold + +## TODO try to get page description on the social card too +# #Page title text +# - size: { width: 768, height: 336 } +# offset: { x: 144, y: 235 } +# typography: +# content: >- +# {%- if layout.description -%} +# {{ layout.description }} +# {%- else -%} +# No page desc +# {%- endif -%} + +# overflow: shrink +# align: start +# color: lightgrey +# line: +# amount: 3 +# height: 2 +# font: +# family: Inter +# style: SemiBold diff --git a/mkdocs.yml b/mkdocs.yml index 31db8b50..d0322ad0 100644 --- a/mkdocs.yml +++ b/mkdocs.yml @@ -29,6 +29,7 @@ nav: - 'How To': - 'Create a project': 'platform/how-to/create-project.md' - 'Project structure': 'platform/how-to/project-structure.md' + - 'Create an environment': 'platform/how-to/create-environment.md' - 'Create an application': 'platform/how-to/create-application.md' - 'Get Environment ID': 'platform/how-to/get-environment-id.md' - 'Get streaming token': 'platform/how-to/streaming-token.md' @@ -136,7 +137,9 @@ plugins: cleanup: true - search: separator: '[\s\-\.]' - - social + - social: + cards_layout_dir: layouts + cards_layout: custom - glightbox - redirects: redirect_maps: @@ -171,6 +174,8 @@ plugins: 'platform/how-to/use-sdk-token.md': 'platform/how-to/streaming-token.md' 'platform/how-to/connect-to-quix.md': 'platform/ingest-data.md' 'apis/data-catalogue-api/intro.md': 'apis/query-api/index.md' + 'apis/streaming-reader-api/authenticate.md': 'apis/prerequisites.md' + 'apis/streaming-writer-api/authenticate.md': 'apis/prerequisites.md' 'apis/streaming-reader-api/intro.md': 'apis/streaming-reader-api/index.md' 'apis/streaming-writer-api/intro.md': 'apis/streaming-writer-api/index.md' 'apis/query-api/intro.md': 'apis/query-api/index.md'