Photo → Pattern → Futures → First Move

See what a place could become.

Upload one property photo, answer the obvious questions, and get a believable first plan: what the place is trying to become, where the ideas sit, and what to test first.

Upload property photo

1Upload one clear photo

2Tell VerdeAI the situation

3Create your futures board

4Copy, save, or export the plan

Start here

Create your result board.

Upload a photo or run the self-test. VerdeAI will build a clear board with six futures, a recommendation, and one first move.

⬜ Photo ⬜ Situation ⬜ Main problem ⬜ Analysis

Next best action

Upload a photo or use demo mode to begin.

Need a no-upload test?

Run the shaded garden self-test. VerdeAI will simulate photo upload, starter clue, analysis, report, Vision Board, and a saved project card.

Autosave is ready.

v6.2 keeps a local recovery copy while you test, so closing the page should not mean starting from zero.

Tester pass

Share this without explaining the whole thing.

Ask testers to do one quick loop: upload a real photo, tap the closest starter clue, read one overlay card, then copy the tester summary or send quick feedback. For app checks, use the public tester page or shaded garden self-test first.

Upload or demo
Tap one clue
Read overlay
Save or export

Public Tester Page

Share this first

One photo. One clue. One visual idea.

This is the simplified page for real testers. They should not need to understand the whole app. Upload a photo or run the shaded self-test, then look at the plant overlay and first move. AI rendering is being prepared, but the safe beta still shows concept overlays until you choose a paid provider.

Upload tester photo

1Upload or run self-test
2Tap one starter clue
3Screenshot the plant overlay
4Copy the tester summary

Plant Overlay Preview

Plant overlay mockup, not a final AI render yet. It is meant to show where ideas could sit on the actual photo.

Your Property Today

Upload your property photoTap, click, or drag an image here

Closest situation Preferred direction Postcode / climate clue Budget feel Maintenance tolerance Main problem

Property note

Ready0%

Upload a photo or use demo mode to begin.

Photo readiness

No image loaded yet. Demo mode is available for a quick test.

Pick one clue. VerdeAI does the rest.

This build does not fully read the image yet. The photo becomes the overlay base; one starter clue tells VerdeAI how to analyse it without pretending.

Generated workspace

Six possible futures

The cards will become more specific once you run an analysis.

Waiting for a photo or demo run.

Property DNA

What VerdeAI noticed

Biggest warning

Run the analysis first. The garden oracle refuses to guess before coffee.

Site clues

Add a main problem and property note to make the result sharper.

Next steps

Live report preview

VerdeAI Recommendation

Upload, analyse, then choose.

Why this for you?

VerdeAI will use the situation, goal, postcode clue, and your note to make the result less generic.

Property Compass

Why this feels specific

Oracle Reading

A place is rarely asking for more stuff first. Usually it wants a clearer role.

Tester Feedback

Usefulness Notes

Original

Selected future overlay

Future Scorecard

Property movie — 5 year evolution

Action Roadmap

Risk / Confidence Notes

Plant / material palette

Printable VerdeAI Report

Copy this after testing. v6.2 keeps the current analysis stable, improves the public dashboard polish, and prepares render prompts without charging for AI.

Design Studio

Refine selected future

These controls change style only. In v6.0 the analysis stays locked and autosaved, so design refinements cannot reset the situation, pattern, main problem, or overlay labels.

Safe to test: tick Cleaner / minimal, then check Report or Vision Board. The result should stay on the same analysis.

More native plants More colour More privacy More seating More lighting Lower budget Cleaner / minimal Wildlife focus

Style intensity

AI Prompt Preview

Send this to a tester

One clean handoff

Copy the tester result, send it with one screenshot, and ask for one simple reply: useful, confusing, or not believable yet.

Run a real photo or self-test.
Tap Copy clean tester result.
Send it with one screenshot of the board.
Ask: “Would you try the first move?”

Tester Export

Shareable test summary

Use this when sending VerdeAI to an early tester by text, Messenger, Facebook, or a feedback form. Keep it short: one board screenshot, one copied result, one question.

Alpha Readiness

AI Render Roadmap

Real rendering, safely locked until the backend is ready.

VerdeAI still uses free concept boards. v6.2 makes the next rendering step easier to understand: pick one future, preview the prompt and likely cost, then only render after a secure backend confirms everything.

Real AI renderingNot connected

Cost riskLocked

API keysServer-side only

Current modeFree concept boards

What happens next?

1 Choose one future 2 Preview prompt 3 Preview cost 4 Confirm one render 5 Keep concept board if render fails

Choose first render provider

Recommended path: start with one provider and one image.

VerdeAI is ready to plan real rendering, but paid rendering stays disabled until a backend proxy, server-side API key, and cost confirmation are in place.

Replicate / FLUXPlanned

Good first candidate for realistic landscape-style images with simple per-image testing.

Needs backend proxy and Replicate API key.

OpenAI image generationPlanned

Strong prompt-following option, but pricing and image workflow should be tested carefully before all-six rendering.

Needs backend proxy and server-side OpenAI API key.

Stability AIPlanned

Credit-based image provider option. Useful later if it gives better cost or style control for property concepts.

Needs backend proxy and server-side Stability API key.

Recommended safe first path Not ready yet — ready later

Choose one provider only: start with Replicate / FLUX.
Render one future image only.
Show the estimated cost before rendering.
Keep the concept-board fallback if the render fails.
Require a second confirmation before rendering all six futures.

First provider setup checklist

Backend host chosen Netlify Functions, Cloudflare Workers, Vercel, or a small backend.

Provider account ready Use one provider first; Replicate / FLUX is the recommended first test path.

Server-side API key Stored only in backend environment variables, never in frontend code.

Endpoint tested /api/render/estimate works before /api/render is unlocked.

Cost lock confirmed One render requires cost confirmation; all six require a second confirmation.

Deployment limits

GitHub Pages is fine for the app, not for secret API keys.

GitHub Pages can host VerdeAI's public interface, but it cannot safely hide provider API keys. Real rendering needs a backend/proxy layer.

Netlify FunctionsGood static-site companion for serverless API routes.Possible first backend path.

Cloudflare WorkersLightweight edge functions with environment variables.Good low-cost candidate.

VercelSimple serverless functions with frontend hosting options.Strong developer path.

Small backendMore control, but more setup and maintenance.Later option.

Which backend host should I use?

Recommended first path: keep the frontend where it is, add one small proxy.

GitHub Pages can keep hosting VerdeAI's public interface. The first real render test only needs a small serverless proxy that hides the provider key, estimates cost, and renders one future after confirmation.

Recommended first

Netlify Functions or Cloudflare Workers

Use whichever is easier to set up from your current accounts. Both can run a small /api/render proxy without putting secret API keys inside the browser.

Best first provider: Replicate / FLUX.
First test: one future image only.
Fallback: keep the concept board if rendering fails.
Cost rule: show estimated cost before any paid render.

Netlify FunctionsSimple first path

Good match if VerdeAI is later moved to Netlify or you want a familiar static-site + function setup.

Needs: Netlify project, environment variable for provider key, one serverless render function.

Cloudflare WorkersGood proxy path

Good fit if you want to keep the current frontend and add a separate lightweight render proxy.

Needs: Cloudflare account, Worker secret for provider key, CORS allowed for the VerdeAI site.

VercelDeveloper-friendly

Strong option if the project later becomes a fuller web app with API routes and deployments together.

Needs: Vercel project, environment variable, API route deployment.

Small custom backendLater

Most control, but more setup, maintenance, and hosting decisions. Not the best first test.

Needs: server hosting, deploy process, environment variables, monitoring, and CORS setup.

Recommended next setup step

Choose one backend host, add a server-side Replicate API key there, test /api/render/estimate, then unlock one confirmed mock-to-real render. Do not render all six until one image is reviewed.

Recommended setup package

First real render path: one small proxy, one provider, one image.

Keep GitHub Pages as VerdeAI's public frontend for now. Add one small backend/proxy only for rendering, start with Replicate / FLUX, estimate cost first, then test one future image after confirmation.

Recommended

GitHub Pages frontend + small backend proxy + Replicate / FLUX

This is the practical first test path because it keeps the current site working, avoids exposing API keys, and limits spending to one confirmed image.

Choose backend hostUse Netlify Functions or Cloudflare Workers first. Keep GitHub Pages for the frontend until there is a reason to move it.

Create provider accountStart with Replicate / FLUX for the first realistic landscape-style render test.

Add server-side API keyStore the provider key only in backend environment variables. Never place keys in index.html, JavaScript, or GitHub Pages.

Deploy render endpointExpose a small backend route for /api/render/estimate and /api/render. The browser calls VerdeAI's backend, not the image provider directly.

Test estimate endpointConfirm that cost preview works before any real render is unlocked.

Test one render onlyRender one future after cost confirmation. All-six rendering stays locked until the first image is reviewed.

What will need doing later

Create or choose the backend host, add the private provider key there, deploy the render endpoint, test the estimate endpoint, then approve one paid image test. Nothing in v7.1 makes paid calls.

When I am ready to connect real rendering

Do this later, only when one paid image test is worth it.

This guide turns the backend plan into plain steps. Nothing here connects a paid provider yet; it simply shows the safest order for the first real render test.

1Keep GitHub Pages frontendThe current public VerdeAI page can stay where it is.

2Choose Netlify Functions or Cloudflare WorkersUse one small backend/proxy to hide the provider key.

3Create Replicate accountReplicate / FLUX remains the recommended first realistic landscape test.

4Add server-side API keyThe key goes in backend environment variables only.

5Test estimate endpointCost preview must work before any paid render button is unlocked.

6Render one image onlyOne future first. All-six rendering stays locked until the first result is reviewed.

What will cost money?

Provider image generation once real rendering is enabled.
Possibly backend hosting if free limits are exceeded.
Repeated renders, especially all-six future sets.

What stays free?

The current GitHub Pages frontend.
Concept boards, mock render previews, reports, sharing, and saved projects.
Prompt preview and cost-estimate rehearsal before provider connection.

Do not do this yet

Do not paste API keys into index.html, JavaScript files, GitHub Pages settings, screenshots, or public GitHub files. Real provider keys belong only in a backend host's secret environment variables.

AI Render Setup

Choose a future provider plan

Rendering is not connected yet. These controls only prepare the plan, prompts, mock results, and cost warnings. Nothing paid happens from this static page.

Replicate / FLUXPlanned option for realistic image generation. Needs backend key.planned

OpenAI image generationPlanned option for prompt-led image generation. Needs backend key.planned

Stability AIPlanned option for credit-based rendering. Needs backend key.planned

Future provider Backend proxy status

Safety rule: API keys belong in server environment variables only. VerdeAI will not make paid image calls until a backend proxy is configured and you confirm the cost.

Render readiness checklist

Before paid renders

One-future render rehearsal

Choose one future before spending anything

This is a safe simulation. Pick a future, preview the property-specific prompt, check the estimated cost, then confirm a mock render. No provider is contacted in v7.1. This is only a rehearsal for the future paid render flow.

Choose a future to render

Cost rule: real rendering will start with one image only. All six futures stay locked behind a second confirmation when a backend provider is connected.

First real provider setup

What is needed before real images?

This is the practical path before VerdeAI can turn one concept board into a real AI-rendered image. It stays disabled until each item is handled safely.

1Backend hostingA server endpoint must run the render request, not the browser.

2Server-side API keyThe provider key goes in environment variables only.

3Provider accountChoose one provider first: Replicate / FLUX, OpenAI, or Stability.

4Cost estimateShow the estimated price before any paid render happens.

5Render one image firstOnly unlock all six futures after the first render is reviewed.

Developer detailsBackend proxy contract

Future endpoint shape

The browser should call VerdeAI's own backend. The backend then calls the image provider using a private API key stored in server environment variables.

v7.1 scaffold ready:GET /api/render/providersPOST /api/render/estimatePOST /api/render

POST /api/render
{
  futureId,
  provider,
  prompt,
  imageReference,
  confirmCost: true,
  maxCostUsd,
  count: 1,
  fallback: "concept-board"
}

Render Prompt Builder

Generated from the current property analysis, selected future, starter clue, visible-site language, and design refinements. Copy one prompt to test manually with a provider later, or use the mock render buttons to check the flow without spending money.

Deployment

Netlify-ready static package

Unzip this package.
Drag the full verdeai-v6.2 folder into Netlify.
No build command is required.
Open the generated link and test shaded self-test → result board → copy tester result → AI Setup safe-mode check.

Included files

index.html
styles/main.css
js/app.js
config.js
netlify.toml and _redirects
CHANGELOG.md and BUILD_STATUS.md

Property Futures Board

Generated result board

Your property futures board.

Every upload, demo, or self-test becomes one clear result: today’s property, six futures, VerdeAI’s recommendation, and one practical first move.

Upload property photo

After a board is ready, this button takes testers straight to the result.

Your board is ready

Result summary

Upload, demo, or self-test to create your board.

VerdeAI will summarise the best future, why it fits, and the first practical move here.

Your property today

Six possible futures

Generated from the current photo, selected clues, and VerdeAI pattern logic. These are concept boards, not final AI renders yet.

5-year property movie

Optional AI rendering

v7.1 keeps AI rendering optional and secondary. No paid image calls are made here; every result board uses honest concept boards until a safe backend rendering provider is connected.

Tester Mode

60-second tester pass

v6.0 is designed so an early tester can create a Property Futures Board, copy a short result, and give one useful sentence of feedback without you explaining every button.

Owner shortcut:

Use this first when you just want to check the app works without uploading the same photo again.

Upload one real property photo or use demo mode.
Use the Next best action button if unsure.
Tap the closest starter suggestion. It runs the analysis automatically.
Read the first overlay card and the Best first move.
Open Export and copy the tester invite or summary.
Save feedback before leaving, or tell the owner what felt fake or useful.

Questions for testers

Did the six futures make you see the property differently?
Did the result feel specific to the photo and situation?
Which future would you actually try?
Was one first action clear enough?
Did the clue coaching make it clear that this is not full AI vision yet?
What felt fake, confusing, or unfinished?

Project History

This records useful tester actions such as photo upload, starter clue, analysis, save, and design refinement.

Climate profile

Add a postcode and run analysis to generate a basic climate clue.

Maintenance calendar

Vision Board

Quick view of the current future, overlay labels, design direction, and first experiment. The labels now sync with the latest analysis result.

Saved Local Projects

Saved in this browser/domain only. v6.0 also autosaves the current session after upload, clue, analysis, design, and report changes.