@cerebriline/core 4.100.248 → 4.100.249
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/assets/prompt-templates/claude.md +9 -0
- package/assets/prompt-templates/deepseek.md +9 -0
- package/assets/prompt-templates/default.md +49 -1
- package/assets/prompt-templates/gemma.md +9 -0
- package/assets/prompt-templates/glm.md +9 -0
- package/assets/prompt-templates/kimi-k3.md +9 -0
- package/assets/prompt-templates/kimi.md +9 -0
- package/assets/prompt-templates/minimax.md +12 -1
- package/assets/prompt-templates/nemotron.md +9 -0
- package/assets/prompt-templates/qwen.md +9 -0
- package/assets/skills/media-audio/SKILL.md +55 -0
- package/assets/skills/media-images/SKILL.md +102 -0
- package/assets/skills/media-video/SKILL.md +53 -0
- package/dist/cloud/index.js +1 -1
- package/dist/extensions/tools/icon-generation.d.ts +74 -0
- package/dist/extensions/tools/image-generation.d.ts +25 -1
- package/dist/extensions/tools/media-tools.d.ts +8 -0
- package/dist/extensions/tools/render-image.d.ts +139 -0
- package/dist/extensions/tools/transform-image.d.ts +148 -0
- package/dist/hub/daemon/entry.js +552 -552
- package/dist/hub/index.js +515 -515
- package/dist/index.d.ts +3 -0
- package/dist/index.js +1014 -826
- package/dist/remote/remote-helper-entry.js +1 -1
- package/dist/remote/remote-helper.js +1 -1
- package/package.json +4 -4
|
@@ -410,9 +410,18 @@ It is the wrong tool for text that is not a symbol: strings, comments, config ke
|
|
|
410
410
|
# tool: generate_image
|
|
411
411
|
{{DEFAULT}}
|
|
412
412
|
|
|
413
|
+
# tool: generate_icon
|
|
414
|
+
{{DEFAULT}}
|
|
415
|
+
|
|
413
416
|
# tool: edit_image
|
|
414
417
|
{{DEFAULT}}
|
|
415
418
|
|
|
419
|
+
# tool: render_image
|
|
420
|
+
{{DEFAULT}}
|
|
421
|
+
|
|
422
|
+
# tool: transform_image
|
|
423
|
+
{{DEFAULT}}
|
|
424
|
+
|
|
416
425
|
# tool: transcribe_audio
|
|
417
426
|
{{DEFAULT}}
|
|
418
427
|
|
|
@@ -193,9 +193,18 @@ Reach for it the moment you are about to do one of these by hand:
|
|
|
193
193
|
# tool: generate_image
|
|
194
194
|
{{DEFAULT}}
|
|
195
195
|
|
|
196
|
+
# tool: generate_icon
|
|
197
|
+
{{DEFAULT}}
|
|
198
|
+
|
|
196
199
|
# tool: edit_image
|
|
197
200
|
{{DEFAULT}}
|
|
198
201
|
|
|
202
|
+
# tool: render_image
|
|
203
|
+
{{DEFAULT}}
|
|
204
|
+
|
|
205
|
+
# tool: transform_image
|
|
206
|
+
{{DEFAULT}}
|
|
207
|
+
|
|
199
208
|
# tool: transcribe_audio
|
|
200
209
|
{{DEFAULT}}
|
|
201
210
|
|
|
@@ -212,7 +212,9 @@ Output: plain text, one result per line as `file:line:column` followed by that s
|
|
|
212
212
|
An empty answer is a real answer once the symbol resolved: for `definition`, `references`, `implementations`, `type_definition`, `callers` and `hover` the server understood the symbol and nothing matched, so a text search for the same question will not find more. `workspace_symbols` is the exception, and says so when it comes back empty: it reads a project-wide index that covers the languages a server is installed for and does not index script embedded in `.html` or other template files, so nothing there is not proof of nothing anywhere. And when the file does not parse, every answer about it opens with that line — while it is there, the server is answering from a partial parse and you are reading guesses.
|
|
213
213
|
|
|
214
214
|
# tool: generate_image
|
|
215
|
-
Generate an image from a text description and save it into the workspace. Use it for visual work you would otherwise have to ask the user to do elsewhere: an app icon, a placeholder texture or sprite, a logo, a background,
|
|
215
|
+
Generate an image from a text description and save it into the workspace. Use it for visual work you would otherwise have to ask the user to do elsewhere: an app icon, a placeholder texture or sprite, a logo, a background, an illustration or a photograph.
|
|
216
|
+
|
|
217
|
+
It paints pixels: it cannot write legible text, and a picture of an interface or a diagram made this way has garbled labels. For a screen, a mockup, a workflow diagram, a chart or anything else with words in it, write it as HTML, SVG or Mermaid and use `render_image` when you have it.
|
|
216
218
|
|
|
217
219
|
The image is written to a file and, if you can see images, returned to you as well — so you can look at what you made and generate again with a changed prompt if it is wrong.
|
|
218
220
|
|
|
@@ -223,6 +225,24 @@ Arguments:
|
|
|
223
225
|
|
|
224
226
|
This costs real time — seconds to a minute per image — and on a hosted backend it costs money. Generate one image and look at it before generating variations.
|
|
225
227
|
|
|
228
|
+
# tool: generate_icon
|
|
229
|
+
Make an icon for an application, a site or a file type: several proposals for the user to choose from, then the chosen one saved in every format an icon needs. Two steps, one call each.
|
|
230
|
+
|
|
231
|
+
1. Proposals. Give `prompt`: what the icon shows and the feeling it should have ("a paper plane, friendly, blue on white"). Several candidates are drawn and returned on one numbered sheet, each saved as its own file. Show the user the sheet and ask which one they want (`ask_question`, with the numbers as the options); do not choose for them. If none is right, call again with a changed prompt.
|
|
232
|
+
2. Files. Give `pick`: the path of the chosen proposal (or of any square image in the workspace), and `path`: where the icon belongs, without an extension, e.g. `assets/icon`. That writes `assets/icon.ico`, `assets/icon.icns`, `assets/icon.png` and `assets/icon-<size>.png` for the usual sizes.
|
|
233
|
+
|
|
234
|
+
Arguments:
|
|
235
|
+
- `prompt` — step 1: the subject and the mood. The rules of an icon (one centred subject, bold shapes, no text) are added for you.
|
|
236
|
+
- `count` — step 1: how many proposals, 1 to 6. Optional, default 4.
|
|
237
|
+
- `style` — step 1: e.g. `flat vector`, `glossy 3D`, `line art`, `pixel art`. Optional, default flat vector.
|
|
238
|
+
- `pick` — step 2: workspace path of the image to make the icon from.
|
|
239
|
+
- `path` — step 2: where to save, without an extension.
|
|
240
|
+
- `formats` — step 2: which of `ico`, `icns`, `png`, `webp` to write. Optional, default `ico,icns,png`.
|
|
241
|
+
- `sizes` — step 2: the PNG sizes to write beside the main one. Optional, default `16,32,48,64,128,180,192,256,512`.
|
|
242
|
+
- `background` — step 2: a CSS colour to put behind the icon. Optional; left as the proposal has it.
|
|
243
|
+
|
|
244
|
+
Each proposal costs what an image costs: seconds to a minute, and money on a hosted backend.
|
|
245
|
+
|
|
226
246
|
# tool: edit_image
|
|
227
247
|
Edit an existing image in the workspace according to a text instruction and save the result as a new file. Use it to change a picture you already have rather than generate a different one: recolour or restyle an icon, change one element of a mockup, combine a subject with a background.
|
|
228
248
|
|
|
@@ -237,6 +257,34 @@ Arguments:
|
|
|
237
257
|
|
|
238
258
|
How far an edit goes depends on the backend: some follow the instruction, others redraw over the source and only make small changes. Look at the result before relying on it. This costs real time — seconds to a minute per image — and on a hosted backend it costs money.
|
|
239
259
|
|
|
260
|
+
# tool: render_image
|
|
261
|
+
Render HTML, SVG or a Mermaid diagram that you write into an image file in the workspace. Use it for anything with text or structure in it: application screens and mockups, workflow and architecture diagrams, charts, annotated figures. An image model cannot write legible text or draw a real interface; this draws exactly what you write.
|
|
262
|
+
|
|
263
|
+
The image is saved and, if you can see images, returned to you, so you can check the layout and render again.
|
|
264
|
+
|
|
265
|
+
- `source` — what to draw: HTML with its CSS (a fragment or a whole document), an SVG document, or Mermaid notation (`flowchart LR`, `sequenceDiagram`, ...). Relative URLs resolve against the workspace root, so a screen of the application can link the project's own stylesheet and images: reuse its markup and class names with sample data and the picture is the real interface.
|
|
266
|
+
- `kind` — `html`, `svg` or `mermaid`. Optional; read from the source.
|
|
267
|
+
- `path` — where to save, relative to the workspace: `.png`, or `.svg` to keep an SVG or Mermaid drawing as vectors. Optional; defaults to a PNG under `.cline/rendered-images/`.
|
|
268
|
+
- `width`, `height` — page size in CSS pixels. Optional. Leave both out and the image is exactly as large as what was drawn; `width` alone fixes where the layout wraps.
|
|
269
|
+
- `scale` — pixel density, 1 to 4, default 2.
|
|
270
|
+
- `crop` — `"x,y,width,height"` in CSS pixels, to keep one region of the page.
|
|
271
|
+
- `background` — a CSS colour, or `transparent`.
|
|
272
|
+
- `theme` — Mermaid only: `default`, `dark`, `neutral` or `forest`.
|
|
273
|
+
|
|
274
|
+
A README on GitHub renders a ```mermaid block as it is; render a diagram to a file when it must show somewhere that does not. Remote fonts, scripts and images load only if the machine reaches them quickly: inline what matters.
|
|
275
|
+
|
|
276
|
+
# tool: transform_image
|
|
277
|
+
Resize, crop or convert an image file in the workspace and save the result as a new file. Use it to change an image's dimensions, cut a region out of it, change its format, or make an icon file from it. The source is never modified.
|
|
278
|
+
|
|
279
|
+
- `image` — workspace path of the source: PNG, JPEG, WebP, GIF, BMP, AVIF, ICO or SVG.
|
|
280
|
+
- `path` — where to save, relative to the workspace. The extension chooses the format: `.png`, `.jpg`, `.webp`, `.ico` or `.icns`. Optional; defaults to a file beside the source with the new size in its name.
|
|
281
|
+
- `width`, `height` — the new size in pixels. Give one and the other follows the proportions.
|
|
282
|
+
- `fit` — with both given: `inside` (default; the whole image, within the box, proportions kept), `cover` (fills the box, the overflow cut off), `pad` (the whole image, padded to exactly the box) or `stretch`.
|
|
283
|
+
- `crop` — `"x,y,width,height"` in pixels of the source, taken before resizing.
|
|
284
|
+
- `background` — a CSS colour for padding and for what was transparent. Optional; transparency is kept where the format has it, and JPEG gets white.
|
|
285
|
+
- `quality` — 1 to 100 for `.jpg` and `.webp`, default 90.
|
|
286
|
+
- `sizes` — for `.ico` and `.icns`, the sizes to hold, e.g. `"16,32,48,256"`. Optional; the usual set when left out.
|
|
287
|
+
|
|
240
288
|
# tool: transcribe_audio
|
|
241
289
|
Transcribe an audio file in the workspace to text. Use it to read a recording you would otherwise have to ask the user to describe: a meeting, a voice note, the audio of a demo.
|
|
242
290
|
|
|
@@ -198,9 +198,18 @@ Query the language servers for semantic information. Use this instead of `search
|
|
|
198
198
|
# tool: generate_image
|
|
199
199
|
{{DEFAULT}}
|
|
200
200
|
|
|
201
|
+
# tool: generate_icon
|
|
202
|
+
{{DEFAULT}}
|
|
203
|
+
|
|
201
204
|
# tool: edit_image
|
|
202
205
|
{{DEFAULT}}
|
|
203
206
|
|
|
207
|
+
# tool: render_image
|
|
208
|
+
{{DEFAULT}}
|
|
209
|
+
|
|
210
|
+
# tool: transform_image
|
|
211
|
+
{{DEFAULT}}
|
|
212
|
+
|
|
204
213
|
# tool: transcribe_audio
|
|
205
214
|
{{DEFAULT}}
|
|
206
215
|
|
|
@@ -181,9 +181,18 @@ Output: plain text, one result per line as `file:line:column` followed by the so
|
|
|
181
181
|
# tool: generate_image
|
|
182
182
|
{{DEFAULT}}
|
|
183
183
|
|
|
184
|
+
# tool: generate_icon
|
|
185
|
+
{{DEFAULT}}
|
|
186
|
+
|
|
184
187
|
# tool: edit_image
|
|
185
188
|
{{DEFAULT}}
|
|
186
189
|
|
|
190
|
+
# tool: render_image
|
|
191
|
+
{{DEFAULT}}
|
|
192
|
+
|
|
193
|
+
# tool: transform_image
|
|
194
|
+
{{DEFAULT}}
|
|
195
|
+
|
|
187
196
|
# tool: transcribe_audio
|
|
188
197
|
{{DEFAULT}}
|
|
189
198
|
|
|
@@ -303,9 +303,18 @@ Output: plain text, one result per line as `file:line:column` followed by that s
|
|
|
303
303
|
# tool: generate_image
|
|
304
304
|
{{DEFAULT}}
|
|
305
305
|
|
|
306
|
+
# tool: generate_icon
|
|
307
|
+
{{DEFAULT}}
|
|
308
|
+
|
|
306
309
|
# tool: edit_image
|
|
307
310
|
{{DEFAULT}}
|
|
308
311
|
|
|
312
|
+
# tool: render_image
|
|
313
|
+
{{DEFAULT}}
|
|
314
|
+
|
|
315
|
+
# tool: transform_image
|
|
316
|
+
{{DEFAULT}}
|
|
317
|
+
|
|
309
318
|
# tool: transcribe_audio
|
|
310
319
|
{{DEFAULT}}
|
|
311
320
|
|
|
@@ -247,9 +247,18 @@ Output: plain text, one result per line as `file:line:column` followed by that s
|
|
|
247
247
|
# tool: generate_image
|
|
248
248
|
{{DEFAULT}}
|
|
249
249
|
|
|
250
|
+
# tool: generate_icon
|
|
251
|
+
{{DEFAULT}}
|
|
252
|
+
|
|
250
253
|
# tool: edit_image
|
|
251
254
|
{{DEFAULT}}
|
|
252
255
|
|
|
256
|
+
# tool: render_image
|
|
257
|
+
{{DEFAULT}}
|
|
258
|
+
|
|
259
|
+
# tool: transform_image
|
|
260
|
+
{{DEFAULT}}
|
|
261
|
+
|
|
253
262
|
# tool: transcribe_audio
|
|
254
263
|
{{DEFAULT}}
|
|
255
264
|
|
|
@@ -290,7 +290,9 @@ In each case the alternative is `search_codebase`, which is the thing this tool
|
|
|
290
290
|
# tool: generate_image
|
|
291
291
|
Generate an image from a text description and save it into the workspace. Call shape: `generate_image(prompt: string, path?: string, size?: string)`.
|
|
292
292
|
|
|
293
|
-
Use it for visual work you would otherwise have to ask the user to do elsewhere: an app icon, a placeholder texture or sprite, a logo, a background,
|
|
293
|
+
Use it for visual work you would otherwise have to ask the user to do elsewhere: an app icon, a placeholder texture or sprite, a logo, a background, an illustration or a photograph.
|
|
294
|
+
|
|
295
|
+
It paints pixels: it cannot write legible text, and a picture of an interface or a diagram made this way has garbled labels. For a screen, a mockup, a workflow diagram, a chart or anything else with words in it, write it as HTML, SVG or Mermaid and use `render_image` when you have it.
|
|
294
296
|
|
|
295
297
|
The image is written to a file and, if you can see images, returned to you as well — so you can look at what you made and generate again with a changed prompt if it is wrong.
|
|
296
298
|
|
|
@@ -301,9 +303,18 @@ The image is written to a file and, if you can see images, returned to you as we
|
|
|
301
303
|
|
|
302
304
|
This costs real time — seconds to a minute per image — and on a hosted backend it costs money. Generate one image and look at it before generating variations.
|
|
303
305
|
|
|
306
|
+
# tool: generate_icon
|
|
307
|
+
{{DEFAULT}}
|
|
308
|
+
|
|
304
309
|
# tool: edit_image
|
|
305
310
|
{{DEFAULT}}
|
|
306
311
|
|
|
312
|
+
# tool: render_image
|
|
313
|
+
{{DEFAULT}}
|
|
314
|
+
|
|
315
|
+
# tool: transform_image
|
|
316
|
+
{{DEFAULT}}
|
|
317
|
+
|
|
307
318
|
# tool: transcribe_audio
|
|
308
319
|
{{DEFAULT}}
|
|
309
320
|
|
|
@@ -238,9 +238,18 @@ Output: plain text, one result per line as `file:line:column` followed by that s
|
|
|
238
238
|
# tool: generate_image
|
|
239
239
|
{{DEFAULT}}
|
|
240
240
|
|
|
241
|
+
# tool: generate_icon
|
|
242
|
+
{{DEFAULT}}
|
|
243
|
+
|
|
241
244
|
# tool: edit_image
|
|
242
245
|
{{DEFAULT}}
|
|
243
246
|
|
|
247
|
+
# tool: render_image
|
|
248
|
+
{{DEFAULT}}
|
|
249
|
+
|
|
250
|
+
# tool: transform_image
|
|
251
|
+
{{DEFAULT}}
|
|
252
|
+
|
|
244
253
|
# tool: transcribe_audio
|
|
245
254
|
{{DEFAULT}}
|
|
246
255
|
|
|
@@ -313,9 +313,18 @@ Reach for it the moment you are about to do one of these by hand:
|
|
|
313
313
|
# tool: generate_image
|
|
314
314
|
{{DEFAULT}}
|
|
315
315
|
|
|
316
|
+
# tool: generate_icon
|
|
317
|
+
{{DEFAULT}}
|
|
318
|
+
|
|
316
319
|
# tool: edit_image
|
|
317
320
|
{{DEFAULT}}
|
|
318
321
|
|
|
322
|
+
# tool: render_image
|
|
323
|
+
{{DEFAULT}}
|
|
324
|
+
|
|
325
|
+
# tool: transform_image
|
|
326
|
+
{{DEFAULT}}
|
|
327
|
+
|
|
319
328
|
# tool: transcribe_audio
|
|
320
329
|
{{DEFAULT}}
|
|
321
330
|
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: media-audio
|
|
3
|
+
description: >-
|
|
4
|
+
Reads and makes audio: turns a recording into text or subtitles, and turns
|
|
5
|
+
text into spoken audio. Use when the user asks to transcribe a recording, a
|
|
6
|
+
meeting, a voice note or the sound of a video, to make subtitles, to
|
|
7
|
+
translate speech, or to make a voice-over, a spoken prompt or an audio
|
|
8
|
+
version of a text.
|
|
9
|
+
---
|
|
10
|
+
|
|
11
|
+
# Audio
|
|
12
|
+
|
|
13
|
+
You can read audio and make speech yourself. Do not ask the user to describe a
|
|
14
|
+
recording you could transcribe, or to record something you could synthesize.
|
|
15
|
+
|
|
16
|
+
## Which tool
|
|
17
|
+
|
|
18
|
+
| The task | Use |
|
|
19
|
+
|---|---|
|
|
20
|
+
| What is said in an audio file | `transcribe_audio` |
|
|
21
|
+
| Subtitles for a recording or a clip | `transcribe_audio` with `format: srt` or `vtt` |
|
|
22
|
+
| The English of speech in another language | `transcribe_audio` with `translate: true` |
|
|
23
|
+
| A voice-over, a spoken prompt, an audio version of a text | `synthesize_speech` |
|
|
24
|
+
|
|
25
|
+
When you do not have the tool you need, it is not set up. Say that the user
|
|
26
|
+
turns it on in **Settings > API Configuration > Audio** (the speech-to-text
|
|
27
|
+
endpoint for transcription, the text-to-speech endpoint for speech), and stop
|
|
28
|
+
there.
|
|
29
|
+
|
|
30
|
+
## Transcribing
|
|
31
|
+
|
|
32
|
+
- The file has to be in the workspace: wav, mp3, flac, ogg, m4a or webm. For
|
|
33
|
+
the sound of a video in another container, extract the audio first with the
|
|
34
|
+
project's tools (`ffmpeg -i clip.mp4 -vn audio.m4a`) if they are installed.
|
|
35
|
+
- Give `output` a path for anything longer than a few minutes, and for
|
|
36
|
+
subtitles: the whole transcript is saved there and you get its beginning.
|
|
37
|
+
Read the file for the rest.
|
|
38
|
+
- Give `prompt` the names and terms the recording uses. It fixes spelling.
|
|
39
|
+
- Give `language` when you know it; detection can pick the wrong one on a
|
|
40
|
+
short or noisy recording.
|
|
41
|
+
- A transcript is what was heard, not what was meant. When it is the basis of
|
|
42
|
+
a summary, minutes or tasks, say where a passage was unclear.
|
|
43
|
+
|
|
44
|
+
## Speaking
|
|
45
|
+
|
|
46
|
+
- Write the text as it should be said: spell out abbreviations, write numbers
|
|
47
|
+
and symbols the way they are read, and break long sentences.
|
|
48
|
+
- Leave `voice` out to use the configured one. Name one only when the user
|
|
49
|
+
asked for it.
|
|
50
|
+
- Save the file where the project keeps its audio and give it a name that
|
|
51
|
+
says what it is. Without a `path` it goes under `.cline/generated-audio/`.
|
|
52
|
+
- You do not hear the result. Say what you asked for, where the file is and
|
|
53
|
+
how long it is, and let the user listen.
|
|
54
|
+
- For a long text, make one file per section. A section that came out wrong
|
|
55
|
+
can then be made again alone.
|
|
@@ -0,0 +1,102 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: media-images
|
|
3
|
+
description: >-
|
|
4
|
+
Makes and changes pictures for the project: rendered screens and mockups of
|
|
5
|
+
the application, workflow and architecture diagrams, charts, illustrations
|
|
6
|
+
and photographs, icons in every format, and resized, cropped or converted
|
|
7
|
+
copies of an image. Use when the user asks for an image, a picture of the
|
|
8
|
+
interface, a diagram, a logo, an icon or favicon, images for a README or the
|
|
9
|
+
documentation, or to change an image's size, shape or format.
|
|
10
|
+
---
|
|
11
|
+
|
|
12
|
+
# Images
|
|
13
|
+
|
|
14
|
+
You can make images yourself. Do not tell the user to make one elsewhere, and
|
|
15
|
+
do not describe an image you could produce.
|
|
16
|
+
|
|
17
|
+
## Which tool
|
|
18
|
+
|
|
19
|
+
| The picture is | Use | Why |
|
|
20
|
+
|---|---|---|
|
|
21
|
+
| A screen, a mockup, a dialog, anything showing the application's interface | `render_image` with HTML and CSS | Every label is the text you type. An image model garbles words |
|
|
22
|
+
| A workflow, a sequence, a state machine, an architecture, a schema | `render_image` with Mermaid | The notation is short and the layout is done for you |
|
|
23
|
+
| A chart, a badge, a banner with a title, an annotated figure | `render_image` with SVG or HTML | Exact numbers, exact text |
|
|
24
|
+
| A photograph, an illustration, a texture, a background, artwork | `generate_image` | Only an image model paints |
|
|
25
|
+
| An icon for an application, a site or a file type | `generate_icon` | Several proposals to choose from, then `.ico`, `.icns` and every PNG size |
|
|
26
|
+
| A change to a picture that exists (restyle, recolour, replace a part) | `edit_image` | It starts from the picture |
|
|
27
|
+
| The same picture at another size, cut down, or in another format | `transform_image` | Exact pixels, no redrawing |
|
|
28
|
+
|
|
29
|
+
The rule behind the table: **if it has words or structure in it, write it and
|
|
30
|
+
render it. If it is a picture of something, generate it.** Asked for "images
|
|
31
|
+
showing the workflow of the application", the right tool is `render_image`,
|
|
32
|
+
not `generate_image`.
|
|
33
|
+
|
|
34
|
+
`render_image` and `transform_image` need nothing set up. `generate_image`,
|
|
35
|
+
`generate_icon` and `edit_image` need an image endpoint; when you do not have
|
|
36
|
+
them, say that the user turns one on in **Settings > API Configuration >
|
|
37
|
+
Images**, and offer what `render_image` can do instead.
|
|
38
|
+
|
|
39
|
+
## Rendering a screen of the application
|
|
40
|
+
|
|
41
|
+
1. Read the component or template that draws the screen, and its stylesheet.
|
|
42
|
+
2. Write the screen as one HTML document: the application's own markup and
|
|
43
|
+
class names, filled with realistic sample data. Link the project's real
|
|
44
|
+
stylesheet with a relative URL (`<link rel="stylesheet"
|
|
45
|
+
href="src/styles/app.css">`): relative URLs resolve from the workspace root.
|
|
46
|
+
Inline what a build step would have produced.
|
|
47
|
+
3. Call `render_image` with `width` set to the window you want to show
|
|
48
|
+
(1280 for a desktop, 390 for a phone) and no `height`: the picture is as
|
|
49
|
+
tall as the page.
|
|
50
|
+
4. Look at the result if you can see images. Fix what is off and render again.
|
|
51
|
+
|
|
52
|
+
Do not invent an interface the application does not have. If you cannot read
|
|
53
|
+
the real one, say that the picture is a mockup.
|
|
54
|
+
|
|
55
|
+
## Diagrams
|
|
56
|
+
|
|
57
|
+
Write Mermaid. Keep node labels short; put detail in the surrounding text.
|
|
58
|
+
|
|
59
|
+
- A README shown on GitHub or GitLab renders a fenced `mermaid` block as it
|
|
60
|
+
is. Prefer that there: it stays editable and needs no file.
|
|
61
|
+
- Render to a file with `render_image` when it must show somewhere that does
|
|
62
|
+
not (npm, a PDF, a slide, the VS Code Marketplace) or must look the same
|
|
63
|
+
everywhere. Save as `.svg` to keep it sharp at any size, `.png` otherwise.
|
|
64
|
+
- `theme: dark` for a dark page; `background: transparent` to sit on any page.
|
|
65
|
+
|
|
66
|
+
## Images for a README or the documentation
|
|
67
|
+
|
|
68
|
+
1. Decide what each image has to show before making any. One idea per image.
|
|
69
|
+
2. Save them in the repository where its other images are (`docs/images/`,
|
|
70
|
+
`assets/`, `.github/`); create `docs/images/` when there is no such place.
|
|
71
|
+
Give each a name that says what it shows.
|
|
72
|
+
3. Reference them with a relative path and alt text that says what is in the
|
|
73
|
+
picture: ``.
|
|
74
|
+
4. Keep them a sensible size: 1200 to 1600 pixels across is plenty for a
|
|
75
|
+
README. Use `transform_image` to bring a larger one down.
|
|
76
|
+
|
|
77
|
+
## Icons
|
|
78
|
+
|
|
79
|
+
Call `generate_icon` with a `prompt`. It returns several numbered proposals.
|
|
80
|
+
Show them to the user and ask which one they want; the choice is theirs. Then
|
|
81
|
+
call it again with `pick` and `path`, and it writes the icon in every format.
|
|
82
|
+
Put the files where the project expects them (`public/favicon.ico`,
|
|
83
|
+
`build/icon.icns`, `assets/icon.png`) and update what refers to them: the
|
|
84
|
+
manifest, the HTML head, the packaging configuration.
|
|
85
|
+
|
|
86
|
+
An image the user already has becomes an icon the same way: pass it as `pick`.
|
|
87
|
+
|
|
88
|
+
## Size, shape and format
|
|
89
|
+
|
|
90
|
+
`transform_image` takes a `width` or a `height` (the other follows), both with
|
|
91
|
+
a `fit`, a `crop`, and writes whatever the `path` ends in: `.png`, `.jpg`,
|
|
92
|
+
`.webp`, `.ico`, `.icns`. Use it instead of a shell command. The source file
|
|
93
|
+
is never changed.
|
|
94
|
+
|
|
95
|
+
`render_image` also takes `width`, `height`, `scale` and `crop`, so a rendered
|
|
96
|
+
picture can be made at the right size in the first place.
|
|
97
|
+
|
|
98
|
+
## After making one
|
|
99
|
+
|
|
100
|
+
Say where the file is. If you cannot see images, say what you asked for and
|
|
101
|
+
let the user judge it. Generating costs time and may cost money: make one,
|
|
102
|
+
look, then decide whether another is needed.
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
---
|
|
2
|
+
name: media-video
|
|
3
|
+
description: >-
|
|
4
|
+
Makes short video clips from a description or from a starting image. Use
|
|
5
|
+
when the user asks for a video, a clip, an animation of an image, a
|
|
6
|
+
background loop, a product shot or placeholder footage.
|
|
7
|
+
---
|
|
8
|
+
|
|
9
|
+
# Video
|
|
10
|
+
|
|
11
|
+
You can make a short clip yourself with `generate_video`. Do not send the user
|
|
12
|
+
elsewhere for a few seconds of footage.
|
|
13
|
+
|
|
14
|
+
When you do not have `generate_video`, it is not set up. Say that the user
|
|
15
|
+
turns it on in **Settings > API Configuration > Video**, and stop there.
|
|
16
|
+
|
|
17
|
+
## What it does well, and what it does not
|
|
18
|
+
|
|
19
|
+
It makes one scene of a few seconds: a subject, a movement, a camera. It does
|
|
20
|
+
not follow a storyboard, does not write legible text, and does not record the
|
|
21
|
+
application.
|
|
22
|
+
|
|
23
|
+
| Wanted | Do |
|
|
24
|
+
|---|---|
|
|
25
|
+
| A background loop, a product shot, an atmospheric clip | `generate_video` |
|
|
26
|
+
| A still picture brought to life | `generate_video` with `image` |
|
|
27
|
+
| A demo of the application in use | Not this tool. Offer screens made with `render_image`, or say the user has to record it |
|
|
28
|
+
| A clip with a title or captions in it | Generate the footage without text and say the text has to be added in an editor |
|
|
29
|
+
|
|
30
|
+
## Making a clip
|
|
31
|
+
|
|
32
|
+
1. Write the `prompt` as one scene: what is in it, what moves and how, what
|
|
33
|
+
the camera does, the style and the light. "A paper plane glides left to
|
|
34
|
+
right over a blue desk, slow push-in, soft daylight, flat illustration."
|
|
35
|
+
2. To control how it looks, make the first frame as a picture first
|
|
36
|
+
(`generate_image`, or `render_image` for anything with text or structure)
|
|
37
|
+
and pass it as `image`. Only some video models accept one; the reply says
|
|
38
|
+
so when it does not.
|
|
39
|
+
3. Leave `size` and `seconds` out unless the task needs them. The backend
|
|
40
|
+
supports only a few shapes, and length costs more than proportionally.
|
|
41
|
+
4. Give a `seed` when the user may want the same clip again with one change.
|
|
42
|
+
|
|
43
|
+
A clip takes from most of a minute to many minutes, and on a hosted backend
|
|
44
|
+
it costs money. Make one, tell the user where it is and let them judge it:
|
|
45
|
+
you cannot watch it. Do not make another to "improve" one nobody has said is
|
|
46
|
+
wrong.
|
|
47
|
+
|
|
48
|
+
## After making one
|
|
49
|
+
|
|
50
|
+
Save it where the project keeps its media, with a name that says what it
|
|
51
|
+
shows; without a `path` it goes under `.cline/generated-videos/`. To show it
|
|
52
|
+
in a README, link the file. Most renderers do not play an embedded video from
|
|
53
|
+
the repository.
|