diff --git a/ai-vision-lab/1-configure-oci/1-configure-oci.md b/ai-vision-lab/1-configure-oci/1-configure-oci.md index 6cd90f37..c0b31fa0 100644 --- a/ai-vision-lab/1-configure-oci/1-configure-oci.md +++ b/ai-vision-lab/1-configure-oci/1-configure-oci.md @@ -1,10 +1,10 @@ -# Configure OCI API keys +# Configure the OCI API keys ## Introduction -In this lab, you learn how to configure OCI API keys. In Oracle Cloud Infrastructure (OCI), API keys are used for secure authentication when accessing OCI resources through REST APIs. +In this lab, you learn how to configure the OCI API keys. In Oracle Cloud Infrastructure (OCI), API keys are used for secure authentication when accessing OCI resources through REST APIs. -OCI API keys consist of two parts: a **Public key** and a **Private key**. You use the Console to generate the Private/Public key pair. +OCI API keys consist of two parts: a **Public key** and a **Private key**. You use the OCI console to generate the Private/Public key pair. Estimated Time: 10 Minutes @@ -17,31 +17,31 @@ In this lab, you: ## Task 1: Generate API Keys using OCI Console -To Generate API Keys using OCI Console: +To Generate the API Keys using OCI Console: 1. Login into your OCI Account. ![Add API Key](images/oci-login.png " ") -2. Open the Profile menu and click Profile hyperlink. +2. Click on the Profile icon at the top-right corner and select your Profile hyperlink. ![Profile Menu](images/profile.png " ") -3. In the Resources section at the bottom left, click **API Keys** and then click **Add API Key**. +3. Under Resources section at the bottom-left, select **API Keys** and then click **Add API Key**. ![Add API Key](images/api-keys.png " ") -4. The Add API Key dialog displays. Select **Generate API Key Pair** to create a new key pair. +4. The Add API Key dialog is displayed. Select **Generate API Key Pair** to create a new key pair. 5. Click **Download Private Key** and save it to your local device. You do not need to download the public key. - *Note: You will use this private key while configuring web credentials in Oracle APEX later in this workshop.* + *Note: You will use this private key while configuring the web credentials in Oracle APEX in the upcoming lab.* 6. Click **Add**. ![Profile Menu](images/add-api-key.png " ") -7. The key is added, and the Configuration File Preview is displayed. Copy and paste the configuration file snippet from the text box. You will use this information in Oracle APEX Web Credentials. +7. The key is added, and the Configuration File Preview is displayed. Copy and save the configuration file snippet from the text box. You will use this information in Oracle APEX Web Credentials. ![Profile Menu](images/configuration-preview.png " ") @@ -57,7 +57,7 @@ To create web credentials in Oracle APEX: ![Login into your APEX account](images/apex-login.png " ") -2. On the Workspace home page, click App Builder. +2. On the Workspace home page, click **App Builder**. ![Click App Builder](images/app-builder1.png " ") @@ -94,7 +94,7 @@ To create web credentials in Oracle APEX: ## Summary -You now know how to generate API Keys using OCI console. Also, you know how to create web credentials in Oracle APEX. +You now know how to generate API Keys using OCI console. Furthermore, you know how to create web credentials in Oracle APEX. You may now **proceed to the next lab**. diff --git a/ai-vision-lab/1-configure-oci/images/profile.png b/ai-vision-lab/1-configure-oci/images/profile.png index f430f384..3fb31312 100644 Binary files a/ai-vision-lab/1-configure-oci/images/profile.png and b/ai-vision-lab/1-configure-oci/images/profile.png differ diff --git a/ai-vision-lab/2-import-app/2-import-app.md b/ai-vision-lab/2-import-app/2-import-app.md index e2d23950..00a5258e 100644 --- a/ai-vision-lab/2-import-app/2-import-app.md +++ b/ai-vision-lab/2-import-app/2-import-app.md @@ -51,7 +51,7 @@ In this lab, you: The Social Media application is configured with a custom Security Authentication scheme. In this lab, you change the Authentication Type to Oracle APEX Accounts. -1. On the Workspace home page, click the **App Builder** icon. Select the Social Media application. On the Application home page, click **Shared Components**. The Shared Components page appears. +1. On the Workspace home page, click **App Builder**. Select the Social Media application. On the Application home page, click **Shared Components**. The Shared Components page appears. ![Click Import](images/shared-comp1.png " ") @@ -63,11 +63,11 @@ The Social Media application is configured with a custom Security Authentication ![Click Import](images/create-button5.png " ") -4. Specify how the scheme should be created. In this case, select **Based on a pre-configured scheme from the gallery** and Click **Next**. +4. Specify how the scheme should be created. In this case, select **Based on a pre-configured scheme from the gallery** and click **Next**. ![Click Import](images/create-authentication-scheme.png " ") -5. Specify a **Name** for Authentication Scheme. For Scheme Type, select **Oracle APEX Accounts**. +5. Specify a **Name** for Authentication Scheme. For Scheme Type, select **Oracle APEX Accounts**. ![Click Import](images/oracle-apex-accounts1.png " ") @@ -76,20 +76,20 @@ The Social Media application is configured with a custom Security Authentication ## Task 3: Add a Column to the Table using Object Browser -To collect the output generated by OCI AI Vision, you add a new column in SM\_POSTS Table. This addition enables you to store and retrieve the relevant information seamlessly. +To collect the output generated by OCI AI Vision, you add a new column in the *SM\_POSTS* Table. This addition enables you to store and retrieve the relevant information seamlessly. To Add a new column to the SM\_POSTS Table: -1. Click **SQL Workshop** and Navigate to **Object Browser**. In the Object Tree, expand Tables and select **SM_POSTS** table. +1. Click **SQL Workshop** and navigate to **Object Browser**. In the object tree, expand Tables and select **SM\_POSTS** table. ![Click Import](images/sql-work.png " ") ![Click Import](images/add-column.png " ") -2. On the columns tab, Click **Add Column** under SM\_POSTS Table. +2. On the columns tab, click **Add Column**. -3. Configure the Add Column attributes. At a minimum, enter a column name and select a type. Depending upon the column type, specify whether the column requires precision, scale, a default value, or is nullable. For more details on an attribute, see field-level Help. +3. The Add Column wizard is displayed. Configure the Add Column attributes. At a minimum, enter a column name and select a type. Depending upon the column type, specify whether the column requires precision, scale, a default value, or is nullable. For more details on an attribute, see field-level Help. Enter the following and click **Apply**. - **Column**: AI_OUTPUT diff --git a/ai-vision-lab/3-integrate-oci-vision/3-integrate-oci-vision.md b/ai-vision-lab/3-integrate-oci-vision/3-integrate-oci-vision.md index aeb85b71..c8254fc3 100644 --- a/ai-vision-lab/3-integrate-oci-vision/3-integrate-oci-vision.md +++ b/ai-vision-lab/3-integrate-oci-vision/3-integrate-oci-vision.md @@ -19,7 +19,7 @@ In this lab, you: In this task, you create a REST Data Source with OCI vision REST API as the endpoint. -1. Navigate to the application home page and Click **Shared Components**. +1. Navigate to the application home page and click **Shared Components**. ![Click Timeline](images/sm-shared-comp1.png " ") @@ -31,18 +31,18 @@ In this task, you create a REST Data Source with OCI vision REST API as the endp ![Click Timeline](images/rest-data-source-create1.png " ") -4. Select **From scratch** and Click **Next**. +4. Select **From scratch** and click **Next**. ![Click Timeline](images/rest-method.png " ") -5. Under Create REST Data Source, enter the following attributes and Click **Next**. +5. Under Create REST Data Source, enter the following attributes and click **Next**. - **Rest Data Source Type**: Select **Oracle Cloud Infrastructure (OCI)** - **Name**: Enter **OCI Vision** - **URL Endpoint**: https://vision.aiservice.us-ashburn-1.oci.oraclecloud.com/20220125/actions/analyzeImage - *Note: URL Endpoint may differ based on your OCI tenancy. Refer to the below link for more details*- https://docs.oracle.com/en-us/iaas/api/#/en/vision/20220125 + *Note: URL Endpoint may differ based on your OCI tenancy. Refer to the following link for more details*- https://docs.oracle.com/en-us/iaas/api/#/en/vision/20220125 ![Click Timeline](images/create-rest-data.png " ") @@ -69,7 +69,7 @@ In this task, you create a REST Data Source with OCI vision REST API as the endp 10. Select Operations Tab and click **Edit icon** for the POST operation and enter the following: - **Database Operation**: -Not Mapped- - - **Request Body Template**: Copy and paste below JSON + - **Request Body Template**: Copy and paste JSON given below. ``` @@ -165,7 +165,7 @@ In this task, you create a REST Data Source with OCI vision REST API as the endp In this task, you create a page process to invoke the OCI Vision REST Data Source implemented in the previous task. -1. Navigate to Application Homepage by clicking on the Application ID. +1. Navigate to the application homepage by clicking on the Application ID. ![Click Timeline](images/click-app-id11.png " ") @@ -173,11 +173,11 @@ In this task, you create a page process to invoke the OCI Vision REST Data Sourc ![Click Timeline](images/select-timeline1.png " ") -3. Right click **Timeline** region under Rendering Pane and click **Create Page Item**. +3. Right-click **Timeline** region under Rendering Pane and click **Create Page Item**. ![Click Timeline](images/create-page-item2.png " ") -4. In the Property Editor, Enter the following: +4. In the Property Editor, enter the following: Under Identification: @@ -187,7 +187,7 @@ In this task, you create a page process to invoke the OCI Vision REST Data Sourc ![Click Timeline](images/response-page-item1.png " ") -5. Navigate to Processing Tab (left pane) and right click on Processing Tab or Processes and click **Create Process**. +5. Navigate to the Processing Tab (left pane) and right click on Processing Tab or Processes and click **Create Process**. ![Click Timeline](images/processing.png " ") @@ -279,11 +279,11 @@ In this task, you create a page process to invoke the OCI Vision REST Data Sourc ![Click Timeline](images/response-param.png " ") -13. Right click on the **Analyze Image** Process and Select **Add Child Process**. +13. Right click on the **Analyze Image** process and select **Add Child Process**. ![Click Timeline](images/add-child-process12.png " ") -14. In the Property Editor,Enter the following: +14. In the Property Editor, enter the following: Under Identification : @@ -316,12 +316,12 @@ In this task, you create a page process to invoke the OCI Vision REST Data Sourc ![Click Timeline](images/parse-response1.png " ") -15. Click **Save** +15. Click **Save**. ## Task 3: Enhance Timeline Region to include AI Search In this task, you create a page item P1\_AI\_SEARCH using which the end user can enter the search terms and search through the images. -1. Go to the Rendering tab, right click on the **After Logo** section and select **Create Page Item**. +1. Go to the Rendering tab, right-click **After Logo** and select **Create Page Item**. ![Click Timeline](images/after-logo-page-item1.png " ") diff --git a/ai-vision-lab/4-run-app/4-run-app.md b/ai-vision-lab/4-run-app/4-run-app.md index 52d54da1..b95c7e95 100644 --- a/ai-vision-lab/4-run-app/4-run-app.md +++ b/ai-vision-lab/4-run-app/4-run-app.md @@ -17,15 +17,16 @@ In this lab, you: ![Click Timeline](images/social-media-login.png " ") -2. Click **Add Post** Button available on the Navigation Bar. +2. Click **Add Post** on the Navigation Bar. -3. Drag and Drop the image from your local system or use the Choose File button to upload image from your local system. Then, Click **Post**. +3. Drag and Drop the image from your local system or use the Choose File button to upload image from your local system. Then, click **Post**. ![Click Timeline](images/add-post.png " ") - You can now see that the image is posted. +The image is posted on your timeline. -4. Now, type your Search Term in the AI Search Field available in the Navigation Bar and then click **Enter**. The app searches and displays all the images that contain the corresponding search term. In the following example, the app displays all the images containing a 'Sky'. +4. Now, type your Search Term in the AI Search Field available in the Navigation Bar and then click **Enter**. The app searches and displays all the images that contain the corresponding search term. +In the following example, when you enter 'Sky' in the AI Search Field, the app displays all the images that has sky in them. ![Click Timeline](images/search-result.png " ") diff --git a/ai-vision-lab/5-improve-ux/5-improve-ux.md b/ai-vision-lab/5-improve-ux/5-improve-ux.md index ea76dda1..4450cc77 100644 --- a/ai-vision-lab/5-improve-ux/5-improve-ux.md +++ b/ai-vision-lab/5-improve-ux/5-improve-ux.md @@ -49,8 +49,8 @@ In this task, you make use of the Image Upload item that allows user to crop ima In this task, you add a Share button that allows a user to share the post via email, or other apps. Note: -- On macOS, the Share will not work on Chrome and Firefox browsers. Use Edge or Safari browsers instead. -- On Windows, the Share will not work on Edge browser. Use Chrome, Edge or Safari browsers instead. +- On macOS, Share will NOT work on Chrome and Firefox browsers. Use Edge or Safari browsers. +- On Windows, Share will NOT work on Edge browser. Use Chrome, Edge or Safari browsers. 1. Navigate to the Timeline page. Under the **Timeline** region, right-click **Actions** and select **Create Action**. @@ -153,7 +153,7 @@ Note: ![Property Editor](images/true-action-share.png " ") -8. **Save the Run** the page. You can see a Share button for each post. Clicking on the Share button will open a context menu to choose the app where you want to share. In this example, choose Mail and the post is attached as an image in an email draft with an associated text. +8. **Save the Run** the page. You can see a Share button for each post. Click on **Share** to open a context menu and choose the app you want to share with. In this example, choose **Mail** and the post is attached as an image in an email draft with an associated text. ![App output](images/run-app-share.png " ") @@ -171,7 +171,7 @@ In this task, you enable the Push Notifications for the Social Media App wherein - Column: **NOTIFIED** - Data Type: **VARCHAR2** - Length: **1** - - Deafult: **'N'** (By default all rows in the SM_REACTIONS will have the default value 'N' to indicate that the user has not yet been notified.) + - Deafult: **'N'** (By default, all rows in the SM\_REACTIONS will have the default value 'N' to indicate that the user has not yet been notified.) Click **Apply**. diff --git a/ai-vision-lab/5-improve-ux/images/automations.png b/ai-vision-lab/5-improve-ux/images/automations.png index 71e53ac0..55c93d46 100644 Binary files a/ai-vision-lab/5-improve-ux/images/automations.png and b/ai-vision-lab/5-improve-ux/images/automations.png differ diff --git a/ai-vision-lab/5-improve-ux/images/pwa.png b/ai-vision-lab/5-improve-ux/images/pwa.png index 756b97c7..29505942 100644 Binary files a/ai-vision-lab/5-improve-ux/images/pwa.png and b/ai-vision-lab/5-improve-ux/images/pwa.png differ