← back to Wallco Ai
studio: show rendered image + 3 room settings (bedroom/living_room/dining_room) inline after compose · T18
0b4eba7f262abf743f64de21f75a625176d71df2 · 2026-05-12 08:26:34 -0700 · SteveStudio2
Files touched
Diff
commit 0b4eba7f262abf743f64de21f75a625176d71df2
Author: SteveStudio2 <stevestudio2@SteveStacStudio.lan>
Date: Tue May 12 08:26:34 2026 -0700
studio: show rendered image + 3 room settings (bedroom/living_room/dining_room) inline after compose · T18
---
server.js | 52 ++++++++++++++++++++++++++++++++++------------------
1 file changed, 34 insertions(+), 18 deletions(-)
diff --git a/server.js b/server.js
index 16220cc..e642501 100644
--- a/server.js
+++ b/server.js
@@ -7074,7 +7074,6 @@ document.getElementById('btn-compose').addEventListener('click', async function(
'<div style="font-size:10px;color:#999;letter-spacing:.06em;text-transform:uppercase;margin-bottom:4px">Prompt</div>'+
'<div style="font-size:11px;font-family:ui-monospace,Menlo,monospace;color:#333;line-height:1.45;max-height:140px;overflow-y:auto">'+safePrompt+'</div>'+
'</div>'+
- '<div id="studio-room-frame" style="border:1px solid #eee;border-radius:6px;aspect-ratio:4/3;background:#fafafa center/cover no-repeat;position:relative;display:flex;align-items:center;justify-content:center;color:#999;font-size:11px;overflow:hidden">Room setting loading…</div>'+
'<div style="display:flex;flex-direction:column;gap:8px;margin-top:auto">'+
'<a href="/design/'+j.design_id+'" target="_blank" class="btn-primary" style="text-align:center" rel="noopener noreferrer">View design →</a>'+
'<a href="'+imgUrl+'" download class="btn-outline" style="text-align:center">Download pattern</a>'+
@@ -7082,31 +7081,48 @@ document.getElementById('btn-compose').addEventListener('click', async function(
'</div>'+
'</div>'+
'</div>'+
+ // 3 room settings row — one per category, in parallel.
+ '<div style="padding:14px 14px 12px;background:#fafafa;border-top:1px solid #eee">'+
+ '<div style="font-size:10px;color:#999;letter-spacing:.08em;text-transform:uppercase;margin-bottom:8px">See it in a room · 3 categories</div>'+
+ '<div id="studio-rooms-grid" style="display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px">'+
+ '<div class="studio-room-cell" data-room="bedroom" data-label="Bedroom" style="position:relative;border:1px solid #eee;border-radius:6px;aspect-ratio:4/3;background:#fafafa center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#999;font-size:11px;overflow:hidden">Bedroom · loading…</div>'+
+ '<div class="studio-room-cell" data-room="living_room" data-label="Living Room" style="position:relative;border:1px solid #eee;border-radius:6px;aspect-ratio:4/3;background:#fafafa center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#999;font-size:11px;overflow:hidden">Living Room · loading…</div>'+
+ '<div class="studio-room-cell" data-room="dining_room" data-label="Dining Room" style="position:relative;border:1px solid #eee;border-radius:6px;aspect-ratio:4/3;background:#fafafa center/cover no-repeat;display:flex;align-items:center;justify-content:center;color:#999;font-size:11px;overflow:hidden">Dining Room · loading…</div>'+
+ '</div>'+
+ '<div style="font-size:9px;color:#bbb;margin:6px 0 0;letter-spacing:.04em">Rendered in parallel · ~10-30s each</div>'+
+ '</div>'+
'</div>'
);
- // R0b — kick off room render in background; swap placeholder when it lands.
- var roomFrame = document.getElementById('studio-room-frame');
- if (roomFrame) {
- roomFrame.innerHTML = '<span style="color:#999;font-size:11px">Rendering room…</span>';
+ // R0b/T18 — kick off 3 room renders in parallel (one per category).
+ // The first room that lands is linked onto this studio_renders row so the
+ // personal gallery still shows pattern+room together.
+ var roomCells = document.querySelectorAll('#studio-rooms-grid .studio-room-cell');
+ var roomLinked = false;
+ Array.prototype.forEach.call(roomCells, function(cell){
+ var rt = cell.dataset.room;
+ var label = cell.dataset.label;
fetch('/api/room', {
method:'POST', headers:{'Content-Type':'application/json'},
- body: JSON.stringify({ design_id: j.design_id, roomType: 'bedroom' })
+ body: JSON.stringify({ design_id: j.design_id, roomType: rt })
}).then(function(r){ return r.json(); }).then(function(rd){
if (rd && rd.ok && rd.image_url) {
- roomFrame.style.backgroundImage = 'url(\\''+rd.image_url+'\\')';
- roomFrame.innerHTML = '<span style="position:absolute;bottom:6px;left:8px;background:rgba(0,0,0,.6);color:#fff;padding:2px 6px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.06em">Bedroom · #'+rd.room_id+'</span>';
- // R0c — link the room onto this render row so the gallery shows pattern+room together.
- if (rd.room_id) fetch('/api/studio-renders/'+j.design_id+'/link-room', {
- method:'POST', headers:{'Content-Type':'application/json'},
- body: JSON.stringify({ sid: SID, room_id: rd.room_id })
- });
- // Refresh personal gallery (if visible)
- if (typeof loadMyRenders === 'function') loadMyRenders();
+ cell.style.backgroundImage = 'url(\\''+rd.image_url+'\\')';
+ cell.innerHTML = '<span style="position:absolute;bottom:6px;left:8px;background:rgba(0,0,0,.6);color:#fff;padding:2px 6px;border-radius:3px;font-size:9px;text-transform:uppercase;letter-spacing:.06em">'+label+' · #'+rd.room_id+'</span>';
+ if (rd.room_id && !roomLinked) {
+ roomLinked = true;
+ fetch('/api/studio-renders/'+j.design_id+'/link-room', {
+ method:'POST', headers:{'Content-Type':'application/json'},
+ body: JSON.stringify({ sid: SID, room_id: rd.room_id })
+ });
+ if (typeof loadMyRenders === 'function') loadMyRenders();
+ }
} else {
- roomFrame.innerHTML = '<span style="color:#c44;font-size:11px">Room render failed</span>';
+ cell.innerHTML = '<span style="color:#c44;font-size:11px">'+label+' failed</span>';
}
- }).catch(function(){ roomFrame.innerHTML = '<span style="color:#c44;font-size:11px">Room render failed</span>'; });
- }
+ }).catch(function(){
+ cell.innerHTML = '<span style="color:#c44;font-size:11px">'+label+' failed</span>';
+ });
+ });
// Delete button — wired by R0d.
var delBtn = document.getElementById('studio-delete-btn');
if (delBtn) delBtn.addEventListener('click', function(){
← fe60c05 wallco.ai · empty /compare now renders a 'More designs to ex
·
back to Wallco Ai
·
wallco.ai · /api/designs/search now emits did_you_mean[] on 4739bcb →