Roomify: KI-Innenraum-Rendering auf React Puter

Roomify: Entwicklung eines KI-Innenraumvisualisierers mit React und Serverless Puter

Roomify verwandelt einen 2D-Grundriss in Sekundenschnelle in ein fotorealistisches 3D-Rendering. Die App nutzt React 19 mit TypeScript für das Frontend und die Puter-Plattform für serverlose Logik, Speicherung und KI-Generierung. Ohne eigenes Backend interagiert das Frontend direkt über das puter.js SDK mit der Puter-API.

Die Architektur verzichtet auf einen herkömmlichen Server: Datei-Uploads, Projekt-Erstellung und KI-Aufrufe laufen in Workern ab. Dies vereinfacht das Deployment und die Skalierung für erfahrene Entwickler.

Tech-Stack und ihre Rollen

• React 19 + TypeScript: Ein typisiertes Frontend mit HMR über Vite.
• React Router 7: Routen für die Startseite und den Visualisierer.
• Tailwind CSS: Utility-first-Styling ohne benutzerdefiniertes CSS.
• Lucide React: Icons für die Benutzeroberfläche.
• Puter.js: Zugriff auf Dateispeicher, KV, Worker und KI-Modelle direkt aus dem Browser.

Puter bietet serverlose Worker, KV-Speicher und persistenten Dateispeicher. Worker werden über puter.action aufgerufen, KI über puter.ai.generate.

Architektur: Vom Upload zum Rendering

Verarbeitungsablauf:

• Lade den Grundriss mit puter.file.write hoch.
• Erhalte eine öffentliche URL für die Datei.
• Rufe den project.create-Worker auf, um Metadaten in KV zu schreiben.
• Generiere über den ai.render3d-Worker: Lade das Bild, erstelle einen Prompt, rufe Claude/Gemini auf, speichere das Ergebnis.
• Aktualisiere KV mit der Render-URL und sende sie zurück an das Frontend.

Das Frontend zeigt den Originalgrundriss und das Rendering mit react-compare-slider für den Vergleich an.

Worker-Funktionen: Code und Logik

Worker-Funktionen in JavaScript werden über die Puter-CLI hochgeladen.

Projekt erstellen:

// lib/puter.action.ts
export async function createProject({ item, visibility }) {
  const result = await puter.action('project.create', {
    item,
    visibility,
  });
  return result;
}

export async function getProjects() {
  return await puter.action('project.list');
}

export async function getProjectById({ id }) {
  return await puter.action('project.get', { id });
}

Rendering generieren:

// worker: ai.render3d
export default async ({ sourceImage, style = 'photorealistic' }) => {
  const imageUrl = typeof sourceImage === 'string' ? sourceImage : await puter.file.url(sourceImage);
  
  const prompt = `
    Transformiere diesen Grundriss in ein ${style} 3D-Innenraumrendering.
    Das Bild zeigt einen Raumplan mit Wänden, Fenstern und Türen.
    Generiere eine realistische Ansicht aus einer Perspektive, die den Raum optimal präsentiert.
    Füge passende Möbel, Texturen, Beleuchtung und Schatten hinzu.
    Es soll wie eine professionelle Architekturvisualisierung aussehen.
  `;
  
  const result = await puter.ai.generate({
    model: 'claude-3-sonnet',
    prompt,
    images: [imageUrl],
    responseFormat: 'image'
  });
  
  const renderedPath = `/projects/${projectId}/rendered.png`;
  await puter.file.write(renderedPath, result.image);
  
  const key = `project:${projectId}`;
  const project = JSON.parse(await puter.kv.get(key));
  project.renderedImage = puter.file.url(renderedPath);
  await puter.kv.set(key, JSON.stringify(project));
  
  return {
    renderedImage: project.renderedImage,
    renderedPath
  };
};

KV speichert Metadaten: Projektname, Besitzer, Privatsphäre und Dateilinks.

Frontend: Komponenten und Hooks

Die Startseite (Home) zeigt eine Liste von Projekten. Die Upload-Komponente konvertiert eine Datei in Base64:

// components/Upload.tsx
const handleFileChange = async (e) => {
  const file = e.target.files[0];
  if (!file) return;
  const base64 = await toBase64(file);
  onComplete(base64);
};

Der Visualisierer (VisualizerId) nutzt useEffect für die automatische Generierung:

useEffect(() => {
  if (isProjectLoading || hasInitialGenerated.current || !project?.sourceImage) return;
  if (project.renderedImage) {
    setCurrentImage(project.renderedImage);
    hasInitialGenerated.current = true;
    return;
  }
  hasInitialGenerated.current = true;
  void runGeneration(project);
}, [project, isProjectLoading]);

useRef verhindert doppelte Aufrufe. Der State ist lokal, ohne Redux.

Lösung häufiger Probleme

• CORS: Vite-Proxy in der Entwicklung.
• Base64-Größe: Speichere die Datei separat, speichere den Link in KV.
• Doppelte Generierung: useRef + Prüfungen.
• Asynchronität: Ladezustände, Skelette.
• Mobile UI: Tailwind-Responsiveness, Touch-Unterstützung für den Slider.

Validierung: Dateien bis 10 MB, JPG/PNG. Ladeanzeigen für 10-15 Sekunden Generierungszeit.

Wichtige Erkenntnisse

• Puter ersetzt das Backend: Worker, KV, Dateien und KI in einem SDK.
• React Hooks verwalten den State ohne externe Bibliotheken.
• Prompts definieren die Qualität: Detailliere Wände, Möbel und Beleuchtung.
• Die Architektur skaliert für den Produktionseinsatz ohne DevOps.
• Der Code ist Open-Source, geeignet für Forks und Experimente.

— Editorial Team