zhongwei/gh-jeremylongshore-claude-code-plugins-plus-plugins-ai-ml-model-explainability-tool
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
Zhongwei Li
2025-11-29 18:51:42 +08:00
commit 058ce5ee4a
11 changed files with 558 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
skills/model-explainability-tool/assets/README.md Normal file
View File

@@ -0,0 +1,7 @@
# Assets
Bundled resources for model-explainability-tool skill
- [ ] explanation_template.html: HTML template for displaying model explanations in a user-friendly format.
- [ ] example_explanation.json: Example JSON output of a model explanation.
- [ ] visualization_styles.css: CSS file for styling visualizations of feature importance and model predictions.

95
skills/model-explainability-tool/assets/example_explanation.json Normal file
View File

@@ -0,0 +1,95 @@
{
"_comment": "Example JSON output for a model explanation. This is a template for the model-explainability-tool plugin.",
"model_id": "model_v3.2",
"model_type": "Classification",
"dataset_used": "customer_churn_dataset.csv",
"explanation_type": "SHAP",
"explanation_timestamp": "2024-01-26T10:30:00Z",
"global_explanation": {
"_comment": "Global feature importance ranking.",
"feature_importance": [
{
"feature": "contract_length",
"importance_score": 0.35,
"description": "Length of the customer's contract (e.g., monthly, yearly)."
},
{
"feature": "monthly_charges",
"importance_score": 0.28,
"description": "The customer's monthly bill amount."
},
{
"feature": "total_charges",
"importance_score": 0.22,
"description": "Total amount the customer has paid."
},
{
"feature": "internet_service",
"importance_score": 0.10,
"description": "Type of internet service the customer has (e.g., DSL, Fiber optic)."
},
{
"feature": "online_security",
"importance_score": 0.05,
"description": "Whether the customer has online security."
}
],
"summary": "The model's predictions are most influenced by contract length, monthly charges, and total charges. Internet service and online security have a smaller, but still significant, impact."
},
"local_explanation": {
"_comment": "Explanation for a specific instance/prediction.",
"instance_id": "customer_123",
"predicted_class": "Churn",
"prediction_probability": 0.85,
"feature_contributions": [
{
"feature": "contract_length",
"contribution": -0.40,
"value": "Month-to-month",
"reason": "Month-to-month contracts are highly correlated with churn."
},
{
"feature": "monthly_charges",
"contribution": 0.25,
"value": 75.50,
"reason": "Higher monthly charges increase the likelihood of churn."
},
{
"feature": "total_charges",
"contribution": -0.10,
"value": 200.00,
"reason": "Relatively low total charges suggest the customer is new and more likely to churn."
},
{
"feature": "internet_service",
"contribution": 0.05,
"value": "Fiber optic",
"reason": "Fiber optic service is associated with higher churn rates in this dataset."
},
{
"feature": "online_security",
"contribution": -0.02,
"value": "No",
"reason": "Lack of online security slightly increases churn risk."
}
],
"summary": "This customer is predicted to churn primarily due to their month-to-month contract and high monthly charges. The relatively low total charges also contribute to the prediction."
},
"fairness_metrics": {
"_comment": "Metrics for assessing fairness across different groups.",
"protected_attribute": "gender",
"metric": "Disparate Impact",
"value": 0.95,
"threshold": 0.8,
"status": "Acceptable",
"summary": "The model exhibits acceptable disparate impact across genders, as the value (0.95) is above the threshold (0.8)."
},
"data_bias_detection": {
"_comment": "Results of data bias detection.",
"potential_bias": "Unequal representation of geographic regions in the training data.",
"recommendations": [
"Collect more data from underrepresented regions.",
"Use re-weighting techniques to balance the data."
]
}
}

160
skills/model-explainability-tool/assets/explanation_template.html Normal file
View File

@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Model Explanation</title>
<style>
/* Basic Reset */
body, h1, h2, h3, p, ul, li {
margin: 0;
padding: 0;
border: 0;
}
/* General Styling */
body {
font-family: sans-serif;
line-height: 1.6;
background-color: #f4f4f4;
color: #333;
padding: 20px;
}
.container {
max-width: 960px;
margin: 0 auto;
background-color: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}
h1 {
font-size: 2.5rem;
margin-bottom: 20px;
text-align: center;
color: #2c3e50;
}
h2 {
font-size: 1.8rem;
margin-bottom: 15px;
color: #34495e;
}
h3 {
font-size: 1.4rem;
margin-bottom: 10px;
color: #5b6c7f;
}
p {
margin-bottom: 15px;
}
ul {
list-style: disc;
margin-left: 20px;
margin-bottom: 15px;
}
/* Explanation Specific Styling */
.explanation-section {
margin-bottom: 30px;
border-bottom: 1px solid #ddd;
padding-bottom: 20px;
}
.explanation-section:last-child {
border-bottom: none;
}
.feature-importance {
margin-top: 10px;
}
.feature-importance table {
width: 100%;
border-collapse: collapse;
}
.feature-importance th, .feature-importance td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
.feature-importance th {
background-color: #f2f2f2;
}
/* Responsive Design */
@media (max-width: 768px) {
.container {
padding: 15px;
}
h1 {
font-size: 2rem;
}
h2 {
font-size: 1.5rem;
}
h3 {
font-size: 1.2rem;
}
.feature-importance table {
font-size: 0.9rem;
}
}
</style>
</head>
<body>
<div class="container">
<h1>Model Explanation</h1>
<div class="explanation-section">
<h2>Model Summary</h2>
<p><strong>Model Type:</strong> {{model_type}}</p>
<p><strong>Model Description:</strong> {{model_description}}</p>
</div>
<div class="explanation-section">
<h2>Feature Importance</h2>
<div class="feature-importance">
<p>The table below shows the importance of each feature in the model:</p>
<table>
<thead>
<tr>
<th>Feature</th>
<th>Importance</th>
</tr>
</thead>
<tbody>
{{feature_importance_table}}
</tbody>
</table>
</div>
</div>
<div class="explanation-section">
<h2>Example Prediction Explanation</h2>
<h3>Input Data:</h3>
<p>{{example_input_data}}</p>
<h3>Prediction:</h3>
<p>{{example_prediction}}</p>
<h3>Explanation:</h3>
<p>{{example_explanation}}</p>
</div>
<div class="explanation-section">
<h2>Overall Insights</h2>
<p>{{overall_insights}}</p>
</div>
</div>
</body>
</html>

118
skills/model-explainability-tool/assets/visualization_styles.css Normal file
View File

@@ -0,0 +1,118 @@
/*
visualization_styles.css - CSS file for styling visualizations of feature importance and model predictions.
This file provides the styling for visualizations generated by the model-explainability-tool plugin.
It includes styles for feature importance charts, prediction breakdowns, and other interpretability
visualizations.
Feel free to customize these styles to match your application's design.
Table of Contents:
1. General Styles
2. Feature Importance Chart Styles
3. Prediction Breakdown Styles
4. [Add more sections as needed]
*/
/* 1. General Styles */
body {
font-family: sans-serif;
margin: 0;
padding: 0;
}
.visualization-container {
margin: 20px;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
}
.visualization-title {
font-size: 1.5em;
font-weight: bold;
margin-bottom: 10px;
}
.visualization-description {
font-size: 1em;
color: #555;
margin-bottom: 20px;
}
/* 2. Feature Importance Chart Styles */
.feature-importance-chart {
/* Styles for the chart container */
width: 100%;
height: 400px; /* Adjust as needed */
}
.feature-importance-bar {
/* Styles for individual bars in the chart */
background-color: #4CAF50; /* Green */
color: white;
padding: 5px;
margin-bottom: 2px;
text-align: right;
}
.feature-name {
/* Styles for feature names displayed in the chart */
float: left;
}
.feature-importance-value {
/* Styles for feature importance values */
float: right;
}
/* 3. Prediction Breakdown Styles */
.prediction-breakdown {
/* Styles for the overall prediction breakdown container */
}
.prediction-breakdown-item {
/* Styles for individual items in the breakdown */
margin-bottom: 5px;
}
.prediction-breakdown-label {
/* Styles for labels in the breakdown */
font-weight: bold;
}
.prediction-breakdown-value {
/* Styles for values in the breakdown */
color: #007bff; /* Blue */
}
/* 4. [Add more sections as needed. Example: Styles for specific model types] */
/* Example: Styles for tree-based models */
.tree-node {
/* Styles for nodes in a decision tree visualization */
border: 1px solid #ddd;
padding: 5px;
margin: 2px;
border-radius: 3px;
}
/* Placeholders for future customization */
/* Example: Add styles for different color palettes */
/* .color-palette-1 { ... } */
/* Add responsive styles for different screen sizes */
@media (max-width: 768px) {
.visualization-container {
margin: 10px;
padding: 10px;
}
.feature-importance-chart {
height: 300px; /* Adjust height for smaller screens */
}
}