Spaces:
Sleeping
Sleeping
| <html lang="fr"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>ClearDDI — Explainable DDI Alert System</title> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap" rel="stylesheet"> | |
| <link rel="stylesheet" href="/assets/styles.css"> | |
| </head> | |
| <body> | |
| <div class="app"> | |
| <!-- TOPBAR --> | |
| <header class="topbar"> | |
| <img src="/assets/logo.png" alt="ClearDDI — Alert System" class="logo"> | |
| <div class="topbar-right"> | |
| <span class="proto-tag">Prototype académique — non validé cliniquement</span> | |
| </div> | |
| </header> | |
| <!-- DISCLAIMER --> | |
| <div class="disclaimer"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 9v4m0 4h.01M10.3 3.9 1.8 18a2 2 0 0 0 1.7 3h17a2 2 0 0 0 1.7-3L13.7 3.9a2 2 0 0 0-3.4 0Z" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| <p><strong>Prototype académique d'aide à la décision.</strong> Cet outil ne constitue pas un dispositif médical validé et ne doit pas remplacer le jugement clinique d'un professionnel de santé.</p> | |
| </div> | |
| <!-- INPUT PANEL --> | |
| <h1 class="page-title">Analyser une interaction médicamenteuse</h1> | |
| <p class="page-subtitle">Saisissez le nom de deux substances — la conversion en structure moléculaire (SMILES) et l'analyse se font automatiquement.</p> | |
| <div class="input-card"> | |
| <div class="input-grid"> | |
| <div class="field"> | |
| <label for="drugA">Molécule du Médicament A</label> | |
| <div class="autocomplete-wrap"> | |
| <input id="drugA" type="text" placeholder="ex. Aspirine" autocomplete="off"> | |
| <div class="suggestions" id="suggestionsA"></div> | |
| </div> | |
| </div> | |
| <div class="swap-col"> | |
| <button class="swap-btn" id="swapBtn" aria-label="Inverser les médicaments" type="button"> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7 16V4M7 4 3 8M7 4l4 4M17 8v12M17 20l4-4M17 20l-4-4" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| </button> | |
| </div> | |
| <div class="field"> | |
| <label for="drugB">Molécule du Médicament B</label> | |
| <div class="autocomplete-wrap"> | |
| <input id="drugB" type="text" placeholder="ex. Warfarine" autocomplete="off"> | |
| <div class="suggestions" id="suggestionsB"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="input-footer"> | |
| <div class="sample-pairs" id="samplePairs"> | |
| <span class="sample-chip" data-a="acetylsalicylic acid" data-b="warfarin">Acetylsalicylic acid + Warfarin</span> | |
| <span class="sample-chip" data-a="simvastatin" data-b="clarithromycin">Simvastatin + Clarithromycin</span> | |
| <span class="sample-chip" data-a="digoxin" data-b="furosemide">Digoxin + Furosemide</span> | |
| </div> | |
| <button class="analyze-btn" id="analyzeBtn" type="button"> | |
| <span class="btn-label">Lancer l'analyse</span> | |
| <svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 12h14M13 6l6 6-6 6" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg> | |
| </button> | |
| </div> | |
| <div class="error-banner" id="errorBanner" hidden></div> | |
| </div> | |
| <!-- RESULTS (injected) --> | |
| <div id="results" class="results" hidden></div> | |
| <footer class="footer"> | |
| <div class="left"> | |
| <span>ClearDDI — Explainable DDI Alert System</span> | |
| <span>XGBoost + SHAP</span> | |
| </div> | |
| <span>Projet académique — non destiné à un usage clinique réel</span> | |
| </footer> | |
| </div> | |
| <script src="/assets/app.js"></script> | |
| </body> | |
| </html> | |