社交媒体前端的 AI 内容审核：UGC 组件和用户输入的实时安全审查
在社交媒体平台中，用户生成内容（UGC）的数量级通常达到每日百万甚至千万级别。传统的基于关键词匹配和正则规则的内容审核方案，在语义理解、上下文关联和多模态内容检测上存在明显短板。将 AI 能力嵌入前端审核链路，可以在用户提交内容的第一时间完成初筛，降低后端压力，同时提升审核时效。
一、前端 AI 审核的架构定位
前端审核的核心职责不是取代后端审核，而是在用户提交瞬间完成"第一道防线"的拦截。合理的职责划分如下：
前端侧（浏览器端）：文本敏感词实时高亮、图片违规预筛、提交前的合规校验。
BFF 层：调用 AI 模型 API 做粗筛，返回风险等级（safe / review / blocked）。
后端审核中台：人工复核 + 精细化模型推理（大模型 + 多模态）。
三级审核链路的整体流程如下：
二、文本内容的实时安全审查
文本审核是最基础也是最复杂的场景。一个可靠的方案需要处理谐音、拆字、拼音混淆、上下文语义等多维攻击手段。
2.1 核心实现
/**
* 文本内容安全审查器
* 支持敏感词匹配 + 语义风险检测
*/
interface AuditResult {
passed: boolean;
riskLevel: 'safe' | 'review' | 'blocked';
matchedWords: string[];
suggestion: string;
}
interface AuditOptions {
/** 最大文本长度限制 */
maxLength: number;
/** 是否启用语义分析 */
enableSemantic?: boolean;
/** 自定义敏感词库 */
customWords?: string[];
}
class TextAuditor {
// 基础敏感词库（生产环境应从远程配置中心获取）
private sensitiveWords: Set<string>;
// 语义分析 API 端点
private semanticEndpoint: string;
// 请求超时时间（毫秒）
private timeout: number;
constructor(sensitiveWords: string[] = [], semanticEndpoint: string = '/api/audit/text', timeout: number = 5000) {
this.sensitiveWords = new Set(sensitiveWords.map(w => w.toLowerCase()));
this.semanticEndpoint = semanticEndpoint;
this.timeout = timeout;
}
/**
* 本地敏感词快速检测
* 支持谐音变体匹配（基础版本）
*/
private localMatch(text: string): string[] {
const normalized = text.toLowerCase().replace(/\\s+/g, '');
const matched: string[] = [];
this.sensitiveWords.forEach(word => {
if (normalized.includes(word)) {
matched.push(word);
}
});
return matched;
}
/**
* 完整的文本审核流程
*/
async audit(text: string, options: AuditOptions): Promise<AuditResult> {
// 1. 空内容检查
if (!text || text.trim().length === 0) {
return {
passed: false,
riskLevel: 'blocked',
matchedWords: [],
suggestion: '内容不能为空',
};
}
// 2. 长度校验
if (text.length > options.maxLength) {
return {
passed: false,
riskLevel: 'blocked',
matchedWords: [],
suggestion: `内容超过最大限制 ${options.maxLength} 字符`,
};
}
// 3. 本地敏感词匹配
const localMatched = this.localMatch(text);
if (localMatched.length > 0) {
return {
passed: false,
riskLevel: 'blocked',
matchedWords: localMatched,
suggestion: '内容包含不当信息，请修改后重新提交',
};
}
// 4. 远程语义审核（可选）
if (options.enableSemantic) {
try {
const semanticResult = await this.remoteAudit(text);
if (semanticResult.riskLevel === 'blocked') {
return semanticResult;
}
if (semanticResult.riskLevel === 'review') {
return semanticResult;
}
} catch (error) {
// 远程审核失败时，降级为仅本地审核结果
console.warn('[TextAuditor] 远程审核服务不可用，降级为本地审核', error);
}
}
return {
passed: true,
riskLevel: 'safe',
matchedWords: [],
suggestion: '',
};
}
/**
* 调用远程审核服务
*/
private async remoteAudit(text: string): Promise<AuditResult> {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), this.timeout);
try {
const response = await fetch(this.semanticEndpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text, scene: 'social_media_comment' }),
signal: controller.signal,
});
if (!response.ok) {
throw new Error(`审核服务返回异常状态: ${response.status}`);
}
return await response.json();
} finally {
clearTimeout(timeoutId);
}
}
}
2.2 输入框实时检测
对于用户输入框，推荐使用防抖策略降低检测频率，避免影响输入体验：
/**
* 创建输入框实时检测监听器
*/
function createInputAuditor(auditor: TextAuditor) {
let debounceTimer: ReturnType<typeof setTimeout> | null = null;
const DEBOUNCE_DELAY = 500; // 用户停止输入 500ms 后触发检测
return function setupInputListener(inputElement: HTMLInputElement | HTMLTextAreaElement) {
const handleInput = () => {
if (debounceTimer) {
clearTimeout(debounceTimer);
}
debounceTimer = setTimeout(async () => {
const text = inputElement.value;
if (text.length < 2) return; // 过短内容跳过检测
const result = await auditor.audit(text, {
maxLength: 5000,
enableSemantic: text.length > 50, // 长文本才启用语义检测
});
if (result.riskLevel === 'blocked') {
// 在输入框下方展示警告提示
dispatchWarningEvent(result);
}
}, DEBOUNCE_DELAY);
};
inputElement.addEventListener('input', handleInput);
return () => inputElement.removeEventListener('input', handleInput);
};
}
三、图片与多模态内容的审核
图片审核通常无法完全在浏览器端完成（模型体积限制），但可以通过前端提取特征信息辅助决策。
3.1 图片上传前预检
/**
* 图片上传前置检查器
* 在用户选择图片后立即进行格式、尺寸、EXIF 等基础检查
*/
interface ImagePreCheckResult {
valid: boolean;
reason?: string;
dimensions?: { width: number; height: number };
fileSize?: number;
}
async function preCheckImage(file: File): Promise<ImagePreCheckResult> {
// 1. 文件类型白名单
const allowedTypes = ['image/jpeg', 'image/png', 'image/webp', 'image/gif'];
if (!allowedTypes.includes(file.type)) {
return { valid: false, reason: '仅支持 JPEG、PNG、WebP、GIF 格式' };
}
// 2. 文件大小限制（10MB）
const maxSize = 10 * 1024 * 1024;
if (file.size > maxSize) {
return { valid: false, reason: '图片大小不能超过 10MB' };
}
// 3. 读取图片尺寸
const dimensions = await getImageDimensions(file);
if (dimensions.width < 50 || dimensions.height < 50) {
return { valid: false, reason: '图片尺寸过小，最小支持 50×50 像素' };
}
return { valid: true, dimensions, fileSize: file.size };
}
function getImageDimensions(file: File): Promise<{ width: number; height: number }> {
return new Promise((resolve, reject) => {
const img = new Image();
const url = URL.createObjectURL(file);
img.onload = () => {
URL.revokeObjectURL(url);
resolve({ width: img.naturalWidth, height: img.naturalHeight });
};
img.onerror = () => {
URL.revokeObjectURL(url);
reject(new Error('图片加载失败，可能文件已损坏'));
};
img.src = url;
});
}
3.2 远程图片审核的请求编排
/**
* 图片远程审核，包含重试和超时控制
*/
async function auditImage(file: File, options: {
maxRetries?: number;
endpoint?: string;
} = {}): Promise<AuditResult> {
const { maxRetries = 2, endpoint = '/api/audit/image' } = options;
const formData = new FormData();
formData.append('image', file);
formData.append('scene', 'ugc_upload');
for (let attempt = 0; attempt <= maxRetries; attempt++) {
try {
const controller = new AbortController();
const timeoutId = setTimeout(() => controller.abort(), 15000);
const response = await fetch(endpoint, {
method: 'POST',
body: formData,
signal: controller.signal,
});
clearTimeout(timeoutId);
if (!response.ok) {
throw new Error(`HTTP ${response.status}`);
}
return await response.json();
} catch (error) {
// 最后一次尝试失败，返回降级结果
if (attempt === maxRetries) {
console.error('[ImageAuditor] 审核请求全部失败', error);
return {
passed: false,
riskLevel: 'review',
matchedWords: [],
suggestion: '图片审核服务暂时不可用，已转为人工审核',
};
}
// 指数退避重试
await new Promise(resolve => setTimeout(resolve, 1000 * Math.pow(2, attempt)));
}
}
// 理论上不会到达这里，但 TypeScript 需要明确返回
return {
passed: false,
riskLevel: 'review',
matchedWords: [],
suggestion: '审核超时',
};
}
四、审核组件的集成设计
将审核能力封装为独立的 UGC 组件，可以统一管理所有用户输入场景的审核逻辑。
/**
* 审核结果总线
* 统一管理所有审核组件的状态和回调
*/
type AuditCallback = (result: AuditResult & { componentId: string }) => void;
class AuditEventBus {
private listeners: Map<string, Set<AuditCallback>> = new Map();
on(event: string, callback: AuditCallback): () => void {
if (!this.listeners.has(event)) {
this.listeners.set(event, new Set());
}
this.listeners.get(event)!.add(callback);
// 返回取消订阅函数
return () => {
this.listeners.get(event)?.delete(callback);
};
}
emit(event: string, result: AuditResult & { componentId: string }): void {
this.listeners.get(event)?.forEach(cb => {
try {
cb(result);
} catch (error) {
console.error(`[AuditEventBus] 回调执行异常: ${event}`, error);
}
});
}
}
五、总结
前端 AI 内容审核的核心价值在于"第一时间拦截"，它不能取代后端审核，但能将大部分违规内容在源头阻断。实际落地的几个关键点：
审核策略的最终目标不是"拦截所有内容"，而是在安全底线与用户体验之间找到合理的平衡点。生产实践中，建议将审核规则配置化，支持运营人员在不发版的情况下调整敏感词库和风险阈值。
