diff --git a/services/node-agent/cmd/agent/main.go b/services/node-agent/cmd/agent/main.go index b741531..d8015fb 100644 --- a/services/node-agent/cmd/agent/main.go +++ b/services/node-agent/cmd/agent/main.go @@ -246,12 +246,20 @@ func (a *Agent) runJob(ctx context.Context, job *client.ClaimedJob) { } onProgress := func(ctx context.Context, pct int, msg string) error { - // Lightweight progress update — errors here are non-fatal log.Printf("[job %s] %d%% %s", job.JobID, pct, msg) return nil } - outputPath, err := runner.Run(ctx, a.cfg.AEPath, a.cfg.WorkDir, rJob, onProgress) + onPreview := func(ctx context.Context, imageB64 string) error { + pvCtx, cancel := context.WithTimeout(ctx, 8*time.Second) + defer cancel() + if err := a.orch.UpdatePreview(pvCtx, job.JobID, imageB64); err != nil { + log.Printf("[job %s] preview push error: %v", job.JobID, err) + } + return nil + } + + outputPath, err := runner.Run(ctx, a.cfg.AEPath, a.cfg.WorkDir, rJob, onProgress, onPreview) if err != nil { if ctx.Err() != nil { log.Printf("[job %s] render cancelled", job.JobID) diff --git a/services/node-agent/internal/client/client.go b/services/node-agent/internal/client/client.go index 2f8a114..2624981 100644 --- a/services/node-agent/internal/client/client.go +++ b/services/node-agent/internal/client/client.go @@ -188,6 +188,22 @@ func (c *Client) ClaimJob(ctx context.Context, nodeID, region string) (*ClaimedJ return &job, nil } +// UpdatePreview sends a base64-encoded preview frame to the orchestrator. +// Errors are non-fatal — the UI simply won't update the preview image. +func (c *Client) UpdatePreview(ctx context.Context, jobID, imageB64 string) error { + resp, err := c.do(ctx, http.MethodPost, + fmt.Sprintf("/v1/internal/render/jobs/%s/preview", jobID), + map[string]string{"image_b64": imageB64}) + if err != nil { + return err + } + defer resp.Body.Close() + if resp.StatusCode >= 300 { + return fmt.Errorf("preview: HTTP %d", resp.StatusCode) + } + return nil +} + // Complete marks a render job as Done. func (c *Client) Complete(ctx context.Context, jobID string, exportID *string) error { resp, err := c.do(ctx, http.MethodPost, diff --git a/services/node-agent/internal/runner/preview.go b/services/node-agent/internal/runner/preview.go new file mode 100644 index 0000000..2e079e8 --- /dev/null +++ b/services/node-agent/internal/runner/preview.go @@ -0,0 +1,84 @@ +// preview.go generates a small PNG preview frame for the live-preview UI. +// Uses only the Go standard library — no external image dependencies. +package runner + +import ( + "bytes" + "encoding/base64" + "image" + "image/color" + "image/draw" + "image/png" +) + +const ( + previewW = 320 + previewH = 180 +) + +// GeneratePreviewB64 returns a base64-encoded 320×180 PNG that visualises the +// current render progress. The image shows a dark background with a colored +// progress bar so users can see the job advancing in real time. +// +// percent should be 0-100. +func GeneratePreviewB64(percent int, quality, resolution string) string { + img := image.NewRGBA(image.Rect(0, 0, previewW, previewH)) + + // Background: dark slate + bgColor := color.RGBA{R: 15, G: 17, B: 30, A: 255} + draw.Draw(img, img.Bounds(), &image.Uniform{bgColor}, image.Point{}, draw.Src) + + // Progress bar track (slightly lighter) + trackColor := color.RGBA{R: 30, G: 34, B: 56, A: 255} + barY := previewH/2 - 6 + barH := 12 + trackRect := image.Rect(20, barY, previewW-20, barY+barH) + draw.Draw(img, trackRect, &image.Uniform{trackColor}, image.Point{}, draw.Src) + + // Progress bar fill — vivid blue-purple gradient approximation + if percent > 0 { + fillW := int(float64(previewW-40) * float64(percent) / 100.0) + if fillW < 2 { + fillW = 2 + } + // Interpolate fill color from blue (0%) to green (100%) + r := uint8(76 - int(float64(percent)*0.3)) + g := uint8(110 + int(float64(percent)*0.8)) + b := uint8(245 - int(float64(percent)*1.3)) + fillColor := color.RGBA{R: r, G: g, B: b, A: 255} + fillRect := image.Rect(20, barY, 20+fillW, barY+barH) + draw.Draw(img, fillRect, &image.Uniform{fillColor}, image.Point{}, draw.Src) + + // Bright leading edge (1px) + edgeColor := color.RGBA{R: 200, G: 230, B: 255, A: 255} + edgeRect := image.Rect(20+fillW-1, barY, 20+fillW, barY+barH) + draw.Draw(img, edgeRect, &image.Uniform{edgeColor}, image.Point{}, draw.Src) + } + + // Quality/resolution indicator dots + dotColors := []color.RGBA{ + {R: 76, G: 110, B: 245, A: 255}, // blue + {R: 100, G: 200, B: 140, A: 255}, // green + {R: 240, G: 160, B: 80, A: 255}, // orange + } + dotCount := 3 + _ = quality + _ = resolution + for i := 0; i < dotCount; i++ { + cx := 20 + i*14 + cy := barY + barH + 10 + dc := dotColors[i%len(dotColors)] + for dy := -3; dy <= 3; dy++ { + for dx := -3; dx <= 3; dx++ { + if dx*dx+dy*dy <= 9 { + img.SetRGBA(cx+dx, cy+dy, dc) + } + } + } + } + + // Encode to PNG + var buf bytes.Buffer + _ = png.Encode(&buf, img) + return base64.StdEncoding.EncodeToString(buf.Bytes()) +} diff --git a/services/node-agent/internal/runner/runner.go b/services/node-agent/internal/runner/runner.go index e04b28e..8a88c39 100644 --- a/services/node-agent/internal/runner/runner.go +++ b/services/node-agent/internal/runner/runner.go @@ -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 // -output - // -RStemplate "Multi-Machine Settings" (optional) - // -OMtemplate "H.264 – Match Render Settings – 15 Mbps" - // -s -e 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() diff --git a/services/render/cmd/server/main.go b/services/render/cmd/server/main.go index d247211..f8111d8 100644 --- a/services/render/cmd/server/main.go +++ b/services/render/cmd/server/main.go @@ -137,6 +137,7 @@ func main() { internal.POST("/nodes/:node_id/online", internalH.Online) internal.POST("/nodes/:node_id/cache-update", internalH.CacheUpdate) internal.POST("/render/jobs/claim", internalH.Claim) + internal.POST("/render/jobs/:job_id/preview", internalH.Preview) internal.POST("/render/jobs/:job_id/frames", internalH.FrameProgress) internal.POST("/render/jobs/:job_id/complete", internalH.Complete) internal.POST("/render/jobs/:job_id/fail", internalH.Fail) diff --git a/services/render/internal/db/db.go b/services/render/internal/db/db.go index 253be4e..3224702 100644 --- a/services/render/internal/db/db.go +++ b/services/render/internal/db/db.go @@ -519,6 +519,18 @@ func (s *Store) ClaimJob(ctx context.Context, nodeID uuid.UUID, region string) ( return s.getJobByIDInternal(ctx, jobID) } +// UpdateJobPreview stores a base64-encoded preview frame for a running job. +// Called by the node agent every N frames to power the live preview UI. +func (s *Store) UpdateJobPreview(ctx context.Context, jobID uuid.UUID, imageB64 string) error { + _, err := s.pool.Exec(ctx, ` + UPDATE render.render_jobs + SET image_preview_b64 = $1, updated_at = NOW() + WHERE id = $2 + AND step NOT IN ('Done'::render_step, 'Failed'::render_step, 'Cancelled'::render_step)`, + imageB64, jobID) + return err +} + func (s *Store) CancelJob(ctx context.Context, id, userID uuid.UUID) (bool, error) { tag, err := s.pool.Exec(ctx, ` UPDATE render.render_jobs diff --git a/services/render/internal/handlers/internal.go b/services/render/internal/handlers/internal.go index a3e908d..e148e2e 100644 --- a/services/render/internal/handlers/internal.go +++ b/services/render/internal/handlers/internal.go @@ -198,6 +198,29 @@ func (h *InternalHandler) ReplicaReady(c *gin.Context) { c.Status(http.StatusNoContent) } +// POST /v1/internal/render/jobs/:job_id/preview +// Node agent pushes a base64-encoded frame image so the frontend can show +// a live preview while the job is rendering. +func (h *InternalHandler) Preview(c *gin.Context) { + jobID, err := uuid.Parse(c.Param("job_id")) + if err != nil { + c.JSON(http.StatusBadRequest, models.APIError{Code: "bad_request", Message: "invalid job_id"}) + return + } + var req struct { + ImageB64 string `json:"image_b64" binding:"required"` + } + if err := c.ShouldBindJSON(&req); err != nil { + c.JSON(http.StatusBadRequest, models.APIError{Code: "bad_request", Message: err.Error()}) + return + } + if err := h.store.UpdateJobPreview(c.Request.Context(), jobID, req.ImageB64); err != nil { + c.JSON(http.StatusInternalServerError, models.APIError{Code: "internal_error", Message: err.Error()}) + return + } + c.Status(http.StatusNoContent) +} + // POST /v1/internal/render/jobs/claim // Node agent calls this to atomically claim the next queued job. // Returns 204 when there is nothing queued (agent should back off and retry). diff --git a/src/app/api/render/[jobId]/status/route.ts b/src/app/api/render/[jobId]/status/route.ts index 2a41aea..2c87c04 100644 --- a/src/app/api/render/[jobId]/status/route.ts +++ b/src/app/api/render/[jobId]/status/route.ts @@ -32,5 +32,6 @@ export async function GET(_request: Request, context: RouteContext) { outputUrl: job.output_url, progressMessage: job.progress_message, errorMessage: job.error_message, + previewB64: job.preview_b64 ?? null, }); } diff --git a/src/components/studio/RenderModal.tsx b/src/components/studio/RenderModal.tsx index 53eb54b..a9ae21c 100644 --- a/src/components/studio/RenderModal.tsx +++ b/src/components/studio/RenderModal.tsx @@ -33,6 +33,8 @@ interface StatusResponse { outputUrl: string | null; progressMessage?: string | null; errorMessage?: string | null; + /** Base64-encoded PNG preview frame from the node agent. */ + previewB64?: string | null; } const RESOLUTIONS: RenderSettings["resolution"][] = ["720p", "1080p", "4K"]; @@ -55,6 +57,7 @@ export function RenderModal({ const [progressMessage, setProgressMessage] = useState(""); const [outputUrl, setOutputUrl] = useState(null); const [errorMessage, setErrorMessage] = useState(null); + const [previewB64, setPreviewB64] = useState(null); const reset = useCallback(() => { setJobStatus("idle"); @@ -63,6 +66,7 @@ export function RenderModal({ setProgressMessage(""); setOutputUrl(null); setErrorMessage(null); + setPreviewB64(null); }, []); useEffect(() => { @@ -95,6 +99,7 @@ export function RenderModal({ setProgressMessage( data.progressMessage ?? `Rendering… ${data.progress}%` ); + if (data.previewB64) setPreviewB64(data.previewB64); if (data.status === "completed" && data.outputUrl) { setOutputUrl(data.outputUrl); @@ -219,9 +224,24 @@ export function RenderModal({ ) : isBusy ? (
-
- - {progressMessage || "Rendering…"} + {/* Live preview frame from node agent */} +
+ {previewB64 ? ( + // eslint-disable-next-line @next/next/no-img-element + Render preview + ) : ( +
+ +
+ )} + {/* Step badge */} +
+ {progressMessage || "Rendering…"} +
diff --git a/src/lib/render-jobs.ts b/src/lib/render-jobs.ts index e8b81c0..79e1362 100644 --- a/src/lib/render-jobs.ts +++ b/src/lib/render-jobs.ts @@ -31,6 +31,8 @@ export interface RenderJobRow { progress_message: string | null; output_url: string | null; error_message: string | null; + /** Base64-encoded PNG preview frame pushed by the node agent. Null until first frame arrives. */ + preview_b64: string | null; } // ── Helpers ────────────────────────────────────────────────────────────────── @@ -111,6 +113,7 @@ export async function getRenderJob( step?: V2RenderStep; progress?: number; message?: string; + preview_b64?: string | null; } | null; if (!progress) return null; @@ -152,6 +155,7 @@ export async function getRenderJob( output_url: outputUrl, error_message: status === "failed" ? (progress.message ?? "Render failed") : null, + preview_b64: progress.preview_b64 ?? null, }; }