backend, web frontend, etc.
  • Rust 63.9%
  • TypeScript 34.8%
  • Python 0.4%
  • JavaScript 0.3%
  • CSS 0.2%
  • Other 0.2%
Find a file
Repository files (latest commit first)
Filename Latest commit message Latest commit date
BFlat 3880127f68
Add Google Analytics to the marketing site (#50)
## What

Adds GA4 to `artcraft-website-next`, covering the whole marketing site.

- `src/components/analytics.tsx` loads gtag.js (`afterInteractive`) and
installs one delegated click listener. It's mounted once in the root
layout.
- `src/lib/analytics.ts` holds the typed event catalogue,
`trackEvent()`, `trackAttrs()` (data attributes that work in server
components) and the link classifier.
- Analytics is **off unless `NEXT_PUBLIC_GA_MEASUREMENT_ID` is set**, so
local dev and deploy previews stay out of the reports.

## Why

The new site had no analytics. This gives us download, signup and
checkout funnels, plus CTA performance by page section.

## Events

GA4 Enhanced Measurement handles page views (App Router history
changes), scrolls, outbound clicks and common file downloads. On top of
that:

| Event | Trigger |
|---|---|
| `app_download` | GitHub release asset clicks (ArtCraft + Crafting
Apps): app, version, platform, file |
| `webapp_click` | Links to app.getartcraft.com: destination path |
| `cta_click` | Other `Button` links (tagged `data-cta`) |
| `app_select` | App cards and icons on `/apps` and sibling cards on app
pages: app name |
| `social_click`, `contact_click` | `SOCIAL_LINKS` hosts, mailto / copy
email |
| `begin_checkout` | Plan selection (`signup`/`subscribe`/`switch`) and
credit packs, with GA4 ecommerce `items` |
| `billing_cadence_change`, `view_credit_packs`, `manage_subscription` |
Pricing actions |
| `prompt_submit`, `video_generation` | H3 promptbox (`logged_in`;
complete/failed/timeout) |
| `sign_up`, `login` | Auth gate success |
| `generate_lead` | Beta form submission (honeypot hits excluded) |
| `video_start`, `share`, `copy_command`, `copy_prompt`,
`media_download`, `press_kit_download` | Video facades, share bars, copy
buttons, media/press downloads |

Every delegated click event also carries `link_location`: nav, footer,
modal, or the enclosing `section[id]`.

## Reviewer notes

- `Button` now renders `data-cta=""` on its anchor variants. There is no
visual change.
- `PricingTable.choosePlan` now branches on the computed `checkoutType`
rather than repeating the `user`/`hasActivePlan` conditions. The
behaviour is unchanged.
- `AuthGateModal` forms now return early on error instead of using
if/else, so the success event goes on the success path.

## Deploy

Set `NEXT_PUBLIC_GA_MEASUREMENT_ID` in Netlify, **Production context
only**, then redeploy. The ID is inlined at build time. This is
documented in `netlify.toml`.

After deploying:
- Mark key events in GA: `app_download`, `begin_checkout`, `sign_up`,
`generate_lead`, `webapp_click`.
- Register custom dimensions (e.g. `link_location`, `app_name`,
`platform`, `destination`, `checkout_type`) so the params show in
reports.

## Testing

Ran the dev server with a dummy measurement ID and checked `dataLayer`
on these pages:
- `/`: nav, footer, CTA, social, mailto and YouTube events.
- `/download`: Windows and macOS installers.
- `/apps/photocraft`: Linux downloads, share, copy command, GitHub link,
and `app_select` on the sibling cards (also checked on the `/apps` icon
row and lineup cards).
- `/pricing`: cadence toggle.
- `/minimax-h3`: logged-out `prompt_submit` and example `video_start`.

Not exercised in the browser: the beta form (submitting would post a
real Google Form entry), signup/login, checkout, the credits modal, the
media page, the press kit, email copy and manage plan.

`tsc` shows no new errors. Existing errors in `media-viewer-3d.tsx` and
the Playwright test files are unchanged. The production build was not
run.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

---------

Co-authored-by: Claude Opus 5.5 <noreply@anthropic.com>
2026-10-06 20:00:50 +07:00
.claude/rules testing omni gen (#1875) 2026-08-09 22:54:25 -04:00
.config recalculate hackari workspace acceleration package 2025-04-09 20:41:52 -04:00
.github remove the desktop app from the repo 2026-09-12 12:23:46 -04:00
.idea artcraft router: seedance (#1153) 2026-03-16 22:43:50 -04:00
.sqlx Generate WebP thumbnails for videos instead of Gif (except: MacOS 10.15) 2026-09-28 00:52:07 -04:00
.vscode cleanup root directory (#996) 2026-01-19 23:08:39 -05:00
_database enum variants 2026-09-26 02:36:24 -07:00
_docs remove the desktop app from the repo 2026-09-12 12:23:46 -04:00
_metrics/datadog Remove endpoints for old Rust / Bevy game engine (#1765) 2026-07-09 23:52:16 -04:00
_tools/postman remove old tags code (#1767) 2026-07-10 02:31:37 -04:00
build payment informatics 4 (#1707) 2026-06-30 10:40:28 -04:00
crates ffmpeg fallback on mac 2026-09-28 01:07:45 -04:00
docs let's actually not call the new endpoint prematurely 2026-09-27 17:35:00 -04:00
frontend Add Google Analytics to the marketing site (#50) 2026-10-06 20:00:50 +07:00
includes increase username randomness to stop pages (#1261) 2026-03-31 00:31:22 -04:00
old_assets/resources shink assets that are way too large (#1717) 2026-07-02 03:42:41 -04:00
script better website hero text (#46) 2026-10-01 20:22:51 -04:00
secrets metrics defs (#1554) 2026-05-23 11:26:14 -04:00
test_data remove "secrets" (not ours) that Netlify is complaining about (#719) 2025-07-14 15:42:24 -04:00
.dockerignore move rust code back to root directory 2025-02-11 21:58:04 -05:00
.env cleanup root directory (#996) 2026-01-19 23:08:39 -05:00
.gitattributes move rust code back to root directory 2025-02-11 21:58:04 -05:00
.gitignore high bitrate seedance 2.5 2026-09-12 13:22:42 -04:00
AGENTS.md add desktop marketing website 2026-09-27 22:10:27 -04:00
Cargo.lock fold cdn configs in 2026-09-27 22:41:01 -04:00
Cargo.toml fold cdn configs in 2026-09-27 22:41:01 -04:00
CLAUDE.md rename CLAUDE.md to AGENTS.md (#1940) 2026-09-10 21:55:17 -04:00
Cranky.toml move rust code back to root directory 2025-02-11 21:58:04 -05:00
diesel.toml cleanup root directory (#996) 2026-01-19 23:08:39 -05:00
LICENSE.md update wording 2026-01-06 12:27:34 -05:00
README.md remove the desktop app from the repo 2026-09-12 12:23:46 -04:00
ROADMAP.md formatting, small revisions 2026-01-06 12:22:46 -05:00
rustfmt.toml move rust code back to root directory 2025-02-11 21:58:04 -05:00

ArtCraft Services

This repository contains ArtCraft's backend, HTTP API, background workers, and web frontends. It is a Rust and TypeScript monorepo with shared API definitions, provider clients, database queries, and development tooling.

The Tauri desktop application is maintained in storytold/artcraft, along with the product overview, feature demos, and desktop downloads.

Backend architecture

storyteller-web is the main HTTP service, built with Rust, Actix Web, and Tokio. It handles authentication, accounts, media uploads and libraries, generation requests, job status, credits, and Stripe billing. The service retains the storyteller-web name, and its hosted API uses https://api.storyteller.ai.

Generation spans the HTTP service, provider integrations, and asynchronous workers:

flowchart LR
  Clients[Web, desktop, and API clients] --> API[storyteller-web]
  API --> Router[artcraft_router]
  Router --> Providers[Generation providers]
  Providers -->|Webhooks| API
  Workers[Background workers] -->|Poll jobs| Providers
  API --> DB[(MySQL)]
  Workers --> DB
  API --> Storage[(Object storage)]
  Workers --> Storage

A typical generation request follows this path:

  1. The API authenticates the caller, validates the request and input media, and checks the user's access and credits.
  2. The generation pipeline calculates the cost, bills the wallet, and uses artcraft_router to build and submit a provider-specific request. The API records inference jobs in MySQL and returns job tokens to the client.
  3. Completion is handled through provider webhooks or polling workers, depending on the integration. Results are downloaded into object storage, registered as media files, and associated with the completed jobs. Separate workers handle follow-up processing such as video thumbnails.
  4. Clients poll job-status endpoints and load the resulting media through CDN URLs.

Storage responsibilities are split across these components:

Component Role
MySQL + SQLx Accounts, media metadata, inference jobs, wallets, and bills
Redis Caching, rate limiting, and job progress
Elasticsearch Search indexes and queries
S3-compatible storage / R2 Uploaded media, generated assets, and derived files

HTTP routes and handlers live in storyteller_web/src/http_server. MySQL queries belong in the shared mysql_queries crate so that handlers, workers, and CLI tools use the same data access layer. Reusable billing components live under crates/service/plugins, and background services live under crates/service/job.

HTTP API

The API exposes two generation interfaces:

  • Application endpoints: /v1/omni_gen/generate/* uses user sessions for image, video, audio, mesh, and splat generation. /v1/omni_gen/models/* and /v1/omni_gen/cost/* expose model discovery and cost estimation without requiring a user session. Application job status is available under /v1/jobs.
  • Programmatic endpoints: /v1/omni_api uses an API key in the Authorization header. It provides image and video generation, image/video/audio uploads, and job-status polling. Use Authorization: Bearer <api-key>; API access must be enabled for the account.

For example, a programmatic video request goes to POST /v1/omni_api/generate/video. The response contains an inference_job_token, which the caller polls with GET /v1/omni_api/job_status/job/{token}. The Omni API guide covers authentication, request and response bodies, URL inputs, and runnable examples.

Start with these sources when adding or tracing an endpoint:

Frontend

frontend contains the Nx workspace for React and TypeScript apps and shared libraries. The main web frontends use Vite, with Zustand and signals for state, Three.js for 3D scenes, and shared UI and generation tools.

Path Purpose
frontend/apps/artcraft-webapp Browser application at app.getartcraft.com
frontend/apps/artcraft-website Product website at getartcraft.com
frontend/libs/api HTTP clients, API host selection, and models
frontend/libs/omni-gen Shared generation logic
frontend/libs/components Reusable UI, editors, and generation controls
frontend/libs/tauri-api Frontend bindings for native desktop commands

The web apps call the backend through the shared API library, which handles JSON and multipart requests and session credentials. Libraries such as tauri-api and tauri-utils remain because shared web components still import their types, helpers, and browser-compatible behavior. The native desktop app and libraries used only by that app live in the separate desktop repository.

Repository layout

artcraft-services/
├── crates/
│   ├── service/web/       # HTTP services, including storyteller_web
│   ├── service/job/       # Provider workers, media processing, analytics
│   ├── service/plugins/   # Shared billing and service components
│   ├── api_clients/       # ArtCraft API types, clients, router, provider clients
│   ├── schema/            # Database access, public tokens/enums, bucket paths
│   ├── lib/               # Shared Rust utilities
│   └── cli/               # Development and operations tools
├── frontend/
│   ├── apps/              # Web frontends
│   └── libs/              # Shared TypeScript libraries
├── _database/             # SQL migrations, materialized schemas, search schemas
├── _docs/                 # Setup guides and technical documentation
├── _tools/postman/        # HTTP request collections
├── build/                 # Service Dockerfiles
├── script/                # Development, build, and database tooling
└── Cargo.toml             # Rust workspace

Local development

Use Rust/Cargo for backend work and Node.js/npm for the main frontend workspace. See the development setup guide for toolchain setup and frontend README for dependency installation and Nx usage.

Backend

The server needs a migrated MySQL database, Redis, Elasticsearch configuration, object storage, and credentials for the integrations being exercised. The server setup guide covers local MySQL and Redis; the remaining configuration is defined in the server config directory and startup code.

In development, the server loads storyteller-web.common.env, storyteller-web.development.env, and storyteller-web.development-secrets.env from its configuration search paths: the repository root, ./config, and the server's config directory. Its bootstrap skips the root .env file.

With the toolchain and service configuration in place, run from the repository root:

SQLX_OFFLINE=true cargo check -p storyteller-web
SQLX_OFFLINE=true cargo run -p storyteller-web

The default bind address is 0.0.0.0:12345, configurable through BIND_ADDRESS. GET /_status exposes the service health check. Provider polling and thumbnail processing require their corresponding worker processes and configuration.

SQLX_OFFLINE=true uses the checked-in .sqlx query metadata during compilation; the running server still needs its databases. When changing SQLx queries, use script/rust/sqlx_codegen_database.sh to regenerate metadata against migrated development databases.

Web frontend

To run the browser app against a local backend:

cd frontend
npm install
VITE_USE_LOCAL_API=true npx nx dev artcraft-webapp

The browser app runs at http://localhost:4201. VITE_USE_LOCAL_API=true selects http://localhost:12345; without that override, its Vite development proxy targets the hosted API. API host selection lives in StorytellerApiHostStore.

From frontend, build the web app or run the product website with:

npx nx build artcraft-webapp
npx nx dev artcraft-website

The website runs at http://localhost:4200. Repository-root launchers are in script/website. For desktop development, use the ArtCraft desktop repository.

Further reading