- Rust 63.9%
- TypeScript 34.8%
- Python 0.4%
- JavaScript 0.3%
- CSS 0.2%
- Other 0.2%
| Filename | Latest commit message | Latest commit date |
|---|---|---|
## 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> |
||
| .claude/rules | ||
| .config | ||
| .github | ||
| .idea | ||
| .sqlx | ||
| .vscode | ||
| _database | ||
| _docs | ||
| _metrics/datadog | ||
| _tools/postman | ||
| build | ||
| crates | ||
| docs | ||
| frontend | ||
| includes | ||
| old_assets/resources | ||
| script | ||
| secrets | ||
| test_data | ||
| .dockerignore | ||
| .env | ||
| .gitattributes | ||
| .gitignore | ||
| AGENTS.md | ||
| Cargo.lock | ||
| Cargo.toml | ||
| CLAUDE.md | ||
| Cranky.toml | ||
| diesel.toml | ||
| LICENSE.md | ||
| README.md | ||
| ROADMAP.md | ||
| rustfmt.toml | ||
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:
- The API authenticates the caller, validates the request and input media, and checks the user's access and credits.
- The generation pipeline calculates the cost, bills the wallet, and uses
artcraft_routerto build and submit a provider-specific request. The API records inference jobs in MySQL and returns job tokens to the client. - 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.
- 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_apiuses an API key in theAuthorizationheader. It provides image and video generation, image/video/audio uploads, and job-status polling. UseAuthorization: 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:
- Route registration maps URLs and HTTP methods to handlers for generation, media, users, billing, API keys, and other service areas.
- API definitions contain shared Rust request, response, and error types.
- Rust API client and TypeScript API library provide client implementations.
- Provider clients implement upstream HTTP integrations; the generation router adapts generation requests and cost estimates across providers.
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.