Spaces:

mgbam
/

builder

Running

App Files Files Community

mgbam commited on Jul 25

Commit

ca8dbee

verified ·

1 Parent(s): dcf9dad

Update index.html

Browse files

Files changed (1) hide show

index.html +407 -18

index.html CHANGED Viewed

@@ -1,30 +1,419 @@
---- index.html ---
-```html
 <!DOCTYPE html>
 <html lang="en">
 <head>
-  <meta charset="UTF-8">
-  <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <title>Transformer Sentiment Analyzer</title>
-  <link rel="stylesheet" href="style.css">
 </head>
 <body>
   <header>
-    <h1>Transformer Sentiment Analyzer</h1>
   </header>
-  <main class="container">
-    <form id="analyze-form">
-      <label for="modelSelect">Choose model:</label>
-      <select id="modelSelect" name="modelSelect" aria-label="Select sentiment model">
-        <!-- Dynamically populated in index.js -->
       </select>
-      <label for="inputText">Enter text to analyze:</label>
-      <textarea id="inputText" name="inputText" rows="4" placeholder="Type your text here..." required aria-required="true"></textarea>
-      <button type="submit" id="analyzeButton">Analyze Sentiment</button>
-    </form>
-    <section id="result" aria-live="polite"></section>
   </main>
-  <script type="module" src="index.js"></script>
 </body>
 </html>

 <!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: "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>