Lernprogramm: Erstellen einer Bildanalyse-Web-App mit TypeScript

Artikel
11/22/2024

In diesem Lernprogramm erfahren Sie, wie Sie eine React/TypeScript-Clientanwendung lokal mit einer GitHub-Aktion in einer Azure Static Web App erstellen und bereitstellen. Die React-App ermöglicht das Analysieren eines Bilds mit maschinellem Sehen von Cognitive Services.

In diesem Tutorial lernen Sie Folgendes:

Erstellen von Azure-Ressourcen mit der Azure CLI
Hinzufügen von Umgebungsvariablen zur Remoteumgebung
Verwenden der GitHub-Aktion mit Umgebungsvariablen
Bereitgestellte Web-App anzeigen

Voraussetzungen

Azure-Benutzerkonto mit einem aktiven Abonnement. Erstellen Sie ein kostenloses Konto.
Node.js und npm (installiert auf Ihrem lokalen Computer)
Visual Studio Code (installiert auf Ihrem lokalen Computer)
- Azure Static Web Apps zum Bereitstellen der React-App für die statische Azure-Web-App
Git zum Pushen an GitHub, wodurch wiederum die GitHub-Aktion aktiviert wird
GitHub-Konto – zum Verzweigen und Zum Verschieben an ein Repository.
Verwenden Sie Azure Cloud Shell unter Nutzung der Bash-Umgebung.
Damit Sie den entsprechenden KI-Bedingungen zustimmen und eine Ressource erstellen können, muss Ihrem Azure-Konto die Rolle Cognitive Services-Mitwirkender zugewiesen sein. Um diese Rolle Ihrem Konto zuzuweisen, führen Sie die Schritte in der Dokumentation Zuweisen von Rollen aus, oder wenden Sie sich an Ihren Administrator.

Was ist eine statische Azure-Web-App?

Beim Erstellen statischer Web-Apps haben Sie verschiedene Auswahlmöglichkeiten auf Azure basierend auf dem Grad der Funktionalität und Kontrolle, an der Sie interessiert sind. In diesem Tutorial wird der einfachste Dienst erstellt. Dabei werden Ihnen viele der Entscheidungen abgenommen, sodass Sie sich ganz auf Ihren Front-End-Code konzentrieren können und sich nicht mit der Hostingumgebung beschäftigen müssen.

Die React-App (create-react-app) umfasst folgende Funktionen:

Anzeige einer Meldung, wenn Azure-Schlüssel und -Endpunkt für maschinelles Sehen von Cognitive Services nicht gefunden werden
Ermöglicht Es Ihnen, ein Bild mit Cognitive Services maschinelles Sehen zu analysieren
- Eingabe einer öffentlichen Bild-URL oder Analyse eines Bilds aus einer Sammlung
- Nach Abschluss der Analyse
  - Bild anzeigen
  - Anzeigen der JSON-Ergebnisse des maschinellen Sehens

Screenshot von React Cognitive Service maschinelles Sehen Beispielergebnissen.

Verwenden Sie zum Bereitstellen der statischen Web-App eine GitHub-Aktion, die gestartet wird, wenn ein Push an eine bestimmte Verzweigung erfolgt:

Einfügen von GitHub-Geheimnissen für den Schlüssel und den Endpunkt für maschinelles Sehen in den Build
Erstellen des React-Clients (create-react-app)
Verschieben der resultierenden Dateien in Ihre statische Azure-Web-App-Ressource

Forken des Beispielrepositorys

Forken Sie das Repository (anstatt es nur auf Ihrem Computer zu klonen), um über ein eigenes GitHub-Repository zu verfügen, an das Sie Änderungen pushen können.

Öffnen Sie ein separates Browserfenster oder einen separaten Browsertab, und melden Sie sich bei GitHub an.

Navigieren Sie zum GitHub-Beispiel-Repository.

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

Wählen Sie rechts oben auf der Seite die Option Fork (Forken) aus.
Wählen Sie Code aus, und kopieren Sie anschließend die URL für Ihren Fork.

Erstellen der lokalen Entwicklungsumgebung

Klonen Sie in einem Terminal- oder Bash-Fenster Ihren Fork auf Ihrem lokalen Computer. Ersetzen Sie YOUR-ACCOUNT-NAME durch Ihren GitHub-Kontonamen.
```
git clone https://github.com/YOUR-ACCOUNT-NAME/js-e2e-client-cognitive-services
```
Wechseln Sie zu dem neuen Verzeichnis, und installieren Sie die Abhängigkeiten.
```
cd js-e2e-client-cognitive-services && npm install
```
Der Installationsschritt installiert die erforderlichen Abhängigkeiten, einschließlich @azure/cognitiveservices-computervision.

Ausführen des lokalen Beispiels

Führen Sie das Beispiel aus.
```
npm start
```
Beenden Sie die App. Schließen Sie entweder das Terminalfenster, oder verwenden Sie control+c am Terminal.

Erstellen Ihrer Ressourcengruppe

Geben Sie an einem Terminal oder an einer Bash-Shell den Azure CLI-Befehl zum Erstellen einer Azure-Ressourcengruppe mit dem Namen rg-demo ein:

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

Erstellen einer Ressource für maschinelles Sehen

Durch die Erstellung einer Ressourcengruppe können Sie Ressourcen ganz einfach finden und wieder löschen, wenn Sie sie nicht mehr benötigen. Für diese Art von Ressource müssen Sie der Vereinbarung zur verantwortungsvollen Verwendung zustimmen. Verwenden Sie die folgende Liste, um zu erfahren, wie Sie schnell die richtige Ressource erstellen können:

Ihre erste Ressource für maschinelles Sehen: Stimmen Sie der Vereinbarung zur verantwortungsvollen Verwendung zu.
Weitere Ressource für maschinelles Sehen: Sie haben der Vereinbarung zur verantwortungsvollen Verwendung bereits zugestimmt.

Erstellen Ihrer ersten Ressource für maschinelles Sehen

Wenn dies Ihr erster KI-Dienst ist, müssen Sie den Dienst über das Portal erstellen und im Rahmen der Ressourcenerstellung der Vereinbarung zur verantwortungsvollen Verwendung zustimmen. Ist dies nicht Ihre erste Ressource, für die die Vereinbarung zur verantwortungsvollen Verwendung erforderlich ist, können Sie die Ressource mit der Azure CLI erstellen (siehe nächster Abschnitt).

Die folgende Tabelle unterstützt Sie beim Erstellen der Ressource im Azure-Portal.

Einstellung	Wert
Resource group	rg-demo
Name	demo-ComputerVision
Sku	S1
Location	eastus

Erstellen einer weiteren Ressource für maschinelles Sehen

Führen Sie den folgenden Befehl aus, um eine Ressource für maschinelles Sehen zu erstellen:

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

Abrufen maschinelles Sehen Ressourcenendpunkts und Schlüssel

Suchen Sie in den Ergebnissen nach dem Instrumentierungsschlüssel (properties.endpoint), und kopieren Sie ihn. Sie benötigen dies später.
```
...
"properties":{
    ...
    "endpoint": "https://eastus.api.cognitive.microsoft.com/",
    ...
}
...
```

Führen Sie den folgenden Befehl aus, um Ihre Schlüssel abzurufen:

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

Kopieren Sie einen der Schlüssel, den Sie später benötigen.

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

Hinzufügen von Umgebungsvariablen zu Ihrer lokalen Umgebung

Um Ihre Ressource verwenden zu können, muss der lokale Code über den Schlüssel und den Endpunkt verfügen. In dieser Codebasis werden diese Angaben in folgenden Umgebungsvariablen gespeichert:

REACT_APP_AZURE_COMPUTER_VISION_KEY
REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT

Führen Sie den folgenden Befehl aus, um diese Variablen Ihrer Umgebung hinzuzufügen:

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"

Hinzufügen von Umgebungsvariablen zu Ihrer Remoteumgebung

Bei Verwendung statischer Azure-Web-Apps müssen Umgebungsvariablen wie etwa Geheimnisse von der GitHub-Aktion an die statische Web-App übergeben werden. Die GitHub-Aktion erstellt die App (einschließlich des Schlüssels und des Endpunkts für maschinelles Sehen aus den GitHub-Geheimnissen für dieses Repository) und pusht anschließend den Code mit den Umgebungsvariablen an die statische Web-App.

Navigieren Sie in einem Webbrowser in Ihrem GitHub-Repository zu Settings > Secrets > New repository secret („Einstellungen“ > „Geheimnisse“ > „Neues Repositorygeheimnis“).
Geben Sie den Namen und den Wert des Endpunkts aus dem vorherigen Abschnitt ein. Erstellen Sie anschließend ein weiteres Geheimnis mit dem Namen und dem Wert des Schlüssels aus dem vorherigen Abschnitt.

Ausführen einer lokalen React-App mit ComputerVision-Ressource

Starten Sie die App über die Befehlszeile erneut:
```
npm start
```
Lassen Sie das Textfeld leer, um ein Bild aus dem Standardkatalog auszuwählen, und wählen Sie die Schaltfläche Analysieren aus.

Das Bild wird nach dem Zufallsprinzip aus einem Katalog von Bildern ausgewählt, der in ./src/DefaultImages.js definiert ist.
Wählen Sie die Schaltfläche Analyze (Analysieren) wiederholt aus, um die anderen Bilder und Ergebnisse anzuzeigen.

Pushen der lokalen Verzweigung auf GitHub

Pushen Sie im Visual Studio Code-Terminal den lokalen Branch main an Ihr Remoterepository.

git push origin main

Sie mussten keine Änderungen committen, da noch keine Änderungen vorgenommen wurden.

Erstellen einer statischen Web-App-Ressource

Wählen Sie das Symbol Azure aus. Klicken Sie anschließend mit der rechten Maustaste auf den Dienst Static Web Apps, und wählen Sie Create Static Web App (Advanced) (Statische Web-App erstellen (erweitert)) aus.
Wenn Sie in einem Popupfenster gefragt werden, ob Sie mit dem Branch main fortfahren möchten, wählen Sie Weiter aus.

Geben Sie die folgenden Informationen in die nachfolgenden Felder ein, die jeweils nacheinander angezeigt werden:

Feldname	value
„Select a resource group for new resources.“ (Wählen Sie eine Ressourcengruppe für neue Ressourcen aus.)	Wählen Sie die Ressourcengruppe aus, die Sie für Ihre ComputerVision-Ressource erstellt haben: `demo-ComputerVision`.
Geben Sie einen Namen für die neue statische Web-App ein.	`Demo-ComputerVisionAnalyzer`
Wählen Sie eine Preisoption aus.	Wählen Sie Free aus.
Wählen Sie den Speicherort Ihres Anwendungscodes aus.	Wählen Sie denselben Standort aus, den Sie auch beim Erstellen Ihrer Ressourcengruppe ausgewählt haben (`eastus`).
„Choose build preset to configure default project structure.“ (Wählen Sie eine Buildvoreinstellung aus, um die Standardprojektstruktur zu konfigurieren.)	`React`
Choose the location of your application code. (Wählen Sie den Speicherort Ihres Anwendungscodes aus.)	`/`
Enter the location of your Azure Functions code. (Geben Sie den Speicherort Ihres Azure Functions-Codes ein.)	Übernehmen Sie den Standardwert.
Geben Sie den Pfad der Buildausgabe in Relation zum Speicherort Ihrer App ein.	`build`

Aktualisieren der GitHub-Aktion mit Geheimnisumgebungsvariablen

Der maschinelles Sehen Schlüssel und Endpunkt befinden sich in der geheimen Sammlung des Repositorys, aber noch nicht in der GitHub-Aktion. In diesem Schritt werden der Schlüssel und der Endpunkt der Aktion hinzugefügt.

Rufen Sie die Änderungen ab, die im Zuge der Azure-Ressourcenerstellung vorgenommen wurden, um die GitHub-Aktionsdatei zu erhalten.
```
git pull origin main
```

Bearbeiten Sie im Visual Studio Code-Editor unter ./.github/workflows/ die GitHub-Aktionsdatei, um die Geheimnisse hinzuzufügen.

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"

Fügen Sie die Änderung dem lokalen Branch main hinzu, und committen Sie sie.
```
git add . && git commit -m "add secrets to action"
```
Pushen Sie die Änderung an das Remoterepository. Dadurch wird eine neue Erstellungs- und Bereitstellungsaktion für Ihre statische Azure-Web-App gestartet.
```
git push origin main
```

Anzeigen des Buildprozesses der GitHub-Aktion

Öffnen Sie in einem Webbrowser Ihr GitHub-Repository für dieses Tutorial, und wählen Sie Actions (Aktionen) aus.
Wählen Sie in der Liste den obersten Build und anschließend im Menü auf der linken Seite die Option Build and Deploy Job (Auftrag zum Erstellen und Bereitstellen) aus, um den Buildprozess zu verfolgen. Warten Sie, bis der Auftrag Build And Deploy (Erstellen und Bereitstellen) erfolgreich abgeschlossen wurde.

Anzeigen der statischen Azure-Remotewebsite im Browser

Wählen Sie in Visual Studio Code im rechten Menü das Symbol Azure aus. Wählen Sie dann Ihre statische Web-App aus, klicken Sie mit der rechten Maustaste auf Browse Site (Website durchsuchen), und wählen Sie Open (Öffnen) aus, um die öffentliche statische Website anzuzeigen.

Screenshot des Webbrowsers: Wählen Sie

Die URL für die Website finden Sie auch an folgenden Orten:

Im Azure-Portal für Ihre Ressource auf der Seite Übersicht
In der Ausgabe des Erstellungs- und Bereitstellungsvorgangs der GitHub-Aktion (ganz am Ende des Skripts)

Code: Hinzufügen von maschinelles Sehen zur lokalen React-App

Verwenden Sie npm, um der Datei „package.json“ maschinelles Sehen hinzuzufügen.

npm install @azure/cognitiveservices-computervision

Code: Hinzufügen von maschinelles Sehen Code als separates Modul

Der Code für maschinelles Sehen ist in einer separaten Datei namens ./src/azure-cognitiveservices-computervision.js enthalten. Die Hauptfunktion des Moduls ist hervorgehoben:

// ./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: Hinzufügen eines Bilderkatalogs als separates Modul

Wenn der Benutzer keine Bild-URL eingibt, wird von der App nach dem Zufallsprinzip ein Bild aus einem Katalog ausgewählt. Die Funktion für die Zufallsauswahl ist hervorgehoben:

// ./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: Hinzufügen eines benutzerdefinierten maschinelles Sehen-Moduls zur React-App

Fügen Sie der Datei app.js von React Methoden hinzu. Bildanalyse Ergebnisanzeige sind hervorgehoben:

// ./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;

Bereinigen von Ressourcen

Nachdem Sie dieses Lernprogramm abgeschlossen haben, müssen Sie die Ressourcengruppe entfernen, die die maschinelles Sehen Ressource und statische Web-App enthält, um sicherzustellen, dass sie nicht mehr in Rechnung gestellt werden.

Wählen Sie in VS Code den Azure-Explorer aus, klicken Sie dann mit der rechten Maustaste auf Ihre Ressourcengruppe, die unter dem Abonnement aufgeführt ist, und wählen Sie Löschen aus.

Partieller Screenshot von VS Code: Auswählen der Ressourcengruppe aus der Liste der Ressourcengruppen und Klicken mit der rechten Maustaste, um „Löschen“ auszuwählen

Verwenden Sie den Azure CLI-Befehl in einem Terminal, um die Ressourcengruppe zu löschen:

az group delete --name rg-demo  -y

Die Ausführung dieses Befehls kann mehrere Minuten dauern.

Freigeben über

Lernprogramm: Erstellen einer Bildanalyse-Web-App mit TypeScript

Voraussetzungen

Was ist eine statische Azure-Web-App?

Forken des Beispielrepositorys

Erstellen der lokalen Entwicklungsumgebung

Ausführen des lokalen Beispiels

Erstellen Ihrer Ressourcengruppe

Erstellen einer Ressource für maschinelles Sehen

Erstellen Ihrer ersten Ressource für maschinelles Sehen

Erstellen einer weiteren Ressource für maschinelles Sehen

Abrufen maschinelles Sehen Ressourcenendpunkts und Schlüssel

Hinzufügen von Umgebungsvariablen zu Ihrer lokalen Umgebung

Hinzufügen von Umgebungsvariablen zu Ihrer Remoteumgebung

Ausführen einer lokalen React-App mit ComputerVision-Ressource

Pushen der lokalen Verzweigung auf GitHub

Erstellen einer statischen Web-App-Ressource

Aktualisieren der GitHub-Aktion mit Geheimnisumgebungsvariablen

Anzeigen des Buildprozesses der GitHub-Aktion

Anzeigen der statischen Azure-Remotewebsite im Browser

Code: Hinzufügen von maschinelles Sehen zur lokalen React-App

Code: Hinzufügen von maschinelles Sehen Code als separates Modul

Code: Hinzufügen eines Bilderkatalogs als separates Modul

Code: Hinzufügen eines benutzerdefinierten maschinelles Sehen-Moduls zur React-App

Bereinigen von Ressourcen

Feedback

Zusätzliche Ressourcen

Freigeben über

Lernprogramm: Erstellen einer Bildanalyse-Web-App mit TypeScript

Voraussetzungen

Was ist eine statische Azure-Web-App?

Forken des Beispielrepositorys

Erstellen der lokalen Entwicklungsumgebung

Ausführen des lokalen Beispiels

Erstellen Ihrer Ressourcengruppe

Erstellen einer Ressource für maschinelles Sehen

Erstellen Ihrer ersten Ressource für maschinelles Sehen

Erstellen einer weiteren Ressource für maschinelles Sehen

Abrufen maschinelles Sehen Ressourcenendpunkts und Schlüssel

Hinzufügen von Umgebungsvariablen zu Ihrer lokalen Umgebung

Hinzufügen von Umgebungsvariablen zu Ihrer Remoteumgebung

Ausführen einer lokalen React-App mit ComputerVision-Ressource

Pushen der lokalen Verzweigung auf GitHub

Erstellen einer statischen Web-App-Ressource

Aktualisieren der GitHub-Aktion mit Geheimnisumgebungsvariablen

Anzeigen des Buildprozesses der GitHub-Aktion

Anzeigen der statischen Azure-Remotewebsite im Browser

Code: Hinzufügen von maschinelles Sehen zur lokalen React-App

Code: Hinzufügen von maschinelles Sehen Code als separates Modul

Code: Hinzufügen eines Bilderkatalogs als separates Modul

Code: Hinzufügen eines benutzerdefinierten maschinelles Sehen-Moduls zur React-App

Bereinigen von Ressourcen

Zugehöriger Inhalt

Feedback

Zusätzliche Ressourcen