README.md

metadata

title: Hugging Face Experiment Control Panel
emoji: 🏆
colorFrom: red
colorTo: gray
sdk: docker
sdk_version: 3.0.0
app_file: app.py
pinned: false

Hugging Face Experiment Control Panel

This is a proxy control panel based on FastAPI (backend) and a simple web UI (frontend) to provide remote control and monitoring capabilities for experiment workflows on Hugging Face.

Features

• 🔄 Workflow Upload & Submission: Drag & drop or select JSON workflow files and send them to the lab server
• 📊 Execution Visualization: Real-time display of workflow execution steps and status
• 🔍 Server Status Monitoring: Real-time check if the lab server is online
• 📝 History Management: Save sent workflows for quick resubmission
• 🐞 Debug Console: Centralized display of error messages and system logs

System Architecture

• Frontend: Simple Web UI with JavaScript
• Backend: FastAPI (Python)
• Communication: REST API request forwarding

Environment Variables

• LAB_SERVER_URL: URL of the lab server (default: http://localhost:8000)
• PORT: Port for the application to run on (default: 8080)

Local Development

1. Install dependencies:

pip install -r requirements.txt

2. Start the service:

python app.py

3. Access the application:

Open your browser and go to http://localhost:8080

Project Structure

project-root/
├── app.py                         # FastAPI proxy backend
├── requirements.txt               # Python dependencies
├── static/                        # Static pages
│   └── index.html                 # Main HTML page
├── public/                        # Public resources
│   └── logo.png                   # App logo
└── frontend/                      # Frontend code (for reference only)
    ├── App.tsx                    # Main app container
    ├── index.tsx                  # React entry point
    ├── api/
    │   └── apiClient.ts           # API request encapsulation
    ├── components/
    │   ├── WorkflowSender.tsx     # Workflow upload/send component
    │   ├── RunStatusStepper.tsx   # Execution progress visualization
    │   ├── PingLabServer.tsx      # Server status check
    │   ├── HistoryPanel.tsx       # History management
    │   └── ErrorConsole.tsx       # Error and log display
    └── types/
        └── types.ts               # TypeScript type definitions

API Endpoints

• GET /api/health: Check if the lab server is online
• POST /api/run_experiment: Submit workflow execution request
• GET /api/run_status/{run_id}: Get workflow execution status
• GET /api/sample_workflow: Get a sample workflow (demo only)

License

MIT

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference