A modern React dashboard for the BlueVision AI Safety and Monitoring Platform, built with shadcn/ui components and Tailwind CSS.

• Langfuse Dashboard Integration: Connect to your Langfuse monitoring dashboard with API keys
• LLM Configuration: Configure your Language Model endpoint URL
• AI Safety Features: Toggle various detection features:
  • Bias Detection
  • Harmful Content Detection
  • Prompt Injection Detection
  • PII (Personally Identifiable Information) Detection
• Dark Theme: Beautiful dark theme with modern UI components
• Responsive Design: Works on desktop and mobile devices
• Local Storage: Settings are persisted in the browser

• Node.js 16+
• npm or yarn

1. Navigate to the frontend directory:

   cd frontend

2. Install dependencies:

   npm install

3. Start the development server:

   npm start

4. Open http://localhost:3000 in your browser.

npm run build

1. Click the "Open Langfuse Dashboard" button
2. Enter your Langfuse public and secret keys
3. Click "Open Dashboard" to be redirected to Langfuse

1. Enter your LLM endpoint URL in the input field
2. Example: https://api.openai.com/v1/chat/completions

• Use the toggle switches to enable/disable each detection feature
• Each feature has a description of what it detects
• Settings are automatically saved to localStorage

• Click the "Save Settings" button to persist all configurations
• Settings are also automatically saved when toggling switches

• React 18 - Modern React with hooks
• Tailwind CSS - Utility-first CSS framework
• shadcn/ui - Beautiful, accessible UI components
• Radix UI - Headless UI primitives
• Lucide React - Beautiful icons
• class-variance-authority - Component variant management

src/ ├── components/ │ └── ui/ # shadcn/ui components │ ├── button.jsx │ ├── card.jsx │ ├── dialog.jsx │ ├── input.jsx │ ├── label.jsx │ └── switch.jsx ├── lib/ │ └── utils.js # Utility functions ├── App.jsx # Main dashboard component ├── index.js # App entry point └── index.css # Global styles and CSS variables 

The dashboard uses CSS custom properties for theming. You can modify the colors in src/index.css under the :root and .dark selectors.

All UI components are built using shadcn/ui patterns and can be customized by modifying the component files in src/components/ui/.

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request

This project is part of the BlueVision platform.