fix(ava): fix render bug

Author: xueren.dt

packages/ava/src/advisor/advisor.ts

@@ -1,3 +1,4 @@
+/* eslint-disable no-dupe-class-members */
 import {
   AdviseChartParams,
   AdviseStageOutput,
@@ -10,14 +11,14 @@ import { extractData } from '@ava/extract';
 
 import { logError } from '../utils';
 import { getRenderer, type Spec } from '../bind';
+
 import { AdviseChartPipeline } from './advise-chart-pipeline/pipeline';
 
 /**
  * The 1st level advisor class.
  * Used to extract data, recommend charts, and render charts. All functionalities are AI-driven.
  */
 export class Advisor {
-
   /**
    * Configuration for the advisor. Includes LLM settings, chart inclusion/exclusion lists.
    */
@@ -36,13 +37,13 @@ export class Advisor {
 
   /**
    * Extract data shards from raw data or user query.
-   * 
+   *
    * Case 1 - User provides a text query, extract relevant data shards:
-   * 
+   *
       advisor.extract('What is the average age of people who work as engineers?');
-   * 
+   *
    * Case 2 - User provides a query with raw data:
-   * 
+   *
       advisor.extract(`帮我可视化以下数据：
         城市 类别 渠道 销售额 价格
         杭州 体育 A  100  80
@@ -51,9 +52,9 @@ export class Advisor {
         广州 体育 B  120  70
         深圳 体育 C  180  95
       `);
-   * 
+   *
    * Case 3 - User provides raw data, extract data shards directly:
-   * 
+   *
       advisor.extract({ type: 'A', value: 2 });
    */
   async extract(params: AdviseChartParams) {
@@ -66,41 +67,42 @@ export class Advisor {
   /**
    * Advise charts based on the data shards, which are extracted from the `advisor.extract` API.
    * This is the core function of the Advisor class, which leverages LLMs to recommend suitable chart types and encodings based on the provided data and user purpose.
-   * 
+   *
    * const advises = advisor.advise(dataShards);
    */
   advise(params: AdviseChartParams): Promise<AdviseStageOutput>;
+
   advise(params: AdviseTextParams): Promise<AdviseText>;
+
   async advise(params: AdviseChartParams | AdviseTextParams): Promise<AdviseStageOutput | AdviseText> {
     const result = await this.adviseChartPipeline.execute(params as AdviseChartParams);
     return result;
   }
 
   /**
    * Render the chart recommendation spec into a chart dom. We can use different renderers by customizing the renderer.
-   * 
+   *
    * Case 1 - Using default renderer (AVA built-in):
-   * 
+   *
       advisor.render({
         container: '#chart',
         spec: chartSpec,
       });
-   * 
+   *
    * Case 2 - Using custom renderer:
-   * 
+   *
       const customRenderer: Renderer = (container, spec) => { ... };
       bindRenderer(customRenderer);
       advisor.render({
         container: '#chart',
         spec: chartSpec,
       });
-   * 
+   *
    */
   render(params: { container: string; spec: Spec }) {
     const renderer = getRenderer();
     if (renderer) {
-      const { container, spec } = params;
-      return renderer(container, spec);
+      return renderer(params);
     }
     logError('Chart render not configured, please bind a renderer first, GPT-Vis is recommended.');
     return null;

packages/ava/src/advisor/chartAdvise/prompt/index.ts

@@ -236,6 +236,7 @@ Output the “best chart type (chartId)” with the rationale for selection, and
 
 # Response Format (JSON)
 - Only output a JSON two-dimensional array of “short codes”. Each item is a string array (up to 3, ordered from highest to lowest match). Do not output any extra text, e.g., [["l", "a", "c"], ["b", "c"]].
+- Output MUST be a plain JSON string; do not use Markdown code fences (e.g., \`\`\`JSON).
 
 # Chart Knowledge Base (CKB)
 ## Chart Types and Codes (object array)
@@ -341,6 +342,7 @@ export const getSpecGeneratePrompt = (params: { chartId: string; data: PlainLike
 - Single input: return only the JSON configuration object.
 - Batch input: return only the JSON array of configuration objects in the same order as input.
 - In all cases, do not include extra text, explanations, or code fences.
+ - Output MUST be a plain JSON string; do not use Markdown code fences (e.g., \`\`\`JSON).
 
 # Chart InputSchema
 ${inputSchema}

packages/ava/src/bind.ts

@@ -2,7 +2,7 @@
 // import type { Spec } from '@antv/gpt-vis';
 export type Spec = any;
 
-export type Renderer = (container: string, spec: Spec) => void;
+export type Renderer = (params: { container: string; spec: Spec }) => void;
 
 // The renderer function bound from outside.
 // Default is null.

playground/src/utils/index.ts

@@ -2,8 +2,9 @@ import React from 'react';
 
 import ReactDOM from 'react-dom/client';
 import { DEFAULT_CHART_COMPONENTS } from '@antv/gpt-vis';
+import { Spec } from '../../../packages/ava/src/bind';
 
-export const render = (params: any) => {
+export const render = (params: { container: string; spec: Spec }) => {
   const { container, spec } = params || {};
   const mount =
     typeof container === 'string' ? (document.querySelector(container) as HTMLElement) : (container as HTMLElement);