Elevate Customs — Space Analyzer

Design Intelligence

Your space, interpreted.

\n A luxury design consultation for your gaming environment\n

You

Space

Dimensions

Games

Preferences

\n Tell us about yourself\n

\n Your personal design consultation begins here. We will address you\n by name throughout your experience.\n

\n \n \n

\n \n

\n\n

✓

You

Space

Dimensions

Games

Preferences

\n Capture Your Space\n

\n Choose how you would like to share your space. More angles means\n more accurate recommendations.\n

\n \n

📷

Multiple Photos

Up to 4 angles of your space

\n \n

🎥

360 Video

\n We extract frames automatically\n

\n \n $\"\"$ \n

Required

Main View

\n \n \n \n \n \n

Standing at entrance

\n Main View\n Remove\n \n

\n \n $\"\"$ \n

Left Wall

\n \n \n \n \n \n

Optional

\n Left Wall\n Remove\n \n

\n \n $\"\"$ \n

Right Wall

\n \n \n \n \n \n

Optional

\n Right Wall\n Remove\n \n

\n \n $\"\"$ \n

Opposite Wall

\n \n \n \n \n \n

Optional

\n Opposite Wall\n Remove\n \n

\n The main view is required. Additional angles give our AI a\n complete picture for more accurate placement recommendations.\n

\n \n \n \n \n \n

Upload your 360 video

\n MP4, MOV, or any standard video format\n

\n \n

\n Extracting frames from your video...\n

\n Extracted frames sent to our designer AI\n

\n \n

\n \n \n Analyze My Space →\n \n

\n \n\n

Our designer AI is studying your space

\n \n Identifying room shape, architectural features, and measurement\n points\n

\n \n\n

✓

You

✓

Space

Dimensions

Games

Preferences

\n \n

\n Room Dimensions\n

\n Choose how you would like to provide your room dimensions. The more\n precise, the more accurate your recommendations.\n

\n \n Feet\n \n \n

\n \n

\n Measure per wall - most accurate\n

\n Our AI identified the key walls to measure. Fill in what you\n can.\n

\n \n

\n Approximate overall dimensions\n

\n Rough length and width is enough to get started.\n

\n Approx. Length (ft)\n

\n Approx. Width (ft)\n

\n \n

\n Skip - just show me options\n

\n Our AI will estimate proportions from your photo. Sizing\n will be approximate.\n

\n \n \n \n

\n \n \n

\n \n\n

✓

You

✓

Space

✓

Dimensions

Games

Preferences

\n Gaming Categories\n

\n Select the types of gaming tables you would like considered.\n

\n \n

\n ✓\n

🎱Pool Table\n

\n \n

\n ✓\n

🏒Shuffleboard\n

\n \n

\n ✓\n

♠️Poker Table\n

\n \n

\n ✓\n

⚽Foosball\n \n \n

\n ✓\n

🏑Air Hockey\n \n \n

\n ✓\n

🎡Roulette\n \n \n

\n ✓\n

🃏Blackjack\n \n \n

\n ✓\n

🎲Craps\n \n \n

\n ✓\n

🏔️Dome Hockey\n \n \n

\n ✓\n

🏓Table Tennis\n \n \n \n

\n \n \n

\n \n\n

✓

You

✓

Space

✓

Dimensions

✓

Games

Preferences

\n How many pieces are you open to?\n

\n \n

One statement piece

\n A single perfectly chosen table that anchors the room and\n becomes the focal point.\n

\n \n

2-3 curated pieces

\n A considered selection of complementary tables that create a\n complete gaming experience.\n

\n \n

A full gaming environment

\n Maximize the space with every category that fits.\n

\n \n What matters most to you?\n

\n \n

Style above all

\n The pieces must feel designed for this specific room.\n

\n \n

Maximum gaming variety

\n Prioritize variety while maintaining quality.\n

\n \n \n

Balance of both

\n Beautiful pieces that offer a rich variety of gaming\n experiences.\n

\n \n \n \n

\n \n \n

\n \n\n

\n Preparing your consultation\n

\n\n

\n Something went wrong. Please try again.\n

\n \n Start Over\n \n

\n\n

\n \n

Design Identity

Space Components

Material and Tone Palette

Designer Layout Vision

Your Curated Selections

\n \n For each category we have curated 3 options matched to your space in\n different finishes. Remove any category you do not want.\n

\n \n \n Explore Full Collection\n \n

\n \n \n \n \n \n \n \n \n \n",[],[142,191],"d2eacdc6-547a-11f1-b807-ee650bb23af1","catalog1.js.ts","2ad14a34-5475-11f1-ae16-ee650bb23af1",88,["D",1779302192641],[],[142,200],"2fd5d5d4-5477-11f1-9b9f-ee650bb23af1","app.js.ts","1bc6958a-5475-11f1-ab3f-ee650bb23af1",84,["D",1779300630515],"function toggleTheme() {\n const h = document.documentElement;\n const d = h.getAttribute(\"data-theme\") === \"dark\";\n h.setAttribute(\"data-theme\", d ? \"light\" : \"dark\");\n document.getElementById(\"theme-icon\").textContent = d ? \"🌙\" : \"☀️\";\n document.getElementById(\"theme-label\").textContent = d ? \"Dark\" : \"Light\";\n localStorage.setItem(\"ec-theme\", d ? \"light\" : \"dark\");\n}\nconst st = localStorage.getItem(\"ec-theme\");\nif (st) {\n document.documentElement.setAttribute(\"data-theme\", st);\n document.getElementById(\"theme-icon\").textContent = st === \"light\"\n ? \"🌙\"\n : \"☀️\";\n document.getElementById(\"theme-label\").textContent = st === \"light\"\n ? \"Dark\"\n : \"Light\";\n}\nconst screens = [\n \"step1\",\n \"step2\",\n \"analyzing\",\n \"step3\",\n \"step4\",\n \"step5\",\n \"loading\",\n \"error\",\n \"results\",\n];\nfunction show(n) {\n screens.forEach((s) => {\n const e = document.getElementById(\"screen-\" + s);\n if (e) e.style.display = s === n ? \"block\" : \"none\";\n });\n}\nfunction goToStep(n) {\n show(\"step\" + n);\n window.scrollTo(0, 0);\n}\nlet currentUnit = \"ft\",\n dimOption = \"walls\",\n qtyPref = \"single\",\n priorityPref = \"style\";\nlet clientFirstName = \"\",\n clientFullName = \"\",\n clientEmail = \"\",\n clientPhone = \"\";\nlet roomAnalysisData = null, uploadType = \"photos\";\nlet slotImages = [null, null, null, null], videoFrames = [];\n\nfunction handleStep1() {\n const first = document.getElementById(\"first-name\").value.trim();\n const last = document.getElementById(\"last-name\").value.trim();\n const email = document.getElementById(\"client-email\").value.trim();\n if (!first) {\n alert(\"Please enter your first name.\");\n return;\n }\n if (!email) {\n alert(\"Please enter your email address.\");\n return;\n }\n clientFirstName = first;\n clientFullName = (first + \" \" + last).trim();\n clientEmail = email;\n clientPhone = document.getElementById(\"client-phone\").value.trim();\n document.getElementById(\"photo-hint\").textContent =\n \"Choose how you would like to share your space, \" + first +\n \". More angles means more accurate recommendations.\";\n goToStep(2);\n}\nfunction setUploadType(t) {\n uploadType = t;\n document.getElementById(\"type-photos\").classList.toggle(\n \"active\",\n t === \"photos\",\n );\n document.getElementById(\"type-video\").classList.toggle(\n \"active\",\n t === \"video\",\n );\n document.getElementById(\"upload-photos\").style.display = t === \"photos\"\n ? \"block\"\n : \"none\";\n document.getElementById(\"upload-video\").style.display = t === \"video\"\n ? \"block\"\n : \"none\";\n checkStep2Ready();\n}\nfunction triggerSlot(i) {\n document.getElementById(\"slot-input-\" + i).click();\n}\nfunction handleSlotFile(i, input) {\n const file = input.files[0];\n if (!file || !file.type.startsWith(\"image/\")) return;\n const reader = new FileReader();\n reader.onload = (ev) => {\n slotImages[i] = { dataUrl: ev.target.result };\n document.getElementById(\"slot-img-\" + i).src = ev.target.result;\n document.getElementById(\"slot-\" + i).classList.add(\"has-image\");\n checkStep2Ready();\n };\n reader.readAsDataURL(file);\n}\nfunction removeSlot(e, i) {\n e.stopPropagation();\n slotImages[i] = null;\n document.getElementById(\"slot-img-\" + i).src = \"\";\n document.getElementById(\"slot-\" + i).classList.remove(\"has-image\");\n document.getElementById(\"slot-input-\" + i).value = \"\";\n checkStep2Ready();\n}\nfunction checkStep2Ready() {\n document.getElementById(\"step2-next\").disabled = uploadType === \"photos\"\n ? slotImages[0] === null\n : videoFrames.length === 0;\n}\nconst vdz = document.getElementById(\"video-drop-zone\");\nvdz.addEventListener(\n \"click\",\n () => document.getElementById(\"video-input\").click(),\n);\nvdz.addEventListener(\"dragover\", (e) => e.preventDefault());\nvdz.addEventListener(\"drop\", (e) => {\n e.preventDefault();\n const f = e.dataTransfer.files[0];\n if (f && f.type.startsWith(\"video/\")) {\n const dt = new DataTransfer();\n dt.items.add(f);\n document.getElementById(\"video-input\").files = dt.files;\n handleVideoFile(document.getElementById(\"video-input\"));\n }\n});\nfunction handleVideoFile(input) {\n const file = input.files[0];\n if (!file) return;\n const url = URL.createObjectURL(file);\n const vel = document.getElementById(\"video-preview\");\n vel.src = url;\n document.getElementById(\"video-preview-wrap\").style.display = \"block\";\n document.getElementById(\"video-drop-zone\").style.display = \"none\";\n document.getElementById(\"video-processing\").style.display = \"block\";\n document.getElementById(\"extracted-frames-wrap\").style.display = \"none\";\n videoFrames = [];\n vel.onloadedmetadata = async () => {\n const dur = vel.duration;\n const times = [];\n for (let i = 0; i < 6; i++) times.push((dur / 7) * (i + 1));\n const frames = [];\n for (const t of times) {\n const f = await extractFrame(vel, t);\n if (f) frames.push(f);\n }\n videoFrames = frames;\n document.getElementById(\"video-processing\").style.display = \"none\";\n const fg = document.getElementById(\"extracted-frames\");\n fg.innerHTML = \"\";\n frames.forEach((f) => {\n const d = document.createElement(\"div\");\n d.className = \"extracted-frame\";\n const img = document.createElement(\"img\");\n img.src = f.dataUrl;\n d.appendChild(img);\n fg.appendChild(d);\n });\n document.getElementById(\"extracted-frames-wrap\").style.display = \"block\";\n checkStep2Ready();\n };\n}\nfunction extractFrame(vel, time) {\n return new Promise((res) => {\n const c = document.createElement(\"canvas\");\n vel.currentTime = time;\n vel.onseeked = () => {\n c.width = vel.videoWidth;\n c.height = vel.videoHeight;\n c.getContext(\"2d\").drawImage(vel, 0, 0);\n const du = c.toDataURL(\"image/jpeg\", 0.75);\n res({ dataUrl: du, base64: du.split(\",\")[1] });\n vel.onseeked = null;\n };\n });\n}\nfunction resetVideo() {\n videoFrames = [];\n document.getElementById(\"video-preview\").src = \"\";\n document.getElementById(\"video-preview-wrap\").style.display = \"none\";\n document.getElementById(\"video-drop-zone\").style.display = \"block\";\n document.getElementById(\"video-processing\").style.display = \"none\";\n document.getElementById(\"extracted-frames-wrap\").style.display = \"none\";\n document.getElementById(\"video-input\").value = \"\";\n checkStep2Ready();\n}\nfunction compress(dataUrl, maxW, q) {\n return new Promise((res) => {\n const img = new Image();\n img.onload = () => {\n const c = document.createElement(\"canvas\");\n let w = img.width, h = img.height;\n if (w > maxW) {\n h = Math.round(h * maxW / w);\n w = maxW;\n }\n c.width = w;\n c.height = h;\n c.getContext(\"2d\").drawImage(img, 0, 0, w, h);\n res(c.toDataURL(\"image/jpeg\", q));\n };\n img.src = dataUrl;\n });\n}\nasync function getImagesToSend() {\n if (uploadType === \"video\") {\n const out = [];\n for (const f of videoFrames.slice(0, 6)) {\n const c = await compress(f.dataUrl, 1200, 0.75);\n out.push({ base64: c.split(\",\")[1], mediaType: \"image/jpeg\" });\n }\n return out;\n } else {\n const out = [];\n for (const s of slotImages) {\n if (!s) continue;\n const c = await compress(s.dataUrl, 1200, 0.82);\n out.push({ base64: c.split(\",\")[1], mediaType: \"image/jpeg\" });\n }\n return out;\n }\n}\nasync function handlePhotoNext() {\n show(\"analyzing\");\n window.scrollTo(0, 0);\n try {\n const images = await getImagesToSend();\n const primary = images[0];\n const res = await fetch(\"/api/analyze-room\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n imageBase64: primary.base64,\n mediaType: primary.mediaType,\n }),\n });\n const raw = await res.text();\n roomAnalysisData = JSON.parse(raw.replace(/```json|```/g, \"\").trim());\n renderRoomAnalysis(roomAnalysisData);\n goToStep(3);\n } catch (err) {\n renderRoomAnalysis(null);\n goToStep(3);\n }\n}\nfunction renderRoomAnalysis(data) {\n const card = document.getElementById(\"room-analysis-card\");\n const wg = document.getElementById(\"wall-grid\");\n wg.innerHTML = \"\";\n if (!data) {\n card.style.display = \"none\";\n renderDefaultWalls();\n return;\n }\n card.style.display = \"block\";\n document.getElementById(\"designer-note\").textContent = data.designerNote ||\n \"\";\n const te = document.getElementById(\"room-tags\");\n te.innerHTML = \"\";\n const s = document.createElement(\"div\");\n s.className = \"room-tag gold\";\n s.textContent = data.roomShape || \"Room detected\";\n te.appendChild(s);\n (data.featuresDetected || []).forEach((f) => {\n const t = document.createElement(\"div\");\n t.className = \"room-tag\";\n t.textContent = f;\n te.appendChild(t);\n });\n (data.wallMeasurements || []).forEach((wall) => {\n const el = document.createElement(\"div\");\n el.className = \"wall-field\";\n el.innerHTML = '

' +\n wall.id + '

' + wall.description +\n '

' + wall.hint +\n '

';\n wg.appendChild(el);\n });\n}\nfunction renderDefaultWalls() {\n const wg = document.getElementById(\"wall-grid\");\n [{\n id: \"A\",\n description: \"Main wall length\",\n hint: \"Measure the longest wall\",\n }, {\n id: \"B\",\n description: \"Main wall width\",\n hint: \"Measure the perpendicular wall\",\n }].forEach((wall) => {\n const el = document.createElement(\"div\");\n el.className = \"wall-field\";\n el.innerHTML = '

' +\n wall.id + '

' + wall.description +\n '

' + wall.hint +\n '

';\n wg.appendChild(el);\n });\n}\nfunction setUnit(u) {\n currentUnit = u;\n document.getElementById(\"unit-ft\").classList.toggle(\"active\", u === \"ft\");\n document.getElementById(\"unit-m\").classList.toggle(\"active\", u === \"m\");\n document.getElementById(\"approx-length-label\").textContent =\n \"Approx. Length (\" + u + \")\";\n document.getElementById(\"approx-width-label\").textContent =\n \"Approx. Width (\" + u + \")\";\n}\nfunction selectDimOption(opt) {\n dimOption = opt;\n [\"walls\", \"approx\", \"skip\"].forEach((o) =>\n document.getElementById(\"dim-opt-\" + o).classList.toggle(\n \"selected\",\n o === opt,\n )\n );\n}\nfunction getDimText() {\n if (dimOption === \"skip\") {\n return \"No dimensions provided use visual estimation.\";\n }\n if (dimOption === \"approx\") {\n const l = document.getElementById(\"approx-length\").value;\n const w = document.getElementById(\"approx-width\").value;\n if (l || w) {\n return \"Approximate room dimensions: \" + (l || \"?\") + \" x \" + (w || \"?\") +\n \" \" + currentUnit + \".\";\n }\n return \"Approximate dimensions not provided use visual estimation.\";\n }\n const walls = roomAnalysisData && roomAnalysisData.wallMeasurements\n ? roomAnalysisData.wallMeasurements\n : [{ id: \"A\" }, { id: \"B\" }];\n const m = walls.map((wall) => {\n const el = document.getElementById(\"wall-\" + wall.id);\n const v = el ? el.value : \"\";\n return v\n ? \"Wall \" + wall.id + \" (\" + (wall.description || \"\") + \"): \" + v + \" \" +\n currentUnit\n : null;\n }).filter(Boolean);\n if (m.length > 0) return \"Exact wall measurements: \" + m.join(\". \") + \".\";\n return \"Wall measurements not provided use visual estimation.\";\n}\nfunction toggleCat(el) {\n el.classList.toggle(\"selected\");\n}\nfunction getSelectedCategories() {\n return [...document.querySelectorAll(\".category-item.selected\")].map((el) =>\n el.dataset.cat\n );\n}\nfunction selectPref(group, el) {\n document.querySelectorAll(\"#\" + group + \"-options .pref-option\").forEach(\n (o) => o.classList.remove(\"selected\")\n );\n el.classList.add(\"selected\");\n if (group === \"qty\") qtyPref = el.dataset.val;\n else priorityPref = el.dataset.val;\n}\n\nasync function runAnalysis() {\n const categories = getSelectedCategories();\n if (categories.length === 0) {\n alert(\"Please select at least one gaming category.\");\n return;\n }\n show(\"loading\");\n window.scrollTo(0, 0);\n const dimText = getDimText();\n const catText = \"Client wants these gaming categories: \" +\n categories.join(\", \") + \".\";\n const qtyLabel = qtyPref === \"single\"\n ? \"one statement piece only\"\n : qtyPref === \"few\"\n ? \"2 to 3 curated pieces\"\n : \"a full gaming environment with as many pieces as fit\";\n const priorityLabel = priorityPref === \"style\"\n ? \"style and design integration above all\"\n : priorityPref === \"games\"\n ? \"maximum gaming variety\"\n : \"a balance of style and gaming variety\";\n const prefText = \"Client prefers \" + qtyLabel + \". Their priority is \" +\n priorityLabel + \".\";\n const msgs = [\n \"Studying \" + clientFirstName + \"'s space...\",\n \"Analyzing all views...\",\n \"Calculating table sizes and clearances...\",\n \"Matching collections to your aesthetic...\",\n \"Finalizing your design consultation...\",\n ];\n let mi = 0;\n document.getElementById(\"loading-text\").textContent = msgs[0];\n const msgInt = setInterval(() => {\n mi = (mi + 1) % msgs.length;\n document.getElementById(\"loading-text\").textContent = msgs[mi];\n }, 2500);\n try {\n const images = await getImagesToSend();\n const res = await fetch(\"/api/analyze\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n imageBase64: images[0].base64,\n additionalImages: images.slice(1).map((i) => i.base64),\n mediaType: \"image/jpeg\",\n dimText,\n catText,\n prefText,\n clientName: clientFullName,\n clientEmail,\n clientPhone,\n }),\n });\n clearInterval(msgInt);\n const raw = await res.text();\n const parsed = JSON.parse(raw.replace(/```json|```/g, \"\").trim());\n renderResults(parsed, images);\n show(\"results\");\n window.scrollTo(0, 0);\n } catch (err) {\n clearInterval(msgInt);\n document.getElementById(\"error-text\").textContent =\n \"Something went wrong. Please try again.\";\n show(\"error\");\n }\n}\n\nfunction resetAll() {\n slotImages = [null, null, null, null];\n videoFrames = [];\n [0, 1, 2, 3].forEach((i) => {\n document.getElementById(\"slot-img-\" + i).src = \"\";\n document.getElementById(\"slot-\" + i).classList.remove(\"has-image\");\n document.getElementById(\"slot-input-\" + i).value = \"\";\n });\n resetVideo();\n goToStep(1);\n}\n\nconst categoryMap = {\n \"pool table\": \"Pool\",\n \"pool\": \"Pool\",\n \"shuffleboard\": \"Shuffleboard\",\n \"poker table\": \"Poker\",\n \"poker\": \"Poker\",\n \"foosball\": \"Foosball\",\n \"air hockey\": \"Air Hockey\",\n \"blackjack\": \"Black Jack\",\n \"black jack\": \"Black Jack\",\n \"roulette\": \"Roulette\",\n \"craps\": \"Craps\",\n \"dome hockey\": \"Dome Hockey\",\n \"table tennis\": \"Table Tennis\",\n};\nconst categorySlug = {\n \"Pool\": \"pool\",\n \"Shuffleboard\": \"shuffleboard\",\n \"Poker\": \"poker\",\n \"Foosball\": \"foosball\",\n \"Air Hockey\": \"air-hockey\",\n \"Roulette\": \"roulette\",\n \"Black Jack\": \"black-jack\",\n \"Blackjack\": \"black-jack\",\n \"Craps\": \"craps\",\n \"Dome Hockey\": \"dome-hockey\",\n \"Table Tennis\": \"table-tennis\",\n};\n\nfunction getProductImage(collection, category, finish) {\n const cat = categoryMap[category.toLowerCase()] || category;\n const catData = CATALOG[cat] || {};\n const key = Object.keys(catData).find((k) =>\n k.trim().toLowerCase() === collection.trim().toLowerCase()\n );\n if (!key) return null;\n const finishes = catData[key];\n if (!finishes || Object.keys(finishes).length === 0) return null;\n if (finishes[finish]) return finishes[finish];\n const ciKey = Object.keys(finishes).find((f) =>\n f.toLowerCase() === finish.toLowerCase()\n );\n if (ciKey) return finishes[ciKey];\n const fl = finish.toLowerCase();\n const isDark =\n [\"black\", \"walnut\", \"teak\", \"stainless steel\", \"brass\"].indexOf(fl) > -1;\n const isWarm =\n [\"walnut\", \"teak\", \"white oak\", \"curly maple\", \"white\", \"brass\"].indexOf(\n fl,\n ) > -1;\n const darkOrder = [\n \"Black\",\n \"Walnut\",\n \"Teak\",\n \"Stainless Steel\",\n \"Brass\",\n \"Curly Maple\",\n \"White Oak\",\n \"White\",\n ];\n const warmOrder = [\n \"Walnut\",\n \"Teak\",\n \"White Oak\",\n \"Curly Maple\",\n \"White\",\n \"Brass\",\n \"Black\",\n \"Stainless Steel\",\n ];\n const coolOrder = [\n \"White\",\n \"White Oak\",\n \"Curly Maple\",\n \"Stainless Steel\",\n \"Black\",\n \"Walnut\",\n \"Teak\",\n ];\n const order = isDark ? darkOrder : isWarm ? warmOrder : coolOrder;\n for (let i = 0; i < order.length; i++) {\n if (finishes[order[i]]) return finishes[order[i]];\n }\n return Object.values(finishes)[0] || null;\n}\n\nfunction renderResults(d, images) {\n const strip = document.getElementById(\"results-photos-strip\");\n strip.innerHTML = \"\";\n if (images && images.length > 0) {\n images.forEach((img, i) => {\n const el = document.createElement(\"img\");\n el.src = \"data:image/jpeg;base64,\" + img.base64;\n el.style.cssText =\n \"height:80px;width:auto;border-radius:4px;border:0.5px solid var(--border-color);flex-shrink:0;object-fit:cover;\" +\n (i === 0 ? \"border-color:var(--gold);\" : \"\");\n strip.appendChild(el);\n });\n strip.style.display = \"flex\";\n } else strip.style.display = \"none\";\n document.getElementById(\"style-name\").textContent = d.styleName || \"\";\n document.getElementById(\"style-desc\").textContent = d.styleDescription || \"\";\n const dn = document.getElementById(\"dim-note\");\n if (d.dimensionNote) {\n dn.textContent = d.dimensionNote;\n dn.style.display = \"block\";\n } else dn.style.display = \"none\";\n const comp = document.getElementById(\"components\");\n comp.innerHTML = \"\";\n (d.components || []).forEach((c) => {\n const row = document.createElement(\"div\");\n row.className = \"comp-row\";\n row.innerHTML = '' + c.label +\n '' + c.value + \"\";\n comp.appendChild(row);\n });\n const pal = document.getElementById(\"palette\");\n pal.innerHTML = \"\";\n (d.palette || []).forEach((p) => {\n const chip = document.createElement(\"div\");\n chip.className = \"chip\";\n chip.innerHTML = '

' + p.name;\n pal.appendChild(chip);\n });\n document.getElementById(\"layout-summary\").textContent = d.layoutSummary || \"\";\n const fl = document.getElementById(\"fits-list\");\n fl.innerHTML = \"\";\n (d.layoutItems || []).forEach((item) => {\n const row = document.createElement(\"div\");\n row.className = \"fits-item\";\n row.innerHTML = '

' + item + \"\";\n fl.appendChild(row);\n });\n document.getElementById(\"commission-btn\").onclick = () => {\n window.location.href =\n \"mailto:info@elevatecustoms.com?subject=Custom Commission Inquiry from \" +\n clientFullName +\n \"&body=Hi, I just completed a design consultation.%0A%0AName: \" +\n clientFullName + \"%0AEmail: \" + clientEmail;\n };\n const wrap = document.getElementById(\"categories-wrap\");\n wrap.innerHTML = \"\";\n const rankLabels = [\"Top Pick\", \"Option 2\", \"Option 3\"];\n (d.categories || []).forEach((cat) => {\n const group = document.createElement(\"div\");\n group.className = \"cat-group\";\n group.id = \"cat-\" + cat.category.replace(/\\s+/g, \"-\").toLowerCase();\n const optionsHTML = (cat.options || []).map((opt, i) => {\n const isTop = i === 0;\n const cat2 = categoryMap[(cat.category || \"\").toLowerCase()] ||\n cat.category;\n const imgUrl = getProductImage(opt.collection, cat2, opt.finish);\n const slug = categorySlug[cat2] || \"pool\";\n const imgHTML = imgUrl\n ? ' $\"'$ '\n : '

' +\n opt.collection + \"

\";\n return '

' +\n (isTop ? '

Top Pick

' : \"\") +\n '

' + imgHTML + \"

\" +\n '

' +\n '

' + rankLabels[i] + \"

\" +\n '

' + opt.name + \"

\" +\n '

' + opt.finish + \"

\" +\n '

' + opt.reason + \"

\" +\n '

' + opt.match +\n \"%

\" +\n \"

\" +\n 'View Product →' +\n \"

\";\n }).join(\"\");\n group.innerHTML =\n '

' +\n cat.category + \"

\" +\n (cat.size ? '

' + cat.size + \"

\" : \"\") +\n '

\" + (cat.placement\n ? '

' + cat.placement + \"

\"\n : \"\") +\n '

' + optionsHTML + \"

\";\n wrap.appendChild(group);\n });\n}\nfunction dismissCategory(id) {\n const el = document.getElementById(id);\n if (el) {\n el.style.opacity = \"0\";\n el.style.transform = \"translateY(-8px)\";\n el.style.transition = \"opacity 0.3s,transform 0.3s\";\n setTimeout(() => el.remove(), 300);\n }\n}",[],[142,207],["D",1779214749499],[168,169,170,171,172],[142],"425f84e6-5406-11f1-bdca-ee650bb23af1","analyze.ts",36,["D",1779252128516],18,"import Anthropic from \"npm:@anthropic-ai/sdk\";\n\nasync function sendLeadEmail(\n clientName: string,\n clientEmail: string,\n clientPhone: string,\n categories: string,\n preferences: string,\n apiKey: string,\n) {\n try {\n await fetch(\"https://api.brevo.com/v3/smtp/email\", {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\",\n \"api-key\": apiKey,\n },\n body: JSON.stringify({\n sender: {\n name: \"Elevate Customs Space Analyzer\",\n email: \"info@elevatecustoms.com\",\n },\n to: [{ email: \"info@elevatecustoms.com\", name: \"Elevate Customs\" }],\n replyTo: { email: clientEmail, name: clientName },\n subject: `New Design Consultation — ${clientName}`,\n htmlContent: `\n

New Design Consultation

Submitted via Space Analyzer

\n \n \n \n \n \n \n

Name	${clientName}
Email	${clientEmail}
Phone	${\n clientPhone \|\| \"Not provided\"\n }
Categories	${categories}
Preferences	${preferences}

\n Reply to ${\n clientName.split(\" \")[0]\n }\n

Elevate Customs — Design Intelligence Platform

`,\n }),\n });\n } catch (e) {\n console.error(\"Email send failed:\", e);\n }\n}\n\nexport async function analyzeRoom(req: Request): Promise {\n if (req.method === \"OPTIONS\") {\n return new Response(null, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n },\n });\n }\n try {\n const { imageBase64, mediaType } = await req.json();\n const client = new Anthropic({ apiKey: Deno.env.get(\"ANTHROPIC_API_KEY\") });\n const response = await client.messages.create({\n model: \"claude-sonnet-4-5\",\n max_tokens: 1000,\n system:\n `You are a luxury interior design consultant analyzing a room photo to prepare a measurement guide. Return ONLY valid JSON with no preamble or markdown. Analyze the room shape and identify key architectural features. Return this exact structure: {\"roomShape\":\"one of: rectangular, L-shaped, open-plan, irregular, or describe briefly\",\"estimatedProportions\":\"brief description\",\"featuresDetected\":[\"list of detected features like TV wall, fireplace, sliding doors, columns, bar area etc\"],\"wallMeasurements\":[{\"id\":\"A\",\"description\":\"Wall description\",\"hint\":\"Measurement hint\"},{\"id\":\"B\",\"description\":\"Second wall\",\"hint\":\"Hint\"}],\"designerNote\":\"One warm sentence describing the space potential.\"} Only include walls that are relevant and visible. Maximum 5 walls. Minimum 2 walls.`,\n messages: [{\n role: \"user\",\n content: [\n {\n type: \"image\",\n source: {\n type: \"base64\",\n media_type: mediaType,\n data: imageBase64,\n },\n },\n {\n type: \"text\",\n text:\n \"Analyze this room shape and return the measurement guide JSON.\",\n },\n ],\n }],\n });\n const text = response.content.map((b: any) => b.text || \"\").join(\"\");\n return new Response(text, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Content-Type\": \"application/json\",\n },\n });\n } catch (err: any) {\n return new Response(JSON.stringify({ error: err.message }), {\n status: 500,\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Content-Type\": \"application/json\",\n },\n });\n }\n}\n\nexport async function analyze(req: Request): Promise {\n if (req.method === \"OPTIONS\") {\n return new Response(null, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Access-Control-Allow-Headers\": \"Content-Type\",\n },\n });\n }\n if (req.method !== \"POST\") {\n return new Response(JSON.stringify({ error: \"POST required\" }), {\n status: 405,\n headers: { \"Content-Type\": \"application/json\" },\n });\n }\n\n try {\n const {\n imageBase64,\n mediaType,\n dimText,\n catText,\n prefText,\n clientName,\n clientEmail,\n clientPhone,\n additionalImages,\n } = await req.json();\n\n if (!imageBase64 || !mediaType) {\n return new Response(\n JSON.stringify({ error: \"imageBase64 and mediaType required\" }),\n { status: 400, headers: { \"Content-Type\": \"application/json\" } },\n );\n }\n\n const client = new Anthropic({ apiKey: Deno.env.get(\"ANTHROPIC_API_KEY\") });\n const firstName = clientName ? clientName.split(\" \")[0] : \"there\";\n const totalImages = 1 + (additionalImages || []).length;\n\n const systemPrompt = [\n `You are a world-class luxury interior designer and gaming room specialist working exclusively with Elevate Customs. You are personally consulting for ${\n clientName || \"this client\"\n }. Address them by first name (${firstName}) throughout.`,\n `You have been provided ${totalImages} image${\n totalImages > 1 ? \"s\" : \"\"\n } of the space${\n totalImages > 1\n ? \" from multiple angles — analyze all of them together for a complete understanding of the room\"\n : \"\"\n }.`,\n \"CRITICAL PLACEMENT RULES: Study every inch of all photos before suggesting any placement. Identify and LIST every door, sliding door, barn door, bi-fold door, walkway, staircase, and opening. NEVER place any table within the clearance zone of any door. A barn door wall is NOT a viable placement wall. A TV wall with NO door is ideal for shuffleboards. A wall with ANY door is off limits for table placement.\",\n \"EXACT TABLE SPECIFICATIONS:\",\n \"POOL TABLES: 60 inch clearance on ALL four sides. Sizes: 7ft=91x52in, 8ft=101x57in, 8.5ft=108x60in, 9ft=113x63in. Add 120 inches to both table dimensions for minimum room size.\",\n \"SHUFFLEBOARD: 24 inch clearance on SHORT ends only. Long sides against wall fine. Sizes: 9ft=108x32in, 12ft=144x32in, 14ft=168x32in, 16ft=192x32in, 18ft=216x32in, 22ft=264x32in.\",\n \"POKER: Max 104x44x30in. NEVER exceed regulation. Custom smaller only. 36 inch clearance all around for 9 players plus dealer.\",\n \"BLACKJACK: Max 88x46x30in. NEVER exceed regulation. Custom smaller only. 36 inch clearance all around. Dining or bar height.\",\n \"ROULETTE: Max 98x50x30in. NEVER exceed regulation. Custom smaller only. 24 inch clearance all around.\",\n \"CRAPS: Max 117x60x42in. NEVER exceed regulation. Custom smaller only. 24 inch clearance all around.\",\n \"AIR HOCKEY: Residential 93x48x32in, Commercial 93x48x34in. 36 inch clearance on SHORT ends only. Long sides against wall fine.\",\n \"FOOSBALL: 62x31x36in. 48 inch clearance on both LONG sides where rods stick out. Short ends against wall fine. Ideally floats in room.\",\n \"DOME HOCKEY: 54x36x54in. 36 inch clearance on SHORT ends only. Long sides against wall fine.\",\n \"TABLE TENNIS: 108x60x30in. 48 inch clearance on SHORT ends. 24 inch clearance on LONG sides. Cannot go fully against any wall.\",\n \"DIMENSION HANDLING: If exact dimensions provided use them precisely. If approximate use as estimates. If no dimensions provided make intelligent visual estimates and note this.\",\n \"QUANTITY: Single = one best category only. Few = 2-3 categories. Full = all that fit.\",\n \"STYLE: For every recommended category provide exactly 3 options each with a DIFFERENT finish. Top pick = best match. Option 2 = darker alternative. Option 3 = lighter or warmer alternative.\",\n \"Only use these collection names: Ambrosia, Baluster, Beso, Bridge, Don, Draco, Divo, Elite, Enzo, Kors, Louve, Luge, Mantis, Maze, Pyramid, Rumba, Sid, Stilt, Trestle, Trinity, Temple, The Surgeon, Vogue, Vero, Zenith.\",\n \"Available finishes: Black, Walnut, White Oak, Teak, Curly Maple, White, Stainless Steel, Brass.\",\n \"Write in the warm confident voice of a luxury designer personally addressing this client by first name. Reference actual details visible in the photos.\",\n `Return ONLY this exact JSON: {\"styleName\":\"2-4 word design identity\",\"styleDescription\":\"3 sentences describing the space and gaming vision addressing the client by first name.\",\"dimensionNote\":\"One sentence noting whether dimensions were exact approximate or visually estimated.\",\"components\":[{\"label\":\"Architecture\",\"value\":\"...\"},{\"label\":\"Flooring\",\"value\":\"...\"},{\"label\":\"Lighting\",\"value\":\"...\"},{\"label\":\"Furniture\",\"value\":\"...\"},{\"label\":\"Palette\",\"value\":\"...\"}],\"palette\":[{\"name\":\"tone\",\"hex\":\"#xxxxxx\"},{\"name\":\"tone\",\"hex\":\"#xxxxxx\"},{\"name\":\"tone\",\"hex\":\"#xxxxxx\"}],\"layoutSummary\":\"2-3 sentences addressing client by first name describing layout vision referencing actual architectural features and avoiding all doors.\",\"layoutItems\":[\"One placement note per category with exact recommended size.\"],\"categories\":[{\"category\":\"Pool Table\",\"size\":\"9ft\",\"placement\":\"Specific placement avoiding all doors.\",\"options\":[{\"rank\":1,\"name\":\"Vogue Pool Table\",\"collection\":\"Vogue\",\"finish\":\"White Oak\",\"reason\":\"Why this suits this specific space.\",\"match\":96},{\"rank\":2,\"name\":\"Zenith Pool Table\",\"collection\":\"Zenith\",\"finish\":\"Black\",\"reason\":\"Darker dramatic alternative.\",\"match\":91},{\"rank\":3,\"name\":\"Elite Pool Table\",\"collection\":\"Elite\",\"finish\":\"Walnut\",\"reason\":\"Warm wood alternative.\",\"match\":86}]}]}`,\n ].join(\" \");\n\n const userMessage = [\n dimText ||\n \"No dimensions provided — use visual estimation from the photos.\",\n catText || \"No category preferences provided.\",\n prefText || \"No quantity preference provided.\",\n `Client name: ${clientName || \"Not provided\"}.`,\n \"Analyze this space using exact specifications. Return only the JSON.\",\n ].join(\" \");\n\n // Build image content array with all provided images\n const imageContent: any[] = [];\n imageContent.push({\n type: \"image\",\n source: { type: \"base64\", media_type: mediaType, data: imageBase64 },\n });\n for (const img of (additionalImages || []).slice(0, 5)) {\n imageContent.push({\n type: \"image\",\n source: { type: \"base64\", media_type: \"image/jpeg\", data: img },\n });\n }\n imageContent.push({\n type: \"text\",\n text: `${userMessage} Note: ${totalImages} image${\n totalImages > 1 ? \"s have\" : \" has\"\n } been provided showing ${\n totalImages > 1 ? \"multiple angles\" : \"one angle\"\n } of this space.`,\n });\n\n const response = await client.messages.create({\n model: \"claude-sonnet-4-5\",\n max_tokens: 4000,\n system: systemPrompt,\n messages: [{ role: \"user\", content: imageContent }],\n });\n\n const text = response.content.map((b: any) => b.text || \"\").join(\"\");\n\n const brevoKey = Deno.env.get(\"BREVO_API_KEY\") || \"\";\n if (brevoKey && clientEmail) {\n await sendLeadEmail(\n clientName || \"Unknown\",\n clientEmail,\n clientPhone || \"\",\n catText || \"\",\n prefText || \"\",\n brevoKey,\n );\n }\n\n return new Response(text, {\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Content-Type\": \"application/json\",\n },\n });\n } catch (err: any) {\n return new Response(JSON.stringify({ error: err.message }), {\n status: 500,\n headers: {\n \"Access-Control-Allow-Origin\": \"*\",\n \"Content-Type\": \"application/json\",\n },\n });\n }\n}",[],[149,218],["D",1779214694884],[166],[149],["D",1779214682029],{"_97":96,"_104":37},{"_97":96,"_98":99,"_100":37,"_18":55,"_101":102,"_103":24},{"_13":86,"_32":87,"_43":42,"_88":44,"_89":-5,"_90":-5,"_91":-5,"_92":-5,"_93":-5,"_94":45,"_95":96},"ctx",{"_79":-5,"_123":265,"_266":267,"_268":269,"_270":24,"_271":24,"_272":24,"_273":59,"_274":-5,"_275":-7,"_276":-7,"_277":63,"_278":24,"_279":24,"_280":-5,"_281":24,"_282":24,"_283":24,"_284":-5},"ENV",{"_236":237,"_238":239,"_240":87,"_241":242,"_243":244,"_245":246,"_247":248,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

Diff · v89