DCAI Platform

A Hugging Face-style AI community platform built with Vue 3 + Vite (Frontend) and Django + FastAPI (Backend). Browse models, datasets, and apps with search, filtering, sorting, and pagination.

Table of Contents

• DCAI Platform
  • Table of Contents
  • Project Overview
  • Tech Stack
    • Frontend
    • Backend
  • Project Structure
  • Getting Started
    • Prerequisites
    • Environment Configuration
    • Frontend Development
    • Backend Development
      • Running Backend Tests
      • Using API Mode
  • API Documentation
    • API Endpoints
  • Contributing

Project Overview

DCAI (Data-Centric AI) Platform is a comprehensive AI community hub that provides:

• Models: Browse and discover AI models for various tasks
• Datasets: Access and share datasets for training and evaluation
• Apps: Interactive AI applications powered by open-source models
• DataFlow: Visual workflow builder for data processing pipelines
• Knowledge Bases: Manage and query knowledge bases with vector search

Tech Stack

Frontend

• Vue 3 - Progressive JavaScript framework with Composition API
• Vue Router 4 - Client-side routing
• Vue I18n - Internationalization support (English, Chinese, Traditional Chinese)
• Tailwind CSS - Utility-first CSS framework
• Vite - Next-generation frontend build tool

Backend

• Django - High-level Python web framework
• Django REST Framework - Powerful API toolkit
• FastAPI - Modern, fast web framework for APIs (hybrid setup)
• SQLite/PostgreSQL - Database (SQLite for dev, PostgreSQL for production)
• Redis - Caching and message broker
• Celery - Distributed task queue

Project Structure

.
├── frontend/                     # Frontend source code
│   ├── assets/                   # Static assets (CSS, images)
│   ├── components/               # Vue components
│   │   ├── apps/                 # App-related components
│   │   ├── common/               # Common/reusable components
│   │   ├── dataflow/             # DataFlow components
│   │   ├── datasets/             # Dataset components
│   │   ├── home/                 # Home page sections
│   │   ├── knowledgeBase/        # Knowledge base components
│   │   ├── layout/               # Layout components (Header, Footer, Nav)
│   │   └── models/               # Model components
│   ├── composables/              # Vue composition functions
│   ├── config/                   # Configuration files
│   ├── data/                     # Mock data files
│   ├── i18n/                     # Internationalization
│   │   └── locales/              # Translation files
│   ├── router/                   # Vue Router configuration
│   ├── services/                 # API service layer
│   ├── views/                    # Page components
│   ├── App.vue                   # Root component
│   └── main.js                   # Entry point
│
├── backend/                      # Backend source code
│   ├── agent/                    # AI Agent module
│   ├── apps/                     # Apps module (Spaces renamed to Apps)
│   ├── chat/                     # Chat module
│   ├── collection/               # Collections module
│   ├── core/                     # Core settings and config
│   ├── customadmin/              # Custom admin module
│   ├── dataflow/                 # DataFlow module
│   ├── dataset/                  # Dataset module
│   ├── df_conversation/          # DataFlow conversation module
│   ├── document/                 # Document module
│   ├── fastapi_app/              # FastAPI application
│   ├── knowledgebase/            # Knowledge base module
│   ├── llm_chat/                 # LLM chat module
│   ├── openapi/                  # OpenAPI module
│   ├── organization/             # Organization module
│   ├── systemconfig/             # System configuration module
│   ├── task/                     # Task management module
│   ├── template/                 # Template module
│   ├── third_party/              # Third-party integrations
│   ├── train/                    # Training module
│   ├── user/                     # User management module
│   ├── manage.py                 # Django management script
│   └── requirements.txt          # Python dependencies
│
├── public/                       # Public static files
├── index.html                    # HTML entry point
├── package.json                  # Node.js dependencies
├── vite.config.js                # Vite configuration
├── tailwind.config.js            # Tailwind CSS configuration
└── .env.example                  # Environment variables template

Getting Started

Prerequisites

• Node.js v18 or later
• npm (comes with Node.js)
• Python 3.8 or later
• pip (comes with Python)
• Redis (optional, for caching and Celery)

Environment Configuration

1. Copy the example environment file:

cp .env.example .env

2. Configure the environment variables in .env:

Variable	Description	Default
VITE_DATA_MODE	Data source mode: mock or api	mock
VITE_API_BASE_URL	Backend API base URL	http://localhost:8000
ENABLE_MOCK_DATAFLOW	Auto-start mock Dataflow server	False
ENABLE_MOCK_HF	Auto-start mock Hugging Face Hub server	False
HF_SERVICE_URL	Mock HF server base URL	http://localhost:8002
HF_ENDPOINT	Endpoint for 'datasets' library	http://localhost:8002

Frontend Development

# Install dependencies
npm install

# Start development server
npm run dev

The app will be available at http://localhost:5173.

# Build for production
npm run build

# Preview production build
npm run preview

Backend Development

cd backend

# Create virtual environment (recommended)
python -m venv venv
source venv/bin/activate  # On Windows: venv\Scripts\activate

# Install dependencies
pip install -r requirements.txt

# Run migrations
python manage.py migrate

# Start development server
python manage.py runserver 0.0.0.0:8000

Running Backend Tests

The backend uses Django's test runner and includes integration tests for mock systems.

cd backend

# Run all tests
python manage.py test

# Run specific module tests
python manage.py test dataflow.tests  # Dataflow integration tests
python manage.py test dataset.tests   # Hugging Face mock server tests
python manage.py test user.tests      # User and Auth tests

Note: Integration tests for dataflow and dataset automatically start their respective mock FastAPI servers if they are not already running. Ensure ENABLE_MOCK_DATAFLOW=True or ENABLE_MOCK_HF=True in your .env is NOT required for running tests specifically, as the test runner handles server lifecycle, but it IS required for these systems to work during regular runserver development.

Using API Mode

To use the real backend API instead of mock data:

1. Update your .env file:

   VITE_DATA_MODE=api
   VITE_API_BASE_URL=http://localhost:8000

2. Start both frontend and backend servers

3. Restart the frontend to apply new environment variables

API Documentation

When the backend is running, API documentation is available at:

• Swagger UI: http://localhost:8000/api/docs/
• ReDoc: http://localhost:8000/api/redoc/
• OpenAPI Schema: http://localhost:8000/api/schema/

API Endpoints

Endpoint	Description
/api/v1/	API v1 endpoints
/api/v2/	API v2 endpoints
/api/v2/apps	Apps listing
/api/v2/datasets	Datasets listing
/api/v2/tasks	Tasks management
/admin/	Django admin interface

Contributing

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request