Skip to content

Commit 1e0da81

Browse files
yossiovadiaclaude
yossiovadia
and
claude
committed
feat: enhance terminal demo with improved layout and OpenAI compatibility showcase (vllm-project#249)
- Redesigned layout: terminals 1&2 stacked on left, terminal 3 on right - Added complete OpenAI response format demonstration including: - system_fingerprint field - prompt_tokens_details with cached_tokens - completion_tokens_details with reasoning_tokens - Enhanced token_usage object - Optimized terminal 3 performance with 3x faster typing speed (17ms vs 50ms) - Improved content visibility with responsive sizing and grid layout - Showcases enhanced OpenAI API compatibility addressing missing fields 🤖 Generated with [Claude Code](https://claude.ai/code) Signed-off-by: Yossi Ovadia <[email protected]> Co-authored-by: Claude <[email protected]>
1 parent 93626a0 commit 1e0da81

File tree

1 file changed

+80
-26
lines changed

1 file changed

+80
-26
lines changed

‎e2e-tests/llm-katan/terminal-demo.html‎

Lines changed: 80 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -20,19 +20,20 @@
2020
display: grid;
2121
grid-template-columns: 1fr 1fr;
2222
gap: 20px;
23-
max-width: 1200px;
23+
max-width: 1400px;
2424
margin: 0 auto;
25+
grid-template-areas:
26+
"terminal1 terminal3"
27+
"terminal2 terminal3";
2528
}
2629

2730
.terminal {
2831
background: #1e1e1e;
2932
border: 1px solid #333;
3033
border-radius: 8px;
3134
padding: 15px;
32-
min-height: 220px;
33-
max-height: 250px;
35+
min-height: 300px;
3436
position: relative;
35-
overflow-y: auto;
3637
}
3738

3839
.terminal-header {
@@ -73,31 +74,40 @@
7374
font-size: 16px;
7475
}
7576

76-
.terminal-full {
77-
grid-column: 1 / -1;
78-
margin-top: 20px;
79-
min-height: 300px;
80-
max-height: none;
77+
.terminal1 {
78+
grid-area: terminal1;
79+
}
80+
81+
.terminal2 {
82+
grid-area: terminal2;
83+
}
84+
85+
.terminal3 {
86+
grid-area: terminal3;
87+
min-height: 500px;
88+
max-height: 600px;
89+
font-size: 12px;
90+
line-height: 1.2;
8191
}
8292
</style>
8393
</head>
8494
<body>
8595
<div class="title">🚀 LLM Katan Multi-Instance Demo</div>
86-
<div class="description">Run the same tiny model as different AI providers for testing</div>
96+
<div class="description">Multi-instance setup + Enhanced OpenAI API compatibility showcase</div>
8797

8898
<div class="terminal-container">
89-
<div class="terminal">
99+
<div class="terminal terminal1">
90100
<div class="terminal-header">Terminal 1: GPT-3.5-Turbo Instance</div>
91101
<div id="terminal1"></div>
92102
</div>
93103

94-
<div class="terminal">
104+
<div class="terminal terminal2">
95105
<div class="terminal-header">Terminal 2: Claude-3-Haiku Instance</div>
96106
<div id="terminal2"></div>
97107
</div>
98108

99-
<div class="terminal terminal-full">
100-
<div class="terminal-header">Terminal 3: Testing Both Endpoints</div>
109+
<div class="terminal terminal3">
110+
<div class="terminal-header">Terminal 3: Testing Enhanced OpenAI Compatibility</div>
101111
<div id="terminal3"></div>
102112
</div>
103113
</div>
@@ -148,10 +158,10 @@
148158
// Terminal 3: Testing both endpoints (starts after both servers finish)
149159
setTimeout(() => {
150160
new TypeIt("#terminal3", {
151-
speed: 50,
161+
speed: 17,
152162
waitUntilVisible: true
153163
})
154-
.type('<span class="success"># Both servers are now running! Let\'s test them...</span>')
164+
.type('<span class="success"># Both servers are now running! Let\'s test enhanced OpenAI compatibility...</span>')
155165
.break()
156166
.break()
157167
.pause(1000)
@@ -160,30 +170,74 @@
160170
.type('<span class="output">"gpt-3.5-turbo"</span>')
161171
.break()
162172
.break()
163-
.pause(1500)
173+
.pause(1000)
164174
.type('<span class="prompt">$</span> <span class="command">curl http://localhost:8001/v1/models | jq \'.data[0].id\'</span>')
165175
.break()
166176
.type('<span class="output">"claude-3-haiku"</span>')
167177
.break()
168178
.break()
169-
.pause(1500)
170-
.type('<span class="success"># Same Qwen3-0.6B model, different API names!</span>')
171-
.break()
172-
.type('<span class="success"># Perfect for testing multi-provider scenarios 🎯</span>')
173-
.break()
174-
.break()
175179
.pause(1000)
176-
.type('<span class="prompt">$</span> <span class="command"># Try a chat completion with "GPT"</span>')
180+
.type('<span class="success"># Testing full OpenAI-compatible response</span>')
177181
.break()
178182
.type('<span class="prompt">$</span> <span class="command">curl -X POST http://localhost:8000/v1/chat/completions \\</span>')
179183
.break()
180184
.type('<span class="command"> -H "Content-Type: application/json" \\</span>')
181185
.break()
182186
.type('<span class="command"> -d \'{"model": "gpt-3.5-turbo", "messages": [{"role": "user", "content": "Hi!"}]}\'</span>')
183187
.break()
184-
.type('<span class="output">{"choices": [{"message": {"content": "Hello! How can I help you today?"}}]}</span>')
188+
.pause(1000)
189+
.type('<span class="output">{</span>')
190+
.break()
191+
.type('<span class="output"> "id": "cmpl-mock-1734567890",</span>')
192+
.break()
193+
.type('<span class="output"> "object": "chat.completion",</span>')
194+
.break()
195+
.type('<span class="output"> "created": 1734567890,</span>')
196+
.break()
197+
.type('<span class="output"> "model": "gpt-3.5-turbo",</span>')
198+
.break()
199+
.type('<span class="output"> "system_fingerprint": "llm-katan-v0.1.8",</span>')
200+
.break()
201+
.type('<span class="output"> "choices": [{</span>')
202+
.break()
203+
.type('<span class="output"> "index": 0,</span>')
204+
.break()
205+
.type('<span class="output"> "message": {"role": "assistant", "content": "Hello! How can I help?"},</span>')
206+
.break()
207+
.type('<span class="output"> "finish_reason": "stop",</span>')
208+
.break()
209+
.type('<span class="output"> "logprobs": null</span>')
210+
.break()
211+
.type('<span class="output"> }],</span>')
212+
.break()
213+
.type('<span class="output"> "usage": {</span>')
214+
.break()
215+
.type('<span class="output"> "prompt_tokens": 12,</span>')
216+
.break()
217+
.type('<span class="output"> "completion_tokens": 8,</span>')
218+
.break()
219+
.type('<span class="output"> "total_tokens": 20,</span>')
220+
.break()
221+
.type('<span class="output"> "prompt_tokens_details": {"cached_tokens": 0},</span>')
222+
.break()
223+
.type('<span class="output"> "completion_tokens_details": {"reasoning_tokens": 0}</span>')
224+
.break()
225+
.type('<span class="output"> },</span>')
226+
.break()
227+
.type('<span class="output"> "token_usage": {</span>')
228+
.break()
229+
.type('<span class="output"> "prompt_tokens": 12, "completion_tokens": 8, "total_tokens": 20</span>')
230+
.break()
231+
.type('<span class="output"> }</span>')
232+
.break()
233+
.type('<span class="output">}</span>')
234+
.break()
235+
.pause(1000)
236+
.type('<span class="success"># ✨ Enhanced compatibility with all OpenAI SDK fields!</span>')
237+
.break()
238+
.type('<span class="success"># 🎯 Same tiny model, multiple providers, full API support</span>')
185239
.go();
186-
}, 10000); // Start after both terminals complete (~10 seconds)
240+
}, 8500); // Start after both terminals complete (~8.5 seconds)
187241
</script>
188242
</body>
189243
</html>

0 commit comments

Comments
 (0)