Hugging Face's logo

Spaces:
Blablablab
/
content-moderation
Paused

App Files Community
content-moderation / layouts /custom_task_layout.html
davidjurgens's picture
davidjurgens
Deploy: Potato — Content Moderation
8e32721 verified
Raw History Blame Contribute Delete
21.6 kB
<!-- Content Moderation Dashboard - Custom Layout -->
<!--
This layout demonstrates:
- Warning banner header with content ID
- 2-column grid for violation categories
- Color-coded severity levels (green/yellow/red)
- Visual grouping of related assessments
- Professional moderation workflow UI
-->
<style>
/* ========================================
CONTENT MODERATION DASHBOARD STYLES
======================================== */
/* Main container */
.moderation-dashboard {
max-width: 100%;
margin: 0 auto;
}
/* Warning banner at top */
.moderation-header {
background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
border: 2px solid #f59e0b;
border-radius: 8px;
padding: 12px 20px;
margin-bottom: 20px;
display: flex;
align-items: center;
justify-content: space-between;
}
.moderation-header-left {
display: flex;
align-items: center;
gap: 12px;
}
.warning-icon {
font-size: 24px;
color: #d97706;
}
.moderation-title {
font-weight: 700;
font-size: 16px;
color: #92400e;
margin: 0;
}
.content-id {
font-size: 13px;
color: #b45309;
font-family: monospace;
}
/* Metadata toggle button */
.metadata-toggle {
background: #fff;
border: 1px solid #d97706;
border-radius: 6px;
padding: 6px 12px;
font-size: 12px;
color: #92400e;
cursor: pointer;
transition: all 0.2s;
}
.metadata-toggle:hover {
background: #fef3c7;
}
/* Section styling */
.moderation-section {
background: #f8fafc;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
}
.section-title {
font-size: 13px;
font-weight: 600;
color: #475569;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 16px;
padding-bottom: 8px;
border-bottom: 2px solid #64748b;
}
/* 2-column violation grid */
.violation-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
@media (max-width: 768px) {
.violation-grid {
grid-template-columns: 1fr;
}
}
/* Individual violation card */
.violation-card {
background: #ffffff;
border: 1px solid #e2e8f0;
border-radius: 8px;
padding: 14px;
}
.violation-card-title {
font-size: 14px;
font-weight: 600;
color: #334155;
margin-bottom: 12px;
display: flex;
align-items: center;
gap: 8px;
}
.violation-icon {
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 4px;
font-size: 12px;
}
.icon-violence { background: #fee2e2; color: #dc2626; }
.icon-adult { background: #fce7f3; color: #db2777; }
.icon-hate { background: #fef3c7; color: #d97706; }
.icon-misinfo { background: #dbeafe; color: #2563eb; }
/* Severity radio buttons - horizontal with color coding */
.severity-options {
display: flex;
gap: 8px;
}
.severity-option {
flex: 1;
position: relative;
}
.severity-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.severity-label {
display: block;
text-align: center;
padding: 10px 8px;
border-radius: 6px;
font-size: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
}
/* None - Green */
.severity-none .severity-label {
background: #dcfce7;
color: #166534;
border-color: #bbf7d0;
}
.severity-none input:checked + .severity-label {
background: #22c55e;
color: white;
border-color: #16a34a;
box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}
.severity-none:hover .severity-label {
border-color: #22c55e;
}
/* Mild - Yellow/Orange */
.severity-mild .severity-label {
background: #fef3c7;
color: #92400e;
border-color: #fde68a;
}
.severity-mild input:checked + .severity-label {
background: #f59e0b;
color: white;
border-color: #d97706;
box-shadow: 0 2px 4px rgba(245, 158, 11, 0.3);
}
.severity-mild:hover .severity-label {
border-color: #f59e0b;
}
/* Severe - Red */
.severity-severe .severity-label {
background: #fee2e2;
color: #991b1b;
border-color: #fecaca;
}
.severity-severe input:checked + .severity-label {
background: #ef4444;
color: white;
border-color: #dc2626;
box-shadow: 0 2px 4px rgba(239, 68, 68, 0.3);
}
.severity-severe:hover .severity-label {
border-color: #ef4444;
}
/* Decision section */
.decision-section {
background: #f1f5f9;
border: 2px solid #cbd5e1;
}
.decision-section .section-title {
border-bottom-color: #3b82f6;
color: #1e40af;
}
.decision-options {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.decision-option {
flex: 1;
min-width: 140px;
position: relative;
}
.decision-option input[type="radio"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.decision-label {
display: block;
text-align: center;
padding: 14px 16px;
border-radius: 8px;
font-size: 14px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
border: 2px solid transparent;
}
/* Approve - Green */
.decision-approve .decision-label {
background: #dcfce7;
color: #166534;
border-color: #bbf7d0;
}
.decision-approve input:checked + .decision-label {
background: #22c55e;
color: white;
border-color: #16a34a;
box-shadow: 0 4px 6px rgba(34, 197, 94, 0.3);
transform: translateY(-1px);
}
.decision-approve:hover .decision-label {
border-color: #22c55e;
}
/* Flag for Review - Yellow */
.decision-flag .decision-label {
background: #fef3c7;
color: #92400e;
border-color: #fde68a;
}
.decision-flag input:checked + .decision-label {
background: #f59e0b;
color: white;
border-color: #d97706;
box-shadow: 0 4px 6px rgba(245, 158, 11, 0.3);
transform: translateY(-1px);
}
.decision-flag:hover .decision-label {
border-color: #f59e0b;
}
/* Remove - Red */
.decision-remove .decision-label {
background: #fee2e2;
color: #991b1b;
border-color: #fecaca;
}
.decision-remove input:checked + .decision-label {
background: #ef4444;
color: white;
border-color: #dc2626;
box-shadow: 0 4px 6px rgba(239, 68, 68, 0.3);
transform: translateY(-1px);
}
.decision-remove:hover .decision-label {
border-color: #ef4444;
}
/* Notes section */
.notes-section textarea {
width: 100%;
border: 1px solid #e2e8f0;
border-radius: 6px;
padding: 12px;
font-size: 14px;
resize: vertical;
min-height: 80px;
}
.notes-section textarea:focus {
outline: none;
border-color: #3b82f6;
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}
/* Hide default form styling */
.moderation-dashboard .annotation-form {
margin: 0;
padding: 0;
}
.moderation-dashboard fieldset {
border: none;
margin: 0;
padding: 0;
}
.moderation-dashboard legend {
display: none;
}
</style>
<div class="annotation_schema moderation-dashboard">
<!-- Warning Banner Header -->
<div class="moderation-header">
<div class="moderation-header-left">
<span class="warning-icon">&#x26A0;</span>
<div>
<h3 class="moderation-title">CONTENT REVIEW</h3>
<div class="content-id">Review pending content for policy compliance</div>
</div>
</div>
</div>
<!-- Violation Assessment Section -->
<div class="moderation-section">
<div class="section-title">Violation Assessment</div>
<div class="violation-grid">
<!-- Violence/Gore Card -->
<div class="violation-card">
<div class="violation-card-title">
<span class="violation-icon icon-violence">&#x2620;</span>
Violence / Gore
</div>
<form id="violence" class="annotation-form radio" action="/action_page.php" data-annotation-id="0">
<fieldset schema="violence">
<legend>Violence severity</legend>
<div class="severity-options">
<div class="severity-option severity-none">
<input class="violence annotation-input" type="radio"
id="violence_none" name="violence" value="none"
selection_constraint="single" schema="violence" label_name="none"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="violence_none" class="severity-label">None</label>
</div>
<div class="severity-option severity-mild">
<input class="violence annotation-input" type="radio"
id="violence_mild" name="violence" value="mild"
selection_constraint="single" schema="violence" label_name="mild"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="violence_mild" class="severity-label">Mild</label>
</div>
<div class="severity-option severity-severe">
<input class="violence annotation-input" type="radio"
id="violence_severe" name="violence" value="severe"
selection_constraint="single" schema="violence" label_name="severe"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="violence_severe" class="severity-label">Severe</label>
</div>
</div>
</fieldset>
</form>
</div>
<!-- Adult Content Card -->
<div class="violation-card">
<div class="violation-card-title">
<span class="violation-icon icon-adult">&#x2665;</span>
Adult Content
</div>
<form id="adult_content" class="annotation-form radio" action="/action_page.php" data-annotation-id="1">
<fieldset schema="adult_content">
<legend>Adult content severity</legend>
<div class="severity-options">
<div class="severity-option severity-none">
<input class="adult_content annotation-input" type="radio"
id="adult_content_none" name="adult_content" value="none"
selection_constraint="single" schema="adult_content" label_name="none"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="adult_content_none" class="severity-label">None</label>
</div>
<div class="severity-option severity-mild">
<input class="adult_content annotation-input" type="radio"
id="adult_content_mild" name="adult_content" value="mild"
selection_constraint="single" schema="adult_content" label_name="mild"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="adult_content_mild" class="severity-label">Mild</label>
</div>
<div class="severity-option severity-severe">
<input class="adult_content annotation-input" type="radio"
id="adult_content_severe" name="adult_content" value="severe"
selection_constraint="single" schema="adult_content" label_name="severe"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="adult_content_severe" class="severity-label">Severe</label>
</div>
</div>
</fieldset>
</form>
</div>
<!-- Hate Speech Card -->
<div class="violation-card">
<div class="violation-card-title">
<span class="violation-icon icon-hate">&#x2718;</span>
Hate Speech
</div>
<form id="hate_speech" class="annotation-form radio" action="/action_page.php" data-annotation-id="2">
<fieldset schema="hate_speech">
<legend>Hate speech severity</legend>
<div class="severity-options">
<div class="severity-option severity-none">
<input class="hate_speech annotation-input" type="radio"
id="hate_speech_none" name="hate_speech" value="none"
selection_constraint="single" schema="hate_speech" label_name="none"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="hate_speech_none" class="severity-label">None</label>
</div>
<div class="severity-option severity-mild">
<input class="hate_speech annotation-input" type="radio"
id="hate_speech_mild" name="hate_speech" value="mild"
selection_constraint="single" schema="hate_speech" label_name="mild"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="hate_speech_mild" class="severity-label">Mild</label>
</div>
<div class="severity-option severity-severe">
<input class="hate_speech annotation-input" type="radio"
id="hate_speech_severe" name="hate_speech" value="severe"
selection_constraint="single" schema="hate_speech" label_name="severe"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="hate_speech_severe" class="severity-label">Severe</label>
</div>
</div>
</fieldset>
</form>
</div>
<!-- Misinformation Card -->
<div class="violation-card">
<div class="violation-card-title">
<span class="violation-icon icon-misinfo">&#x2139;</span>
Misinformation
</div>
<form id="misinformation" class="annotation-form radio" action="/action_page.php" data-annotation-id="3">
<fieldset schema="misinformation">
<legend>Misinformation severity</legend>
<div class="severity-options">
<div class="severity-option severity-none">
<input class="misinformation annotation-input" type="radio"
id="misinformation_none" name="misinformation" value="none"
selection_constraint="single" schema="misinformation" label_name="none"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="misinformation_none" class="severity-label">None</label>
</div>
<div class="severity-option severity-mild">
<input class="misinformation annotation-input" type="radio"
id="misinformation_mild" name="misinformation" value="mild"
selection_constraint="single" schema="misinformation" label_name="mild"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="misinformation_mild" class="severity-label">Mild</label>
</div>
<div class="severity-option severity-severe">
<input class="misinformation annotation-input" type="radio"
id="misinformation_severe" name="misinformation" value="severe"
selection_constraint="single" schema="misinformation" label_name="severe"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="misinformation_severe" class="severity-label">Severe</label>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
<!-- Final Decision Section -->
<div class="moderation-section decision-section">
<div class="section-title">Final Decision</div>
<form id="decision" class="annotation-form radio" action="/action_page.php" data-annotation-id="4">
<fieldset schema="decision">
<legend>Final moderation decision</legend>
<div class="decision-options">
<div class="decision-option decision-approve">
<input class="decision annotation-input" type="radio"
id="decision_approve" name="decision" value="approve"
selection_constraint="single" schema="decision" label_name="approve"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="decision_approve" class="decision-label">&#x2713; Approve</label>
</div>
<div class="decision-option decision-flag">
<input class="decision annotation-input" type="radio"
id="decision_flag_review" name="decision" value="flag_review"
selection_constraint="single" schema="decision" label_name="flag_review"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="decision_flag_review" class="decision-label">&#x2691; Flag for Review</label>
</div>
<div class="decision-option decision-remove">
<input class="decision annotation-input" type="radio"
id="decision_remove" name="decision" value="remove"
selection_constraint="single" schema="decision" label_name="remove"
onclick="onlyOne(this);registerAnnotation(this);">
<label for="decision_remove" class="decision-label">&#x2717; Remove</label>
</div>
</div>
</fieldset>
</form>
</div>
<!-- Notes Section -->
<div class="moderation-section notes-section">
<div class="section-title">Moderator Notes</div>
<form id="moderator_notes" class="annotation-form text" action="/action_page.php" data-annotation-id="5">
<fieldset schema="moderator_notes">
<legend>Additional notes</legend>
<textarea class="moderator_notes annotation-input"
id="moderator_notes_textarea"
name="moderator_notes"
schema="moderator_notes"
label_name="notes"
rows="3"
placeholder="Document reasoning, edge cases, or additional context for the moderation log..."
oninput="registerTextAnnotation(this);"></textarea>
</fieldset>
</form>
</div>
</div>