Skip to content

Commit 4b20a4b

Browse files
Merge pull request #27 from amd/dholanda/comfy_zimage
Initial Comfy Playbook + Playbook creation template
2 parents 4eaf12c + 8c148ff commit 4b20a4b

12 files changed

Lines changed: 316 additions & 419 deletions

File tree

.github/scripts/validate_playbooks.py

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
Playbook Validation Script
44
55
This script validates that all playbooks:
6-
1. Have the expected file structure (README.md, playbook.json, optional assets/)
6+
1. Have the expected file structure (README.md, playbook.json, optional platform.md, optional assets/)
77
2. Follow the contract defined in website/src/types/playbook.ts
88
3. Have valid JSON in playbook.json
99
4. Have consistent IDs (folder name should match id in playbook.json)
@@ -31,7 +31,7 @@
3131
CATEGORIES = ["core", "supplemental", "backup"]
3232

3333
# Allowed files/folders in a playbook directory
34-
ALLOWED_ITEMS = {"README.md", "playbook.json", "assets"}
34+
ALLOWED_ITEMS = {"README.md", "playbook.json", "platform.md", "assets"}
3535

3636
# Required fields in playbook.json (based on PlaybookMeta interface)
3737
REQUIRED_FIELDS = ["id", "title", "description", "time", "platforms", "published"]

playbooks/README.md

Lines changed: 89 additions & 216 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,22 @@
11
# Playbook Creation Guide
22

3-
This folder contains all STX Halo™ playbooks—step-by-step guides for AI development tasks.
3+
4+
## Design Principles
5+
6+
**A playbook is not a setup guide.** Users should feel accomplished when they finish. They should feel they learned something meaningful, built something real, and can't wait to explore further.
7+
8+
### Core Guidelines
9+
10+
1. **Create a moment of success.** Users should *see something happen*: an image appears, a model responds, a server comes alive.
11+
2. **Teach, don't just instruct.** Explain *why* things work, not just which buttons to click.
12+
3. **Spark curiosity.** End with "Next Steps" that open doors to further exploration.
13+
4. **Respect the reader.** Be concise, be clear, and trust them to follow along.
14+
15+
### Reference Example
16+
17+
See `playbooks/core/comfyui-image-gen/README.md` for a well-structured playbook that demonstrates these principles. See [Previewing](#previewing) to view it in the browser.
18+
19+
---
420

521
## Folder Structure
622

@@ -12,35 +28,75 @@ playbooks/
1228
└── README.md # This file
1329
```
1430

15-
Each playbook lives in its own folder with two required files:
31+
Each playbook lives in its own folder:
1632

1733
```text
1834
playbook-name/
1935
├── playbook.json # Metadata (required)
2036
├── README.md # Content (required)
37+
├── platform.md # Platform configurations (required for core, optional for supplemental)
2138
└── assets/ # Images and files (optional)
22-
└── screenshot.png
2339
```
2440

41+
42+
### Assets
43+
44+
Reference images using relative paths:
45+
46+
```markdown
47+
![Screenshot](assets/screenshot.png)
48+
```
49+
50+
- Max 500 KB per file
51+
- Formats: PNG, JPEG, GIF, WebP, SVG
52+
- Include screenshots at key UI moments
53+
2554
---
2655

27-
## The `assets/` Folder
56+
## The `README.md` File
57+
58+
Write your playbook content in Markdown format. Images, tables, code, and other elements are supported.
59+
60+
**Recommended structure:**
2861

29-
Playbooks can include an optional `assets/` folder for images and other files referenced in the README.
62+
| Section | Content |
63+
|---------|---------|
64+
| **Overview** | What is this tool? Why is it exciting? (2-3 sentences) |
65+
| **What You'll Learn** | 3-5 concrete outcomes |
66+
| **Getting Started** | First hands-on step—get users into the tool quickly |
67+
| **Core Concepts** | Teach the mental model (tables and diagrams help) |
68+
| **Main Activity** | Where users achieve the payoff moment |
69+
| **Next Steps** | 3-5 paths forward with links to resources |
3070

31-
### Usage
71+
### OS-Specific Content
3272

33-
Reference assets in your README using relative paths:
73+
Use HTML comments to mark platform-specific sections:
3474

3575
```markdown
36-
![Screenshot](assets/screenshot.png)
76+
<!-- @os:windows -->
77+
Windows-only content
78+
<!-- @os:end -->
79+
80+
<!-- @os:linux -->
81+
Linux-only content
82+
<!-- @os:end -->
3783
```
3884

39-
### Requirements
85+
Content outside `@os` tags is always shown. Keep blocks focused—only tag the parts that differ.
86+
87+
### Writing Tips
4088

41-
- **Maximum file size**: 500 KB per asset
42-
- **Supported formats**: PNG, JPEG, GIF, WebP, SVG
43-
- Use descriptive filenames (e.g., `step1-output.png` instead of `image1.png`)
89+
- List prerequisites upfront. Don't surprise users mid-playbook
90+
- Include expected output so users know what success looks like
91+
- Keep code blocks copy-friendly (avoid `$` or `>` prompts)
92+
93+
---
94+
95+
## The `platform.md` File
96+
97+
Documents pre-installed software, model paths, and platform-specific prerequisites. **Required for `core` playbooks**, since they assume dependencies are preinstalled on the system. Optional for `supplemental` playbooks.
98+
99+
See `playbooks/core/comfyui-image-gen/platform.md` for an example.
44100

45101
---
46102

@@ -58,223 +114,40 @@ All playbook folders have already been created. To edit a playbook:
58114

59115
## The `playbook.json` File
60116

61-
This file contains all metadata for your playbook:
62-
63117
```json
64118
{
65119
"id": "my-playbook",
66120
"title": "My Playbook Title",
67-
"description": "A brief description shown on the playbook card",
121+
"description": "Brief description for the card (100-150 chars)",
68122
"time": 45,
69123
"platforms": ["windows", "linux"],
70124
"difficulty": "intermediate",
71-
"isNew": false,
72-
"isFeatured": false,
73125
"published": true,
74-
"tags": ["tag1", "tag2", "tag3"]
126+
"tags": ["tag1", "tag2"]
75127
}
76128
```
77129

78-
### Required Fields
79-
80-
| Field | Type | Description |
81-
|---------------|---------|-----------------------------------------------------------------------------|
82-
| `id` | string | Must match the folder name exactly |
83-
| `title` | string | Display title for the playbook |
84-
| `description` | string | Short description for cards (aim for 100–150 characters) |
85-
| `time` | number | Estimated completion time in minutes |
86-
| `platforms` | array | Supported platforms: `["windows"]`, `["linux"]`, or `["windows", "linux"]` |
87-
| `published` | boolean | Set to `true` to show on the website |
88-
89-
### Optional Fields
90-
91-
| Field | Type | Default | Description |
92-
|--------------|---------|---------|--------------------------------------------------------|
93-
| `difficulty` | string || One of: `"beginner"`, `"intermediate"`, `"advanced"` |
94-
| `isNew` | boolean | `false` | Shows a "New" badge on the playbook |
95-
| `isFeatured` | boolean | `false` | Displays the playbook prominently at the top |
96-
| `tags` | array | `[]` | Keywords for filtering and search |
97-
98-
---
99-
100-
## The `README.md` File
101-
102-
Write your playbook content in Markdown. The first `# Heading` becomes the page title.
103-
104-
**Example structure:**
105-
106-
# My Playbook Title
107-
108-
Introduction paragraph explaining what users will learn.
109-
110-
## Prerequisites
111-
112-
- List required software
113-
- Previous knowledge needed
114-
- Hardware requirements
115-
116-
## Step 1: First Step
117-
118-
Detailed instructions...
119-
120-
## Step 2: Second Step
121-
122-
More instructions...
123-
124-
## Conclusion
125-
126-
Summary and next steps.
130+
| Field | Required | Description |
131+
|-------|----------|-------------|
132+
| `id` | Yes | Must match folder name |
133+
| `title` | Yes | Display title |
134+
| `description` | Yes | Card description (100–150 characters) |
135+
| `time` | Yes | Completion time in minutes |
136+
| `platforms` | Yes | `["windows"]`, `["linux"]`, or `["windows", "linux"]` |
137+
| `published` | Yes | Set `true` to show on website |
138+
| `difficulty` | No | `"beginner"`, `"intermediate"`, or `"advanced"` |
139+
| `isNew` | No | Shows "New" badge |
140+
| `isFeatured` | No | Displays prominently at top |
141+
| `tags` | No | Keywords for filtering |
127142

128143
---
129144

130-
## OS-Specific Content
131-
132-
When instructions differ between Windows and Linux, use special HTML comments to mark platform-specific sections. The website will filter content based on the user's selected platform.
133-
134-
### Syntax
145+
## Previewing
135146

136-
Use these tags to wrap OS-specific content:
137-
138-
<!-- @os:windows -->
139-
Content shown only on Windows
140-
<!-- @os:end -->
141-
142-
<!-- @os:linux -->
143-
Content shown only on Linux
144-
<!-- @os:end -->
145-
146-
<!-- @os:all -->
147-
Content shown on all platforms (useful inside a platform block)
148-
<!-- @os:end -->
149-
150-
### Example
151-
152-
Here's how to write installation instructions that differ by platform:
153-
154-
## Installation
155-
156-
First, install the required dependencies:
157-
158-
<!-- @os:windows -->
159-
Open PowerShell as Administrator and run:
160-
161-
```powershell
162-
winget install Python.Python.3.11
163-
```
164-
<!-- @os:end -->
165-
166-
<!-- @os:linux -->
167-
Use your package manager:
168-
169-
```bash
170-
sudo apt update && sudo apt install python3.11 python3.11-venv
171-
```
172-
<!-- @os:end -->
173-
174-
Now verify the installation:
175-
176-
<!-- @os:windows -->
177-
```powershell
178-
python --version
179-
```
180-
<!-- @os:end -->
181-
182-
<!-- @os:linux -->
183-
```bash
184-
python3 --version
185-
```
186-
<!-- @os:end -->
187-
188-
### How It Works
189-
190-
| View | Behavior |
191-
|-------------------|-----------------------------------------------------------------------|
192-
| All Platforms | Shows all content with labels like "> **Windows only:**" before each |
193-
| Windows | Shows only Windows blocks; hides Linux blocks |
194-
| Linux | Shows only Linux blocks; hides Windows blocks |
195-
196-
Content **outside** of `@os` tags is always shown regardless of platform selection.
197-
198-
### Best Practices
199-
200-
1. **Keep blocks focused**: Put only the differing content inside `@os` tags
201-
2. **Maintain parallel structure**: If you have a Windows block, include a Linux equivalent
202-
3. **Use for commands**: Most differences are in terminal commands, paths, and package managers
203-
4. **Don't overuse**: If 90% of your content is the same, only tag the differences
204-
205-
---
206-
207-
## Categories
208-
209-
| Category | Purpose |
210-
|--------------------------------|----------------------------------------------------------|
211-
| `core/` | Essential playbooks for getting started |
212-
| `supplemental/` | Advanced or specialized playbooks for specific use cases |
213-
| `backup/` | Unpublished or draft playbooks |
214-
215-
---
216-
217-
## Publishing Checklist
218-
219-
Before setting `"published": true`:
220-
221-
- [ ] `id` matches folder name
222-
- [ ] Title is clear and descriptive
223-
- [ ] Description fits on a card (100–150 characters)
224-
- [ ] Time estimate is realistic
225-
- [ ] Correct platforms are specified
226-
- [ ] All steps have been tested on each listed platform
227-
- [ ] OS-specific tags are properly closed with `<!-- @os:end -->`
228-
- [ ] Code blocks have language hints (e.g., `python`, `bash`, `powershell`)
229-
- [ ] Links are valid and use HTTPS
230-
- [ ] No placeholder or TODO content remains
231-
232-
---
233-
234-
## Previewing Your Playbook
235-
236-
Before publishing, preview your playbook on the local development website to verify formatting and layout.
237-
238-
### Prerequisites
239-
240-
- [Node.js](https://nodejs.org/) v18 or higher installed
241-
242-
### Running the Preview Server
243-
244-
1. Open a terminal and navigate to the `website` folder:
245-
246-
```bash
247-
cd website
248-
```
249-
250-
2. Install dependencies (first time only):
251-
252-
```bash
253-
npm install
254-
```
255-
256-
3. Start the development server:
257-
258-
```bash
259-
npm run dev
260-
```
261-
262-
4. Open your browser to [http://localhost:3000](http://localhost:3000)
263-
264-
### Viewing Your Playbook
265-
266-
- **All playbooks**: Visit `http://localhost:3000` and scroll to the playbooks section
267-
- **Specific playbook**: Visit `http://localhost:3000/playbooks/<playbook-id>`
268-
- Example: `http://localhost:3000/playbooks/lmstudio-rocm-llms`
269-
270-
---
271-
272-
## Tips for Great Playbooks
147+
```bash
148+
cd website
149+
npm install # first time only
150+
npm run dev
151+
```
273152

274-
1. **Start with the end goal**: Tell users what they'll accomplish
275-
2. **List prerequisites upfront**: Don't surprise users mid-playbook
276-
3. **Use numbered steps**: Makes it easy to follow along
277-
4. **Include expected output**: Show what success looks like
278-
5. **Add troubleshooting sections**: Anticipate common issues
279-
6. **Keep code blocks copy-friendly**: Avoid prompts like `$` or `>` in commands
280-
7. **Test on a fresh system**: Ensure all dependencies are documented
153+
Visit `http://localhost:3000/playbooks/<playbook-id>` to preview your playbook.

0 commit comments

Comments
 (0)