bolt-new

Running

App Files Files Community

00Boobs00 commited on 25 days ago

Commit

930cf1b

verified ·

1 Parent(s): 695454b

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +939 -12

index.html CHANGED Viewed

@@ -3,32 +3,959 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Full Screen Iframe</title>
     <style>
-        /* Remove padding and margin for body and html */
-        html, body {
             margin: 0;
             padding: 0;
-            height: 100%;
         }
-        /* Make the iframe full screen and remove the border */
-        iframe {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            border: none; /* Removes the border */
-            margin: 0;
-            padding: 0;
-            overflow: hidden; /* Prevents scrollbars */
         }
     </style>
 </head>
 <body>
-    <iframe src="https://bolt.aidark.net/" frameborder="0" scrolling="no"></iframe>
 </body>
-</html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>NeuroArch Studio | AI Architecture & Prompt Engineering Suite</title>
+    <!-- Importing Inter and JetBrains Mono for a clean, technical aesthetic -->
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;600;700&family=JetBrains+Mono:wght@400;700&display=swap" rel="stylesheet">
     <style>
+        :root {
+            /* Color Palette - Deep Space & Neon Cyber */
+            --bg-deep: #050507;
+            --bg-panel: #0f1115;
+            --bg-surface: #181b21;
+            --primary: #3b82f6; /* Electric Blue */
+            --primary-glow: rgba(59, 130, 246, 0.5);
+            --accent: #8b5cf6; /* Violet */
+            --accent-glow: rgba(139, 92, 246, 0.5);
+            --success: #10b981;
+            --warning: #f59e0b;
+            --text-main: #e2e8f0;
+            --text-muted: #94a3b8;
+            --border: #2d3748;
+            --grid-line: rgba(255, 255, 255, 0.03);
+            /* Spacing & Radius */
+            --radius-md: 8px;
+            --radius-lg: 16px;
+            --header-height: 64px;
+        }
+        * {
+            box-sizing: border-box;
             margin: 0;
             padding: 0;
         }
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: var(--bg-deep);
+            color: var(--text-main);
+            height: 100vh;
+            overflow: hidden;
+            display: flex;
+            flex-direction: column;
+        }
+        /* --- Header --- */
+        header {
+            height: var(--header-height);
+            background: rgba(15, 17, 21, 0.8);
+            backdrop-filter: blur(12px);
+            border-bottom: 1px solid var(--border);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            padding: 0 24px;
+            z-index: 100;
+        }
+        .brand {
+            display: flex;
+            align-items: center;
+            gap: 12px;
+            font-weight: 700;
+            font-size: 1.25rem;
+            letter-spacing: -0.025em;
+            background: linear-gradient(to right, var(--primary), var(--accent));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .brand-icon {
+            width: 32px;
+            height: 32px;
+            background: linear-gradient(135deg, var(--primary), var(--accent));
+            border-radius: var(--radius-md);
+            display: grid;
+            place-items: center;
+            color: white;
+            font-size: 1.2rem;
+        }
+        .header-actions {
+            display: flex;
+            align-items: center;
+            gap: 20px;
+        }
+        a.built-with {
+            color: var(--text-muted);
+            text-decoration: none;
+            font-size: 0.85rem;
+            transition: color 0.2s;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+        a.built-with:hover {
+            color: var(--primary);
+        }
+        /* --- Main Layout --- */
+        main {
+            flex: 1;
+            display: grid;
+            grid-template-columns: 280px 1fr 320px;
+            height: calc(100vh - var(--header-height));
+            position: relative;
+        }
+        /* --- Sidebar (Tools) --- */
+        .sidebar {
+            background: var(--bg-panel);
+            border-right: 1px solid var(--border);
+            padding: 20px;
+            display: flex;
+            flex-direction: column;
+            gap: 24px;
+            overflow-y: auto;
+        }
+        .tool-group h3 {
+            font-size: 0.75rem;
+            text-transform: uppercase;
+            letter-spacing: 0.05em;
+            color: var(--text-muted);
+            margin-bottom: 12px;
+        }
+        .node-btn {
+            width: 100%;
+            background: var(--bg-surface);
+            border: 1px solid var(--border);
+            color: var(--text-main);
+            padding: 12px;
+            border-radius: var(--radius-md);
+            cursor: pointer;
+            text-align: left;
+            transition: all 0.2s ease;
+            display: flex;
+            align-items: center;
+            gap: 10px;
+            margin-bottom: 8px;
+            font-size: 0.9rem;
+        }
+        .node-btn:hover {
+            border-color: var(--primary);
+            background: rgba(59, 130, 246, 0.05);
+            transform: translateX(4px);
+        }
+        .node-btn .icon {
+            width: 24px;
+            height: 24px;
+            background: rgba(255,255,255,0.1);
+            border-radius: 4px;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 0.8rem;
+        }
+        /* --- Canvas Area --- */
+        .canvas-container {
+            background-color: var(--bg-deep);
+            background-image:
+                linear-gradient(var(--grid-line) 1px, transparent 1px),
+                linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
+            background-size: 40px 40px;
+            position: relative;
+            overflow: hidden;
+            user-select: none;
+            cursor: grab;
+        }
+        .canvas-container:active {
+            cursor: grabbing;
+        }
+        /* SVG Overlay for Connections */
+        #connections-layer {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
+            pointer-events: none;
+            z-index: 1;
+        }
+        .connection-path {
+            fill: none;
+            stroke: var(--border);
+            stroke-width: 2px;
+            transition: stroke 0.3s;
+        }
+        .connection-path.active {
+            stroke: var(--primary);
+            stroke-dasharray: 10;
+            animation: flowAnimation 1s linear infinite;
+        }
+        @keyframes flowAnimation {
+            from { stroke-dashoffset: 20; }
+            to { stroke-dashoffset: 0; }
+        }
+        /* Nodes on Canvas */
+        .node {
+            position: absolute;
+            width: 180px;
+            background: rgba(24, 27, 33, 0.9);
+            backdrop-filter: blur(8px);
+            border: 1px solid var(--border);
+            border-radius: var(--radius-md);
+            padding: 16px;
+            z-index: 2;
+            cursor: pointer;
+            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
+            transition: box-shadow 0.2s, border-color 0.2s;
+        }
+        .node:hover {
+            border-color: var(--text-muted);
+        }
+        .node.selected {
+            border-color: var(--primary);
+            box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.2), 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+        }
+        .node-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 8px;
+            font-weight: 600;
+            font-size: 0.9rem;
+        }
+        .node-status {
+            width: 8px;
+            height: 8px;
+            border-radius: 50%;
+            background-color: var(--text-muted);
+        }
+        .node-status.active { background-color: var(--success); box-shadow: 0 0 8px var(--success); }
+        .node-status.processing { background-color: var(--warning); box-shadow: 0 0 8px var(--warning); }
+        .node-body {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .node-ports {
+            position: absolute;
+            width: 12px;
+            height: 12px;
+            background: var(--text-main);
+            border-radius: 50%;
+            border: 2px solid var(--bg-surface);
+            cursor: crosshair;
+        }
+        .port-in { top: -6px; left: 50%; transform: translateX(-50%); }
+        .port-out { bottom: -6px; left: 50%; transform: translateX(-50%); }
+        /* --- Right Panel (Properties) --- */
+        .properties-panel {
+            background: var(--bg-panel);
+            border-left: 1px solid var(--border);
+            padding: 20px;
+            overflow-y: auto;
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+        }
+        .panel-header {
+            font-size: 1rem;
+            font-weight: 600;
+            padding-bottom: 12px;
+            border-bottom: 1px solid var(--border);
+        }
+        .prop-group {
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+        .prop-group label {
+            font-size: 0.8rem;
+            color: var(--text-muted);
+        }
+        .prop-input, .prop-select, .prop-textarea {
+            background: var(--bg-surface);
+            border: 1px solid var(--border);
+            color: var(--text-main);
+            padding: 10px;
+            border-radius: var(--radius-md);
+            font-family: inherit;
+            font-size: 0.9rem;
+            outline: none;
+            transition: border-color 0.2s;
+        }
+        .prop-input:focus, .prop-select:focus, .prop-textarea:focus {
+            border-color: var(--primary);
+        }
+        .prop-textarea {
+            resize: vertical;
+            min-height: 80px;
+            font-family: 'JetBrains Mono', monospace;
+        }
+        .action-btn {
+            background: var(--primary);
+            color: white;
+            border: none;
+            padding: 12px;
+            border-radius: var(--radius-md);
+            font-weight: 600;
+            cursor: pointer;
+            transition: background 0.2s;
+            margin-top: auto;
+        }
+        .action-btn:hover {
+            background: #2563eb;
+        }
+        .action-btn.secondary {
+            background: transparent;
+            border: 1px solid var(--border);
+            color: var(--text-main);
+        }
+        .action-btn.secondary:hover {
+            border-color: var(--text-muted);
+        }
+        /* --- Console/Logs --- */
+        .console-output {
+            background: #000;
+            border-radius: var(--radius-md);
+            padding: 12px;
+            font-family: 'JetBrains Mono', monospace;
+            font-size: 0.75rem;
+            height: 150px;
+            overflow-y: auto;
+            color: #33ff00;
+            border: 1px solid #333;
+            margin-top: 20px;
+        }
+        .log-entry { margin-bottom: 4px; }
+        .log-time { color: #666; margin-right: 8px; }
+        .log-info { color: #3b82f6; }
+        .log-warn { color: #f59e0b; }
+        .log-success { color: #10b981; }
+        /* --- Toast Notification --- */
+        .toast-container {
+            position: fixed;
+            bottom: 24px;
+            right: 24px;
+            z-index: 1000;
+            display: flex;
+            flex-direction: column;
+            gap: 10px;
+        }
+        .toast {
+            background: var(--bg-surface);
+            border: 1px solid var(--border);
+            border-left: 4px solid var(--primary);
+            padding: 16px;
+            border-radius: var(--radius-md);
+            min-width: 300px;
+            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.5);
+            animation: slideIn 0.3s ease-out;
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+        }
+        @keyframes slideIn {
+            from { transform: translateX(100%); opacity: 0; }
+            to { transform: translateX(0); opacity: 1; }
+        }
+        /* --- Responsive --- */
+        @media (max-width: 1024px) {
+            main {
+                grid-template-columns: 240px 1fr;
+            }
+            .properties-panel {
+                position: absolute;
+                right: 0;
+                top: 0;
+                bottom: 0;
+                width: 300px;
+                transform: translateX(100%);
+                transition: transform 0.3s;
+                z-index: 50;
+                background: var(--bg-panel);
+            }
+            .properties-panel.open {
+                transform: translateX(0);
+            }
+        }
+        @media (max-width: 768px) {
+            main {
+                grid-template-columns: 1fr;
+            }
+            .sidebar {
+                display: none; /* Hide sidebar on mobile for simplicity in this demo, would use hamburger in full app */
+            }
+            /* Add a floating action button for mobile to add nodes would be ideal here */
         }
     </style>
 </head>
 <body>
+    <header>
+        <div class="brand">
+            <div class="brand-icon">N</div>
+            <span>NeuroArch Studio</span>
+        </div>
+        <div class="header-actions">
+            <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
+                <span>Built with anycoder</span>
+                <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
+                    <path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"></path>
+                    <polyline points="15 3 21 3 21 9"></polyline>
+                    <line x1="10" y1="14" x2="21" y2="3"></line>
+                </svg>
+            </a>
+        </div>
+    </header>
+    <main>
+        <!-- Sidebar: Component Library -->
+        <aside class="sidebar">
+            <div class="tool-group">
+                <h3>Data Ingestion</h3>
+                <button class="node-btn" onclick="app.addNode('input')">
+                    <div class="icon">📥</div> Data Source
+                </button>
+                <button class="node-btn" onclick="app.addNode('vector-db')">
+                    <div class="icon">🗃️</div> Vector Store
+                </button>
+            </div>
+            <div class="tool-group">
+                <h3>AI Processing</h3>
+                <button class="node-btn" onclick="app.addNode('llm')">
+                    <div class="icon">🧠</div> LLM Core
+                </button>
+                <button class="node-btn" onclick="app.addNode('embedder')">
+                    <div class="icon">🔢</div> Embeddings
+                </button>
+            </div>
+            <div class="tool-group">
+                <h3>Output & Logic</h3>
+                <button class="node-btn" onclick="app.addNode('router')">
+                    <div class="icon">🔀</div> Semantic Router
+                </button>
+                <button class="node-btn" onclick="app.addNode('output')">
+                    <div class="icon">📤</div> Response
+                </button>
+            </div>
+            <div style="margin-top: auto;">
+                <button class="action-btn secondary" onclick="app.clearCanvas()" style="width: 100%; font-size: 0.8rem; padding: 8px;">Clear Canvas</button>
+            </div>
+        </aside>
+        <!-- Main Workspace -->
+        <section class="canvas-container" id="canvas">
+            <svg id="connections-layer"></svg>
+            <!-- Nodes will be injected here via JS -->
+        </section>
+        <!-- Right Panel: Properties & Config -->
+        <aside class="properties-panel" id="properties-panel">
+            <div class="panel-header">Properties</div>
+            <div id="no-selection-msg" style="color: var(--text-muted); font-size: 0.9rem; text-align: center; margin-top: 40px;">
+                Select a node to configure its parameters.
+            </div>
+            <div id="prop-form" style="display: none; flex-direction: column; height: 100%;">
+                <div class="prop-group">
+                    <label>Node ID</label>
+                    <input type="text" id="prop-id" class="prop-input" disabled>
+                </div>
+                <div class="prop-group">
+                    <label>Label</label>
+                    <input type="text" id="prop-label" class="prop-input">
+                </div>
+                <div class="prop-group" id="group-model">
+                    <label>Model</label>
+                    <select id="prop-model" class="prop-select">
+                        <option value="gpt-4-turbo">GPT-4 Turbo</option>
+                        <option value="gpt-3.5-turbo">GPT-3.5 Turbo</option>
+                        <option value="claude-3-opus">Claude 3 Opus</option>
+                        <option value="mistral-large">Mistral Large</option>
+                        <option value="llama-3-70b">Llama 3 70B</option>
+                    </select>
+                </div>
+                <div class="prop-group" id="group-temp">
+                    <label>Temperature (0.0 - 1.0)</label>
+                    <input type="range" id="prop-temp" min="0" max="1" step="0.1" value="0.7" style="width: 100%">
+                    <div style="display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-muted);">
+                        <span>Precise</span>
+                        <span id="temp-val">0.7</span>
+                        <span>Creative</span>
+                    </div>
+                </div>
+                <div class="prop-group">
+                    <label>System Prompt / Context</label>
+                    <textarea id="prop-prompt" class="prop-textarea" placeholder="Enter system instructions..."></textarea>
+                </div>
+                <button class="action-btn" onclick="app.runSimulation()">Run Simulation</button>
+                <button class="action-btn secondary" onclick="app.deleteSelectedNode()">Delete Node</button>
+            </div>
+            <div class="console-output" id="console-logs">
+                <div class="log-entry"><span class="log-time">[System]</span> Ready. Awaiting architecture input.</div>
+            </div>
+        </aside>
+    </main>
+    <div class="toast-container" id="toast-container"></div>
+    <script>
+        /**
+         * NeuroArch Studio Core Application Logic
+         * Implements a node-based architecture for AI system design.
+         * Designed with modularity and scalability in mind.
+         */
+        class NeuroArchApp {
+            constructor() {
+                this.nodes = [];
+                this.connections = [];
+                this.selectedNodeId = null;
+                this.canvas = document.getElementById('canvas');
+                this.svgLayer = document.getElementById('connections-layer');
+                this.isDragging = false;
+                this.dragNodeId = null;
+                this.dragOffset = { x: 0, y: 0 };
+                // UI References
+                this.propPanel = document.getElementById('prop-form');
+                this.noSelectionMsg = document.getElementById('no-selection-msg');
+                this.consoleLogs = document.getElementById('console-logs');
+                // Bind events
+                this.canvas.addEventListener('mousedown', (e) => this.handleCanvasMouseDown(e));
+                document.addEventListener('mousemove', (e) => this.handleMouseMove(e));
+                document.addEventListener('mouseup', (e) => this.handleMouseUp(e));
+                // Initialize with a default node
+                this.addNode('input', 100, 150);
+            }
+            /**
+             * Generates a unique ID for nodes
+             */
+            generateId() {
+                return 'node_' + Math.random().toString(36).substr(2, 9);
+            }
+            /**
+             * Logs messages to the system console
+             */
+            log(message, type = 'info') {
+                const time = new Date().toLocaleTimeString('en-US', { hour12: false });
+                const entry = document.createElement('div');
+                entry.className = 'log-entry';
+                entry.innerHTML = `<span class="log-time">[${time}]</span> <span class="log-${type}">${message}</span>`;
+                this.consoleLogs.appendChild(entry);
+                this.consoleLogs.scrollTop = this.consoleLogs.scrollHeight;
+            }
+            /**
+             * Creates a new node and adds it to the canvas
+             */
+            addNode(type, x = 50, y = 50) {
+                const id = this.generateId();
+                const nodeData = {
+                    id,
+                    type,
+                    x,
+                    y,
+                    label: this.getDefaultLabel(type),
+                    model: type === 'llm' ? 'gpt-4-turbo' : 'N/A',
+                    temp: 0.7,
+                    prompt: ''
+                };
+                this.nodes.push(nodeData);
+                this.renderNode(nodeData);
+                this.log(`Added node: ${nodeData.label} (${type})`, 'info');
+                return id;
+            }
+            getDefaultLabel(type) {
+                const labels = {
+                    'input': 'Data Source',
+                    'vector-db': 'Vector DB',
+                    'llm': 'LLM Processor',
+                    'embedder': 'Text Embedder',
+                    'router': 'Semantic Router',
+                    'output': 'Final Output'
+                };
+                return labels[type] || 'Unknown Node';
+            }
+            /**
+             * Renders the DOM element for a node
+             */
+            renderNode(node) {
+                const el = document.createElement('div');
+                el.className = 'node';
+                el.id = node.id;
+                el.style.left = `${node.x}px`;
+                el.style.top = `${node.y}px`;
+                // Inner HTML structure
+                el.innerHTML = `
+                    <div class="node-ports port-in" data-port="in" title="Input"></div>
+                    <div class="node-header">
+                        <span>${node.label}</span>
+                        <div class="node-status" id="status-${node.id}"></div>
+                    </div>
+                    <div class="node-body">
+                        ${node.type.toUpperCase()}<br>
+                        Latency: <span id="latency-${node.id}">--</span>ms
+                    </div>
+                    <div class="node-ports port-out" data-port="out" title="Output"></div>
+                `;
+                // Selection Event
+                el.addEventListener('mousedown', (e) => {
+                    if (e.target.classList.contains('node-ports')) return; // Let port logic handle it
+                    this.selectNode(node.id);
+                    this.isDragging = true;
+                    this.dragNodeId = node.id;
+                    const rect = el.getBoundingClientRect();
+                    this.dragOffset.x = e.clientX - rect.left;
+                    this.dragOffset.y = e.clientY - rect.top;
+                });
+                this.canvas.appendChild(el);
+                // Simple animation entry
+                el.animate([
+                    { transform: 'scale(0.8)', opacity: 0 },
+                    { transform: 'scale(1)', opacity: 1 }
+                ], { duration: 200, easing: 'ease-out' });
+            }
+            /**
+             * Handles mouse down on the canvas (deselect or start drag)
+             */
+            handleCanvasMouseDown(e) {
+                if (e.target === this.canvas || e.target === this.svgLayer) {
+                    this.deselectAll();
+                }
+            }
+            handleMouseMove(e) {
+                if (this.isDragging && this.dragNodeId) {
+                    const node = this.nodes.find(n => n.id === this.dragNodeId);
+                    if (node) {
+                        // Calculate new position relative to canvas
+                        const canvasRect = this.canvas.getBoundingClientRect();
+                        let newX = e.clientX - canvasRect.left - this.dragOffset.x;
+                        let newY = e.clientY - canvasRect.top - this.dragOffset.y;
+                        // Boundary checks
+                        newX = Math.max(0, newX);
+                        newY = Math.max(0, newY);
+                        node.x = newX;
+                        node.y = newY;
+                        // Update DOM
+                        const el = document.getElementById(node.id);
+                        el.style.left = `${newX}px`;
+                        el.style.top = `${newY}px`;
+                        this.updateConnections();
+                    }
+                }
+            }
+            handleMouseUp(e) {
+                this.isDragging = false;
+                this.dragNodeId = null;
+            }
+            /**
+             * Selects a node and populates the property panel
+             */
+            selectNode(id) {
+                this.selectedNodeId = id;
+                // Visual feedback
+                document.querySelectorAll('.node').forEach(n => n.classList.remove('selected'));
+                const el = document.getElementById(id);
+                if(el) el.classList.add('selected');
+                // Show properties
+                const node = this.nodes.find(n => n.id === id);
+                if (node) {
+                    this.noSelectionMsg.style.display = 'none';
+                    this.propPanel.style.display = 'flex';
+                    // Populate fields
+                    document.getElementById('prop-id').value = node.id;
+                    document.getElementById('prop-label').value = node.label;
+                    document.getElementById('prop-temp').value = node.temp;
+                    document.getElementById('temp-val').innerText = node.temp;
+                    document.getElementById('prop-prompt').value = node.prompt;
+                    const modelSelect = document.getElementById('prop-model');
+                    if(node.type === 'llm') {
+                        document.getElementById('group-model').style.display = 'flex';
+                        document.getElementById('group-temp').style.display = 'flex';
+                        modelSelect.value = node.model;
+                    } else {
+                        document.getElementById('group-model').style.display = 'none';
+                        document.getElementById('group-temp').style.display = 'none';
+                    }
+                    // Add event listeners for input changes to update state immediately
+                    this.setupPropertyListeners(node);
+                }
+            }
+            setupPropertyListeners(node) {
+                const labelInput = document.getElementById('prop-label');
+                const tempInput = document.getElementById('prop-temp');
+                const promptInput = document.getElementById('prop-prompt');
+                const modelSelect = document.getElementById('prop-model');
+                // Remove old listeners to prevent stacking (simplified approach)
+                const newLabelInput = labelInput.cloneNode(true);
+                labelInput.parentNode.replaceChild(newLabelInput, labelInput);
+                newLabelInput.addEventListener('input', (e) => {
+                    node.label = e.target.value;
+                    document.querySelector(`#${node.id} .node-header span`).innerText = node.label;
+                });
+                const newTempInput = tempInput.cloneNode(true);
+                tempInput.parentNode.replaceChild(newTempInput, tempInput);
+                newTempInput.addEventListener('input', (e) => {
+                    node.temp = e.target.value;
+                    document.getElementById('temp-val').innerText = node.temp;
+                });
+                const newPromptInput = promptInput.cloneNode(true);
+                promptInput.parentNode.replaceChild(newPromptInput, promptInput);
+                newPromptInput.addEventListener('input', (e) => {
+                    node.prompt = e.target.value;
+                });
+                const newModelSelect = modelSelect.cloneNode(true);
+                modelSelect.parentNode.replaceChild(newModelSelect, modelSelect);
+                newModelSelect.addEventListener('change', (e) => {
+                    node.model = e.target.value;
+                    this.log(`Updated model for ${node.id} to ${node.model}`, 'info');
+                });
+            }
+            deselectAll() {
+                this.selectedNodeId = null;
+                document.querySelectorAll('.node').forEach(n => n.classList.remove('selected'));
+                this.noSelectionMsg.style.display = 'block';
+                this.propPanel.style.display = 'none';
+            }
+            /**
+             * Logic to connect nodes (simplified auto-connection for demo)
+             */
+            connectNodes(sourceId, targetId) {
+                // Check if already connected
+                const exists = this.connections.find(c => c.from === sourceId && c.to === targetId);
+                if (!exists) {
+                    this.connections.push({ from: sourceId, to: targetId });
+                    this.updateConnections();
+                }
+            }
+            /**
+             * Draws SVG lines between connected nodes
+             */
+            updateConnections() {
+                this.svgLayer.innerHTML = ''; // Clear existing lines
+                this.connections.forEach(conn => {
+                    const fromNode = document.getElementById(conn.from);
+                    const toNode = document.getElementById(conn.to);
+                    if (fromNode && toNode) {
+                        const fromRect = fromNode.getBoundingClientRect();
+                        const toRect = toNode.getBoundingClientRect();
+                        const canvasRect = this.canvas.getBoundingClientRect();
+                        // Calculate port positions (centers of bottom/top borders)
+                        const x1 = fromRect.left - canvasRect.left + fromRect.width / 2;
+                        const y1 = fromRect.top - canvasRect.top + fromRect.height;
+                        const x2 = toRect.left - canvasRect.left + toRect.width / 2;
+                        const y2 = toRect.top - canvasRect.top;
+                        // Create Bezier Curve
+                        const path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
+                        const controlY1 = y1 + 50;
+                        const controlY2 = y2 - 50;
+                        const d = `M ${x1} ${y1} C ${x1} ${controlY1}, ${x2} ${controlY2}, ${x2} ${y2}`;
+                        path.setAttribute('d', d);
+                        path.setAttribute('class', 'connection-path');
+                        path.setAttribute('id', `conn-${conn.from}-${conn.to}`);
+                        this.svgLayer.appendChild(path);
+                    }
+                });
+            }
+            deleteSelectedNode() {
+                if(!this.selectedNodeId) return;
+                // Remove DOM
+                const el = document.getElementById(this.selectedNodeId);
+                if(el) el.remove();
+                // Remove from data
+                this.nodes = this.nodes.filter(n => n.id !== this.selectedNodeId);
+                this.connections = this.connections.filter(c => c.from !== this.selectedNodeId && c.to !== this.selectedNodeId);
+                this.log(`Deleted node ${this.selectedNodeId}`, 'warn');
+                this.deselectAll();
+                this.updateConnections();
+            }
+            clearCanvas() {
+                this.nodes.forEach(n => {
+                    const el = document.getElementById(n.id);
+                    if(el) el.remove();
+                });
+                this.nodes = [];
+                this.connections = [];
+                this.svgLayer.innerHTML = '';
+                this.log('Canvas cleared.', 'info');
+                this.deselectAll();
+            }
+            /**
+             * Simulates a data pipeline run through the connected nodes
+             */
+            async runSimulation() {
+                if (this.connections.length === 0) {
+                    this.showToast('No connections detected. Connect nodes to run pipeline.', 'warning');
+                    return;
+                }
+                this.log('Initializing pipeline simulation...', 'info');
+                // Reset visuals
+                document.querySelectorAll('.node-status').forEach(el => {
+                    el.className = 'node-status';
+                });
+                document.querySelectorAll('.connection-path').forEach(el => el.classList.remove('active'));
+                // Simplified Topological Sort / Flow Simulation
+                // For this demo, we just animate sequentially or breadth-first based on connections
+                const visited = new Set();
+                const queue = this.nodes.filter(n => this.connections.some(c => c.from === n.id)); // Start from sources
+                // Actually, let's just animate everything for effect in this UI demo
+                // In a real app, we'd traverse the graph.
+                for (const node of this.nodes) {
+                    const statusEl = document.getElementById(`status-${node.id}`);
+                    statusEl.classList.add('processing');
+                    // Simulate processing time
+                    const latency = Math.floor(Math.random() * 200) + 50;
+                    document.getElementById(`latency-${node.id}`).innerText = latency;
+                    await new Promise(r => setTimeout(r, latency));
+                    statusEl.classList.remove('processing');
+                    statusEl.classList.add('active');
+                    // Animate outgoing connections
+                    this.connections
+                        .filter(c => c.from === node.id)
+                        .forEach(c => {
+                            const path = document.getElementById(`conn-${c.from}-${c.to}`);
+                            if(path) path.classList.add('active');
+                        });
+                    this.log(`Executed ${node.label}: ${latency}ms`, 'success');
+                }
+                this.showToast('Pipeline execution completed successfully.', 'success');
+            }
+            showToast(message, type = 'info') {
+                const container = document.getElementById('toast-container');
+                const toast = document.createElement('div');
+                toast.className = 'toast';
+                toast.style.borderLeftColor = type === 'success' ? 'var(--success)' : (type === 'warning' ? 'var(--warning)' : 'var(--primary)');
+                toast.innerHTML = `
+                    <span>${message}</span>
+                    <button onclick="this.parentElement.remove()" style="background:none;border:none;color:white;cursor:pointer;">✕</button>
+                `;
+                container.appendChild(toast);
+                // Auto remove
+                setTimeout(() => {
+                    toast.style.opacity = '0';
+                    setTimeout(() => toast.remove(), 300);
+                }, 3000);
+            }
+        }
+        // Initialize Application
+        const app = new NeuroArchApp();
+    </script>
 </body>
+</html>