Files
artcraft/frontend
BFlat cc8a124bdb feat(webapp): add 3D Object (mesh) and 3D World (splat) create pages
Wire up the new omni_gen mesh + splat endpoints in the frontend and add two
new create pages that mirror the existing Create Image / Create Video flow.
Backend was already shipped; this is frontend-only.

API layer (libs/api, libs/omni-gen):
- OmniGenApi: add mesh + splat request/response/model-info types and the six
  new methods (models/cost/generate for mesh and splat)
- Add useOmniGenMeshModels / useOmniGenSplatModels session-cached model hooks

Pages (apps/artcraft-webapp):
- New /create-object (3D Object) and /create-world (3D World) page trios
  (page + zustand store + generate/poll api), cloned from create-image
- Capability-gated controls per selected model: mesh output type, polygon type,
  geometry/texture quality, face count, PBR + texture toggles, multi-view
  (front/back/left/right) and mesh-file inputs; splat panorama + disable-recaption
  toggles and reference video
- Add useMeshCostEstimate / useSplatCostEstimate credit hooks
- Register routes in app.tsx and add "3D Object" / "3D World" sidebar entries

Shared generation feed (libs/components/generation-list + webapp gallery):
- Teach useGenerationJobs the object_generation / splat_generation inference
  categories, surfaced as the "dimensional" media class
- Render 3D result cards from the media file's cover image / screenshot
- useGalleryData: optional model-id filter so the object and world feeds only
  show their own generations
- Widen InProgressJob / FailedJob / PendingCard / RecreateSlotContext media
  class to include "dimensional"

Clicking a 3D card opens the existing Viewer3D lightbox (already handles .glb
meshes and .spz splats). No backend changes.
2026-07-08 20:04:20 +07:00
..
2026-03-12 15:49:24 +07:00
2026-06-10 09:28:25 -04:00

Frontend

This is an nx monorepo that can contain multiple apps and shared libraries.

All commands to run these projects are performed from this directory (except the repo-root launcher scripts noted below).

Requirements

  • Node.js 20+ (Nx 21 / Vite 6 requirement). Install via nvm, nodejs.org, or brew install node.
  • npm (ships with Node).

We use npm, not pnpm. pnpm was briefly adopted ("add pnpm to solve build issues") and later removed ("fix(frontend): consume video-editor libs via nx path aliases, drop pnpm"). If you have leftovers from that era — a pnpm-lock.yaml, pnpm-workspace.yaml, or a node_modules/.pnpm directory — npm installs will fail (typically with ENOTEMPTY rename errors). See Troubleshooting below.

Install dependencies

npm install

Running the apps in dev mode

From the repository root, the launcher scripts (these preflight your environment, install dependencies, and free the dev port first):

./script/website/unix_frontend_dev.sh           # artcraft-website (marketing site), port 4200
./script/website/unix_frontend_webapp_dev.sh    # artcraft-webapp (user dashboard), port 4201
./script/artcraft/unix_frontend_dev.sh          # artcraft (Tauri app frontend), port 5173

Or directly from this directory:

nx dev artcraft-website
nx dev artcraft-webapp
nx dev artcraft        # NB: the Tauri app also needs the Rust dev server running
nx dev editor2d

Building

npx nx build artcraft-website
npx nx build artcraft-webapp
npx nx build artcraft
npx nx build editor2d

Netlify deploys run apps/<app>/script/netlify_build.sh (see each app's netlify.toml).

Troubleshooting

npm install fails with ENOTEMPTY: directory not empty, rename ...

Your node_modules tree is corrupted — usually an interrupted install, or a tree written by pnpm back when the repo briefly used it. Fix:

./clean_modules.sh
npm install

Or the manual minimum:

rm -rf node_modules .nx pnpm-lock.yaml pnpm-workspace.yaml
npm install

Stale build state after switching branches

Call this when starting on main or a new branch:

./clean_modules.sh

It removes all dist/ outputs, resets the nx cache, and removes node_modules.

Import aliases

The names for @frontend and @storyteller come from the package.json file in the libs folder:

import { Login } from "@frontend/login";
import { api } from "@storyteller/api";

For shared UI components, import from @storyteller/ui-[componentname]:

import { Button } from "@storyteller/ui-button";
import { Modal } from "@storyteller/ui-modal";

Generating a new component library

# 1. Generate the library
npx nx g @nx/react:library libs/components/toaster --import-path=@storyteller/ui-toaster --bundler=vite
npm install

# 2. Import it somewhere in code

# 3. Sync and build
nx sync
nx build