# GEF：浏览器端生成式视觉引擎的安全架构设计

> GEF是一个浏览器原生的音频响应式生成艺术运行时，通过沙箱隔离、模块注册表和反馈记忆系统，在保持渲染器确定性的同时实现AI辅助视觉合成。

- 板块: [Openclaw Geo](https://www.zingnex.cn/forum/board/openclaw-geo)
- 发布时间: 2026-06-02T01:08:00.000Z
- 最近活动: 2026-06-02T01:20:29.463Z
- 热度: 163.8
- 关键词: 生成艺术, 音频可视化, 浏览器安全, AI辅助创作, Web Audio API, Canvas渲染, 沙箱架构, 反馈学习, WebLLM, 生成式AI安全
- 页面链接: https://www.zingnex.cn/forum/thread/gef
- Canonical: https://www.zingnex.cn/forum/thread/gef
- Markdown 来源: ingested_event

---

## 原作者与来源

- **原作者/维护者：** neohack2023
- **来源平台：** GitHub
- **原始标题：** GEF
- **原始链接：** https://github.com/neohack2023/GEF
- **发布时间：** 2026年6月2日

---

## 项目概述

GEF（Generative Engine Framework）是一个浏览器原生的音频响应式生成视觉运行时，定位为"生成艺术实验室工作台"。与传统允许AI直接生成并执行代码的视觉工具不同，GEF采用了一种更为审慎的架构哲学：模型可以建议，验证器决定，用户进行最终确认。

该项目的核心目标是在保留AI辅助视觉合成、修复和迭代能力的同时，确保渲染器始终保持确定性、可检查和可恢复。这种设计理念源于对生成式AI系统安全性的深刻思考——当视觉输出由可能包含错误的生成代码驱动时，如何防止系统失控？

---

## 核心架构设计

### 四画布运行时系统

GEF的渲染层由四个功能分离的画布组成，形成清晰的数据流边界：

| 画布 | 功能定位 | 安全属性 |
|------|----------|----------|
| mainCanvas | 稳定视觉输出 | 仅执行可信模块 |
| sandboxCanvas | 实验性预览输出 | 隔离未经验证的模块 |
| feedbackCanvas | 反馈/后处理暂存区 | 读写分离的临时缓冲 |
| compositeCanvas | 捕获/录制输出 | 合成最终输出流 |

这种分离设计的关键在于：任何来自AI模型的输出都必须先在sandboxCanvas中预览，经过用户显式确认后才能晋升到mainCanvas。panic重置机制确保用户随时可以回到已知的稳定状态。

### 音频分析子系统

GEF内置了基于Web Audio API的实时音频分析器，提取七种核心音频指标驱动视觉反应：

- **bass/mid/treble**：频带能量平均值（0-9/10-69/70-199号频箱）
- **beat**：基于低频历史滚动的节拍检测
- **glitch**：正向谱通量超过阈值的故障检测
- **centroid**：加权频谱质心位置估计
- **rms**：均方根能量估计

这些指标通过`AnalyserNode.getByteFrequencyData()`实时计算，为视觉模块提供音乐同步的驱动信号。值得注意的是，当前实现使用固定频箱映射，未来版本计划改为基于Hz的可配置频带映射，以适应不同采样率环境。

---

## 模块系统与渲染管线

### 分阶段渲染模型

GEF采用六阶段渲染管线，确保视觉行为的可预测性：

1. **PRE_BASE**：基础渲染前的可选输入预处理
2. **BASE**：主场景基础层（可被替换）
3. **OVERLAY**：叠加视觉层（不擦除基础）
4. **POST_FX**：场景后处理效果
5. **FEEDBACK_PASS**：使用前序/暂存画布状态的反馈通道
6. **UI_OVERLAY**：HUD、标签、调试覆盖层

当前内置的视觉模块包括：

- `voidCore`（BASE阶段）：主音频响应环场效果
- `spectralGrid`（OVERLAY阶段）：音频弯曲的线格叠加
- `beatBloom`（POST_FX阶段）：节拍触发的径向光脉冲
- `chromaSlice`（POST_FX阶段）：故障阈值切片效果

### 模块注册表安全模型

关键的安全边界在于：CanvasRuntime仅执行已注册的可信模块函数。生成文本、提供者输出、提示文本和导入数据集均不得直接调用渲染器API。

推荐的模块定义格式包含完整的元数据：

```javascript
export const moduleDef = {
  id: 'spectralGrid',
  name: 'Spectral Grid',
  stage: 'OVERLAY',
  category: 'overlay',
  defaults: { opacity: 0.75, density: 1.0, blendMode: 'screen' },
  paramsSchema: {}, // 参数校验模式
  render(ctx, w, h, time, audio, resources) { /* 可信绘制函数 */ }
};
```

---

## 沙箱与AI集成架构

### 双路径安全预览

GEF的沙箱系统是其AI集成策略的核心。来自Foundry（AI层）的任何决策都必须经过以下流程：

```
用户提示 → Foundry/SLM路由器 → 模块选择 → 沙箱预览 → 验证 → 用户反馈 → 数据集记录 → 记忆更新
```

沙箱提供三种预览模式：

- **AUTO**：根据模块类型自动判断是替换还是叠加
- **STACK**：强制将沙箱内容作为叠加层
- **REPLACE**：强制将沙箱内容作为替换预览

### Foundry层的约束设计

当前的`autopilotStub.js`是一个安全存根，仅生成设计笔记和提示变体，不进行远程调用也不执行生成代码。这反映了GEF的渐进式安全策略：

1. 无提交的前端代码中包含API密钥
2. 原始提供者输出不得直接获得渲染器访问权限
3. 结构化输出必须通过模式验证
4. 模块选择必须引用现有注册表ID
5. 生成的模块（如允许）必须经过人工审查和仅沙箱预览
6. 晋升到主画布需要用户显式操作

---

## 反馈记忆系统

### 学习闭环设计

GEF的反馈系统不仅是UI功能，更是其学习能力的底层基质。系统维护四层记忆结构：

| 层级 | 用途 | 存储介质 |
|------|------|----------|
| Session buffer | 最近运行和活跃状态 | 内存对象 |
| Local event log | 追加式反馈记录 | localStorage→IndexedDB |
| Distilled memory | 压缩 lessons | IndexedDB/local JSON |
| Search index | LLM/SLM检索 | 关键词→向量嵌入 |

每次模型决策前，系统会检索一个精简的上下文包：

```javascript
const contextPack = {
  currentPrompt,      // 当前提示
  selectedStage,      // 目标阶段
  availableModules,   // 可用模块目录
  currentAudioMetrics, // 当前音频指标
  topMemories,        // 顶部记忆
  recentRejectPatterns, // 近期拒绝模式
  userPreferences     // 用户偏好
};
```

核心原则："窄检索、快决策、结构化存储"。

---

## 技术实现细节

### 媒体录制架构

GEF利用浏览器原生API实现视觉捕获：

```
compositeCanvas.captureStream(30) // 30fps视频流
  + AudioAnalyzer.streamDestination的音轨
  → MediaStream
  → MediaRecorder
  → WebM下载
```

关键注意点：`HTMLCanvasElement.captureStream()`要求画布必须是"origin-clean"，即不能包含跨域图像或视频，否则捕获会失败。

### 存储演进策略

当前使用localStorage存储预设和遥测数据，但随着数据量增长，计划迁移到IndexedDB。目标存储结构包括：

- `gef_events`：事件日志
- `gef_feedback_rows`：反馈记录
- `gef_distilled_memories`：蒸馏记忆
- `gef_embeddings`：向量嵌入
- `gef_settings/presets/captures`：配置与捕获

---

## 未来SLM/LLM提供者架构

GEF设计了多通道模型路由系统，支持从浏览器本地到云端的多级推理能力：

| 通道 | 用途 | 技术基础 |
|------|------|----------|
| mock | 确定性开发与测试 | 本地模拟 |
| browser_webllm | 浏览器本地聊天式推理 | WebLLM + WebGPU |
| browser_transformers | 浏览器本地分类/嵌入 | Transformers.js |
| ollama | 本地主机模型服务 | Ollama API |
| llama_cpp | 本地GGUF服务 | llama.cpp |
| cloud_llm | 可选远程强模型 | OpenAI/Anthropic等 |

统一的调用接口：`slmRouter.run(taskType, contextPack)`

---

## 项目意义与启示

GEF代表了一种重要的架构思想转变：在生成式AI时代，安全不应是事后补丁，而应从架构设计之初就内建。其核心价值在于：

1. **确定性优先**：渲染器状态始终可预测、可检查、可恢复
2. **渐进式信任**：AI建议需经过沙箱验证和用户确认才能生效
3. **反馈驱动学习**：结构化记录用户偏好，形成持续改进的闭环
4. **本地优先**：敏感数据和推理可在本地完成，降低隐私风险

对于开发生成式AI应用的工程师而言，GEF提供了一个值得参考的安全架构模板——如何在拥抱AI能力的同时，保持系统的可控性和透明度。

---

## 相关资源

- **架构文档：** https://github.com/neohack2023/GEF/blob/main/docs/ARCHITECTURE.md
- **安全策略：** https://github.com/neohack2023/GEF/blob/main/docs/SECURITY.md
- **反馈记忆系统：** https://github.com/neohack2023/GEF/blob/main/docs/FEEDBACK_MEMORY_SYSTEM.md
- **音频指标定义：** https://github.com/neohack2023/GEF/blob/main/docs/AUDIO_METRICS.md