| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
| <title>AnyCoder AI Code Generator</title> |
| <meta name="description" content="Generate, modify, and understand code with the most advanced AI models." /> |
| <style> |
| :root { |
| --bg: #0d1117; |
| --bg-secondary: #161b22; |
| --border: #30363d; |
| --text: #c9d1d9; |
| --text-muted: #8b949e; |
| --accent: #58a6ff; |
| --accent-hover: #79c0ff; |
| --danger: #f85149; |
| --success: #56d364; |
| --font-mono: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace; |
| --radius: 8px; |
| --transition: 0.2s ease; |
| } |
| |
| * { |
| box-sizing: border-box; |
| margin: 0; |
| padding: 0; |
| } |
| |
| body { |
| font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; |
| background: var(--bg); |
| color: var(--text); |
| line-height: 1.6; |
| padding: 1rem; |
| } |
| |
| header { |
| text-align: center; |
| margin-bottom: 2rem; |
| } |
| |
| header h1 { |
| font-size: 2.5rem; |
| margin-bottom: 0.5rem; |
| } |
| |
| header p { |
| color: var(--text-muted); |
| font-size: 1.1rem; |
| } |
| |
| main { |
| max-width: 900px; |
| margin: 0 auto; |
| display: grid; |
| gap: 2rem; |
| } |
| |
| section { |
| background: var(--bg-secondary); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 1.5rem; |
| } |
| |
| h2 { |
| font-size: 1.25rem; |
| margin-bottom: 1rem; |
| } |
| |
| label { |
| display: block; |
| margin-bottom: 0.5rem; |
| font-weight: 600; |
| } |
| |
| select, |
| input[type="file"], |
| input[type="url"], |
| textarea { |
| width: 100%; |
| padding: 0.75rem; |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| background: var(--bg); |
| color: var(--text); |
| font-size: 1rem; |
| transition: border-color var(--transition); |
| } |
| |
| select:focus, |
| input:focus, |
| textarea:focus { |
| outline: none; |
| border-color: var(--accent); |
| } |
| |
| textarea { |
| resize: vertical; |
| min-height: 120px; |
| font-family: var(--font-mono); |
| } |
| |
| .tabs { |
| display: flex; |
| gap: 0.5rem; |
| margin-bottom: 1rem; |
| } |
| |
| .tabs button { |
| background: transparent; |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 0.5rem 1rem; |
| color: var(--text-muted); |
| cursor: pointer; |
| transition: background var(--transition), color var(--transition); |
| } |
| |
| .tabs button[aria-selected="true"] { |
| background: var(--accent); |
| color: var(--bg); |
| border-color: var(--accent); |
| } |
| |
| .tabs button:hover:not([aria-selected="true"]) { |
| background: var(--border); |
| color: var(--text); |
| } |
| |
| .search-toggle { |
| display: flex; |
| align-items: center; |
| gap: 0.5rem; |
| margin-top: 1rem; |
| } |
| |
| .actions { |
| display: flex; |
| gap: 1rem; |
| justify-content: flex-end; |
| } |
| |
| button { |
| padding: 0.75rem 1.5rem; |
| border: none; |
| border-radius: var(--radius); |
| font-size: 1rem; |
| cursor: pointer; |
| transition: background var(--transition); |
| } |
| |
| #clear { |
| background: var(--border); |
| color: var(--text); |
| } |
| |
| #clear:hover { |
| background: var(--text-muted); |
| } |
| |
| #generate { |
| background: var(--accent); |
| color: var(--bg); |
| } |
| |
| #generate:hover { |
| background: var(--accent-hover); |
| } |
| |
| pre { |
| background: var(--bg); |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| padding: 1rem; |
| overflow-x: auto; |
| font-family: var(--font-mono); |
| font-size: 0.9rem; |
| } |
| |
| iframe { |
| width: 100%; |
| height: 400px; |
| border: 1px solid var(--border); |
| border-radius: var(--radius); |
| background: #fff; |
| } |
| |
| .visually-hidden { |
| position: absolute; |
| width: 1px; |
| height: 1px; |
| overflow: hidden; |
| clip: rect(0 0 0 0); |
| white-space: nowrap; |
| } |
| |
| @media (max-width: 600px) { |
| body { |
| padding: 0.5rem; |
| } |
| |
| header h1 { |
| font-size: 2rem; |
| } |
| |
| .actions { |
| flex-direction: column; |
| } |
| } |
| </style> |
| </head> |
| <body> |
| <header> |
| <h1>🚀 AnyCoder AI</h1> |
| <p>Your AI partner for generating, modifying, and understanding code.</p> |
| </header> |
|
|
| <main> |
| <section aria-labelledby="model-selection"> |
| <h2 id="model-selection">1. Select Model</h2> |
| <label for="model" class="visually-hidden">AI Model</label> |
| <select id="model" name="model"> |
| |
| </select> |
| </section> |
|
|
| <section aria-labelledby="context-input"> |
| <h2 id="context-input">2. Provide Context</h2> |
| <div class="tabs" role="tablist"> |
| <button role="tab" aria-selected="true" id="tab-prompt" aria-controls="panel-prompt">Prompt</button> |
| <button role="tab" aria-selected="false" id="tab-file" aria-controls="panel-file">File</button> |
| <button role="tab" aria-selected="false" id="tab-website" aria-controls="panel-website">Website</button> |
| </div> |
|
|
| <div role="tabpanel" id="panel-prompt"> |
| <textarea id="prompt" placeholder="Describe what you want to build…" aria-label="Prompt input"></textarea> |
| </div> |
| <div role="tabpanel" id="panel-file" hidden> |
| <label for="reference-file">Reference File</label> |
| <input type="file" id="reference-file" accept=".pdf,.docx,.txt" /> |
| </div> |
| <div role="tabpanel" id="panel-website" hidden> |
| <label for="website-url">Website URL</label> |
| <input type="url" id="website-url" placeholder="https://example.com" /> |
| </div> |
| </section> |
|
|
| <section aria-labelledby="output-config"> |
| <h2 id="output-config">3. Configure Output</h2> |
| <label for="language">Target Language</label> |
| <select id="language"> |
| <option value="html">HTML</option> |
| <option value="python">Python</option> |
| <option value="javascript">JavaScript</option> |
| <option value="transformers.js">Transformers.js</option> |
| </select> |
| <div class="search-toggle"> |
| <input type="checkbox" id="web-search" /> |
| <label for="web-search">Enable Web Search</label> |
| </div> |
| </section> |
|
|
| <section class="actions"> |
| <button id="clear" type="button">Clear Session</button> |
| <button id="generate" type="button">Generate Code</button> |
| </section> |
|
|
| <section aria-labelledby="output-tabs"> |
| <h2 id="output-tabs" class="visually-hidden">Output</h2> |
| <div class="tabs" role="tablist"> |
| <button role="tab" aria-selected="true" id="tab-code" aria-controls="panel-code">Code</button> |
| <button role="tab" aria-selected="false" id="tab-preview" aria-controls="panel-preview">Live Preview</button> |
| <button role="tab" aria-selected="false" id="tab-history" aria-controls="panel-history">History</button> |
| </div> |
|
|
| <div role="tabpanel" id="panel-code"> |
| <pre><code id="code-output" class="language-html"></></code></pre> |
| </div> |
| <div role="tabpanel" id="panel-preview" hidden> |
| <iframe id="preview" title="Live preview" sandbox="allow-scripts allow-same-origin"></iframe> |
| </div> |
| <div role="tabpanel" id="panel-history" hidden> |
| <ul id="history-list" aria-live="polite"></ul> |
| </div> |
| </section> |
| </main> |
|
|
| <script> |
| |
| const AVAILABLE_MODELS = [ |
| { |
| name: "Moonshot Kimi-K2", |
| id: "moonshotai/Kimi-K2-Instruct", |
| description: "Moonshot AI Kimi-K2-Instruct model for code generation and general tasks", |
| default_provider: "groq" |
| }, |
| { |
| name: "DeepSeek V3", |
| id: "deepseek-ai/DeepSeek-V3-0324", |
| description: "DeepSeek V3 model for code generation" |
| }, |
| { |
| name: "DeepSeek R1", |
| id: "deepseek-ai/DeepSeek-R1-0528", |
| description: "DeepSeek R1 model for code generation" |
| }, |
| { |
| name: "ERNIE-4.5-VL", |
| id: "baidu/ERNIE-4.5-VL-424B-A47B-Base-PT", |
| description: "ERNIE-4.5-VL model for multimodal code generation with image support" |
| }, |
| { |
| name: "MiniMax M1", |
| id: "MiniMaxAI/MiniMax-M1-80k", |
| description: "MiniMax M1 model for code generation and general tasks" |
| }, |
| { |
| name: "Qwen3-235B-A22B", |
| id: "Qwen/Qwen3-235B-A22B", |
| description: "Qwen3-235B-A22B model for code generation and general tasks" |
| }, |
| { |
| name: "SmolLM3-3B", |
| id: "HuggingFaceTB/SmolLM3-3B", |
| description: "SmolLM3-3B model for code generation and general tasks" |
| }, |
| { |
| name: "GLM-4.1V-9B-Thinking", |
| id: "THUDM/GLM-4.1V-9B-Thinking", |
| description: "GLM-4.1V-9B-Thinking model for multimodal code generation with image support" |
| }, |
| { |
| name: "OpenAI GPT-4", |
| id: "openai/gpt-4", |
| description: "OpenAI GPT-4 model via HF Inference Providers", |
| default_provider: "openai" |
| }, |
| { |
| name: "Gemini Pro", |
| id: "gemini/pro", |
| description: "Google Gemini Pro model via HF Inference Providers", |
| default_provider: "gemini" |
| }, |
| { |
| name: "Fireworks AI", |
| id: "fireworks-ai/fireworks-v1", |
| description: "Fireworks AI model via HF Inference Providers", |
| default_provider: "fireworks" |
| } |
| ]; |
| |
| |
| const modelSelect = document.getElementById('model'); |
| AVAILABLE_MODELS.forEach(model => { |
| const option = document.createElement('option'); |
| option.value = model.id; |
| option.textContent = model.name; |
| option.title = model.description; |
| modelSelect.appendChild(option); |
| }); |
| |
| |
| function setupTabs(tabContainerSelector) { |
| const tabContainer = document.querySelector(tabContainerSelector); |
| const tabs = tabContainer.querySelectorAll('[role="tab"]'); |
| const panels = tabContainer.parentElement.querySelectorAll('[role="tabpanel"]'); |
| |
| tabs.forEach(tab => { |
| tab.addEventListener('click', () => { |
| tabs.forEach(t => { |
| t.setAttribute('aria-selected', 'false'); |
| t.tabIndex = -1; |
| }); |
| tab.setAttribute('aria-selected', 'true'); |
| tab.tabIndex = 0; |
| |
| panels.forEach(panel => { |
| panel.hidden = true; |
| if (panel.id === tab.getAttribute('aria-controls')) { |
| panel.hidden = false; |
| } |
| }); |
| }); |
| }); |
| } |
| |
| setupTabs('.tabs[role="tablist"]'); |
| |
| |
| document.getElementById('clear').addEventListener('click', () => { |
| document.getElementById('prompt').value = ''; |
| document.getElementById('reference-file').value = ''; |
| document.getElementById('website-url').value = ''; |
| document.getElementById('code-output').textContent = '</>'; |
| document.getElementById('preview').srcdoc = ''; |
| document.getElementById('history-list').innerHTML = ''; |
| }); |
| |
| |
| document.getElementById('generate').addEventListener('click', () => { |
| const prompt = document.getElementById('prompt').value.trim(); |
| const language = document.getElementById('language').value; |
| if (!prompt) { |
| alert('Please provide a prompt.'); |
| return; |
| } |
| |
| const code = `// Generated ${language} code\n// Prompt: ${prompt}\n\nconsole.log('Hello, AnyCoder AI!');`; |
| document.getElementById('code-output').textContent = code; |
| document.getElementById('preview').srcdoc = `<pre>${code}</pre>`; |
| const li = document.createElement('li'); |
| li.textContent = new Date().toLocaleTimeString() + ' - ' + prompt.substring(0, 30) + '...'; |
| document.getElementById('history-list').prepend(li); |
| }); |
| </script> |
| </body> |
| </html> |
