|
|
<!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: "Qwen/Qwen3-32B", |
|
|
id: "Qwen/Qwen3-32B", |
|
|
description: "Qwen3-32B model for code generation and general tasks" |
|
|
}, |
|
|
{ |
|
|
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> |
