Hugging Face's logo

Spaces:
Tingchenliang
/
how-to-codex-novita
Running

App Files Community
Tingchenliang commited on
Commit
25d51bd
·
verified ·
1 Parent(s): 9eadae2

undefined - Initial Deployment

Browse files
Files changed (3) hide show
  1. README.md +6 -4
  2. index.html +333 -18
  3. prompts.txt +0 -0
README.md CHANGED
@@ -1,10 +1,12 @@
1
  ---
2
- title: How To Codex Novita
3
- emoji: 👀
4
- colorFrom: blue
5
  colorTo: red
6
  sdk: static
7
  pinned: false
 
 
8
  ---
9
 
10
- Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
 
1
  ---
2
+ title: how-to-codex-novita
3
+ emoji: 🐳
4
+ colorFrom: gray
5
  colorTo: red
6
  sdk: static
7
  pinned: false
8
+ tags:
9
+ - deepsite
10
  ---
11
 
12
+ Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
index.html CHANGED
@@ -1,19 +1,334 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
19
  </html>
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Codex with Novita AI - Setup Guide</title>
7
+ <script src="https://cdn.tailwindcss.com"></script>
8
+ <link href="https://unpkg.com/aos@2.3.1/dist/aos.css" rel="stylesheet">
9
+ <script src="https://unpkg.com/aos@2.3.1/dist/aos.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
11
+ <script src="https://unpkg.com/feather-icons"></script>
12
+ <style>
13
+ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');
14
+ body { font-family: 'Inter', sans-serif; }
15
+ .slide { min-height: 100vh; }
16
+ .code-block { background: #1e293b; border-radius: 8px; }
17
+ .glow { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5); }
18
+ .gradient-bg { background: linear-gradient(135deg, #0f172a 0%, #1e293b 50%, #334155 100%); }
19
+ </style>
20
+ </head>
21
+ <body class="bg-gray-900 text-white overflow-x-hidden">
22
+ <div id="app" class="relative">
23
+ <!-- Navigation -->
24
+ <nav class="fixed top-0 w-full bg-gray-900/80 backdrop-blur-sm z-50 border-b border-gray-700">
25
+ <div class="container mx-auto px-6 py-4 flex justify-between items-center">
26
+ <div class="flex items-center space-x-2">
27
+ <div class="w-8 h-8 bg-blue-500 rounded-lg"></div>
28
+ <span class="text-xl font-bold">Novita AI</span>
29
+ </div>
30
+ <div class="flex space-x-6">
31
+ <a href="#slide1" class="text-gray-300 hover:text-white transition">Intro</a>
32
+ <a href="#slide2" class="text-gray-300 hover:text-white transition">Features</a>
33
+ <a href="#slide3" class="text-gray-300 hover:text-white transition">Setup</a>
34
+ <a href="#slide4" class="text-gray-300 hover:text-white transition">Models</a>
35
+ <a href="#slide5" class="text-gray-300 hover:text-white transition">Conclusion</a>
36
+ </div>
37
+ </div>
38
+ </nav>
39
+
40
+ <!-- Slide 1: Title -->
41
+ <section id="slide1" class="slide gradient-bg flex items-center justify-center relative overflow-hidden">
42
+ <div class="absolute inset-0 opacity-20" id="vanta-bg"></div>
43
+ <div class="container mx-auto px-6 z-10" data-aos="fade-up">
44
+ <div class="max-w-4xl mx-auto text-center">
45
+ <div class="inline-block px-4 py-1 bg-blue-900/50 rounded-full text-blue-300 text-sm mb-6">
46
+ Complete Setup Guide
47
+ </div>
48
+ <h1 class="text-5xl md:text-7xl font-bold mb-6 leading-tight">
49
+ How to Use Codex with<br>Novita AI Models
50
+ </h1>
51
+ <p class="text-xl text-gray-300 mb-8">
52
+ Transform your development workflow with powerful AI coding assistance
53
+ </p>
54
+ <div class="flex flex-col sm:flex-row items-center justify-center space-y-4 sm:space-y-0 sm:space-x-4">
55
+ <a href="#slide2" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition glow">
56
+ Get Started
57
+ </a>
58
+ <a href="#slide5" class="px-8 py-3 border border-gray-600 hover:border-blue-500 rounded-lg font-medium transition">
59
+ Learn More
60
+ </a>
61
+ </div>
62
+ </div>
63
+ </div>
64
+ <div class="absolute bottom-10 left-1/2 transform -translate-x-1/2 animate-bounce">
65
+ <i data-feather="chevron-down" class="text-gray-400"></i>
66
+ </div>
67
+ </section>
68
+
69
+ <!-- Slide 2: What is Codex CLI -->
70
+ <section id="slide2" class="slide bg-gray-900 flex items-center">
71
+ <div class="container mx-auto px-6">
72
+ <div class="grid md:grid-cols-2 gap-12 items-center">
73
+ <div data-aos="fade-right">
74
+ <h2 class="text-4xl font-bold mb-6">What is Codex CLI?</h2>
75
+ <p class="text-gray-300 text-lg mb-6">
76
+ Codex CLI is a terminal-based coding agent that combines local execution with cloud AI capabilities.
77
+ Unlike code generation tools that only produce code snippets, Codex CLI can understand your entire project,
78
+ execute the code it creates, debug issues, and iterate until solutions work correctly.
79
+ </p>
80
+ <div class="space-y-4">
81
+ <div class="flex items-start space-x-3">
82
+ <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mt-1">
83
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
84
+ </div>
85
+ <span class="text-gray-200">Local-First Architecture with cloud AI capabilities</span>
86
+ </div>
87
+ <div class="flex items-start space-x-3">
88
+ <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mt-1">
89
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
90
+ </div>
91
+ <span class="text-gray-200">Full project understanding and context awareness</span>
92
+ </div>
93
+ <div class="flex items-start space-x-3">
94
+ <div class="w-6 h-6 bg-blue-500 rounded-full flex items-center justify-center mt-1">
95
+ <i data-feather="check" class="w-4 h-4 text-white"></i>
96
+ </div>
97
+ <span class="text-gray-200">Autonomous operation with multiple approval modes</span>
98
+ </div>
99
+ </div>
100
+ </div>
101
+ <div data-aos="fade-left" class="relative">
102
+ <div class="bg-gray-800 rounded-xl p-6 code-block glow">
103
+ <div class="flex space-x-2 mb-4">
104
+ <div class="w-3 h-3 bg-red-500 rounded-full"></div>
105
+ <div class="w-3 h-3 bg-yellow-500 rounded-full"></div>
106
+ <div class="w-3 h-3 bg-green-500 rounded-full"></div>
107
+ </div>
108
+ <pre class="text-green-400 text-sm"><code>> codex --help
109
+
110
+ Codex CLI - AI Coding Assistant
111
+
112
+ Usage: codex [OPTIONS] [PROMPT]
113
+
114
+ Options:
115
+ --version Show version
116
+ --help Show this help
117
+ --auto Enable auto mode
118
+ --suggest Enable suggest mode
119
+
120
+ > Create a Python API handler
121
+ ✅ Analyzing project structure...
122
+ 🔍 Reading existing patterns...
123
+ ✨ Generating optimized code...</code></pre>
124
+ </div>
125
+ </div>
126
+ </div>
127
+ </div>
128
+ </section>
129
+
130
+ <!-- Slide 3: Setup Guide -->
131
+ <section id="slide3" class="slide bg-gray-800 flex items-center">
132
+ <div class="container mx-auto px-6">
133
+ <div class="text-center mb-16" data-aos="fade-up">
134
+ <h2 class="text-4xl font-bold mb-4">How to Access Novita AI Models</h2>
135
+ <p class="text-gray-300 text-lg">Follow these steps to configure Codex CLI with powerful Novita AI models</p>
136
+ </div>
137
+
138
+ <div class="grid md:grid-cols-3 gap-8">
139
+ <!-- Step 1 -->
140
+ <div class="bg-gray-900 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="100">
141
+ <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
142
+ <span class="text-white font-bold">1</span>
143
+ </div>
144
+ <h3 class="text-xl font-semibold mb-3">Create Account</h3>
145
+ <p class="text-gray-300 mb-4">Visit Novita AI's website and sign up for an account to get started</p>
146
+ <div class="bg-gray-800 rounded p-3">
147
+ <code class="text-sm text-blue-300">https://novita.ai</code>
148
+ </div>
149
+ </div>
150
+
151
+ <!-- Step 2 -->
152
+ <div class="bg-gray-900 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="200">
153
+ <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
154
+ <span class="text-white font-bold">2</span>
155
+ </div>
156
+ <h3 class="text-xl font-semibold mb-3">Get API Key</h3>
157
+ <p class="text-gray-300 mb-4">Generate your API key from the Key Management page</p>
158
+ <div class="bg-gray-800 rounded p-3">
159
+ <code class="text-sm text-blue-300">Authorization: Bearer YOUR_API_KEY</code>
160
+ </div>
161
+ </div>
162
+
163
+ <!-- Step 3 -->
164
+ <div class="bg-gray-900 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="300">
165
+ <div class="w-12 h-12 bg-blue-600 rounded-lg flex items-center justify-center mb-4">
166
+ <span class="text-white font-bold">3</span>
167
+ </div>
168
+ <h3 class="text-xl font-semibold mb-3">Install Codex</h3>
169
+ <p class="text-gray-300 mb-4">Install Codex CLI via npm or Homebrew</p>
170
+ <div class="bg-gray-800 rounded p-3">
171
+ <code class="text-sm text-blue-300">npm install -g @openai/codex</code>
172
+ </div>
173
+ </div>
174
+ </div>
175
+
176
+ <div class="mt-16" data-aos="fade-up">
177
+ <h3 class="text-2xl font-semibold mb-6 text-center">Configuration Example</h3>
178
+ <div class="bg-gray-900 rounded-xl p-6 code-block glow max-w-4xl mx-auto">
179
+ <pre class="text-yellow-200 text-sm"><code>[model_providers.novitaai]
180
+ name = "Novita AI"
181
+ base_url = "https://api.novita.ai/openai"
182
+ http_headers = {"Authorization" = "Bearer YOUR_NOVITA_API_KEY"}
183
+ wire_api = "chat"
184
+
185
+ model = "qwen/qwen3-coder-480b-a35b-instruct"
186
+ model_provider = "novitaai"</code></pre>
187
+ </div>
188
+ </div>
189
+ </div>
190
+ </section>
191
+
192
+ <!-- Slide 4: Models -->
193
+ <section id="slide4" class="slide bg-gray-900 flex items-center">
194
+ <div class="container mx-auto px-6">
195
+ <div class="text-center mb-16" data-aos="fade-up">
196
+ <h2 class="text-4xl font-bold mb-4">Available Models</h2>
197
+ <p class="text-gray-300 text-lg">Choose the right model for your specific development needs</p>
198
+ </div>
199
+
200
+ <div class="grid md:grid-cols-2 lg:grid-cols-3 gap-6">
201
+ <!-- Model 1 -->
202
+ <div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="100">
203
+ <div class="bg-blue-600/20 p-3 rounded-lg mb-4">
204
+ <h3 class="font-semibold text-blue-400">DeepSeek V3.1</h3>
205
+ </div>
206
+ <p class="text-gray-300 mb-4">Superior reasoning and complex problem-solving</p>
207
+ <div class="bg-gray-700 rounded p-2">
208
+ <code class="text-xs text-green-400">deepseek/deepseek-v3.1</code>
209
+ </div>
210
+ </div>
211
+
212
+ <!-- Model 2 -->
213
+ <div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="150">
214
+ <div class="bg-green-600/20 p-3 rounded-lg mb-4">
215
+ <h3 class="font-semibold text-green-400">Qwen Coder</h3>
216
+ </div>
217
+ <p class="text-gray-300 mb-4">Specialized for programming and code refactoring</p>
218
+ <div class="bg-gray-700 rounded p-2">
219
+ <code class="text-xs text-green-400">qwen/qwen3-coder-480b-a35b-instruct</code>
220
+ </div>
221
+ </div>
222
+
223
+ <!-- Model 3 -->
224
+ <div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="200">
225
+ <div class="bg-purple-600/20 p-3 rounded-lg mb-4">
226
+ <h3 class="font-semibold text-purple-400">Kimi K2</h3>
227
+ </div>
228
+ <p class="text-gray-300 mb-4">Agentic workflows and fast execution</p>
229
+ <div class="bg-gray-700 rounded p-2">
230
+ <code class="text-xs text-green-400">moonshotai/kimi-k2-0905</code>
231
+ </div>
232
+ </div>
233
+
234
+ <!-- Model 4 -->
235
+ <div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="250">
236
+ <div class="bg-yellow-600/20 p-3 rounded-lg mb-4">
237
+ <h3 class="font-semibold text-yellow-400">GPT OSS</h3>
238
+ </div>
239
+ <p class="text-gray-300 mb-4">Reliable baseline performance</p>
240
+ <div class="bg-gray-700 rounded p-2">
241
+ <code class="text-xs text-green-400">openai/gpt-oss-120b</code>
242
+ </div>
243
+ </div>
244
+
245
+ <!-- Model 5 -->
246
+ <div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="300">
247
+ <div class="bg-red-600/20 p-3 rounded-lg mb-4">
248
+ <h3 class="font-semibold text-red-400">GLM-4.5</h3>
249
+ </div>
250
+ <p class="text-gray-300 mb-4">High success rate for tool calling</p>
251
+ <div class="bg-gray-700 rounded p-2">
252
+ <code class="text-xs text-green-400">zai-org/glm-4.5</code>
253
+ </div>
254
+ </div>
255
+
256
+ <!-- Model 6 -->
257
+ <div class="bg-gray-800 rounded-xl p-6 glow" data-aos="fade-up" data-aos-delay="350">
258
+ <div class="bg-cyan-600/20 p-3 rounded-lg mb-4">
259
+ <h3 class="font-semibold text-cyan-400">Gemma 3</h3>
260
+ </div>
261
+ <p class="text-gray-300 mb-4">Efficient and fast responses</p>
262
+ <div class="bg-gray-700 rounded p-2">
263
+ <code class="text-xs text-green-400">google/gemma-3-12b-it</code>
264
+ </div>
265
+ </div>
266
+ </div>
267
+ </div>
268
+ </section>
269
+
270
+ <!-- Slide 5: Conclusion -->
271
+ <section id="slide5" class="slide gradient-bg flex items-center">
272
+ <div class="container mx-auto px-6 text-center" data-aos="fade-up">
273
+ <div class="max-w-3xl mx-auto">
274
+ <h2 class="text-4xl font-bold mb-6">Start Your AI Coding Journey</h2>
275
+ <p class="text-gray-300 text-lg mb-8">
276
+ Codex CLI with Novita AI models provides a powerful, flexible development environment
277
+ that combines local control with cloud AI capabilities. Accelerate your workflow while
278
+ maintaining code quality and security.
279
+ </p>
280
+
281
+ <div class="bg-gray-800/50 rounded-xl p-6 mb-8 glow">
282
+ <h3 class="text-xl font-semibold mb-4">Recommended Starting Point</h3>
283
+ <div class="bg-gray-900 rounded p-4">
284
+ <code class="text-green-400">model = "qwen/qwen3-coder-480b-a35b-instruct"</code>
285
+ </div>
286
+ </div>
287
+
288
+ <div class="flex flex-col sm:flex-row justify-center space-y-4 sm:space-y-0 sm:space-x-6">
289
+ <a href="#slide1" class="px-8 py-3 bg-blue-600 hover:bg-blue-700 rounded-lg font-medium transition">
290
+ Get Started
291
+ </a>
292
+ <a href="#" class="px-8 py-3 border border-gray-600 hover:border-blue-500 rounded-lg font-medium transition">
293
+ Documentation
294
+ </a>
295
+ </div>
296
+
297
+ <div class="mt-16 pt-8 border-t border-gray-700">
298
+ <div class="flex items-center justify-center space-x-4 mb-4">
299
+ <div class="w-10 h-10 bg-blue-500 rounded-lg"></div>
300
+ <span class="text-xl font-bold">Novita AI</span>
301
+ </div>
302
+ <p class="text-gray-400">
303
+ An AI cloud platform offering easy model deployment and affordable GPU cloud services
304
+ </p>
305
+ </div>
306
+ </div>
307
+ </div>
308
+ </section>
309
+ </div>
310
+
311
+ <script src="https://cdn.jsdelivr.net/npm/vanta@latest/dist/vanta.globe.min.js"></script>
312
+ <script>
313
+ VANTA.GLOBE({
314
+ el: "#vanta-bg",
315
+ mouseControls: true,
316
+ touchControls: true,
317
+ gyroControls: false,
318
+ minHeight: 200.00,
319
+ minWidth: 200.00,
320
+ scale: 1.00,
321
+ scaleMobile: 1.00,
322
+ color: 0x3b82f6,
323
+ backgroundColor: 0x0f172a
324
+ });
325
+
326
+ AOS.init({
327
+ duration: 1000,
328
+ once: true
329
+ });
330
+
331
+ feather.replace();
332
+ </script>
333
+ </body>
334
  </html>
prompts.txt ADDED
File without changes