Creating Test Inputs UI for the Flask App

Creating some test inputs for the flask app

Now that we have Monte Carlo algorithm implemented, and if you missed that you can go to previous section to do that.

What does this mean? Well for our Monte Carlo Simulation we have four major inputs

• ticker
• Number of Iterations
• Dollars
• Number of months

We will need to write app.py to load a html page like this one

and new endpoint we can create as many endpoints as we like but for every endpoint API call or hit called will cost small amounts of money.

So we will rewrite our route hello to render template and new endpoint called /call-model.

@app.route('/')
def hello():
    # here we can past inputs from the frontend to our model
    return render_template('index.html')

@app.route('/call-model', methods=['POST'])
def call_model_route():
    form_data = request.form
    print(form_data['ticker'])

    # Your logic here, using the form values
    model_result = call_model(API_KEY, form_data)

    return jsonify(model_result)

first We need to create templates folder and write html for inputs and javascript to handle logic when we past data.

Inside of this index.html we need to add our basic structure

<!DOCTYPE html>
<html>
<head>
    <title>Model Input</title>
</head>
<body>
</body>
</html>

Then we need create our basic form inputs inside the body

<body>
<h1>Enter Model Parameters</h1>
    <form id="modelForm">
    </form>
</body>

Then within this form we add in the inputs of our model that last line here where we have HTML tag input with attribute type set as button is import because browser will render that html as a button and the that onclick call equals submitForm() will trigger some html later in the html.

<body>
<h1>Enter Model Parameters</h1>
    <form id="modelForm">
            <label for="ticker">Ticker:</label>
        <input type="text" id="ticker" name="ticker"><br><br>

        <label for="num_iter">Number of Iterations:</label>
        <input type="number" id="num_iter" name="num_iter"><br><br>

        <label for="dollars">Dollars:</label>
        <input type="number" id="dollars" name="dollars"><br><br>

        <label for="num_months">Number of Months:</label>
        <input type="number" id="num_months" name="num_months"><br><br>

        <input type="button" value="Submit" onclick="submitForm()">
    </form>

<!-- insert  results -->

</body>

Then whatever we input into our model were going to need to return results

so below the inputs in the body tag we need write some divs and set ids these ids are important so flask knows where to return the data

    <!-- Add a div to display the results -->
    <div id="result">
        <h2>Results:</h2>
        <pre id="modelOutput"></pre>
    </div>

Now were going write script tag in html that should be at the bottom of the body tag. In Javascript we write function submitForm() so it matches the onclick attribute. then inside the function we create object call FormData and using html5 we can getElementByID to reference the form above via its id ‘modelForm’.

The data is taken from the form then pasted to object formData

formData is then pasted to the new method called fetch we will need endpoint to send our POST request data We defined its ‘POST’ method and give the body the formData object.

The fetch method is async its waits for a response from the backend .then is used to dictate various outcomes data comes, loads it on specific part of page via the id=”modelOutput” or the request errors.

<!-- Add script tag to trigger the submitForm()  -->
    <script>
        function submitForm() {

        // Create a new FormData object, capturing the data from the form with ID 'modelForm'
        const formData = new FormData(document.getElementById('modelForm'));

        // using the fetch method which is async we can send a POST request 
        // to the '/call-model' route or endpoint with the form data
        fetch('/call-model', {
            method: 'POST',
            body: formData
        })

        // Convert the response from the server to JSON format
        // This assumes that the server response is JSON encoded
        .then(response => {
            return response.json();
        })
        .then(data => {

            //here we display the results via HTML element with ID 'modelOutput'
            // JSON.stringify is used to convert the JSON object into a string
            document.getElementById('modelOutput').textContent = JSON.stringify(data, null, 2);
        })
        .catch(error => {
            // If there's an error in the network request or backend its outputted here in console.log
            console.error('Error:', error);
        });
    }
    </script>

Now we go back to app.py t import some more functions that lets load our html

from flask import Flask, render_template, request, jsonify

We can create our rewrite our / homepage route

@app.route('/')
def hello():
    # here we can past inputs from the frontend to our model
    return render_template('index.html')

We will rewrite a new route called ‘/call-model’

@app.route('/call-model', methods=['POST'])
def call_model_route():
    form_data = request.form
    print(form_data['ticker'])
    
    # Your logic here, using the form values
    model_result = call_model(API_KEY, form_data)
    
    return jsonify(model_result)

We can comment out model_result = call_model(API_KEY, form_data) and return “test” as shown below,

@app.route('/call-model', methods=['POST'])
def call_model_route():
    form_data = request.form
    print(form_data['ticker'])

    # Your logic here, using the form values
    # model_result = call_model(API_KEY, form_data)

    return jsonify('test')

then run the flask app local server you should see

You see ‘test’ show up ok so that part was only about passing data from a front-end to back. We still have to pass data from the server to the models so we have to update all the model code.

Here we are going to update the call_model function in the python script model_call.py

The code should look like this

def call_model(API_KEY, form_data):
    # Step 1: Preprocess the messy data
    data_for_model = load_and_preprocess_data(API_KEY, form_data['ticker'])

    # Step 2: we load model and predict & rearrage the data
    new_results = apply_model(data_for_model, 
                        form_data['num_iter'], 
                        form_data['dollars'], 
                        form_data['num_months'])

    # Step 3: Save the organized data to data base
    # output_file_path = r'E:\NittanyAI Projects\Nittany-AI-Rapid-Prototyping-Code\back-end-prototype\results'
    # save_data(new_results, output_file_path)
    return new_results

the form_data object we defined in python when you print(form_data) show look like this

ImmutableMultiDict([('ticker', 'IBM'), ('num_iter', '100'), ('dollars', '100'), ('num_months', '12')])

so we can pass specific data points from user input to our model

Always check the other functions you load_and_preprocess_data function should look like this

def load_and_preprocess_data(API_KEY, ticker):

    # Load the data
    data = time_series_fun_monthly(API_KEY, ticker)
    return data  # assuming coords is the preprocessed data

Ok so now that we pasting data to model and getting results back on

Now that works we need to store the results of our API query or calculated results if want to show them later on to users. Now that we a flask app with API endpoints, algorithm implemented and some test UI inputs we can now store data into a database, I perfer to use Supabase because it won’t waste your time. So go to the next section.