Skip to content

Commit f6cf2b9

Browse files
committed
feat(config): add bilingual UI with in-place language switching
1 parent 2fe50f5 commit f6cf2b9

5 files changed

Lines changed: 837 additions & 119 deletions

File tree

‎packages/commands/src/commands/config/scenarios.ts‎

Lines changed: 129 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,5 @@
1+
import type { Language } from "bailian-cli-core";
2+
13
/**
24
* Curated "Playground" scenarios surfaced in the config UI.
35
*
@@ -23,7 +25,7 @@ export interface Scenario {
2325
inputs?: ScenarioInput[];
2426
}
2527

26-
export const SCENARIOS: Scenario[] = [
28+
export const SCENARIOS = [
2729
// ---- 图像 ----
2830
{
2931
id: "image-generate",
@@ -150,17 +152,138 @@ export const SCENARIOS: Scenario[] = [
150152
prompt:
151153
"为当前工作目录的项目生成一个结构清晰的 README.md,包含:项目简介、安装步骤、使用示例、目录结构说明。请先阅读现有代码与配置再撰写,内容必须与实际实现一致。",
152154
},
153-
];
155+
] as const satisfies readonly Scenario[];
156+
157+
type ScenarioTranslation = Pick<Scenario, "title" | "description" | "category" | "prompt">;
158+
type ScenarioId = (typeof SCENARIOS)[number]["id"];
159+
160+
const EN_US_SCENARIOS = {
161+
"image-generate": {
162+
title: "Text to image",
163+
description: "Generate a sample image and save it to the output directory.",
164+
category: "Image",
165+
prompt:
166+
"Use bl's image generation capability (such as `bl image generate`) to create a sample image: a corgi holding an umbrella in the rain, watercolor style, with soft lighting. Save it to the output directory and tell me the file path.",
167+
},
168+
"image-describe": {
169+
title: "Image understanding",
170+
description: "Pick an image from the output directory and describe its content and style.",
171+
category: "Image",
172+
prompt:
173+
"Pick an image from the output directory (output/images by default). Describe its subject, composition, colors, and style in detail, then suggest suitable use cases. If the directory is empty, say so.",
174+
},
175+
"image-alt-batch": {
176+
title: "Batch alt text",
177+
description: "Generate accessible alt text for images in the output directory.",
178+
category: "Image",
179+
prompt:
180+
"Scan all images in the output directory (output/images by default) and write concise, accurate accessibility alt text for each one. Summarize the results in a File name -> Alt text table. If the directory is empty, say so.",
181+
},
182+
"image-to-code": {
183+
title: "Screenshot to code",
184+
description: "Recreate a UI screenshot from the output directory with HTML and CSS.",
185+
category: "Image",
186+
prompt:
187+
"Find a UI screenshot in the output directory (output/images by default) and recreate its layout, spacing, and colors as closely as possible with HTML and CSS. Save it as a single file that opens directly in a browser and briefly explain your approach. If no screenshot is available, say so.",
188+
},
189+
"speech-generate": {
190+
title: "Text to speech",
191+
description: "Turn a sample sentence into natural speech.",
192+
category: "Audio",
193+
prompt:
194+
"Use bl's speech synthesis capability (such as a `bl speech` command) to turn this sentence into natural speech: Welcome to Alibaba Cloud Model Studio CLI, making multimodal creation easier. Save the audio to the output directory and tell me the file path.",
195+
},
196+
"audio-summarize": {
197+
title: "Transcribe and summarize audio",
198+
description: "Transcribe an audio file from the output directory and summarize its key points.",
199+
category: "Audio",
200+
prompt:
201+
"Find an audio file in the output directory (output/speech by default), transcribe it, provide the full transcript, and then summarize the key points as a list. If the directory is empty or transcription is unavailable, explain that and try to complete the task with the capabilities available.",
202+
},
203+
"video-generate": {
204+
title: "Text to video",
205+
description: "Generate a sample short video.",
206+
category: "Video",
207+
prompt:
208+
"Use bl's video generation capability (such as `bl video generate`) to create a sample short video: a teenager running along the beach at sunset, cinematic, in slow motion. Save it to the output directory and tell me the file path.",
209+
},
210+
"video-storyboard": {
211+
title: "Video storyboard",
212+
description: "Create a storyboard suitable for text-to-video generation.",
213+
category: "Video",
214+
prompt:
215+
"Create a storyboard for a 15-30 second short video themed The first cup of coffee in the city at dawn. For each shot, provide the visual description, duration, subtitles or narration, and an English prompt ready for text-to-video generation.",
216+
},
217+
"media-prompt-craft": {
218+
title: "Multimodal prompts",
219+
description: "Expand a sample idea into image, video, and speech prompts.",
220+
category: "Multimodal",
221+
prompt:
222+
"Expand the idea A night market in a futuristic cyber city into three high-quality generation prompts: 1) text to image, 2) text to video, and 3) speech style. Provide each prompt in both Chinese and English, with brief parameter recommendations.",
223+
},
224+
"image-story-narration": {
225+
title: "Image narration",
226+
description: "Write narration for an image in the output directory.",
227+
category: "Multimodal",
228+
prompt:
229+
"Pick an image from the output directory (output/images by default) and write an engaging English narration of about 60 seconds. Then provide a plain-text version ready for speech synthesis. If the directory is empty, say so.",
230+
},
231+
"summarize-project": {
232+
title: "Summarize this project",
233+
description:
234+
"Read the current directory and summarize its architecture, stack, and main modules.",
235+
category: "Code",
236+
prompt:
237+
"Inspect the project structure and key source files in the current working directory, then concisely summarize: 1) what it does, 2) its technology stack, 3) its main modules and their responsibilities, and 4) notable design choices. Inspect the code before drawing conclusions; do not guess.",
238+
},
239+
"write-tests": {
240+
title: "Add tests for a core module",
241+
description: "Choose an under-tested core module and add unit tests.",
242+
category: "Code",
243+
prompt:
244+
"Choose a core module in the current project that has no tests or weak coverage. Add comprehensive unit tests for its main branches and edge cases, following the project's existing test framework and style. Read the relevant files and dependencies before writing tests.",
245+
},
246+
"code-review": {
247+
title: "Code review",
248+
description: "Review core project code and identify concrete improvements.",
249+
category: "Code",
250+
prompt:
251+
"Review the current project's core source code for potential bugs, security risks, performance issues, and maintainability problems. Give specific, actionable recommendations ordered by severity. Inspect the project structure and select the key files before reviewing them.",
252+
},
253+
"explain-code": {
254+
title: "Explain core code",
255+
description: "Choose an entry point or core module and explain how it works.",
256+
category: "Code",
257+
prompt:
258+
"Choose the current project's entry point or a core module and explain its responsibilities, key execution flow, and dependencies. Use clear English and include the call relationships when useful.",
259+
},
260+
"generate-readme": {
261+
title: "Generate README",
262+
description: "Generate a clear README.md that matches the implementation.",
263+
category: "Documentation",
264+
prompt:
265+
"Generate a clear README.md for the project in the current working directory. Include an overview, installation steps, usage examples, and a directory structure guide. Read the existing source code and configuration first; the content must match the actual implementation.",
266+
},
267+
} satisfies Record<ScenarioId, ScenarioTranslation>;
268+
269+
export function localizeScenarios(language: Language): Scenario[] {
270+
if (language === "zh-CN") return SCENARIOS.map((scenario) => ({ ...scenario }));
271+
272+
return SCENARIOS.map((scenario) => ({
273+
...scenario,
274+
...EN_US_SCENARIOS[scenario.id],
275+
}));
276+
}
154277

155278
/** Look up a scenario by id, or undefined when unknown. */
156-
export function getScenario(id: string): Scenario | undefined {
157-
return SCENARIOS.find((s) => s.id === id);
279+
export function getScenario(id: string, language: Language): Scenario | undefined {
280+
return localizeScenarios(language).find((scenario) => scenario.id === id);
158281
}
159282

160283
/** Fill a scenario's `{{placeholder}}` tokens from user-provided values. */
161284
export function renderScenarioPrompt(scenario: Scenario, values: Record<string, string>): string {
162285
return scenario.prompt.replace(/\{\{(\w+)\}\}/g, (_match, key: string) => {
163-
const v = values[key];
164-
return typeof v === "string" ? v.trim() : "";
286+
const value = values[key];
287+
return typeof value === "string" ? value.trim() : "";
165288
});
166289
}

0 commit comments

Comments
 (0)