Share via

Erstellen und Bereitstellen einer statischen Web-App in Azure

  • Artikel

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

Erstellen oder Verwenden eines vorhandenen Azure-Abonnements

Sie benötigen ein Azure-Benutzerkonto mit einem aktiven Abonnement. Erstellen Sie ein kostenloses Konto.

Voraussetzungen

  • Node.js und npm (installiert auf Ihrem lokalen Computer)
  • Visual Studio Code (installiert auf Ihrem lokalen Computer)
  • Git zum Pushen an GitHub, wodurch wiederum die GitHub-Aktion aktiviert wird
  • GitHub-Konto zum Forken und zum Pushen 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?

Bei der Erstellung statischer Web-Apps stehen in Azure mehrere Optionen zur Verfügung, um den gewünschten Grad an Funktionalität und Kontrolle zu erhalten. 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

Partial browser screenshot of React Cognitive Service Computer Vision sample results.

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

1. Verzweigen des Beispiel-Repositorys

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.

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

  2. Navigieren Sie zum GitHub-Beispiel-Repository.

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

  3. Wählen Sie rechts oben auf der Seite die Option Fork (Forken) aus.

  4. Wählen Sie Code aus, und kopieren Sie anschließend die URL für Ihren Fork.

    Partial screenshot of GitHub website, select **Code** then copy the location for your fork.

2. Erstellen einer lokalen Entwicklungsumgebung

  1. 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

  2. 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.

3. Führen Sie das lokale Beispiel aus.

  1. Führen Sie das Beispiel aus.

    npm start

    Partial browser screenshot of React Cognitive Service Computer Vision sample for image analysis before key and endpoint set.

  2. Beenden Sie die App. Schließen Sie entweder das Terminalfenster, oder verwenden Sie control+c am Terminal.

4. Erstellen Der 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

5. Erstellen einer maschinelles Sehen Ressource

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:

6. Erstellen Ihrer ersten maschinelles Sehen Ressource

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
Standort eastus

7. Erstellen einer zusätzlichen maschinelles Sehen Ressource

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

8. Abrufen maschinelles Sehen Ressourcenendpunkt und Schlüssel

  1. Suchen Sie in den Ergebnissen nach dem Instrumentierungsschlüssel (properties.endpoint), und kopieren Sie ihn. Diese benötigen Sie weiter unten.

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

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

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

  3. Kopieren Sie einen der Schlüssel für später.

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

9. 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

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

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

10. 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.

  1. Navigieren Sie in einem Webbrowser in Ihrem GitHub-Repository zu Settings > Secrets > New repository secret („Einstellungen“ > „Geheimnisse“ > „Neues Repositorygeheimnis“).

    Partial browser screenshot of GitHub repository, creating new repository secret.

  2. 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.

    Enter the same name and value for the endpoint. Then create another secret with the same name and value for the key.

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

  1. Starten Sie die App über die Befehlszeile erneut:

    npm start

    Partial browser screenshot of React Cognitive Service Computer Vision sample ready for URL or press enter.

  2. Lassen Sie das Textfeld leer, um ein Bild aus dem Standardkatalog auszuwählen, und wählen Sie die Schaltfläche Analysieren aus.

    Partial browser screenshot of React Cognitive Service Computer Vision sample results.

    Das Bild wird nach dem Zufallsprinzip aus einem Katalog von Bildern ausgewählt, der in ./src/DefaultImages.js definiert ist.

  3. Wählen Sie die Schaltfläche Analyze (Analysieren) wiederholt aus, um die anderen Bilder und Ergebnisse anzuzeigen.

12. Pushen Sie den lokalen Zweig an 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.

13. Erstellen einer statischen Web-App-Ressource

  1. 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.

    Visual Studio Code screenshot with Visual Studio extension

  2. Wenn Sie in einem Popupfenster gefragt werden, ob Sie mit dem Branch main fortfahren möchten, wählen Sie Weiter aus.

  3. 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

14. Aktualisieren der GitHub-Aktion mit geheimen Umgebungsvariablen

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

  1. Rufen Sie die Änderungen ab, die im Zuge der Azure-Ressourcenerstellung vorgenommen wurden, um die GitHub-Aktionsdatei zu erhalten.

    git pull origin main

  2. 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"

  3. Fügen Sie die Änderung dem lokalen Branch main hinzu, und committen Sie sie.

    git add . && git commit -m "add secrets to action"

  4. 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

15. Anzeigen des GitHub Action-Buildprozesses

  1. Öffnen Sie in einem Webbrowser Ihr GitHub-Repository für dieses Tutorial, und wählen Sie Actions (Aktionen) aus.

  2. 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.

    Select the top build in the list, then select `Build and Deploy Job` on the left-side menu to watch the build process. Wait until the build successfully finishes.

16. Anzeigen der statischen Azure-Remotewebsite im Browser

  1. 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.

Select `Browse site`, then select `Open` to view the public static web site.

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)

17. Bereinigen von Ressourcen für statische Web-App

Nach Abschluss dieses Tutorials müssen Sie die Ressourcengruppe entfernen, die die Ressource für maschinelles Sehen sowie die statische Web-App enthält, um sicherzustellen, dass Ihnen keine weitere Nutzung in Rechnung gestellt wird.

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.

Partial screen shot of VS Code, selecting resource group from list of resource groups, then right-clicking to select `Delete`.

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;

Nächste Schritte