OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Azure App Service Flask Deployment Error: "Failed to Respond to HTTP Pings on Port 8000; Site Start Failed. Check Container Logs for Debugging."

  • Thread starter Thread starter riddhi
  • Start date Start date
R

riddhi

Guest
We have started working with Flask and with immersive service reader.

Everything is working fine when we run the immersive service in debug mode from Visual Studio code. BUT, when we start deploying the the Flask Web app with Immersive Reader in one of our WebApp in Azure. It is giving us an error. Please note: We are deploying it by a ZIP file mentioned over the link below:

https://learn.microsoft.com/en-us/a...l,terminal-bash,deploy-instructions-zip-azcli

We have gone through each and every steps mentioned in the link but still we are getting below result. (look at the attached image).

https://i.sstatic.net/iVyZfxOj.png

Then, After checking the logs in WebApp we find the error as given below : (when the service has been published and we try to call our deployed WebApp)

https://i.sstatic.net/QsqmMdnZ.png

"Container api-aiml-learning-immersivereader-mpn-eastus_0_8947b5bf for site api-aiml-learning-immersivereader-mpn-eastus has exited, failing site start

Container api-aiml-learning-immersivereader-mpn-eastus_0_8947b5bf didn't respond to HTTP pings on port: 8000, failing site start. See container logs for debugging. "

We is the page that we are expecting when we run the WebApp.

enter image description here

For further details, here is the code that we have used from samples provided as sample.

app.py code

Code:
from flask import Flask, render_template, jsonify
import requests
import os

app = Flask(__name__)

AZURE_CLIENT_ID = os.environ['AZURE_CLIENT_ID']
AZURE_CLIENT_SECRET = os.environ['AZURE_CLIENT_SECRET']
AZURE_TENANT_ID = os.environ['AZURE_TENANT_ID']
AZURE_RESOURCE = 'https://cognitiveservices.azure.com/.default'

@app.route('/')

def index():
    return render_template('index.html')


@app.route('/get_token', methods=['GET'])

def get_token():

    url = f'https://login.microsoftonline.com/{AZURE_TENANT_ID}/oauth2/v2.0/token'
    
    headers = {
        'Content-Type': 'application/x-www-form-urlencoded'
    }
    data = {
        'client_id': AZURE_CLIENT_ID,
        'client_secret': AZURE_CLIENT_SECRET,
        'scope': AZURE_RESOURCE,
        'grant_type': 'client_credentials'
    }

    response = requests.post(url, headers=headers, data=data)
    if response.status_code == 200:
        token = response.json().get('access_token')
        return jsonify({'access_token': token})
    else:
        return jsonify({'error': 'Unable to fetch token'}), 500

if __name__ == '__main__':
    app.run(debug=True)

helpers.js

Code:
document.addEventListener('DOMContentLoaded', function() {
    document.getElementById('immersiveReaderButton').addEventListener('click', launchImmersiveReader);
});

function launchImmersiveReader() {
    fetch('/get_token')
        .then(response => response.json())
        .then(data => {
            console.log("data" ,data);
            if (data.access_token) {
                const token = data.access_token;
                console.log(token);
                const subdomain = '';  // Replace with your subdomain if necessary

                const content = {
                    title: "Immersive Reader Demo",
                    chunks: [
                        {
                            content: document.getElementById('contentToRead').innerHTML,
                            mimeType: 'text/html'
                        }
                    ]
                };

                const options = {
                    readAloudOptions: {
                        voice: 'en-US-JennyNeural',
                        speed: 1.0
                    },
                    uiLang: 'en'
                };

                ImmersiveReader.launchAsync(token, subdomain, content, options)
                    .then(() => {
                        console.log('Immersive Reader launched successfully');
                    })
                    .catch(error => {
                        console.error('Error launching Immersive Reader:', error);
                    });
            } else {
                console.error('Error fetching token:', data.error);
            }
        })
        
        .catch(error => {
            console.error('Error fetching token:', error);
        });
        console.log(ImmersiveReader.launchAsync);
}

index.html

Code:
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Immersive Reader</title>
    <script type='text/javascript' src='https://ircdname.azureedge.net/immersivereadersdk/immersive-reader-sdk.1.4.0.js'></script>
</head>
<body>
    <h1>Immersive Reader Demo</h1>
    <!-- The button with id 'immersiveReaderButton' -->
    <button id="immersiveReaderButton">Launch Immersive Reader</button>
    <!-- The paragraph with id 'contentToRead' -->
    <p id="contentToRead">This is some text to be read by the Immersive Reader.</p>
    <script type='text/javascript' src="{{ url_for('static', filename='helpers.js') }}"></script>
</body>
</html>
<p>We have started working with Flask and with immersive service reader.</p>
<p>Everything is working fine when we run the immersive service in debug mode from Visual Studio code. BUT, when we start deploying the the Flask Web app with Immersive Reader in one of our WebApp in Azure. It is giving us an error. Please note: We are deploying it by a ZIP file mentioned over the link below:</p>
<p><a href="https://learn.microsoft.com/en-us/a...l,terminal-bash,deploy-instructions-zip-azcli" rel="nofollow noreferrer">https://learn.microsoft.com/en-us/a...l,terminal-bash,deploy-instructions-zip-azcli</a></p>
<p>We have gone through each and every steps mentioned in the link but still we are getting below result. (look at the attached image).</p>
<p><a href="https://i.sstatic.net/iVyZfxOj.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/iVyZfxOj.png" alt="https://i.sstatic.net/iVyZfxOj.png" /></a></p>
<p>Then, After checking the logs in WebApp we find the error as given below : (when the service has been published and we try to call our deployed WebApp)</p>
<p><a href="https://i.sstatic.net/QsqmMdnZ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/QsqmMdnZ.png" alt="https://i.sstatic.net/QsqmMdnZ.png" /></a></p>
<p>"Container api-aiml-learning-immersivereader-mpn-eastus_0_8947b5bf for site api-aiml-learning-immersivereader-mpn-eastus has exited, failing site start</p>
<p>Container api-aiml-learning-immersivereader-mpn-eastus_0_8947b5bf didn't respond to HTTP pings on port: 8000, failing site start. See container logs for debugging. "</p>
<p>We is the page that we are expecting when we run the WebApp.</p>
<p><a href="https://i.sstatic.net/3bDK9ElD.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/3bDK9ElD.png" alt="enter image description here" /></a></p>
<p>For further details, here is the code that we have used from samples provided as sample.</p>
<p><strong>app.py code</strong></p>
<pre><code>from flask import Flask, render_template, jsonify
import requests
import os

app = Flask(__name__)

AZURE_CLIENT_ID = os.environ['AZURE_CLIENT_ID']
AZURE_CLIENT_SECRET = os.environ['AZURE_CLIENT_SECRET']
AZURE_TENANT_ID = os.environ['AZURE_TENANT_ID']
AZURE_RESOURCE = 'https://cognitiveservices.azure.com/.default'

@app.route('/')

def index():
return render_template('index.html')


@app.route('/get_token', methods=['GET'])

def get_token():

url = f'https://login.microsoftonline.com/{AZURE_TENANT_ID}/oauth2/v2.0/token'

headers = {
'Content-Type': 'application/x-www-form-urlencoded'
}
data = {
'client_id': AZURE_CLIENT_ID,
'client_secret': AZURE_CLIENT_SECRET,
'scope': AZURE_RESOURCE,
'grant_type': 'client_credentials'
}

response = requests.post(url, headers=headers, data=data)
if response.status_code == 200:
token = response.json().get('access_token')
return jsonify({'access_token': token})
else:
return jsonify({'error': 'Unable to fetch token'}), 500

if __name__ == '__main__':
app.run(debug=True)
</code></pre>
<p><strong>helpers.js</strong></p>
<pre><code>document.addEventListener('DOMContentLoaded', function() {
document.getElementById('immersiveReaderButton').addEventListener('click', launchImmersiveReader);
});

function launchImmersiveReader() {
fetch('/get_token')
.then(response => response.json())
.then(data => {
console.log("data" ,data);
if (data.access_token) {
const token = data.access_token;
console.log(token);
const subdomain = ''; // Replace with your subdomain if necessary

const content = {
title: "Immersive Reader Demo",
chunks: [
{
content: document.getElementById('contentToRead').innerHTML,
mimeType: 'text/html'
}
]
};

const options = {
readAloudOptions: {
voice: 'en-US-JennyNeural',
speed: 1.0
},
uiLang: 'en'
};

ImmersiveReader.launchAsync(token, subdomain, content, options)
.then(() => {
console.log('Immersive Reader launched successfully');
})
.catch(error => {
console.error('Error launching Immersive Reader:', error);
});
} else {
console.error('Error fetching token:', data.error);
}
})

.catch(error => {
console.error('Error fetching token:', error);
});
console.log(ImmersiveReader.launchAsync);
}
</code></pre>
<p><strong>index.html</strong></p>
<pre><code><!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Immersive Reader</title>
<script type='text/javascript' src='https://ircdname.azureedge.net/immersivereadersdk/immersive-reader-sdk.1.4.0.js'></script>
</head>
<body>
<h1>Immersive Reader Demo</h1>
<!-- The button with id 'immersiveReaderButton' -->
<button id="immersiveReaderButton">Launch Immersive Reader</button>
<!-- The paragraph with id 'contentToRead' -->
<p id="contentToRead">This is some text to be read by the Immersive Reader.</p>
<script type='text/javascript' src="{{ url_for('static', filename='helpers.js') }}"></script>
</body>
</html>
</code></pre>
Continue reading...
 
Top