[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-80837":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":9,"language":10,"languages":9,"totalLinesOfCode":9,"stars":11,"forks":12,"watchers":13,"openIssues":14,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":16,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":9,"rankLanguage":9,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":9,"pushedAt":9,"updatedAt":23,"readmeContent":24,"aiSummary":25,"trendingCount":15,"starSnapshotCount":15,"syncStatus":26,"lastSyncTime":27,"discoverSource":28},80837,"pinevex-renderer","whutdev\u002Fpinevex-renderer","whutdev","High-fidelity UI renderer for Roblox-style interface trees",null,"Python",37,4,36,3,0,1,42.7,"Apache License 2.0",false,"main",true,[],"2026-06-11 04:07:15","\u003Cdiv align=\"center\">\n\n# Pinevex Renderer\n\n**A high-fidelity UI renderer for Roblox-style interface trees**\n\n[![Python 3.12+](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002Fpython-3.12%2B-blue.svg)](https:\u002F\u002Fwww.python.org\u002Fdownloads\u002F)\n[![License: Apache 2.0](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-Apache%202.0-blue.svg)](LICENSE)\n\u003Ca href=\"https:\u002F\u002Fpinevex-renderer-demo.vercel.app\" target=\"_blank\" rel=\"noopener noreferrer\">\u003Cimg alt=\"Web Demo\" src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWeb%20Demo-Live-brightgreen.svg\">\u003C\u002Fa>\n\n\u003Cstrong>\u003Ca href=\"https:\u002F\u002Fpinevex-renderer-demo.vercel.app\" target=\"_blank\" rel=\"noopener noreferrer\">Test Pinevex Renderer with your own screengui RBXM in our web demo!\u003C\u002Fa>\u003C\u002Fstrong>\n\n![Pinevex Renderer rendering a Roblox-style RobuxShop UI](docs\u002Fassets\u002Frobuxshop-transparent-render.png)\n\nRendered by Pinevex Renderer\n\n![Pinevex Renderer rendering a Roblox-style SLS lobby UI](docs\u002Fassets\u002Fsls-lobby-transparent-render.png)\n\nRendered by Pinevex Renderer\n\n![Pinevex Renderer rendering a Roblox-style upgrade UI](docs\u002Fassets\u002Fupgrade-transparent-render.png)\n\nRendered by Pinevex Renderer\n\n![Pinevex Renderer rendering a Roblox-style HUD test UI](docs\u002Fassets\u002Fhudtest-vercel-render.png)\n\nRendered by Pinevex Renderer\n\n![Pinevex Renderer rendering RTL2PCParts from an RBXM file](docs\u002Fassets\u002Frtl2pcparts-transparent-render.png)\n\n_yes, pinevex renderer can render THIS! ( and almost anything! )_\n\n\u003C\u002Fdiv>\n\nPinevex Renderer is a CPU-only renderer that achieves near-parity with Roblox's internal UI engine for structured Roblox-style UI JSON.\n\nTry it in the live web demo: \u003Ca href=\"https:\u002F\u002Fpinevex-renderer-demo.vercel.app\" target=\"_blank\" rel=\"noopener noreferrer\">pinevex-renderer-demo.vercel.app\u003C\u002Fa>.\n\nThe web demo accepts Pinevex JSON directly or a binary ScreenGui `.rbxm`, which it parses into Pinevex JSON before rendering.\n\nThe project originally existed to generate AI synthetic training data: structured Roblox-style UI trees could be rendered into reference images for model training, reconstruction, and validation loops.\n\nIt takes a nested UI tree and produces PNG previews that are close enough to be useful for reconstruction, validation, and export workflows. The renderer handles scale\u002Foffset layout, nested hierarchy, text fitting, strokes, gradients, rounded corners, tiled textures, icon references, and optional Luau generation.\n\nIt also includes a Tk step-by-step paint debugger for inspecting each render operation with Left\u002FRight controls, plus hit-testing helpers for finding which UI objects overlap a region.\n\nThis repository is intentionally scoped to the renderer layer.\n\n## Why this exists\n\nScreenshot-to-editable-UI systems need more than image similarity. A generated result has to become structured, editable UI, then render back into something close to the original screenshot.\n\n## Roblox UI coverage\n\nThe renderer uses Roblox-native UI concepts and exports matching Luau instances where possible. It is not a complete reimplementation of every Studio property, but it covers the common surface used by game UI screenshots.\n\nSupported `GuiObject` classes:\n\n- `Frame`\n- `CanvasGroup`\n- `ScrollingFrame`\n- `TextLabel`\n- `TextButton`\n- `TextBox`\n- `ImageLabel`\n- `ImageButton`\n\nAccepted for layout\u002Fexport compatibility:\n\n- `ScreenGui`\n- `ViewportFrame`\n- `VideoFrame`\n\nSupported core `GuiObject` properties:\n\n- `Size` and `Position` as `UDim2` scale\u002Foffset values\n- `AnchorPoint`\n- `BackgroundColor3`\n- `BackgroundTransparency`\n- `BorderSizePixel`\n- `ZIndex`\n- `LayoutOrder`\n- `Visible`\n- `ClipsDescendants`\n- `Rotation`\n- `AutomaticSize`\n- `SizeConstraint`\n\nSupported Roblox UI instances and constraints:\n\n- [`UICorner`](https:\u002F\u002Fcreate.roblox.com\u002Fdocs\u002Freference\u002Fengine\u002Fclasses\u002FUICorner): `CornerRadius`\n- [`UIStroke`](https:\u002F\u002Fcreate.roblox.com\u002Fdocs\u002Freference\u002Fengine\u002Fclasses\u002FUIStroke): `Color`, `Transparency`, `Thickness`, `ApplyStrokeMode`, `BorderStrokePosition`, `LineJoinMode`, `StrokeSizingMode`, plus gradient strokes\n- [`UIGradient`](https:\u002F\u002Fcreate.roblox.com\u002Fdocs\u002Freference\u002Fengine\u002Fclasses\u002FUIGradient): `Color`, `Transparency`, `Rotation`, `Offset`\n- [`UIPadding`](https:\u002F\u002Fcreate.roblox.com\u002Fdocs\u002Freference\u002Fengine\u002Fclasses\u002FUIPadding): `PaddingTop`, `PaddingBottom`, `PaddingLeft`, `PaddingRight`\n- [`UIListLayout`](https:\u002F\u002Fcreate.roblox.com\u002Fdocs\u002Freference\u002Fengine\u002Fclasses\u002FUIListLayout): `FillDirection`, `HorizontalAlignment`, `VerticalAlignment`, `Padding`, `Wraps`, `SortOrder = LayoutOrder`\n- [`UIGridLayout`](https:\u002F\u002Fcreate.roblox.com\u002Fdocs\u002Freference\u002Fengine\u002Fclasses\u002FUIGridLayout): `CellSize`, `CellPadding`, `FillDirection`, `HorizontalAlignment`, `VerticalAlignment`, `SortOrder = LayoutOrder`\n- [`UIAspectRatioConstraint`](https:\u002F\u002Fcreate.roblox.com\u002Fdocs\u002Freference\u002Fengine\u002Fclasses\u002FUIAspectRatioConstraint): `AspectRatio`\n- [`UITextSizeConstraint`](https:\u002F\u002Fcreate.roblox.com\u002Fdocs\u002Freference\u002Fengine\u002Fclasses\u002FUITextSizeConstraint): `MinTextSize`, `MaxTextSize`\n- [`UIScale`](https:\u002F\u002Fcreate.roblox.com\u002Fdocs\u002Freference\u002Fengine\u002Fclasses\u002FUIScale): `Scale`\n\nSupported text properties:\n\n- `Text`\n- `TextColor3`\n- `TextSize`\n- `TextScaled`\n- `TextWrapped`\n- `TextTransparency`\n- `TextXAlignment`\n- `TextYAlignment`\n- `RichText`\n- `LineHeight`\n- `FontFace` families, weights, and styles\n\nSupported image properties:\n\n- `Image`\n- `ImageColor3`\n- `ImageTransparency`\n- `ScaleType`: `Stretch`, `Fit`, `Crop`, `Tile`, `Slice`\n- `TileSize`\n- `SliceCenter`\n- `SliceScale`\n- `ImageRectSize`\n- `ImageRectOffset`\n\nSupported `ScrollingFrame` behavior:\n\n- `CanvasSize`\n- `AutomaticCanvasSize`\n- `ScrollingDirection`\n- `ScrollBarImageColor3`\n- `ScrollBarImageTransparency`\n- `ScrollBarThickness`\n- normalized preview-time `canvasPosition` for rendering scrolled content\n\n## Quick start\n\nUse the hosted demo here: \u003Ca href=\"https:\u002F\u002Fpinevex-renderer-demo.vercel.app\" target=\"_blank\" rel=\"noopener noreferrer\">https:\u002F\u002Fpinevex-renderer-demo.vercel.app\u003C\u002Fa>.\n\nCreate a Python environment and install dependencies:\n\n```bash\npython -m venv .venv\nsource .venv\u002Fbin\u002Factivate\npip install -r requirements.txt\n```\n\nStart the API:\n\n```bash\nuvicorn api.index:app --reload\n```\n\nRender the included example to a PNG:\n\n```bash\ncurl -s http:\u002F\u002F127.0.0.1:8000\u002Fpreview.png \\\n  -H 'Content-Type: application\u002Fjson' \\\n  --data '{\"pinevex_object\": '\"$(cat examples\u002Fsimple-ui.json)\"', \"viewport_size\": [420, 180], \"transparent_background\": true}' \\\n  --output preview.png\n```\n\nThe larger [`examples\u002Frtl2pcparts.json`](examples\u002Frtl2pcparts.json) fixture was\nparsed from [`examples\u002FRTL2PCParts.rbxm`](examples\u002FRTL2PCParts.rbxm), copied\nfrom `Downloads\u002FRTL2PCParts.rbxm`, and is also available as a quick-load example\nin the web demo.\n\n## API\n\n### `GET \u002Fhealth`\n\nReturns a small status payload confirming the vendored runtime pieces are present.\n\n### `GET \u002Ffont-health`\n\nReturns bundled font diagnostics. If `RENDERER_API_KEY` is set, this endpoint requires authorization.\n\n### `POST \u002Fpreview.png`\n\nReturns a rendered PNG directly.\n\n```json\n{\n  \"pinevex_object\": {\n    \"type\": \"Frame\",\n    \"size\": [1, 0, 1, 0],\n    \"bg\": [24, 28, 36],\n    \"children\": []\n  },\n  \"viewport_size\": [420, 180],\n  \"transparent_background\": true\n}\n```\n\n### `POST \u002Frender`\n\nReturns a JSON response with the normalized object, optional base64 PNG preview, and optional Luau output.\n\n```json\n{\n  \"pinevex_object\": {\"type\": \"Frame\", \"children\": []},\n  \"allow_partial\": true,\n  \"include_preview\": true,\n  \"include_luau\": true,\n  \"viewport_size\": [1204, 168],\n  \"transparent_background\": true\n}\n```\n\n`pinevex_object` may be a JSON object or a string containing partial JSON. `viewport_size` accepts `[width, height]`, `{\"width\": 1204, \"height\": 168}`, `\"1204x168\"`, or `\"1204,168\"`. When omitted, the renderer uses `1920x1080`. Set `transparent_background` to `true` to return a PNG with a transparent canvas instead of a white canvas.\n\n## Step-by-step debugger\n\nCapture every visual paint operation for a Pinevex JSON file:\n\n```bash\nPYTHONPATH=src python -m ui_engine.debug_stepper examples\u002Fsimple-ui.json \\\n  --viewport-size 420x180 \\\n  --output-dir pinevex_steps\n```\n\nThe command writes numbered PNG frames and `steps.json`. Add `--tk` to open the\nstep-through GUI:\n\n```bash\nPYTHONPATH=src python -m ui_engine.debug_stepper examples\u002Fsimple-ui.json \\\n  --viewport-size 420x180 \\\n  --output-dir pinevex_steps \\\n  --tk\n```\n\nUse Left\u002FRight, Space, Home, or End to inspect the render one draw call at a\ntime.\n\nUseful flags:\n\n- `--tk` opens the Tkinter step-through viewer.\n- `--debug` overlays renderer debug outlines.\n- `--transparent` uses a transparent canvas.\n- `--crop` crops frames when the input object sets `_crop: true`.\n\nThe same feature is available from Python:\n\n```python\nfrom ui_engine.debug_stepper import capture_steps, save_steps\n\nsteps, metadata = capture_steps(pinevex_object, width=420, height=180)\nsave_steps(steps, output_dir=\"pinevex_steps\", metadata=metadata)\n```\n\nWhen importing `ui_engine` directly from a source checkout, run Python with\n`PYTHONPATH=src` or add `src\u002F` to `sys.path`.\n\nFor occlusion and selection debugging, `ui_engine.hit_test` exposes\n`get_objects_at_region`, `get_objects_at_instance`, `get_instance_rect`, and\n`get_instance_region`.\n\n## JSON shape\n\nThe renderer expects a nested UI tree with Roblox-like fields:\n\n```json\n{\n  \"type\": \"TextButton\",\n  \"name\": \"PrimaryButton\",\n  \"size\": [0.58, 0, 0.28, 0],\n  \"position\": [0.5, 0, 0.68, 0],\n  \"anchor\": [0.5, 0.5],\n  \"bg\": [64, 179, 108],\n  \"corner\": 0.12,\n  \"text\": \"Open\",\n  \"textColor\": [255, 255, 255],\n  \"textScaled\": true,\n  \"font\": \"Montserrat\",\n  \"fontWeight\": \"Bold\",\n  \"children\": []\n}\n```\n\nSee [`examples\u002Fsimple-ui.json`](examples\u002Fsimple-ui.json) for a complete minimal example.\n\n## Configuration\n\n- `RENDERER_API_KEY`: optional bearer token required by render endpoints when set.\n- `ICON_CACHE_DIR`: optional cache directory for fetched Roblox asset thumbnails. Defaults to `\u002Ftmp\u002Fpinevex-renderer\u002Fcache\u002Ficons`.\n- `PINEVEX_RENDERER_ICON_OVERRIDES`: optional path to a local JSON map of Roblox asset IDs to bundled icon keys. This is useful for private renderer parity fixes and should not be committed.\n- `PINEVEX_RENDERER_ROBLOX_FONT_DIRS`: optional `PATH`-separated list of local Roblox font directories used as extra fallbacks.\n\n## Repository scope\n\nThis repository contains the renderer\u002FAPI runtime and small examples. The bundled icon manifest is a minimal texture-key subset, not the private asset catalog, and does not include concrete private asset IDs.\n\n### Source layout note\n\nThe renderer core lives in `src\u002Fui_engine`. This repository originally only\nscoped the Vercel\u002Fweb-demo wrapper, and `ui_engine` was imported as a vendored\nruntime from the larger Pinevex project. The repo has since grown into the\npublic renderer artifact, so the renderer now uses a conventional `src\u002F`\nlayout.\n\n## License\n\nPinevex-authored source code is licensed under the [Apache License 2.0](LICENSE).\n\nBundled third-party fonts and native runtime libraries retain their original licenses. See [THIRD_PARTY_NOTICES.md](THIRD_PARTY_NOTICES.md).\n\n## Project structure\n\n```text\napi\u002F\n  index.py                      FastAPI entrypoint\nexamples\u002F\n  simple-ui.json                Minimal renderable UI tree\n  RTL2PCParts.rbxm              Source RBXM for the PC parts shop example\n  rtl2pcparts.json              Parsed Pinevex JSON fixture for that RBXM\nsrc\u002F\n  ui_engine\u002F                    Layout, text, image, hit-test, step debugger, and Skia rendering code\nvendor\u002F\n  icon_library\u002Fmanifest.json    Minimal public texture-key manifest\n  native\u002F                       Linux runtime libraries for hosted rendering\n  product_output\u002F               Pinevex postprocess and Luau export helpers\nrequirements.txt\nvercel.json\n```\n\n## Status\n\nThis is a technical artifact extracted from a larger screenshot-to-editable-UI reconstruction project. It is useful as a renderer\u002FAPI reference, but it is not packaged as a polished product SDK.\n\n\u003Chr>\n\nNote: README.md written by GPT 5.5, roughly human-reviewed.\n","Pinevex Renderer 是一个用于渲染类似Roblox风格界面树的高保真UI渲染器。它主要使用Python编写，能够在CPU上实现接近Roblox内部UI引擎的渲染效果。核心功能包括处理复杂的布局、文本适配、渐变色、圆角以及纹理贴图等，并支持从`.rbxm`文件解析和渲染。此外，该项目还提供了一个基于Tk的逐步绘制调试工具，方便开发者检查每个渲染步骤。Pinevex Renderer最初旨在为AI生成合成训练数据，现在适用于需要将结构化UI树转换为高质量图像的各种场景，如游戏开发中的UI预览、设计验证及自动化测试等。",2,"2026-06-11 04:02:31","CREATED_QUERY"]