Ranking Component Mockups

1. Basic Drag & Drop Ranking

Standard two-column layout where users drag items from source to target area in their preferred order.

Instructions

Drag the fine-tuning steps from the left panel to the right panel in the correct order for the training workflow.

Available Steps
Prepare Training Data
Clean and format your conversation datasets
Configure Hyperparameters
Set learning rate, batch size, and epochs
Load Base Model
Initialize the pre-trained foundation model
Monitor Training Progress
Track loss curves and validation metrics
Evaluate Final Model
Test performance against baseline
Correct Workflow Order
Drop items here in correct sequence

2. Numbered Priority Ranking

Vertical list where items automatically get numbered based on their position. Good for priority or importance rankings.

Instructions

Drag to reorder these dataset quality factors by importance (most important at top).

1
Response Accuracy
Factually correct and appropriate responses
2
Scenario Diversity
Wide range of conversation types and contexts
3
Style Consistency
Uniform tone and approach across examples
4
Dataset Volume
Sufficient quantity of training examples

3. Priority Matrix (2x2 Grid)

Eisenhower matrix style where items are categorized by two dimensions (impact vs effort, importance vs urgency, etc.)

Instructions

Drag each improvement task into the appropriate quadrant based on impact and implementation effort.

← Low Effort                                High Effort →
🚀 Quick Wins (High Impact, Low Effort)
📈 Major Projects (High Impact, High Effort)
🔧 Fill-ins (Low Impact, Low Effort)
❌ Avoid (Low Impact, High Effort)
Available Tasks
Improve prompts
Expand dataset
Change architecture
Tune hyperparameters
Add eval metrics
Data preprocessing