Tutorial code progresion

tutorial-1-blank.ts

/**
 * @license
 * Copyright 2024 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import { board } from "@google-labs/breadboard";

export default await board(({ text }) => {
  return { text };
}).serialize({
  title: "Tutorial",
  description: "Let's rebuild the Card Maker from scratch",
  version: "0.0.1",
});

tutorial-2-add-llm.ts

/**
 * @license
 * Copyright 2024 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import { board } from "@google-labs/breadboard";
import { gemini } from "@google-labs/gemini-kit";

export default await board(({ text }) => {
  const llm = gemini.text({
    $id: "llm",
    text,
  });
  return { text: llm.text };
}).serialize({
  title: "Tutorial",
  description: "Let's rebuild the Card Maker from scratch",
  version: "0.0.1",
});

tutorial-3-add-prompt-template.ts

/**
 * @license
 * Copyright 2024 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import { board } from "@google-labs/breadboard";
import { gemini } from "@google-labs/gemini-kit";
import { templates } from "@google-labs/template-kit";

export default await board(({ text }) => {
  const character = templates.promptTemplate({
    $id: "character",
    template: `You are an expert board game character developer.

    Read the description below and transform it into a mystical creature with unique abilities.

    Come up with a fun name for the creature.
    
    Write a story of the creature and how it came to be. Describe its unique abilities. Provide the list of attributes (Strength, Dexterity, Constitution, Intelligence, Wisdom, Charisma) and their scores as a bulleted list.

    Reply in valid Markdown format with the following headings: "NAME", "STORY", "ABILITIES", and "ATTRIBUTES".
    
    ## DESCRIPTION:
    {{description}}
    
    ## RESPONSE:
    `,
    description: text,
  });

  const llm = gemini.text({
    $id: "llm",
    text: character.text,
  });
  return { text: llm.text };
}).serialize({
  title: "Tutorial",
  description: "Let's rebuild the Card Maker from scratch",
  version: "0.0.1",
});

tutorial-4-add-code-node.ts

/**
 * @license
 * Copyright 2024 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import { board, code } from "@google-labs/breadboard";
import { gemini } from "@google-labs/gemini-kit";
import { templates } from "@google-labs/template-kit";

// A node type that generates a random letter.
const randomLetterMaker = code(() => {
  const letter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
  return { letter };
});

export default await board(({ text }) => {
  const firstLetter = randomLetterMaker({ $id: "firstLetter" });

  const character = templates.promptTemplate({
    $id: "character",
    template: `You are an expert board game character developer.

    Read the description below and transform it into a mystical creature with unique abilities.

    Come up with a fun name for the creature. The name must start with the letter "{{letter}}"
    
    Write a story of the creature and how it came to be. Describe its unique abilities. Provide the list of attributes (Strength, Dexterity, Constitution, Intelligence, Wisdom, Charisma) and their scores as a bulleted list.

    Reply in valid Markdown format with the following headings: "NAME", "STORY", "ABILITIES", and "ATTRIBUTES".
    
    ## DESCRIPTION:
    {{description}}
    
    ## RESPONSE:
    `,
    description: text,
    letter: firstLetter.letter,
  });

  const llm = gemini.text({
    $id: "llm",
    text: character.text,
  });
  return { text: llm.text };
}).serialize({
  title: "Tutorial",
  description: "Let's rebuild the Card Maker from scratch",
  version: "0.0.1",
});

tutorial-5-add-webcam-invocation.ts

/**
 * @license
 * Copyright 2024 Google LLC
 * SPDX-License-Identifier: Apache-2.0
 */

import { board, code } from "@google-labs/breadboard";
import { core } from "@google-labs/core-kit";
import { gemini } from "@google-labs/gemini-kit";
import { templates } from "@google-labs/template-kit";

// A URL of the Webcam board. We will invoke this board to get the picture to
// describe. The board source is located here:
// https://github.com/breadboard-ai/breadboard/blob/main/packages/breadboard-web/src/boards/webcam.ts
// Has these inputs:
// - `picture`: the picture from the webcam (image),
// - `prompt`: the prompt to use with the picture (string).
// Has these outputs:
// - `text`: the description of the picture.
const webcamBoard =
  "https://raw.githubusercontent.com/breadboard-ai/breadboard/5c3076a500f692c60bd5cfd0b25e92190f17c12e/packages/breadboard-web/public/graphs/webcam.json";

// A node type that generates a random letter.
const randomLetterMaker = code(() => {
  const letter = String.fromCharCode(65 + Math.floor(Math.random() * 26));
  return { letter };
});

export default await board(({ drawing }) => {
  // Tell the input that it's drawable.
  drawing
    .isImage()
    .title("Draw an object to transform into the mystical creature")
    .format("drawable"); // can also be "webcam".

  // Ask Gemini Pro Vision to describe the picture.
  const describePicture = core.invoke({
    $id: "describePicture",
    path: webcamBoard,
    picture: drawing,
    prompt:
      "Describe the pictured object or subject in the sketch above, provide a thorough list of details. No matter how simple the sketch is, try to come up with as many details as possible. Improvise if necessary.",
  });

  const firstLetter = randomLetterMaker({ $id: "firstLetter" });

  const character = templates.promptTemplate({
    $id: "character",
    template: `You are an expert board game character developer.

    Read the description below and transform it into a mystical creature with unique abilities.

    Come up with a fun name for the creature. The name must start with the letter "{{letter}}"
    
    Write a story of the creature and how it came to be. Describe its unique abilities. Provide the list of attributes (Strength, Dexterity, Constitution, Intelligence, Wisdom, Charisma) and their scores as a bulleted list.

    Reply in valid Markdown format with the following headings: "NAME", "STORY", "ABILITIES", and "ATTRIBUTES".
    
    ## DESCRIPTION:
    {{description}}
    
    ## RESPONSE:
    `,
    description: describePicture.text,
    letter: firstLetter.letter,
  });

  const llm = gemini.text({
    $id: "llm",
    text: character.text,
  });
  return { text: llm.text, description: describePicture.text };
}).serialize({
  title: "Tutorial",
  description: "Let's rebuild the Card Maker from scratch",
  version: "0.0.1",
});