[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6E3B2CNE047CT987QVC4Y90":3,"skill-same:01M6E3B2CNE047CT987QVC4Y90":104},{"skillNo":4,"name":5,"nameZh":6,"description":7,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":15,"licenseFileUrl":6,"sourceHtmlUrl":16,"categories":17,"keywords":23,"publishedAt":44,"linkOnly":45,"markdownContent":46,"markdownBody":47,"frontMatter":48,"refName":56,"commitSha":57,"skillDirectory":58,"forksCount":59,"repositoryHtmlUrl":60,"repositoryHomepageUrl":6,"ownerHtmlUrl":61,"ownerBlogUrl":6,"ownerDescription":62,"updatedAt":63,"install":64,"resources":77},"01M6E3B2CNE047CT987QVC4Y90","transformers-js",null,"Use Transformers.js to run state-of-the-art machine learning models directly in JavaScript\u002FTypeScript. Supports NLP (text classification, translation, summarization), computer vision (image classification, object detection), audio (speech recognition, audio classification), and multimodal tasks. Works in Node.js and browsers (with WebGPU\u002FWASM) using pre-trained models from Hugging Face Hub.","luokai0\u002Fai-agent-skills-by-luo-kai","luokai0","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F266954973?v=4","01M6E16VNT42JB8B3X3254QWJ7","luo kai","01M6E16VTFVP6S5XJF1V1MPV90",14,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F09-data-and-ai (by Luo Kai)\u002F09-huggingface\u002Fhf-transformers.js\u002FSKILL.md",[18],{"categoryNo":19,"categoryName":20,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000016","图像与多媒体","SCENARIO","使用场景",[24,25,26,27,28,29,30,31,32,33,34,35,36,37,38,39,40,41,42,43],"transformers js","Transformers","js","Audio","local","translation","Art","modules","node","text","access","image","Local Models","multimodal","browser","run","tasks","webgpu","support","typescript","2026-11-10 10:12:30",false,"---\nname: transformers-js\ndescription: Use Transformers.js to run state-of-the-art machine learning models directly in JavaScript\u002FTypeScript. Supports NLP (text classification, translation, summarization), computer vision (image classification, object detection), audio (speech recognition, audio classification), and multimodal tasks. Works in Node.js and browsers (with WebGPU\u002FWASM) using pre-trained models from Hugging Face Hub.\nlicense: Apache-2.0\nmetadata:\n  author: huggingface\n  version: \"3.8.1\"\n  category: machine-learning\n  repository: https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Ftransformers.js\ncompatibility: Requires Node.js 18+ or modern browser with ES modules support. WebGPU support requires compatible browser\u002Fenvironment. Internet access needed for downloading models from Hugging Face Hub (optional if using local models).\nauthor: luo-kai\n---\n\n# Transformers.js - Machine Learning for JavaScript\n\nTransformers.js enables running state-of-the-art machine learning models directly in JavaScript, both in browsers and Node.js environments, with no server required.\n\n## When to Use This Skill\n\nUse this skill when you need to:\n- Run ML models for text analysis, generation, or translation in JavaScript\n- Perform image classification, object detection, or segmentation\n- Implement speech recognition or audio processing\n- Build multimodal AI applications (text-to-image, image-to-text, etc.)\n- Run models client-side in the browser without a backend\n\n## Installation\n\n### NPM Installation\n```bash\nnpm install @huggingface\u002Ftransformers\n```\n\n### Browser Usage (CDN)\n```javascript\n\u003Cscript type=\"module\">\n  import { pipeline } from 'https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@huggingface\u002Ftransformers';\n\u003C\u002Fscript>\n```\n\n## Core Concepts\n\n### 1. Pipeline API\nThe pipeline API is the easiest way to use models. It groups together preprocessing, model inference, and postprocessing:\n\n```javascript\nimport { pipeline } from '@huggingface\u002Ftransformers';\n\n\u002F\u002F Create a pipeline for a specific task\nconst pipe = await pipeline('sentiment-analysis');\n\n\u002F\u002F Use the pipeline\nconst result = await pipe('I love transformers!');\n\u002F\u002F Output: [{ label: 'POSITIVE', score: 0.999817686 }]\n\n\u002F\u002F IMPORTANT: Always dispose when done to free memory\nawait classifier.dispose();\n```\n\n**⚠️ Memory Management:** All pipelines must be disposed with `pipe.dispose()` when finished to prevent memory leaks. See examples in [Code Examples](.\u002Freferences\u002FEXAMPLES.md) for cleanup patterns across different environments.\n\n### 2. Model Selection\nYou can specify a custom model as the second argument:\n\n```javascript\nconst pipe = await pipeline(\n  'sentiment-analysis',\n  'Xenova\u002Fbert-base-multilingual-uncased-sentiment'\n);\n```\n\n**Finding Models:**\n\nBrowse available Transformers.js models on Hugging Face Hub:\n- **All models**: https:\u002F\u002Fhuggingface.co\u002Fmodels?library=transformers.js&sort=trending\n- **By task**: Add `pipeline_tag` parameter\n  - Text generation: https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=text-generation&library=transformers.js&sort=trending\n  - Image classification: https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=image-classification&library=transformers.js&sort=trending\n  - Speech recognition: https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=automatic-speech-recognition&library=transformers.js&sort=trending\n\n**Tip:** Filter by task type, sort by trending\u002Fdownloads, and check model cards for performance metrics and usage examples.\n\n### 3. Device Selection\nChoose where to run the model:\n\n```javascript\n\u002F\u002F Run on CPU (default for WASM)\nconst pipe = await pipeline('sentiment-analysis', 'model-id');\n\n\u002F\u002F Run on GPU (WebGPU - experimental)\nconst pipe = await pipeline('sentiment-analysis', 'model-id', {\n  device: 'webgpu',\n});\n```\n\n### 4. Quantization Options\nControl model precision vs. performance:\n\n```javascript\n\u002F\u002F Use quantized model (faster, smaller)\nconst pipe = await pipeline('sentiment-analysis', 'model-id', {\n  dtype: 'q4',  \u002F\u002F Options: 'fp32', 'fp16', 'q8', 'q4'\n});\n```\n\n## Supported Tasks\n\n**Note:** All examples below show basic usage.\n\n### Natural Language Processing\n\n#### Text Classification\n```javascript\nconst classifier = await pipeline('text-classification');\nconst result = await classifier('This movie was amazing!');\n```\n\n#### Named Entity Recognition (NER)\n```javascript\nconst ner = await pipeline('token-classification');\nconst entities = await ner('My name is John and I live in New York.');\n```\n\n#### Question Answering\n```javascript\nconst qa = await pipeline('question-answering');\nconst answer = await qa({\n  question: 'What is the capital of France?',\n  context: 'Paris is the capital and largest city of France.'\n});\n```\n\n#### Text Generation\n```javascript\nconst generator = await pipeline('text-generation', 'onnx-community\u002Fgemma-3-270m-it-ONNX');\nconst text = await generator('Once upon a time', {\n  max_new_tokens: 100,\n  temperature: 0.7\n});\n```\n\n**For streaming and chat:** See **[Text Generation Guide](.\u002Freferences\u002FTEXT_GENERATION.md)** for:\n- Streaming token-by-token output with `TextStreamer`\n- Chat\u002Fconversation format with system\u002Fuser\u002Fassistant roles\n- Generation parameters (temperature, top_k, top_p)\n- Browser and Node.js examples\n- React components and API endpoints\n\n#### Translation\n```javascript\nconst translator = await pipeline('translation', 'Xenova\u002Fnllb-200-distilled-600M');\nconst output = await translator('Hello, how are you?', {\n  src_lang: 'eng_Latn',\n  tgt_lang: 'fra_Latn'\n});\n```\n\n#### Summarization\n```javascript\nconst summarizer = await pipeline('summarization');\nconst summary = await summarizer(longText, {\n  max_length: 100,\n  min_length: 30\n});\n```\n\n#### Zero-Shot Classification\n```javascript\nconst classifier = await pipeline('zero-shot-classification');\nconst result = await classifier('This is a story about sports.', ['politics', 'sports', 'technology']);\n```\n\n### Computer Vision\n\n#### Image Classification\n```javascript\nconst classifier = await pipeline('image-classification');\nconst result = await classifier('https:\u002F\u002Fexample.com\u002Fimage.jpg');\n\u002F\u002F Or with local file\nconst result = await classifier(imageUrl);\n```\n\n#### Object Detection\n```javascript\nconst detector = await pipeline('object-detection');\nconst objects = await detector('https:\u002F\u002Fexample.com\u002Fimage.jpg');\n\u002F\u002F Returns: [{ label: 'person', score: 0.95, box: { xmin, ymin, xmax, ymax } }, ...]\n```\n\n#### Image Segmentation\n```javascript\nconst segmenter = await pipeline('image-segmentation');\nconst segments = await segmenter('https:\u002F\u002Fexample.com\u002Fimage.jpg');\n```\n\n#### Depth Estimation\n```javascript\nconst depthEstimator = await pipeline('depth-estimation');\nconst depth = await depthEstimator('https:\u002F\u002Fexample.com\u002Fimage.jpg');\n```\n\n#### Zero-Shot Image Classification\n```javascript\nconst classifier = await pipeline('zero-shot-image-classification');\nconst result = await classifier('image.jpg', ['cat', 'dog', 'bird']);\n```\n\n### Audio Processing\n\n#### Automatic Speech Recognition\n```javascript\nconst transcriber = await pipeline('automatic-speech-recognition');\nconst result = await transcriber('audio.wav');\n\u002F\u002F Returns: { text: 'transcribed text here' }\n```\n\n#### Audio Classification\n```javascript\nconst classifier = await pipeline('audio-classification');\nconst result = await classifier('audio.wav');\n```\n\n#### Text-to-Speech\n```javascript\nconst synthesizer = await pipeline('text-to-speech', 'Xenova\u002Fspeecht5_tts');\nconst audio = await synthesizer('Hello, this is a test.', {\n  speaker_embeddings: speakerEmbeddings\n});\n```\n\n### Multimodal\n\n#### Image-to-Text (Image Captioning)\n```javascript\nconst captioner = await pipeline('image-to-text');\nconst caption = await captioner('image.jpg');\n```\n\n#### Document Question Answering\n```javascript\nconst docQA = await pipeline('document-question-answering');\nconst answer = await docQA('document-image.jpg', 'What is the total amount?');\n```\n\n#### Zero-Shot Object Detection\n```javascript\nconst detector = await pipeline('zero-shot-object-detection');\nconst objects = await detector('image.jpg', ['person', 'car', 'tree']);\n```\n\n### Feature Extraction (Embeddings)\n\n```javascript\nconst extractor = await pipeline('feature-extraction');\nconst embeddings = await extractor('This is a sentence to embed.');\n\u002F\u002F Returns: tensor of shape [1, sequence_length, hidden_size]\n\n\u002F\u002F For sentence embeddings (mean pooling)\nconst extractor = await pipeline('feature-extraction', 'onnx-community\u002Fall-MiniLM-L6-v2-ONNX');\nconst embeddings = await extractor('Text to embed', { pooling: 'mean', normalize: true });\n```\n\n## Finding and Choosing Models\n\n### Browsing the Hugging Face Hub\n\nDiscover compatible Transformers.js models on Hugging Face Hub:\n\n**Base URL (all models):**\n```\nhttps:\u002F\u002Fhuggingface.co\u002Fmodels?library=transformers.js&sort=trending\n```\n\n**Filter by task** using the `pipeline_tag` parameter:\n\n| Task | URL |\n|------|-----|\n| **Text Generation** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=text-generation&library=transformers.js&sort=trending |\n| **Text Classification** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=text-classification&library=transformers.js&sort=trending |\n| **Translation** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=translation&library=transformers.js&sort=trending |\n| **Summarization** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=summarization&library=transformers.js&sort=trending |\n| **Question Answering** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=question-answering&library=transformers.js&sort=trending |\n| **Image Classification** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=image-classification&library=transformers.js&sort=trending |\n| **Object Detection** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=object-detection&library=transformers.js&sort=trending |\n| **Image Segmentation** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=image-segmentation&library=transformers.js&sort=trending |\n| **Speech Recognition** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=automatic-speech-recognition&library=transformers.js&sort=trending |\n| **Audio Classification** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=audio-classification&library=transformers.js&sort=trending |\n| **Image-to-Text** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=image-to-text&library=transformers.js&sort=trending |\n| **Feature Extraction** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=feature-extraction&library=transformers.js&sort=trending |\n| **Zero-Shot Classification** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=zero-shot-classification&library=transformers.js&sort=trending |\n\n**Sort options:**\n- `&sort=trending` - Most popular recently\n- `&sort=downloads` - Most downloaded overall\n- `&sort=likes` - Most liked by community\n- `&sort=modified` - Recently updated\n\n### Choosing the Right Model\n\nConsider these factors when selecting a model:\n\n**1. Model Size**\n- **Small (\u003C 100MB)**: Fast, suitable for browsers, limited accuracy\n- **Medium (100MB - 500MB)**: Balanced performance, good for most use cases\n- **Large (> 500MB)**: High accuracy, slower, better for Node.js or powerful devices\n\n**2. Quantization**\nModels are often available in different quantization levels:\n- `fp32` - Full precision (largest, most accurate)\n- `fp16` - Half precision (smaller, still accurate)\n- `q8` - 8-bit quantized (much smaller, slight accuracy loss)\n- `q4` - 4-bit quantized (smallest, noticeable accuracy loss)\n\n**3. Task Compatibility**\nCheck the model card for:\n- Supported tasks (some models support multiple tasks)\n- Input\u002Foutput formats\n- Language support (multilingual vs. English-only)\n- License restrictions\n\n**4. Performance Metrics**\nModel cards typically show:\n- Accuracy scores\n- Benchmark results\n- Inference speed\n- Memory requirements\n\n### Example: Finding a Text Generation Model\n\n```javascript\n\u002F\u002F 1. Visit: https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=text-generation&library=transformers.js&sort=trending\n\n\u002F\u002F 2. Browse and select a model (e.g., onnx-community\u002Fgemma-3-270m-it-ONNX)\n\n\u002F\u002F 3. Check model card for:\n\u002F\u002F    - Model size: ~270M parameters\n\u002F\u002F    - Quantization: q4 available\n\u002F\u002F    - Language: English\n\u002F\u002F    - Use case: Instruction-following chat\n\n\u002F\u002F 4. Use the model:\nimport { pipeline } from '@huggingface\u002Ftransformers';\n\nconst generator = await pipeline(\n  'text-generation',\n  'onnx-community\u002Fgemma-3-270m-it-ONNX',\n  { dtype: 'q4' } \u002F\u002F Use quantized version for faster inference\n);\n\nconst output = await generator('Explain quantum computing in simple terms.', {\n  max_new_tokens: 100\n});\n\nawait generator.dispose();\n```\n\n### Tips for Model Selection\n\n1. **Start Small**: Test with a smaller model first, then upgrade if needed\n2. **Check ONNX Support**: Ensure the model has ONNX files (look for `onnx` folder in model repo)\n3. **Read Model Cards**: Model cards contain usage examples, limitations, and benchmarks\n4. **Test Locally**: Benchmark inference speed and memory usage in your environment\n5. **Community Models**: Look for models by `Xenova` (Transformers.js maintainer) or `onnx-community`\n6. **Version Pin**: Use specific git commits in production for stability:\n   ```javascript\n   const pipe = await pipeline('task', 'model-id', { revision: 'abc123' });\n   ```\n\n## Advanced Configuration\n\n### Environment Configuration (`env`)\n\nThe `env` object provides comprehensive control over Transformers.js execution, caching, and model loading.\n\n**Quick Overview:**\n\n```javascript\nimport { env } from '@huggingface\u002Ftransformers';\n\n\u002F\u002F View version\nconsole.log(env.version); \u002F\u002F e.g., '3.8.1'\n\n\u002F\u002F Common settings\nenv.allowRemoteModels = true;  \u002F\u002F Load from Hugging Face Hub\nenv.allowLocalModels = false;  \u002F\u002F Load from file system\nenv.localModelPath = '\u002Fmodels\u002F'; \u002F\u002F Local model directory\nenv.useFSCache = true;         \u002F\u002F Cache models on disk (Node.js)\nenv.useBrowserCache = true;    \u002F\u002F Cache models in browser\nenv.cacheDir = '.\u002F.cache';     \u002F\u002F Cache directory location\n```\n\n**Configuration Patterns:**\n\n```javascript\n\u002F\u002F Development: Fast iteration with remote models\nenv.allowRemoteModels = true;\nenv.useFSCache = true;\n\n\u002F\u002F Production: Local models only\nenv.allowRemoteModels = false;\nenv.allowLocalModels = true;\nenv.localModelPath = '\u002Fapp\u002Fmodels\u002F';\n\n\u002F\u002F Custom CDN\nenv.remoteHost = 'https:\u002F\u002Fcdn.example.com\u002Fmodels';\n\n\u002F\u002F Disable caching (testing)\nenv.useFSCache = false;\nenv.useBrowserCache = false;\n```\n\nFor complete documentation on all configuration options, caching strategies, cache management, pre-downloading models, and more, see:\n\n**→ [Configuration Reference](.\u002Freferences\u002FCONFIGURATION.md)**\n\n### Working with Tensors\n\n```javascript\nimport { AutoTokenizer, AutoModel } from '@huggingface\u002Ftransformers';\n\n\u002F\u002F Load tokenizer and model separately for more control\nconst tokenizer = await AutoTokenizer.from_pretrained('bert-base-uncased');\nconst model = await AutoModel.from_pretrained('bert-base-uncased');\n\n\u002F\u002F Tokenize input\nconst inputs = await tokenizer('Hello world!');\n\n\u002F\u002F Run model\nconst outputs = await model(inputs);\n```\n\n### Batch Processing\n\n```javascript\nconst classifier = await pipeline('sentiment-analysis');\n\n\u002F\u002F Process multiple texts\nconst results = await classifier([\n  'I love this!',\n  'This is terrible.',\n  'It was okay.'\n]);\n```\n\n## Browser-Specific Considerations\n\n### WebGPU Usage\nWebGPU provides GPU acceleration in browsers:\n\n```javascript\nconst pipe = await pipeline('text-generation', 'onnx-community\u002Fgemma-3-270m-it-ONNX', {\n  device: 'webgpu',\n  dtype: 'fp32'\n});\n```\n\n**Note**: WebGPU is experimental. Check browser compatibility and file issues if problems occur.\n\n### WASM Performance\nDefault browser execution uses WASM:\n\n```javascript\n\u002F\u002F Optimized for browsers with quantization\nconst pipe = await pipeline('sentiment-analysis', 'model-id', {\n  dtype: 'q8'  \u002F\u002F or 'q4' for even smaller size\n});\n```\n\n### Progress Tracking & Loading Indicators\n\nModels can be large (ranging from a few MB to several GB) and consist of multiple files. Track download progress by passing a callback to the `pipeline()` function:\n\n```javascript\nimport { pipeline } from '@huggingface\u002Ftransformers';\n\n\u002F\u002F Track progress for each file\nconst fileProgress = {};\n\nfunction onProgress(info) {\n  console.log(`${info.status}: ${info.file}`);\n  \n  if (info.status === 'progress') {\n    fileProgress[info.file] = info.progress;\n    console.log(`${info.file}: ${info.progress.toFixed(1)}%`);\n  }\n  \n  if (info.status === 'done') {\n    console.log(`✓ ${info.file} complete`);\n  }\n}\n\n\u002F\u002F Pass callback to pipeline\nconst classifier = await pipeline('sentiment-analysis', null, {\n  progress_callback: onProgress\n});\n```\n\n**Progress Info Properties:**\n\n```typescript\ninterface ProgressInfo {\n  status: 'initiate' | 'download' | 'progress' | 'done' | 'ready';\n  name: string;      \u002F\u002F Model id or path\n  file: string;      \u002F\u002F File being processed\n  progress?: number; \u002F\u002F Percentage (0-100, only for 'progress' status)\n  loaded?: number;   \u002F\u002F Bytes downloaded (only for 'progress' status)\n  total?: number;    \u002F\u002F Total bytes (only for 'progress' status)\n}\n```\n\nFor complete examples including browser UIs, React components, CLI progress bars, and retry logic, see:\n\n**→ [Pipeline Options - Progress Callback](.\u002Freferences\u002FPIPELINE_OPTIONS.md#progress-callback)**\n\n## Error Handling\n\n```javascript\ntry {\n  const pipe = await pipeline('sentiment-analysis', 'model-id');\n  const result = await pipe('text to analyze');\n} catch (error) {\n  if (error.message.includes('fetch')) {\n    console.error('Model download failed. Check internet connection.');\n  } else if (error.message.includes('ONNX')) {\n    console.error('Model execution failed. Check model compatibility.');\n  } else {\n    console.error('Unknown error:', error);\n  }\n}\n```\n\n## Performance Tips\n\n1. **Reuse Pipelines**: Create pipeline once, reuse for multiple inferences\n2. **Use Quantization**: Start with `q8` or `q4` for faster inference\n3. **Batch Processing**: Process multiple inputs together when possible\n4. **Cache Models**: Models are cached automatically (see **[Caching Reference](.\u002Freferences\u002FCACHE.md)** for details on browser Cache API, Node.js filesystem cache, and custom implementations)\n5. **WebGPU for Large Models**: Use WebGPU for models that benefit from GPU acceleration\n6. **Prune Context**: For text generation, limit `max_new_tokens` to avoid memory issues\n7. **Clean Up Resources**: Call `pipe.dispose()` when done to free memory\n\n## Memory Management\n\n**IMPORTANT:** Always call `pipe.dispose()` when finished to prevent memory leaks.\n\n```javascript\nconst pipe = await pipeline('sentiment-analysis');\nconst result = await pipe('Great product!');\nawait pipe.dispose();  \u002F\u002F ✓ Free memory (100MB - several GB per model)\n```\n\n**When to dispose:**\n- Application shutdown or component unmount\n- Before loading a different model\n- After batch processing in long-running apps\n\nModels consume significant memory and hold GPU\u002FCPU resources. Disposal is critical for browser memory limits and server stability.\n\nFor detailed patterns (React cleanup, servers, browser), see **[Code Examples](.\u002Freferences\u002FEXAMPLES.md)**\n\n## Troubleshooting\n\n### Model Not Found\n- Verify model exists on Hugging Face Hub\n- Check model name spelling\n- Ensure model has ONNX files (look for `onnx` folder in model repo)\n\n### Memory Issues\n- Use smaller models or quantized versions (`dtype: 'q4'`)\n- Reduce batch size\n- Limit sequence length with `max_length`\n\n### WebGPU Errors\n- Check browser compatibility (Chrome 113+, Edge 113+)\n- Try `dtype: 'fp16'` if `fp32` fails\n- Fall back to WASM if WebGPU unavailable\n\n## Reference Documentation\n\n### This Skill\n- **[Pipeline Options](.\u002Freferences\u002FPIPELINE_OPTIONS.md)** - Configure `pipeline()` with `progress_callback`, `device`, `dtype`, etc.\n- **[Configuration Reference](.\u002Freferences\u002FCONFIGURATION.md)** - Global `env` configuration for caching and model loading\n- **[Caching Reference](.\u002Freferences\u002FCACHE.md)** - Browser Cache API, Node.js filesystem cache, and custom cache implementations\n- **[Text Generation Guide](.\u002Freferences\u002FTEXT_GENERATION.md)** - Streaming, chat format, and generation parameters\n- **[Model Architectures](.\u002Freferences\u002FMODEL_ARCHITECTURES.md)** - Supported models and selection tips\n- **[Code Examples](.\u002Freferences\u002FEXAMPLES.md)** - Real-world implementations for different runtimes\n\n### Official Transformers.js\n- Official docs: https:\u002F\u002Fhuggingface.co\u002Fdocs\u002Ftransformers.js\n- API reference: https:\u002F\u002Fhuggingface.co\u002Fdocs\u002Ftransformers.js\u002Fapi\u002Fpipelines\n- Model hub: https:\u002F\u002Fhuggingface.co\u002Fmodels?library=transformers.js\n- GitHub: https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Ftransformers.js\n- Examples: https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Ftransformers.js\u002Ftree\u002Fmain\u002Fexamples\n\n## Best Practices\n\n1. **Always Dispose Pipelines**: Call `pipe.dispose()` when done - critical for preventing memory leaks\n2. **Start with Pipelines**: Use the pipeline API unless you need fine-grained control\n3. **Test Locally First**: Test models with small inputs before deploying\n4. **Monitor Model Sizes**: Be aware of model download sizes for web applications\n5. **Handle Loading States**: Show progress indicators for better UX\n6. **Version Pin**: Pin specific model versions for production stability\n7. **Error Boundaries**: Always wrap pipeline calls in try-catch blocks\n8. **Progressive Enhancement**: Provide fallbacks for unsupported browsers\n9. **Reuse Models**: Load once, use many times - don't recreate pipelines unnecessarily\n10. **Graceful Shutdown**: Dispose models on SIGTERM\u002FSIGINT in servers\n\n## Quick Reference: Task IDs\n\n| Task | Task ID |\n|------|---------|\n| Text classification | `text-classification` or `sentiment-analysis` |\n| Token classification | `token-classification` or `ner` |\n| Question answering | `question-answering` |\n| Fill mask | `fill-mask` |\n| Summarization | `summarization` |\n| Translation | `translation` |\n| Text generation | `text-generation` |\n| Text-to-text generation | `text2text-generation` |\n| Zero-shot classification | `zero-shot-classification` |\n| Image classification | `image-classification` |\n| Image segmentation | `image-segmentation` |\n| Object detection | `object-detection` |\n| Depth estimation | `depth-estimation` |\n| Image-to-image | `image-to-image` |\n| Zero-shot image classification | `zero-shot-image-classification` |\n| Zero-shot object detection | `zero-shot-object-detection` |\n| Automatic speech recognition | `automatic-speech-recognition` |\n| Audio classification | `audio-classification` |\n| Text-to-speech | `text-to-speech` or `text-to-audio` |\n| Image-to-text | `image-to-text` |\n| Document question answering | `document-question-answering` |\n| Feature extraction | `feature-extraction` |\n| Sentence similarity | `sentence-similarity` |\n\n---\n\nThis skill enables you to integrate state-of-the-art machine learning capabilities directly into JavaScript applications without requiring separate ML servers or Python environments.\n","# Transformers.js - Machine Learning for JavaScript\n\nTransformers.js enables running state-of-the-art machine learning models directly in JavaScript, both in browsers and Node.js environments, with no server required.\n\n## When to Use This Skill\n\nUse this skill when you need to:\n- Run ML models for text analysis, generation, or translation in JavaScript\n- Perform image classification, object detection, or segmentation\n- Implement speech recognition or audio processing\n- Build multimodal AI applications (text-to-image, image-to-text, etc.)\n- Run models client-side in the browser without a backend\n\n## Installation\n\n### NPM Installation\n```bash\nnpm install @huggingface\u002Ftransformers\n```\n\n### Browser Usage (CDN)\n```javascript\n\u003Cscript type=\"module\">\n  import { pipeline } from 'https:\u002F\u002Fcdn.jsdelivr.net\u002Fnpm\u002F@huggingface\u002Ftransformers';\n\u003C\u002Fscript>\n```\n\n## Core Concepts\n\n### 1. Pipeline API\nThe pipeline API is the easiest way to use models. It groups together preprocessing, model inference, and postprocessing:\n\n```javascript\nimport { pipeline } from '@huggingface\u002Ftransformers';\n\n\u002F\u002F Create a pipeline for a specific task\nconst pipe = await pipeline('sentiment-analysis');\n\n\u002F\u002F Use the pipeline\nconst result = await pipe('I love transformers!');\n\u002F\u002F Output: [{ label: 'POSITIVE', score: 0.999817686 }]\n\n\u002F\u002F IMPORTANT: Always dispose when done to free memory\nawait classifier.dispose();\n```\n\n**⚠️ Memory Management:** All pipelines must be disposed with `pipe.dispose()` when finished to prevent memory leaks. See examples in [Code Examples](.\u002Freferences\u002FEXAMPLES.md) for cleanup patterns across different environments.\n\n### 2. Model Selection\nYou can specify a custom model as the second argument:\n\n```javascript\nconst pipe = await pipeline(\n  'sentiment-analysis',\n  'Xenova\u002Fbert-base-multilingual-uncased-sentiment'\n);\n```\n\n**Finding Models:**\n\nBrowse available Transformers.js models on Hugging Face Hub:\n- **All models**: https:\u002F\u002Fhuggingface.co\u002Fmodels?library=transformers.js&sort=trending\n- **By task**: Add `pipeline_tag` parameter\n  - Text generation: https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=text-generation&library=transformers.js&sort=trending\n  - Image classification: https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=image-classification&library=transformers.js&sort=trending\n  - Speech recognition: https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=automatic-speech-recognition&library=transformers.js&sort=trending\n\n**Tip:** Filter by task type, sort by trending\u002Fdownloads, and check model cards for performance metrics and usage examples.\n\n### 3. Device Selection\nChoose where to run the model:\n\n```javascript\n\u002F\u002F Run on CPU (default for WASM)\nconst pipe = await pipeline('sentiment-analysis', 'model-id');\n\n\u002F\u002F Run on GPU (WebGPU - experimental)\nconst pipe = await pipeline('sentiment-analysis', 'model-id', {\n  device: 'webgpu',\n});\n```\n\n### 4. Quantization Options\nControl model precision vs. performance:\n\n```javascript\n\u002F\u002F Use quantized model (faster, smaller)\nconst pipe = await pipeline('sentiment-analysis', 'model-id', {\n  dtype: 'q4',  \u002F\u002F Options: 'fp32', 'fp16', 'q8', 'q4'\n});\n```\n\n## Supported Tasks\n\n**Note:** All examples below show basic usage.\n\n### Natural Language Processing\n\n#### Text Classification\n```javascript\nconst classifier = await pipeline('text-classification');\nconst result = await classifier('This movie was amazing!');\n```\n\n#### Named Entity Recognition (NER)\n```javascript\nconst ner = await pipeline('token-classification');\nconst entities = await ner('My name is John and I live in New York.');\n```\n\n#### Question Answering\n```javascript\nconst qa = await pipeline('question-answering');\nconst answer = await qa({\n  question: 'What is the capital of France?',\n  context: 'Paris is the capital and largest city of France.'\n});\n```\n\n#### Text Generation\n```javascript\nconst generator = await pipeline('text-generation', 'onnx-community\u002Fgemma-3-270m-it-ONNX');\nconst text = await generator('Once upon a time', {\n  max_new_tokens: 100,\n  temperature: 0.7\n});\n```\n\n**For streaming and chat:** See **[Text Generation Guide](.\u002Freferences\u002FTEXT_GENERATION.md)** for:\n- Streaming token-by-token output with `TextStreamer`\n- Chat\u002Fconversation format with system\u002Fuser\u002Fassistant roles\n- Generation parameters (temperature, top_k, top_p)\n- Browser and Node.js examples\n- React components and API endpoints\n\n#### Translation\n```javascript\nconst translator = await pipeline('translation', 'Xenova\u002Fnllb-200-distilled-600M');\nconst output = await translator('Hello, how are you?', {\n  src_lang: 'eng_Latn',\n  tgt_lang: 'fra_Latn'\n});\n```\n\n#### Summarization\n```javascript\nconst summarizer = await pipeline('summarization');\nconst summary = await summarizer(longText, {\n  max_length: 100,\n  min_length: 30\n});\n```\n\n#### Zero-Shot Classification\n```javascript\nconst classifier = await pipeline('zero-shot-classification');\nconst result = await classifier('This is a story about sports.', ['politics', 'sports', 'technology']);\n```\n\n### Computer Vision\n\n#### Image Classification\n```javascript\nconst classifier = await pipeline('image-classification');\nconst result = await classifier('https:\u002F\u002Fexample.com\u002Fimage.jpg');\n\u002F\u002F Or with local file\nconst result = await classifier(imageUrl);\n```\n\n#### Object Detection\n```javascript\nconst detector = await pipeline('object-detection');\nconst objects = await detector('https:\u002F\u002Fexample.com\u002Fimage.jpg');\n\u002F\u002F Returns: [{ label: 'person', score: 0.95, box: { xmin, ymin, xmax, ymax } }, ...]\n```\n\n#### Image Segmentation\n```javascript\nconst segmenter = await pipeline('image-segmentation');\nconst segments = await segmenter('https:\u002F\u002Fexample.com\u002Fimage.jpg');\n```\n\n#### Depth Estimation\n```javascript\nconst depthEstimator = await pipeline('depth-estimation');\nconst depth = await depthEstimator('https:\u002F\u002Fexample.com\u002Fimage.jpg');\n```\n\n#### Zero-Shot Image Classification\n```javascript\nconst classifier = await pipeline('zero-shot-image-classification');\nconst result = await classifier('image.jpg', ['cat', 'dog', 'bird']);\n```\n\n### Audio Processing\n\n#### Automatic Speech Recognition\n```javascript\nconst transcriber = await pipeline('automatic-speech-recognition');\nconst result = await transcriber('audio.wav');\n\u002F\u002F Returns: { text: 'transcribed text here' }\n```\n\n#### Audio Classification\n```javascript\nconst classifier = await pipeline('audio-classification');\nconst result = await classifier('audio.wav');\n```\n\n#### Text-to-Speech\n```javascript\nconst synthesizer = await pipeline('text-to-speech', 'Xenova\u002Fspeecht5_tts');\nconst audio = await synthesizer('Hello, this is a test.', {\n  speaker_embeddings: speakerEmbeddings\n});\n```\n\n### Multimodal\n\n#### Image-to-Text (Image Captioning)\n```javascript\nconst captioner = await pipeline('image-to-text');\nconst caption = await captioner('image.jpg');\n```\n\n#### Document Question Answering\n```javascript\nconst docQA = await pipeline('document-question-answering');\nconst answer = await docQA('document-image.jpg', 'What is the total amount?');\n```\n\n#### Zero-Shot Object Detection\n```javascript\nconst detector = await pipeline('zero-shot-object-detection');\nconst objects = await detector('image.jpg', ['person', 'car', 'tree']);\n```\n\n### Feature Extraction (Embeddings)\n\n```javascript\nconst extractor = await pipeline('feature-extraction');\nconst embeddings = await extractor('This is a sentence to embed.');\n\u002F\u002F Returns: tensor of shape [1, sequence_length, hidden_size]\n\n\u002F\u002F For sentence embeddings (mean pooling)\nconst extractor = await pipeline('feature-extraction', 'onnx-community\u002Fall-MiniLM-L6-v2-ONNX');\nconst embeddings = await extractor('Text to embed', { pooling: 'mean', normalize: true });\n```\n\n## Finding and Choosing Models\n\n### Browsing the Hugging Face Hub\n\nDiscover compatible Transformers.js models on Hugging Face Hub:\n\n**Base URL (all models):**\n```\nhttps:\u002F\u002Fhuggingface.co\u002Fmodels?library=transformers.js&sort=trending\n```\n\n**Filter by task** using the `pipeline_tag` parameter:\n\n| Task | URL |\n|------|-----|\n| **Text Generation** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=text-generation&library=transformers.js&sort=trending |\n| **Text Classification** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=text-classification&library=transformers.js&sort=trending |\n| **Translation** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=translation&library=transformers.js&sort=trending |\n| **Summarization** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=summarization&library=transformers.js&sort=trending |\n| **Question Answering** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=question-answering&library=transformers.js&sort=trending |\n| **Image Classification** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=image-classification&library=transformers.js&sort=trending |\n| **Object Detection** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=object-detection&library=transformers.js&sort=trending |\n| **Image Segmentation** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=image-segmentation&library=transformers.js&sort=trending |\n| **Speech Recognition** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=automatic-speech-recognition&library=transformers.js&sort=trending |\n| **Audio Classification** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=audio-classification&library=transformers.js&sort=trending |\n| **Image-to-Text** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=image-to-text&library=transformers.js&sort=trending |\n| **Feature Extraction** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=feature-extraction&library=transformers.js&sort=trending |\n| **Zero-Shot Classification** | https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=zero-shot-classification&library=transformers.js&sort=trending |\n\n**Sort options:**\n- `&sort=trending` - Most popular recently\n- `&sort=downloads` - Most downloaded overall\n- `&sort=likes` - Most liked by community\n- `&sort=modified` - Recently updated\n\n### Choosing the Right Model\n\nConsider these factors when selecting a model:\n\n**1. Model Size**\n- **Small (\u003C 100MB)**: Fast, suitable for browsers, limited accuracy\n- **Medium (100MB - 500MB)**: Balanced performance, good for most use cases\n- **Large (> 500MB)**: High accuracy, slower, better for Node.js or powerful devices\n\n**2. Quantization**\nModels are often available in different quantization levels:\n- `fp32` - Full precision (largest, most accurate)\n- `fp16` - Half precision (smaller, still accurate)\n- `q8` - 8-bit quantized (much smaller, slight accuracy loss)\n- `q4` - 4-bit quantized (smallest, noticeable accuracy loss)\n\n**3. Task Compatibility**\nCheck the model card for:\n- Supported tasks (some models support multiple tasks)\n- Input\u002Foutput formats\n- Language support (multilingual vs. English-only)\n- License restrictions\n\n**4. Performance Metrics**\nModel cards typically show:\n- Accuracy scores\n- Benchmark results\n- Inference speed\n- Memory requirements\n\n### Example: Finding a Text Generation Model\n\n```javascript\n\u002F\u002F 1. Visit: https:\u002F\u002Fhuggingface.co\u002Fmodels?pipeline_tag=text-generation&library=transformers.js&sort=trending\n\n\u002F\u002F 2. Browse and select a model (e.g., onnx-community\u002Fgemma-3-270m-it-ONNX)\n\n\u002F\u002F 3. Check model card for:\n\u002F\u002F    - Model size: ~270M parameters\n\u002F\u002F    - Quantization: q4 available\n\u002F\u002F    - Language: English\n\u002F\u002F    - Use case: Instruction-following chat\n\n\u002F\u002F 4. Use the model:\nimport { pipeline } from '@huggingface\u002Ftransformers';\n\nconst generator = await pipeline(\n  'text-generation',\n  'onnx-community\u002Fgemma-3-270m-it-ONNX',\n  { dtype: 'q4' } \u002F\u002F Use quantized version for faster inference\n);\n\nconst output = await generator('Explain quantum computing in simple terms.', {\n  max_new_tokens: 100\n});\n\nawait generator.dispose();\n```\n\n### Tips for Model Selection\n\n1. **Start Small**: Test with a smaller model first, then upgrade if needed\n2. **Check ONNX Support**: Ensure the model has ONNX files (look for `onnx` folder in model repo)\n3. **Read Model Cards**: Model cards contain usage examples, limitations, and benchmarks\n4. **Test Locally**: Benchmark inference speed and memory usage in your environment\n5. **Community Models**: Look for models by `Xenova` (Transformers.js maintainer) or `onnx-community`\n6. **Version Pin**: Use specific git commits in production for stability:\n   ```javascript\n   const pipe = await pipeline('task', 'model-id', { revision: 'abc123' });\n   ```\n\n## Advanced Configuration\n\n### Environment Configuration (`env`)\n\nThe `env` object provides comprehensive control over Transformers.js execution, caching, and model loading.\n\n**Quick Overview:**\n\n```javascript\nimport { env } from '@huggingface\u002Ftransformers';\n\n\u002F\u002F View version\nconsole.log(env.version); \u002F\u002F e.g., '3.8.1'\n\n\u002F\u002F Common settings\nenv.allowRemoteModels = true;  \u002F\u002F Load from Hugging Face Hub\nenv.allowLocalModels = false;  \u002F\u002F Load from file system\nenv.localModelPath = '\u002Fmodels\u002F'; \u002F\u002F Local model directory\nenv.useFSCache = true;         \u002F\u002F Cache models on disk (Node.js)\nenv.useBrowserCache = true;    \u002F\u002F Cache models in browser\nenv.cacheDir = '.\u002F.cache';     \u002F\u002F Cache directory location\n```\n\n**Configuration Patterns:**\n\n```javascript\n\u002F\u002F Development: Fast iteration with remote models\nenv.allowRemoteModels = true;\nenv.useFSCache = true;\n\n\u002F\u002F Production: Local models only\nenv.allowRemoteModels = false;\nenv.allowLocalModels = true;\nenv.localModelPath = '\u002Fapp\u002Fmodels\u002F';\n\n\u002F\u002F Custom CDN\nenv.remoteHost = 'https:\u002F\u002Fcdn.example.com\u002Fmodels';\n\n\u002F\u002F Disable caching (testing)\nenv.useFSCache = false;\nenv.useBrowserCache = false;\n```\n\nFor complete documentation on all configuration options, caching strategies, cache management, pre-downloading models, and more, see:\n\n**→ [Configuration Reference](.\u002Freferences\u002FCONFIGURATION.md)**\n\n### Working with Tensors\n\n```javascript\nimport { AutoTokenizer, AutoModel } from '@huggingface\u002Ftransformers';\n\n\u002F\u002F Load tokenizer and model separately for more control\nconst tokenizer = await AutoTokenizer.from_pretrained('bert-base-uncased');\nconst model = await AutoModel.from_pretrained('bert-base-uncased');\n\n\u002F\u002F Tokenize input\nconst inputs = await tokenizer('Hello world!');\n\n\u002F\u002F Run model\nconst outputs = await model(inputs);\n```\n\n### Batch Processing\n\n```javascript\nconst classifier = await pipeline('sentiment-analysis');\n\n\u002F\u002F Process multiple texts\nconst results = await classifier([\n  'I love this!',\n  'This is terrible.',\n  'It was okay.'\n]);\n```\n\n## Browser-Specific Considerations\n\n### WebGPU Usage\nWebGPU provides GPU acceleration in browsers:\n\n```javascript\nconst pipe = await pipeline('text-generation', 'onnx-community\u002Fgemma-3-270m-it-ONNX', {\n  device: 'webgpu',\n  dtype: 'fp32'\n});\n```\n\n**Note**: WebGPU is experimental. Check browser compatibility and file issues if problems occur.\n\n### WASM Performance\nDefault browser execution uses WASM:\n\n```javascript\n\u002F\u002F Optimized for browsers with quantization\nconst pipe = await pipeline('sentiment-analysis', 'model-id', {\n  dtype: 'q8'  \u002F\u002F or 'q4' for even smaller size\n});\n```\n\n### Progress Tracking & Loading Indicators\n\nModels can be large (ranging from a few MB to several GB) and consist of multiple files. Track download progress by passing a callback to the `pipeline()` function:\n\n```javascript\nimport { pipeline } from '@huggingface\u002Ftransformers';\n\n\u002F\u002F Track progress for each file\nconst fileProgress = {};\n\nfunction onProgress(info) {\n  console.log(`${info.status}: ${info.file}`);\n  \n  if (info.status === 'progress') {\n    fileProgress[info.file] = info.progress;\n    console.log(`${info.file}: ${info.progress.toFixed(1)}%`);\n  }\n  \n  if (info.status === 'done') {\n    console.log(`✓ ${info.file} complete`);\n  }\n}\n\n\u002F\u002F Pass callback to pipeline\nconst classifier = await pipeline('sentiment-analysis', null, {\n  progress_callback: onProgress\n});\n```\n\n**Progress Info Properties:**\n\n```typescript\ninterface ProgressInfo {\n  status: 'initiate' | 'download' | 'progress' | 'done' | 'ready';\n  name: string;      \u002F\u002F Model id or path\n  file: string;      \u002F\u002F File being processed\n  progress?: number; \u002F\u002F Percentage (0-100, only for 'progress' status)\n  loaded?: number;   \u002F\u002F Bytes downloaded (only for 'progress' status)\n  total?: number;    \u002F\u002F Total bytes (only for 'progress' status)\n}\n```\n\nFor complete examples including browser UIs, React components, CLI progress bars, and retry logic, see:\n\n**→ [Pipeline Options - Progress Callback](.\u002Freferences\u002FPIPELINE_OPTIONS.md#progress-callback)**\n\n## Error Handling\n\n```javascript\ntry {\n  const pipe = await pipeline('sentiment-analysis', 'model-id');\n  const result = await pipe('text to analyze');\n} catch (error) {\n  if (error.message.includes('fetch')) {\n    console.error('Model download failed. Check internet connection.');\n  } else if (error.message.includes('ONNX')) {\n    console.error('Model execution failed. Check model compatibility.');\n  } else {\n    console.error('Unknown error:', error);\n  }\n}\n```\n\n## Performance Tips\n\n1. **Reuse Pipelines**: Create pipeline once, reuse for multiple inferences\n2. **Use Quantization**: Start with `q8` or `q4` for faster inference\n3. **Batch Processing**: Process multiple inputs together when possible\n4. **Cache Models**: Models are cached automatically (see **[Caching Reference](.\u002Freferences\u002FCACHE.md)** for details on browser Cache API, Node.js filesystem cache, and custom implementations)\n5. **WebGPU for Large Models**: Use WebGPU for models that benefit from GPU acceleration\n6. **Prune Context**: For text generation, limit `max_new_tokens` to avoid memory issues\n7. **Clean Up Resources**: Call `pipe.dispose()` when done to free memory\n\n## Memory Management\n\n**IMPORTANT:** Always call `pipe.dispose()` when finished to prevent memory leaks.\n\n```javascript\nconst pipe = await pipeline('sentiment-analysis');\nconst result = await pipe('Great product!');\nawait pipe.dispose();  \u002F\u002F ✓ Free memory (100MB - several GB per model)\n```\n\n**When to dispose:**\n- Application shutdown or component unmount\n- Before loading a different model\n- After batch processing in long-running apps\n\nModels consume significant memory and hold GPU\u002FCPU resources. Disposal is critical for browser memory limits and server stability.\n\nFor detailed patterns (React cleanup, servers, browser), see **[Code Examples](.\u002Freferences\u002FEXAMPLES.md)**\n\n## Troubleshooting\n\n### Model Not Found\n- Verify model exists on Hugging Face Hub\n- Check model name spelling\n- Ensure model has ONNX files (look for `onnx` folder in model repo)\n\n### Memory Issues\n- Use smaller models or quantized versions (`dtype: 'q4'`)\n- Reduce batch size\n- Limit sequence length with `max_length`\n\n### WebGPU Errors\n- Check browser compatibility (Chrome 113+, Edge 113+)\n- Try `dtype: 'fp16'` if `fp32` fails\n- Fall back to WASM if WebGPU unavailable\n\n## Reference Documentation\n\n### This Skill\n- **[Pipeline Options](.\u002Freferences\u002FPIPELINE_OPTIONS.md)** - Configure `pipeline()` with `progress_callback`, `device`, `dtype`, etc.\n- **[Configuration Reference](.\u002Freferences\u002FCONFIGURATION.md)** - Global `env` configuration for caching and model loading\n- **[Caching Reference](.\u002Freferences\u002FCACHE.md)** - Browser Cache API, Node.js filesystem cache, and custom cache implementations\n- **[Text Generation Guide](.\u002Freferences\u002FTEXT_GENERATION.md)** - Streaming, chat format, and generation parameters\n- **[Model Architectures](.\u002Freferences\u002FMODEL_ARCHITECTURES.md)** - Supported models and selection tips\n- **[Code Examples](.\u002Freferences\u002FEXAMPLES.md)** - Real-world implementations for different runtimes\n\n### Official Transformers.js\n- Official docs: https:\u002F\u002Fhuggingface.co\u002Fdocs\u002Ftransformers.js\n- API reference: https:\u002F\u002Fhuggingface.co\u002Fdocs\u002Ftransformers.js\u002Fapi\u002Fpipelines\n- Model hub: https:\u002F\u002Fhuggingface.co\u002Fmodels?library=transformers.js\n- GitHub: https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Ftransformers.js\n- Examples: https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Ftransformers.js\u002Ftree\u002Fmain\u002Fexamples\n\n## Best Practices\n\n1. **Always Dispose Pipelines**: Call `pipe.dispose()` when done - critical for preventing memory leaks\n2. **Start with Pipelines**: Use the pipeline API unless you need fine-grained control\n3. **Test Locally First**: Test models with small inputs before deploying\n4. **Monitor Model Sizes**: Be aware of model download sizes for web applications\n5. **Handle Loading States**: Show progress indicators for better UX\n6. **Version Pin**: Pin specific model versions for production stability\n7. **Error Boundaries**: Always wrap pipeline calls in try-catch blocks\n8. **Progressive Enhancement**: Provide fallbacks for unsupported browsers\n9. **Reuse Models**: Load once, use many times - don't recreate pipelines unnecessarily\n10. **Graceful Shutdown**: Dispose models on SIGTERM\u002FSIGINT in servers\n\n## Quick Reference: Task IDs\n\n| Task | Task ID |\n|------|---------|\n| Text classification | `text-classification` or `sentiment-analysis` |\n| Token classification | `token-classification` or `ner` |\n| Question answering | `question-answering` |\n| Fill mask | `fill-mask` |\n| Summarization | `summarization` |\n| Translation | `translation` |\n| Text generation | `text-generation` |\n| Text-to-text generation | `text2text-generation` |\n| Zero-shot classification | `zero-shot-classification` |\n| Image classification | `image-classification` |\n| Image segmentation | `image-segmentation` |\n| Object detection | `object-detection` |\n| Depth estimation | `depth-estimation` |\n| Image-to-image | `image-to-image` |\n| Zero-shot image classification | `zero-shot-image-classification` |\n| Zero-shot object detection | `zero-shot-object-detection` |\n| Automatic speech recognition | `automatic-speech-recognition` |\n| Audio classification | `audio-classification` |\n| Text-to-speech | `text-to-speech` or `text-to-audio` |\n| Image-to-text | `image-to-text` |\n| Document question answering | `document-question-answering` |\n| Feature extraction | `feature-extraction` |\n| Sentence similarity | `sentence-similarity` |\n\n---\n\nThis skill enables you to integrate state-of-the-art machine learning capabilities directly into JavaScript applications without requiring separate ML servers or Python environments.\n",{"name":5,"author":49,"license":15,"metadata":50,"description":7,"compatibility":55},"luo-kai",{"author":51,"version":52,"category":53,"repository":54},"huggingface","3.8.1","machine-learning","https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Ftransformers.js","Requires Node.js 18+ or modern browser with ES modules support. WebGPU support requires compatible browser\u002Fenvironment. Internet access needed for downloading models from Hugging Face Hub (optional if using local models).","main","4d2fb89cdfb75f3f6fd3c6c5ec9ad90ea129eb3c","ai-agent-skills\u002F09-data-and-ai (by Luo Kai)\u002F09-huggingface\u002Fhf-transformers.js",1,"https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai","https:\u002F\u002Fgithub.com\u002Fluokai0","a solo builder.","2026-05-06 04:29:04",{"source":8,"skillName":5,"commands":65,"prompt":75,"zipAvailable":76},[66,69,72],{"tool":67,"command":68},"npx","npx skills add luokai0\u002Fai-agent-skills-by-luo-kai --skill transformers-js",{"tool":70,"command":71},"bunx","bunx skills add luokai0\u002Fai-agent-skills-by-luo-kai --skill transformers-js",{"tool":73,"command":74},"pnpm","pnpm dlx skills add luokai0\u002Fai-agent-skills-by-luo-kai --skill transformers-js","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F09-data-and-ai (by Luo Kai)\u002F09-huggingface\u002Fhf-transformers.js\u002FSKILL.md",true,[78,84,88,92,96,100],{"path":79,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":82,"sourceHtmlUrl":83},"references\u002FCACHE.md","REFERENCE","参考文档",9195,"https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F09-data-and-ai (by Luo Kai)\u002F09-huggingface\u002Fhf-transformers.js\u002Freferences\u002FCACHE.md",{"path":85,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":86,"sourceHtmlUrl":87},"references\u002FCONFIGURATION.md",9861,"https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F09-data-and-ai (by Luo Kai)\u002F09-huggingface\u002Fhf-transformers.js\u002Freferences\u002FCONFIGURATION.md",{"path":89,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":90,"sourceHtmlUrl":91},"references\u002FEXAMPLES.md",15196,"https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F09-data-and-ai (by Luo Kai)\u002F09-huggingface\u002Fhf-transformers.js\u002Freferences\u002FEXAMPLES.md",{"path":93,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":94,"sourceHtmlUrl":95},"references\u002FMODEL_ARCHITECTURES.md",5590,"https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F09-data-and-ai (by Luo Kai)\u002F09-huggingface\u002Fhf-transformers.js\u002Freferences\u002FMODEL_ARCHITECTURES.md",{"path":97,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":98,"sourceHtmlUrl":99},"references\u002FPIPELINE_OPTIONS.md",14539,"https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F09-data-and-ai (by Luo Kai)\u002F09-huggingface\u002Fhf-transformers.js\u002Freferences\u002FPIPELINE_OPTIONS.md",{"path":101,"resourceType":80,"resourceTypeDesc":81,"sizeBytes":102,"sourceHtmlUrl":103},"references\u002FTEXT_GENERATION.md",7880,"https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F09-data-and-ai (by Luo Kai)\u002F09-huggingface\u002Fhf-transformers.js\u002Freferences\u002FTEXT_GENERATION.md",[105,133,150,177,209,245],{"skillNo":106,"name":107,"nameZh":6,"description":108,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":109,"licenseFileUrl":6,"sourceHtmlUrl":110,"categories":111,"keywords":112,"publishedAt":44},"01M6F2SKTE208174C7S7JJCZC7","write-contracts","Generates secure Aptos Move V2 smart contracts with Object model, Digital Asset integration, security patterns, and storage type guidance. Includes comprehensive storage decision framework for optimal data structure selection. Triggers on: 'write contract', 'create NFT collection', 'build marketplace', 'implement minting', 'generate Move module', 'create token contract', 'build DAO', 'implement staking'. Ask storage questions when: 'store', 'track', 'registry', 'mapping', 'list', 'collection'.","MIT","https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F22-clawhub-skills\u002Fwrite-contracts\u002FSKILL.md",[],[113,114,115,116,117,118,119,120,121,122,123,124,125,126,127,128,129,130,131,132],"write","contracts","write contracts","storage","secure","create","generate","collection","model","decision","ask","smart-contracts","selection","objects","structure","nft","token","aptos","critical","move",{"skillNo":134,"name":135,"nameZh":6,"description":136,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":109,"licenseFileUrl":6,"sourceHtmlUrl":137,"categories":138,"keywords":139,"publishedAt":44},"01M6F2RFXJ6T9MKW0A7N7GM45B","web-search","通用网络搜索技能，支持多引擎搜索（百度、必应、DuckDuckGo），无需API密钥即可获取实时信息","https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F22-clawhub-skills\u002Fweb-search-ex-skill\u002FSKILL.md",[],[140,141,142,143,144,145,146,147,148,149],"web","search","web search","搜索","baidu","bing","duckduckgo","百度","多引擎","internet",{"skillNo":151,"name":152,"nameZh":6,"description":153,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":109,"licenseFileUrl":6,"sourceHtmlUrl":154,"categories":155,"keywords":159,"publishedAt":44},"01M6F2K968G1FZEZFPW2E6B222","solo-build","Execute implementation plan tasks with TDD workflow, auto-commit, and phase gates. Use when user says \"build it\", \"start building\", \"execute plan\", \"implement tasks\", \"ship it\", or references a track ID. Do NOT use for planning (use \u002Fplan) or scaffolding (use \u002Fscaffold).","https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F22-clawhub-skills\u002Fsolo-build\u002FSKILL.md",[156],{"categoryNo":157,"categoryName":158,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000023","Skill与智能体开发",[160,161,162,163,164,165,40,166,141,167,168,169,113,170,171,172,173,174,175,176],"build","solo","solo build","MCP","workflow","commit","code","Bash","plan","read","auto","references","context7","query","scaffolding","ship it","project",{"skillNo":178,"name":179,"nameZh":6,"description":180,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":109,"licenseFileUrl":6,"sourceHtmlUrl":181,"categories":182,"keywords":189,"publishedAt":44},"01M6F2GKN39SGHSPWYB3662YC8","react-email","Use when building HTML email templates with React components, adding a visual email editor to an application using the React Email visual editor, rendering emails to HTML, or sending emails with Resend. Covers welcome emails, password resets, notifications, order confirmations, newsletters, transactional emails, and the embeddable email editor component.","https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F22-clawhub-skills\u002Freact-email-skills\u002FSKILL.md",[183,186],{"categoryNo":184,"categoryName":185,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000005","邮件与沟通",{"categoryNo":187,"categoryName":188,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000009","前端开发",[190,191,192,193,194,195,196,197,198,199,200,201,32,202,203,204,205,206,207,208],"react","email","react email","github","editor","components","react components","component","welcome","https","notifications","password","use","html","resend","visual","emails","rendering","with",{"skillNo":210,"name":211,"nameZh":6,"description":212,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":109,"licenseFileUrl":6,"sourceHtmlUrl":213,"categories":214,"keywords":227,"publishedAt":44},"01M6F2FBVGVDFSG8SSFJGXA40C","APITester Agent-Driven API Testing","Test API endpoints and document responses. Define tests in plain English, run them, get formatted results. Agent-driven Postman alternative.","https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F22-clawhub-skills\u002Fopenclaw-api-tester\u002FSKILL.md",[215,218,221,222],{"categoryNo":216,"categoryName":217,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000008","测试与质量",{"categoryNo":219,"categoryName":220,"taxonomyType":21,"taxonomyTypeDesc":22},"01JBSEEDCAT000000000000010","后端与接口",{"categoryNo":157,"categoryName":158,"taxonomyType":21,"taxonomyTypeDesc":22},{"categoryNo":223,"categoryName":224,"taxonomyType":225,"taxonomyTypeDesc":226},"01JBSEEDCAT000000000000030","开发工程师","PROFESSION","适用职业",[228,229,230,231,232,233,39,234,235,236,237,238,239,240,241,242,243,244],"testing","api","api testing","driven","APITester Agent Driven API Testing","test","postman","results","plain english","tester","endpoints","document","get","define","tests","english","api-tester",{"skillNo":246,"name":247,"nameZh":6,"description":248,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":109,"licenseFileUrl":6,"sourceHtmlUrl":249,"categories":250,"keywords":251,"publishedAt":44},"01M6F273Y3NGAPVJZ608BC0G9G","hubspot-implementation-plan","Generate a phased implementation plan from a HubSpot audit report. Creates prioritized, sequenced cleanup processes with effort estimates, dependencies, and automation feasibility. Use after running \u002Fhubspot-audit.","https:\u002F\u002Fgithub.com\u002Fluokai0\u002Fai-agent-skills-by-luo-kai\u002Fblob\u002Fmain\u002Fai-agent-skills\u002F22-clawhub-skills\u002Fhubspot-implementation-plan\u002FSKILL.md",[],[168,252,253,254,255,256,257,119,258,259,260,261,262,202,263,264,208,265],"implementation","hubspot","hubspot implementation plan","automation","feasibility","cleanup","planning","report","audit","audit report","phased implementation","dependencies","processes","hubspot audit"]