diff --git a/AGENTS.md b/AGENTS.md index b5ad59f37f..2228bea209 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -85,6 +85,34 @@ To check or apply style, read the relevant pass file(s) and use them as guidance - **Python SDK functions**: Module-level functions in the Python SDK are listed in the [Global Functions overview](/models/ref/python/functions). - **`.editorconfig`**: An `.editorconfig` file in the repository root enforces indentation and whitespace automatically. Most editors apply it with no configuration. If yours doesn't support it natively, install the EditorConfig plugin (https://editorconfig.org/#download). - **Consistent language tab labels**: When an example offers multiple languages — in a `` or across `` blocks — label every tab with the same canonical name everywhere: `Python`, `TypeScript` (never `Typescript`), `Bash`. In a ``, give each fence a lowercase lexer **and** that canonical title (e.g. a `python` fence titled `Python`); never leave a language fence untitled. The reader's **Python/TypeScript** choice carries from page to page via `code-group-language-persist.js` (repo root), which matches those two labels case-insensitively — so inconsistent casing of them silently resets it. Other labels like `Bash` are only for in-page consistency and are intentionally not persisted across pages. Don't add a competing per-page persistence script. +- **ARIA chat examples**: When a task can be delegated to ARIA end-to-end in the W&B app, add a compact chat example as a third content modality alongside code examples and UI click sequences. Use **ARIA** as the public-facing product name in prose and in fence titles. + + Default format: a user prompt and a concise ARIA response. Don't include reasoning or thinking steps unless the page specifically needs them for clarity; longer walkthroughs belong on [ARIA overview](/aria/overview). Place chat examples in the first section where the ARIA-delegable task appears, not at the top of the page unless the whole page is about chatting with ARIA. + + **Code blocks (default):** Use native Mintlify fences, matching [ARIA overview](/aria/overview): + + ````mdx + ```text title="User prompt" + Your user prompt here + ``` + + ```text title="ARIA response" + A concise example ARIA response + ``` + ```` + + **Ask Assistant style (optional):** Import `/snippets/AriaChatBubbles.jsx` when a chat-panel layout better fits the page. The component mirrors Mintlify's Ask Assistant sheet chrome and includes copy buttons for the prompt and response: + + ```mdx + import { AriaChatBubbles } from '/snippets/AriaChatBubbles.jsx'; + + + ``` + + For reviewer comparison during the DOCS-2631 prototype, import `AriaChatComparisonCodeColumn` and `AriaChatBubbles` in the parent page and render them in a two-column grid. Mintlify does not render JSX components imported into MDX snippets, and it does not render children passed as props across snippet boundaries. ## Working with the repository diff --git a/models/app/features/custom-charts.mdx b/models/app/features/custom-charts.mdx index 729930065b..6c2876616b 100644 --- a/models/app/features/custom-charts.mdx +++ b/models/app/features/custom-charts.mdx @@ -4,6 +4,9 @@ description: Create custom charts in W&B projects with Vega visualizations keywords: ["Vega", "wandb.plot_table", "precision-recall curve", "ROC curve", "GraphQL query"] --- +import { AriaChatBubbles } from '/snippets/AriaChatBubbles.jsx'; +import { AriaChatComparisonCodeColumn } from '/snippets/_includes/aria-chat-comparison.mdx'; + Custom charts let you visualize logged data exactly how you want, beyond the defaults W&B provides. Use them when you need to plot relationships, distributions, or model evaluation metrics that the built-in panels don't cover, such as precision-recall curves, custom histograms, or overlays of multiple experiments. Create custom charts in your W&B project. Log arbitrary tables of data and visualize them exactly how you want. Control details of fonts, colors, and tooltips with [Vega](https://vega.github.io/vega/). @@ -246,6 +249,29 @@ with wandb.init() as run: After you log data, build a chart in the W&B app by choosing which logged values to pull in and how to render them. Add a new custom chart to get started, then edit the query to select data from your visible runs. The query uses [GraphQL](https://graphql.org) to fetch data from the config, summary, and history fields in your runs. +You can also ask ARIA to create a custom chart from a description. Open ARIA from your project workspace and describe the chart you want. The following compares the current code-block style with a chat-bubble prototype: + +
+
+

+ Code blocks +

+ +
+
+

+ Ask Assistant style (prototype) +

+ +
+
+ ### Build the GraphQL query The custom chart editor runs a GraphQL query over the runs you selected in the project workspace or report. In the query editor, add the fields you need. You can pick from `config`, `summary`, `history`, `summaryTable`, and `historyTable` so you don't need to write the query from scratch for most cases. @@ -320,4 +346,4 @@ Custom charts are useful when the default panels can't represent what you need t * Showing model validation metrics that require custom x-y coordinates (like precision-recall curves) * Overlaying data distributions from two different models or experiments as histograms * Showing changes in a metric through snapshots at multiple points during training -* Creating a unique visualization not yet available in W&B and sharing it with others \ No newline at end of file +* Creating a unique visualization not yet available in W&B and sharing it with others diff --git a/models/app/features/panels.mdx b/models/app/features/panels.mdx index 1fdc24b1b7..ec55809d0a 100644 --- a/models/app/features/panels.mdx +++ b/models/app/features/panels.mdx @@ -5,6 +5,9 @@ description: Use and customize workspace panels to visualize your logged data keywords: ["workspace panels", "quick add", "full-screen mode", "panel sections", "embed panel"] --- +import { AriaChatBubbles } from '/snippets/AriaChatBubbles.jsx'; +import { AriaChatComparisonCodeColumn } from '/snippets/_includes/aria-chat-comparison.mdx'; + Use workspace panel visualizations to explore your [logged data](/models/ref/python/experiments/run.md/#method-runlog) by key, visualize the relationships between hyperparameters and output metrics, and more. This page describes how to choose a workspace mode, add and configure panels, organize them into sections, and share them with collaborators. ## Workspace modes @@ -101,6 +104,29 @@ Add panels to your workspace one at a time, either globally or at the section le Use **Quick add** to add a panel automatically for each key you select, either globally or at the section level. +You can also ask ARIA to add panels for you. The following compares the current code-block style with a chat-bubble prototype: + +
+
+

+ Code blocks +

+ +
+
+

+ Ask Assistant style (prototype) +

+ +
+
+ For an automated workspace with no deleted panels, the **Quick add** option isn't visible because the workspace already includes panels for all logged keys. You can use **Quick add** to re-add a panel that you deleted. diff --git a/models/track/workspaces.mdx b/models/track/workspaces.mdx index cf291b840f..88feb26e84 100644 --- a/models/track/workspaces.mdx +++ b/models/track/workspaces.mdx @@ -3,6 +3,9 @@ description: A playground for exploring run data with interactive visualizations title: View experiments results --- +import { AriaChatBubbles } from '/snippets/AriaChatBubbles.jsx'; +import { AriaChatComparisonCodeColumn } from '/snippets/_includes/aria-chat-comparison.mdx'; + W&B workspace is your personal sandbox to customize charts and explore model results. A W&B workspace consists of *Tables* and *Panel sections*: * **Tables**: All runs logged to your project are listed in the project's table. Turn on and off runs, change colors, and expand the table to see notes, config, and summary metrics for each run. @@ -32,6 +35,29 @@ Improve team collaboration with tailored workspace views. Create Saved Views to 2. Make edits to the workspace. 3. Click the **action ()** menu at the top right corner of your workspace. Click **Save as a new view**. +You can also ask ARIA to save your current workspace layout as a new view. The following compares the current code-block style with a chat-bubble prototype: + +
+
+

+ Code blocks +

+ +
+
+

+ Ask Assistant style (prototype) +

+ +
+
+ New saved views appear in the workspace navigation menu. diff --git a/snippets/AriaChatBubbles.jsx b/snippets/AriaChatBubbles.jsx new file mode 100644 index 0000000000..50b4f37feb --- /dev/null +++ b/snippets/AriaChatBubbles.jsx @@ -0,0 +1,123 @@ +export const AriaChatBubbles = ({ prompt, response }) => { + const [promptCopied, setPromptCopied] = useState(false); + const [responseCopied, setResponseCopied] = useState(false); + + useEffect(() => { + if (!promptCopied) { + return undefined; + } + + const timeout = setTimeout(() => setPromptCopied(false), 2000); + return () => clearTimeout(timeout); + }, [promptCopied]); + + useEffect(() => { + if (!responseCopied) { + return undefined; + } + + const timeout = setTimeout(() => setResponseCopied(false), 2000); + return () => clearTimeout(timeout); + }, [responseCopied]); + + const copyText = (text, setCopied) => { + navigator.clipboard + .writeText(text) + .then(() => setCopied(true)) + .catch(console.error); + }; + + const copyButtonClassName = + 'rounded-lg p-1.5 hover:bg-gray-100 dark:hover:bg-white/10 cursor-pointer text-gray-500'; + + const bubbleTextClassName = + 'hyphens-auto whitespace-pre-wrap text-base text-gray-800 [overflow-wrap:anywhere] lg:text-sm dark:text-gray-200'; + + const copyIcon = (copied) => + copied ? ( + + ) : ( + + ); + + const bubbleRow = ({ + align, + bubbleClassName, + text, + copied, + setCopied, + copyLabel, + }) => ( +
+
+
{text}
+ +
+
+ ); + + return ( +
+ {bubbleRow({ + align: 'end', + bubbleClassName: + 'rounded-br-none bg-gray-100 dark:bg-white/5', + text: prompt, + copied: promptCopied, + setCopied: setPromptCopied, + copyLabel: 'Copy user prompt', + })} + {bubbleRow({ + align: 'start', + bubbleClassName: + 'rounded-bl-none bg-primary/10 dark:bg-primary-light/10', + text: response, + copied: responseCopied, + setCopied: setResponseCopied, + copyLabel: 'Copy chat response', + })} +
+ ); +}; + +export default AriaChatBubbles; diff --git a/snippets/_includes/aria-chat-comparison.mdx b/snippets/_includes/aria-chat-comparison.mdx new file mode 100644 index 0000000000..39d6977fc2 --- /dev/null +++ b/snippets/_includes/aria-chat-comparison.mdx @@ -0,0 +1,10 @@ +export const AriaChatComparisonCodeColumn = ({ prompt, response }) => ( + <> + + {prompt} + + + {response} + + +);