model_dashboard.html

{% extends 'container.html' %}
{% block content %}

<style>

    main {
        display: flex;
        flex-direction: column;

        overflow: hidden;
    }

    .colonne {
        display: flex;
        flex-wrap: wrap;
        padding: 20px;
        overflow-y: auto;

    }

    h2 {
        margin-bottom: 20px;
    }

    .model-item {
        border: solid 3px #000000;
        max-width: 500px;
        padding: 10px;
        margin: 20px;
        background-color: #f0f0f0;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    }

    h3 {
        margin-bottom: 10px;
    }

    p {
        margin-bottom: 5px;
    }

    code {
        display: block;
        padding: 10px;
        background-color: #f5f5f5;
        border-radius: 5px;
        overflow-x: auto;
        max-height: 200px;
    }

    button {
        padding: 10px 20px;
        background-color: #28a3d7;
        color: #fff;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }

    button:hover  
{
        background-color: #1b5269;
    }
    .bulle_model{

        
         height: 300px;
         width: 500px;
         padding: 10px;
         margin:20px;
         border-radius: 15px;
         background-color: #d1f1ff;
    }
    .bulle_model > code{
        height: 100px;
    margin-bottom: 15px;
    }
    #model-data{
        display: flex;
        flex-wrap: wrap;
    }
</style>





<main >
    <h2>list actif</h2>
<div class="colonne">

<div id="model-data"></div>
</div>
<h2>All List</h2>
<div class="colonne">

{% for model in list_model_all %}

<div  class="bulle_model">
    <h3>{{model.run_name}}</h3>
    <p>{{model.run_id}}</p>
    <p>{{model.experiment_id}}</p>
    <code>{{model.metrics}}</code>
    <button onclick="add_model('{{model.run_id}}')"> add model</button>
</div>

{% endfor %}
</div>

</main>


<script>




// JavaScript
function fetch_model() {
    fetch("{{ url_for('liste_actif_model') }}")
   .then(response => {
        if (!response.ok) {
            throw new Error(`HTTP error status: ${response.status}`);
        }
        return response.json(); // Convertit la réponse en JSON
    })
   .then(data => {
        // Sélectionnez la div où vous voulez afficher les données
        const modelDiv = document.getElementById('model-data');
        
        // Construisez le contenu HTML à partir des données récupérées
        let htmlContent = '';
        data.forEach(model => {
            htmlContent += `
                <div class="bulle_model" >
                    <h3>${model.run_name}</h3>
                    <p>${model.run_id}</p>
                    <p>${model.experiment_id}</p>
                    <code>${JSON.stringify(model.metrics)}</code>
                    <button onclick="del_model('${model.run_id}')">Del Model</button>
                </div>`;
        });
        
        // Insérez le contenu HTML dans la div sélectionnée
        modelDiv.innerHTML = htmlContent;
    })
   .catch(error => {
        console.error('Erreur lors de la récupération des données:', error);
    });
}



window.onload = fetch_model();


function add_model(id_model){
    fetch("{{ url_for('add_model_list',id_model='') }}"+ id_model)
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        // Ici, vous pouvez ajouter du code supplémentaire si nécessaire avant de lancer fetch_model()
        return fetch_model();
    });
  }
  function del_model(id_model){
    fetch("{{ url_for('del_model_list',id_model='') }}"+ id_model)
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        // Ici, vous pouvez ajouter du code supplémentaire si nécessaire avant de lancer fetch_model()
        return fetch_model();
    });
  }

</script>
{% endblock %}