Fusion Platform Web

A comprehensive web platform for AI model fusion, evaluation, and deployment built with Next.js, React, and Ant Design.

🚀 Overview

Fusion Platform Web is a modern web interface for managing AI model fusion workflows, including model evaluation, deployment, and monitoring. The platform provides a unified dashboard for various AI model operations with real-time progress tracking and resource management.

✨ Features

Core Modules

• 📊 Dashboard - Real-time overview of running tasks, resource usage, and recent evaluations
• 🤖 Model Management - Import, manage, and organize AI models from various sources
• 🔄 Model Fusion - Advanced model fusion capabilities with InfiFusion technology
• 📈 Model Evaluation - Comprehensive model evaluation across multiple dimensions
• ⚡ Model Deployment - One-click deployment of fused models as inference services
• 🔧 Worker Management - GPU worker node monitoring and resource allocation
• 🏆 Leaderboard - Model performance comparison and ranking
• 🔀 MergeKit Integration - Model merging operations with various strategies
• 🎯 InfiFPO - Preference optimization for AI models

Technical Features

• Modern UI/UX - Built with Ant Design and Tailwind CSS
• Real-time Updates - Live progress tracking and status monitoring
• Multi-language Support - Internationalization-ready interface
• Responsive Design - Optimized for desktop and mobile devices
• API Integration - RESTful API client for backend communication
• Error Handling - Graceful error handling and fallback mechanisms

🛠️ Tech Stack

Frontend

• Framework: Next.js 15.2.4 with App Router
• UI Library: Ant Design
• Styling: Tailwind CSS 4.1.9
• Icons: Lucide React
• State Management: React Hooks
• TypeScript: Full TypeScript support

Backend Integration

• API Client: Custom REST client with error handling
• Authentication: JWT-based authentication
• Real-time: WebSocket support for live updates

📦 Installation

Prerequisites

• Node.js 18+
• npm or yarn
• Backend API server (see Backend section)

Quick Start

1. Clone the repository

   git clone https://github.com/your-username/fusion-platform-web.git
   cd fusion-platform-web

2. Install dependencies

   npm install
   # or
   yarn install

3. Environment Configuration Create a .env.local file:

   NEXT_PUBLIC_API_BASE_URL=http://localhost:8001/api
   NEXT_PUBLIC_WS_URL=ws://localhost:8001/ws

4. Start development server

   npm run dev
   # or
   yarn dev

5. Open your browser Navigate to http://localhost:3000

🏗️ Project Structure

fusion-platform-web/
├── app/                    # Next.js App Router
│   ├── dashboard/          # Main dashboard and modules
│   │   ├── evaluation/     # Model evaluation interface
│   │   ├── models/         # Model management
│   │   ├── deployment/     # Model deployment
│   │   ├── workers/        # GPU worker management
│   │   ├── leaderboard/    # Model leaderboard
│   │   ├── mergekit/       # Model merging
│   │   ├── infifpo/        # Preference optimization
│   │   └── infifusion/     # Model fusion
│   ├── register/           # User registration
│   └── layout.tsx          # Root layout
├── components/             # Reusable components
├── lib/                    # Utility libraries
│   └── api.ts             # API client and interfaces
├── public/                 # Static assets
└── styles/                 # Global styles

🔌 API Integration

The platform communicates with a backend API server. Key API endpoints include:

• Models: /api/models - Model CRUD operations
• Evaluation: /api/evaluation/tasks - Evaluation task management
• Fusion: /api/fusion/tasks - Model fusion workflows
• Workers: /api/workers - GPU worker management
• Leaderboard: /api/leaderboard - Model performance tracking

API Client Features

• Automatic error handling
• Network error detection
• Graceful fallback to mock data
• Progress tracking
• Real-time updates via WebSocket

🎨 UI/UX Design

Design System

• Color Scheme: Modern gradient-based design
• Typography: Clean, readable fonts
• Components: Consistent Ant Design components
• Responsive: Mobile-first responsive design

Key Pages

1. Dashboard - Overview of system status and running tasks
2. Model Management - Import and organize AI models
3. Evaluation - Multi-dimensional model assessment
4. Deployment - Model deployment and service management
5. Worker Nodes - GPU resource monitoring and allocation

🚀 Deployment

Vercel Deployment

The project is configured for seamless deployment on Vercel:

1. Connect your GitHub repository to Vercel
2. Configure environment variables
3. Deploy automatically on git push

Environment Variables for Production

NEXT_PUBLIC_API_BASE_URL=https://your-api-domain.com/api
NEXT_PUBLIC_WS_URL=wss://your-api-domain.com/ws
NEXTAUTH_SECRET=your-secret-key
NEXTAUTH_URL=https://your-domain.com

🔧 Development

Available Scripts

npm run dev          # Start development server
npm run build        # Build for production
npm run start        # Start production server
npm run lint         # Run ESLint

Code Style

• TypeScript for type safety
• ESLint for code quality
• Prettier for code formatting
• Component-based architecture