Spaces:

mgbam
/

builder

Running

File size: 12,190 Bytes

<!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">
        <!-- options populated by script -->
      </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">&lt;/&gt;</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>
    // Model definitions
    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"
      }
    ];

    // Populate model dropdown
    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);
    });

    // Tab functionality
    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"]');

    // Clear session
    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 = '';
    });

    // Generate code (stub)
    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;
      }
      // Simulate generation
      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>