WebSim with Public AI

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

\n \n

\n \n \n

Chat with AI [X]

\n \n

\n \n \n

\n \n\n\nstyle.css\n* {\n box-sizing: border-box;\n margin: 0;\n padding: 0;\n}\n\nbody {\n font-family: Arial, sans-serif;\n line-height: 1.6;\n background: #f0f0f0;\n color: #333;\n}\n\nheader {\n background: #4CAF50;\n color: #fff;\n padding: 10px;\n text-align: center;\n}\n\n#command-container {\n padding: 10px;\n display: flex;\n gap: 5px;\n background: #fff;\n border-bottom: 1px solid #ccc;\n flex-wrap: wrap;\n}\n\n#command-container input {\n flex: 1;\n padding: 8px;\n font-size: 1em;\n border: 1px solid #ccc;\n border-radius: 4px;\n}\n\n#command-container button {\n padding: 8px 12px;\n font-size: 1em;\n border: none;\n border-radius: 4px;\n background: #4CAF50;\n color: #fff;\n cursor: pointer;\n}\n\n#command-container button:hover {\n background: #45a049;\n}\n\n#main-container {\n display: flex;\n height: calc(100vh - 150px);\n}\n\n#editor-container,\n#preview-container {\n flex: 1;\n padding: 10px;\n}\n\n#editor-container {\n background: #272822;\n}\n\n#editor-container textarea {\n width: 100%;\n height: 100%;\n background: #272822;\n color: #f8f8f2;\n border: none;\n resize: none;\n font-family: 'Courier New', monospace;\n font-size: 0.9em;\n padding: 10px;\n outline: none;\n}\n\n#preview-container {\n background: #fff;\n}\n\n#preview {\n width: 100%;\n height: 100%;\n border: none;\n}\n\n/* Projects container styles */\n#projects-container {\n background: #fff;\n border: 1px solid #ccc;\n padding: 10px;\n margin: 10px;\n}\n\n#projects-tabs {\n display: flex;\n border-bottom: 1px solid #ccc;\n margin-bottom: 10px;\n}\n\n#projects-tabs button {\n flex: 1;\n padding: 8px;\n border: none;\n background: #f0f0f0;\n cursor: pointer;\n}\n\n#projects-tabs button.active {\n background: #4CAF50;\n color: #fff;\n font-weight: bold;\n}\n\n#projects-list {\n list-style: none;\n padding: 0;\n}\n\n#projects-list li {\n padding: 8px;\n border-bottom: 1px solid #eee;\n cursor: pointer;\n}\n\n#projects-list li:hover {\n background: #f9f9f9;\n}\n\n/* Chat container styles */\n#chat-container {\n background: #fff;\n border: 1px solid #ccc;\n padding: 10px;\n margin: 10px;\n display: none;\n max-height: 300px;\n overflow-y: auto;\n}\n\n.chat-header {\n font-weight: bold;\n margin-bottom: 5px;\n}\n\n.messages {\n max-height: 200px;\n overflow-y: auto;\n margin-bottom: 5px;\n}\n\n.message {\n margin-bottom: 5px;\n padding: 5px;\n border-radius: 4px;\n}\n\n.message.user {\n text-align: right;\n background: #e0f7fa;\n}\n\n.message.ai {\n text-align: left;\n background: #f1f8e9;\n}\n\n#chat-container input[type=\"text\"] {\n width: calc(100% - 60px);\n padding: 5px;\n}\n\n#chat-container button {\n padding: 5px 10px;\n margin-left: 5px;\n}\n\n/* Mobile styles */\n@media (max-width: 600px) {\n #main-container {\n flex-direction: column;\n height: auto;\n }\n #editor-container,\n #preview-container {\n height: 500px;\n }\n #mobile-tabs {\n display: flex;\n justify-content: space-around;\n background: #fff;\n border-top: 1px solid #ccc;\n }\n #mobile-tabs button {\n flex: 1;\n padding: 10px;\n font-size: 1em;\n border: none;\n background: #4CAF50;\n color: #fff;\n cursor: pointer;\n }\n #mobile-tabs button:hover {\n background: #45a049;\n }\n /* Hide one view by default on mobile */\n #editor-container.hidden,\n #preview-container.hidden {\n display: none;\n }\n}\n\nscript.js\ndocument.addEventListener('DOMContentLoaded', () => {\n const commandInput = document.getElementById('command-input');\n const commandButton = document.getElementById('command-button');\n const runCodeButton = document.getElementById('run-code-button');\n const codeEditor = document.getElementById('code-editor');\n const preview = document.getElementById('preview');\n const mobileEditorContainer = document.getElementById('editor-container');\n const mobilePreviewContainer = document.getElementById('preview-container');\n const showEditorBtn = document.getElementById('show-editor');\n const showPreviewBtn = document.getElementById('show-preview');\n const autoWebpageButton = document.getElementById('auto-webpage-button');\n const toggleChatButton = document.getElementById('toggle-chat-button');\n const chatContainer = document.getElementById('chat-container');\n const chatInput = document.getElementById('chat-input');\n const chatSendButton = document.getElementById('chat-send');\n const chatMessages = document.getElementById('chat-messages');\n const closeChat = document.getElementById('close-chat');\n const popularTab = document.getElementById('popular-tab');\n const newTab = document.getElementById('new-tab');\n const projectsListElem = document.getElementById('projects-list');\n\n// Update the preview iframe with the current editor content\n const updatePreview = () => {\n const code = codeEditor.value;\n preview.srcdoc = code;\n };\n\n// Process AI commands by sending a request to the public AI API endpoint\n const processAICommand = async (prompt) => {\n commandButton.disabled = true;\n commandInput.disabled = true;\n commandInput.value = '';\n try {\n const aiResponse = await getAIResponse(prompt);\n if (aiResponse && aiResponse.code) {\n codeEditor.value = aiResponse.code;\n updatePreview();\n } else {\n alert('AI did not return any code.');\n }\n } catch (error) {\n console.error('AI command failed:', error);\n alert('Error processing AI command.');\n } finally {\n commandButton.disabled = false;\n commandInput.disabled = false;\n }\n };\n\n// Process the user-entered command\n const processCommand = () => {\n const commandText = commandInput.value.trim();\n if (!commandText) return;\n if (commandText.toLowerCase().startsWith('ai ')) {\n const prompt = commandText.substring(3).trim();\n processAICommand(prompt);\n } else if (\n commandText.toLowerCase() === 'run' ||\n commandText.toLowerCase() === 'run code'\n ) {\n updatePreview();\n } else {\n alert('Unknown command. Use \"ai \" or \"run code\".');\n }\n };\n\ncommandButton.addEventListener('click', processCommand);\n runCodeButton.addEventListener('click', updatePreview);\n commandInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n processCommand();\n }\n });\n\n// Mobile tab functionality to switch between the editor and preview views\n if (showEditorBtn && showPreviewBtn) {\n showEditorBtn.addEventListener('click', () => {\n mobileEditorContainer.classList.remove('hidden');\n mobilePreviewContainer.classList.add('hidden');\n });\n showPreviewBtn.addEventListener('click', () => {\n mobileEditorContainer.classList.add('hidden');\n mobilePreviewContainer.classList.remove('hidden');\n updatePreview();\n });\n }\n\n// Load the initial preview\n updatePreview();\n\n// Chat functionality\n function appendChatMessage(sender, message) {\n const div = document.createElement('div');\n div.className = 'message ' + sender;\n div.textContent = message;\n chatMessages.appendChild(div);\n chatMessages.scrollTop = chatMessages.scrollHeight;\n }\n\nchatSendButton.addEventListener('click', async () => {\n const chatQuery = chatInput.value.trim();\n if (!chatQuery) return;\n appendChatMessage('user', chatQuery);\n chatInput.value = '';\n try {\n const aiResponse = await getAIResponse(chatQuery);\n if (aiResponse && aiResponse.code) {\n appendChatMessage('ai', aiResponse.code);\n } else {\n appendChatMessage('ai', 'AI did not return any message.');\n }\n } catch (error) {\n appendChatMessage('ai', 'Error processing your message.');\n }\n });\n\nchatInput.addEventListener('keypress', (e) => {\n if (e.key === 'Enter') {\n chatSendButton.click();\n }\n });\n\ntoggleChatButton.addEventListener('click', () => {\n if (chatContainer.style.display === 'none' || chatContainer.style.display === '') {\n chatContainer.style.display = 'block';\n } else {\n chatContainer.style.display = 'none';\n }\n });\n\ncloseChat.addEventListener('click', () => {\n chatContainer.style.display = 'none';\n });\n\n// Auto Webpage functionality\n autoWebpageButton.addEventListener('click', async () => {\n autoWebpageButton.disabled = true;\n try {\n const aiResponse = await getAIResponse('auto generate a full webpage');\n if (aiResponse && aiResponse.code) {\n codeEditor.value = aiResponse.code;\n updatePreview();\n // Add the generated webpage as a new project in \"New Projects\"\n addNewProject('Auto Generated Webpage', aiResponse.code);\n } else {\n alert('AI did not return any code for auto webpage.');\n }\n } catch (error) {\n console.error('Auto webpage generation failed:', error);\n alert('Error generating auto webpage.');\n } finally {\n autoWebpageButton.disabled = false;\n }\n });\n\n// Projects functionality with dummy data\n let popularProjects = [\n { title: 'Project Alpha', code: '

Project Alpha

Amazing project!

' },\n { title: 'Project Beta', code: '

Project Beta

Another great project!

' }\n ];\n let newProjects = [\n { title: 'Project Gamma', code: '

Project Gamma

Fresh and new!

' }\n ];\n\nfunction renderProjects(projects) {\n projectsListElem.innerHTML = '';\n projects.forEach((proj) => {\n const li = document.createElement('li');\n li.textContent = proj.title;\n li.addEventListener('click', () => {\n codeEditor.value = proj.code;\n updatePreview();\n });\n projectsListElem.appendChild(li);\n });\n }\n\npopularTab.addEventListener('click', () => {\n popularTab.classList.add('active');\n newTab.classList.remove('active');\n renderProjects(popularProjects);\n });\n newTab.addEventListener('click', () => {\n newTab.classList.add('active');\n popularTab.classList.remove('active');\n renderProjects(newProjects);\n });\n\nfunction addNewProject(title, code) {\n const newProj = { title, code };\n newProjects.unshift(newProj);\n if (newTab.classList.contains('active')) {\n renderProjects(newProjects);\n }\n }\n\n// Initially render popular projects\n renderProjects(popularProjects);\n});\n\n/*\n Function to call the public AI API.\n Expects a response in the format:\n\ninterface AIResponse {\n code: string;\n }\n {\n \"code\": \" ... complete HTML page code ...\"\n }\n*/\nasync function getAIResponse(prompt) {\n try {\n const response = await fetch('/api/ai_completion', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n 'Accept': 'application/json'\n },\n body: JSON.stringify({\n prompt: prompt,\n data: {}\n })\n });\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n const data = await response.json();\n return data;\n } catch (error) {\n console.error('Error fetching AI response:', error);\n throw error;\n }\n}\n","cursor","eyJpZCI6IjFoczA5bXdzeGp0ajQ0N2hraHgwIn0","token","included",[],"routes/browser/layout","actionData","errors"]