Zelfstudie: Een web-app voor afbeeldingsanalyse bouwen met TypeScript

Artikel
08/20/2024

In deze zelfstudie leert u hoe u lokaal een React/TypeScript-clienttoepassing bouwt en implementeert in een Azure Static Web App met een GitHub-actie. Met de React-app kunt u een afbeelding analyseren met Cognitive Services Computer Vision.

In deze zelfstudie leert u het volgende:

Azure-resources maken met Azure CLI
Omgevingsvariabelen toevoegen aan externe omgeving
GitHub-actie gebruiken met omgevingsvariabelen
Geïmplementeerde web-app weergeven

Vereisten

Azure-gebruikersaccount met een actief abonnement. Maak gratis een account.
Node.js en npm - geïnstalleerd op uw lokale computer.
Visual Studio Code - geïnstalleerd op uw lokale computer.
- Azure Static Web Apps : wordt gebruikt om de React-app te implementeren in azure Static Web App.
Git : wordt gebruikt om naar GitHub te pushen, waarmee de GitHub-actie wordt geactiveerd.
GitHub-account : naar een fork en push naar een opslagplaats.
Gebruik Azure Cloud Shell met behulp van de bash-omgeving.
Aan uw Azure-account moet de rol van Cognitive Services-inzender zijn toegewezen, zodat u akkoord kunt gaan met de verantwoordelijke AI-voorwaarden en een resource kunt maken. Als u deze rol wilt toewijzen aan uw account, volgt u de stappen in de documentatie over rollen toewijzen of neemt u contact op met de beheerder.

Wat is een statische Azure-web-app?

Bij het bouwen van statische web-apps hebt u verschillende keuzes in Azure, op basis van de mate van functionaliteit en controle waarin u geïnteresseerd bent. Deze zelfstudie richt zich op de eenvoudigste service met veel van de keuzes die voor u zijn gemaakt, zodat u zich kunt richten op uw front-endcode en niet op de hostingomgeving.

De React -app (create-react-app) biedt de volgende functionaliteit:

Bericht weergeven als Azure-sleutel en -eindpunt voor Cognitive Services Computer Vision niet is gevonden
Hiermee kunt u een afbeelding analyseren met Cognitive Services Computer Vision
- Voer een openbare afbeeldings-URL in of analyseer de afbeelding uit de verzameling
- Wanneer de analyse is voltooid
  - Afbeelding weergeven
  - JSON-resultaten van Computer Vision weergeven

Schermopname van voorbeeldresultaten van React Cognitive Service Computer Vision.

Als u de statische web-app wilt implementeren, gebruikt u een GitHub-actie, die begint wanneer een push naar een specifieke vertakking plaatsvindt:

GitHub-geheimen voor Computer Vision-sleutel en -eindpunt invoegen in build
Hiermee bouwt u de React-client (create-react-app)
Verplaatst de resulterende bestanden naar uw Azure Static Web App-resource

De voorbeeldopslagplaats splitsen

Fork de opslagplaats in plaats van deze alleen naar uw lokale computer te klonen, zodat u een Eigen GitHub-opslagplaats hebt om wijzigingen naar te pushen.

Open een afzonderlijk browservenster of tabblad en meld u aan bij GitHub.

Navigeer naar de GitHub-voorbeeldopslagplaats.

https://github.com/Azure-Samples/js-e2e-client-cognitive-services

Selecteer Fork in de rechterbovenhoek van de pagina.
Selecteer Code en kopieer vervolgens de locatie-URL voor uw fork.

Lokale ontwikkelomgeving maken

Kloon uw fork in een terminal- of bash-venster naar uw lokale computer. Vervang door YOUR-ACCOUNT-NAME de naam van uw GitHub-account.
```
git clone https://github.com/YOUR-ACCOUNT-NAME/js-e2e-client-cognitive-services
```
Ga naar de nieuwe map en installeer de afhankelijkheden.
```
cd js-e2e-client-cognitive-services && npm install
```
De installatiestap installeert de vereiste afhankelijkheden, waaronder @azure/cognitiveservices-computervision.

Het lokale voorbeeld uitvoeren

Voet het voorbeeld uit.
```
npm start
```
De app stoppen. Sluit het terminalvenster of gebruik control+c het in de terminal.

Uw resourcegroep maken

Voer in een terminal- of bash-shell de Azure CLI-opdracht in om een Azure-resourcegroep te maken, met de naam rg-demo:

az group create \
    --location eastus \
    --name rg-demo \
    --subscription YOUR-SUBSCRIPTION-NAME-OR-ID

Een Computer Vision-resource maken

Door een resourcegroep te maken, kunt u de resources eenvoudig vinden en verwijderen wanneer u klaar bent. Voor dit type resource moet u akkoord gaan met de overeenkomst voor verantwoord gebruik. Gebruik de volgende lijst om te weten hoe u snel de juiste resource kunt maken:

Uw eerste Computer Vision-resource - ga akkoord met de overeenkomst voor verantwoord gebruik
Aanvullende Computer Vision - al overeengekomen met de overeenkomst voor verantwoord gebruik

Uw eerste Computer Vision-resource maken

Als dit uw eerste AI-service is, moet u de service maken via de portal en akkoord gaan met de overeenkomst voor verantwoordelijk gebruik, als onderdeel van het maken van die resource. Als dit niet uw eerste resource is waarvoor de overeenkomst voor verantwoordelijk gebruik is vereist, kunt u de resource maken met de Azure CLI, in de volgende sectie.

Gebruik de volgende tabel om de resource te maken in Azure Portal.

Instelling	Weergegeven als
Resourcegroep	rg-demo
Naam	demo-ComputerVision
Sku	S1
Locatie	eastus

Een extra Computer Vision-resource maken

Voer de volgende opdracht uit om een Computer Vision-resource te maken:

az cognitiveservices account create \
    --name demo-ComputerVision \
    --resource-group rg-demo \
    --kind ComputerVision \
    --sku S1 \
    --location eastus \
    --yes

Computer Vision-resource-eindpunt en -sleutels ophalen

Zoek en kopieer de properties.endpoint. Dat hebt u later nodig.

...
"properties":{
    ...
    "endpoint": "https://eastus.api.cognitive.microsoft.com/",
    ...
}
...

Voer de volgende opdracht uit om uw sleutels op te halen.

az cognitiveservices account keys list \
--name demo-ComputerVision \
--resource-group rg-demo

Kopieer een van de sleutels, die u later nodig hebt.

{
  "key1": "8eb7f878bdce4e96b26c89b2b8d05319",
  "key2": "c2067cea18254bdda71c8ba6428c1e1a"
}

Omgevingsvariabelen toevoegen aan uw lokale omgeving

Als u uw resource wilt gebruiken, moet de lokale code beschikken over de sleutel en het eindpunt. Deze codebasis slaat deze op in omgevingsvariabelen:

REACT_APP_AZURE_COMPUTER_VISION_KEY
REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT

Voer de volgende opdracht uit om deze variabelen toe te voegen aan uw omgeving.

bash
cmd

export REACT_APP_AZURE_COMPUTER_VISION_KEY="REPLACE-WITH-YOUR-KEY"
export REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT="REPLACE-WITH-YOUR-ENDPOINT"

set REACT_APP_AZURE_COMPUTER_VISION_KEY="REPLACE-WITH-YOUR-KEY"
set REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT="REPLACE-WITH-YOUR-ENDPOINT"

Omgevingsvariabelen toevoegen aan uw externe omgeving

Wanneer u Azure Static-web-apps gebruikt, moeten omgevingsvariabelen zoals geheimen worden doorgegeven vanuit de GitHub-actie aan de statische web-app. De GitHub-actie bouwt de app, inclusief de Computer Vision-sleutel en het eindpunt dat is doorgegeven vanuit de GitHub-geheimen voor die opslagplaats, en pusht vervolgens de code met de omgevingsvariabelen naar de statische web-app.

Selecteer in een webbrowser in uw GitHub-opslagplaats instellingen en vervolgens Geheimen en vervolgens Nieuw opslagplaatsgeheim..
Voer dezelfde naam en waarde in voor het eindpunt dat u in de vorige sectie hebt gebruikt. Maak vervolgens een ander geheim met dezelfde naam en waarde voor de sleutel als in de vorige sectie.

Lokale react-app uitvoeren met ComputerVision-resource

Start de app opnieuw op de opdrachtregel:
```
npm start
```
Laat het tekstveld leeg, selecteer een afbeelding in de standaardcatalogus en selecteer de knop Analyseren .

De afbeelding wordt willekeurig geselecteerd uit een catalogus met afbeeldingen die zijn gedefinieerd in ./src/DefaultImages.js.
Ga door met het selecteren van de knop Analyseren om de andere afbeeldingen en resultaten te bekijken.

De lokale vertakking naar GitHub pushen

Push de lokale vertakking main in de Visual Studio Code-terminal naar uw externe opslagplaats.

git push origin main

U hoeft geen wijzigingen door te voeren omdat er nog geen wijzigingen zijn aangebracht.

Een resource voor een statische web-app maken

Selecteer het Azure-pictogram en klik met de rechtermuisknop op de Static Web Apps-service en selecteer vervolgens Statische web-app maken (geavanceerd).
Als u in een pop-upvenster wordt gevraagd of u wilt doorgaan in de main vertakking, selecteert u Doorgaan.

Voer de volgende gegevens in de volgende velden in, die één voor één worden weergegeven.

Veldnaam	waarde
Selecteer een resourcegroep voor nieuwe resources.	Selecteer de resourcegroep die u hebt gemaakt voor uw ComputerVision-resource. `demo-ComputerVision`
Voer een naam in voor de nieuwe statische web-app.	`Demo-ComputerVisionAnalyzer`
Prijsoptie selecteren	Selecteer gratis.
Selecteer de locatie van uw toepassingscode.	Selecteer dezelfde locatie die u hebt geselecteerd toen u de resourcegroep maakte. `eastus`
Kies vooraf ingestelde build om de standaardprojectstructuur te configureren.	`React`
Kies de locatie van uw toepassingscode.	`/`
Voer de locatie van uw Azure Functions-code in.	Neem de standaardwaarde.
Voer het pad in van de build-uitvoer ten opzichte van de locatie van uw app.	`build`

De GitHub-actie bijwerken met geheime omgevingsvariabelen

De Computer Vision-sleutel en het eindpunt bevinden zich in de geheimenverzameling van de opslagplaats, maar bevinden zich nog niet in de GitHub-actie. Met deze stap voegt u de sleutel en het eindpunt toe aan de actie.

Haal de wijzigingen op die zijn aangebracht van het maken van de Azure-resource om het GitHub-actiebestand op te halen.
```
git pull origin main
```

Bewerk in de Visual Studio Code-editor het GitHub Action-bestand dat u ./.github/workflows/ hebt gevonden om de geheimen toe te voegen.

name: Azure Static Web Apps CI/CD

on:
  push:
    branches:
      - from-local
  pull_request:
    types: [opened, synchronize, reopened, closed]
    branches:
      - from-local

jobs:
  build_and_deploy_job:
    if: github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
    runs-on: ubuntu-latest
    name: Build and Deploy Job
    steps:
      - uses: actions/checkout@v2
        with:
          submodules: true
      - name: Build And Deploy
        id: builddeploy
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_RANDOM_NAME_HERE }}
          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
          action: "upload"
          ###### Repository/Build Configurations - These values can be configured to match you app requirements. ######
          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
          app_location: "/" # App source code path
          api_location: "api" # Api source code path - optional
          output_location: "build" # Built app content directory - optional
          ###### End of Repository/Build Configurations ######
        env:
          REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT: ${{secrets.REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT}}
          REACT_APP_AZURE_COMPUTER_VISION_KEY:  ${{secrets.REACT_APP_AZURE_COMPUTER_VISION_KEY}}

  close_pull_request_job:
    if: github.event_name == 'pull_request' && github.event.action == 'closed'
    runs-on: ubuntu-latest
    name: Close Pull Request Job
    steps:
      - name: Close Pull Request
        id: closepullrequest
        uses: Azure/static-web-apps-deploy@v0.0.1-preview
        with:
          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN_RANDOM_NAME_HERE }}
          action: "close"

Voeg de wijziging toe aan de lokale main vertakking en voer deze door.
```
git add . && git commit -m "add secrets to action"
```
Push de wijziging naar de externe opslagplaats en start een nieuwe build-and-deploy-actie naar uw Statische Azure-web-app.
```
git push origin main
```

Het buildproces voor GitHub Action weergeven

Open in een webbrowser uw GitHub-opslagplaats voor deze zelfstudie en selecteer Acties.
Selecteer de bovenste build in de lijst en selecteer vervolgens Build and Deploy Job in het menu aan de linkerkant om het buildproces te bekijken. Wacht totdat de build en implementatie is voltooid.

Externe statische Azure-website weergeven in browser

Selecteer in Visual Studio Code het Azure-pictogram in het menu uiterst rechts, selecteer vervolgens uw statische web-app, klik met de rechtermuisknop op Bladeren en selecteer Vervolgens Openen om de openbare statische website weer te geven.

Schermopname van de webbrowser: Selecteer Bladeren site en selecteer Vervolgens Openen om de openbare statische website weer te geven.

U kunt ook de URL voor de site vinden op:

Azure Portal voor uw resource op de pagina Overzicht .
De build-and-deploy-uitvoer van de GitHub-actie heeft de site-URL aan het einde van het script

Code: Computer Vision toevoegen aan lokale React-app

Gebruik npm om Computer Vision toe te voegen aan het package.json-bestand.

npm install @azure/cognitiveservices-computervision

Code: Computer Vision-code toevoegen als afzonderlijke module

De Computer Vision-code bevindt zich in een afzonderlijk bestand met de naam ./src/azure-cognitiveservices-computervision.js. De belangrijkste functie van de module is gemarkeerd.

// ./src/azure-cognitiveservices-computervision.js

// Azure SDK client libraries
import { ComputerVisionClient } from '@azure/cognitiveservices-computervision';
import { ApiKeyCredentials } from '@azure/ms-rest-js';

// List of sample images to use in demo
import RandomImageUrl from './DefaultImages';

// Authentication requirements
const key = process.env.REACT_APP_AZURE_COMPUTER_VISION_KEY;
const endpoint = process.env.REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT;

console.log(`key = ${key}`)
console.log(`endpoint = ${endpoint}`)

// Cognitive service features
const visualFeatures = [
    "ImageType",
    "Faces",
    "Adult",
    "Categories",
    "Color",
    "Tags",
    "Description",
    "Objects",
    "Brands"
];

export const isConfigured = () => {
    const result = (key && endpoint && (key.length > 0) && (endpoint.length > 0)) ? true : false;
    console.log(`key = ${key}`)
    console.log(`endpoint = ${endpoint}`)
    console.log(`ComputerVision isConfigured = ${result}`)
    return result;
}

// Computer Vision detected Printed Text
const includesText = async (tags) => {
    return tags.filter((el) => {
        return el.name.toLowerCase() === "text";
    });
}
// Computer Vision detected Handwriting
const includesHandwriting = async (tags) => {
    return tags.filter((el) => {
        return el.name.toLowerCase() === "handwriting";
    });
}
// Wait for text detection to succeed
const wait = (timeout) => {
    return new Promise(resolve => {
        setTimeout(resolve, timeout);
    });
}

// Analyze Image from URL
export const computerVision = async (url) => {

    // authenticate to Azure service
    const computerVisionClient = new ComputerVisionClient(
        new ApiKeyCredentials({ inHeader: { 'Ocp-Apim-Subscription-Key': key } }), endpoint);

    // get image URL - entered in form or random from Default Images
    const urlToAnalyze = url || RandomImageUrl();
    
    // analyze image
    const analysis = await computerVisionClient.analyzeImage(urlToAnalyze, { visualFeatures });

    // text detected - what does it say and where is it
    if (includesText(analysis.tags) || includesHandwriting(analysis.tags)) {
        analysis.text = await readTextFromURL(computerVisionClient, urlToAnalyze);
    }

    // all information about image
    return { "URL": urlToAnalyze, ...analysis};
}
// analyze text in image
const readTextFromURL = async (client, url) => {
    
    let result = await client.read(url);
    let operationID = result.operationLocation.split('/').slice(-1)[0];

    // Wait for read recognition to complete
    // result.status is initially undefined, since it's the result of read
    const start = Date.now();
    console.log(`${start} -${result?.status} `);
    
    while (result.status !== "succeeded") {
        await wait(500);
        console.log(`${Date.now() - start} -${result?.status} `);
        result = await client.getReadResult(operationID);
    }
    
    // Return the first page of result. 
    // Replace[0] with the desired page if this is a multi-page file such as .pdf or.tiff.
    return result.analyzeResult; 
}

Code: Catalogus met afbeeldingen toevoegen als afzonderlijke module

De app selecteert een willekeurige afbeelding uit een catalogus als de gebruiker geen afbeeldings-URL invoert. De functie willekeurige selectie is gemarkeerd

// ./src/DefaultImages.js

const describeURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/celebrities.jpg';
const categoryURLImage = 'https://moderatorsampleimages.blob.core.windows.net/samples/sample16.png';
const tagsURL = 'https://moderatorsampleimages.blob.core.windows.net/samples/sample16.png';
const objectURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-node-sdk-samples/master/Data/image.jpg';
const brandURLImage = 'https://docs.microsoft.com/en-us/azure/cognitive-services/computer-vision/images/red-shirt-logo.jpg';
const facesImageURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/faces.jpg';
const printedTextSampleURL = 'https://moderatorsampleimages.blob.core.windows.net/samples/sample2.jpg';
const multiLingualTextURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/MultiLingual.png';
const adultURLImage = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/celebrities.jpg';
const colorURLImage = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/celebrities.jpg';
// don't use with picture analysis
// eslint-disable-next-line
const mixedMultiPagePDFURL = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/MultiPageHandwrittenForm.pdf';
const domainURLImage = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-sample-data-files/master/ComputerVision/Images/landmark.jpg';
const typeURLImage = 'https://raw.githubusercontent.com/Azure-Samples/cognitive-services-python-sdk-samples/master/samples/vision/images/make_things_happen.jpg';

const DefaultImages = [
    describeURL,
    categoryURLImage,
    tagsURL,
    objectURL,
    brandURLImage,
    facesImageURL,
    adultURLImage,
    colorURLImage,
    domainURLImage,
    typeURLImage,
    printedTextSampleURL,
    multiLingualTextURL,
    //mixedMultiPagePDFURL
];

const RandomImageUrl = () => {
    return DefaultImages[Math.floor(Math.random() * Math.floor(DefaultImages.length))];
}

export default RandomImageUrl;

Code: Aangepaste Computer Vision-module toevoegen aan React-app

Methoden toevoegen aan react app.js. De afbeeldingsanalyse en weergave van resultaten zijn gemarkeerd.

// ./src/App.js

import React, { useState } from 'react';
import './App.css';
import { computerVision, isConfigured as ComputerVisionIsConfigured } from './azure-cognitiveservices-computervision';

function App() {

  const [fileSelected, setFileSelected] = useState(null);
  const [analysis, setAnalysis] = useState(null);
  const [processing, setProcessing] = useState(false);
  
  const handleChange = (e) => {
    setFileSelected(e.target.value)
  }
  const onFileUrlEntered = (e) => {

    // hold UI
    setProcessing(true);
    setAnalysis(null);

    computerVision(fileSelected || null).then((item) => {
      // reset state/form
      setAnalysis(item);
      setFileSelected("");
      setProcessing(false);
    });

  };

  // Display JSON data in readable format
  const PrettyPrintJson = (data) => {
    return (<div><pre>{JSON.stringify(data, null, 2)}</pre></div>);
  }

  const DisplayResults = () => {
    return (
      <div>
        <h2>Computer Vision Analysis</h2>
        <div><img src={analysis.URL} height="200" border="1" alt={(analysis.description && analysis.description.captions && analysis.description.captions[0].text ? analysis.description.captions[0].text : "can't find caption")} /></div>
        {PrettyPrintJson(analysis)}
      </div>
    )
  };
  
  const Analyze = () => {
    return (
    <div>
      <h1>Analyze image</h1>
      {!processing &&
        <div>
          <div>
            <label>URL</label>
            <input type="text" placeholder="Enter URL or leave empty for random image from collection" size="50" onChange={handleChange}></input>
          </div>
          <button onClick={onFileUrlEntered}>Analyze</button>
        </div>
      }
      {processing && <div>Processing</div>}
      <hr />
      {analysis && DisplayResults()}
      </div>
    )
  }
  
  const CantAnalyze = () => {
    return (
      <div>Key and/or endpoint not configured in ./azure-cognitiveservices-computervision.js</div>
    )
  }
  
  function Render() {
    const ready = ComputerVisionIsConfigured();
    if (ready) {
      return <Analyze />;
    }
    return <CantAnalyze />;
  }

  return (
    <div>
      {Render()}
    </div>
    
  );
}

export default App;

Resources opschonen

Nadat u deze zelfstudie hebt voltooid, moet u de resourcegroep, die de Computer Vision-resource en de Statische web-app bevat, verwijderen om ervoor te zorgen dat u niet meer wordt gefactureerd voor gebruik.

Selecteer in VS Code de Azure-verkenner en klik met de rechtermuisknop op uw resourcegroep die wordt vermeld onder het abonnement en selecteer Verwijderen.

Gedeeltelijke schermopname van VS Code, het selecteren van de resourcegroep in de lijst met resourcegroepen en vervolgens met de rechtermuisknop klikken om Verwijderen te selecteren.

Gebruik de Azure CLI-opdracht in een terminal om de resourcegroep te verwijderen:

az group delete --name rg-demo  -y

Deze opdracht kan enkele minuten duren.

Delen via

Zelfstudie: Een web-app voor afbeeldingsanalyse bouwen met TypeScript

Vereisten

Wat is een statische Azure-web-app?

De voorbeeldopslagplaats splitsen

Lokale ontwikkelomgeving maken

Het lokale voorbeeld uitvoeren

Uw resourcegroep maken

Een Computer Vision-resource maken

Uw eerste Computer Vision-resource maken

Een extra Computer Vision-resource maken

Computer Vision-resource-eindpunt en -sleutels ophalen

Omgevingsvariabelen toevoegen aan uw lokale omgeving

Omgevingsvariabelen toevoegen aan uw externe omgeving

Lokale react-app uitvoeren met ComputerVision-resource

De lokale vertakking naar GitHub pushen

Een resource voor een statische web-app maken

De GitHub-actie bijwerken met geheime omgevingsvariabelen

Het buildproces voor GitHub Action weergeven

Externe statische Azure-website weergeven in browser

Code: Computer Vision toevoegen aan lokale React-app

Code: Computer Vision-code toevoegen als afzonderlijke module

Code: Catalogus met afbeeldingen toevoegen als afzonderlijke module

Code: Aangepaste Computer Vision-module toevoegen aan React-app

Resources opschonen

Feedback

Aanvullende resources

Delen via

Zelfstudie: Een web-app voor afbeeldingsanalyse bouwen met TypeScript

Vereisten

Wat is een statische Azure-web-app?

De voorbeeldopslagplaats splitsen

Lokale ontwikkelomgeving maken

Het lokale voorbeeld uitvoeren

Uw resourcegroep maken

Een Computer Vision-resource maken

Uw eerste Computer Vision-resource maken

Een extra Computer Vision-resource maken

Computer Vision-resource-eindpunt en -sleutels ophalen

Omgevingsvariabelen toevoegen aan uw lokale omgeving

Omgevingsvariabelen toevoegen aan uw externe omgeving

Lokale react-app uitvoeren met ComputerVision-resource

De lokale vertakking naar GitHub pushen

Een resource voor een statische web-app maken

De GitHub-actie bijwerken met geheime omgevingsvariabelen

Het buildproces voor GitHub Action weergeven

Externe statische Azure-website weergeven in browser

Code: Computer Vision toevoegen aan lokale React-app

Code: Computer Vision-code toevoegen als afzonderlijke module

Code: Catalogus met afbeeldingen toevoegen als afzonderlijke module

Code: Aangepaste Computer Vision-module toevoegen aan React-app

Resources opschonen

Gerelateerde inhoud

Feedback

Aanvullende resources