Update app.py

app.py

@@ -4,9 +4,10 @@ import requests
 import textwrap
 from offres_emploi import Api
 from offres_emploi.utils import dt_to_str_iso
-from dash import Dash, html, dcc, callback, Output, Input, dash_table, State, _dash_renderer
+from dash import Dash, html, dcc, callback, Output, Input, dash_table, State, _dash_renderer, clientside_callback
 import dash_bootstrap_components as dbc
 import plotly.express as px
+import plotly.graph_objects as go
 import dash_mantine_components as dmc
 from dash_iconify import DashIconify
 import pandas as pd
@@ -16,11 +17,12 @@ import plotly.io as pio
 from langchain_community.llms import HuggingFaceEndpoint
 from langchain_core.prompts import ChatPromptTemplate, PromptTemplate
 from langchain.schema.output_parser import StrOutputParser
+from pinecone import Pinecone
+from bs4 import BeautifulSoup
 
 from flask import Flask
 
 server = Flask(__name__)
-
 # external JavaScript files
 external_scripts = [
     'https://datacipen-eventia.hf.space/copilot/index.js'
@@ -50,6 +52,256 @@ pio.templates.default = "custom_plotly_dark"
 
 load_dotenv()
 
+def removeTags(all):
+  for data in all(['style', 'script']):
+    data.decompose()
+  return ''.join(all.stripped_strings)
+
+def htmlToDataframe(htmlTable):
+  data = []
+  list_header = []
+  soup = BeautifulSoup(htmlTable,'html.parser')
+  header = soup.find_all("table")[0].find("tr")
+  for items in header:
+    try:
+      list_header.append(items.get_text())
+    except:
+      continue
+  HTML_data = soup.find_all("table")[0].find_all("tr")[1:]
+  for element in HTML_data:
+    sub_data = []
+    for sub_element in element:
+      try:
+        sub_data.append(sub_element.get_text())
+      except:
+          continue
+    data.append(sub_data)
+  dataFrame = pd.DataFrame(data = data, columns = list_header)
+  return dataFrame
+
+def getSavoirFaireFromHTMLMetier(url):
+  response = requests.get(url)
+  soup = BeautifulSoup(response.text, "html.parser")
+  allSavoirFaire = soup.select('ul[data-cy="liste-savoir-faire-metier"] > li')
+  if len(allSavoirFaire) != 0:
+    allSF = "<table><tr><td>Savoir-faire</td><td>Libelle</td><td>Type</td><td>Categorie</td></tr>"
+    for i in range(0,len(allSavoirFaire)):
+      blockSavoirFaire = allSavoirFaire[i]
+      try:
+        soupSavoirFaire = BeautifulSoup(str(blockSavoirFaire), "html.parser")
+        titleSavoirFaire = soupSavoirFaire.select('h4.fm-block-form-title')
+        descriptSavoirFaire = soupSavoirFaire.select('div.fm-block-form-collapse-content')
+        if removeTags(titleSavoirFaire[0]) != None:
+          for j in range(0,len(descriptSavoirFaire)):
+            ssblockSavoirFaire = descriptSavoirFaire[j]
+            soupssSavoirFaire = BeautifulSoup(str(ssblockSavoirFaire), "html.parser")
+            sstitleSavoirFaire = soupssSavoirFaire.select('h5.fm-block-form-subtitle')
+            listSavoirFaire = soupssSavoirFaire.select('ul.list-unstyled > li')
+            if len(listSavoirFaire) != 0:
+              for k in range(0,len(listSavoirFaire)):
+                blockListSavoirFaire = removeTags(listSavoirFaire[k])
+                allSF += "<tr><td>" + removeTags(titleSavoirFaire[0]) + "</td><td>" + blockListSavoirFaire + "</td><td>" + removeTags(sstitleSavoirFaire[0]) + "</td><td>1</td></tr>"
+      except:
+        print("Pas de Savoir-Faire!")
+    allSF += "</table>"
+  return allSF
+
+def getSavoirFromHTMLMetier(url):
+  response = requests.get(url)
+  soup = BeautifulSoup(response.text, "html.parser")
+  allSavoirFaire = soup.select('ul[data-cy="liste-savoir-metier"] > li')
+  if len(allSavoirFaire) != 0:
+    allSF = "<table><tr><td>Savoir-faire</td><td>Libelle</td><td>Categorie</td></tr>"
+    for i in range(0,len(allSavoirFaire)):
+      blockSavoirFaire = allSavoirFaire[i]
+      try:
+        soupSavoirFaire = BeautifulSoup(str(blockSavoirFaire), "html.parser")
+        titleSavoirFaire = soupSavoirFaire.select('h4.fm-block-form-title')
+        descriptSavoirFaire = soupSavoirFaire.select('div.fm-block-form-collapse-content')
+        if removeTags(titleSavoirFaire[0]) != None:
+          for j in range(0,len(descriptSavoirFaire)):
+            ssblockSavoirFaire = descriptSavoirFaire[j]
+            soupssSavoirFaire = BeautifulSoup(str(ssblockSavoirFaire), "html.parser")
+            listSavoirFaire = soupssSavoirFaire.select('ul.list-unstyled > li')
+            if len(listSavoirFaire) != 0:
+              for k in range(0,len(listSavoirFaire)):
+                blockListSavoirFaire = removeTags(listSavoirFaire[k])
+                allSF += "<tr><td>" + removeTags(titleSavoirFaire[0]) + "</td><td>" + blockListSavoirFaire + "</td><td>1</td></tr>"
+      except:
+        print("Pas de Savoir-Faire!")
+    allSF += "</table>"
+  return allSF
+
+def getContextFromHTMLMetier(url):
+  response = requests.get(url)
+  soup = BeautifulSoup(response.text, "html.parser")
+  allContext = soup.select('div[data-cy="liste-contextes"] > div.fm-context')
+  count = 0
+  if len(allContext) != 0:
+    allSF = "<table><tr><td>Savoir-faire</td><td>Libelle</td><td>Categorie</td></tr>"
+    for i in range(0,len(allContext)):
+      count = count + 1
+      blockContext = allContext[i]
+      try:
+        soupContext = BeautifulSoup(str(blockContext), "html.parser")
+        titleSavoirFaire = soupContext.select('h3.fm-context-title')
+        descriptSavoirFaire = soupContext.select('ul > li')
+        if removeTags(titleSavoirFaire[0]) != None:
+          for j in range(0,len(descriptSavoirFaire)):
+            ssblockSavoirFaire = descriptSavoirFaire[j]
+            if len(ssblockSavoirFaire) != 0:
+              allSF += "<tr><td>" + removeTags(titleSavoirFaire[0]) + "</td><td>" + removeTags(ssblockSavoirFaire) + "</td><td>1</td></tr>"
+      except:
+        print("Pas de Savoir-Faire!")
+    allSF += "</table>"
+  return allSF
+
+def datavisualisation_skills_context(df, template, paper_bgcolor, plot_bgcolor, title_template, codeRome):
+    train = df
+    array_df = list(df.columns)
+    if any(x == "Type" for x in array_df):
+        df1 = train.groupby(['Savoir-faire', 'Type'])['Categorie'].count().reset_index()
+        df1.columns = ['source', 'target', 'value']
+        df2 = train.groupby(['Type', 'Libelle'])['Categorie'].count().reset_index()
+        df2.columns = ['source', 'target', 'value']
+        all_links = pd.concat([df1, df2], axis=0)
+    else:
+        df1 = train.groupby(['Savoir-faire', 'Libelle'])['Categorie'].count().reset_index()
+        df1.columns = ['source', 'target', 'value']
+        all_links = df1
+
+    unique_source_target = list(pd.unique(all_links[['source', 'target']].values.ravel('K')))
+    mapping_dict = {k: v for v, k in enumerate(unique_source_target)}
+
+    all_links['source'] = all_links['source'].map(mapping_dict)
+    all_links['target'] = all_links['target'].map(mapping_dict)
+
+    links_dict = all_links.to_dict(orient='list')
+    #Sankey Diagram Code 
+    colors = [
+            "blue","blueviolet","brown","burlywood","cadetblue",
+            "chartreuse","chocolate","coral","cornflowerblue",
+            "cornsilk","crimson","cyan","darkblue","darkcyan",
+            "darkgoldenrod","darkgray","darkgrey","darkgreen",
+            "darkkhaki","darkmagenta","darkolivegreen","darkorange",
+            "darkorchid","darkred","darksalmon","darkseagreen",
+            "darkslateblue","darkslategray","darkslategrey",
+            "darkturquoise","darkviolet","deeppink","deepskyblue",
+            "dimgray","dimgrey","dodgerblue","firebrick",
+            "floralwhite","forestgreen","fuchsia","gainsboro",
+            "ghostwhite","gold","goldenrod","gray","grey","green",
+            "greenyellow","honeydew","hotpink","indianred","indigo",
+            "ivory","khaki","lavender","lavenderblush","lawngreen",
+            "lemonchiffon","lightblue","lightcoral","lightcyan",
+            "lightgoldenrodyellow","lightgray","lightgrey",
+            "lightgreen","lightpink","lightsalmon","lightseagreen",
+            "lightskyblue","lightslategray","lightslategrey",
+            "lightsteelblue","lightyellow", "lime","limegreen",
+            "linen","magenta","maroon","mediumaquamarine",
+            "mediumblue","mediumorchid","mediumpurple",
+            "mediumseagreen","mediumslateblue","mediumspringgreen",
+            "mediumturquoise","mediumvioletred","midnightblue",
+            "mintcream","mistyrose","moccasin","navajowhite","navy",
+            "oldlace","olive","olivedrab","orange","orangered",
+            "orchid","palegoldenrod","palegreen","paleturquoise",
+            "palevioletred","papayawhip","peachpuff","peru","pink",
+            "plum","powderblue","purple","red","rosybrown",
+            "royalblue","rebeccapurple","saddlebrown","salmon",
+            "sandybrown","seagreen","seashell","sienna","silver",
+            "skyblue","slateblue","slategray","slategrey","snow",
+            "aliceblue","antiquewhite","aqua","aquamarine","azure",
+            "beige","bisque","black","blanchedalmond"
+    ]
+    array_label_rome = searchByRome(codeRome)
+    fig = go.Figure(data=[go.Sankey(
+        node = dict(
+            pad = 15,
+            thickness = 20,
+            line = dict(color = "black", width = 0.5),
+            label = unique_source_target,
+            color = colors
+        ),
+        link = dict(
+            source = links_dict["source"],
+            target = links_dict["target"],
+            value = links_dict["value"],
+            color="lightgrey"
+        ))]).update_layout(template=template, paper_bgcolor=paper_bgcolor, plot_bgcolor=plot_bgcolor, title_text=title_template + " du code ROME : " + array_label_rome[0]['label'], font_size=10,width=1000, height=800)
+    return fig
+
+def datavisualisation_chiffres_cles_emplois(url):
+    response = requests.get(url)
+    soup = BeautifulSoup(response.text, "lxml")
+
+    alldemandeurs = ''
+    allsalaires = ''
+    alldifficultes = ''
+    allrepartitions = ''
+    allentreprises = ''
+    allembauches = soup.select('p.population_category')
+    allnumembauchesfirst = soup.select('p.population_main-num.data')
+    allnumembauches = removeTags(allnumembauchesfirst[0]).split('\xa0')
+    allnumembauches = ''.join(allnumembauches)
+    allnumoffres = removeTags(allnumembauchesfirst[1]).split('\xa0')
+    allnumoffres = ''.join(allnumoffres)
+    alldetailembauches = soup.select('p.hiring_text.ng-star-inserted')
+    allnumevolutionembauches = soup.select('p.main.ng-star-inserted')
+    alldetailevolutionembauches = soup.select('p.population_bubble-title')
+    alldemandeurs = "<table><tr><td>Indicateur</td><td>Valeur</td></tr><tr><td>" + removeTags(allembauches[0]) + " (" + removeTags(alldetailembauches[0]) + ");"
+    if len(alldetailevolutionembauches) >= 1 and len(allnumevolutionembauches) >= 1:
+        alldemandeurs += "\nÉvolution demandeurs d'emploi (" + removeTags(alldetailevolutionembauches[0]) + ": " + removeTags(allnumevolutionembauches[0]) + ")</td>"
+    else:
+        alldemandeurs += "</td>"
+    alldemandeurs += "<td>" + allnumembauches + "</td></tr>"
+    alldemandeurs += "<tr><td>" + removeTags(allembauches[1]) + " (" + removeTags(alldetailembauches[1]) + ");"
+    if len(alldetailevolutionembauches) >= 2 and len(allnumevolutionembauches) >= 2:
+        alldemandeurs += "\nÉvolution offres d'emploi (" + removeTags(alldetailevolutionembauches[1]) + ": " + removeTags(allnumevolutionembauches[1]) + ")</td>"
+    else:
+        alldemandeurs += "</td>"
+    alldemandeurs += "<td>" + allnumoffres + "</td></tr>"
+    alldemandeurs += "</table>"
+
+    allFAP = soup.select('tr.sectorTable__line.ng-star-inserted')
+    allcategorie = soup.select('td.sectorTable__cell')
+    alltypesalaires = soup.select('th.sectorTable__cell')
+    allFAPsalaires = soup.select('p.sectorTable__cellValue')
+    if len(allFAPsalaires) >= 3:
+        allsalaires = "<table><tr><td>categorie</td><td>emploi</td><td>salaire</td></tr>"
+        allsalaires += "<tr><td>" + removeTags(alltypesalaires[1]) + "</td><td>" + removeTags(allcategorie[0]) + "</td><td>" + removeTags(allFAPsalaires[0]).replace('\xa0','').replace(' ','').replace('€','') + "</td></tr>"
+        allsalaires += "<tr><td>" + removeTags(alltypesalaires[2]) + "</td><td>" + removeTags(allcategorie[0]) + "</td><td>" + removeTags(allFAPsalaires[1]).replace('\xa0','').replace(' ','').replace('€','') + "</td></tr>"
+        allsalaires += "<tr><td>" + removeTags(alltypesalaires[3]) + "</td><td>" + removeTags(allcategorie[0]) + "</td><td>" + removeTags(allFAPsalaires[2]).replace('\xa0','').replace(' ','').replace('€','') + "</td></tr>"
+        if len(allFAP) >= 2 and len(allFAPsalaires) == 6:
+            allsalaires += "<tr><td>" + removeTags(alltypesalaires[1]) + "</td><td>" + removeTags(allcategorie[4]) + "</td><td>" + removeTags(allFAPsalaires[3]).replace('\xa0','').replace(' ','').replace('€','') + "</td></tr>"
+            allsalaires += "<tr><td>" + removeTags(alltypesalaires[2]) + "</td><td>" + removeTags(allcategorie[4]) + "</td><td>" + removeTags(allFAPsalaires[4]).replace('\xa0','').replace(' ','').replace('€','') + "</td></tr>"
+            allsalaires += "<tr><td>" + removeTags(alltypesalaires[3]) + "</td><td>" + removeTags(allcategorie[4]) + "</td><td>" + removeTags(allFAPsalaires[5]).replace('\xa0','').replace(' ','').replace('€','') + "</td></tr>"
+        allsalaires += "</table>"
+
+    alltypedifficultes = soup.select('.tabs-main-content_persp-col2-bar.ng-star-inserted')
+    alldifficulte = soup.select('p.horizontal-graph_title')
+    allpcdifficulte = soup.select('div.horizontal-graph_data')
+    alldifficultes = "<table><tr><td>Indicateur</td><td>Valeur</td></tr>"
+    for i in range(0,len(alltypedifficultes)):
+        alldifficultes += "<tr><td>" + removeTags(alldifficulte[i]) + "</td><td>" + removeTags(allpcdifficulte[i]).replace('Pour le territoire principal FRANCE pour les ' + removeTags(alldifficulte[i]),'').replace('%','') + "</td></tr>"
+    alldifficultes += "</table>"
+
+    alltyperepartitions = soup.select('div.hiring-contract_legende_item.ng-star-inserted')
+    allrepartition = soup.select('p.hiring-contract_legende_item_label')
+    allpcrepartition = soup.select('span.hiring-contract_legende_item-first')
+    allrepartitions = "<table><tr><td>Indicateur</td><td>Valeur</td></tr>"
+    for i in range(0,len(alltyperepartitions)):
+        allrepartitions += "<tr><td>" + removeTags(allrepartition[i]).replace('(' + removeTags(allpcrepartition[i]) + ')','') + "</td><td>" + removeTags(allpcrepartition[i]).replace('%','').replace(',','.') + "</td></tr>"
+    allrepartitions += "</table>"
+
+    allentrepriserepartitions = soup.select('div.horizontal-graph_pattern.sm-bubble_wrapper > span')
+    allentreprise = soup.select('span.sr-only')
+    allpcentreprise = soup.select('span.data.ng-star-inserted')
+    allentreprises = "<table><tr><td>Indicateur</td><td>Valeur</td></tr>"
+    for i in range(0,len(allentrepriserepartitions)):
+        allentreprises += "<tr><td>" + removeTags(allentrepriserepartitions[i])[0:-4] + "</td><td>" + removeTags(allentrepriserepartitions[i])[-4:].replace('%','').replace(',','.') + "</td></tr>"
+    allentreprises += "</table>"
+
+    return [alldemandeurs, allsalaires, alldifficultes, allrepartitions, allentreprises]
+
 def localisation():
     ListCentroids = [
         { "ID": "01", "Longitude": 5.3245259, "Latitude":46.0666003 },
@@ -156,6 +408,35 @@ def localisation():
     
     return ListCentroids
 
+def vectorDatabase_connexion():
+    pc = Pinecone(api_key=os.environ['PINECONE_API_KEY'])
+    index_name = "all-skills"
+    index = pc.Index(index_name)
+    return index
+
+def searchByRome(codeRome):
+    index = vectorDatabase_connexion()
+    allRome = []
+    if codeRome:
+        all_docs = index.query(
+            top_k=1500,
+            vector= [0] * 768, # embedding dimension
+            namespace='',
+            filter={"categorie": {"$eq": "rome"},"rome": {"$eq": codeRome}},
+            include_metadata=True
+        )
+    else:
+        all_docs = index.query(
+            top_k=1500,
+            vector= [0] * 768, # embedding dimension
+            namespace='',
+            filter={"categorie": {"$eq": "rome"}},
+            include_metadata=True
+        )
+    for refRome in all_docs['matches']:
+        allRome.append({"value": refRome['metadata']['rome'], "label": refRome['metadata']['rome'] + " - " + refRome['metadata']['libelle_rome']})
+    return sorted(allRome, key=lambda element:element["value"])
+
 def connexion_France_Travail():
     client = Api(client_id=os.getenv('POLE_EMPLOI_CLIENT_ID'),
                 client_secret=os.getenv('POLE_EMPLOI_CLIENT_SECRET'))
@@ -199,6 +480,11 @@ theme_toggle = dmc.Tooltip(
     arrowSize=6,
 )
 
+styleRefresh = {
+    "color": "lightgrey",
+    "textDecoration" : "none"
+}
+
 styleTitle = {
     "textAlign": "center"
 }
@@ -224,20 +510,23 @@ styleToggle = {
     "marginTop":"25px",
     "textAlign": "right",
 }
+styleIcon = {
+    "marginTop":"10px",
+}
 styleSubmitBox = {
     "position":"fixed",
     "width": "100%",
     "top": "calc(100vh - 100px)",
     "right": "0"
 }
-datadefault = [
-    {"value": "K2105", "label": "K2105"},
-    {"value": "L1101", "label": "L1101"},
-    {"value": "L1202", "label": "L1202"},
-    {"value": "L1507", "label": "L1507"},
-    {"value": "L1508", "label": "L1508"},
-    {"value": "L1509", "label": "L1509"},
-]
+#datadefault = [
+#    {"value": "K2105", "label": "K2105"},
+#    {"value": "L1101", "label": "L1101"},
+#    {"value": "L1202", "label": "L1202"},
+#    {"value": "L1507", "label": "L1507"},
+#    {"value": "L1508", "label": "L1508"},
+#    {"value": "L1509", "label": "L1509"},
+#]
 
 def custom_error_handler(err):
 # This function defines what we want to happen when an exception occurs
@@ -327,7 +616,7 @@ class CustomDash(Dash):
                 {config}
                 {scripts}
                 {renderer}
-                <div id="custom-footer">My custom footer</div>
+                <div id="custom-footer"></div>
             </body>
         </html>
         '''.format(
@@ -353,7 +642,7 @@ app.layout = dmc.MantineProvider(
                                         placeholder="Selectionnez vos Codes ROME",
                                         id="framework-multi-select",
                                         value=['K2105', 'L1101', 'L1202', 'L1507', 'L1508', 'L1509'],
-                                        data=datadefault,
+                                        data=searchByRome(''),
                                         w=600,
                                         mt=10,
                                         styles={
@@ -384,48 +673,100 @@ app.layout = dmc.MantineProvider(
                                 dmc.GridCol(html.Div(dmc.Title(f"Le marché et les statistiques de l'emploi", order=1, size="30", my="20", id="chainlit-call-fn", style=styleTitle)), span=5),
                                 dmc.GridCol(html.Div(theme_toggle, style=styleToggle), span=1),
                                 dmc.GridCol(html.Div(dmc.Tooltip(dmc.Button(leftSection=DashIconify(icon="tabler:sparkles", width=30), id="drawer-demo-button"), label="IA générative sur les données",position="left",withArrow=True,arrowSize=6,), style=styleToggle), span=1),
-                                dmc.GridCol(html.Div(
-                                    dcc.Loading(
-                                        id="loadingRepartition",
-                                        children=(dcc.Graph(id="figRepartition",selectedData={'points': [{'hovertext': ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','2A','2B','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','971','972','973','974']}]})),
-                                        type="default",
-                                    )
-                                ), span=6),
-                                dmc.GridCol(html.Div(
-                                    dcc.Loading(
-                                        id="loadingEmplois",
-                                        children=(dcc.Graph(id="figEmplois")),
-                                        type="default",
-                                        )
-                                ), span=6),
-                                dmc.GridCol(html.Div(
-                                    dcc.Loading(
-                                        id="loadingContrats",
-                                        children=(dcc.Graph(id="figContrats")),
-                                        type="default",
-                                    )
-                                ), span=6),
-                                dmc.GridCol(html.Div(
-                                    dcc.Loading(
-                                        id="loadingExperiences",
-                                        children=(dcc.Graph(id="figExperiences")),
-                                        type="default",
-                                    )
-                                ), span=6),
-                                dmc.GridCol(html.Div(
-                                    dcc.Loading(
-                                        id="loadingCompetences",
-                                        children=(dcc.Graph(id="figCompetences")),
-                                        type="default",
-                                    )
-                                ), span=6),
-                                dmc.GridCol(html.Div(
-                                    dcc.Loading(
-                                        id="loadingTransversales",
-                                        children=(dcc.Graph(id="figTransversales")),
-                                        type="default",
-                                    )
-                                ), span=6),
+                                dmc.GridCol(html.A(DashIconify(icon="tabler:restore", width=20), href='/', style=styleRefresh), p=0,style=styleUSERIA, span=12),
+                                dmc.GridCol(dmc.Tabs(
+                                    [
+                                        dmc.TabsList(mx="auto",grow=True,
+                                            children=[
+                                                dmc.TabsTab("Marché de l'emploi", leftSection=DashIconify(icon="tabler:graph"), value="1"),
+                                                dmc.TabsTab("Statistiques de l'emploi", leftSection=DashIconify(icon="tabler:chart-pie"), value="2"),
+                                                dmc.TabsTab("Savoir-faire, Savoirs et Contexte des métiers", leftSection=DashIconify(icon="tabler:ikosaedr"), value="3"),
+                                            ]
+                                        ),
+                                        dmc.TabsPanel(
+                                            dmc.Grid(
+                                                children=[
+                                                    dmc.GridCol(html.Div(
+                                                        dcc.Loading(
+                                                            id="loadingRepartition",
+                                                            children=(dcc.Graph(id="figRepartition",selectedData={'points': [{'hovertext': ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','2A','2B','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','971','972','973','974']}]})),
+                                                            type="default",
+                                                        )
+                                                    ), span=6),
+                                                    dmc.GridCol(html.Div(
+                                                        dcc.Loading(
+                                                            id="loadingEmplois",
+                                                            children=(dcc.Graph(id="figEmplois")),
+                                                            type="default",
+                                                        )
+                                                    ), span=6),
+                                                    dmc.GridCol(html.Div(
+                                                        dcc.Loading(
+                                                            id="loadingContrats",
+                                                            children=(dcc.Graph(id="figContrats")),
+                                                            type="default",
+                                                        )
+                                                    ), span=6),
+                                                    dmc.GridCol(html.Div(
+                                                        dcc.Loading(
+                                                            id="loadingExperiences",
+                                                            children=(dcc.Graph(id="figExperiences")),
+                                                            type="default",
+                                                        )
+                                                    ), span=6),
+                                                    dmc.GridCol(html.Div(
+                                                        dcc.Loading(
+                                                            id="loadingCompetences",
+                                                            children=(dcc.Graph(id="figCompetences")),
+                                                            type="default",
+                                                        )
+                                                    ), span=6),
+                                                    dmc.GridCol(html.Div(
+                                                        dcc.Loading(
+                                                            id="loadingTransversales",
+                                                            children=(dcc.Graph(id="figTransversales")),
+                                                            type="default",
+                                                        )
+                                                    ), span=6),
+                                                    dmc.GridCol(html.Div(
+                                                        dcc.Loading(
+                                                            id="loadingNiveau",
+                                                            children=(dcc.Graph(id="figNiveau")),
+                                                            type="default",
+                                                        )
+                                                    ), span=6),
+                                                    dmc.GridCol(html.Div(
+                                                        dcc.Loading(
+                                                            id="loadingSecteur",
+                                                            children=(dcc.Graph(id="figSecteur")),
+                                                            type="default",
+                                                        )
+                                                    ), span=6),
+                                                    dmc.GridCol(html.Div(
+                                                        dcc.Loading(
+                                                            id="loadingTableau",
+                                                            children=(dbc.Container(id="tableauEmplois")),
+                                                            type="default",
+                                                        )
+                                                    ), span=12),
+                                                ]
+                                            )
+                                        , value="1"),
+                                        dmc.TabsPanel(
+                                            children=[
+                                                dmc.Button("Afficher les statistiques des métiers", mt=10, ml="auto", id="loading-button", leftSection=DashIconify(icon="tabler:chart-pie")),
+                                                html.Div(id="clicked-output"),
+                                                html.Div(id="clicked-output-tabs"),
+                                            ], value="2"),
+                                        dmc.TabsPanel(
+                                            children=[
+                                                dmc.Button("Afficher les savoirs des métiers", mt=10, ml="auto", id="loading-skills", leftSection=DashIconify(icon="tabler:ikosaedr")),
+                                                html.Div(id="clicked-output-skills"),
+                                                html.Div(id="clicked-output-skills-tabs"),
+                                            ], value="3"),
+                                    ],
+                                    value="1",
+                                ), span=12),
                             ],
                             gutter="xs",
                         )
@@ -435,7 +776,7 @@ app.layout = dmc.MantineProvider(
         )
     ],
     id="mantine-provider",
-    forceColorScheme="dark",
+    forceColorScheme="light",
     theme={
         "primaryColor": "indigo",
          "fontFamily": "'Inter', sans-serif",
@@ -494,6 +835,8 @@ def drawer_demo(n_clicks):
     Output(component_id='figRepartition', component_property='figure'),
     Output(component_id='figCompetences', component_property='figure'),
     Output(component_id='figTransversales', component_property='figure'),
+    Output(component_id='figNiveau', component_property='figure'),
+    Output(component_id='figSecteur', component_property='figure'),
     Input(component_id='framework-multi-select', component_property='value'),
     Input('figEmplois', 'selectedData'),
     Input("mantine-provider", "forceColorScheme"),
@@ -509,7 +852,9 @@ def create_repartition(array_value, selectedData, theme):
         plot_bgcolor = 'rgba(255, 255, 255, 1)'
     
     df_FT = API_France_Travail(array_value)
-    df = df_FT[['intitule','typeContratLibelle','experienceLibelle','lieuTravail']].copy()
+    
+    ######## localisation ########
+    df = df_FT[['intitule','typeContratLibelle','experienceLibelle','lieuTravail','secteurActiviteLibelle']].copy()
     df["lieuTravail"] = df["lieuTravail"].apply(lambda x: x['libelle']).apply(lambda x: x[0:3]).apply(lambda x: x.strip())
     df.drop(df[df['lieuTravail'] == 'Fra'].index, inplace = True)
     df.drop(df[df['lieuTravail'] == 'FRA'].index, inplace = True)
@@ -529,7 +874,6 @@ def create_repartition(array_value, selectedData, theme):
         options = df['intitule'].values.tolist()
     df = df[df['intitule'].isin(options)]
     
-    
     ######## localisation ########
     ListCentroids = localisation()
     df_localisation = df.groupby('lieuTravail').size().reset_index(name='obs')
@@ -541,7 +885,6 @@ def create_repartition(array_value, selectedData, theme):
     df_localisation["latitude"] = df_localisation['latitude'].apply(lambda x:[loc['Latitude'] for loc in ListCentroids if loc['ID'] == x]).apply(lambda x:''.join(map(str, x)))
     df_localisation["latitude"] = pd.to_numeric(df_localisation["latitude"], downcast="float")
     
-    
     res = requests.get(
             "https://raw.githubusercontent.com/codeforgermany/click_that_hood/main/public/data/france-regions.geojson"
         )
@@ -560,18 +903,18 @@ def create_repartition(array_value, selectedData, theme):
             ],
         },font=dict(size=10),paper_bgcolor=paper_bgcolor,autosize=True,clickmode='event+select'
     )
-    
+        
+    ######## Compétences professionnelles ########
     df_FT.dropna(subset=['qualitesProfessionnelles','formations','competences'], inplace=True)
     df_FT["competences"] = df_FT["competences"].apply(lambda x:[str(e['libelle']) for e in x]).apply(lambda x:'; '.join(map(str, x)))
     df_FT["qualitesProfessionnelles"] = df_FT["qualitesProfessionnelles"].apply(lambda x:[str(e['libelle']) + ": " + str(e['description']) for e in x]).apply(lambda x:'; '.join(map(str, x)))
     
-    ######## Compétences professionnelles ########
     df_comp = df_FT
     df_comp['competences'] = df_FT['competences'].str.split(';')
     df_comp = df_comp.explode('competences')
     df_comp = df_comp.groupby('competences').size().reset_index(name='obs')
     df_comp = df_comp.sort_values(by=['obs'])
-    df_comp = df_comp.iloc[-20:]
+    df_comp = df_comp.iloc[-25:]
     fig_competences = px.bar(df_comp, x='obs', y='competences', orientation='h', color='obs', height=600, template=template, title="Les principales compétences professionnelles", labels={'obs':'nombre'}, color_continuous_scale="Teal", text_auto=True).update_layout(font=dict(size=10),paper_bgcolor=paper_bgcolor,plot_bgcolor=plot_bgcolor,clickmode='event+select',autosize=True).update_traces(hovertemplate=df_comp["competences"] + ' <br>Nombre : %{x}', y=[y[:100] + "..." for y in df_comp['competences']], showlegend=False)
         
     ######## Compétences transversales ########
@@ -580,10 +923,23 @@ def create_repartition(array_value, selectedData, theme):
     df_comptransversales = df_transversales.explode('qualitesProfessionnelles')
     df_comptransversales = df_comptransversales.groupby('qualitesProfessionnelles').size().reset_index(name='obs')
     df_comptransversales = df_comptransversales.sort_values(by=['obs'])
-    df_comptransversales = df_comptransversales.iloc[-20:]
+    df_comptransversales = df_comptransversales.iloc[-25:]
     fig_transversales = px.bar(df_comptransversales, x='obs', y='qualitesProfessionnelles', orientation='h', color='obs', height=600, template=template, title="Les principales compétences transversales", labels={'obs':'nombre'}, color_continuous_scale="Teal", text_auto=True).update_layout(font=dict(size=10),paper_bgcolor=paper_bgcolor,plot_bgcolor=plot_bgcolor,autosize=True).update_traces(hovertemplate=df_comptransversales["qualitesProfessionnelles"] + ' <br>Nombre : %{x}', y=[y[:80] + "..." for y in df_comptransversales["qualitesProfessionnelles"]], showlegend=False)
         
-    return fig_localisation, fig_competences, fig_transversales
+    ######## Niveaux de qualification ########
+    df_niveau = df_FT
+    df_niveau["formations"] = df_niveau["formations"].apply(lambda x:[str(e['niveauLibelle']) for e in x]).apply(lambda x:'; '.join(map(str, x)))
+    df_niveau = df_niveau.groupby('formations').size().reset_index(name='obs')
+    fig_niveau = px.pie(df_niveau, names='formations', height=600, values='obs', color='obs', template=template, title="Les niveaux de qualification", labels={'obs':'nombre'}, color_discrete_sequence=px.colors.qualitative.Safe).update_traces(textposition='inside', textinfo='percent+label').update_layout(font=dict(size=10),paper_bgcolor=paper_bgcolor)
+    
+    ######## Secteurs ########
+    df_secteur = df.groupby('secteurActiviteLibelle').size().reset_index(name='obs')
+    df_secteur = df_secteur.sort_values(by=['obs'])
+    df_secteur = df_secteur.iloc[-25:]
+    fig_secteur = px.bar(df_secteur, x='obs', y='secteurActiviteLibelle', height=600, orientation='h', color='obs', template=template, title="Les principaux secteurs d'activités", labels={'obs':'nombre'}, color_continuous_scale="Teal", text_auto=True).update_layout(font=dict(size=10),paper_bgcolor=paper_bgcolor,plot_bgcolor=plot_bgcolor,autosize=True).update_traces(hovertemplate=df_secteur["secteurActiviteLibelle"] + ' <br>Nombre : %{x}', y=[y[:80] + "..." for y in df_secteur["secteurActiviteLibelle"]], showlegend=False)
+
+        
+    return fig_localisation, fig_competences, fig_transversales, fig_niveau, fig_secteur
 
 def create_emploi(df, theme):
     if theme == "dark":
@@ -629,6 +985,76 @@ def create_experience(df, theme):
     
     return fig_experience
 
+def create_tableau(df, theme):
+    if theme == "dark":
+        style_header = {
+            'fontFamily': "'Inter', sans-serif",
+            'fontSize': '10px',
+            'backgroundColor': 'rgb(30, 30, 30)',
+            'color': 'white'
+        }
+        style_data={
+            'fontFamily': "'Inter', sans-serif",
+            'fontSize': '10px',
+            'backgroundColor': 'rgb(50, 50, 50)',
+            'color': 'white'
+        }
+        style_tooltip='background-color: lightgrey; font-family: "Inter", sans-serif; font-size:10px; color: white'
+    else:
+        style_header = {
+            'fontFamily': "'Inter', sans-serif",
+            'fontSize': '10px',
+            'backgroundColor': 'transparent',
+            'color': 'black'
+        }
+        style_data={
+            'fontFamily': "'Inter', sans-serif",
+            'fontSize': '10px',
+            'backgroundColor': 'transparent',
+            'color': 'black'
+        }
+        style_tooltip='background-color: lightgrey; font-family: "Inter", sans-serif; font-size:10px; color: black'
+
+    ######## Tableau des emplois ########
+    #df = df.fillna('N/A').replace('', 'N/A')
+    df_tableau = df[['origineOffre','intitule','typeContratLibelle','experienceLibelle','description','lieuTravail']].copy()
+    dictHeader = {'origineOffre': 'Lien','intitule': 'Offre','typeContratLibelle': 'Type de contrat','experienceLibelle':'Expérience','description':'Détail','lieuTravail':'Département'}
+    df_tableau.rename(columns=dictHeader,inplace=True)
+    tableau_Emplois = dash_table.DataTable(
+        data=df_tableau.to_dict('records'),
+        sort_action='native',
+        columns=[{'id': c, 'name': c, 'presentation': 'markdown'} if c == 'Lien' else {'id': c, 'name': c} for c in df_tableau.columns],
+        filter_action="native",
+        filter_options={"placeholder_text": "Filtrer les valeurs de la colonne..."},
+        page_action='native',
+        page_current= 0,
+        page_size= 10,
+        style_header=style_header,
+        style_data=style_data,
+        style_table={'overflowX': 'auto'},
+        style_cell={
+            'overflow': 'hidden',
+            'textOverflow': 'ellipsis',
+            'maxWidth': 0,
+        },
+        tooltip_data=[
+            {
+                column: {'value': str(value), 'type': 'markdown'}
+                for column, value in row.items()
+            } for row in df_tableau.to_dict('records')
+        ],
+        css=[{
+            'selector': '.dash-table-tooltip',
+            'rule': style_tooltip
+        },{
+            'selector': '.dash-table-tooltip > p',
+            'rule': style_tooltip
+        }],
+        tooltip_delay=0,
+        tooltip_duration=None
+    )
+    return tableau_Emplois
+
 @callback(
     Output(component_id='figEmplois', component_property='figure'),
     Input('figRepartition', 'selectedData'),
@@ -718,6 +1144,171 @@ def update_experience(selectedData, array_value, theme):
     
     return create_experience(df, theme)
 
+@callback(
+    Output(component_id='tableauEmplois', component_property='children'),
+    Input('figRepartition', 'selectedData'),
+    Input(component_id='framework-multi-select', component_property='value'),
+    Input("mantine-provider", "forceColorScheme"),
+)
+
+def update_tableau(selectedData, array_value, theme):
+    options = []
+    if selectedData != None:
+        if type(selectedData['points'][0]['hovertext']) == str:
+            options.append(selectedData['points'][0]['hovertext'])
+        else:
+            options = selectedData['points'][0]['hovertext']
+    else:
+        options = ['01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','2A','2B','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','971','972','973','974']
+    
+    df_FT = API_France_Travail(array_value)
+    df_FT["origineOffre"] = df_FT["origineOffre"].apply(lambda x: "[Voir l'offre sur le site web de France Travail](" + x['urlOrigine'] + ")")
+    df_FT["lieuTravail"] = df_FT["lieuTravail"].apply(lambda x: x['libelle']).apply(lambda x: x[0:3]).apply(lambda x: x.strip())
+    df_FT.drop(df_FT[df_FT['lieuTravail'] == 'Fra'].index, inplace = True)
+    df_FT.drop(df_FT[df_FT['lieuTravail'] == 'FRA'].index, inplace = True)
+    df_FT.drop(df_FT[df_FT['lieuTravail'] == 'Ile'].index, inplace = True)
+    df_FT.drop(df_FT[df_FT['lieuTravail'] == 'Mar'].index, inplace = True)
+    df_FT.drop(df_FT[df_FT['lieuTravail'] == 'Bou'].index, inplace = True)
+    df_FT.drop(df_FT[df_FT['lieuTravail'] == '976'].index, inplace = True)
+    df_FT = df_FT[df_FT['lieuTravail'].isin(options)]
+    
+    return create_tableau(df_FT, theme)
+
+clientside_callback(
+    """
+    function updateLoadingState(n_clicks) {
+        return true
+    }
+    """,
+    Output("loading-button", "loading", allow_duplicate=True),
+    Input("loading-button", "n_clicks"),
+    prevent_initial_call=True,
+)
+
+@callback(
+    Output("clicked-output", "children"),
+    Output("clicked-output-tabs", "children"),
+    Output("loading-button", "loading"),
+    Input("loading-button", "n_clicks"),
+    Input(component_id='framework-multi-select', component_property='value'),
+    Input("mantine-provider", "forceColorScheme"),
+    prevent_initial_call=True,
+)
+def load_from_stats(n_clicks, array_value, theme):
+    if theme == "dark":
+        template = "plotly_dark"
+        paper_bgcolor = 'rgba(36, 36, 36, 1)'
+        plot_bgcolor = 'rgba(36, 36, 36, 1)'
+        style_header = {
+            'fontFamily': "'Inter', sans-serif",
+            'fontSize': '10px',
+            'backgroundColor': 'rgb(30, 30, 30)',
+            'color': 'white'
+        }
+        style_data={
+            'fontFamily': "'Inter', sans-serif",
+            'fontSize': '10px',
+            'backgroundColor': 'rgb(50, 50, 50)',
+            'color': 'white'
+        }
+    else:
+        template = "ggplot2"
+        paper_bgcolor = 'rgba(255, 255, 255, 1)'
+        plot_bgcolor = 'rgba(255, 255, 255, 1)'
+        style_header = {
+            'fontFamily': "'Inter', sans-serif",
+            'fontSize': '10px',
+            'backgroundColor': 'transparent',
+            'color': 'black'
+        }
+        style_data={
+            'fontFamily': "'Inter', sans-serif",
+            'fontSize': '10px',
+            'backgroundColor': 'transparent',
+            'color': 'black'
+        }
+    children = []
+    children_tabs = []
+    for j in range(0, len(array_value)):
+        table = datavisualisation_chiffres_cles_emplois("https://dataemploi.pole-emploi.fr/metier/chiffres-cles/NAT/FR/" + array_value[j])
+        array_label_rome = searchByRome(array_value[j])
+        df_demandeur = htmlToDataframe(table[0])
+        df_demandeur = df_demandeur.sort_values(by=['Indicateur'])
+        fig_demandeur = px.histogram(df_demandeur, x='Indicateur', y='Valeur', height=800, template=template, title="Demandeurs d'emploi et offres d'emploi du code ROME : " +  array_label_rome[0]['label'], color='Indicateur', labels={'Valeur':'Nombre'}, text_auto=True).update_layout(font=dict(size=9),paper_bgcolor=paper_bgcolor,plot_bgcolor=plot_bgcolor,autosize=True)
+        children.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=(dcc.Graph(figure=fig_demandeur)),type="default")), span=6),)
+        children_tabs.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=[dbc.Label("Demandeurs d'emploi et offres d'emploi du code ROME : " + array_label_rome[0]['label']),dash_table.DataTable(data=df_demandeur.to_dict('records'),sort_action='native', columns=[{'id': c, 'name': c} for c in df_demandeur.columns],page_action='native', page_current= 0,page_size= 10,style_header=style_header,style_data=style_data,style_table={'overflowX': 'auto'},style_cell={'overflow': 'hidden','textOverflow': 'ellipsis','maxWidth': 0,})],type="default")), span=12),)
+        if len(table[1]) > 0:
+            df_salaire = htmlToDataframe(table[1])
+            df_salaire = df_salaire.sort_values(by=['salaire'])
+            fig_salaire = px.histogram(df_salaire, x='emploi', y='salaire', height=600, template=template, barmode='group', title="Salaires médians du code ROME : " + array_label_rome[0]['label'], color='categorie', text_auto=True).update_layout(font=dict(size=9),paper_bgcolor=paper_bgcolor,plot_bgcolor=plot_bgcolor,autosize=True)
+            children.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=(dcc.Graph(figure=fig_salaire)),type="default")), span=6),)
+            children_tabs.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=[dbc.Label("Salaires médians du code ROME : " + array_label_rome[0]['label']),dash_table.DataTable(data=df_salaire.to_dict('records'),sort_action='native', columns=[{'id': c, 'name': c} for c in df_salaire.columns],page_action='native', page_current= 0,page_size= 10,style_header=style_header,style_data=style_data,style_table={'overflowX': 'auto'},style_cell={'overflow': 'hidden','textOverflow': 'ellipsis','maxWidth': 0,})],type="default")), span=12),)
+        df_difficulte = htmlToDataframe(table[2])
+        if len(df_difficulte) == 0:
+            title = "Aucune donnée difficulté de recrutement renseignée!"
+        else:
+            title = "Difficulté de recrutement du code ROME : " + array_label_rome[0]['label']
+        df_difficulte = df_difficulte.sort_values(by=['Valeur'])
+        fig_difficulte = px.histogram(df_difficulte, x='Indicateur', y='Valeur', height=600, template=template, title=title, color='Indicateur', labels={'Valeur':'Pourcentage'}, text_auto=True).update_layout(font=dict(size=9),paper_bgcolor=paper_bgcolor,plot_bgcolor=plot_bgcolor,autosize=True)
+        children.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=(dcc.Graph(figure=fig_difficulte)),type="default")), span=6))
+        children_tabs.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=[dbc.Label(title),dash_table.DataTable(data=df_difficulte.to_dict('records'),sort_action='native', columns=[{'id': c, 'name': c} for c in df_difficulte.columns],page_action='native', page_current= 0,page_size= 10,style_header=style_header,style_data=style_data,style_table={'overflowX': 'auto'},style_cell={'overflow': 'hidden','textOverflow': 'ellipsis','maxWidth': 0,})],type="default")), span=12),)
+        df_repartitionContrat = htmlToDataframe(table[3])
+        df_repartitionContrat = df_repartitionContrat.sort_values(by=['Valeur'])
+        fig_repartitionContrat = px.pie(df_repartitionContrat, names='Indicateur', values='Valeur', color='Indicateur', template=template, title="Répartition des embauches du métier : type de contrat du code ROME : " + array_label_rome[0]['label'], labels={'Valeur':'pourcentage'}, color_discrete_sequence=px.colors.qualitative.Safe).update_traces(textposition='inside', textinfo='percent+label').update_layout(font=dict(size=10),paper_bgcolor=paper_bgcolor)
+        children.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=(dcc.Graph(figure=fig_repartitionContrat)),type="default")), span=6))
+        children_tabs.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=[dbc.Label("Répartition des embauches du métier : type de contrat du code ROME : " + array_label_rome[0]['label']),dash_table.DataTable(data=df_repartitionContrat.to_dict('records'),sort_action='native', columns=[{'id': c, 'name': c} for c in df_repartitionContrat.columns],page_action='native', page_current= 0,page_size= 10,style_header=style_header,style_data=style_data,style_table={'overflowX': 'auto'},style_cell={'overflow': 'hidden','textOverflow': 'ellipsis','maxWidth': 0,})],type="default")), span=12),)
+        df_repartitionEntreprise = htmlToDataframe(table[4])
+        df_repartitionEntreprise = df_repartitionEntreprise.sort_values(by=['Valeur'])
+        fig_repartitionEntreprise = px.pie(df_repartitionEntreprise, names='Indicateur', values='Valeur', color='Indicateur', template=template, title="Répartition des embauches du métier : type entreprise du code ROME : " + array_label_rome[0]['label'], labels={'Valeur':'pourcentage'}, color_discrete_sequence=px.colors.qualitative.Safe).update_traces(textposition='inside', textinfo='percent+label').update_layout(font=dict(size=10),paper_bgcolor=paper_bgcolor)
+        children.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=(dcc.Graph(figure=fig_repartitionEntreprise)),type="default")), span=6))
+        children_tabs.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=[dbc.Label("Répartition des embauches du métier : type entreprise du code ROME : " + array_label_rome[0]['label']),dash_table.DataTable(data=df_repartitionEntreprise.to_dict('records'),sort_action='native', columns=[{'id': c, 'name': c} for c in df_repartitionEntreprise.columns],page_action='native', page_current= 0,page_size= 10,style_header=style_header,style_data=style_data,style_table={'overflowX': 'auto'},style_cell={'overflow': 'hidden','textOverflow': 'ellipsis','maxWidth': 0,})],type="default")), span=12),)
+    return dmc.Grid(children=children), dmc.Grid(children=children_tabs), False
+
+clientside_callback(
+    """
+    function updateLoadingState(n_clicks) {
+        return true
+    }
+    """,
+    Output("loading-skills", "loading", allow_duplicate=True),
+    Input("loading-skills", "n_clicks"),
+    prevent_initial_call=True,
+)
+
+@callback(
+    Output("clicked-output-skills", "children"),
+    Output("loading-skills", "loading"),
+    Input("loading-skills", "n_clicks"),
+    Input(component_id='framework-multi-select', component_property='value'),
+    Input("mantine-provider", "forceColorScheme"),
+    prevent_initial_call=True,
+)
+
+def load_from_skills(n_clicks, array_value, theme):
+    if theme == "dark":
+        template = "plotly_dark"
+        paper_bgcolor = 'rgba(36, 36, 36, 1)'
+        plot_bgcolor = 'rgba(36, 36, 36, 1)'
+    else:
+        template = "ggplot2"
+        paper_bgcolor = 'rgba(255, 255, 255, 1)'
+        plot_bgcolor = 'rgba(255, 255, 255, 1)'
+    children = []
+    for j in range(0, len(array_value)):
+        ficheSF = getSavoirFaireFromHTMLMetier("https://candidat.francetravail.fr/metierscope/fiche-metier/" + array_value[j])
+        fig_SF = datavisualisation_skills_context(htmlToDataframe(ficheSF), template, paper_bgcolor, plot_bgcolor, "Savoir-faire", array_value[j])
+        ficheSavoir = getSavoirFromHTMLMetier("https://candidat.francetravail.fr/metierscope/fiche-metier/" + array_value[j])
+        fig_Savoir = datavisualisation_skills_context(htmlToDataframe(ficheSavoir), template, paper_bgcolor, plot_bgcolor, "Savoirs", array_value[j])
+        ficheContext = getContextFromHTMLMetier("https://candidat.francetravail.fr/metierscope/fiche-metier/" + array_value[j])
+        fig_Context = datavisualisation_skills_context(htmlToDataframe(ficheContext), template, paper_bgcolor, plot_bgcolor, "Contexte", array_value[j])
+        
+        children.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=(dcc.Graph(figure=fig_SF)), type="default"), style=styleTitle), span=12),)
+        children.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=(dcc.Graph(figure=fig_Savoir)), type="default"), style=styleTitle), span=12),)
+        children.append(dmc.GridCol(html.Div(dcc.Loading(id="loadingPlot",children=(dcc.Graph(figure=fig_Context)), type="default"), style=styleTitle), span=12),)
+    
+    return dmc.Grid(children=children), False
+        
+
 ########### IA Chatbot ###########
 @app.callback(
     Output("display-conversation", "children"), [Input("store-conversation", "data")]
@@ -755,7 +1346,7 @@ def run_chatbot(n_clicks, n_submit, user_input, chat_history, array_value):
     list_FT = df_FT_Select.values.tolist()
     context = ''
     for i in range(0,len(list_FT)):
-        context += "\n✔️ Emploi : " + str(list_FT[i][0]) + ";\n◉ Contrat : " + str(list_FT[i][1]) + ";\n◉ Compétences professionnelles : " + str(list_FT[i][3]) + ";\n" + "◉ Salaire : " + str(list_FT[i][6]) + ";\n◉ Qualification : " + str(list_FT[i][5]).replace("'libelle'","\n• 'libelle") + ";\n◉ Localisation : " + str(list_FT[i][7]) + ";\n◉ Expérience : " + str(list_FT[i][2]) + ";\n◉ Niveau de qualification : " + str(list_FT[i][8]) + ";\n◉ Description de l'emploi : " + str(list_FT[i][4]) + "\n"
+        context += "\n✔️ Emploi : " + str(list_FT[i][0]) + ";\n◉ Contrat : " + str(list_FT[i][1]) + ";\n◉ Compétences professionnelles : " + str(list_FT[i][3]).replace("{","").replace("}","").replace("[","").replace("]","").replace("code","").replace("libelle","") + ";\n" + "◉ Salaire : " + str(list_FT[i][6]).replace("{","").replace("}","").replace("[","").replace("]","") + ";\n◉ Qualification : " + str(list_FT[i][5]).replace("'libelle'","\n• 'libelle").replace("{","").replace("}","").replace("[","").replace("]","").replace("code","") + ";\n◉ Localisation : " + str(list_FT[i][7]).replace("{","").replace("}","").replace("[","").replace("]","") + ";\n◉ Expérience : " + str(list_FT[i][2]) + ";\n◉ Niveau de qualification : " + str(list_FT[i][8]).replace("{","").replace("}","").replace("[","").replace("]","") + ";\n◉ Description de l'emploi : " + str(list_FT[i][4]) + "\n"
         #context = df_FT.to_string(index=False)
     template = """<s>[INST] Vous êtes un ingénieur pédagogique de l'enseignement supérieur et vous êtes doué pour faire des analyses des formations de l'enseignement supérieur et de faire le rapprochement entre les compétences académiques et les compétences professionnelles attendues par le marché de l'emploi et les les recruteurs, en fonction des critères définis ci-avant. En fonction des informations suivantes et du contexte suivant seulement et strictement, répondez en langue française strictement à la question ci-dessous, en 5000 mots au moins. Lorsque cela est possible, cite les sources du contexte. Si vous ne pouvez pas répondre à la question sur la base des informations, dites que vous ne trouvez pas de réponse ou que vous ne parvenez pas à trouver de réponse. Essayez donc de comprendre en profondeur le contexte et répondez uniquement en vous basant sur les informations fournies. Ne générez pas de réponses non pertinentes.
     Répondez à la question ci-dessous à partir du contexte ci-dessous :
@@ -788,11 +1379,11 @@ def run_chatbot(n_clicks, n_submit, user_input, chat_history, array_value):
     #repo_id = "microsoft/Phi-3.5-mini-instruct"
     #mistral_url = "https://api-inference.huggingface.co/models/mistralai/Mixtral-8x22B-Instruct-v0.1"
     llm = HuggingFaceEndpoint(
-        repo_id=repo_id, task="text2text-generation", max_new_tokens=8000, temperature=0.001, streaming=True
+        repo_id=repo_id, task="text2text-generation", max_new_tokens=8000, temperature=0.3, streaming=True
     )
     model_output = ""
     chain = prompt | llm
-    for s in chain.stream({"question":user_input,"context":context_p}):
+    for s in chain.stream({"question":"D'après le contexte, " + user_input,"context":context_p}):
         model_output = model_output + s
         print(s, end="", flush=True)
     
@@ -809,6 +1400,6 @@ def run_chatbot(n_clicks, n_submit, user_input, chat_history, array_value):
     chat_history += f"{model_output}<split>"
         
     return chat_history, None
-
+    
 if __name__ == '__main__':
     app.run_server(debug=True)