feat: live render preview — node agent pushes PNG frames, frontend displays them in real time

render-svc:
- db.UpdateJobPreview(): writes base64 PNG to render_jobs.image_preview_b64
  (only on active jobs; Done/Failed/Cancelled rows ignored)
- POST /v1/internal/render/jobs/:job_id/preview — node agent endpoint
- Route registered under /v1/internal (nodeAuth)

node-agent:
- runner.PreviewFn callback type alongside ProgressFn
- runner.preview.go: GeneratePreviewB64(percent, quality, resolution)
  — pure stdlib (image/png + encoding/base64), no external deps
  — 320×180 dark frame with animated progress bar + colored indicator dots
- mock render: pushes a preview frame at every step (5→95%)
- real AE render: pushes a preview frame every 30s
- client.UpdatePreview(): POST /v1/internal/render/jobs/:job_id/preview
- main.go: onPreview callback wires client.UpdatePreview() into runner.Run()

frontend:
- render-jobs.ts: RenderJobRow.preview_b64 field; read from progress endpoint
- status/route.ts: previewB64 included in JSON response
- RenderModal: aspect-ratio preview pane during polling — shows spinner until
  first frame arrives, then live-updates with each poll (every 3s);
  step label overlaid as badge bottom-right

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
soroush.asadi
2026-06-01 09:42:03 +03:30
parent ee421ccc68
commit d7743a6fbe
10 changed files with 204 additions and 15 deletions
+30 -10
View File
@@ -1,5 +1,5 @@
// Package runner executes After Effects render jobs and streams progress back
// via the provided callback. When AE_PATH is empty, a mock render is used
// via the provided callbacks. When AE_PATH is empty, a mock render is used
// (useful for CI and dev environments without a licensed AE installation).
package runner
@@ -16,6 +16,10 @@ import (
// ProgressFn is called periodically during rendering with (percent 0-100, message).
type ProgressFn func(ctx context.Context, percent int, message string) error
// PreviewFn is called each time a new preview frame is ready.
// The argument is a base64-encoded PNG. Errors are non-fatal.
type PreviewFn func(ctx context.Context, imageB64 string) error
// Job holds the parameters for a single render.
type Job struct {
JobID string
@@ -30,9 +34,9 @@ type Job struct {
AEPFilePath string
}
// Run executes the render job, calling onProgress as it advances.
// Run executes the render job, calling onProgress and onPreview as it advances.
// Returns the path to the output MP4 file on success.
func Run(ctx context.Context, aePath, workDir string, job *Job, onProgress ProgressFn) (string, error) {
func Run(ctx context.Context, aePath, workDir string, job *Job, onProgress ProgressFn, onPreview PreviewFn) (string, error) {
outputDir := filepath.Join(workDir, "renders", job.JobID)
if err := os.MkdirAll(outputDir, 0o755); err != nil {
return "", fmt.Errorf("create output dir: %w", err)
@@ -40,14 +44,14 @@ func Run(ctx context.Context, aePath, workDir string, job *Job, onProgress Progr
outputPath := filepath.Join(outputDir, "output.mp4")
if aePath == "" {
return mockRender(ctx, job, outputPath, onProgress)
return mockRender(ctx, job, outputPath, onProgress, onPreview)
}
return aeRender(ctx, aePath, job, outputPath, onProgress)
return aeRender(ctx, aePath, job, outputPath, onProgress, onPreview)
}
// ── Mock render (no AE installed) ────────────────────────────────────────────
func mockRender(ctx context.Context, job *Job, outputPath string, onProgress ProgressFn) (string, error) {
func mockRender(ctx context.Context, job *Job, outputPath string, onProgress ProgressFn, onPreview PreviewFn) (string, error) {
log.Printf("[mock] starting render for job %s (%s %s %dfps)", job.JobID, job.Quality, job.Resolution, job.FrameRate)
steps := []struct {
@@ -72,6 +76,13 @@ func mockRender(ctx context.Context, job *Job, outputPath string, onProgress Pro
if err := onProgress(ctx, s.pct, s.msg); err != nil {
log.Printf("[mock] progress callback error: %v", err)
}
// Generate and push a preview frame at each step
if onPreview != nil {
b64 := GeneratePreviewB64(s.pct, job.Quality, job.Resolution)
if err := onPreview(ctx, b64); err != nil {
log.Printf("[mock] preview callback error: %v", err)
}
}
log.Printf("[mock] %d%% — %s", s.pct, s.msg)
}
@@ -85,7 +96,7 @@ func mockRender(ctx context.Context, job *Job, outputPath string, onProgress Pro
// ── Real AE render via aerender.exe ──────────────────────────────────────────
func aeRender(ctx context.Context, aePath string, job *Job, outputPath string, onProgress ProgressFn) (string, error) {
func aeRender(ctx context.Context, aePath string, job *Job, outputPath string, onProgress ProgressFn, onPreview PreviewFn) (string, error) {
if job.AEPFilePath == "" {
return "", fmt.Errorf("AEPFilePath is required for real AE render")
}
@@ -93,9 +104,6 @@ func aeRender(ctx context.Context, aePath string, job *Job, outputPath string, o
// aerender flags:
// -project <path.aep>
// -output <output.mp4>
// -RStemplate "Multi-Machine Settings" (optional)
// -OMtemplate "H.264 Match Render Settings 15 Mbps"
// -s <start_frame> -e <end_frame>
args := []string{
"-project", job.AEPFilePath,
"-output", outputPath,
@@ -120,6 +128,11 @@ func aeRender(ctx context.Context, aePath string, job *Job, outputPath string, o
ticker := time.NewTicker(10 * time.Second)
defer ticker.Stop()
// Generate preview frames every 30 seconds during real AE render.
// In a full implementation this would screenshot the AE composition output.
previewTicker := time.NewTicker(30 * time.Second)
defer previewTicker.Stop()
for {
select {
case err := <-done:
@@ -133,6 +146,13 @@ func aeRender(ctx context.Context, aePath string, job *Job, outputPath string, o
pct += 5
}
_ = onProgress(ctx, pct, fmt.Sprintf("Rendering… %d%%", pct))
case <-previewTicker.C:
if onPreview != nil {
b64 := GeneratePreviewB64(pct, job.Quality, job.Resolution)
if err := onPreview(ctx, b64); err != nil {
log.Printf("[ae] preview push error: %v", err)
}
}
case <-ctx.Done():
_ = cmd.Process.Kill()
return "", ctx.Err()