miyakejima/boundary-lock-studio

# Boundary Lock Studio **本地 · 确定性 · 无 AI** 一个基于浏览器的工具室，用于构建像素级完美的 X (Twitter) 个人资料图片和横幅，使其在桌面端和 Android 上都能完美对齐。所有操作都在你的机器上运行。没有上传。没有 API 调用。没有生成式 AI。 ## 截图 **完整的工作室 UI —— 源面板、实时预览、优先级和延续控制**  **桌面端 Web 预览 —— 1500 × 500 横幅，带有 400 × 400 个人资料覆盖**  **Android 应用预览 —— 针对 X Android 12.2 验证的像素级精确头像位置**  ## 为什么开发这个工具 X 的桌面端和 Android 应用将头像圆圈放置在横幅上稍微不同的位置。一个在桌面端看起来对齐的横幅，在 Android 上可能会显示出不匹配的裁剪 —— 反之亦然。Boundary Lock Studio 使用经过 X Android APK 验证的几何结构（Jetpack Compose 布局常量、dp 到像素的转换，以及 JPEG 上传扁平化行为）同时渲染两个预览，因此你可以在上传任何内容之前看到确切的结果。 ## 快速开始 **无需 npm install。无需构建步骤。** 只需双击 `launch.bat`。 ``` launch.bat ``` 启动器会自动检测 Python 或 Node.js，选择一个可用端口，并在你的浏览器中打开工作室。使用该工具时请保持终端窗口打开。 **要求：** Python 3 _或_ Node.js —— 任意一个即可。 ## 工作流程 ### 设置个人资料 → 构建横幅 *（推荐）* 镜像原生 X 个人资料图片流程： 1. 点击 **选择个人资料图片** 并选择一张图像。 2. 在 X 风格的方形裁剪窗口内重新定位并缩放图像。 3. 点击 **应用** —— 个人资料被锁定。 4. 1500 × 500 横幅会根据锁定的裁剪自动重建。 5. 导出两个文件。 锁定的个人资料定义了一个单一的全局源变换。它会均匀地应用于每一个横幅像素 —— 没有独立的横幅裁剪、圆形校正、混合或局部扭曲。如果该变换没有覆盖整个横幅区域，工作室会报告间隙，并使用所选的背景色填充。 ### 横幅 → 个人资料 *（原始模式）* 对于从横幅开始的项目： 1. 选择 **横幅 → 个人资料**。 2. 上传横幅并使用横幅工具进行调整。 3. 选择桌面端、Android 或共享布局。 4. 导出生成的个人资料和调整后的横幅。 ## 布局模式 | 模式 | 描述 | |---|---| | **最佳共享** *(推荐)* | 一种折中的对齐方式，在桌面端和 Android 上都能获得可接受的效果 | | **移动端完美** | 精确瞄准 Android 布局；桌面端可能略有偏差 | | **桌面端精确** | 精确瞄准桌面端布局；Android 可能略有偏差 | 桌面端和 Android 优先级控制可在“横幅 → 个人资料”模式下使用。它们在“设置个人资料”模式下被隐藏，以便编辑器表现得像原生的 X 流程。 ## 输出 | 文件 | 尺寸 | 格式 | |---|---|---| | 个人资料图片 | 400 × 400 | PNG | | 横幅 | 1500 × 500 | PNG | 导出的文件使用上传的源文件名，后跟 `-profile.png` 和 `-banner.png`。 ## 缺失区域延续 当源图像没有覆盖整个横幅宽度时，工作室可以通过检测穿过边界的直线特征（线条、边框、几何形状）并将其延伸到未覆盖区域，来推断横幅边缘。检测灵敏度是可调的。 ## Android 几何结构 Android 预览使用从 X Android Jetpack Compose 个人资料头部（`com.x.profile.header` / `UserProfileHeaderUi.kt`）提取的布局常量，并已针对以下版本验证： - `12.1.1-release.0` (`versionCode 312011000`) - `12.2.0-release.0` (`versionCode 312020000`) 活动常量（X 12.2 Compose 路径）： | 属性 | 值 | |---|---| | 横幅纵横比 | 3.0 | | 头像图像尺寸 | 80 dp | | 个人资料水平内边距 | 12 dp | | 横幅下方布局预留 | 60 dp | | 可见的头像重叠 | 28 dp | 有关完整的几何推导、像素级验证结果和版本控制说明，请参阅 [`ANDROID_REVERSE_ENGINEERING.md`](ANDROID_REVERSE_ENGINEERING.md)。 ## 自动化测试 安装 Node.js 后： ``` node core.test.mjs ``` 测试套件涵盖：个人资料锁定、安全取消、仅应用个人资料替换、自动横幅重建、全圆源所有权，以及原始的横幅衍生渲染路径。 附加集成测试： ``` node shared-mode-test.mjs node desktop-priority-shared-test.mjs node joint-adjustment-test.mjs node test-pair-aware.mjs node warp-test.mjs ``` ## 项目结构 ``` boundary-lock-studio/ ├── index.html # Studio web interface ├── app.js # UI application logic ├── core.js # Geometry engine and canvas rendering ├── styles.css # UI styles ├── server.js # Minimal Node.js static server ├── launch.bat # Windows one-click launcher (Python or Node.js) ├── core.test.mjs # Main unit test suite ├── shared-mode-test.mjs # Best Shared mode integration tests ├── desktop-priority-shared-test.mjs # Desktop priority integration tests ├── joint-adjustment-test.mjs # Multi-pass adjustment tests ├── test-pair-aware.mjs # Pair-aware banner integration tests ├── warp-test.mjs # Coordinate warp tests ├── weight-sweep.mjs # Parameter sweep diagnostic ├── overlap-analysis.mjs # Boundary overlap diagnostic ├── ANDROID_REVERSE_ENGINEERING.md # Android geometry derivation and verification ├── VERIFICATION.md # Implementation evidence and QA log └── docs/screenshots/ # UI screenshots ``` ## 许可证 ISC

标签：MITM代理, UI设计, X/Twitter, 像素级布局, 前端工具, 图像处理, 多模态安全, 数据可视化, 本地工具, 自定义脚本, 逆向工具