Spaces:

codewithdhs
/

anycoder-83eb9ff9

Running

File size: 29,658 Bytes

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Integrate AnyCoder with VS Code - Free AI Coding Assistant</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    :root {
      --primary: #6366f1;
      --primary-dark: #4f46e5;
      --secondary: #ec4899;
      --accent: #06b6d4;
      --success: #10b981;
      --warning: #f59e0b;
      --dark: #0f172a;
      --darker: #020617;
      --light: #f8fafc;
      --gray: #64748b;
      --vscode-blue: #007acc;
    }

    body {
      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
      background: var(--darker);
      color: var(--light);
      min-height: 100vh;
      overflow-x: hidden;
    }

    /* Header */
    header {
      background: linear-gradient(135deg, var(--dark) 0%, var(--darker) 100%);
      padding: 1rem 2rem;
      position: fixed;
      width: 100%;
      top: 0;
      z-index: 1000;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(10px);
    }

    .header-content {
      max-width: 1400px;
      margin: 0 auto;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .logo {
      display: flex;
      align-items: center;
      gap: 0.75rem;
      font-size: 1.5rem;
      font-weight: 700;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .logo i {
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
    }

    .built-with {
      color: var(--gray);
      text-decoration: none;
      font-size: 0.9rem;
      transition: color 0.3s;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .built-with:hover {
      color: var(--primary);
    }

    /* Hero Section */
    .hero {
      padding: 8rem 2rem 4rem;
      text-align: center;
      background: radial-gradient(ellipse at top, rgba(99, 102, 241, 0.15) 0%, transparent 50%);
    }

    .hero h1 {
      font-size: clamp(2rem, 5vw, 3.5rem);
      margin-bottom: 1rem;
      background: linear-gradient(135deg, var(--light) 0%, var(--gray) 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }

    .hero p {
      font-size: clamp(1rem, 2vw, 1.25rem);
      color: var(--gray);
      max-width: 700px;
      margin: 0 auto 2rem;
    }

    .badge-container {
      display: flex;
      justify-content: center;
      gap: 1rem;
      flex-wrap: wrap;
      margin-top: 1.5rem;
    }

    .badge {
      display: inline-flex;
      align-items: center;
      gap: 0.5rem;
      padding: 0.5rem 1rem;
      background: rgba(16, 185, 129, 0.2);
      border: 1px solid var(--success);
      border-radius: 2rem;
      color: var(--success);
      font-size: 0.9rem;
    }

    .badge.warning {
      background: rgba(245, 158, 11, 0.2);
      border-color: var(--warning);
      color: var(--warning);
    }

    /* Main Content */
    main {
      max-width: 1400px;
      margin: 0 auto;
      padding: 2rem;
    }

    .section-title {
      font-size: 1.75rem;
      margin-bottom: 2rem;
      display: flex;
      align-items: center;
      gap: 0.75rem;
    }

    .section-title i {
      color: var(--primary);
    }

    /* Integration Methods */
    .methods-section {
      margin-bottom: 4rem;
    }

    .methods-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
      gap: 2rem;
    }

    .method-card {
      background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(236, 72, 153, 0.05) 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 1.5rem;
      padding: 2rem;
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .method-card::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      height: 4px;
      background: linear-gradient(90deg, var(--primary), var(--secondary));
    }

    .method-card:hover {
      transform: translateY(-5px);
      border-color: var(--primary);
      box-shadow: 0 20px 40px rgba(99, 102, 241, 0.2);
    }

    .method-card.recommended::before {
      background: linear-gradient(90deg, var(--success), var(--accent));
    }

    .method-card.recommended {
      border-color: var(--success);
    }

    .method-header {
      display: flex;
      align-items: center;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .method-icon {
      width: 60px;
      height: 60px;
      border-radius: 1rem;
      background: linear-gradient(135deg, var(--primary), var(--secondary));
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
    }

    .method-card.recommended .method-icon {
      background: linear-gradient(135deg, var(--success), var(--accent));
    }

    .method-title h3 {
      font-size: 1.25rem;
      margin-bottom: 0.25rem;
    }

    .method-title span {
      font-size: 0.85rem;
      color: var(--gray);
    }

    .recommended-badge {
      position: absolute;
      top: 1rem;
      right: 1rem;
      background: var(--success);
      color: white;
      padding: 0.25rem 0.75rem;
      border-radius: 1rem;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .method-card p {
      color: var(--gray);
      line-height: 1.7;
      margin-bottom: 1.5rem;
    }

    .method-steps {
      list-style: none;
    }

    .method-steps li {
      padding: 0.75rem 0;
      padding-left: 2rem;
      position: relative;
      color: var(--light);
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    }

    .method-steps li:last-child {
      border-bottom: none;
    }

    .method-steps li::before {
      content: counter(step);
      counter-increment: step;
      position: absolute;
      left: 0;
      width: 1.5rem;
      height: 1.5rem;
      background: var(--primary);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .method-steps {
      counter-reset: step;
    }

    .method-card.recommended .method-steps li::before {
      background: var(--success);
    }

    /* Code Blocks */
    .code-block {
      background: rgba(0, 0, 0, 0.4);
      border-radius: 0.5rem;
      padding: 1rem;
      margin: 1rem 0;
      font-family: 'Fira Code', 'Consolas', monospace;
      font-size: 0.85rem;
      overflow-x: auto;
      border: 1px solid rgba(255, 255, 255, 0.1);
      position: relative;
    }

    .code-block code {
      color: var(--accent);
    }

    .copy-btn {
      position: absolute;
      top: 0.5rem;
      right: 0.5rem;
      background: rgba(255, 255, 255, 0.1);
      border: none;
      color: var(--gray);
      padding: 0.5rem;
      border-radius: 0.25rem;
      cursor: pointer;
      transition: all 0.3s;
    }

    .copy-btn:hover {
      background: var(--primary);
      color: white;
    }

    /* Step by Step Guide */
    .guide-section {
      margin-bottom: 4rem;
    }

    .guide-tabs {
      display: flex;
      gap: 0.5rem;
      margin-bottom: 2rem;
      flex-wrap: wrap;
    }

    .guide-tab {
      padding: 0.75rem 1.5rem;
      background: rgba(255, 255, 255, 0.05);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 0.5rem;
      color: var(--gray);
      cursor: pointer;
      transition: all 0.3s;
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .guide-tab:hover {
      background: rgba(99, 102, 241, 0.1);
      border-color: var(--primary);
      color: var(--light);
    }

    .guide-tab.active {
      background: var(--primary);
      border-color: var(--primary);
      color: white;
    }

    .guide-content {
      background: linear-gradient(135deg, rgba(15, 23, 42, 0.8) 0%, rgba(2, 6, 23, 0.8) 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 1.5rem;
      padding: 2rem;
    }

    .guide-panel {
      display: none;
    }

    .guide-panel.active {
      display: block;
      animation: fadeIn 0.5s ease;
    }

    @keyframes fadeIn {
      from {
        opacity: 0;
        transform: translateY(10px);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .guide-panel h3 {
      font-size: 1.5rem;
      margin-bottom: 1rem;
      color: var(--primary);
    }

    .guide-panel h4 {
      font-size: 1.1rem;
      margin: 1.5rem 0 0.75rem;
      color: var(--accent);
    }

    .guide-panel p {
      color: var(--gray);
      line-height: 1.8;
      margin-bottom: 1rem;
    }

    .guide-panel ul {
      list-style: none;
      margin: 1rem 0;
    }

    .guide-panel ul li {
      padding: 0.5rem 0;
      padding-left: 1.5rem;
      position: relative;
      color: var(--light);
    }

    .guide-panel ul li::before {
      content: '✓';
      position: absolute;
      left: 0;
      color: var(--success);
    }

    /* Comparison Table */
    .comparison-section {
      margin-bottom: 4rem;
    }

    .comparison-table {
      width: 100%;
      border-collapse: collapse;
      background: rgba(15, 23, 42, 0.5);
      border-radius: 1rem;
      overflow: hidden;
    }

    .comparison-table th,
    .comparison-table td {
      padding: 1rem;
      text-align: left;
      border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    }

    .comparison-table th {
      background: rgba(99, 102, 241, 0.2);
      font-weight: 600;
    }

    .comparison-table tr:hover {
      background: rgba(99, 102, 241, 0.05);
    }

    .comparison-table .check {
      color: var(--success);
    }

    .comparison-table .cross {
      color: #ef4444;
    }

    .comparison-table .partial {
      color: var(--warning);
    }

    /* Tips Section */
    .tips-section {
      margin-bottom: 4rem;
    }

    .tips-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
      gap: 1.5rem;
    }

    .tip-card {
      background: linear-gradient(135deg, rgba(6, 182, 212, 0.1) 0%, rgba(99, 102, 241, 0.1) 100%);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 1rem;
      padding: 1.5rem;
      transition: all 0.3s ease;
    }

    .tip-card:hover {
      border-color: var(--accent);
      transform: translateY(-3px);
    }

    .tip-card i {
      font-size: 2rem;
      margin-bottom: 1rem;
      color: var(--accent);
    }

    .tip-card h4 {
      font-size: 1.1rem;
      margin-bottom: 0.5rem;
    }

    .tip-card p {
      color: var(--gray);
      font-size: 0.9rem;
      line-height: 1.6;
    }

    /* Extension List */
    .extensions-section {
      margin-bottom: 4rem;
    }

    .extension-list {
      display: grid;
      gap: 1rem;
    }

    .extension-item {
      display: flex;
      align-items: center;
      gap: 1.5rem;
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 1rem;
      padding: 1.5rem;
      transition: all 0.3s;
    }

    .extension-item:hover {
      background: rgba(99, 102, 241, 0.05);
      border-color: var(--primary);
    }

    .extension-icon {
      width: 60px;
      height: 60px;
      border-radius: 0.75rem;
      background: var(--vscode-blue);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 1.5rem;
      flex-shrink: 0;
    }

    .extension-info {
      flex: 1;
    }

    .extension-info h4 {
      font-size: 1.1rem;
      margin-bottom: 0.25rem;
    }

    .extension-info p {
      color: var(--gray);
      font-size: 0.9rem;
    }

    .extension-action {
      background: var(--primary);
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      border-radius: 0.5rem;
      cursor: pointer;
      transition: all 0.3s;
      text-decoration: none;
      font-size: 0.9rem;
    }

    .extension-action:hover {
      background: var(--primary-dark);
      transform: scale(1.05);
    }

    /* FAQ Section */
    .faq-section {
      margin-bottom: 4rem;
    }

    .faq-list {
      display: grid;
      gap: 1rem;
    }

    .faq-item {
      background: rgba(255, 255, 255, 0.02);
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 1rem;
      overflow: hidden;
    }

    .faq-question {
      padding: 1.5rem;
      cursor: pointer;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s;
    }

    .faq-question:hover {
      background: rgba(99, 102, 241, 0.05);
    }

    .faq-question h4 {
      font-size: 1rem;
      font-weight: 500;
    }

    .faq-question i {
      color: var(--primary);
      transition: transform 0.3s;
    }

    .faq-item.open .faq-question i {
      transform: rotate(180deg);
    }

    .faq-answer {
      max-height: 0;
      overflow: hidden;
      transition: max-height 0.3s ease;
    }

    .faq-item.open .faq-answer {
      max-height: 500px;
    }

    .faq-answer-content {
      padding: 0 1.5rem 1.5rem;
      color: var(--gray);
      line-height: 1.7;
    }

    /* Footer */
    footer {
      text-align: center;
      padding: 2rem;
      border-top: 1px solid rgba(255, 255, 255, 0.1);
      color: var(--gray);
    }

    footer a {
      color: var(--primary);
      text-decoration: none;
    }

    footer a:hover {
      text-decoration: underline;
    }

    /* Responsive */
    @media (max-width: 768px) {
      header {
        padding: 1rem;
      }

      .header-content {
        flex-direction: column;
        gap: 0.5rem;
      }

      .methods-grid {
        grid-template-columns: 1fr;
      }

      .comparison-table {
        font-size: 0.85rem;
      }

      .comparison-table th,
      .comparison-table td {
        padding: 0.75rem 0.5rem;
      }

      .extension-item {
        flex-direction: column;
        text-align: center;
      }
    }

    /* Scrollbar */
    ::-webkit-scrollbar {
      width: 8px;
    }

    ::-webkit-scrollbar-track {
      background: var(--darker);
    }

    ::-webkit-scrollbar-thumb {
      background: var(--primary);
      border-radius: 4px;
    }

    ::-webkit-scrollbar-thumb:hover {
      background: var(--primary-dark);
    }

    /* Alert Box */
    .alert-box {
      background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(239, 68, 68, 0.1) 100%);
      border: 1px solid var(--warning);
      border-radius: 1rem;
      padding: 1.5rem;
      margin-bottom: 2rem;
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .alert-box i {
      font-size: 1.5rem;
      color: var(--warning);
      flex-shrink: 0;
    }

    .alert-box h4 {
      color: var(--warning);
      margin-bottom: 0.5rem;
    }

    .alert-box p {
      color: var(--gray);
      font-size: 0.95rem;
      line-height: 1.6;
    }

    /* Success Box */
    .success-box {
      background: linear-gradient(135deg, rgba(16, 185, 129, 0.1) 0%, rgba(6, 182, 212, 0.1) 100%);
      border: 1px solid var(--success);
      border-radius: 1rem;
      padding: 1.5rem;
      margin-bottom: 2rem;
      display: flex;
      gap: 1rem;
      align-items: flex-start;
    }

    .success-box i {
      font-size: 1.5rem;
      color: var(--success);
      flex-shrink: 0;
    }

    .success-box h4 {
      color: var(--success);
      margin-bottom: 0.5rem;
    }

    .success-box p {
      color: var(--gray);
      font-size: 0.95rem;
      line-height: 1.6;
    }
  </style>
</head>

<body>
  <header>
    <div class="header-content">
      <div class="logo">
        <i class="fas fa-code"></i>
        AnyCoder + VS Code
      </div>
      <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" class="built-with">
        <i class="fas fa-rocket"></i>
        Built with anycoder
      </a>
    </div>
  </header>

  <section class="hero">
    <h1>Integrate AI Coding Assistant with VS Code</h1>
    <p>Replace your GitHub Copilot subscription with free, powerful AI alternatives. Learn multiple ways to integrate
      AnyCoder and other AI models directly into Visual Studio Code.</p>
    <div class="badge-container">
      <span class="badge"><i class="fas fa-dollar-sign"></i> 100% Free</span>
      <span class="badge"><i class="fas fa-lock-open"></i> No Subscription</span>
      <span class="badge"><i class="fas fa-infinity"></i> Unlimited Usage</span>
      <span class="badge warning"><i class="fas fa-info-circle"></i> Multiple Options</span>
    </div>
  </section>

  <main>
    <!-- Alert Box -->
    <div class="alert-box">
      <i class="fas fa-lightbulb"></i>
      <div>
        <h4>Important Information</h4>
        <p>AnyCoder on Hugging Face Spaces is a web-based AI code generator. To get similar functionality directly in VS
          Code, you have several options including using the Continue extension with free models, Codeium, or setting up
          your own local AI. Below are all the methods explained in detail.</p>
      </div>
    </div>

    <!-- Integration Methods -->
    <section class="methods-section">
      <h2 class="section-title">
        <i class="fas fa-plug"></i>
        Integration Methods
      </h2>

      <div class="methods-grid">
        <!-- Method 1: Continue Extension -->
        <div class="method-card recommended">
          <span class="recommended-badge">RECOMMENDED</span>
          <div class="method-header">
            <div class="method-icon">
              <i class="fas fa-play-circle"></i>
            </div>
            <div class="method-title">
              <h3>Continue Extension</h3>
              <span>Free AI with multiple providers</span>
            </div>
          </div>
          <p>Continue is an open-source AI code assistant that works with various free AI providers including Ollama,
            HuggingFace, and more.</p>
          <ol class="method-steps">
            <li>Install Continue extension from VS Code marketplace</li>
            <li>Configure with free AI providers (Ollama, HuggingFace)</li>
            <li>Get inline completions and chat features</li>
            <li>Customize with your preferred models</li>
          </ol>
        </div>

        <!-- Method 2: Codeium -->
        <div class="method-card">
          <div class="method-header">
            <div class="method-icon">
              <i class="fas fa-bolt"></i>
            </div>
            <div class="method-title">
              <h3>Codeium</h3>
              <span>Free forever for individuals</span>
            </div>
          </div>
          <p>Codeium offers free AI code completion with no usage limits. It's a direct Copilot alternative with
            excellent performance.</p>
          <ol class="method-steps">
            <li>Install Codeium extension from marketplace</li>
            <li>Create a free Codeium account</li>
            <li>Authenticate in VS Code</li>
            <li>Start coding with AI suggestions</li>
          </ol>
        </div>

        <!-- Method 3: Ollama Local -->
        <div class="method-card">
          <div class="method-header">
            <div class="method-icon">
              <i class="fas fa-server"></i>
            </div>
            <div class="method-title">
              <h3>Ollama (Local AI)</h3>
              <span>Run AI models on your machine</span>
            </div>
          </div>
          <p>Run powerful AI models locally on your computer. Complete privacy, no internet required, and completely
            free.</p>
          <ol class="method-steps">
            <li>Download and install Ollama</li>
            <li>Pull a code model (CodeLlama, DeepSeek)</li>
            <li>Install Continue or compatible extension</li>
            <li>Connect extension to local Ollama</li>
          </ol>
        </div>

        <!-- Method 4: Tabby -->
        <div class="method-card">
          <div class="method-header">
            <div class="method-icon">
              <i class="fas fa-cat"></i>
            </div>
            <div class="method-title">
              <h3>Tabby</h3>
              <span>Self-hosted AI assistant</span>
            </div>
          </div>
          <p>Tabby is an open-source, self-hosted AI coding assistant. Host it yourself for complete control and
            privacy.</p>
          <ol class="method-steps">
            <li>Install Tabby server locally or on cloud</li>
            <li>Install Tabby VS Code extension</li>
            <li>Configure connection to your server</li>
            <li>Enjoy private AI completions</li>
          </ol>
        </div>
      </div>
    </section>

    <!-- Step by Step Guide -->
    <section class="guide-section">
      <h2 class="section-title">
        <i class="fas fa-book-open"></i>
        Step-by-Step Setup Guides
      </h2>

      <div class="guide-tabs">
        <button class="guide-tab active" onclick="showGuide('continue')">
          <i class="fas fa-play-circle"></i> Continue + HuggingFace
        </button>
        <button class="guide-tab" onclick="showGuide('codeium')">
          <i class="fas fa-bolt"></i> Codeium
        </button>
        <button class="guide-tab" onclick="showGuide('ollama')">
          <i class="fas fa-server"></i> Ollama Local
        </button>
        <button class="guide-tab" onclick="showGuide('anycoder')">
          <i class="fas fa-code"></i> AnyCoder Workflow
        </button>
      </div>

      <div class="guide-content">
        <!-- Continue Guide -->
        <div class="guide-panel active" id="guide-continue">
          <h3><i class="fas fa-play-circle"></i> Setting Up Continue with Free Models</h3>
          <p>Continue is the most flexible option as it supports multiple AI providers. Here's how to set it up with
            HuggingFace's free inference API:</p>

          <h4>Step 1: Install the Extension</h4>
          <p>Open VS Code and go to Extensions (Ctrl+Shift+X). Search for "Continue" and install it.</p>
          <div class="code-block">
            <button class="copy-btn" onclick="copyCode(this)"><i class="fas fa-copy"></i></button>
            <code>ext install Continue.continue</code>
          </div>

          <h4>Step 2: Get HuggingFace API Token</h4>
          <ul>
            <li>Go to huggingface.co and create a free account</li>
            <li>Navigate to Settings → Access Tokens</li>
            <li>Create a new token with read permissions</li>
          </ul>

          <h4>Step 3: Configure Continue</h4>
          <p>Open Continue settings (click the gear icon in Continue sidebar) and add this configuration:</p>
          <div class="code-block">
            <button class="copy-btn" onclick="copyCode(this)"><i class="fas fa-copy"></i></button>
            <code>{
  "models": [
    {
      "title": "DeepSeek Coder",
      "provider": "huggingface-inference-api",
      "model": "deepseek-ai/deepseek-coder-6.7b-instruct",
      "apiKey": "YOUR_HF_TOKEN"
    }
  ],
  "tabAutocompleteModel": {
    "title": "Starcoder",
    "provider": "huggingface-inference-api", 
    "model": "bigcode/starcoder2-3b",
    "apiKey": "YOUR_HF_TOKEN"
  }
}</code>
          </div>

          <h4>Step 4: Start Coding!</h4>
          <ul>
            <li>Use Ctrl+L to open the AI chat</li>
            <li>Select code and press Ctrl+Shift+L to add to context</li>
            <li>Get inline completions as you type</li>
          </ul>
        </div>

        <!-- Codeium Guide -->
        <div class="guide-panel" id="guide-codeium">
          <h3><i class="fas fa-bolt"></i> Setting Up Codeium (Easiest Option)</h3>
          <p>Codeium is the easiest to set up and offers unlimited free usage for individual developers.</p>

          <h4>Step 1: Install Extension</h4>
          <div class="code-block">
            <button class="copy-btn" onclick="copyCode(this)"><i class="fas fa-copy"></i></button>
            <code>ext install Codeium.codeium</code>
          </div>

          <h4>Step 2: Create Account</h4>
          <ul>
            <li>Click the Codeium icon in VS Code sidebar</li>
            <li>Click "Sign Up" or "Log In"</li>
            <li>Use Google, GitHub, or email to register</li>
            <li>Verify your email if required</li>
          </ul>

          <h4>Step 3: Authenticate</h4>
          <p>After creating your account, VS Code will automatically authenticate. You should see "Codeium: Active" in
            the status bar.</p>

          <h4>Features You Get:</h4>
          <ul>
            <li>Inline code completions (like Copilot)</li>
            <li>Multi-line suggestions</li>
            <li>Natural language to code</li>
            <li>Code explanations</li>
            <li>Support for 70+ languages</li>
          </ul>

          <div class="success-box">
            <i class="fas fa-check-circle"></i>
            <div>
              <h4>That's it!</h4>
              <p>Codeium is now active. Start typing code and you'll see AI suggestions appear automatically.</p>
            </div>
          </div>
        </div>

        <!-- Ollama Guide -->
        <div class="guide-panel" id="guide-ollama">
          <h3><i class="fas fa-server"></i> Setting Up Ollama for Local AI</h3>
          <p>Run AI models locally for complete privacy and offline usage. Requires a decent GPU for best performance.
          </p>

          <h4>Step 1: Install Ollama</h4>
          <p>Download from ollama.ai and install for your operating system.</p>
          <div class="code-block">
            <button class="copy-btn" onclick="copyCode(this)"><i class="fas fa-copy"></i></button>
            <code># macOS/Linux
curl -fsSL https://ollama.ai/install.sh | sh

# Windows: Download from ollama.ai</code>
          </div>

          <h4>Step 2: Pull a Code Model</h4>
          <div class="code-block">
            <button class="copy-btn" onclick="copyCode(this)"><i class="fas fa-copy"></i></button>
            <code># Recommended for coding
ollama pull deepseek-coder:6.7b

# Alternative options
ollama pull codellama:7b
ollama pull starcoder2:3b</code>
          </div>

          <h4>Step 3: Install Continue Extension</h4>
          <p>Install Continue in VS Code, then configure it to use Ollama:</p>
          <div class="code-block">
            <button class="copy-btn" onclick="copyCode(this)"><i class="fas fa-copy"></i></button>
            <code>{
  "models": [
    {
      "title": "DeepSeek Coder Local",
      "provider": "ollama",
      "model": "deepseek-coder:6.7b"
    }
  ],
  "tabAutocompleteModel": {
    "title": "StarCoder Local",
    "provider": "ollama",
    "model": "starcoder2:3b"
  }
}</code>
          </div>

          <h4>System Requirements:</h4>
          <ul>
            <li>Minimum 8GB RAM (16GB recommended)</li>
            <li>GPU with 6GB+ VRAM for best performance</li>
            <li>SSD storage for faster model loading</li>
          </ul>
        </div>

        <!-- AnyCoder Workflow -->
        <div class="guide-panel" id="guide-anycoder">
          <h3><i class="fas fa-code"></i> Using AnyCoder with VS Code</h3>
          <p>While AnyCoder doesn't have a direct VS Code extension, you can create an efficient workflow to use it
            alongside your editor.</p>

          <h4>Method 1: Side-by-Side Workflow</h4>
          <ul>
            <li>Open AnyCoder in your browser</li>
            <li>Split screen with VS Code</li>
            <li>Generate code in AnyCoder</li>
            <li>Copy and paste into VS Code</li>
          </ul>

          <h4>Method 2: Use Browser Extension</h4>
          <p>Install a clipboard manager or use browser extensions to quickly transfer code:</p>
          <ul>
            <li>Use "Copy All Code" browser extensions</li>
            <li>Set up keyboard shortcuts for quick paste</li>
            <li>Use VS Code's "Paste JSON as Code" features</li>
          </ul>

          <h4>Method 3: Create Custom Snippets</h4>
          <p>Save frequently generated code as VS Code snippets:</p>
          <div class="code-block">
            <button class="copy-btn" onclick="copyCode(this)"><i class="fas fa-copy"></i></button>
            <code>// In VS Code: File → Preferences → User Snippets
{
  "AnyCoder Template": {
    "prefix": "anycode",
    "body": [
      "// Generated with AnyCoder",
      "$0"
    ],
    "description": "AnyCoder generated code template"
  }
}</code>
          </div>

          <h4>Pro Tip: Use Both!</h4>
          <p>Combine AnyCoder for complex UI generation with Codeium/Continue for inline completions. This gives you the
            best of both worlds!</p>
        </div>
      </div>
    </section>

    <!-- Comparison Table -->
    <section class="comparison-section">
      <h2 class="section-title">
        <i class="fas fa-balance-scale"></i>
        Comparison: Free Alternatives vs GitHub Copilot
      </h2>

      <table class="comparison-table">
        <thead>
          <tr>
            <th>Feature</th>
            <th>GitHub Copilot</th>
            <th>Codeium</th>
            <th>Continue</th>
            <th>Ollama</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Price