Added product image generator and replicate examples #2511
Conversation
|
WalkthroughAdds two new documentation pages and updates navigation and introduction listings. docs/docs.json receives entries for guides/example-projects/product-image-generator and guides/examples/replicate-image-generation. New pages are added at docs/guides/example-projects/product-image-generator.mdx and docs/guides/examples/replicate-image-generation.mdx, describing a Product Image Generator example and a Replicate image-generation task (including an example Trigger.dev task and R2 upload flow). docs/guides/introduction.mdx is updated to include rows for these additions. No code, APIs, or exported entities are modified. Estimated code review effort🎯 1 (Trivial) | ⏱️ ~2 minutes Pre-merge checks and finishing touches❌ Failed checks (1 warning)
✅ Passed checks (2 passed)
✨ Finishing touches🧪 Generate unit tests
📜 Recent review detailsConfiguration used: CodeRabbit UI Review profile: CHILL Plan: Pro 📒 Files selected for processing (1)
🚧 Files skipped from review as they are similar to previous changes (1)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
Tip 👮 Agentic pre-merge checks are now available in preview!Pro plan users can now enable pre-merge checks in their settings to enforce checklists before merging PRs.
Please see the documentation for more information. Example: reviews:
pre_merge_checks:
custom_checks:
- name: "Undocumented Breaking Changes"
mode: "warning"
instructions: |
Pass/fail criteria: All breaking changes to public APIs, CLI flags, environment variables, configuration keys, database schemas, or HTTP/GraphQL endpoints must be documented in the "Breaking Change" section of the PR description and in CHANGELOG.md. Exclude purely internal or private changes (e.g., code not exported from package entry points or explicitly marked as internal).Please share your feedback with us on this Discord post. Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 0
🧹 Nitpick comments (8)
docs/guides/example-projects/product-image-generator.mdx (2)
13-17: Add basic accessibility to the video.Include poster and a caption/transcript link for a11y and better UX on slow networks.
-<video - controls - className="w-full aspect-video" - src="https://content.trigger.dev/product-image-generator-example.mp4" -/> +<video + controls + className="w-full aspect-video" + poster="/images/product-image-generator/poster.jpg" + src="https://content.trigger.dev/product-image-generator-example.mp4" +/> +<p className="sr-only"> + Video: Product image generator demo. <a href="/transcripts/product-image-generator">Read transcript</a>. +</p>
34-36: Model naming inconsistent with the example task page.This page says Replicate “google/nano-banana”, while the example task links to “meta/nano-banana-image-to-image”. Standardize the model slug across pages.
Would you like me to align both docs once you confirm the correct Replicate model slug?
docs/guides/examples/replicate-image-generation.mdx (6)
2-4: Title/link/model mismatch.Title says “nano-banana”; body links to “meta/nano-banana-image-to-image”, but code uses
google/nano-banana. Pick one canonical model and use it everywhere (title, link, code).
52-59: Result handling is inconsistent; likely a bug.
wait.forToken<Prediction>(...)returns a result wrapper, but code usesresult.output.output. Either unwrap or access the correct property shape fromPrediction.- const result = await wait.forToken<Prediction>(token); - // unwrap() throws a timeout error or returns the result 👆 - - if (!result.ok) { - throw new Error("Failed to create prediction"); - } - - const generatedImageUrl = result.output.output; + const prediction = await wait.forToken<Prediction>(token).unwrap(); + // prediction.output can be string | string[] depending on model + const out = prediction.output as any; + const generatedImageUrl = Array.isArray(out) ? out[0] : out; + if (!generatedImageUrl) throw new Error("Prediction returned no output URL");
61-66: Remove unused base64 step.
base64Imageisn’t used and wastes CPU/memory for large images.- const base64Image = Buffer.from(imageBuffer).toString("base64");
73-81: Tighten R2 upload safety.Validate required env vars and trim public URL to avoid double slashes.
- const uploadParams = { + const bucket = process.env.R2_BUCKET; + if (!bucket) throw new Error("R2_BUCKET env var is required"); + const uploadParams = { - Bucket: process.env.R2_BUCKET, + Bucket: bucket, Key: r2Key, Body: imageBuffer, ContentType: "image/png", CacheControl: "public, max-age=31536000", // 1 year };- const publicUrl = `${process.env.R2_PUBLIC_URL}/${r2Key}`; + const baseUrl = (process.env.R2_PUBLIC_URL ?? "").replace(/\/$/, ""); + if (!baseUrl) throw new Error("R2_PUBLIC_URL env var is required"); + const publicUrl = `${baseUrl}/${r2Key}`;
111-124: Replace irrelevant React Email section with relevant resources.This section appears copy‑pasted and unrelated.
-## Learn more - -### React Email docs - -Check out the [React Email docs](https://react.email/docs) and learn how to set up and use React Email, including how to preview your emails locally. - -<CardGroup cols={2}> - <Card title="Components" icon="puzzle-piece" href="https://react.email/components"> - Pre-built components you can copy and paste into your emails. - </Card> - <Card title="Templates" icon="rectangle-list" href="https://react.email/templates"> - Extensive pre-built templates ready to use. - </Card> -</CardGroup> +## Learn more + +- Replicate docs for your chosen model +- Trigger.dev Wait tokens (/wait-for-token) and Webhooks +- Cloudflare R2 S3 API (PUT object, public URLs)
32-33: Nit: TypeScript file extension.The snippet path ends with .tsx but no JSX is used; consider
.tsfor accuracy.
📜 Review details
Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro
📒 Files selected for processing (4)
docs/docs.json(2 hunks)docs/guides/example-projects/product-image-generator.mdx(1 hunks)docs/guides/examples/replicate-image-generation.mdx(1 hunks)docs/guides/introduction.mdx(2 hunks)
⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (1)
- GitHub Check: Analyze (javascript-typescript)
🔇 Additional comments (6)
docs/docs.json (2)
346-346: Nav entry added correctly; please sanity‑check route render.Slug matches the new page path. After deploy, verify the link appears under Guides & examples → Example projects and loads without 404.
381-381: Nav entry added correctly; confirm route and build.Slug matches the new example page. Please confirm sidebar/nav highlighting and search indexing pick it up.
docs/guides/introduction.mdx (2)
55-56: New example project row looks good; verify repo URL.Content and ordering match the rest of the table. Double‑check the GitHub path resolves post‑merge.
83-83: New example task row looks good; ensure cross‑link consistency.Confirm this slug matches the nav entry and the page’s title/sidebarTitle.
docs/guides/example-projects/product-image-generator.mdx (1)
57-61: Verify internal anchors.Confirm “Batch operations” anchor exists at /triggering#tasks-batchtrigger; if the heading ID differs, update the fragment.
docs/guides/examples/replicate-image-generation.mdx (1)
43-50: Keep image_input; update stale 'Flux' commentVerified: google/nano-banana expects image_input (an array of image URLs); do not change the key to image.
Location: docs/guides/examples/replicate-image-generation.mdx (lines 43–50) — replace the inline comment "Use Flux with structured prompt" with a neutral comment such as "Create prediction".Likely an incorrect or invalid review comment.
No description provided.