Statik Web uygulaması oluşturma ve Azure'a dağıtma
Bu öğreticide, GitHub eylemiyle bir React/TypeScript istemci uygulamasını yerel olarak derleyip Azure Static Web App'e dağıtın. React uygulaması, Bilişsel Hizmetler Görüntü İşleme ile bir görüntüyü analiz etmenizi sağlar.
Mevcut Azure aboneliğini oluşturma veya kullanma
Etkin aboneliği olan bir Azure kullanıcı hesabına ihtiyacınız olacaktır. Ücretsiz bir tane oluşturun.
Önkoşullar
- Node.js ve npm - yerel makinenize yüklenir.
- Visual Studio Code - yerel makinenize yüklenir.
- Azure Static Web Apps - React uygulamasını Azure Static Web uygulamasına dağıtmak için kullanılır.
- Git - GitHub'a göndermek için kullanılır; bu da GitHub eylemini etkinleştirir.
- GitHub hesabı - çatal oluşturmak ve depoya göndermek için
- Bash ortamından yararlanarak Azure Cloud Shell’i kullanın.
- Sorumlu yapay zeka koşullarını kabul etmek ve bir kaynak oluşturmak için Azure hesabınıza Bilişsel Hizmetler Katkıda Bulunan rolü atanmış olmalıdır. Bu rolün hesabınıza atanmasını sağlamak için Rol atama belgelerindeki adımları izleyin veya yöneticinize başvurun.
Azure Statik web uygulaması nedir?
Statik web uygulamaları oluştururken, ilgilendiğiniz işlevsellik ve denetim derecesine bağlı olarak Azure'da çeşitli seçenekleriniz vardır. Bu öğretici, sizin için yapılan seçimlerin çoğuyla en kolay hizmete odaklanır, böylece barındırma ortamına değil ön uç koduna odaklanabilirsiniz.
React (create-react-app) aşağıdaki işlevleri sağlar:
- Bilişsel Hizmetler Görüntü İşleme için Azure anahtarı ve uç noktası bulunamazsa ileti görüntüleme
- Bilişsel Hizmetler Görüntü İşleme ile bir görüntüyü analiz etmenizi sağlar
- Genel görüntü URL'si girin veya koleksiyondan görüntü analiz edin
- Analiz tamamlandığında
- Görünen resim
- Görüntü İşleme JSON sonuçlarını görüntüleme
Statik web uygulamasını dağıtmak için, belirli bir dala gönderim gerçekleştiğinde başlayan bir GitHub eylemi kullanın:
- derlemeye Görüntü İşleme anahtar ve uç nokta için GitHub gizli dizileri ekler
- React (create-react-app) istemcisini oluşturur
- Sonuçta elde edilen dosyaları Azure Statik Web uygulaması kaynağınıza taşır
1. Örnek deponun çatalını oluşturma
Değişiklikleri göndermek üzere kendi GitHub deponuza sahip olmak için depoyu yerel bilgisayarınıza kopyalamanız yerine çatal oluşturun.
Ayrı bir tarayıcı penceresi veya sekmesi açın ve GitHub'da oturum açın.
-
https://github.com/Azure-Samples/js-e2e-client-cognitive-services Sayfanın sağ üst bölümünde Çatal'ı seçin.
Kod'a tıklayın ve çatalınızın konum URL'sini kopyalayın.
2. Yerel geliştirme ortamı oluşturma
Terminal veya bash penceresinde çatalınızı yerel bilgisayarınıza kopyalayın. değerini GitHub hesabınızın adıyla değiştirin
YOUR-ACCOUNT-NAME.git clone https://github.com/YOUR-ACCOUNT-NAME/js-e2e-client-cognitive-servicesYeni dizine geçin ve bağımlılıkları yükleyin.
cd js-e2e-client-cognitive-services && npm installYükleme adımı, @azure/cognitiveservices-computervision gibi gerekli bağımlılıkları yükler.
3. Yerel örneği çalıştırma
Örnek uygulamayı çalıştırın.
npm start
Uygulamayı durdurun. Terminal penceresini kapatın veya terminalde kullanın
control+c.
4. Kaynak grubunuzu oluşturma
Terminalde veya bash kabuğunda, adlı rg-demobir Azure kaynak grubu oluşturmak için Azure CLI komutunu girin:
az group create \
--location eastus \
--name rg-demo \
--subscription YOUR-SUBSCRIPTION-NAME-OR-ID
5. Görüntü İşleme kaynağı oluşturma
Kaynak grubu oluşturmak, kaynakları kolayca bulmanıza ve işiniz bittiğinde silmenize olanak tanır. Bu tür bir kaynak için Sorumlu Kullanım sözleşmesini kabul etmiş olmanız gerekir. Doğru kaynağı nasıl hızlı bir şekilde oluşturabileceğinizi öğrenmek için aşağıdaki listeyi kullanın:
- İlk Görüntü İşleme kaynağınız - Sorumlu Kullanım sözleşmesini kabul edin
- Ek Görüntü İşleme - Sorumlu Kullanım sözleşmesini zaten kabul etmiş
6. İlk Görüntü İşleme kaynağınızı oluşturma
Bu ilk yapay zeka hizmetinizse, hizmeti portal üzerinden oluşturmanız ve kaynak oluşturma işleminin bir parçası olarak Sorumlu Kullanım sözleşmesini kabul etmeniz gerekir. Sorumlu Kullanım sözleşmesini gerektiren ilk kaynağınız bu değilse, sonraki bölümde bulunan Azure CLI ile kaynağı oluşturabilirsiniz.
Kaynağın Azure portalında oluşturulmasına yardımcı olması için aşağıdaki tabloyu kullanın.
| Ayar | Value |
|---|---|
| Kaynak grubu | rg-demo |
| Veri Akışı Adı | demo-ComputerVision |
| Sku | S1 |
| Konum | eastus |
7. Ek Görüntü İşleme kaynağı oluşturma
Görüntü İşleme kaynağı oluşturmak için aşağıdaki komutu çalıştırın:
az cognitiveservices account create \
--name demo-ComputerVision \
--resource-group rg-demo \
--kind ComputerVision \
--sku S1 \
--location eastus \
--yes
8. Görüntü İşleme kaynak uç noktasını ve anahtarlarını alma
Sonuçlarda öğesini bulun ve kopyalayın
properties.endpoint. Buna daha sonra ihtiyacınız olacak.... "properties":{ ... "endpoint": "https://eastus.api.cognitive.microsoft.com/", ... } ...Anahtarlarınızı almak için aşağıdaki komutu çalıştırın.
az cognitiveservices account keys list \ --name demo-ComputerVision \ --resource-group rg-demoAnahtarlardan birini kopyalayın, daha sonra buna ihtiyacınız olacak.
{ "key1": "8eb7f878bdce4e96b26c89b2b8d05319", "key2": "c2067cea18254bdda71c8ba6428c1e1a" }
9. Yerel ortamınıza ortam değişkenleri ekleme
Kaynağınızı kullanmak için yerel kodun anahtarı ve uç noktasının kullanılabilir olması gerekir. Bu kod tabanı bunları ortam değişkenlerinde depolar:
- REACT_APP_AZURE_COMPUTER_VISION_KEY
- REACT_APP_AZURE_COMPUTER_VISION_ENDPOINT
Bu değişkenleri ortamınıza eklemek için aşağıdaki komutu çalıştırın.
10. Uzak ortamınıza ortam değişkenleri ekleme
Azure Static web uygulamalarını kullanırken gizli diziler gibi ortam değişkenlerinin GitHub eyleminden Statik web uygulamasına geçirilmesi gerekir. GitHub eylemi, bu depo için GitHub gizli dizilerinden geçirilen Görüntü İşleme anahtarı ve uç nokta dahil olmak üzere uygulamayı oluşturur, ardından ortam değişkenlerini içeren kodu statik web uygulamasına iletir.
Bir web tarayıcısında, GitHub deponuzda Ayarlar, gizli diziler'i ve ardından Yeni depo gizli dizisi'ni seçin.
Önceki bölümde kullandığınız uç nokta için aynı adı ve değeri girin. Ardından, önceki bölümde kullanılan anahtar için aynı ad ve değere sahip başka bir gizli dizi oluşturun.
11. ComputerVision kaynağıyla yerel react uygulamasını çalıştırma
Uygulamayı komut satırından yeniden başlatın:
npm start
Varsayılan katalogdan bir resim seçmek için metin alanını boş bırakın ve Çözümle düğmesini seçin.
Görüntü, içinde
./src/DefaultImages.jstanımlanan görüntü kataloğundan rastgele seçilir.Diğer görüntüleri ve sonuçları görmek için Çözümle düğmesini seçmeye devam edin.
12. Yerel dalı GitHub'a gönderme
Visual Studio Code terminalinde yerel dalı main uzak deponuza gönderin.
git push origin main
Henüz hiçbir değişiklik yapılmadığından herhangi bir değişiklik yapmanız gerekmiyordu.
13. Statik Web uygulaması kaynağı oluşturma
Azure simgesini seçin, ardından Statik Web Uygulamaları hizmetine sağ tıklayın ve ardından Statik Web Uygulaması Oluştur (Gelişmiş)'i seçin.
Bir açılır pencere dalda devam etmek isteyip istemediğinizi
mainsorarsa Devam'ı seçin.Sonraki alanlara aşağıdaki bilgileri girin ve her seferinde bir tane sunulur.
Alan adı değer Yeni kaynaklar için bir kaynak grubu seçin. ComputerVision kaynağınız için oluşturduğunuz kaynak demo-ComputerVisiongrubunu seçin.Yeni statik web uygulaması için bir ad girin. Demo-ComputerVisionAnalyzerFiyatlandırma seçeneğini belirleme Ücretsiz'i seçin. Uygulama kodunuzun konumunu seçin. Kaynak grubunuzu eastusoluştururken seçtiğiniz konumu seçin.Varsayılan proje yapısını yapılandırmak için derleme ön ayarını seçin. ReactUygulama kodunuzun konumunu seçin. /Azure İşlevleri kodunuzun konumunu girin. Varsayılan değeri alın. Uygulamanızın konumuna göre derleme çıkışınızın yolunu girin. build
14. GitHub eylemini gizli ortam değişkenleriyle güncelleştirme
Görüntü İşleme anahtarı ve uç noktası deponun gizli dizi koleksiyonundadır ancak henüz GitHub eyleminde değildir. Bu adım eyleme anahtarı ve uç noktayı ekler.
GitHub eylem dosyasını almak için Azure kaynağını oluştururken yapılan değişiklikleri aşağı çekin.
git pull origin mainVisual Studio Code düzenleyicisinde, konumunda bulunan
./.github/workflows/GitHub Action dosyasını düzenleyerek gizli dizileri ekleyin.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"Değişikliği yerel
maindala ekleyin ve işleyin.git add . && git commit -m "add secrets to action"Azure Statik web uygulamanıza yeni bir derleme ve dağıtma eylemi başlatarak değişikliği uzak depoya gönderin.
git push origin main
15. GitHub Action derleme işlemini görüntüleme
Bir web tarayıcısında bu öğretici için GitHub deponuzu açın ve Eylemler'i seçin.
Listede en üstteki derlemeyi seçin, ardından derleme işlemini izlemek için sol taraftaki menüden Derleme ve Dağıtma İşi'ni seçin. Derleme ve Dağıtma işlemi başarıyla bitene kadar bekleyin.
16. Uzak Azure statik web sitesini tarayıcıda görüntüleme
- Visual Studio Code'da, en sağdaki menüden Azure simgesini seçin, ardından Statik web uygulamanızı seçin, sonra Siteye gözat'a sağ tıklayın, ardından açık statik web sitesini görüntülemek için Aç'ı seçin.
Sitenin URL'sini şu adreste de bulabilirsiniz:
- Genel Bakış sayfasında kaynağınızın Azure portalını seçin.
- GitHub eyleminin derleme ve dağıtma çıkışında betiğin en sonunda site URL'si vardır
17. Statik web uygulaması için kaynakları temizleme
Bu öğreticiyi tamamladıktan sonra, daha fazla kullanım için faturalandırılmadığınızdan emin olmak için Görüntü İşleme kaynağını ve Statik web uygulamasını içeren kaynak grubunu kaldırmanız gerekir.
VS Code'da Azure gezginini seçin, ardından abonelik altında listelenen kaynak grubunuz üzerinde sağ tıklayın ve Sil'i seçin.
Kod: Yerel React uygulamasına Görüntü İşleme ekleme
package.json dosyasına Görüntü İşleme eklemek için npm kullanın.
npm install @azure/cognitiveservices-computervision
Kod: Görüntü İşleme kodunu ayrı modül olarak ekleme
Görüntü İşleme kodu adlı ./src/azure-cognitiveservices-computervision.jsayrı bir dosyada yer alır. Modülün ana işlevi vurgulanır.
// ./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;
}
Kod: Görüntü kataloğunu ayrı modül olarak ekleme
Kullanıcı bir resim URL'si girmezse uygulama katalogdan rastgele bir görüntü seçer. Rastgele seçim işlevi vurgulanır
// ./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;
Kod: React uygulamasına özel Görüntü İşleme modülü ekleme
React app.jsöğesine yöntemler ekleyin. Görüntü analizi ve sonuçların görüntülenmesi vurgulanır.
// ./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;
Sonraki adımlar
Geri Bildirim
Çok yakında: 2024 boyunca, içerik için geri bildirim mekanizması olarak GitHub Sorunları’nı kullanımdan kaldıracak ve yeni bir geri bildirim sistemiyle değiştireceğiz. Daha fazla bilgi için bkz. https://aka.ms/ContentUserFeedback.
Gönderin ve geri bildirimi görüntüleyin