Spaces:

mgbam
/

builder

Running

App Files Files Community

mgbam commited on Jul 25

Commit

a258a4f

verified ·

1 Parent(s): 9337aa1

Update index.html

Browse files

Files changed (1) hide show

index.html +142 -424

index.html CHANGED Viewed

@@ -1,424 +1,142 @@
-<!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>

+/* ----------------------------------------------------------
+   AnyCoder AI – global dark‑mode theme (readable version)
+   ---------------------------------------------------------- */
+:root{
+  --bg:            #0d1117;
+  --bg-secondary:  #1e2228;   /* brighter than before            */
+  --input-bg:      #f5f7fa;   /* light surface for inputs        */
+  --input-text:    #0d1117;   /* dark text inside light inputs   */
+  --border:        #30363d;
+  --text:          #c9d1d9;
+  --text-muted:    #8b949e;
+  --accent:        #58a6ff;
+  --accent-hover:  #79c0ff;
+  --font-mono:     "SFMono-Regular",Consolas,"Liberation Mono",Menlo,monospace;
+  --radius:        8px;
+  --transition:    .2s ease;
+}
+/* ----- reset ------------------------------------------------- */
+*{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;
+}
+/* ----- layout containers ------------------------------------- */
+header{ text-align:center;margin-bottom:2rem }
+header h1{ font-size:2.5rem;margin-bottom:.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;
+  box-shadow:0 4px 12px rgba(0,0,0,.25);
+}
+h2{ font-size:1.25rem;margin-bottom:1rem }
+label{ display:block;margin-bottom:.5rem;font-weight:600 }
+/* ----- form controls ----------------------------------------- */
+select,
+input[type="file"],
+input[type="url"],
+textarea{
+  width:100%;
+  padding:.75rem;
+  border:1px solid var(--border);
+  border-radius:var(--radius);
+  background:var(--input-bg);
+  color:var(--input-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 -------------------------------------------------- */
+.tabs{ display:flex;gap:.5rem;margin-bottom:1rem }
+.tabs button{
+  background:transparent;
+  border:1px solid var(--border);
+  border-radius:var(--radius);
+  padding:.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);
+}
+/* ----- misc -------------------------------------------------- */
+.search-toggle{ display:flex;align-items:center;gap:.5rem;margin-top:1rem }
+.actions{ display:flex;gap:1rem;justify-content:flex-end }
+button{
+  padding:.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:.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;
+}
+/* ----- mobile tweaks ---------------------------------------- */
+@media(max-width:600px){
+  body{ padding:.5rem }
+  header h1{ font-size:2rem }
+  .actions{ flex-direction:column }
+}