<!DOCTYPE html>

<head>

<title>Archiscale: House Design Brief Creator</title>

<style>

body {

margin: 0;

font-family: 'Roboto', sans-serif;

background-color: #f5f5f5;

color: #333333;

display: flex;

flex-direction: column;

align-items: center;

min-height: 100vh;

overflow-y: auto;

}

header {

background: #ffffff;

padding: 10px 10px 15px;

width: 100%;

color: #000000;

position: fixed;

top: 0;

z-index: 10;

}

h1 { font-size: 1.5em; margin: 0; }

#toolbar {

background: #48DEDD;

padding: 5px;

display: flex;

justify-content: center;

gap: 10px;

width: 100%;

position: fixed;

top: 50px;

z-index: 10;

}

#toolbar button {

padding: 10px;

width: 100px;

background: #ffffff;

color: #333333;

border: none;

border-radius: 6px;

cursor: pointer;

font-weight: bold;

font-size: 1em;

display: flex;

align-items: center;

justify-content: center;

gap: 5px;

}

#toolbar button.active {

background: #48DEDD;

color: #ffffff;

}

#toolbar button:disabled {

background: #cccccc;

cursor: not-allowed;

}

#main-container {

width: 100%;

margin-top: 90px;

padding: 10px;

flex-grow: 1;

display: flex;

flex-direction: column;

align-items: center;

}

#progress-container {

width: 150px;

height: 8px;

background-color: #333;

border-radius: 6px;

overflow: hidden;

position: fixed;

bottom: 10px;

left: 50%;

transform: translateX(-50%);

display: none;

z-index: 10;

}

.progress-bar {

height: 100%;

background: linear-gradient(to right, #48DEDD 50%, transparent 50%);

background-size: 200% 100%;

background-position: 0 0;

animation: slide 2s linear infinite;

}

@keyframes slide {

0% { background-position: 0 0; }

50% { background-position: -100% 0; }

100% { background-position: 0 0; }

}

#start-chat-container {

margin-top: 40px;

display: flex;

gap: 5px;

z-index: 10;

}

#start-chat-button {

padding: 10px;

width: 200px;

height: 50px;

background: #48DEDD;

color: #000000;

border: 10px solid white;

border-top-left-radius: 0;

border-top-right-radius: 0;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

cursor: pointer;

font-weight: bold;

font-size: 1em;

transition: all 0.3s ease;

display: flex;

align-items: center;

justify-content: center;

gap: 5px;

}

#start-chat-button:hover {

background: #333333;

color: #ffffff;

}

#start-chat-button i {

color: #000000;

font-size: 1.2em;

}

#instruction-button {

padding: 10px;

width: 100px;

height: 50px;

background: #48DEDD;

color: #000000;

border: 10px solid white;

border-top-left-radius: 0;

border-top-right-radius: 0;

border-bottom-left-radius: 20px;

border-bottom-right-radius: 20px;

cursor: pointer;

font-size: 1em;

display: flex;

align-items: center;

justify-content: center;

gap: 5px;

}

#instruction-button:hover {

background: #333333;

color: #ffffff;

}

#instruction-button i {

color: #000000;

font-size: 1.2em;

}

#cover-image {

position: fixed;

top: 10%;

left: 10%;

width: 80%;

height: 80%;

background: url('https://images.unsplash.com/photo-1600585154340-be6161a56a0c') center/cover no-repeat;

z-index: 1;

opacity: 0;

transform: scale(1.1);

animation: fadeInScale 1.5s ease-in-out forwards;

}

@keyframes fadeInScale {

0% { opacity: 0; transform: scale(1.1); }

100% { opacity: 0.8; transform: scale(1); }

}

#visualizer-section {

background: #ffffff;

border-radius: 6px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

padding: 10px;

margin-bottom: 10px;

width: 90%;

max-width: 600px;

z-index: 9;

}

#visualizer-inputs {

display: flex;

flex-wrap: wrap;

gap: 10px;

justify-content: center;

width: 100%;

}

#visualizer-inputs input {

padding: 8px;

border: 2px solid #48DEDD;

border-radius: 6px;

background: #f0f0f0;

color: #333333;

font-size: 0.9em;

width: 140px;

transition: border-color 0.3s ease;

}

#visualizer-inputs input:focus {

border-color: #333333;

outline: none;

animation: pulse 1s infinite;

}

@keyframes pulse {

0% { border-color: #48DEDD; }

50% { border-color: #333333; }

100% { border-color: #48DEDD; }

}

#visualizer-inputs button {

padding: 8px;

background: #ffffff;

color: #333333;

border: none;

border-radius: 6px;

cursor: pointer;

font-weight: bold;

font-size: 0.9em;

display: flex;

align-items: center;

justify-content: center;

gap: 5px;

width: 100px;

}

#visualizer-inputs button:hover {

background: #48DEDD;

color: #ffffff;

}

#visualizer-inputs button i {

color: #333333;

}

#visualizer-inputs button:hover i {

color: #ffffff;

}

#file-tabs {

display: flex;

flex-wrap: wrap;

gap: 5px;

margin-top: 10px;

justify-content: center;

width: 100%;

}

.file-tab {

background: #f0f0f0;

padding: 5px 10px;

border-radius: 6px;

cursor: pointer;

font-size: 0.9em;

display: flex;

align-items: center;

gap: 5px;

}

.file-tab.active {

background: #48DEDD;

color: #ffffff;

}

.file-tab i {

font-size: 1em;

}

#file-discussion {

margin-top: 10px;

border: 1px solid #cccccc;

border-radius: 6px;

padding: 10px;

background: #fff;

display: none;

max-height: 100px;

overflow-y: auto;

width: 100%;

}

#chat-section, #export-section {

background: #ffffff;

border-radius: 6px;

box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);

padding: 10px;

width: 90%;

max-width: 600px;

margin-bottom: 10px;

}

#chat-box {

height: auto;

max-height: 40vh;

overflow-y: auto;

border: 1px solid #cccccc;

border-radius: 6px;

padding: 10px;

margin-bottom: 10px;

background: #fff;

flex-grow: 1;

}

#input-container {

display: flex;

align-items: center;

gap: 10px;

margin-bottom: 10px;

}

#input-box {

width: calc(100% - 100px);

padding: 12px;

border: 2px solid #48DEDD;

border-radius: 6px;

background: #f0f0f0;

color: #333333;

font-size: 1em;

box-sizing: border-box;

transition: border-color 0.3s ease;

}

#input-box:focus {

border-color: #333333;

outline: none;

animation: pulse 1s infinite;

}

#send-button {

width: 80px;

padding: 12px;

background: #ffffff;

color: #333333;

border: none;

border-radius: 6px;

cursor: pointer;

font-weight: bold;

font-size: 0.9em;

display: flex;

align-items: center;

justify-content: center;

gap: 5px;

}

#send-button:hover {

background: #48DEDD;

color: #ffffff;

}

#send-button:hover i {

color: #ffffff;

}

.button-container {

display: flex;

justify-content: center;

gap: 5px;

margin-bottom: 10px;

}

.button-container button {

padding: 10px;

width: 80px;

background: #ffffff;

color: #333333;

border: none;

border-radius: 6px;

cursor: pointer;

font-weight: bold;

font-size: 0.9em;

display: flex;

align-items: center;

justify-content: center;

gap: 5px;

}

.button-container button.hero {

background: #48DEDD;

color: #ffffff;

width: 120px;

padding: 12px;

font-size: 1em;

box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

}

.button-container button.hero:hover {

background: #333333;

}

.next-button-container {

display: flex;

justify-content: center;

gap: 5px;

margin-bottom: 10px;

}

.next-button-container button {

padding: 10px;

width: 80px;

background: #48DEDD;

color: #ffffff;

border: none;

border-radius: 6px;

cursor: pointer;

font-weight: bold;

font-size: 0.9em;

display: flex;

align-items: center;

justify-content: center;

gap: 5px;

}

.next-button-container button.new-chat {

color: #000000;

}

.next-button-container button.new-chat i {

color: #000000;

}

.next-button-container button:hover {

background: #333333;

}

.next-button-container button:hover i {

color: #ffffff;

}

button i {

margin-right: 5px;

font-size: 1.2em;

}

#speech-controls {

margin: 10px 0;

font-size: 0.9em;

text-align: center;

display: flex;

justify-content: center;

align-items: center;

gap: 10px;

}

#speech-toggle {

position: relative;

width: 60px;

height: 30px;

}

#speech-toggle input {

opacity: 0;

width: 0;

height: 0;

}

.slider {

position: absolute;

cursor: pointer;

top: 0;

left: 0;

right: 0;

bottom: 0;

background-color: #ccc;

transition: 0.4s;

border-radius: 15px;

}

.slider:before {

position: absolute;

content: "\f028";

font-family: "Font Awesome 6 Free";

font-weight: 900;

color: #ffffff;

left: 4px;

bottom: 4px;

width: 22px;

height: 22px;

line-height: 22px;

background-color: #48DEDD;

transition: 0.4s;

border-radius: 50%;

text-align: center;

font-size: 14px;

}

#speech-toggle input:checked + .slider {

background-color: #48DEDD;

}

#speech-toggle input:checked + .slider:before {

transform: translateX(26px);

content: "\f6a9";

}

#speech-toggle.paused .slider:before {

content: "\f6a9";

}

.message {

margin: 5px 0;

padding: 8px;

border-radius: 6px;

font-size: 0.9em;

}

.user {

background: #f0f0f0;

color: #333333;

text-align: right;

}

.ai {

background: #ffffff;

color: #333333;

text-align: left;

border-left: 4px solid #48DEDD;

}

.tooltip {

position: relative;

display: inline-block;

}

.tooltip .tooltiptext {

visibility: hidden;

width: 120px;

background: #333333;

color: #fff;

text-align: center;

border-radius: 6px;

padding: 5px;

position: absolute;

z-index: 1;

bottom: 120%;

left: 50%;

transform: translateX(-50%);

opacity: 0;

transition: opacity 0.3s ease;

}

.tooltip:hover .tooltiptext {

visibility: visible;

opacity: 1;

}

#brief-display {

text-align: left;

padding: 10px;

border: 1px solid #cccccc;

border-radius: 6px;

background: #fff;

font-size: 0.9em;

flex-grow: 1;

}

#brief-display ul {

margin: 0;

padding-left: 20px;

}

@media (max-width: 600px) {

body { font-size: 14px; }

h1 { font-size: 1.2em; }

header { padding: 8px 10px 10px; } /* Adjusted padding for mobile */

#toolbar { top: 40px; }

#toolbar button { width: 80px; font-size: 0.8em; }

#main-container { margin-top: 80px; }

#start-chat-container { margin-top: 30px; } /* Lowered buttons on mobile */

#start-chat-button { width: 160px; height: 45px; font-size: 0.9em; }

#instruction-button { width: 80px; height: 45px; font-size: 0.9em; }

#visualizer-section { width: 95%; padding: 8px; margin-top: 10px; }

#chat-section, #export-section { margin-top: 10px; }

#chat-box { max-height: 30vh; }

#input-box { font-size: 0.8em; padding: 10px; width: calc(100% - 80px); }

#send-button { width: 70px; font-size: 0.8em; }

.button-container button { width: 70px; font-size: 0.8em; }

.button-container button.hero { width: 90px; font-size: 0.9em; }

.next-button-container button { width: 70px; font-size: 0.8em; }

#speech-controls { margin: 5px 0; }

#speech-toggle { width: 50px; height: 25px; }

.slider:before { width: 18px; height: 18px; line-height: 18px; font-size: 12px; }

#speech-toggle input:checked + .slider:before { transform: translateX(22px); }

.message { font-size: 0.8em; }

.hero-button { width: 70px; font-size: 0.8em; padding: 10px; }

#cover-image { width: 90%; height: 90%; top: 5%; left: 5%; }

#progress-container { width: 120px; height: 6px; }

#visualizer-inputs { flex-direction: column; align-items: center; }

#visualizer-inputs input { width: 100%; font-size: 0.8em; }

#visualizer-inputs button { width: 100%; font-size: 0.8em; }

#file-tabs { flex-direction: column; align-items: center; }

.file-tab { font-size: 0.8em; }

}

</style>

</head>

<body>

<h1>Archiscale: House Design Brief Creation</h1>

</header>

<button id="start-chat-button"><i class="fas fa-play"></i> Start Chat</button>

</div>

</div>

<button id="nav-export" disabled onclick="showSection('export')"><i class="fas fa-download"></i> Export</button>

</nav>

</div>

<button id="upload-button" onclick="uploadFile()"><i class="fas fa-upload"></i> Upload</button>

<span class="tooltiptext">Upload Image/PDF/STL/CAD</span>

</div>

</div>

</section>

<button class="hero" onclick="finalizeBrief()"><i class="fas fa-check"></i> Finalize</button>

<span class="tooltiptext">Finalize Brief</span>

</div>

</div>

<span class="tooltiptext">Send Message</span>

</div>

</div>

<span class="tooltiptext">Start New Chat</span>

</div>

<button id="speech-pause" onclick="toggleSpeechPause()"><i class="fas fa-volume-up"></i> Pause</button>

<span class="tooltiptext">Pause/Resume Speech</span>

</div>

<span class="tooltiptext">Go to Next Section</span>

</div>

</div>

<label for="speech-toggle">Speech:</label>

</div>

</div>

</section>

<span class="tooltiptext">Download as Text</span>

</div>

<span class="tooltiptext">Download as PDF</span>

</div>

<span class="tooltiptext">Download as HTML</span>

</div>

<span class="tooltiptext">Download as Zip</span>

</div>

<button onclick="emailBrief()"><i class="fas fa-envelope"></i> Email</button>

<span class="tooltiptext">Email Brief</span>

</div>

</div>

<button class="hero-button" onclick="window.location.href='https://www.example.com/orderform';"><i class="fas fa-shopping-cart"></i> Order</button>

<span class="tooltiptext">Open Order Form</span>

</div>

</div>

<h2>Review House Design Brief</h2>

</section>

</div>

// Initialize Web Speech API

const synth = window.speechSynthesis;

let voices = [];

let isSpeechPaused = false;

let speechQueue = [];

let selectedFile = null;

const apiKey = 'xai-jO9CDhrv2kWPB7HOl1upbBLq7wvKFNEyBgC651AbdOWGSFu7MPKG17N33FFb5c45ZQpFaBvy9qTqqbGX';

// Speech helper function

function speakText(text) {

if (!document.getElementById('speech-output').checked || isSpeechPaused) return;

synth.cancel();

const utterance = new SpeechSynthesisUtterance(text);

utterance.lang = 'en-US';

utterance.volume = 1.0;

utterance.rate = 0.9;

utterance.pitch = 1.0;

const preferredVoice = voices.find(v => v.lang === 'en-US' && (v.name.includes('Google') || v.name.includes('Samantha') || v.name.includes('Microsoft'))) || voices[0];

if (preferredVoice) utterance.voice = preferredVoice;

utterance.onend = () => {

console.log(`Finished speaking: ${text} (en-US)`);

speechQueue.shift();

if (speechQueue.length > 0) {

speakText(speechQueue[0]);

}

};

utterance.onerror = (e) => {

console.error('Speech synthesis error:', e.message);

addMessageToChat('ai', `Speech error: ${e.message}. Check audio settings.`);

speechQueue.shift();

if (speechQueue.length > 0) {

speakText(speechQueue[0]);

}

};

speechQueue.push(text);

if (speechQueue.length === 1) {

try {

synth.speak(utterance);

console.log(`Speaking with voice: ${preferredVoice ? preferredVoice.name : 'none'} (en-US), Text: ${text}`);

} catch (e) {

console.error('Speech synthesis error:', e.message);

addMessageToChat('ai', `Speech error: ${e.message}. Check audio settings.`);

speechQueue.shift();

}

}

}

// Toggle pause/resume speech

function toggleSpeechPause() {

if (isSpeechPaused) {

synth.resume();

isSpeechPaused = false;

document.getElementById('speech-pause').innerHTML = '<i class="fas fa-volume-up"></i> Pause';

document.getElementById('speech-toggle').classList.remove('paused');

} else {

synth.pause();

isSpeechPaused = true;

document.getElementById('speech-pause').innerHTML = '<i class="fas fa-volume-mute"></i> Resume';

document.getElementById('speech-toggle').classList.add('paused');

}

}

// Add message to chat box

function addMessageToChat(role, content) {

const chatBox = document.getElementById('chat-box');

const div = document.createElement('div');

div.className = `message ${role}`;

div.textContent = `${role === 'user' ? 'You' : 'Archiscale'}: ${content}`;

chatBox.appendChild(div);

chatBox.scrollTop = chatBox.scrollHeight;

}

// Load voices

function initializeSpeechSynthesis() {

voices = synth.getVoices();

if (voices.length === 0) {

synth.onvoiceschanged = () => {

voices = synth.getVoices();

console.log('SpeechSynthesis voices loaded:', voices.map(v => v.name));

};

} else {

console.log('SpeechSynthesis voices available:', voices.map(v => v.name));

}

}

// Initialize speech synthesis

initializeSpeechSynthesis();

// Conversation state

let conversation = JSON.parse(localStorage.getItem('conversation')) || [];

let brief = JSON.parse(localStorage.getItem('brief')) || null;

let uploadedFiles = JSON.parse(localStorage.getItem('uploadedFiles')) || [];

// Load existing conversation

function loadConversation() {

const chatBox = document.getElementById('chat-box');

chatBox.innerHTML = '';

conversation.forEach(msg => addMessageToChat(msg.role, msg.content));

chatBox.scrollTop = chatBox.scrollHeight;

updateFileTabs();

if (conversation.length === 0) {

const initialMessage = "Hello, I'm Archiscale. Let's create a house design brief. Use the form above to enter details or upload a plan. If you want to know how many dwellings fit on your block, just ask!";

addMessageToChat('ai', initialMessage);

if (document.getElementById('speech-output').checked) {

speakText(initialMessage);

}

}

if (brief) {

document.getElementById('nav-export').disabled = false;

}

}

// Update file tabs

function updateFileTabs() {

const fileTabs = document.getElementById('file-tabs');

fileTabs.innerHTML = '';

uploadedFiles.forEach((file, index) => {

const tab = document.createElement('div');

tab.className = `file-tab ${selectedFile === file.name ? 'active' : ''}`;

tab.innerHTML = `<i class="fas fa-file"></i> ${file.name}`;

tab.onclick = () => toggleFileDiscussion(file.name, index);

fileTabs.appendChild(tab);

});

}

// Toggle file discussion

function toggleFileDiscussion(fileName, index) {

const discussion = document.getElementById('file-discussion');

if (selectedFile === fileName) {

discussion.style.display = 'none';

selectedFile = null;

} else {

selectedFile = fileName;

discussion.style.display = 'block';

discussion.textContent = `Discussing ${fileName}. Please provide details or ask questions about this file.`;

conversation.push({ role: 'user', content: `Selected file: ${fileName}` });

addMessageToChat('user', `Selected file: ${fileName}`);

localStorage.setItem('conversation', JSON.stringify(conversation));

callAPI();

}

updateFileTabs();

}

// Handle visualizer input changes

function handleVisualizerInputs() {

const inputs = ['block-size', 'address', 'bedrooms', 'house-count'];

inputs.forEach(id => {

const input = document.getElementById(id);

input.addEventListener('change', () => {

const value = input.value.trim();

if (value) {

const message = `Updated ${input.placeholder}: ${value}`;

conversation.push({ role: 'user', content: message });

addMessageToChat('user', message);

localStorage.setItem('conversation', JSON.stringify(conversation));

callAPI();

}

});

input.addEventListener('focus', () => {

input.scrollIntoView({ behavior: 'smooth', block: 'center' });

});

});

}

// Upload file function with analysis

function uploadFile() {

const input = document.createElement('input');

input.type = 'file';

input.accept = '.jpg,.png,.pdf,.stl,.dwg';

input.onchange = (event) => {

const file = event.target.files[0];

if (!file) return;

synth.cancel();

speechQueue = [];

const reader = new FileReader();

reader.onload = async (e) => {

uploadedFiles.push({ name: file.name, data: e.target.result });

localStorage.setItem('uploadedFiles', JSON.stringify(uploadedFiles));

const isImage = file.type.startsWith('image/');

const isPDF = file.type === 'application/pdf';

const isSTL = file.name.toLowerCase().endsWith('.stl');

const isCAD = file.name.toLowerCase().endsWith('.dwg');

let uploadMessage = '';

if (isImage) {

uploadMessage = `Uploaded image ${file.name}. Analysis: Detected a house plan with block size approximately 600 sqm and a 3-bedroom layout (placeholder).`;

} else if (isPDF) {

uploadMessage = `Uploaded PDF ${file.name}. Analysis: Detected a title or plan with block size 500-700 sqm (placeholder).`;

} else if (isSTL) {

uploadMessage = `Uploaded STL ${file.name}. Analysis: 3D model of a house structure detected (placeholder).`;

} else if (isCAD) {

uploadMessage = `Uploaded CAD ${file.name}. Analysis: Detailed house plan with layout detected (placeholder).`;

} else {

uploadMessage = `Uploaded ${file.name}. It will be included in the brief.`;

}

conversation.push({ role: 'user', content: uploadMessage });

addMessageToChat('user', uploadMessage);

selectedFile = file.name;

updateFileTabs();

document.getElementById('file-discussion').style.display = 'block';

document.getElementById('file-discussion').textContent = `Discussing ${file.name}. Please provide details or ask questions about this file.`;

localStorage.setItem('conversation', JSON.stringify(conversation));

if (document.getElementById('speech-output').checked) {

speakText(uploadMessage);

}

await callAPI();

};

reader.readAsArrayBuffer(file);

};

input.click();

}

// Finalize brief

function finalizeBrief() {

synth.cancel();

speechQueue = [];

conversation.push({ role: 'user', content: `Finalize the house design brief in JSON format${selectedFile ? ` based on ${selectedFile}` : ''}.` });

addMessageToChat('user', 'Finalizing brief...');

localStorage.setItem('conversation', JSON.stringify(conversation));

callAPI().then(() => {

const lastMsg = conversation[conversation.length - 1].content;

try {

brief = JSON.parse(lastMsg);

localStorage.setItem('brief', JSON.stringify(brief));

document.getElementById('nav-export').disabled = false;

showSection('export');

displayBrief();

} catch (e) {

console.error('Failed to parse brief JSON:', e);

addMessageToChat('ai', 'Error finalizing brief. Try again.');

if (document.getElementById('speech-output').checked) {

speakText('Error finalizing brief. Try again.');

}

}

});

}

// Display brief in review section (bullet-point format)

function displayBrief() {

const div = document.getElementById('brief-display');

div.innerHTML = `

<ul>

<li><strong>Address:</strong> ${brief.address || 'N/A'}</li>

<li><strong>Block Size:</strong> ${brief.blockSize || 'N/A'}</li>

<li><strong>Bedrooms per Dwelling:</strong> ${brief.bedrooms || 'N/A'}</li>

<li><strong>Number of Dwellings:</strong> ${brief.houseCount || 'N/A'}</li>

<li><strong>File Analysis:</strong> ${brief.fileAnalysis || 'N/A'}</li>

<li><strong>BAL Rating:</strong> ${brief.balRating || 'BAL-12.5 (assumed)'}</li>

<li><strong>Setbacks:</strong> ${brief.setbacks || '4m front, 1m side (per Clause 54/55)'}</li>

<li><strong>Private Open Space:</strong> ${brief.privateOpenSpace || '40m² per dwelling (per Clause 55)'}</li>

<li><strong>Other:</strong> ${brief.other || 'N/A'}</li>

</ul>

`;

if (uploadedFiles.length > 0) {

div.innerHTML += '<h3>Uploaded Files:</h3><ul>' + uploadedFiles.map(f => `<li>${f.name}</li>`).join('') + '</ul>';

}

}

// Start new conversation

function startNewConversation() {

synth.cancel();

speechQueue = [];

conversation = [];

brief = null;

uploadedFiles = [];

selectedFile = null;

localStorage.setItem('conversation', JSON.stringify(conversation));

localStorage.setItem('brief', null);

localStorage.setItem('uploadedFiles', JSON.stringify(uploadedFiles));

document.getElementById('chat-box').innerHTML = '';

document.getElementById('file-tabs').innerHTML = '';

document.getElementById('file-discussion').style.display = 'none';

document.getElementById('block-size').value = '';

document.getElementById('address').value = '';

document.getElementById('bedrooms').value = '';

document.getElementById('house-count').value = '';

loadConversation();

document.getElementById('nav-export').disabled = true;

showSection('chat');

}

// Go to next section

function goToNextSection() {

const currentSection = document.querySelector('#main-container > section:not([style*="display: none"])')?.id;

if (currentSection === 'chat-section' && brief) {

showSection('export');

}

}

// Download text

function downloadText() {

if (!brief) return;

const text = JSON.stringify(brief, null, 2);

const blob = new Blob([text], { type: 'text/plain' });

const url = URL.createObjectURL(blob);

const a = document.createElement('a');

a.href = url;

a.download = 'house_design_brief.txt';

a.click();

URL.revokeObjectURL(url);

}

// Download PDF

function downloadPDF() {

if (!brief) return;

const { jsPDF } = window.jspdf;

const doc = new jsPDF();

doc.text('House Design Brief', 10, 10);

doc.text(`• Address: ${brief.address || 'N/A'}`, 10, 20);

doc.text(`• Block Size: ${brief.blockSize || 'N/A'}`, 10, 30);

doc.text(`• Bedrooms per Dwelling: ${brief.bedrooms || 'N/A'}`, 10, 40);

doc.text(`• Number of Dwellings: ${brief.houseCount || 'N/A'}`, 10, 50);

doc.text(`• File Analysis: ${brief.fileAnalysis || 'N/A'}`, 10, 60);

doc.text(`• BAL Rating: ${brief.balRating || 'BAL-12.5 (assumed)'}`, 10, 70);

doc.text(`• Setbacks: ${brief.setbacks || '4m front, 1m side (per Clause 54/55)'}`, 10, 80);

doc.text(`• Private Open Space: ${brief.privateOpenSpace || '40m² per dwelling (per Clause 55)'}`, 10, 90);

doc.text(`• Other: ${brief.other || 'N/A'}`, 10, 100);

if (uploadedFiles.length > 0) {

doc.text('Uploaded Files:', 10, 110);

uploadedFiles.forEach((f, i) => {

doc.text(`- ${f.name}`, 10, 120 + i * 10);

});

}

doc.save('house_design_brief.pdf');

}

// Download HTML

function downloadHTML() {

if (!brief) return;

const html = `

<!DOCTYPE html>

<html>

<head><title>House Design Brief</title></head>

<body>

<h1>House Design Brief</h1>