cfahlgren1's picture
cfahlgren1 HF staff
add contribution guide
f3219d4
|
raw
history blame
1.75 kB
metadata
title: Transformers.js Playground
emoji: πŸ›
colorFrom: indigo
colorTo: purple
sdk: docker
pinned: true
app_port: 3000

Transformers.js Playground

Transformers.js Playground

Contributing

Adding a demo is pretty straightforward. You can take a look at this PR as an example.

Example of Adding Page to Playground

Steps

1. Add Route

Add the page where the demo will go under the category it belongs in. You can create hooks, components, and types as needed.

Example

app
└── category
    └── [slug]
        └── generate-text
            └── llama-3.2
                └── page.tsx
image

2. Add demo to categories.tsx, this will allow it to show up on Categories Page

image
  {
    title: "Generate Text",
    slug: "generate-text",
    icon: Type,
    description: "Llama. Qwen. Enough said.",
    status: "Available",
    colorName: "blue",
    graphic: TextGenerationIcon,
    demos: [
      {
        title: "Llama 3.2",
        slug: "llama-3.2",
        component: Llama32Page,
        description: "Llama 3.2 in the browser. WebGPU FTW."
      }
    ]
  }

Getting Started

First, run the development server:

npm run dev
# or
yarn dev
# or
pnpm dev
# or
bun dev

Open http://localhost:3000 with your browser to see the result.