Preciso de ajuda para corrigir a rota e mostrar a renderizadao da pagina result. atualmente
tree
^Cth@1TL-23TI01:~/dev/unit$ tree
.
├── app.py
├── data
│   ├── data.csv
│   └── dataviz.ipynb
├── ml
│   ├── model_training.py
│   └── salary_model.joblib
├── __pycache__
│   ├── app.cpython-310.pyc
│   ├── routes.cpython-310.pyc
│   └── utils.cpython-310.pyc
├── routes.py
├── static
│   └── styles.css
├── templates
│   ├── index.html
│   └── result.html
├── tests
│   ├── test-input.py
│   ├── test_ml_model.py
│   └── test-up.py
└── utils.py

6 directories, 16 files
th@1TL-23TI01:~/dev/unit$ 
utils.py
import pandas as pd
from joblib import load
from flask import current_app, render_template, request, jsonify
import numpy as np
from flask import redirect, url_for
# Carregar o modelo e os dados
loaded_model = load('ml/salary_model.joblib')
data = pd.read_csv('data/data.csv')

# Obter valores únicos e converter para listas
experience_levels = data['experience_level'].unique().tolist()
employment_types = data['employment_type'].unique().tolist()
employee_residences = data['employee_residence'].unique().tolist()
job_titles = data['job_title'].unique().tolist()

def calculate_mean_salary(data, job_titles):
    if isinstance(data, pd.DataFrame):
        selected_titles = data[data['job_title'].isin(job_titles)]
        mean_salary = selected_titles['salary_in_usd'].mean()
        return mean_salary
    else:
        return None

def home():
    return render_template('index.html', 
                           experience_levels=experience_levels,
                           employment_types=employment_types,
                           employee_residences=employee_residences,
                           job_titles=job_titles)

def get_data():
    return jsonify({
        'experience_levels': experience_levels,
        'employment_types': employment_types,
        'employee_residences': employee_residences,
        'job_titles': job_titles
    })

def predict(request):
    # Obter os dados do corpo da solicitação JSON
    data = request.get_json()

    # Extrair os dados relevantes do objeto JSON
    experience_level = data['experience_level']
    employment_type = data['employment_type']
    job_title = data['job_title']
    employee_residence = data['employee_residence']
    remote_ratio = float(data['remote_ratio'])

    # Calcular a média salarial
    mean_salary = calculate_mean_salary(data, job_title)

    # Criar um DataFrame com os dados do usuário
    user_input = pd.DataFrame({
        'experience_level': [experience_level],
        'employment_type': [employment_type],
        'job_title': [job_title],
        'employee_residence': [employee_residence],
        'remote_ratio': [remote_ratio]
    })

    # Realizar a previsão usando o modelo carregado
    predicted_salary = loaded_model.predict(user_input)

    # Redirecionar para a página de resultado e passar os valores como argumentos de consulta
    return redirect(url_for('prediction_routes.result', predicted_salary=predicted_salary[0], mean_salary=mean_salary))



app.py
from flask import Flask
from routes import prediction_routes

app = Flask(__name__)
app.register_blueprint(prediction_routes)

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


routes.py
from flask import Blueprint, render_template, request, jsonify
from utils import home, predict, get_data

prediction_routes = Blueprint('prediction_routes', __name__)

@prediction_routes.route('/predict', methods=['POST'])
def prediction():
    return predict(request)


@prediction_routes.route('/ping')
def ping():
    return jsonify({'status': 'up'})

@prediction_routes.route('/')
def index():
    return home()

@prediction_routes.route('/result', methods=['GET'])
def result():
    predicted_salary = request.args.get('predicted_salary')
    return render_template('result.html', predicted_salary=predicted_salary)


result.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Salary Prediction Result</title>
</head>
<body>
    <h1>Salary Prediction Result</h1>
    <p>The predicted salary for the user is approximately ${{ predicted_salary }}</p>

</body>
</html>

index.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Salary Predictor</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
</head>
<body>
    <div id="app">
        <h1>Salary Predictor</h1>
        <form @submit.prevent="submitForm">
            <label for="experience_level">Experience Level:</label>
            <select id="experience_level" v-model="form.experience_level">
                <option value="">Select Experience Level</option>
                <option value="SE">SE - Senior</option>
                <option value="MI">MI - Mid</option>
                <option value="EN">EN - Entry</option>
                <option value="EX">EX - Executive</option>
            </select>

            <label for="employment_type">Employment Type:</label>
            <select id="employment_type" v-model="form.employment_type">
                <option value="">Select Employment Type</option>
                <option value="FT">Full-Time</option>
                <option value="CT">Contract</option>
                <option value="FL">Freelance</option>
                <option value="PT">Part-Time</option>
            </select>

            <label for="job_title">Job Title:</label>
            <select id="job_title" v-model="form.job_title">
                <option value="">Select Job Title</option>
                <option value="Principal Data Scientist">Principal Data Scientist</option>
                <!-- Adicione as opções restantes aqui -->
            </select>

            <label for="employee_residence">Employee Residence:</label>
            <select id="employee_residence" v-model="form.employee_residence">
                <option value="">Select Employee Residence</option>
                <option value="ES">Spain</option>
                <option value="US">United States</option>
                <!-- Adicione as opções restantes aqui -->
            </select>

            <label for="remote_ratio">Remote Ratio:</label>
            <input type="number" id="remote_ratio" v-model="form.remote_ratio">

            <button type="submit">Predict</button>
        </form>
    </div>

    <script>
        new Vue({
            el: '#app',
            data: {
                form: {
                    experience_level: '',
                    employment_type: '',
                    job_title: '',
                    employee_residence: '',
                    remote_ratio: 0
                }
            },
            methods: {
                submitForm() {
                    axios.post('/predict', this.form)
                        .then(response => {
                            console.log(response.data);  // Adicionado para depuração
                        })
                        .catch(error => {
                            console.error(error);
                        });
                }
            }
        });
    </script>
</body>
</html>