1<!DOCTYPE html> 2<html lang="en" w-tid="1"> 3<head w-tid="3"> 4 5<title>AI Code Generator</title> 6<meta property="og:title" content="AI Code Generator"/> 7<meta property="og:url" content="https://websim.com/@noname_isaidnoname/ai-code-generator"/> 8<meta property="og:type" content="website"/> 9<meta property="twitter:card" content="summary_large_image"/> 10<meta property="og:description" content="AI Code Generator (Puter Edition) â a remix using Puter.ai for code generation across JavaScript, Python, HTML/CSS, Java, C++, Rust and more. Access extra models (token required), built-inâ¦"/> 11<meta property="twitter:description" content="AI Code Generator (Puter Edition) â a remix using Puter.ai for code generation across JavaScript, Python, HTML/CSS, Java, C++, Rust and more. Access extra models (token required), built-inâ¦"/> 12<meta property="og:image" content="https://images.websim.com/v1/project/539q3dha6slss_0yuksi/revision/574/1200.jpeg"/> 13<meta property="twitter:image" content="https://images.websim.com/v1/project/539q3dha6slss_0yuksi/revision/574/1200.jpeg"/> 14<link rel="canonical" href="https://websim.com/@noname_isaidnoname/ai-code-generator"> 15<link rel="stylesheet" href="https://api.websim.com/fonts.css?v=59b4d6f0525fbf73730caa0373d38046a181f598"> 16<style class="websim-injected websim-ios-mobile-fix"> 17/* iOS zoom prevention and overscroll behavior - injected by WebSim */ 18html, body { 19 touch-action: pan-x pan-y; 20 -webkit-text-size-adjust: 100%;
21 overscroll-behavior: none; 22 overscroll-behavior-y: none; 23} 24input, textarea, select { 25 font-size: max(1rem, 16px) !important; 26} 27</style>
28<script class="websim-injected">__WEBSIM_DATA__={"home":false,"hostOrigin":"https://websim.com","apiOrigin":"https://api.websim.com","isTopLevelFrame":true,"project_id":"539q3dha6slss_0yuksi","project_version":574,"activityCaptureMode":"on","route":{"type":"project","id":"539q3dha6slss_0yuksi"},"baseUrl":"https://codegen.on.websim.com"}</script>
vendor: 1 bytes, line 28
28
29<script class="websim-injected" src="https://api.websim.com/dist/index.js?v=59b4d6f0525fbf73730caa0373d38046a181f598"></script>
29 30<meta charset="UTF-8" w-tid="5"/> 31 <meta name="viewport" content="width=device-width, initial-scale=1.0" w-tid="7"/> 32 <!--title>AI Code Generator</title--> 33 <link rel="stylesheet" href="style.css?v=574" w-tid="11"/> 34 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/11.9.0/styles/github-dark.min.css" w-tid="13"/> 35 <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css" w-tid="15"/> 36</head> 37<body w-tid="17"> 38 <!-- Mobile floating sidebar toggle button (hidden on desktop) --> 39 <button class="sidebar-toggle mobile-toggle" w-tid="19"> 40 <i class="fas fa-bars" w-tid="21"></i> 41 </button> 42 43 <div class="sidebar" w-tid="23"> 44 <button class="sidebar-toggle desktop-toggle" w-tid="25"> 45 <i class="fas fa-bars" w-tid="27"></i> 46 </button> 47 <!-- Mobile close button --> 48 <button class="sidebar-close mobile-close" w-tid="29"> 49 <i class="fas fa-times" w-tid="31"></i> 50 </button> 51 <div class="sidebar-tabs" w-tid="33"> 52 <!-- Tabs will be dynamically generated --> 53 </div> 54 </div> 55 <div class="container" w-tid="35"> 56 <div class="title-section" w-tid="37"> 57 <p class="subtitle" w-tid="39">Advanced</p> 58 <h1 w-tid="41"><span id="titleText" w-tid="43">AI Code Generator</span></h1> 59 </div> 60 61 <div class="input-group" w-tid="45"> 62 <label for="language" w-tid="47">Programming Language/Software:</label> 63 <select id="language" w-tid="49"> 64 <option value="javascript" w-tid="51">JavaScript</option> 65 <option value="css" w-tid="53">CSS</option> 66 <option value="html" w-tid="55">HTML</option> 67 <option value="html_css_javascript_all_in_one_file" w-tid="57">HTML + CSS + Javascript (All in one file)</option> 68 <option value="python" w-tid="59">Python</option> 69 <option value="java" w-tid="61">Java</option> 70 <option value="cpp" w-tid="63">C++</option> 71 <option value="csharp" w-tid="65">C#</option> 72 <option value="php" w-tid="67">PHP</option> 73 <option value="ruby" w-tid="69">Ruby</option> 74 <option value="swift" w-tid="71">Swift</option> 75 <option value="kotlin" w-tid="73">Kotlin</option> 76 <option value="rust" w-tid="75">Rust</option> 77 <option value="go" w-tid="77">Go</option> 78 <option value="typescript" w-tid="79">TypeScript</option> 79 <option value="sql" w-tid="81">SQL</option> 80 <option value="lua" w-tid="83">Lua</option> 81 <option value="custom" w-tid="85">+ Add Custom Language</option> 82 </select> 83 <div id="customLanguageInput" class="custom-language-input hidden" w-tid="87"> 84 <input type="text" id="customLanguage" placeholder="Enter custom language name" w-tid="89"/> 85 </div> 86 </div> 87 88 <!-- Target Language input group moved directly under the Source Language --> 89 <div class="input-group hidden" data-mode-option="targetLanguage" w-tid="91"> 90 <label for="targetLanguage" w-tid="93">Target Language:</label> 91 <select id="targetLanguage" w-tid="95"> 92 <option value="javascript" w-tid="97">JavaScript</option> 93 <option value="css" w-tid="99">CSS</option> 94 <option value="html" w-tid="101">HTML</option> 95 <option value="html_css_javascript_all_in_one_file" w-tid="103">HTML + CSS + Javascript (All in one file)</option> 96 <option value="python" w-tid="105">Python</option> 97 <option value="java" w-tid="107">Java</option> 98 <option value="cpp" w-tid="109">C++</option> 99 <option value="csharp" w-tid="111">C#</option> 100 <option value="php" w-tid="113">PHP</option> 101 <option value="ruby" w-tid="115">Ruby</option> 102 <option value="swift" w-tid="117">Swift</option> 103 <option value="kotlin" w-tid="119">Kotlin</option> 104 <option value="rust" w-tid="121">Rust</option> 105 <option value="go" w-tid="123">Go</option> 106 <option value="typescript" w-tid="125">TypeScript</option> 107 <option value="sql" w-tid="127">SQL</option> 108 <option value="lua" w-tid="129">Lua</option> 109 </select> 110 </div> 111 112 <div class="input-group" w-tid="131"> 113 <label id="descriptionLabel" for="description" w-tid="133">Description of Code to Generate/Modify:</label> 114 <textarea id="description" placeholder="Describe what you want the code to do..." w-tid="135"></textarea> 115 </div> 116 117 <div class="input-group" w-tid="137"> 118 <label for="additionalContext" w-tid="139">Additional Context for the AI:</label> 119 <textarea id="additionalContext" placeholder="Add extra description about your co
119de provided..." w-tid="141"></textarea> 120 </div> 121 122 <!-- Mode-specific options --> 123 <div id="modeOptionsContainer" w-tid="143"> 124 <!-- Mode option controls will be created dynamically by the app --> 125 </div> 126 127 <button id="clearOutput" w-tid="145"> 128 <span class="button-text" w-tid="147">Clear Output</span> 129 </button> 130 131 <button id="execute" w-tid="149"> 132 <span class="button-text" w-tid="151">Execute</span> 133 <div class="loading-spinner" w-tid="153"></div> 134 </button> 135 </div> 136 137 <div id="output" class="output hidden" w-tid="155"> 138 <!-- Code output will be displayed here --> 139 </div> 140 141 <!-- Suggestion Modal --> 142 <div id="suggestion-modal" class="hidden" w-tid="157"> 143 <div class="modal-content" w-tid="159"> 144 <h2 w-tid="161">Community Suggested Features!</h2> 145 <p w-tid="163">This "Suggestions" tab showcases new generator modes and features that have been implemented based on ideas from our community!</p> 146 <p w-tid="165">For example, the new "Roaster" mode was a direct suggestion from a user like you!</p> 147 <p w-tid="167">Keep an eye out for more exciting additions, and feel free to submit your own ideas through this project's comment section!</p> 148 <button id="suggestion-modal-close" class="modal-close-button" w-tid="169">Got It!</button> 149 </div> 150 </div> 151 152 <!-- Token Management Modal --> 153 <div id="token-modal" class="hidden" w-tid="171"> 154 <div class="modal-content" w-tid="173"> 155 <h2 w-tid="175">Token Management</h2> 156 <p w-tid="177">Manage your Puter.com API tokens for accessing AI models. Add multiple tokens for automatic rotation and rate limit management.</p> 157 158 <div class="token-editor" w-tid="179"> 159 <table id="token-table" w-tid="181"> 160 <thead w-tid="183"> 161 <tr w-tid="185"> 162 <th w-tid="187">Token Name</th> 163 <th w-tid="189">Token Value</th> 164 <th w-tid="191">Actions</th> 165 </tr> 166 </thead> 167 <tbody id="token-table-body" w-tid="193"> 168 <!-- Tokens will be populated here --> 169 </tbody> 170 <tfoot w-tid="195"> 171 <tr w-tid="197"> 172 <td colspan="3" w-tid="199"> 173 <div class="modal-footer-controls" w-tid="201"> 174 <div class="footer-buttons" w-tid="203"> 175 <button id="add-token-btn" class="modal-close-button compact-btn" w-tid="205">Add Manual Token</button> 176 <button id="quick-register-btn" class="modal-close-button compact-btn" style="background-color: #10b981;" w-tid="207">Quick Register (via Puter)</button> 177 </div> 178 <div class="footer-buttons secondary-footer-buttons" w-tid="209"> 179 <button id="export-tokens-btn" class="modal-close-button compact-btn" style="background-color: #6366f1;" w-tid="211"><i class="fas fa-file-export" w-tid="213"></i> Export to Clipboard</button> 180 <button id="import-tokens-btn" class="modal-close-button compact-btn" style="background-color: #8b5cf6;" w-tid="215"><i class="fas fa-file-import" w-tid="217"></i> Import from Clipboard</button> 181 </div> 182 <div class="footer-options" w-tid="219"> 183 <div class="test-model-selection" w-tid="221"> 184 <label for="testModelSelect" style="font-size: 0.8em; margin-bottom: 2px; color: var(--mode-label);" w-tid="223">Test Model:</label> 185 <input type="text" id="testModelSearch" placeholder="ð Search..." autocomplete="off" style="font-size: 11px; height: 26px; margin-bottom: 4px; padding: 2px 8px; width: 100%;" w-tid="225"/> 186 <select id="testModelSelect" style="font-size: 11px; height: 26px; padding: 2px 8px; width: 100%;" w-tid="227"></select> 187 </div> 188 <label class="compact-checkbox" w-tid="229"> 189 <input type="checkbox" id="global-test-mode" checked w-tid="231"/> 190 <span w-tid="233">Test Mode (No Usage)</span> 191 </label> 192 </div> 193 </div> 194 </td> 195 </tr> 196 </tfoot> 197 </table> 198 </div> 199 200 <div class="token-guidance" w-tid="235"> 201 <h3 w-tid="237">How to Create Tokens</h3> 202 <p w-tid="239"><strong w-tid="241">Recommended Method (Easiest):</strong></p> 203 <ol w-tid="243"> 204 <li w-tid="245">Click the green <b w-tid="247">"Quick Register (via Puter)"</b> button.</li> 205 <li w-tid="249">A popup will appearâsimply sign in or create an account there.</li> 206 <li w-tid="251">The app will automatically add your account to the list above.</li> 207 <li w-tid="253"><b w-tid="255">Final Check:</b> Click the blue <b w-tid="257">"Test"</b> button next to the token to ensure it's working!</li> 208 </ol> 209 210 <p w-tid="259"><strong w-tid="261">Manual Method:</strong></p> 211 <ol w-tid="263"> 212 <li w-tid="265">Go to <a href="https://docs.puter.com/playground/auth-sign-in/" target="_blank" w-tid="267">Puter Auth Playground</a>.</li> 213 <li w-tid="269">Click <b w-tid="271">Run</b>, then <b w-tid="273">Sign in</b> (create an account; use <a href="https://temp-mail.org/" target="_blank" w-tid="275">temp-mail.org</a> for privacy â this also lets you create more disposable emails and tokens if needed).</li> 214 <li w-tid="277">Copy the <code w-tid="279">token</code> value from the JSON output (exclude quotes).</li> 215 <li w-tid="281">Click <b w-tid="283">"Add Manual Token"</b> above and paste your token into the field.</li> 216 <li w-tid="285"><b w-tid="287">Final Check:</b> Click the blue <b w-tid="289">"Test"</b> button to verify the token is valid and active.</li> 217 </ol> 218 219 <p w-tid="291"><strong w-tid="293">ð¡ Pro Tips:</strong></p> 220 <ul style="color: var(--mode-label); font-size: 0.9em; padding-left: 20px;" w-tid="295"> 221 <li w-tid="297">Avoid expensive models (like Claude 3.5) on new accounts to prevent instant rate limits.</li> 222 <li w-tid="299">Add multiple tokens for automatic rotation; the app handles switching if one is limited!</li> 223 </ul> 224 225 <h4 w-tid="301">Known Issues and Fixes</h4> 226 <p style="color: var(--mode-label); font-size: 0.9em;" w-tid="303">Issue: When signing up via the Puter popup using a temporary email (e.g., from temp-mail.org), the signup may sometimes fail with an error saying the email appears to be invalid.</p> 227 <p style="color: var(--mode-label); font-size: 0.9em;" w-tid="305"><strong w-tid="307">Fix:</strong> Go back to the temporary email provider (e.g., temp-mail.org), click the "Delete" or "Reset" button to remove the current temporary address â the service will immediately generate a new email for you to use. Then retry the Puter signup with the newly generated temporary email.</p> 228 </div> 229 230 <button id="token-modal-close" class="modal-close-button" w-tid="309">Close</button> 231 </div> 232 </div> 233 234 <!-- Token Export Security Warning Modal --> 235 <div id="token-export-modal" class="hidden" w-tid="311"> 236 <div class="modal-content" w-tid="313"> 237 <h2 style="color: #f59e0b;" w-tid="315"><i class="fas fa-exclamation-triangle" w-tid="317"></i> Security Warning</h2> 238 <p w-tid="319">You are about to copy your API tokens to your clipboard. Tokens grant access to your AI models and credits.</p> 239 <p w-tid="321"><b w-tid="323">Never share these tokens</b> with anyone you don't trust. Ensure you are in a private environment before proceeding.</p> 240 <div class="footer-buttons" style="justify-content: center; margin-top: 20px;" w-tid="325"> 241 <button id="confirm-export-btn" class="modal-close-button compact-btn" style="background-color: #10b981;" w-tid="327">I Understand, Copy Now</button> 242 <button id="cancel-export-btn" class="modal-close-button compact-btn" style="background-color: #ef4444;" w-tid="329">Cancel</button> 243 </div> 244 </div> 245 </div> 246 247 <!-- Token Import Modal --> 248 <div id="token-import-modal" class="hidden" w-tid="331"> 249 <div class="modal-content" w-tid="333"> 250 <h2 w-tid="335">Import Tokens</h2> 251 <p w-tid="337">Paste the exported token JSON you copied previously into the box below. This will add them to your current list.</p> 252 <textarea id="import-token-json" placeholder='[{"tokenName": "...", "value": "...", "disabled": false}, ...]' style="height: 150px; font-family: monospace; font-size: 12px; margin-bottom: 15px;" w-tid="339"></textarea> 253 <div class="footer-buttons" style="justify-content: center;" w-tid="341"> 254 <button id="confirm-import-btn" class="modal-close-button compact-btn" style="background-color: #10b981;" w-tid="343">Import Tokens</button> 255 <button id="cancel-import-btn" class="modal-close-button compact-btn" style="background-color: #ef4444;" w-tid="345">Cancel</button> 256 </div> 257 </div> 258 </div> 259 260
260<script type="module" src="script.js?v=574" w-tid="347"></script>
vendor: 1 bytes, line 260
260
261<script type="module" src="https://static.cloudflareinsights.com/beacon.min.js/v31edd6df95cf4e85bb4c19e7a9bdbcba1788362987495" integrity="sha512-iIg7k2xntmwu6/uSb5tpc/hySgZc4eoL31yB29W6tJFo2akwjPWcEqnCEdJvGexCL0KEQwVYv5BlowfhVz26hg==" data-cf-beacon='{"version":"2024.11.0","token":"4c6229722a6346bc8eb5cb0e5eae5d41","spa":2}' crossorigin="anonymous"></script>
261 262</body> 263</html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.