explainai-playground

Interactive playground and demo application for ExplainAI.


Overview

An interactive Next.js application showcasing ExplainAI's capabilities with live demos, examples, and visualizations. Perfect for learning, testing, and demonstrating model interpretability.

Features

- 🎮 Interactive Demos - Try SHAP and LIME explanations in real-time
- 🎨 Visual Examples - See all visualization components in action
- 🔧 Custom Models - Test with your own API endpoints
- 📊 Multiple Methods - Compare different explainability techniques
- 📱 Responsive - Works on desktop, tablet, and mobile
- 🚀 Fast - Built with Next.js 14 for optimal performance

Installation

``bash
npm install explainai-playground
`

Or clone and run locally:

`bash
git clone https://github.com/gyash1512/ExplainAI.git
cd ExplainAI
npm install
npm run dev
`

Usage

$3

`bash


Install globally

npm install -g explainai-playground

Run the playground

explainai-playground
`

The playground will start on http://localhost:3000

$3

`bash


In the ExplainAI monorepo

npm run dev

Or in the playground package

cd packages/playground
npm run dev
`

$3

`bash
npm run build
npm run start
`

Available Demos

$3

Interactive demonstration of Shapley values:
- Real-time API integration
- Adjustable sample sizes
- Feature importance visualization
- Waterfall charts

Location: /shap

$3

Local interpretable model-agnostic explanations:
- Local explanations for individual predictions
- Feature contribution analysis
- Interactive parameter tuning
- Comparison with SHAP

Location: /lime

$3

Test with your own models:
- Connect to any REST API
- Configure input/output shapes
- Choose explainability method
- Export results

Location: /custom

Features by Page

$3

- Overview of ExplainAI
- Quick start guide
- Package installation instructions
- Links to all demos

$3

`tsx
import { ShapleyChart } from 'explainai-ui';
import { explain, createApiModel } from 'explainai-core';

// Live demo with:
// - API endpoint configuration
// - Input data editor
// - Real-time explanation generation
// - Interactive visualizations
`

$3

`tsx
import { LimeChart } from 'explainai-ui';
import { explainWithLime, createApiModel } from 'explainai-core';

// Live demo with:
// - Local explanation focus
// - Sample size adjustment
// - Feature name customization
// - Export functionality
`

$3

`tsx
import { FeatureImportanceChart } from 'explainai-ui';

// Flexible demo with:
// - Custom API endpoints
// - Method selection (SHAP/LIME)
// - Model type configuration
// - Result comparison
`

Configuration

$3

Create .env.local:

`bash


Default model endpoint

NEXT_PUBLIC_DEFAULT_ENDPOINT=http://localhost:3000/predict

API timeout (ms)

NEXT_PUBLIC_API_TIMEOUT=30000

Default samples

NEXT_PUBLIC_DEFAULT_SAMPLES=100
`

$3

Override default theme in globals.css:

`css
:root {
--primary-color: #3b82f6;
--success-color: #10b981;
--error-color: #ef4444;
--background: #ffffff;
--foreground: #1f2937;
}
`

API Integration

The playground works with any model API that returns JSON predictions:

$3

Request:
`json
POST /predict
{
"input": [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]
}
`

Response:
`json
{
"prediction": 42.5
}
`

Or simply:
`json
42.5
`

$3

Includes a mock server for testing:

`bash


Start mock server

node mock-server.js

Test endpoint

curl -X POST http://localhost:3000/predict \
-H "Content-Type: application/json" \
-d '{"input":[1,2,3,4,5,6,7,8,9,10]}'
`

Deployment

$3

`bash


Deploy to Vercel

vercel deploy

Or use the Vercel button

`


$3

`dockerfile
FROM node:20-alpine AS builder
WORKDIR /app
COPY . .
RUN npm install
RUN npm run build

FROM node:20-alpine
WORKDIR /app
COPY --from=builder /app/.next ./.next
COPY --from=builder /app/public ./public
COPY --from=builder /app/package.json ./
RUN npm install --production

EXPOSE 3000
CMD ["npm", "start"]
`

`bash
docker build -t explainai-playground .
docker run -p 3000:3000 explainai-playground
`

$3

`bash


Export as static HTML

npm run build
npm run export

Serve static files

npx serve out/
`

Tech Stack

- Framework: Next.js 14 (App Router)
- Styling: Tailwind CSS
- UI Components: Radix UI
- State Management: React Hooks
- Explanations: explainai-core
- Visualizations: explainai-ui

Project Structure

`
packages/playground/
├── src/
│ ├── app/
│ │ ├── page.tsx # Home page
│ │ ├── shap/
│ │ │ └── page.tsx # SHAP demo
│ │ ├── lime/
│ │ │ └── page.tsx # LIME demo
│ │ └── custom/
│ │ └── page.tsx # Custom model demo
│ ├── components/
│ │ └── ui/ # Reusable components
│ └── styles/
│ └── globals.css # Global styles
├── public/ # Static assets
└── package.json
`

Development

$3

- Node.js ≥18.0.0
- npm ≥9.0.0

$3

`bash


Install dependencies

npm install

Run development server

npm run dev

Run linter

npm run lint

Type check

npm run typecheck

Build

npm run build
`

$3

1. Create new page in src/app/[demo-name]/page.tsx`
2. Import required components from explainai-ui
3. Add navigation link in home page
4. Update documentation

Browser Support

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

Performance

- Fast Refresh: Instant feedback during development
- Code Splitting: Automatic route-based splitting
- Image Optimization: Next.js Image component
- Bundle Size: Optimized production builds

Related Packages

- explainai-core - Core algorithms
- explainai-ui - Visualization components
- explainai-node - Node.js CLI tools

Documentation

- Full Documentation
- Component Gallery
- API Reference
- Examples

Contributing

Contributions welcome! See Contributing Guide

$3

1. Fork the repository
2. Create feature branch
3. Add your demo/feature
4. Test thoroughly
5. Submit pull request

License

MIT - see LICENSE

Author

Yash Gupta (@gyash1512)

Repository

github.com/gyash1512/ExplainAI

Live Demo

Visit the live playground: explainai.vercel.app _(coming soon)_