用 AI + Canvas 生成图形、动画与图表

本文链接：https://blog.csdn.net/zimin1985/article/details/148955296

摘要

随着人工智能（AI）技术与 Web 可视化的结合，前端开发者可以通过自然语言生成复杂的图表、动画和交互式画布，极大地提升了开发效率和用户体验。本文作为《AI × 前端：构建智能化 Web 应用的未来》专栏的第七篇，深入探讨如何将 AI 与 Canvas/WebGL 技术结合，构建交互式可视化与智能画布。我们将介绍如何通过自然语言生成 ECharts 和 Chart.js 的图表配置，使用 Fabric.js 和 GPT 指令控制画布对象行为，通过 AI 实时分析图表数据并生成描述，以及利用 AI 生成 WebGL 渲染参数和动画效果。结合 ChartGPT、Chat2Vis 和 AI Canvas 等工具的理念，本文提供详细的代码示例、性能分析和最佳实践，为中高级前端开发者、数据可视化工程师和技术架构师提供一个系统性、可落地的指南，帮助他们在 Web 应用中实现智能化的可视化功能。

1. 引言

在 Web 开发中，Canvas 和 WebGL 是实现高性能图形、动画和数据可视化的核心技术。然而，传统可视化开发需要手动编写复杂的配置代码、设计动画逻辑和分析数据趋势，这对开发者的技术要求较高。AI 技术的引入彻底改变了这一现状。通过自然语言提示，开发者可以快速生成图表配置、控制画布对象行为，甚至让 AI 自动分析图表数据并生成自然语言描述。例如，输入“生成一个显示销售数据的柱状图，包含动画效果”，即可生成 Chart.js 配置代码；或者通过 AI 指令让 Fabric.js 画布中的对象动态移动。

本文将从 AI 与 Canvas/WebGL 的结合点入手，详细讲解如何通过自然语言生成 ECharts 和 Chart.js 图表配置，使用 Fabric.js 结合 GPT 指令控制画布对象行为，通过 AI 实时分析图表数据并生成描述，以及利用 AI 生成 WebGL 渲染参数和动画效果。我们将结合 ChartGPT 和 Chat2Vis 的理念，展示如何在前端实现智能化的可视化功能，并探讨性能优化和安全最佳实践。通过实战案例和详细代码示例，本文为开发者提供了一个全面的指南，帮助他们在 Web 应用中构建高效、交互式的智能画布。

2. 通过自然语言生成图表配置（ECharts/Chart.js）

2.1 图表生成原理

AI 可以通过自然语言处理（NLP）将用户描述转化为结构化的图表配置（如 JSON 格式），适配 ECharts 或 Chart.js 等可视化库。工作流程包括：

提示解析：大语言模型（如 GPT-4）解析用户输入，提取图表类型、数据、样式和动画要求。
配置生成：将解析结果转化为 ECharts 或 Chart.js 的 JSON 配置。
前端渲染：前端通过可视化库渲染图表，支持动态更新和交互。

工具参考：

ChartGPT：基于 GPT 的图表生成工具，支持从自然语言生成 Chart.js 配置。
Chat2Vis：专注于数据可视化，支持 ECharts 和其他库的配置生成。

2.2 使用 Chart.js 生成柱状图

以下是一个通过自然语言生成 Chart.js 配置的示例，提示为：“生成一个显示 2023 年月度销售数据的柱状图，主色调为蓝色”。

2.2.1 后端代码

后端使用 OpenAI API 生成 Chart.js 配置：

// server.js
const express = require('express');
const axios = require('axios');
const app = express();

app.use(express.json());

app.post('/api/generate-chart', async (req, res) => {
  try {
    const { prompt } = req.body;
    const response = await axios.post(
      '[invalid url, do not cite]',
      {
        model: 'gpt-4',
        messages: [
          {
            role: 'system',
            content: '你是一个 Chart.js 配置生成器，根据用户描述生成 JSON 格式的 Chart.js 配置，包含类型、数据、样式和动画。'
          },
          { role: 'user', content: prompt }
        ],
        max_tokens: 1000,
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );
    res.json({ config: JSON.parse(response.data.choices[0].message.content) });
  } catch (error) {
    res.status(500).json({ error: '生成图表配置失败' });
  }
});

app.listen(3000, () => console.log('服务器运行在 3000 端口'));

环境变量（.env）：

OPENAI_API_KEY=your-openai-key

2.2.2 前端代码

前端使用 React 和 Chart.js 渲染生成的配置：

// src/App.tsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const App: React.FC = () => {
  const [prompt, setPrompt] = useState('生成一个显示 2023 年月度销售数据的柱状图，主色调为蓝色');
  const [chartConfig, setChartConfig] = useState(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchChartConfig = async () => {
      setLoading(true);
      try {
        const response = await axios.post('/api/generate-chart', { prompt });
        setChartConfig(response.data.config);
      } catch (error) {
        console.error('获取图表配置失败:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchChartConfig();
  }, [prompt]);

  return (
    <div className="p-4">
      <textarea
        className="w-full p-2 border rounded mb-4"
        placeholder="输入图表描述"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      {loading ? <p>生成中...</p> : chartConfig && <Bar data={chartConfig.data} options={chartConfig.options} />}
    </div>
  );
};

export default App;

2.2.3 生成结果

假设 AI 返回以下 Chart.js 配置：

{
  "data": {
    "labels": ["1月", "2月", "3月", "4月", "5月", "6月", "7月", "8月", "9月", "10月", "11月", "12月"],
    "datasets": [
      {
        "label": "2023 年销售数据",
        "data": [1200, 1900, 3000, 5000, 2300, 3400, 2800, 4100, 3600, 2900, 4500, 5200],
        "backgroundColor": "rgba(54, 162, 235, 0.6)",
        "borderColor": "rgba(54, 162, 235, 1)",
        "borderWidth": 1
      }
    ]
  },
  "options": {
    "responsive": true,
    "plugins": {
      "legend": { "position": "top" },
      "title": { "display": true, "text": "2023 年月度销售数据" }
    },
    "animation": {
      "duration": 1000,
      "easing": "easeInOutQuad"
    },
    "scales": {
      "y": {
        "beginAtZero": true,
        "title": { "display": true, "text": "销售额 (元)" }
      },
      "x": {
        "title": { "display": true, "text": "月份" }
      }
    }
  }
}

特点：

动态生成：AI 根据提示生成数据和样式，支持多种图表类型。
动画效果：配置包含平滑动画，提升用户体验。
可扩展性：开发者可手动调整生成的配置，添加交互功能。

2.2.4 性能分析

生成时间：文本到配置生成约 1-3 秒。
渲染时间：Chart.js 渲染柱状图约 50-100ms，适合实时应用。
局限性：复杂图表（如多轴混合图）需更详细的提示词。

2.3 使用 ECharts 生成复杂图表

ECharts 支持更复杂的可视化场景。以下是一个生成折线图的示例，提示为：“生成一个显示股票价格趋势的折线图，包含平滑曲线和工具提示”。

2.3.1 前端代码

// src/App.tsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import * as echarts from 'echarts';
import { useRef } from 'react';

const App: React.FC = () => {
  const [prompt, setPrompt] = useState('生成一个显示股票价格趋势的折线图，包含平滑曲线和工具提示');
  const [chartConfig, setChartConfig] = useState(null);
  const chartRef = useRef<HTMLDivElement>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchChartConfig = async () => {
      setLoading(true);
      try {
        const response = await axios.post('/api/generate-chart', { prompt });
        setChartConfig(response.data.config);
      } catch (error) {
        console.error('获取图表配置失败:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchChartConfig();
  }, [prompt]);

  useEffect(() => {
    if (chartConfig && chartRef.current) {
      const chart = echarts.init(chartRef.current);
      chart.setOption(chartConfig);
      return () => chart.dispose();
    }
  }, [chartConfig]);

  return (
    <div className="p-4">
      <textarea
        className="w-full p-2 border rounded mb-4"
        placeholder="输入图表描述"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <div ref={chartRef} style={{ height: '400px', width: '100%' }} />
      {loading && <p>生成中...</p>}
    </div>
  );
};

export default App;

2.3.2 生成结果

AI 返回的 ECharts 配置：

{
  "title": { "text": "股票价格趋势" },
  "tooltip": { "trigger": "axis" },
  "xAxis": {
    "type": "category",
    "data": ["2023-01-01", "2023-01-02", "2023-01-03", "2023-01-04", "2023-01-05"]
  },
  "yAxis": { "type": "value", "name": "价格 (元)" },
  "series": [
    {
      "name": "股票价格",
      "type": "line",
      "smooth": true,
      "data": [120, 132, 101, 134, 90],
      "animationDuration": 1000
    }
  ]
}

特点：

复杂可视化：ECharts 支持多轴、动态数据等高级功能。
交互性：内置工具提示和缩放功能，提升用户体验。
性能：渲染复杂图表约 100-200ms，适合大数据场景。

3. 控制画布对象行为（Fabric.js + GPT 指令）

3.1 Fabric.js 简介

Fabric.js 是一个强大的 Canvas 库，支持创建和操作矢量对象（如矩形、文本、路径）。结合 GPT 指令，可以通过自然语言控制画布对象的动画和交互行为。

3.2 实战：AI 控制 Fabric.js 动画

提示为：“在 Canvas 上绘制一个红色矩形，从左到右移动 200 像素，动画持续 2 秒”。

3.2.1 后端代码

生成 Fabric.js 配置和动画指令：

// server.js
app.post('/api/generate-canvas', async (req, res) => {
  try {
    const { prompt } = req.body;
    const response = await axios.post(
      '[invalid url, do not cite]',
      {
        model: 'gpt-4',
        messages: [
          {
            role: 'system',
            content: '你是一个 Fabric.js 配置生成器，根据用户描述生成 JSON 格式的 Canvas 对象和动画指令。'
          },
          { role: 'user', content: prompt }
        ],
        max_tokens: 1000,
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );
    res.json({ config: JSON.parse(response.data.choices[0].message.content) });
  } catch (error) {
    res.status(500).json({ error: '生成 Canvas 配置失败' });
  }
});

3.2.2 前端代码

使用 Fabric.js 渲染和执行动画：

// src/App.tsx
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { fabric } from 'fabric';

const App: React.FC = () => {
  const [prompt, setPrompt] = useState('在 Canvas 上绘制一个红色矩形，从左到右移动 200 像素，动画持续 2 秒');
  const [canvasConfig, setCanvasConfig] = useState(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchCanvasConfig = async () => {
      setLoading(true);
      try {
        const response = await axios.post('/api/generate-canvas', { prompt });
        setCanvasConfig(response.data.config);
      } catch (error) {
        console.error('获取 Canvas 配置失败:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchCanvasConfig();
  }, [prompt]);

  useEffect(() => {
    if (canvasConfig && canvasRef.current) {
      const canvas = new fabric.Canvas(canvasRef.current);
      const objects = canvasConfig.objects.map((obj: any) => {
        if (obj.type === 'rect') {
          return new fabric.Rect(obj.props);
        }
        return null;
      }).filter(Boolean);
      canvas.add(...objects);

      canvasConfig.animations.forEach((anim: any) => {
        const target = objects.find((obj: any) => obj.id === anim.target);
        if (target) {
          target.animate(anim.property, anim.value, {
            duration: anim.duration,
            onChange: canvas.renderAll.bind(canvas),
            easing: fabric.util.ease[anim.easing],
          });
        }
      });

      return () => canvas.dispose();
    }
  }, [canvasConfig]);

  return (
    <div className="p-4">
      <textarea
        className="w-full p-2 border rounded mb-4"
        placeholder="输入 Canvas 描述"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <canvas ref={canvasRef} width="800" height="400" className="border" />
      {loading && <p>生成中...</p>}
    </div>
  );
};

export default App;

3.2.3 生成结果

AI 返回的 Fabric.js 配置：

{
  "objects": [
    {
      "type": "rect",
      "props": {
        "id": "rect1",
        "left": 50,
        "top": 50,
        "width": 100,
        "height": 100,
        "fill": "red"
      }
    }
  ],
  "animations": [
    {
      "target": "rect1",
      "property": "left",
      "value": 250,
      "duration": 2000,
      "easing": "easeInOutQuad"
    }
  ]
}

特点：

动态动画：AI 生成的动画指令直接驱动 Fabric.js 对象。
可扩展性：支持多种对象类型和复杂动画。
性能：动画渲染约 16-60ms/帧，适合实时交互。

4. AI 实时分析图表数据并给出描述

4.1 数据分析原理

AI 可以分析图表数据（如 Chart.js 的 data.datasets），提取趋势、异常点或关键信息，并生成自然语言描述。例如，分析销售数据并生成“销售额在 4 月达到峰值 5000 元，整体呈上升趋势”。

4.2 实战：分析 Chart.js 数据

提示为：“分析图表数据，描述销售趋势”。

4.2.1 后端代码

// server.js
app.post('/api/analyze-chart', async (req, res) => {
  try {
    const { data } = req.body;
    const response = await axios.post(
      '[invalid url, do not cite]',
      {
        model: 'gpt-4',
        messages: [
          {
            role: 'system',
            content: '你是一个数据分析助手，根据 Chart.js 数据生成自然语言描述，突出趋势和关键点。'
          },
          { role: 'user', content: JSON.stringify(data) }
        ],
        max_tokens: 500,
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );
    res.json({ description: response.data.choices[0].message.content });
  } catch (error) {
    res.status(500).json({ error: '分析失败' });
  }
});

4.2.2 前端代码

// src/App.tsx
import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const chartData = {
  labels: ["1月", "2月", "3月", "4月", "5月", "6月"],
  datasets: [
    {
      label: "2023 年销售数据",
      data: [1200, 1900, 3000, 5000, 2300, 3400],
      backgroundColor: "rgba(54, 162, 235, 0.6)",
      borderColor: "rgba(54, 162, 235, 1)",
      borderWidth: 1,
    },
  ],
};

const App: React.FC = () => {
  const [description, setDescription] = useState('');
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const analyzeChart = async () => {
      setLoading(true);
      try {
        const response = await axios.post('/api/analyze-chart', { data: chartData });
        setDescription(response.data.description);
      } catch (error) {
        console.error('分析失败:', error);
      } finally {
        setLoading(false);
      }
    };
    analyzeChart();
  }, []);

  return (
    <div className="p-4">
      <Bar data={chartData} options={{ responsive: true, plugins: { title: { display: true, text: "2023 年销售数据" } } }} />
      {loading ? <p>分析中...</p> : <p className="mt-4">{description}</p>}
    </div>
  );
};

export default App;

4.2.3 生成结果

AI 返回的描述：

2023 年销售数据整体呈上升趋势。销售额从 1 月的 1200 元增长到 4 月的 5000 元，达到峰值，随后在 5 月下降至 2300 元，6 月回升至 3400 元。建议关注 4 月的销售高峰，分析其驱动因素。

特点：

智能洞察：AI 自动识别趋势、峰值和异常点。
用户友好：描述简洁，适合直接展示给用户。
性能：分析时间约 1-2 秒，适合实时应用。

5. 用 AI 生成 WebGL 渲染参数 / 动画效果

5.1 WebGL 简介

WebGL 基于 OpenGL ES，用于渲染高性能 3D 图形。AI 可以生成 Three.js（WebGL 封装库）的场景配置和动画参数。

5.2 实战：AI 生成 Three.js 动画

提示为：“生成一个旋转的蓝色立方体，背景为黑色，动画持续 5 秒”。

5.2.1 后端代码

// server.js
app.post('/api/generate-webgl', async (req, res) => {
  try {
    const { prompt } = req.body;
    const response = await axios.post(
      '[invalid url, do not cite]',
      {
        model: 'gpt-4',
        messages: [
          {
            role: 'system',
            content: '你是一个 Three.js 配置生成器，根据用户描述生成 JSON 格式的场景和动画参数。'
          },
          { role: 'user', content: prompt }
        ],
        max_tokens: 1000,
      },
      {
        headers: {
          Authorization: `Bearer ${process.env.OPENAI_API_KEY}`,
          'Content-Type': 'application/json',
        },
      }
    );
    res.json({ config: JSON.parse(response.data.choices[0].message.content) });
  } catch (error) {
    res.status(500).json({ error: '生成 WebGL 配置失败' });
  }
});

5.2.2 前端代码

// src/App.tsx
import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import * as THREE from 'three';

const App: React.FC = () => {
  const [prompt, setPrompt] = useState('生成一个旋转的蓝色立方体，背景为黑色，动画持续 5 秒');
  const [webglConfig, setWebglConfig] = useState(null);
  const mountRef = useRef<HTMLDivElement>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchWebglConfig = async () => {
      setLoading(true);
      try {
        const response = await axios.post('/api/generate-webgl', { prompt });
        setWebglConfig(response.data.config);
      } catch (error) {
        console.error('获取 WebGL 配置失败:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchWebglConfig();
  }, [prompt]);

  useEffect(() => {
    if (webglConfig && mountRef.current) {
      const scene = new THREE.Scene();
      scene.background = new THREE.Color(webglConfig.scene.background);
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = webglConfig.camera.z;

      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      mountRef.current.appendChild(renderer.domElement);

      const objects = webglConfig.objects.map((obj: any) => {
        if (obj.type === 'cube') {
          const geometry = new THREE.BoxGeometry();
          const material = new THREE.MeshBasicMaterial({ color: obj.color });
          return new THREE.Mesh(geometry, material);
        }
        return null;
      }).filter(Boolean);
      scene.add(...objects);

      const animate = () => {
        requestAnimationFrame(animate);
        webglConfig.animations.forEach((anim: any) => {
          const target = objects.find((obj: any) => obj.id === anim.target);
          if (target) {
            target.rotation[anim.property] += anim.speed;
          }
        });
        renderer.render(scene, camera);
      };
      animate();

      return () => {
        mountRef.current?.removeChild(renderer.domElement);
      };
    }
  }, [webglConfig]);

  return (
    <div className="p-4">
      <textarea
        className="w-full p-2 border rounded mb-4"
        placeholder="输入 WebGL 描述"
        value={prompt}
        onChange={(e) => setPrompt(e.target.value)}
      />
      <div ref={mountRef} />
      {loading && <p>生成中...</p>}
    </div>
  );
};

export default App;

5.2.3 生成结果

AI 返回的 Three.js 配置：

{
  "scene": { "background": "#000000" },
  "camera": { "z": 5 },
  "objects": [
    {
      "type": "cube",
      "id": "cube1",
      "color": "#0000ff"
    }
  ],
  "animations": [
    {
      "target": "cube1",
      "property": "y",
      "speed": 0.01,
      "duration": 5000
    }
  ]
}

特点：

3D 效果：生成旋转的 3D 立方体，视觉效果丰富。
性能：WebGL 渲染约 16-60ms/帧，适合复杂动画。
局限性：复杂场景（如光影效果）需更详细的提示词。

6. 实战案例：智能数据仪表盘

6.1 项目概述

我们将构建一个智能数据仪表盘，包含 AI 生成的柱状图、动态 Canvas 动画和 WebGL 3D 效果。功能包括：

自然语言生成 Chart.js 柱状图。
Fabric.js 控制动态对象。
Three.js 渲染 3D 数据可视化。
AI 分析数据并生成描述。

6.2 后端实现

完整的后端代码（server.js）：

const express = require('express');
const axios = require('axios');
const app = express();

app.use(express.json());

app.post('/api/generate-chart', async (req, res) => {
  try {
    const { prompt } = req.body;
    const response = await axios.post(
      '[invalid url, do not cite]',
      {
        model: 'gpt-4',
        messages: [
          { role: 'system', content: '你是一个 Chart.js 配置生成器。' },
          { role: 'user', content: prompt }
        ],
        max_tokens: 1000,
      },
      {
        headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, 'Content-Type': 'application/json' },
      }
    );
    res.json({ config: JSON.parse(response.data.choices[0].message.content) });
  } catch (error) {
    res.status(500).json({ error: '生成图表配置失败' });
  }
});

app.post('/api/generate-canvas', async (req, res) => {
  try {
    const { prompt } = req.body;
    const response = await axios.post(
      '[invalid url, do not cite]',
      {
        model: 'gpt-4',
        messages: [
          { role: 'system', content: '你是一个 Fabric.js 配置生成器。' },
          { role: 'user', content: prompt }
        ],
        max_tokens: 1000,
      },
      {
        headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, 'Content-Type': 'application/json' },
      }
    );
    res.json({ config: JSON.parse(response.data.choices[0].message.content) });
  } catch (error) {
    res.status(500).json({ error: '生成 Canvas 配置失败' });
  }
});

app.post('/api/generate-webgl', async (req, res) => {
  try {
    const { prompt } = req.body;
    const response = await axios.post(
      '[invalid url, do not cite]',
      {
        model: 'gpt-4',
        messages: [
          { role: 'system', content: '你是一个 Three.js 配置生成器。' },
          { role: 'user', content: prompt }
        ],
        max_tokens: 1000,
      },
      {
        headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, 'Content-Type': 'application/json' },
      }
    );
    res.json({ config: JSON.parse(response.data.choices[0].message.content) });
  } catch (error) {
    res.status(500).json({ error: '生成 WebGL 配置失败' });
  }
});

app.post('/api/analyze-chart', async (req, res) => {
  try {
    const { data } = req.body;
    const response = await axios.post(
      '[invalid url, do not cite]',
      {
        model: 'gpt-4',
        messages: [
          { role: 'system', content: '你是一个数据分析助手，生成自然语言描述。' },
          { role: 'user', content: JSON.stringify(data) }
        ],
        max_tokens: 500,
      },
      {
        headers: { Authorization: `Bearer ${process.env.OPENAI_API_KEY}`, 'Content-Type': 'application/json' },
      }
    );
    res.json({ description: response.data.choices[0].message.content });
  } catch (error) {
    res.status(500).json({ error: '分析失败' });
  }
});

app.listen(3000, () => console.log('服务器运行在 3000 端口'));

6.3 前端实现

完整的 React 前端代码（App.tsx）：

import React, { useState, useEffect, useRef } from 'react';
import axios from 'axios';
import { Bar } from 'react-chartjs-2';
import { Chart as ChartJS, CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend } from 'chart.js';
import { fabric } from 'fabric';
import * as THREE from 'three';
import 'tailwindcss/tailwind.css';

ChartJS.register(CategoryScale, LinearScale, BarElement, Title, Tooltip, Legend);

const App: React.FC = () => {
  const [chartPrompt, setChartPrompt] = useState('生成一个显示 2023 年月度销售数据的柱状图，主色调为蓝色');
  const [canvasPrompt, setCanvasPrompt] = useState('在 Canvas 上绘制一个红色矩形，从左到右移动 200 像素，动画持续 2 秒');
  const [webglPrompt, setWebglPrompt] = useState('生成一个旋转的蓝色立方体，背景为黑色，动画持续 5 秒');
  const [chartConfig, setChartConfig] = useState(null);
  const [canvasConfig, setCanvasConfig] = useState(null);
  const [webglConfig, setWebglConfig] = useState(null);
  const [description, setDescription] = useState('');
  const chartRef = useRef<HTMLDivElement>(null);
  const canvasRef = useRef<HTMLCanvasElement>(null);
  const webglRef = useRef<HTMLDivElement>(null);
  const [loading, setLoading] = useState(false);

  useEffect(() => {
    const fetchConfigs = async () => {
      setLoading(true);
      try {
        const [chartRes, canvasRes, webglRes, analysisRes] = await Promise.all([
          axios.post('/api/generate-chart', { prompt: chartPrompt }),
          axios.post('/api/generate-canvas', { prompt: canvasPrompt }),
          axios.post('/api/generate-webgl', { prompt: webglPrompt }),
          axios.post('/api/analyze-chart', { data: chartConfig?.data }),
        ]);
        setChartConfig(chartRes.data.config);
        setCanvasConfig(canvasRes.data.config);
        setWebglConfig(webglRes.data.config);
        setDescription(analysisRes.data.description);
      } catch (error) {
        console.error('获取配置失败:', error);
      } finally {
        setLoading(false);
      }
    };
    fetchConfigs();
  }, [chartPrompt, canvasPrompt, webglPrompt]);

  useEffect(() => {
    if (canvasConfig && canvasRef.current) {
      const canvas = new fabric.Canvas(canvasRef.current);
      const objects = canvasConfig.objects.map((obj: any) => {
        if (obj.type === 'rect') return new fabric.Rect(obj.props);
        return null;
      }).filter(Boolean);
      canvas.add(...objects);
      canvasConfig.animations.forEach((anim: any) => {
        const target = objects.find((obj: any) => obj.id === anim.target);
        if (target) {
          target.animate(anim.property, anim.value, {
            duration: anim.duration,
            onChange: canvas.renderAll.bind(canvas),
            easing: fabric.util.ease[anim.easing],
          });
        }
      });
      return () => canvas.dispose();
    }
  }, [canvasConfig]);

  useEffect(() => {
    if (webglConfig && webglRef.current) {
      const scene = new THREE.Scene();
      scene.background = new THREE.Color(webglConfig.scene.background);
      const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
      camera.position.z = webglConfig.camera.z;
      const renderer = new THREE.WebGLRenderer();
      renderer.setSize(window.innerWidth, window.innerHeight);
      webglRef.current.appendChild(renderer.domElement);

      const objects = webglConfig.objects.map((obj: any) => {
        if (obj.type === 'cube') {
          const geometry = new THREE.BoxGeometry();
          const material = new THREE.MeshBasicMaterial({ color: obj.color });
          return new THREE.Mesh(geometry, material);
        }
        return null;
      }).filter(Boolean);
      scene.add(...objects);

      const animate = () => {
        requestAnimationFrame(animate);
        webglConfig.animations.forEach((anim: any) => {
          const target = objects.find((obj: any) => obj.id === anim.target);
          if (target) target.rotation[anim.property] += anim.speed;
        });
        renderer.render(scene, camera);
      };
      animate();

      return () => webglRef.current?.removeChild(renderer.domElement);
    }
  }, [webglConfig]);

  return (
    <div className="p-4">
      <div className="mb-4">
        <h2>图表配置</h2>
        <textarea
          className="w-full p-2 border rounded"
          value={chartPrompt}
          onChange={(e) => setChartPrompt(e.target.value)}
        />
      </div>
      <div className="mb-4">
        <h2>Canvas 动画</h2>
        <textarea
          className="w-full p-2 border rounded"
          value={canvasPrompt}
          onChange={(e) => setCanvasPrompt(e.target.value)}
        />
      </div>
      <div className="mb-4">
        <h2>WebGL 动画</h2>
        <textarea
          className="w-full p-2 border rounded"
          value={webglPrompt}
          onChange={(e) => setWebglPrompt(e.target.value)}
        />
      </div>
      {loading ? <p>生成中...</p> : (
        <>
          <div className="mb-4">
            <h2>销售数据图表</h2>
            {chartConfig && <Bar data={chartConfig.data} options={chartConfig.options} />}
            <p>{description}</p>
          </div>
          <div className="mb-4">
            <h2>Canvas 动画</h2>
            <canvas ref={canvasRef} width="800" height="400" className="border" />
          </div>
          <div>
            <h2>WebGL 动画</h2>
            <div ref={webglRef} />
          </div>
        </>
      )}
    </div>
  );
};

export default App;

7. 性能优化与最佳实践

7.1 性能优化

缓存配置：将 AI 生成的图表和动画配置缓存到本地或 Redis，减少重复生成。
流式响应：使用 OpenAI 的流式 API 实时返回配置，降低用户等待时间。
懒加载：对 Chart.js、Fabric.js 和 Three.js 使用动态导入，减少初始加载时间。
优化渲染：限制 Canvas 和 WebGL 的帧率（如 30fps），降低 CPU/GPU 消耗。

7.2 最佳实践

清晰提示：使用具体、结构化的提示，如“生成一个柱状图，包含 12 个月数据，蓝色主题，带动画”。
数据验证：在前端和后端验证 AI 生成的配置，防止无效 JSON 或错误参数。
用户反馈：提供加载动画和错误提示，优化用户体验。
监控成本：设置 OpenAI API 预算限制，避免意外费用。

7.3 安全考虑

API 密钥保护：通过后端代理隐藏 OpenAI API 密钥。
输入过滤：对用户提示进行 sanitization，防止注入攻击。
数据隐私：避免将敏感数据发送到 AI 模型，遵守 GDPR 等法规。

8. 未来趋势

8.1 客户端侧推理

随着 WebAssembly 的发展，AI 模型可能在浏览器中运行，生成图表配置和动画参数，减少对云端 API 的依赖。

8.2 实时交互

AI 可实时调整图表和动画参数，根据用户交互（如拖拽、缩放）动态更新可视化效果。

8.3 多模态可视化

结合文本、语音和图像输入，生成更复杂的可视化场景，如基于语音描述生成 3D 动画。

8.4 集成低代码平台

AI 可与低代码平台（如 Webflow）结合，允许非技术用户通过自然语言创建交互式仪表盘。

9. 结论

AI 与 Canvas/WebGL 的结合为前端开发者提供了强大的工具，可以通过自然语言生成复杂的图表、动画和 3D 效果。本文详细讲解了如何使用 ECharts 和 Chart.js 生成图表配置，结合 Fabric.js 控制画布对象行为，通过 AI 分析图表数据并生成描述，以及利用 Three.js 生成 WebGL 渲染参数和动画效果。通过实战案例和性能优化建议，本文为开发者提供了一个系统性、可落地的指南。未来，随着客户端侧推理和多模态输入的发展，AI 驱动的可视化技术将在 Web 开发中发挥更大作用。本专栏的后续文章将探讨 AI 在前端自动化测试和实时数据分析中的应用，继续为开发者提供前沿技术和实战指导。