Skip to content

Commit 2ebea62

Browse files
yeasyyeasy
committed
docs: add animated usage demo to README
1 parent 7214f9d commit 2ebea62

File tree

4 files changed

+255
-0
lines changed

4 files changed

+255
-0
lines changed

‎README.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
<strong>Just ask, and your agent shall receive.</strong>
99
</p>
1010

11+
<p align="center">
12+
<img src="assets/usage.webp" alt="ASK Usage Demo" width="800"/>
13+
</p>
14+
1115
<p align="center">
1216
<a href="https://github.com/yeasy/ask/releases"><img src="https://img.shields.io/github/v/release/yeasy/ask?style=flat-square&color=blue" alt="Release"></a>
1317
<a href="https://github.com/yeasy/ask/blob/main/LICENSE"><img src="https://img.shields.io/github/license/yeasy/ask?style=flat-square" alt="License"></a>

‎README_zh.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,10 @@
88
<strong>只需询问，您的智能体即可获得。</strong>
99
</p>
1010

11+
<p align="center">
12+
<img src="assets/usage.webp" alt="ASK Usage Demo" width="800"/>
13+
</p>
14+
1115
<p align="center">
1216
<a href="https://github.com/yeasy/ask/releases"><img src="https://img.shields.io/github/v/release/yeasy/ask?style=flat-square&color=blue" alt="Release"></a>
1317
<a href="https://github.com/yeasy/ask/blob/main/LICENSE"><img src="https://img.shields.io/github/license/yeasy/ask?style=flat-square" alt="License"></a>

‎assets/demo/terminal.html‎

Lines changed: 247 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,247 @@
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>ASK CLI Demo</title>
7+
<style>
8+
body {
9+
background-color: #0d1117;
10+
display: flex;
11+
justify-content: center;
12+
align-items: center;
13+
height: 100vh;
14+
margin: 0;
15+
font-family: 'Menlo', 'Monaco', 'Courier New', monospace;
16+
}
17+
.window {
18+
width: 800px;
19+
height: 500px;
20+
background-color: #1e1e1e;
21+
border-radius: 10px;
22+
box-shadow: 0 20px 50px rgba(0,0,0,0.5);
23+
display: flex;
24+
flex-direction: column;
25+
overflow: hidden;
26+
}
27+
.title-bar {
28+
background-color: #2d2d2d;
29+
height: 30px;
30+
display: flex;
31+
align-items: center;
32+
padding: 0 10px;
33+
}
34+
.buttons {
35+
display: flex;
36+
gap: 6px;
37+
}
38+
.button {
39+
width: 12px;
40+
height: 12px;
41+
border-radius: 50%;
42+
}
43+
.close { background-color: #ff5f56; }
44+
.minimize { background-color: #ffbd2e; }
45+
.maximize { background-color: #27c93f; }
46+
.content {
47+
flex: 1;
48+
padding: 10px;
49+
color: #d4d4d4;
50+
overflow-y: hidden;
51+
font-size: 14px;
52+
line-height: 1.5;
53+
}
54+
.line {
55+
display: flex;
56+
margin-bottom: 2px;
57+
min-height: 21px;
58+
}
59+
.prompt {
60+
color: #00add8;
61+
margin-right: 10px;
62+
white-space: nowrap;
63+
}
64+
.command {
65+
color: #d4d4d4;
66+
}
67+
.output {
68+
color: #a0a0a0;
69+
white-space: pre-wrap;
70+
}
71+
.cursor {
72+
display: inline-block;
73+
width: 8px;
74+
height: 16px;
75+
background-color: #a0a0a0;
76+
animation: blink 1s step-end infinite;
77+
vertical-align: middle;
78+
margin-left: 2px;
79+
}
80+
@keyframes blink {
81+
50% { opacity: 0; }
82+
}
83+
.success { color: #50fa7b; }
84+
.info { color: #8be9fd; }
85+
.warning { color: #f1fa8c; }
86+
</style>
87+
</head>
88+
<body>
89+
<div class="window">
90+
<div class="title-bar">
91+
<div class="buttons">
92+
<div class="button close"></div>
93+
<div class="button minimize"></div>
94+
<div class="button maximize"></div>
95+
</div>
96+
</div>
97+
<div class="content" id="terminal">
98+
<div class="line">
99+
<span class="prompt">$</span>
100+
<span class="command" id="current-command"></span><span class="cursor" id="cursor"></span>
101+
</div>
102+
</div>
103+
</div>
104+
105+
<script>
106+
const terminal = document.getElementById('terminal');
107+
const currentCommandSpan = document.getElementById('current-command');
108+
const cursor = document.getElementById('cursor');
109+
110+
const delay = ms => new Promise(res => setTimeout(res, ms));
111+
112+
async function typeCommand(text) {
113+
cursor.style.display = 'inline-block';
114+
for (let char of text) {
115+
currentCommandSpan.textContent += char;
116+
await delay(50 + Math.random() * 50);
117+
}
118+
await delay(300);
119+
cursor.style.display = 'none';
120+
}
121+
122+
function addLine(html = '', type = 'output') {
123+
const lineDiv = document.createElement('div');
124+
lineDiv.className = 'line';
125+
if (type === 'prompt') {
126+
lineDiv.innerHTML = `<span class="prompt">$</span><span class="command">${html}</span>`;
127+
} else {
128+
lineDiv.innerHTML = `<span class="output">${html}</span>`;
129+
}
130+
// Insert before the last existing line (which is the active input line)
131+
terminal.insertBefore(lineDiv, terminal.lastElementChild);
132+
terminal.scrollTop = terminal.scrollHeight;
133+
}
134+
135+
async function runDemo() {
136+
await delay(1000);
137+
138+
// Step 1: ask init
139+
await typeCommand('ask init');
140+
await delay(200);
141+
currentCommandSpan.textContent = ''; // clear current input line content visually, mimicking submit
142+
addLine('ask init', 'prompt');
143+
cursor.style.display = 'inline-block'; // show cursor again on new line (simulated)
144+
145+
// Actually, my addLine implementation is inserting BEFORE the active line.
146+
// So to simulate "Enter", I should:
147+
// 1. Move the typed text to a new static line.
148+
// 2. Clear the typing area.
149+
// 3. Add output.
150+
// 4. Add new prompt.
151+
152+
// Let's refactor slightly for better flow
153+
// Clear the "active" typing line text
154+
// Remove the active line temporarily
155+
terminal.removeChild(terminal.lastElementChild);
156+
157+
// Add the command we just typed as a permanent line
158+
addLine('ask init', 'prompt');
159+
160+
await delay(300);
161+
addLine('<span class="success">✓ Initialized ASK project</span>');
162+
addLine(' Created: ask.yaml');
163+
addLine(' Created: .agent/skills/');
164+
await delay(500);
165+
166+
// Prepare new prompt
167+
const newLine = document.createElement('div');
168+
newLine.className = 'line';
169+
newLine.innerHTML = `<span class="prompt">$</span><span class="command" id="cmd2"></span><span class="cursor"></span>`;
170+
terminal.appendChild(newLine);
171+
172+
const cmd2 = document.getElementById('cmd2');
173+
// Type next command: ask skill search browser
174+
await delay(500);
175+
let text = 'ask skill search browser';
176+
for (let char of text) {
177+
cmd2.textContent += char;
178+
await delay(50);
179+
}
180+
await delay(300);
181+
182+
// Submit
183+
terminal.removeChild(terminal.lastElementChild);
184+
addLine('ask skill search browser', 'prompt');
185+
186+
await delay(200);
187+
addLine('Searching for "browser"...');
188+
await delay(800); // Simulate network
189+
190+
addLine('<span class="info">Found 5 skills:</span>');
191+
addLine(' - <span class="success">browser-use</span> (source: community) - Control local browser');
192+
addLine(' - web-surfer (source: anthropics) - Browse the web');
193+
addLine(' - browser-computer (source: scientific) - Browser agent');
194+
await delay(500);
195+
196+
// Next command: ask skill install browser-use
197+
const newLine2 = document.createElement('div');
198+
newLine2.className = 'line';
199+
newLine2.innerHTML = `<span class="prompt">$</span><span class="command" id="cmd3"></span><span class="cursor"></span>`;
200+
terminal.appendChild(newLine2);
201+
202+
const cmd3 = document.getElementById('cmd3');
203+
await delay(500);
204+
text = 'ask skill install browser-use';
205+
for (let char of text) {
206+
cmd3.textContent += char;
207+
await delay(50);
208+
}
209+
await delay(300);
210+
211+
terminal.removeChild(terminal.lastElementChild);
212+
addLine('ask skill install browser-use', 'prompt');
213+
214+
await delay(200);
215+
addLine('Installing browser-use...');
216+
addLine('Cloning https://github.com/browser-use/browser-use...');
217+
218+
// Progress bar simulation
219+
const progressLine = document.createElement('div');
220+
progressLine.className = 'line';
221+
progressLine.innerHTML = `<span class="output">[=> ] 10%</span>`;
222+
terminal.appendChild(progressLine);
223+
224+
for (let i = 20; i <= 100; i+=20) {
225+
await delay(150);
226+
let bars = '='.repeat(i/4);
227+
let spaces = ' '.repeat(25 - i/4);
228+
progressLine.innerHTML = `<span class="output">[${bars}${spaces}] ${i}%</span>`;
229+
}
230+
231+
terminal.removeChild(progressLine); // Remove progress bar line
232+
addLine('<span class="success">✓ Installed skill: browser-use</span>');
233+
addLine(' Location: .agent/skills/browser-use');
234+
235+
await delay(500);
236+
237+
// Final Prompt
238+
const finalLine = document.createElement('div');
239+
finalLine.className = 'line';
240+
finalLine.innerHTML = `<span class="prompt">$</span><span class="cursor"></span>`;
241+
terminal.appendChild(finalLine);
242+
}
243+
244+
runDemo();
245+
</script>
246+
</body>
247+
</html>

‎assets/usage.webp‎

11.2 KB
Loading

0 commit comments

Comments
 (0)