Spaces:
Running
on
Zero
Running
on
Zero
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Experiment Interface Guide</title> | |
| <!-- Link to Font Awesome for icons --> | |
| <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| line-height: 1.6; | |
| margin: 20px; | |
| } | |
| h2 { | |
| color: #2c3e50; | |
| } | |
| .section { | |
| margin-bottom: 20px; | |
| } | |
| ul { | |
| list-style-type: disc; | |
| margin-left: 20px; | |
| } | |
| .icon { | |
| margin-left: 5px; | |
| color: #3498db; | |
| } | |
| @media (prefers-color-scheme: dark) { | |
| .highlight { | |
| display: inline-block; | |
| background-color: #333; /* Background color of the box */ | |
| color: #ffffff ; /* Text color */ | |
| padding: 2px 5px; /* Padding inside the box */ | |
| border-radius: 5px; /* Rounded corners */ | |
| border: 1px solid rgba(0, 0, 0, 0.2); /* Border (optional for added effect) */ | |
| } | |
| .button { | |
| display: inline-block; | |
| background-color: #f97316; /* Background color of the box */ | |
| color: #ffffff ; /* Text color */ | |
| padding: 2px 5px; /* Padding inside the box */ | |
| border-radius: 5px; /* Rounded corners */ | |
| border: 1px solid rgba(0, 0, 0, 0.2); /* Border (optional for added effect) */ | |
| } | |
| } | |
| @media (prefers-color-scheme: light) { | |
| .highlight { | |
| display: inline-block; | |
| background-color: #ffe8ef; /* Background color of the box */ | |
| color: #C01343 ; /* Text color */ | |
| padding: 2px 5px; /* Padding inside the box */ | |
| border-radius: 5px; /* Rounded corners */ | |
| border: 1px solid rgba(0, 0, 0, 0.2); /* Border (optional for added effect) */ | |
| } | |
| .button { | |
| display: inline-block; | |
| background-color: #fdba74; /* Background color of the box */ | |
| color: #ea580c ; /* Text color */ | |
| padding: 2px 5px; /* Padding inside the box */ | |
| border-radius: 5px; /* Rounded corners */ | |
| border: 1px solid rgba(0, 0, 0, 0.2); /* Border (optional for added effect) */ | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="section"> | |
| <h1>Detection</h1> | |
| <p>This tab displays the structure of the model inputted into the generated <span class="highlight"> Experiment </span>. It shows a directed graph where each layer is represented as a node and each connection as an edge.</p> | |
| </div> | |
| <div class="section"> | |
| <h1>Local Explanation</h1> | |
| <p>This tab allows users to select a local instance for the generated <span class="highlight"> Experiment </span>, automatically generate explanations, and perform evaluation and validation. It automatically classifies the available XAI (Explainable AI) methods for the input model and provides a UI for users to select the necessary methods.</p> | |
| <p>The usage steps are as follows:</p> | |
| <ul> | |
| <li>Select an input from the <span class="highlight"> Input Data Gallery </span>. </li> | |
| <li>In the <span class="highlight">Explainers</span> section, open the dropdown to select a <span class="highlight"> Default parameter </span> or click the <span class="button"> Optimize </span> button to perform hyperparameter optimization, and then select the <span class="highlight"> Optimized parameter </span> to use the corresponding XAI method.</li> | |
| <li>In the <span class="highlight">Evaluators</span> section, choose a metric to evaluate the XAI.</li> | |
| <li>Click the <span class="button">Explain</span> button. </li> | |
| </ul> | |
| <p>The explanation results for the selected XAI methods will be displayed and sorted in order of the selected metric's results.</p> | |
| <p><em>*Demo server is fixed to use 'AbPC' metric as an object of the optimization and ranking.</em></p> | |
| </div> | |
| </body> | |
| </html> | |