Spaces:
Running
Running
File size: 5,321 Bytes
7da22ca |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 |
import dash
from dash import html, dcc, callback, Input, Output
import dash_mantine_components as dmc
from dash_iconify import DashIconify
dash.register_page(__name__, path='/rac-generation-agent', name='Génération du RAC')
tasks = [
"Récupération des offres d'emploi",
"Récupération des statistiques de l'emploi",
"Récupération de la fiche métier",
"Génération de la cotation du secteur",
]
def create_stepper_step(step_id, label):
return dmc.Group(
[
dmc.Box(id=f"icon-{step_id}", children=DashIconify(icon="radix-icons:dot", width=20)),
dmc.Text(label),
],
mb="sm",
)
layout = dmc.Container(
[
html.Script(
"""
document.addEventListener('DOMContentLoaded', function() {
const socket = io.connect(window.location.protocol + '//' + document.domain + ':' + location.port);
const startButton = document.getElementById('start-rac-button');
const taskIcons = {
'Récupération des offres d'emploi': 'icon-step-0',
'Récupération des statistiques de l'emploi': 'icon-step-1',
'Récupération de la fiche métier': 'icon-step-2',
'Génération de la cotation du secteur': 'icon-step-3',
};
const streamingOutputs = {
'Récupération des offres d'emploi': 'streaming-output-0',
'Récupération des statistiques de l'emploi': 'streaming-output-1',
'Récupération de la fiche métier': 'streaming-output-2',
'Génération de la cotation du secteur': 'streaming-output-3',
};
let currentStep = '';
socket.on('stream', function(msg) {
if (msg.step !== currentStep) {
if(currentStep) {
const oldIcon = document.getElementById(taskIcons[currentStep]);
oldIcon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>'; // Checkmark icon
}
currentStep = msg.step;
const icon = document.getElementById(taskIcons[currentStep]);
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-dasharray="15" stroke-dashoffset="15" stroke-linecap="round" stroke-width="2" d="M12 3C16.9706 3 21 7.02944 21 12"><animate fill="freeze" attributeName="stroke-dashoffset" dur="0.3s" values="15;0"/><animateTransform attributeName="transform" dur="1.5s" repeatCount="indefinite" type="rotate" values="0 12 12;360 12 12"/></path></svg>';
}
const output = document.getElementById(streamingOutputs[msg.step]);
output.innerHTML += msg.data;
});
socket.on('stream_end', function(msg) {
if(msg.step === "Génération de la cotation du secteur") {
const icon = document.getElementById(taskIcons[msg.step]);
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5l1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg>';
}
});
startButton.addEventListener('click', function() {
fetch('/start_rac_agent', {method: 'POST'})
.then(response => response.json())
.then(data => console.log(data.status));
});
});
"""
),
dmc.Title("Génération du Référentiel d'Activités et de Compétences (RAC)", order=2, mb="lg"),
dmc.Button("Démarrer la génération", id="start-rac-button", mb="lg"),
dmc.Grid(
[
dmc.GridCol(
[
dmc.Title("Statut des tâches", order=4, mb="md"),
*[create_stepper_step(f"step-{i}", task) for i, task in enumerate(tasks)]
],
span=4
),
dmc.GridCol(
[
dmc.Title("Contenu généré", order=4, mb="md"),
*[dmc.Paper(
shadow="xs", p="md", withBorder=True, mb="sm",
id=f"streaming-output-{i}",
style={"whiteSpace": "pre-line", "fontFamily": "monospace"}
) for i, task in enumerate(tasks)]
],
span=8
),
]
)
],
fluid=True,
p="lg",
pt="xl"
) |