Commit
•
ed2055f
1
Parent(s):
bab4b6d
update
Browse files- app.py +8 -2
- data/static/XAI-Top-PnP.svg +0 -1
- XAI-Top-PnP.png → static/XAI-Top-PnP.png +0 -0
- XAI-Top-PnP.svg → static/XAI-Top-PnP.svg +0 -0
- static/overview.html +70 -0
app.py
CHANGED
|
@@ -38,6 +38,12 @@ class OverviewTab(Tab):
|
|
| 38 |
def show(self):
|
| 39 |
with gr.Tab(label="Overview") as tab:
|
| 40 |
gr.Label("This is the overview tab.")
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 41 |
|
| 42 |
class DetectionTab(Tab):
|
| 43 |
def __init__(self, experiments):
|
|
@@ -615,7 +621,7 @@ class ImageClsApp(App):
|
|
| 615 |
return f"""
|
| 616 |
<div style="text-align: center;">
|
| 617 |
<a href="https://openxaiproject.github.io/pnpxai/">
|
| 618 |
-
<img src="file/XAI-Top-PnP.png" width="167" height="100">
|
| 619 |
</a>
|
| 620 |
<h1> Plug and Play XAI Platform for Image Classification </h1>
|
| 621 |
</div>
|
|
@@ -691,4 +697,4 @@ experiments['experiment2'] = {
|
|
| 691 |
|
| 692 |
app = ImageClsApp(experiments)
|
| 693 |
demo = app.launch()
|
| 694 |
-
demo.launch(favicon_path=f"
|
|
|
|
| 38 |
def show(self):
|
| 39 |
with gr.Tab(label="Overview") as tab:
|
| 40 |
gr.Label("This is the overview tab.")
|
| 41 |
+
gr.HTML(self.desc())
|
| 42 |
+
|
| 43 |
+
def desc(self):
|
| 44 |
+
with open("static/overview.html", "r") as f:
|
| 45 |
+
desc = f.read()
|
| 46 |
+
return desc
|
| 47 |
|
| 48 |
class DetectionTab(Tab):
|
| 49 |
def __init__(self, experiments):
|
|
|
|
| 621 |
return f"""
|
| 622 |
<div style="text-align: center;">
|
| 623 |
<a href="https://openxaiproject.github.io/pnpxai/">
|
| 624 |
+
<img src="file/static/XAI-Top-PnP.png" width="167" height="100">
|
| 625 |
</a>
|
| 626 |
<h1> Plug and Play XAI Platform for Image Classification </h1>
|
| 627 |
</div>
|
|
|
|
| 697 |
|
| 698 |
app = ImageClsApp(experiments)
|
| 699 |
demo = app.launch()
|
| 700 |
+
demo.launch(favicon_path=f"static/XAI-Top-PnP.svg")
|
data/static/XAI-Top-PnP.svg
DELETED
XAI-Top-PnP.png → static/XAI-Top-PnP.png
RENAMED
|
File without changes
|
XAI-Top-PnP.svg → static/XAI-Top-PnP.svg
RENAMED
|
File without changes
|
static/overview.html
ADDED
|
@@ -0,0 +1,70 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 1 |
+
<!DOCTYPE html>
|
| 2 |
+
<html lang="en">
|
| 3 |
+
<head>
|
| 4 |
+
<meta charset="UTF-8">
|
| 5 |
+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
| 6 |
+
<title>Experiment Interface Guide</title>
|
| 7 |
+
<!-- Link to Font Awesome for icons -->
|
| 8 |
+
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
|
| 9 |
+
<style>
|
| 10 |
+
body {
|
| 11 |
+
font-family: Arial, sans-serif;
|
| 12 |
+
line-height: 1.6;
|
| 13 |
+
margin: 20px;
|
| 14 |
+
}
|
| 15 |
+
h2 {
|
| 16 |
+
color: #2c3e50;
|
| 17 |
+
}
|
| 18 |
+
.section {
|
| 19 |
+
margin-bottom: 20px;
|
| 20 |
+
}
|
| 21 |
+
ul {
|
| 22 |
+
list-style-type: disc;
|
| 23 |
+
margin-left: 20px;
|
| 24 |
+
}
|
| 25 |
+
.icon {
|
| 26 |
+
margin-left: 5px;
|
| 27 |
+
color: #3498db;
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
.highlight {
|
| 31 |
+
display: inline-block;
|
| 32 |
+
background-color: #ffe8ef; /* Background color of the box */
|
| 33 |
+
color: #C01343 !important; /* Text color */
|
| 34 |
+
padding: 2px 5px; /* Padding inside the box */
|
| 35 |
+
border-radius: 5px; /* Rounded corners */
|
| 36 |
+
border: 1px solid rgba(0, 0, 0, 0.2); /* Border (optional for added effect) */
|
| 37 |
+
}
|
| 38 |
+
.button {
|
| 39 |
+
display: inline-block;
|
| 40 |
+
background-color: #fdba74; /* Background color of the box */
|
| 41 |
+
color: #ea580c !important; /* Text color */
|
| 42 |
+
padding: 2px 5px; /* Padding inside the box */
|
| 43 |
+
border-radius: 5px; /* Rounded corners */
|
| 44 |
+
border: 1px solid rgba(0, 0, 0, 0.2); /* Border (optional for added effect) */
|
| 45 |
+
}
|
| 46 |
+
|
| 47 |
+
</style>
|
| 48 |
+
</head>
|
| 49 |
+
<body>
|
| 50 |
+
<div class="section">
|
| 51 |
+
<h1>Detection</h1>
|
| 52 |
+
<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>
|
| 53 |
+
</div>
|
| 54 |
+
|
| 55 |
+
<div class="section">
|
| 56 |
+
<h1>Local Explanation</h1>
|
| 57 |
+
<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>
|
| 58 |
+
<p>The usage steps are as follows:</p>
|
| 59 |
+
<ul>
|
| 60 |
+
<li>Select an input from the <span class="highlight"> Input Data Gallery </span>. </li>
|
| 61 |
+
<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="highlight"> Optimize </span> button to perform hyperparameter optimization, and then select the <span class="button"> Optimized parameter </span> to use the corresponding XAI method.</li>
|
| 62 |
+
<li>In the <span class="highlight">Evaluators</span> section, choose a metric to evaluate the XAI.</li>
|
| 63 |
+
<li>Click the <span class="button">Explain</span> button. </li>
|
| 64 |
+
</ul>
|
| 65 |
+
<p>The explanation results for the selected XAI methods will be displayed and sorted in order of the selected metric's results.</p>
|
| 66 |
+
<p><em>*Demo server is fixed to use 'AbPC' metric as an object of the optimization and ranking.</em></p>
|
| 67 |
+
</div>
|
| 68 |
+
|
| 69 |
+
</body>
|
| 70 |
+
</html>
|