Skip to content

Commit 3887708

Browse files
authored
Merge pull request #89034 from PatrickFarley/comvis-qss
[cog serv] Comvis qss
2 parents 7ec3606 + 53ec133 commit 3887708

File tree

4 files changed

+303
-1
lines changed

4 files changed

+303
-1
lines changed

articles/cognitive-services/Computer-vision/index.yml

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,11 @@ landingContent:
4343
url: quickstarts-sdk/csharp-sdk.md
4444
- text: Using the Python SDK
4545
url: quickstarts-sdk/python-sdk.md
46-
46+
- text: Using the Java SDK
47+
url: quickstarts-sdk/java-sdk.md
48+
- text: Using the Node SDK
49+
url: quickstarts-sdk/node-sdk.md
50+
4751

4852
- title: Detect objects in images
4953
linkLists:
@@ -59,6 +63,8 @@ landingContent:
5963
url: quickstarts-sdk/python-sdk.md
6064
- text: Using the Java SDK
6165
url: quickstarts-sdk/java-sdk.md
66+
- text: Using the Node SDK
67+
url: quickstarts-sdk/node-sdk.md
6268

6369
# Card
6470
- title: Apply content tags to images
@@ -75,6 +81,8 @@ landingContent:
7581
url: quickstarts-sdk/python-sdk.md
7682
- text: Using the Java SDK
7783
url: quickstarts-sdk/java-sdk.md
84+
- text: Using the Node SDK
85+
url: quickstarts-sdk/node-sdk.md
7886

7987
- title: Use containers
8088
linkLists:
@@ -107,6 +115,8 @@ landingContent:
107115
url: quickstarts-sdk/python-sdk.md
108116
- text: Using the Java SDK
109117
url: quickstarts-sdk/java-sdk.md
118+
- text: Using the Node SDK
119+
url: quickstarts-sdk/node-sdk.md
110120

111121
# - title: Get image descriptions
112122
# linkLists:

articles/cognitive-services/Computer-vision/quickstarts-sdk/java-sdk.md

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ Get started with the Computer Vision client library for Java. Follow these steps
1919
Use the Computer Vision client library for Java to:
2020

2121
* Analyze an image for tags, text description, faces, adult content, and more.
22+
* Recognize printed and handwritten text with the Batch Read API.
2223

2324
[Reference documentation](https://docs.microsoft.com/java/api/overview/azure/cognitiveservices/client/computervision?view=azure-java-stable) | [Artifact (Maven)](https://www.nuget.org/packages/Microsoft.Azure.CognitiveServices.Vision.ComputerVision/) | [Samples](https://azure.microsoft.com/resources/samples/?service=cognitive-services&term=vision&sort=0)
2425

@@ -110,6 +111,7 @@ These code snippets show you how to do the following tasks with the Computer Vis
110111

111112
* [Authenticate the client](#authenticate-the-client)
112113
* [Analyze an image](#analyze-an-image)
114+
* [Read printed and handwritten text](#read-printed-and-handwritten-text)
113115

114116
## Authenticate the client
115117

@@ -207,6 +209,29 @@ The following code prints information about the type of image—whether it i
207209

208210
[!code-java[](~/cognitive-services-quickstart-code/java/ComputerVision/ComputerVisionQuickstart.java?name=snippet_imagetype)]
209211

212+
## Read printed and handwritten text
213+
214+
Computer Vision can read visible text in an image and convert it to a character stream.
215+
216+
> [!NOTE]
217+
> You can also read text in a remote image using its URL. See the sample code on [GitHub](https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/java/ComputerVision/ComputerVisionQuickstart.java) for scenarios involving remote images.
218+
219+
### Call the Recognize API
220+
221+
First, use the following code to call the **recognizePrintedTextInStream** method for the given image. When you add this code to your project, you need to replace the value of `localTextImagePath` with the path to your local image.
222+
223+
[!code-java[](~/cognitive-services-quickstart-code/java/ComputerVision/ComputerVisionQuickstart.java?name=snippet_imagetype)]
224+
225+
### Print Recognize results
226+
227+
The following block of code processes the returned text and parses it to print out the first word in each line. You can use this code to quickly understand the structure of an **OcrResult** instance.
228+
229+
[!code-java[](~/cognitive-services-quickstart-code/java/ComputerVision/ComputerVisionQuickstart.java?name=snippet_read_print)]
230+
231+
Finally, close out the try/catch block and the method definition.
232+
233+
[!code-java[](~/cognitive-services-quickstart-code/java/ComputerVision/ComputerVisionQuickstart.java?name=snippet_read_catch)]
234+
210235
## Run the application
211236

212237
You can build the app with:
Lines changed: 265 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,265 @@
1+
---
2+
title: "Quickstart: Computer Vision client library for Node.js | Microsoft Docs"
3+
description: Get started with the Computer Vision client library for Node.js...
4+
services: cognitive-services
5+
author: PatrickFarley
6+
manager: nitinme
7+
ms.service: cognitive-services
8+
ms.subservice: computer-vision
9+
ms.topic: quickstart
10+
ms.date: 09/18/2019
11+
ms.author: pafarley
12+
---
13+
14+
# Quickstart: Computer Vision client library for Node.js
15+
16+
Get started with the Computer Vision client library for Node.js. Follow these steps to install the package and try out the example code for basic tasks.
17+
18+
Use the Computer Vision client library for Node.js to:
19+
20+
* [Analyze an image](#analyze-an-image)
21+
* [Read printed and handwritten text](#read-printed-and-handwritten-text)
22+
23+
[Reference documentation](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/?view=azure-node-latest) | [Library source code](https://github.com/Azure/azure-sdk-for-js/tree/master/sdk/cognitiveservices/cognitiveservices-computervision) | [Package (npm)](https://www.npmjs.com/package/azure-cognitiveservices-computervision) | [Samples](https://azure.microsoft.com/resources/samples/?service=cognitive-services&term=vision&sort=0)
24+
25+
## Prerequisites
26+
27+
* Azure subscription - [Create one for free](https://azure.microsoft.com/free/)
28+
* The current version of [Node.js](https://nodejs.org/)
29+
30+
## Setting up
31+
32+
### Create a Computer Vision Azure resource
33+
34+
Azure Cognitive Services are represented by Azure resources that you subscribe to. Create a resource for Computer Vision using the [Azure portal](https://docs.microsoft.com/azure/cognitive-services/cognitive-services-apis-create-account) or [Azure CLI](https://docs.microsoft.com/azure/cognitive-services/cognitive-services-apis-create-account-cli) on your local machine. You can also:
35+
36+
* Get a [trial key](https://azure.microsoft.com/try/cognitive-services/#decision) valid for seven days for free. After you sign up, it will be available on the [Azure website](https://azure.microsoft.com/try/cognitive-services/my-apis/).
37+
* View your resource on the [Azure portal](https://portal.azure.com/).
38+
39+
After you get a key from your trial subscription or resource, [create environment variables](https://docs.microsoft.com/azure/cognitive-services/cognitive-services-apis-create-account#configure-an-environment-variable-for-authentication) for the key and endpoint URL, named `COMPUTER_VISION_SUBSCRIPTION_KEY` and `COMPUTER_VISION_ENDPOINT` respectively.
40+
41+
### Create a new Node.js application
42+
43+
In a console window (such as cmd, PowerShell, or Bash), create a new directory for your app, and navigate to it.
44+
45+
```console
46+
mkdir myapp && cd myapp
47+
```
48+
49+
Run the `npm init` command to create a node application with a `package.json` file.
50+
51+
```console
52+
npm init
53+
```
54+
55+
### Install the client library
56+
57+
Install the `ms-rest-azure` and `azure-cognitiveservices-computervision` NPM packages:
58+
59+
```console
60+
npm install azure-cognitiveservices-computervision ms-rest-azure
61+
```
62+
63+
Your app's `package.json` file will be updated with the dependencies.
64+
65+
### Prepare the Node.js script
66+
67+
Create a new file, *index.js*, and open it in a text editor. Add the following import statements.
68+
69+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_imports)]
70+
71+
Then, define a function `computerVision` and declare an async series with primary function and callback function. You will add your quickstart code into the primary function, and call `computerVision` at the bottom of the script.
72+
73+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_functiondef_begin)]
74+
75+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_functiondef_end)]
76+
77+
## Object model
78+
79+
The following classes and interfaces handle some of the major features of the Computer Vision Node.js SDK.
80+
81+
|Name|Description|
82+
|---|---|
83+
| [ComputerVisionClient](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/computervisionclient?view=azure-node-latest) | This class is needed for all Computer Vision functionality. You instantiate it with your subscription information, and you use it to do most image operations.|
84+
|[VisualFeatureTypes](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/visualfeaturetypes?view=azure-node-latest)| This enum defines the different types of image analysis that can be done in a standard Analyze operation. You specify a set of **VisualFeatureTypes** values depending on your needs. |
85+
86+
## Code examples
87+
88+
These code snippets show you how to do the following tasks with the Computer Vision client library for Node.js:
89+
90+
* [Authenticate the client](#authenticate-the-client)
91+
* [Analyze an image](#analyze-an-image)
92+
* [Read printed and handwritten text](#read-printed-and-handwritten-text)
93+
94+
## Authenticate the client
95+
96+
Create variables for your resource's Azure endpoint and key. If you created the environment variable after you launched the application, you will need to close and reopen the editor, IDE, or shell running it to access the variable.
97+
98+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_vars)]
99+
100+
Instantiate a client with your endpoint and key. Create a [ApiKeyCredentials](https://docs.microsoft.com/python/api/msrest/msrest.authentication.apikeycredentials?view=azure-python) object with your key and endpoint, and use it to create a [ComputerVisionClient](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/computervisionclient?view=azure-node-latest) object.
101+
102+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_client)]
103+
104+
## Analyze an image
105+
106+
The code in this section analyzes remote images to extract various visual features. You can do these operations as part of the **analyzeImage** method of the client object, or you can call them using individual methods. See the [reference documentation](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/?view=azure-node-latest) for details.
107+
108+
> [!NOTE]
109+
> You can also analyze a local image. See the sample code on [GitHub](https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/javascript/ComputerVision/ComputerVisionQuickstart.js) for scenarios involving local images.
110+
111+
### Get image description
112+
113+
The following code gets the list of generated captions for the image. See [Describe images](../concept-describing-images.md) for more details.
114+
115+
First, define the URL of an image to analyze:
116+
117+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_describe_image)]
118+
119+
Then add the following code to get the image description and print it to the console.
120+
121+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_describe)]
122+
123+
### Get image category
124+
125+
The following code gets the detected category of the image. See [Categorize images](../concept-categorizing-images.md) for more details.
126+
127+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_categories)]
128+
129+
Define the helper function `formatCategories`:
130+
131+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_categories_format)]
132+
133+
### Get image tags
134+
135+
The following code gets the set of detected tags in the image. See [Content tags](../concept-tagging-images.md) for more details.
136+
137+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_tags)]
138+
139+
Define the helper function `formatTags`:
140+
141+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_tagsformat)]
142+
143+
### Detect objects
144+
145+
The following code detects common objects in the image and prints them to the console. See [Object detection](../concept-object-detection.md) for more details.
146+
147+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_objects)]
148+
149+
Define the helper function `formatRectObjects`:
150+
151+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_objectformat)]
152+
153+
### Detect brands
154+
155+
The following code detects corporate brands and logos in the image and prints them to the console. See [Brand detection](../concept-brand-detection.md) for more details.
156+
157+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_brands)]
158+
159+
### Detect faces
160+
161+
The following code returns the detected faces in the image with their rectangle coordinates and select face attributes. See [Face detection](../concept-detecting-faces.md) for more details.
162+
163+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_faces)]
164+
165+
Define the helper function `formatRectFaces`:
166+
167+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_formatfaces)]
168+
169+
### Detect adult or racy content
170+
171+
The following code prints the detected presence of adult or racy content in the image. See [Adult and racy content](../concept-detecting-adult-content.md) for more details.
172+
173+
Define the URL of the image to use:
174+
175+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_adult_image)]
176+
177+
Then add the following code to detect adult content and print the results to the console.
178+
179+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_adult)]
180+
181+
### Get image color scheme
182+
183+
The following code prints the detected color attributes in the image, like the dominant colors and accent color. See [Color schemes](../concept-detecting-color-schemes.md) for more details.
184+
185+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_colors)]
186+
187+
Define the helper function `printColorScheme` to print the details of the color scheme to the console.
188+
189+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_colors_print)]
190+
191+
### Get domain-specific content
192+
193+
Computer Vision can use specialized model to do further analysis on images. See [Domain-specific content](../concept-detecting-domain-content.md) for more details.
194+
195+
First, define the URL of an image to analyze:
196+
197+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_domain_image)]
198+
199+
The following code parses data about detected landmarks in the image.
200+
201+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_landmarks)]
202+
203+
Define the helper function `formatRectDomain` to parse the location data about detected landmarks.
204+
205+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_landmarks_rect)]
206+
207+
### Get the image type
208+
209+
The following code prints information about the type of image—whether it is clip art or line drawing.
210+
211+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_imagetype)]
212+
213+
Define the helper function `describeType`:
214+
215+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_imagetype_describe)]
216+
217+
## Read printed and handwritten text
218+
219+
Computer Vision can read visible text in an image and convert it to a character stream.
220+
221+
> [!NOTE]
222+
> You can also read text from a local image. See the sample code on [GitHub](https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/javascript/ComputerVision/ComputerVisionQuickstart.js) for scenarios involving local images.
223+
224+
### Set up test images
225+
226+
Save a reference the URL of the images you want to extract text from.
227+
228+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_read_images)]
229+
230+
### Call the Recognize API
231+
232+
Add the code below, which calls the `recognizeText` function for the given images.
233+
234+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_read_call)]
235+
236+
Define the `recognizeText` function. This calls the **recognizeText** method on the client object, which returns an operation ID and starts an asynchronous process to read the content of the image. Then it uses the operation ID to check the operation at one-second intervals until the results are returned. It then returns the extracted results.
237+
238+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_read_helper)]
239+
240+
Then, define the helper function `printRecText`, which prints the results of a Recognize operation to the console.
241+
242+
[!code-javascript[](~/cognitive-services-quickstart-code/javascript/ComputerVision/ComputerVisionQuickstart.js?name=snippet_read_print)]
243+
244+
## Run the application
245+
246+
Run the application with the `node` command on your quickstart file.
247+
248+
```console
249+
node index.js
250+
```
251+
252+
## Clean up resources
253+
254+
If you want to clean up and remove a Cognitive Services subscription, you can delete the resource or resource group. Deleting the resource group also deletes any other resources associated with it.
255+
256+
* [Portal](../../cognitive-services-apis-create-account.md#clean-up-resources)
257+
* [Azure CLI](../../cognitive-services-apis-create-account-cli.md#clean-up-resources)
258+
259+
## Next steps
260+
261+
> [!div class="nextstepaction"]
262+
>[Computer Vision API reference (Node.js)](https://docs.microsoft.com/javascript/api/@azure/cognitiveservices-computervision/?view=azure-node-latest)
263+
264+
* [What is the Computer Vision API?](../Home.md)
265+
* The source code for this sample can be found on [GitHub](https://github.com/Azure-Samples/cognitive-services-quickstart-code/blob/master/javascript/ComputerVision/ComputerVisionQuickstart.js).

articles/cognitive-services/Computer-vision/toc.yml

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@
1515
href: quickstarts-sdk/python-sdk.md
1616
- name: Java SDK
1717
href: quickstarts-sdk/java-sdk.md
18+
- name: Node.js SDK
19+
href: quickstarts-sdk/node-sdk.md
1820
- name: Using the REST API
1921
items:
2022
- name: Analyze a remote image

0 commit comments

Comments
 (0)