feat: add interactive metadata info icon with direct Hugging Face links

scripts/providers/infomaniak.js

@@ -24,9 +24,9 @@ const { getText } = require('../fetch-utils');
 
 const URL = 'https://www.infomaniak.com/en/hosting/ai-services/prices';
 
-const parseChf = (text) => {
+const parsePrice = (text) => {
   if (!text) return null;
-  if (text.trim().toLowerCase() === 'free') return 0;
+  if (text.trim().toLowerCase() === 'free' || text.trim().toLowerCase() === 'gratuit') return 0;
   const m = text.trim().match(/([\d]+\.[\d]*|[\d]+)/);
   return m ? parseFloat(m[1]) : null;
 };
@@ -50,6 +50,7 @@ async function fetchInfomaniak() {
       'User-Agent': 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
       Accept: 'text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8',
       'Accept-Language': 'en-US,en;q=0.9',
+      'Cookie': 'STATIC_CURRENCY=EUR; locale=en_US',
     },
   });
   const $ = cheerio.load(html);
@@ -83,12 +84,12 @@ async function fetchInfomaniak() {
       if (currText && /^[A-Z]{3}$/.test(currText)) currency = currText;
 
       const valSpan = $(priceRow).find('[class*="IkTypography-module--h3"]').first();
-      const val = parseChf(valSpan.text());
+      const val = parsePrice(valSpan.text());
       if (val === null) return;
 
-      if (label.includes('incoming') || label.includes('input')) {
+      if (label.includes('entrant') || label.includes('incoming') || label.includes('input')) {
         inputPrice = val;
-      } else if (label.includes('outgoing') || label.includes('output')) {
+      } else if (label.includes('sortant') || label.includes('outgoing') || label.includes('output')) {
         outputPrice = val;
       } else if (label.includes('image') || label.includes('per image')) {
         inputPrice = val; // image models: price per image stored as input

src/App.css

@@ -151,6 +151,84 @@ tr.group-divider {
   color: #1e293b;
 }
 
+.model-name-wrapper {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.model-info-container {
+  position: relative;
+  display: inline-flex;
+  cursor: help;
+}
+
+.info-icon {
+  font-size: 0.85rem;
+  color: #94a3b8;
+  opacity: 0.6;
+  transition: opacity 0.2s;
+}
+
+.model-info-container:hover .info-icon {
+  opacity: 1;
+  color: var(--primary-color);
+}
+
+.model-tooltip {
+  visibility: hidden;
+  position: absolute;
+  bottom: 100%;
+  left: 50%;
+  transform: translateX(-50%) translateY(-8px);
+  background-color: #1e293b;
+  color: #f8fafc;
+  padding: 0.75rem;
+  border-radius: 0.5rem;
+  font-family: 'Inter', sans-serif;
+  font-size: 0.75rem;
+  font-weight: 400;
+  white-space: nowrap;
+  z-index: 100;
+  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  pointer-events: none;
+}
+
+.model-info-container:hover .model-tooltip {
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.model-tooltip::after {
+  content: "";
+  position: absolute;
+  top: 100%;
+  left: 50%;
+  margin-left: -5px;
+  border-width: 5px;
+  border-style: solid;
+  border-color: #1e293b transparent transparent transparent;
+}
+
+.tooltip-row {
+  margin-bottom: 0.25rem;
+}
+.tooltip-row:last-child {
+  margin-bottom: 0;
+}
+.tooltip-row strong {
+  color: #94a3b8;
+  margin-right: 0.25rem;
+}
+
+.hf-link {
+  color: #60a5fa;
+  text-decoration: none;
+}
+.hf-link:hover {
+  text-decoration: underline;
+}
+
 .size-cell {
   font-family: 'JetBrains Mono', monospace;
   font-size: 0.85rem;

src/App.tsx

@@ -500,7 +500,29 @@ function App() {
                       {model.complianceStatus}
                     </span>
                   </td>
-                  <td className="model-name">{model.display_name ?? model.name}</td>
+                  <td className="model-name">
+                    <div className="model-name-wrapper">
+                      {model.display_name ?? model.name}
+                      <div className="model-info-container">
+                        <span className="info-icon">ⓘ</span>
+                        <div className="model-tooltip">
+                          <div className="tooltip-row"><strong>Type:</strong> {model.type}</div>
+                          {model.size_b && <div className="tooltip-row"><strong>Size:</strong> {model.size_b}B</div>}
+                          {model.hf_id && (
+                            <div className="tooltip-row">
+                              <strong>HF:</strong> 
+                              <a href={`https://huggingface.co/${model.hf_id}`} target="_blank" rel="noopener noreferrer" className="hf-link">
+                                {model.hf_id} ↗
+                              </a>
+                            </div>
+                          )}
+                          {model.capabilities && model.capabilities.length > 0 && (
+                            <div className="tooltip-row"><strong>Caps:</strong> {model.capabilities.join(', ')}</div>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+                  </td>
                   <td className="caps-cell">
                     {model.type === 'embedding' && (
                       <span className="cap-badge cap-embedding" title="embedding">{CAP_ICON.embedding}</span>