Update interface.js

interface.js

@@ -73,13 +73,14 @@ const currentScriptTag = document.currentScript;
   widgetContainer.setAttribute('data-original-aspect', aspectPercent);
 
   // TOOLTIP BUTTON HTML IF NEEDED
-  const tooltipsButtonHTML = config.tooltips_url
+    const tooltipsButtonHTML = config.tooltips_url
     ? `<button id="tooltips-toggle-${instanceId}" class="widget-button tooltips-toggle" title="Tooltips" aria-label="Afficher/Masquer les tooltips">⦿</button>`
     : '';
 
   // COLOR BUTTON: will open the color panel
   const colorButtonId = `color-btn-${instanceId}`;
   const colorPanelId = `color-panel-${instanceId}`;
+  const PALETTE_IMG_URL = 'https://huggingface.co/datasets/MikaFil/3D_models/resolve/main/EARCARE/palette.png';
 
   // Color choices: add more as needed
   const colorChoices = Array.isArray(config.colorChoices) ? config.colorChoices : [];
@@ -108,7 +109,9 @@ const currentScriptTag = document.currentScript;
   widgetContainer.innerHTML = `
     <div id="viewer-container-${instanceId}" class="viewer-container">
       <div class="controls-row">
-        <button id="${colorButtonId}" class="widget-button color-menu-btn" aria-label="Ouvrir le menu de couleurs" title="Couleur"></button>
+        <button id="${colorButtonId}" class="widget-button color-menu-btn" aria-label="Ouvrir le menu de couleurs" title="Couleur">
+          <img src="${PALETTE_IMG_URL}" alt="palette" class="palette-btn-img" draggable="false">
+        </button>
         <button id="fullscreen-toggle-${instanceId}" class="widget-button fullscreen-toggle" title="Plein écran" aria-label="Plein écran">⇱</button>
         <button id="help-toggle-${instanceId}" class="widget-button help-toggle" title="Aide" aria-label="Aide">?</button>
         <button id="reset-camera-btn-${instanceId}" class="widget-button reset-camera-btn" title="Réinitialiser la caméra" aria-label="Réinitialiser la caméra">
@@ -160,9 +163,9 @@ const currentScriptTag = document.currentScript;
     ? '- Cliquez sur ⦿ pour afficher/masquer les tooltips.<br>'
     : '';
 
-  // ==== MODIFIED HELP TEXT, with dynamic color button symbol insertion =====
-  const colorPaletteSymbol = colorMenuBtn.innerHTML || "🎨"; // fallback if empty
-  const paletteHelpLine = `- Cliquez sur <span class="inline-palette">${colorPaletteSymbol}</span> pour ouvrir le menu de couleurs.<br>`;
+  // ==== MODIFIED HELP TEXT, with PNG palette image in helptext =====
+  const paletteHelpLine =
+    `- Cliquez sur <img src="${PALETTE_IMG_URL}" alt="palette" class="inline-palette" draggable="false"> pour ouvrir le menu de couleurs.<br>`;
   const resetHelpLine = '- Cliquez sur ⟲ pour réinitialiser la caméra.<br>';
 
   if (isMobile) {