AI Room Visualiser for WooCommerce

A production-minded WordPress plugin that lets a shopper upload a photo of their room from a WooCommerce product page and preview that room with the selected flooring applied by OpenAI image editing.

This repository is a portfolio release of a working commercial-style integration. It demonstrates PHP/WordPress backend engineering, a browser upload experience, REST API design, image-processing workflows, privacy-aware temporary storage, and practical controls for paid AI usage.

Engineering highlights

• Sends the room photo and product texture as multipart image inputs to the OpenAI Images edits endpoint.
• Resizes uploads in the browser before transfer to reduce latency and bandwidth.
• Protects the render endpoint with a WordPress REST nonce and validates input types and sizes server-side.
• Prevents duplicate paid renders with request locking and a 24-hour exact-result cache.
• Adds configurable site and visitor usage limits as a cost brake.
• Keeps customer room uploads in memory rather than writing them to the WordPress filesystem.
• Serves completed renders through tokenised REST URLs and schedules them for deletion after one hour.
• Supports a dedicated visualiser texture per WooCommerce product, with product-image fallback.
• Reports upstream request IDs, elapsed time, and gateway failures for production diagnosis.

Request flow

Product page
  -> browser validates and resizes room photo
  -> nonce-protected WordPress REST endpoint
  -> cache / duplicate-request check
  -> room photo + product texture sent to OpenAI
  -> temporary render saved with an expiring token
  -> customer previews or downloads the result
  -> WordPress Cron removes the render

Requirements

• WordPress 6.0 or later
• WooCommerce
• PHP 8.1 or later
• An OpenAI API key with image-model access and billing enabled

Installation

1. Download or clone this repository into wp-content/plugins/natrul-room-visualiser.
2. Activate AI Room Visualiser for WooCommerce in WordPress.
3. Open WooCommerce > Room Visualiser.
4. Add an OpenAI API key, choose the model and quality, then set daily render limits.
5. Optionally add a clean visualiser texture to individual WooCommerce products.

The API key is stored in WordPress options and is only used server-side; it is not exposed to the browser or committed to this repository.

Configuration

The settings screen includes:

• image model and render quality;
• editable render prompts, including material-specific guidance;
• per-site and per-visitor daily limits;
• customer-facing button and disclaimer text.

The nrv_api_request_body filter can adjust scalar multipart fields before a request is assembled.

Project structure

assets/
  css/visualiser.css          Customer-facing UI
  js/visualiser.js            Upload, resize and render workflow
includes/
  class-nrv-frontend.php      WooCommerce product-page integration
  class-nrv-product-texture.php
  class-nrv-rest.php          REST API, caching and OpenAI integration
  class-nrv-settings.php      Admin settings and validation
natrul-room-visualiser.php    Plugin bootstrap and defaults
uninstall.php                 Option and counter cleanup

Validation

GitHub Actions checks every PHP file for syntax errors on PHP 8.1 and runs Node's syntax checker against the browser JavaScript.

Privacy and cost notes

Room photos are transferred to OpenAI to generate the requested visualisation. A production site should explain that processing clearly in its privacy notice and obtain any consent appropriate to its jurisdiction. Image generation is a paid API operation, so conservative daily limits and cache settings are recommended.

License

GPL-2.0-or-later. See LICENSE.