Hugging Face's logo

Spaces:
OpenXAIProject
/
pnpxai-image-classification
Running on Zero

App Files Community
OpenXAIProject commited on
Commit
ed2055f
•
1 Parent(s): bab4b6d

update

Browse files
Files changed (5) hide show
  1. app.py +8 -2
  2. data/static/XAI-Top-PnP.svg +0 -1
  3. XAI-Top-PnP.png → static/XAI-Top-PnP.png +0 -0
  4. XAI-Top-PnP.svg → static/XAI-Top-PnP.svg +0 -0
  5. 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"data/static/XAI-Top-PnP.svg")
 
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>