Azure AI Auto ML Client App

Demo application to interact with Azure AI by exploring Automated Machine Learning in Azure Machine Learning.

Getting Started

✨ Option 1: Using the template

Follow these steps to set up and run the application locally by cloning the repository.

Clone the repository:

git clone https://github.com/dileepadev/AzureAI-AutoML-Client-App.git

Navigate to the project directory:
```
 cd AzureAI-AutoML-Client-App
```

Create and activate a virtual environment:

## Create virtual environment
python -m venv venv

## Activate on Windows
venv\Scripts\activate.bat

## Activate on macOS/Linux
source venv/bin/activate

Install requirements:
```
pip install -r requirements.txt
```
Create .env file to store the key
```
KEY=your_key
ENDPOINT=your_endpoint
```
Run the application:
```
python app.py
```

✨ Option 2: Creating as a new project

Follow these steps to set up and run the application locally from the beginning.

Setup project directory

Create directory:
```
mkdir AzureAI-AutoML-Client-App
```
Navigate to the project directory:
```
cd AzureAI-AutoML-Client-App
```
Create and activate a virtual environment:

Create virtual environment:
```
python -m venv venv
```
Activate on Windows:
```
venv\Scripts\activate.bat
```
Activate on macOS/Linux:
```
source venv/bin/activate
```
Install Flask:
```
pip install flask
```
Open the project in your preferred code editor:

Type this command to open in Visual Studio Code:
```
code .
```

Create app.py for your Flask application:

from flask import Flask, render_template

app = Flask(__name__)

@app.route('/')
def index():
    return render_template('index.html')

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

Create a templates directory for HTML templates:
```
mkdir templates
```

Create an HTML template inside the templates directory, for example, index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Azure ML Web App</title>
</head>
<body>
    <h1>Azure ML Web App</h1>
    <p>This is my Python based web app to working with Azure ML.
</body>
</html>

Run the application:
```
python app.py
```
Visit http://127.0.0.1:5000 in your web browser to see your web app in action.
Create a static directory for static files such as CSS, JavaScript, etc.:
```
mkdir static
```

Create a CSS file inside the static directory, for example, styles.css. You can add your CSS styles here.

/* styles.css */
body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
}

h1 {
    color: #333;
}

    /* Add more styles as needed */

Add a link tag <link>to your HTML template (index.html) to include the CSS file:

Add this line to the index.html:

<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">

This will be the updated index.html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Azure ML Web App</title>
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='styles.css') }}">
</head>
<body>
    <h1>Azure ML Web App</h1>
    <p>This is my Python based web app to working with Azure ML.
</body>
</html>

**Install python-dotenv to maintain the .env file, and install requests to make requests
```
pip install python-dotenv
pip install requests
```
Create .env file to store the key
```
KEY=your_key
ENDPOINT=your_endpoint
```

Create predictAPI.py to connect with Azure ML

import urllib.request
import json
import os
import ssl
import dotenv

# Load environment variables from .env file
dotenv.load_dotenv()


def allowSelfSignedHttps(allowed):
    # bypass the server certificate verification on client side
    if (
        allowed
        and not os.environ.get("PYTHONHTTPSVERIFY", "")
        and getattr(ssl, "_create_unverified_context", None)
    ):
        ssl._create_default_https_context = ssl._create_unverified_context


def predictAPI():
    allowSelfSignedHttps(
        True
    )  # this line is needed if you use self-signed certificate in your scoring service.

    # Request data goes here
    # The example below assumes JSON formatting which may be updated
    # depending on the format your endpoint expects.
    # More information can be found here:
    # https://docs.microsoft.com/azure/machine-learning/how-to-deploy-advanced-entry-script
    data = {
        "Inputs": {
            "data": [
                {
                    "Path": "example_value",
                    "day": 1,
                    "mnth": 1,
                    "year": 2022,
                    "season": 2,
                    "holiday": 0,
                    "weekday": 1,
                    "workingday": 1,
                    "weathersit": 2,
                    "temp": 0.3,
                    "atemp": 0.3,
                    "hum": 0.3,
                    "windspeed": 0.3,
                }
            ]
        },
        "GlobalParameters": 0.0,
    }

    body = str.encode(json.dumps(data))

    url = os.environ.get("ENDPOINT")
    # Replace this with the primary/secondary key or AMLToken for the endpoint
    api_key = os.environ.get("KEY")
    if not api_key:
        raise Exception("A key should be provided to invoke the endpoint")

    headers = {
        "Content-Type": "application/json",
        "Authorization": ("Bearer " + api_key),
    }

    req = urllib.request.Request(url, body, headers)

    try:
        response = urllib.request.urlopen(req)

        result = response.read()
        # Return the result as a string
        return result
    except urllib.error.HTTPError as error:
        print("The request failed with status code: " + str(error.code))

        # Print the headers - they include the requert ID and the timestamp, which are useful for debugging the failure
        print(error.info())
        print(error.read().decode("utf8", "ignore"))


# print(predictAPI())

Update app.py to use requests

from flask import Flask, render_template
import predictAPI

app = Flask(__name__)


@app.route("/")
def index():
    # Call Azure ML API
    prediction = str(predictAPI.predictAPI())
    print("Prediction: ", prediction)

    # Pass data to HTML template for display
    return render_template("index.html", prediction=prediction)


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

Update index.html to use requests

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Azure ML Web App</title>
    <link
    rel="stylesheet"
    href="{{ url_for('static', filename='styles.css') }}"
    />
</head>
<body>
    <h1>Azure ML Prediction Result</h1>
    {% if prediction %}
    <p>{{ prediction }}</p>
    {% else %}
    <p>Failed to retrieve prediction. Please try again later.</p>
    {% endif %}
</body>
</html>

Contributing

Contributions are welcome! If you find any issues or have suggestions for improvement, please open an issue or submit a pull request.

License

This project is licensed under the MIT License.

Contact

Dileepa Bandara
@dileepadev

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Repository files navigation

Azure AI Auto ML Client App

Getting Started

✨ Option 1: Using the template

✨ Option 2: Creating as a new project

Contributing

License

Contact

About

Uh oh!

Uh oh!

Languages

Name		Name	Last commit message	Last commit date
Latest commit History 2 Commits
static		static
templates		templates
.gitignore		.gitignore
README.md		README.md
app.py		app.py
predictAPI.py		predictAPI.py
requirements.txt		requirements.txt

dileepadev/AzureAI-AutoML-Client-App

Folders and files

Latest commit

History

Repository files navigation

Azure AI Auto ML Client App

Getting Started

✨ Option 1: Using the template

✨ Option 2: Creating as a new project

Contributing

License

Contact

About

Topics

Resources

Uh oh!

Stars

Watchers

Forks

Uh oh!

Languages