feat: generate 3D plans using gemini integration#7
Conversation
📝 WalkthroughWalkthroughThis PR adds end-to-end 3D visualization rendering: a new ChangesPlanly 3D Visualization Feature
Estimated code review effort🎯 3 (Moderate) | ⏱️ ~20 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Warning There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure. 🔧 ESLint
ESLint skipped: no ESLint configuration detected in root package.json. To enable, add 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 |
There was a problem hiding this comment.
Actionable comments posted: 2
🧹 Nitpick comments (2)
app/routes/visualizer.$id.tsx (1)
45-55: 💤 Low value
runGenerationis not in the dependency array.While the
hasInitialGeneratedref prevents practical issues, ESLint'sreact-hooks/exhaustive-depsrule would flag this. Consider wrappingrunGenerationinuseCallbackwith proper dependencies, or inlining the generation logic within the effect.🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@app/routes/visualizer`.$id.tsx around lines 45 - 55, The effect uses runGeneration but doesn't include it in its dependency array, triggering react-hooks/exhaustive-deps; fix by either wrapping runGeneration in useCallback (exporting a stable function reference) with all its internal dependencies listed, then add runGeneration to the useEffect deps, or move the generation logic directly into the useEffect body and remove the external runGeneration reference; ensure hasInitialGenerated, initialImage, initialRender and setCurrentImage remain referenced correctly and that the useCallback dependencies mirror any state/props used inside runGeneration.lib/ai.action.ts (1)
5-5: 💤 Low valueTypo in function name:
fetchaDataUrl.Should be
fetchAsDataUrlorfetchDataUrlfor clarity.Proposed fix
-export const fetchaDataUrl = async (url: string): Promise<string> => { +export const fetchAsDataUrl = async (url: string): Promise<string> => {Also update the call sites on lines 20 and 39.
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@lib/ai.action.ts` at line 5, Rename the misspelled function fetchaDataUrl to a clearer name (e.g., fetchAsDataUrl or fetchDataUrl) and update all usages and exports to match; specifically change the function declaration export const fetchaDataUrl to export const fetchAsDataUrl (or fetchDataUrl), update any internal references/call sites that invoke fetchaDataUrl, and update any exported name consumers/imports so builds/tests reference the new identifier consistently.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@app/routes/visualizer`.$id.tsx:
- Line 12: The component destructures name from location.state but the JSX still
renders a hardcoded "Untitled Project"; update the render to use the
destructured name (fallback to "Untitled Project" if name is falsy) so the
project title uses the passed-in value — locate the destructuring of
location.state (const { initialImage, initialRender, name } = location.state ||
{}) and replace the hardcoded 'Untitled Project' in the JSX with name ||
'Untitled Project' (or name ?? 'Untitled Project').
In `@lib/ai.action.ts`:
- Line 19: The generate3DView function signature uses an undefined type
Generate3DViewParams; add or import a proper type definition for
Generate3DViewParams (e.g., an interface with sourceImage: string | Buffer |
File depending on how images are passed) and export/import it where types are
centralized so TypeScript compiles; update the file to reference the new/renamed
type and ensure any callers match the property name sourceImage used by
generate3DView.
---
Nitpick comments:
In `@app/routes/visualizer`.$id.tsx:
- Around line 45-55: The effect uses runGeneration but doesn't include it in its
dependency array, triggering react-hooks/exhaustive-deps; fix by either wrapping
runGeneration in useCallback (exporting a stable function reference) with all
its internal dependencies listed, then add runGeneration to the useEffect deps,
or move the generation logic directly into the useEffect body and remove the
external runGeneration reference; ensure hasInitialGenerated, initialImage,
initialRender and setCurrentImage remain referenced correctly and that the
useCallback dependencies mirror any state/props used inside runGeneration.
In `@lib/ai.action.ts`:
- Line 5: Rename the misspelled function fetchaDataUrl to a clearer name (e.g.,
fetchAsDataUrl or fetchDataUrl) and update all usages and exports to match;
specifically change the function declaration export const fetchaDataUrl to
export const fetchAsDataUrl (or fetchDataUrl), update any internal
references/call sites that invoke fetchaDataUrl, and update any exported name
consumers/imports so builds/tests reference the new identifier consistently.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 6f641399-7251-4fb6-8d62-5971aedfc439
⛔ Files ignored due to path filters (1)
assets/example-floor-plan-1.jpgis excluded by!**/*.jpg
📒 Files selected for processing (5)
app/routes/home.tsxapp/routes/visualizer.$id.tsxlib/ai.action.tslib/ai.actions.tslib/constants.ts
| return ( | ||
| <section> | ||
| <h1>{name || 'Untitled Project'}</h1> | ||
| const { initialImage, initialRender, name } = location.state || {}; |
There was a problem hiding this comment.
name is destructured but never used; hardcoded "Untitled Project" displayed instead.
Line 12 extracts name from location state but Line 73 ignores it and displays 'Untitled Project'.
Proposed fix
- <h2>{'Untitled Project'}</h2>
+ <h2>{name || 'Untitled Project'}</h2>Also applies to: 73-73
🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@app/routes/visualizer`.$id.tsx at line 12, The component destructures name
from location.state but the JSX still renders a hardcoded "Untitled Project";
update the render to use the destructured name (fallback to "Untitled Project"
if name is falsy) so the project title uses the passed-in value — locate the
destructuring of location.state (const { initialImage, initialRender, name } =
location.state || {}) and replace the hardcoded 'Untitled Project' in the JSX
with name || 'Untitled Project' (or name ?? 'Untitled Project').
| }); | ||
| } | ||
|
|
||
| export const generate3DView = async ({sourceImage}: Generate3DViewParams) => { |
There was a problem hiding this comment.
Missing type definition for Generate3DViewParams.
The type is used but never defined or imported, causing a TypeScript compilation error.
Proposed fix: Add the type definition
import {getImageExtension} from "./utils";
import puter from "`@heyputer/puter.js`";
import {PLANLY_AI_RENDER_PROMPT} from "./constants";
+
+interface Generate3DViewParams {
+ sourceImage: string;
+}🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
In `@lib/ai.action.ts` at line 19, The generate3DView function signature uses an
undefined type Generate3DViewParams; add or import a proper type definition for
Generate3DViewParams (e.g., an interface with sourceImage: string | Buffer |
File depending on how images are passed) and export/import it where types are
centralized so TypeScript compiles; update the file to reference the new/renamed
type and ensure any callers match the property name sourceImage used by
generate3DView.
Summary by CodeRabbit
New Features
Chores