MOSS-Image Layout Editor

MOSS-Image Layout Editor

在浏览器里画出文字框、物体框和角色框的布局，并从中导出 MOSS-Image 提示词。适合手动搭建 MOSS-Image 草稿的人。

由 ferry309 在 Hugging Face 上制作。这些说明是 Mindket 根据它的 Space 页面和 README 写的，应用自己的文件和许可证在 Hugging Face 上。

简介

它是什么：这是一个在网页里运行的 MOSS-Image 草稿提示词可视化编辑器。官方 MOSS-Image 仓库里有 compile_prompt.py，可以把布局草稿转换成提示词。在这个编辑器出现之前，没有可视化工具来制作这份草稿。现在你可以改为在画布上摆放框。

适合谁：用 MOSS-Image 生成图片、想先规划文字、物体和角色放在哪里的人，也适合想把现有设计描下来作为起点的设计师。

行业 | 使用者 | 使用方式 | 例子
设计 | 视觉设计师 | 在生成之前先排好文字和物体 | 在画布上放一个标题框和一个角色框
营销 | 内容创作者 | 用确切的文字规划海报或横幅 | 为每个框输入确切的文字
软件 | 图像工作流开发者 | 不用手写就能得到布局 JSON | 导出 JSON，交给自己的工作流

如果你不用 MOSS-Image，可以跳过它。

用在哪里：这个编辑器可以在这些地方使用：

• 网页浏览器：打开 Hugging Face 上的 Space 页面直接使用。
• Windows、macOS 或 Linux：下载文件，在浏览器里打开 index.html。
• 你自己的 MOSS-Image 工作流，在那里粘贴编辑器给你的提示词。

Use case | Who | What they get back
搭建布局草稿 | 设计师 | 你画出的框对应的布局 JSON
复制提示词 | 做图的人 | 与官方脚本给出的结果一致的提示词
描摹设计 | 设计师 | 框后面一张可以描摹的图片

如何设置：在线使用不需要任何准备。要用本地副本，你需要这几样：

• 带 pip 的 Python，用来取文件
• huggingface_hub 包，第一条命令会安装它
• 一个网页浏览器

这些步骤会下载 Space，然后手动打开它的主页。

1. 安装 Hugging Face 包。
2. 把 Space 下载到名为 moss-image-layout-editor 的文件夹。
3. 进入这个文件夹。
4. 在网页浏览器里打开 index.html。

pip install -U huggingface_hub
hf download ferry309/moss-image-layout-editor --repo-type space --local-dir moss-image-layout-editor
cd moss-image-layout-editor

如何使用：打开页面，画出你的框，填写每一项，然后导出布局 JSON 并复制提示词。界面有英文和中文两种，四个内置示例可以作为起点。

Tool | What it does
画布框 | 放置文字框、物体框和角色框，然后移动或调整大小
条目字段 | 为每个框设置说明、确切文字、元标签和配色
参考图层 | 在框下面显示一张图片供描摹，只保存在你的浏览器里
导出 | 给出布局 JSON 和一份可复制的提示词

示例：你选一个内置示例，移动框来适应你的想法，并修改其中一个框的确切文字。最后，把复制的提示词带到你自己的 MOSS-Image 环境里，图片在那里生成。

新手与专家：如果你是新手，先打开页面，选一个内置示例，拖动一个框试试。什么都不会上传，所以可以放心尝试。布局看起来对了再导出。

如果你熟悉这个领域：编辑器的目标是对同一份布局给出与 compile_prompt.py 一致的结果，这样提示词就能配合官方项目使用。页面自己不生成任何东西。它只是草稿的前端，参考图也不会成为提示词的一部分。

你在画布上画框
你填写文字、说明、标签和配色
你导出布局 JSON
你把提示词复制到 MOSS-Image

注意事项：编辑器只构建草稿和提示词，不生成图片。

• License: apache-2，按 Space 所列。
• Cost to run: 未提及。它不需要生成服务、上传或账号。
• Data it reaches: 没有任何内容离开你的浏览器。你添加的参考图只留在浏览器里。
• Not for: 生成图片。生成需要把提示词粘贴到你自己的 MOSS-Image 工作流。

Hugging Face 上的数据（2026年11月13日）

• 点赞：1
• 构建方式：static
• 许可证：apache-2.0

链接

• Space：https://huggingface.co/spaces/ferry309/moss-image-layout-editor
• 文件：https://huggingface.co/spaces/ferry309/moss-image-layout-editor/tree/main

试用

在浏览器里打开这个 Space，或在它的页面上把它复制到你自己的 Hugging Face 账号。这个工具包里没有会自己运行的东西。