Update static/index.html

static/index.html

@@ -5,211 +5,9 @@
   <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>
+  <!-- external stylesheet -->
+  <link rel="stylesheet" href="style.css" />
 </head>
 <body>
   <header>
@@ -251,10 +49,34 @@
       <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="c">C</option>
+        <option value="cpp">C++</option>
+        <option value="markdown">Markdown</option>
+        <option value="latex">LaTeX</option>
+        <option value="json">JSON</option>
+        <option value="html">HTML</option>
+        <option value="css">CSS</option>
         <option value="javascript">JavaScript</option>
-        <option value="transformers.js">Transformers.js</option>
+        <option value="jinja2">Jinja2</option>
+        <option value="typescript">TypeScript</option>
+        <option value="yaml">YAML</option>
+        <option value="dockerfile">Dockerfile</option>
+        <option value="shell">Shell</option>
+        <option value="r">R</option>
+        <option value="sql">SQL (generic)</option>
+        <option value="sql-msSQL">SQL - MS SQL</option>
+        <option value="sql-mySQL">SQL - MySQL</option>
+        <option value="sql-mariaDB">SQL - MariaDB</option>
+        <option value="sql-sqlite">SQL - SQLite</option>
+        <option value="sql-cassandra">SQL - Cassandra</option>
+        <option value="sql-plSQL">SQL - PL/SQL</option>
+        <option value="sql-hive">SQL - Hive</option>
+        <option value="sql-pgSQL">SQL - PostgreSQL</option>
+        <option value="sql-gql">SQL - GraphQL</option>
+        <option value="sql-gpSQL">SQL - Greenplum</option>
+        <option value="sql-sparkSQL">SQL - SparkSQL</option>
+        <option value="sql-esper">SQL - Esper</option>
       </select>
       <div class="search-toggle">
         <input type="checkbox" id="web-search" />
@@ -287,138 +109,7 @@
     </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>
+  <!-- your existing model list and tab-logic unchanged -->
+  <script src="index.js"></script>
 </body>
-</html>
+</html>