|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>Codex with Novita AI - Setup Guide</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet"> |
|
|
<script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> |
|
|
<script src="https://unpkg.com/feather-icons"></script> |
|
|
<style> |
|
|
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
|
|
body { font-family: 'Inter', sans-serif; } |
|
|
.slide { min-height: 100vh; } |
|
|
.code-block { background: #1e293b; border-radius: 8px; } |
|
|
.glow { box-shadow: 0 0 20px rgba(75, 85, 99, 0.5); } |
|
|
.gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); } |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-900 text-white overflow-x-hidden"> |
|
|
<div id="app" class="relative"> |
|
|
|
|
|
<nav class="fixed top-0 w-full bg-gray-900/80 backdrop-blur-sm z-50 border-b border-gray-700"> |
|
|
<div class="container mx-auto px-6 py-4 flex justify-between items-center"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<img src="https://huggingface.co/spaces/Tingchenliang/how-to-codex-novita/resolve/main/images/头像3.png" alt="Novita AI Logo" class="w-8 h-8 rounded-lg"> |
|
|
<span class="text-xl font-bold">Novita AI</span> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#slide1" class="text-gray-300 hover:text-white transition">Intro</a> |
|
|
<a href="#slide2" class="text-gray-300 hover:text-white transition">Features</a> |
|
|
<a href="#slide3" class="text-gray-300 hover:text-white transition">Setup</a> |
|
|
<a href="#slide4" class="text-gray-300 hover:text-white transition">Models</a> |
|
|
<a href="#slide5" class="text-gray-300 hover:text-white transition">Conclusion</a> |
|
|
</div> |
|
|
</div> |
|
|
</nav> |
|
|
|
|
|
|
|
|
<section id="slide1" class="slide gradient-bg flex items-center justify-center relative overflow-hidden"> |
|
|
<div class="absolute inset-0 opacity-20" id="vanta-bg"></div> |
|
|
<div class="container mx-auto px-6 z-10" data-aos="fade-up"> |
|
|
<div class="max-w-4xl mx-auto text-center"> |
|
|
<div class="inline-block px-4 py-1 bg-blue-900/50 rounded-full text-blue-300 text-sm mb-6"> |
|
|
Complete Setup Guide |
|
|
</div> |
|
|
<h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight"> |
|
|
How to Use Codex with<br>Novita AI Models |
|
|
</h1> |
|
|
<p class="text-xl text-gray-300 mb-8"> |
|
|
Transform your development workflow with powerful AI coding assistance |
|
|
</p> |
|
|
<div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4"> |
|
|
<a href="#slide2" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition glow"> |
|
|
Get Started |
|
|
</a> |
|
|
<a href="#slide5" class="px-8 py-3 border border-gray-600 hover:border-blue-500 rounded-lg font-medium transition"> |
|
|
Learn More |
|
|
</a> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce"> |
|
|
<i data-feather="chevron-down" class="text-gray-400"></i> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="slide2" class="slide bg-gray-900 flex items-center"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="grid md:grid-cols-2 gap-12 items-center"> |
|
|
<div data-aos="fade-right"> |
|
|
<h2 class="text-4xl font-bold mb-6">What is Codex CLI?</h2> |
|
|
<p class="text-gray-300 text-lg mb-6"> |
|
|
Codex CLI is a terminal-based coding agent that combines local execution with cloud AI capabilities. |
|
|
Unlike code generation tools that only produce code snippets, Codex CLI can understand your entire project, |
|
|
execute the code it creates, debug issues, and iterate until solutions work correctly. |
|
|
</p> |
|
|
<div class="space-y-4"> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mt-1"> |
|
|
<i data-feather="check" class="w-4 h-4 text-white"></i> |
|
|
</div> |
|
|
<span class="text-gray-200">Local-First Architecture with cloud AI capabilities</span> |
|
|
</div> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mt-1"> |
|
|
<i data-feather="check" class="w-4 h-4 text-white"></i> |
|
|
</div> |
|
|
<span class="text-gray-200">Full project understanding and context awareness</span> |
|
|
</div> |
|
|
<div class="flex items-start space-x-3"> |
|
|
<div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mt-1"> |
|
|
<i data-feather="check" class="w-4 h-4 text-white"></i> |
|
|
</div> |
|
|
<span class="text-gray-200">Autonomous operation with multiple approval modes</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
<div data-aos="fade-left" class="relative"> |
|
|
<div class="bg-gray-800 rounded-xl p-6 code-block glow"> |
|
|
<div class="flex space-x-2 mb-4"> |
|
|
<div class="w-3 h-3 bg-red-500 rounded-full"></div> |
|
|
<div class="w-3 h-3 bg-yellow-500 rounded-full"></div> |
|
|
<div class="w-3 h-3 bg-green-500 rounded-full"></div> |
|
|
</div> |
|
|
<pre class="text-green-400 text-sm"><code>> codex --help |
|
|
|
|
|
Codex CLI - AI Coding Assistant |
|
|
|
|
|
Usage: codex [OPTIONS] [PROMPT] |
|
|
|
|
|
Options: |
|
|
--version Show version |
|
|
--help Show this help |
|
|
--auto Enable auto mode |
|
|
--suggest Enable suggest mode |
|
|
|
|
|
> Create a Python API handler |
|
|
✅ Analyzing project structure... |
|
|
🔍 Reading existing patterns... |
|
|
✨ Generating optimized code...</code></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="slide3" class="slide bg-gray-800 flex items-center"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-4xl font-bold mb-4">How to Access Novita AI Models</h2> |
|
|
<p class="text-gray-300 text-lg">Follow these steps to configure Codex CLI with powerful Novita AI models</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-3 gap-8"> |
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4"> |
|
|
<span class="text-white font-bold">1</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Create Account</h3> |
|
|
<p class="text-gray-300 mb-4">Visit Novita AI's website and sign up for an account to get started</p> |
|
|
<div class="bg-gray-800 rounded p-3"> |
|
|
<code class="text-sm text-blue-300">https://novita.ai</code> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4"> |
|
|
<span class="text-white font-bold">2</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Get API Key</h3> |
|
|
<p class="text-gray-300 mb-4">Generate your API key from the Key Management page</p> |
|
|
<div class="bg-gray-800 rounded p-3"> |
|
|
<code class="text-sm text-blue-300">Authorization: Bearer YOUR_API_KEY</code> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-900 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4"> |
|
|
<span class="text-white font-bold">3</span> |
|
|
</div> |
|
|
<h3 class="text-xl font-semibold mb-3">Install Codex</h3> |
|
|
<p class="text-gray-300 mb-4">Install Codex CLI via npm or Homebrew</p> |
|
|
<div class="bg-gray-800 rounded p-3"> |
|
|
<code class="text-sm text-blue-300">npm install -g @openai/codex</code> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16" data-aos="fade-up"> |
|
|
<h3 class="text-2xl font-semibold mb-6 text-center">Configuration Example</h3> |
|
|
<div class="bg-gray-900 rounded-xl p-6 code-block glow max-w-4xl mx-auto"> |
|
|
<pre class="text-yellow-200 text-sm"><code>[model_providers.novitaai] |
|
|
name = "Novita AI" |
|
|
base_url = "https://api.novita.ai/openai" |
|
|
http_headers = {"Authorization" = "Bearer YOUR_NOVITA_API_KEY"} |
|
|
wire_api = "chat" |
|
|
|
|
|
model = "qwen/qwen3-coder-480b-a35b-instruct" |
|
|
model_provider = "novitaai"</code></pre> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="slide4" class="slide bg-gray-900 flex items-center"> |
|
|
<div class="container mx-auto px-6"> |
|
|
<div class="text-center mb-16" data-aos="fade-up"> |
|
|
<h2 class="text-4xl font-bold mb-4">Available Models</h2> |
|
|
<p class="text-gray-300 text-lg">Choose the right model for your specific development needs</p> |
|
|
</div> |
|
|
|
|
|
<div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6"> |
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="100"> |
|
|
<div class="bg-blue-600/20 p-3 rounded-lg mb-4"> |
|
|
<h3 class="font-semibold text-blue-400">DeepSeek V3.1</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Superior reasoning and complex problem-solving</p> |
|
|
<div class="bg-gray-700 rounded p-2"> |
|
|
<code class="text-xs text-green-400">deepseek/deepseek-v3.1</code> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="150"> |
|
|
<div class="bg-green-600/20 p-3 rounded-lg mb-4"> |
|
|
<h3 class="font-semibold text-green-400">Qwen Coder</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Specialized for programming and code refactoring</p> |
|
|
<div class="bg-gray-700 rounded p-2"> |
|
|
<code class="text-xs text-green-400">qwen/qwen3-coder-480b-a35b-instruct</code> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="200"> |
|
|
<div class="bg-purple-600/20 p-3 rounded-lg mb-4"> |
|
|
<h3 class="font-semibold text-purple-400">Kimi K2</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Agentic workflows and fast execution</p> |
|
|
<div class="bg-gray-700 rounded p-2"> |
|
|
<code class="text-xs text-green-400">moonshotai/kimi-k2-0905</code> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="250"> |
|
|
<div class="bg-yellow-600/20 p-3 rounded-lg mb-4"> |
|
|
<h3 class="font-semibold text-yellow-400">GPT OSS</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Reliable baseline performance</p> |
|
|
<div class="bg-gray-700 rounded p-2"> |
|
|
<code class="text-xs text-green-400">openai/gpt-oss-120b</code> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="300"> |
|
|
<div class="bg-red-600/20 p-3 rounded-lg mb-4"> |
|
|
<h3 class="font-semibold text-red-400">GLM-4.5</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">High success rate for tool calling</p> |
|
|
<div class="bg-gray-700 rounded p-2"> |
|
|
<code class="text-xs text-green-400">zai-org/glm-4.5</code> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="350"> |
|
|
<div class="bg-cyan-600/20 p-3 rounded-lg mb-4"> |
|
|
<h3 class="font-semibold text-cyan-400">Gemma 3</h3> |
|
|
</div> |
|
|
<p class="text-gray-300 mb-4">Efficient and fast responses</p> |
|
|
<div class="bg-gray-700 rounded p-2"> |
|
|
<code class="text-xs text-green-400">google/gemma-3-12b-it</code> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
|
|
|
|
|
|
<section id="slide5" class="slide gradient-bg flex items-center"> |
|
|
<div class="container mx-auto px-6 text-center" data-aos="fade-up"> |
|
|
<div class="max-w-3xl mx-auto"> |
|
|
<h2 class="text-4xl font-bold mb-6">Start Your AI Coding Journey</h2> |
|
|
<p class="text-gray-300 text-lg mb-8"> |
|
|
Codex CLI with Novita AI models provides a powerful, flexible development environment |
|
|
that combines local control with cloud AI capabilities. Accelerate your workflow while |
|
|
maintaining code quality and security. |
|
|
</p> |
|
|
|
|
|
<div class="bg-gray-800/50 rounded-xl p-6 mb-8 glow"> |
|
|
<h3 class="text-xl font-semibold mb-4">Recommended Starting Point</h3> |
|
|
<div class="bg-gray-900 rounded p-4"> |
|
|
<code class="text-green-400">model = "qwen/qwen3-coder-480b-a35b-instruct"</code> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6"> |
|
|
<a href="#slide1" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition"> |
|
|
Get Started |
|
|
</a> |
|
|
<a href="#" class="px-8 py-3 border border-gray-600 hover:border-blue-500 rounded-lg font-medium transition"> |
|
|
Documentation |
|
|
</a> |
|
|
</div> |
|
|
|
|
|
<div class="mt-16 pt-8 border-t border-gray-700"> |
|
|
<div class="flex items-center justify-center space-x-4 mb-4"> |
|
|
<div class="w-10 h-10 bg-blue-500 rounded-lg"></div> |
|
|
<span class="text-xl font-bold">Novita AI</span> |
|
|
</div> |
|
|
<p class="text-gray-400"> |
|
|
An AI cloud platform offering easy model deployment and affordable GPU cloud services |
|
|
</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</section> |
|
|
</div> |
|
|
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script> |
|
|
<script> |
|
|
VANTA.GLOBE({ |
|
|
el: "#vanta-bg", |
|
|
mouseControls: true, |
|
|
touchControls: true, |
|
|
gyroControls: false, |
|
|
minHeight: 200.00, |
|
|
minWidth: 200.00, |
|
|
scale: 1.00, |
|
|
scaleMobile: 1.00, |
|
|
color: 0x3b82f6, |
|
|
backgroundColor: 0x0f172a |
|
|
}); |
|
|
|
|
|
AOS.init({ |
|
|
duration: 1000, |
|
|
once: true |
|
|
}); |
|
|
|
|
|
feather.replace(); |
|
|
</script> |
|
|
</body> |
|
|
</html> |
|
|
|
