Building a Fish Knowledge Quiz Bot and a Nostalgic Chess Game with Coze: Workflow, Database, and Node.js Image Generation

Background – To celebrate Children’s Day, the author decided to build two Coze applications: a fish‑knowledge quiz bot for kids and a nostalgic board‑game bot inspired by a childhood game where three players choose numbers (147, 258, 369) and move pieces based on the sum.

Function Demonstration – Screenshots show the fish‑knowledge bot answering user questions with both fun facts and professional information, generating a fish‑card, and supporting voice input/output on the Doubao app. The nostalgic game section displays the game board, start screen, number input, and victory animation.

Implementation – Fish Knowledge Quiz

In the workflow, two large‑model nodes are used: one with a prompt for entertaining facts and another for professional facts. The outputs are sent via a streaming message node so the user sees text immediately, followed by an image‑generation node that creates a fish illustration.

Image generation uses a “text‑to‑image” node, and the final card combines an image node with two text nodes, which are bound to the workflow’s response card.

Implementation – Nostalgic Chess Game

The bot’s logic involves a database (two tables: user position & previous computer move) and custom Node.js services for drawing the game map and generating animated GIFs.

Database

Two tables are defined: one stores user location and seat direction, the other stores the last number chosen by the computer player. The workflow accesses the database via built‑in nodes, and AI can be used to generate SQL if needed.

Node.js Canvas Drawing

Because Coze does not allow front‑end code, the author created a Node.js service using the canvas library to draw the map, rectangles, and lines. A minimal example draws a red rectangle:

const { createCanvas } = require('canvas');
const fs = require('fs');
const canvas = createCanvas(200, 200);
const ctx = canvas.getContext('2d');
// draw a red rectangle
ctx.fillStyle = 'red';
ctx.fillRect(10, 10, 50, 50);
const base64Data = canvas.toDataURL('image/png', 1).replace(/^data:image\/png;base64,/, "");
const bitmap = Buffer.from(base64Data, 'base64');
fs.writeFileSync(`demo.png`, bitmap);

A more complete drawMap function draws the board background, central rectangle, vertical/horizontal lines, and four lower lines, as shown in the source code snippet.

function drawMap(ctx) {
  // white background
  ctx.beginPath();
  ctx.fillStyle = '#FFFFFF';
  ctx.closePath();
  ctx.fillRect(0, 0, 400, 400);
  // central rectangle
  ctx.beginPath();
  ctx.strokeStyle = '#000000';
  ctx.closePath();
  ctx.strokeRect(150, 150, 100, 100);
  // vertical line
  ctx.beginPath();
  ctx.strokeStyle = '#000000';
  ctx.moveTo(200, 50);
  ctx.lineTo(200, 350);
  ctx.closePath();
  ctx.stroke();
  // horizontal line
  ctx.beginPath();
  ctx.strokeStyle = '#000000';
  ctx.moveTo(50, 200);
  ctx.lineTo(350, 200);
  ctx.closePath();
  ctx.stroke();
  // four lower lines
  ctx.beginPath();
  ctx.strokeStyle = '#000000';
  ctx.moveTo(180, 350);
  ctx.lineTo(220, 350);
  ctx.closePath();
  ctx.stroke();
  // ... (additional lines omitted for brevity)
}

Generating GIF Animations

To create an animated GIF, the author first renders a series of PNG frames using the canvas code, then combines them with the gm (GraphicsMagick) library. Installation commands:

brew install graphicsmagick
npm i gm

Frame generation loop (simplified):

for (let i = 0; i < instance; i += 1) {
  const canvas = createCanvas(400, 400);
  const ctx = canvas.getContext('2d');
  drawMap(ctx);
  data.forEach(item => {
    drawChess(ctx, item, 1, i);
  });
  // convert canvas to image file
  saveImg(canvas, i);
  imagePaths.push(`output${i}.png`);
}

GIF assembly function:

function saveGIF(imagePaths) {
  return new Promise((resolve) => {
    const gifPath = Date.now() + '.gif';
    const img = gm();
    imagePaths.forEach(image => {
      img.in('-page', '+0+0').in(image);
    });
    img.in('-loop', '0')
       .write(gifPath, function(err) {
         if (err) console.log(err);
         console.log('GIF animation generated successfully!');
         resolve(gifPath);
       });
  });
}

After generating the GIF, the file is uploaded to an OSS bucket and the image URL is attached to the Coze card for display.

Conclusion – With growing familiarity with Coze, the author encourages readers to explore the platform, create their own bots, and try the fish‑knowledge and nostalgic chess applications via the provided links.