[{"_1":2,"_172":-5,"_86":-5},"loaderData",{"_3":4,"_46":47,"_171":-5},"root",{"_5":6,"_19":-5,"_20":-5,"_21":22,"_23":-5,"_24":-5,"_25":-5,"_26":27,"_28":29,"_30":31,"_40":29,"_41":42,"_43":29,"_44":45},"env",{"_7":8,"_9":10,"_11":12,"_13":14,"_15":16,"_17":18},"SUPABASE_URL","https://hello.websim.ai","SUPABASE_ANON_KEY","eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJzdXBhYmFzZSIsInJlZiI6Im9jamVmZ2NqamlxeWt3YWR2dnJkIiwicm9sZSI6ImFub24iLCJpYXQiOjE3MTE4MzI5OTMsImV4cCI6MjAyNzQwODk5M30.vsreOYwk8pKsr8NFlzpIzWAiD-vXj6ijv_Bhn1vYtHs","POSTHOG_KEY","phc_VHMOlrdxAbgSZHeF0SdSf07LZLRLAg5pZuTHkJGn050","POSTHOG_API_HOST","https://e.wbsm.ai","POSTHOG_UI_HOST","https://app.posthog.com","NODE_ENV","production","authUser","user","isLoggedOutOrAnonymous",true,"plan","balances","rewards","pinned",[],"has_default_username",false,"origins",{"_32":33,"_34":35,"_36":37,"_38":39},"origin","https://websim.ai","apiOrigin","https://api.websim.ai","contentOrigin","https://{PROJECT_ID}.c.websim.ai","appDomainOrigin","https://{SUBDOMAIN}.on.websim.ai","isMobile","theme","auto","pinSidebarCookieValue","homepageTabCookieValue","hot","slug",{"_48":49,"_121":122,"_150":151,"_168":169,"_170":-5},"site",{"_50":51,"_52":53,"_54":55,"_56":57,"_58":59,"_60":61,"_90":91,"_92":93,"_94":95,"_100":101,"_115":116,"_117":118,"_119":-5,"_120":-5},"id","ZzCQroogQtJiCbkbr","parent_id","5dPeNM5dCXWslJfGw","created_at","2024-07-24T00:23:22.345851+00:00","state","done","model","sonnet","lore",{"_62":63,"_64":65,"_66":67,"_83":84},"version",1,"attachments",[],"siteContext",[68,70,72,74,76,78,80,82],{"_50":69,"_26":29},"LOGGED_IN",{"_50":71,"_26":29},"Gsm8wtTQCBFhGz8cP",{"_50":73,"_26":29},"Ht3vZf821pt602BGB",{"_50":75,"_26":29},"Mf6WpG1n7qJEQmK9W",{"_50":77,"_26":29},"e4VjQDRFa2OyDv9ob",{"_50":79,"_26":29},"fKuRGWcZQQXpg70UR",{"_50":81,"_26":29},"gFzdnbIsp575RZqyF",{"_50":53,"_26":29},"features",{"_85":22,"_86":22,"_87":22,"_88":22,"_89":22},"context","errors","htmx","images","navigation","title","WebSim.ai - Interactive Web Simulation Creator","url","https://websim.ai/","prompt",{"_96":97,"_98":99},"type","plaintext","text","HTML:\n

Describe Your Simulation

\n \n \n Upload HTML\n \n

\n \n

Generated Code

Generating simulation...

\n \n \n

\n\n

Code Explanation

Explanation will appear here after code generation.

\nCSS:\n.container {\n display: flex;\n flex-wrap: wrap;\n gap: 2rem;\n}\n\n.panel {\n background: #fff;\n padding: 2rem;\n border-radius: 10px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n flex: 1;\n min-width: 300px;\n}\n\n#code-explanation {\n background: #f9f9f9;\n border: 1px solid #e0e0e0;\n border-radius: 5px;\n padding: 1rem;\n min-height: 200px;\n overflow: auto;\n}\nJavaScript:\ndocument.getElementById('generate-btn').addEventListener('click', async () => {\n const input = document.getElementById('simulation-input').value;\n const output = document.getElementById('simulation-output');\n const preview = document.getElementById('live-preview');\n const explanation = document.getElementById('code-explanation');\n\n output.innerHTML = 'Generating simulation...';\n preview.innerHTML = 'Preparing preview...';\n explanation.innerHTML = 'Preparing explanation...';\n\n try {\n const response = await fetch('https://websim.ai/api/generate', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json',\n },\n body: JSON.stringify({ prompt: input }),\n });\n\n if (!response.ok) {\n throw new Error('Network response was not ok');\n }\n\n const data = await response.json();\n \n output.innerHTML = `\n

HTML:

${escapeHtml(data.html)}

CSS:

${escapeHtml(data.css)}

JavaScript:

${escapeHtml(data.js)}

\n `;\n\n preview.innerHTML = data.html;\n const style = document.createElement('style');\n style.textContent = data.css;\n preview.appendChild(style);\n const script = document.createElement('script');\n script.textContent = data.js;\n preview.appendChild(script);\n\n explanation.innerHTML = data.explanation || 'No explanation provided.';\n } catch (error) {\n console.error('Error:', error);\n output.innerHTML = 'An error occurred while generating the simulation.';\n preview.innerHTML = 'Unable to display preview due to an error.';\n explanation.innerHTML = 'Unable to provide explanation due to an error.';\n }\n});","owner",{"_50":102,"_54":103,"_104":105,"_106":107,"_108":-5,"_109":-5,"_110":111,"_112":113,"_114":29},"9d81be8a-78f9-43f0-8bfc-f4f08ef8c782","2024-07-15T04:13:13.49522+00:00","username","p0p","avatar_url","https://cdn.discordapp.com/avatars/1051282294293414031/fdadb84183d93743515f52254ccb55c0.png","description","twitter","discord_username","picturesonpictures","discord_id","1051282294293414031","is_admin","link_url","/p/_5qf7u6y_0ft0wgm5sb_","versioned_link_url","/p/_5qf7u6y_0ft0wgm5sb_/1","deleted_at","yapping","project",{"_50":123,"_54":124,"_125":126,"_90":91,"_127":128,"_46":129,"_130":131,"_132":63,"_52":133,"_134":63,"_119":-5,"_135":29,"_136":137,"_144":22,"_108":-5,"_145":146,"_147":-5,"_148":149},"_5qf7u6y_0ft0wgm5sb_","2024-09-21T00:36:24.290918+00:00","updated_at","2024-09-21T00:36:24.292+00:00","visibility","public","websim-ai-interactive-web-simulation-creator-3","created_by",{"_50":102,"_54":103,"_104":105,"_106":107,"_108":-5,"_109":-5,"_110":111,"_112":113,"_114":29},"current_version","4zvv4gz0k7cw6urvisoo","parent_version","posted","stats",{"_138":139,"_140":141,"_142":143},"views",38,"likes",2,"comments",0,"auto_set_current","comments_mode","open","from_template","domains",[],"project_revision",{"_50":152,"_62":63,"_54":126,"_153":-5,"_52":-5,"_154":-5,"_155":-5,"_130":156,"_157":158,"_160":123,"_125":126,"_119":-5,"_136":161,"_163":29,"_164":51,"_165":-5,"_166":-5,"_167":-5},"01921202-2864-7a3a-bd37-2ba457340f6e","visited_at","parent_revision_version","parent_revision_project_id",{"_50":102,"_54":103,"_104":105,"_106":107,"_108":-5,"_109":-5,"_110":111,"_112":113,"_114":29},"meta",{"_62":159},"1","project_id",{"_162":143},"multiplayer_count","draft","site_id","chat_session_id","chat_session_run_index","current_screenshot_url","cursor","eyJpZCI6IjAxOTIxMjAyLTI4NjQtN2EzYS1iZDM3LTJiYTQ1NzM0MGY2ZSJ9","token","routes/browser/layout","actionData"]

WebSim.ai - Interactive Web Simulation Creator8mo ago