Spaces:
Running
Running
| <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 |