create-photo-flipbook-ui README

The project's README from github.com/HaichaoLihc/create-photo-flipbook-ui. As one markdown file: README.md.

Create Photo Flipbook UI

A Codex skill for turning photographs into expressive photobooks using the bundled 2D Book runtime (formerly v1) in assets/html/.

3D Book 2 demo

Templates

These templates live in examples/, outside the skill folder, and are optional resources for people to copy and customize. They are not installed with the skill. The skill uses its own bundled 2D runtime; Library and the 3D templates are separate alternatives.

Library 2D Book
Library with three mock books 2D Book with a sample photo spread
Reorderable shelf with three empty mock books. Reference example of the skill’s bundled 2D runtime.
3D Book 1 3D Book 2
3D Book 1 on a dark background 3D Book 2 on a light background
React and WebGL reader with curved pages and a dark stage. Three.js and Quick FlipBook reader with a light stage and soft shadows.

Install

python3 ~/.codex/skills/.system/skill-installer/scripts/install-skill-from-github.py \
  --repo HaichaoLihc/create-photo-flipbook-ui \
  --path skills/create-photo-flipbook-ui \
  --ref main

Use

Use $create-photo-flipbook-ui to turn these photographs into photobooks.

One workflow, three stages:

  1. Understand the photos: their form, content, and themes. Semantic search and contact sheets are available.
  2. Define the style and design: fulfill the user's request with a coherent, high-quality book. Pinterest, the photo-skill catalogue, and image generation are available. Without a preferred style, preserve the original photos and use the bundled default photobook style.
  3. Build the UI: present the book with the built-in 2D HTML runtime and deliver a working local URL.

The skill defines outcomes and provides tools. The agent chooses the process.

The default photobook style provides concise text guidance, Source Serif 4, paper and cloth textures, and reusable page styles in the bundled runtime. The starter contains no sample photographs.

Photo search and reusable code

The skill declares the existing photo-search MCP dependency for library search, ranked contact sheets, and larger previews. The MCP itself is read-only. The bundled scripts/photo_library.py adapter adds folder-specific cached indexes and semantic searches by reusing an installed photo-search engine's index.py and PhotoSearchEngine; it does not replace the connected MCP's global index.

Install the engine and its Python requirements separately, set PHOTO_SEARCH_ENGINE_DIR to its location, and use its Python interpreter. See Photo library setup and commands. Index caches remain outside the skill and source folders. New and changed images are embedded incrementally; unchanged images are reused. Search output includes a contact sheet and manifest, and selections retain stable IDs and original paths.

Reusable resources shipped with the skill include the photo-library adapter, ordered contact-sheet renderer, Pinterest helper, and 2D book runtime. Art direction and sequencing remain in workflow instructions. Model weights and photo libraries are not part of the skill package.

See each template’s README for local preview instructions.

Negative Sleeves is a separate, photo-free film archive UI with page-corner previews and draggable film strips. Import a local photo folder with its Python builder; generated books and photographs stay Git-ignored.

Validate

python3 tests/validate_repo.py

Evaluation guide.

License

Original project code and the installable skill are MIT licensed. Third-party components retain their own licenses. The adapted code in examples/3d-book-1/ and all photographs, videos, and other media are excluded unless expressly stated otherwise.

create-photo-flipbook-ui (HaichaoLihc/create-photo-flipbook-ui)

Searching Database…

547 ·GitHub
Create-photo-flipbook-ui
Что это?Скилл для Codex, который превращает папку пользовательских фото в работающий сайт-фотокнигу, используя встроенный 2D-рантайм HTML-флипбука и опциональные шаблоны-примеры на 3D Three.js/WebGL.
Это отдельное приложение или то, что ИИ-агент запускает за меня?Это агентский скилл Codex, а не отдельное приложение: Codex использует его как набор инструментов, чтобы проанализировать ваши фото и сгенерировать локальный сайт-флипбук, выбирая между встроенным 2D-рантаймом и отдельными шаблонами-примерами на 3D React/Three.js.
Как это запустить?Установите пакет скилла в каталог скиллов Codex, чтобы агент мог его вызывать; шаблоны в examples/ необязательны и должны копироваться отдельно, так как вместе со скиллом они не устанавливаются.
Нужно ли что-то дополнительное для работы поиска по фото?Семантический поиск и контактные листы опираются на уже имеющийся photo-search MCP; входящему адаптеру scripts/photolibrary.py также нужен отдельно установленный движок photo-search, на который указывает PHOTOSEARCHENGINEDIR.
Есть ли в комплекте примеры фото для пробы?Нет, стартовый скилл не содержит примеров изображений, так что для сборки книги понадобится своя папка с фото.
Мои фото или созданные книги куда-то загружаются?Нет, всё остаётся локально: фото импортируются из локальной папки, а созданные книги и фотографии держатся в Git-игноре, а не коммитятся и не публикуются.
В чём разница между шаблонами 2D Book и 3D Book?2D Book — это собственный встроенный HTML-рантайм скилла, используемый по умолчанию. Примеры 3D Book 1 и 3D Book 2 — отдельные необязательные шаблоны вне папки скилла, построенные на React+WebGL и Three.js+Quick FlipBook соответственно.
Что такое Negative Sleeves?Это отдельный шаблон без фото из числа примеров: интерфейс плёночного архива с предпросмотром уголков страниц и перетаскиваемыми плёночными полосами, не связанный с основным процессом фотокниги.
Как скилл на самом деле решает, как будет выглядеть моя книга?Он следует процессу из трёх этапов: понять фотографии (через поиск и контактные листы), определить стиль вместе с пользователем (или откатиться к стилю фотокниги по умолчанию), затем собрать финальную книгу на встроенном 2D-рантайме и открыть её по локальному URL.
What are similar projects?Skills, img2threejs, RuiC-card-skill, openfilm, aetherviz-master, holo-card-studio, threejs-architecture-effects, dream-loop
Which topics is it in?image, threejs, webgl, semantic-search, 3d, design, animation, html, ui, agent-skills, openai, codex
Creator
HaichaoLihc
Size
76.2 MB
Stars
547
Updated
CommitOct 20Releasev0.3.0Sep 08
Age
1mo
Commits · 90 Days