[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"skill:01M6MXGFX26FAMRTP1CKZ9M3W1":3,"skill-same:01M6MXGFX26FAMRTP1CKZ9M3W1":102},{"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":18,"publishedAt":39,"linkOnly":40,"markdownContent":41,"markdownBody":42,"frontMatter":43,"refName":55,"commitSha":56,"skillDirectory":57,"forksCount":58,"repositoryHtmlUrl":59,"repositoryHomepageUrl":6,"ownerHtmlUrl":60,"ownerBlogUrl":6,"ownerDescription":6,"updatedAt":61,"install":62,"resources":75},"01M6MXGFX26FAMRTP1CKZ9M3W1","transformers-js",null,"Run Hugging Face models in JavaScript or TypeScript with Transformers.js in Node.js or the browser.","ibragimov-oasis\u002Fvibe-coder","ibragimov-oasis","https:\u002F\u002Favatars.githubusercontent.com\u002Fu\u002F240665573?v=4","01M6DF78Y45R8228FHAZ7G6JXM","IBRAGIMOV MUKHAMMADJON","01M6K5ZYR8TDPAFG4R6693E2A6",3,"Apache-2.0","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Ftransformers-js\u002FSKILL.md",[],[19,20,21,22,23,24,25,26,27,28,29,30,31,32,33,34,35,36,37,38],"transformers js","Transformers","js","models","unknown","for","internet","local","artifact","domain","es","hub","typescript","modules","hugging face","learning","HuggingFace","run","webgpu","github","2026-11-10 10:12:30",false,"---\nsource: \"https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Ftransformers-js\"\nname: transformers-js\ndescription: Run Hugging Face models in JavaScript or TypeScript with Transformers.js in Node.js or the browser.\nlicense: Apache-2.0\nrisk: unknown\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).\ntags:\n  - domain\u002Fskills\n  - artifact\u002Fskill\n  - source\u002Fskills-antigravity\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\n## ? Связи\n\n- [[MOC - Skills]] — Skills library\n- [[skills\u002Fskills-antigravity]] — Category: skills-antigravity\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\n## ? Связи\n\n- [[MOC - Skills]] — Skills library\n- [[skills\u002Fskills-antigravity]] — Category: skills-antigravity\n\n",{"name":5,"risk":23,"tags":44,"source":48,"license":15,"metadata":49,"description":7,"compatibility":54},[45,46,47],"domain\u002Fskills","artifact\u002Fskill","source\u002Fskills-antigravity","https:\u002F\u002Fgithub.com\u002Fhuggingface\u002Fskills\u002Ftree\u002Fmain\u002Fskills\u002Ftransformers-js",{"author":50,"version":51,"category":52,"repository":53},"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","bdd9f958d7bb1a0f19b8ad8da020b0bab0f53eb1","vc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Ftransformers-js",1,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis","2026-06-24 16:31:18",{"source":8,"skillName":5,"commands":63,"prompt":73,"zipAvailable":74},[64,67,70],{"tool":65,"command":66},"npx","npx skills add ibragimov-oasis\u002Fvibe-coder --skill transformers-js",{"tool":68,"command":69},"bunx","bunx skills add ibragimov-oasis\u002Fvibe-coder --skill transformers-js",{"tool":71,"command":72},"pnpm","pnpm dlx skills add ibragimov-oasis\u002Fvibe-coder --skill transformers-js","安装技能，技能地址：https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Ftransformers-js\u002FSKILL.md",true,[76,82,86,90,94,98],{"path":77,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":80,"sourceHtmlUrl":81},"references\u002FCACHE.md","REFERENCE","参考文档",9400,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Ftransformers-js\u002Freferences\u002FCACHE.md",{"path":83,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":84,"sourceHtmlUrl":85},"references\u002FCONFIGURATION.md",10066,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Ftransformers-js\u002Freferences\u002FCONFIGURATION.md",{"path":87,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":88,"sourceHtmlUrl":89},"references\u002FEXAMPLES.md",15401,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Ftransformers-js\u002Freferences\u002FEXAMPLES.md",{"path":91,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":92,"sourceHtmlUrl":93},"references\u002FMODEL_ARCHITECTURES.md",5795,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Ftransformers-js\u002Freferences\u002FMODEL_ARCHITECTURES.md",{"path":95,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":96,"sourceHtmlUrl":97},"references\u002FPIPELINE_OPTIONS.md",14744,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Ftransformers-js\u002Freferences\u002FPIPELINE_OPTIONS.md",{"path":99,"resourceType":78,"resourceTypeDesc":79,"sizeBytes":100,"sourceHtmlUrl":101},"references\u002FTEXT_GENERATION.md",8085,"https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-antigravity\u002Fsource-antigravity-awesome-skills\u002Fplugins\u002Fantigravity-awesome-skills-claude\u002Fskills\u002Ftransformers-js\u002Freferences\u002FTEXT_GENERATION.md",[103,141,167,187,213,243],{"skillNo":104,"name":105,"nameZh":6,"description":106,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":108,"categories":109,"keywords":120,"publishedAt":39},"01M6Q4Q22KKKVMJJYA411DQ4ER","ckm:ui-styling","Create beautiful, accessible user interfaces with shadcn\u002Fui components (built on Radix UI + Tailwind), Tailwind CSS utility-first styling, and canvas-based visual designs. Use when building user interfaces, implementing design systems, creating responsive layouts, adding accessible components (dialogs, dropdowns, forms, tables), customizing themes and colors, implementing dark mode, generating visual designs and posters, or establishing consistent styling patterns across applications.","MIT","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fui-styling\u002FSKILL.md",[110,115],{"categoryNo":111,"categoryName":112,"taxonomyType":113,"taxonomyTypeDesc":114},"01JBSEEDCAT000000000000015","视觉设计","SCENARIO","使用场景",{"categoryNo":116,"categoryName":117,"taxonomyType":118,"taxonomyTypeDesc":119},"01JBSEEDCAT000000000000032","设计师","PROFESSION","适用职业",[121,122,123,124,125,126,127,128,129,130,131,132,133,134,135,136,137,138,139,140],"ui styling","ui","styling","ckm:ui styling","ckm","design","css","canvas","components","component","create","design systems","Tailwind","across","themes","utility","mode","implementing","artifact\u002Fui-component","source\u002Fui-design",{"skillNo":142,"name":143,"nameZh":6,"description":144,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":145,"categories":146,"keywords":155,"publishedAt":39},"01M6Q4PQ2NX4NDVWTEHA3MQ2R0","ckm:design","Comprehensive design skill: brand identity, design tokens, UI styling, logo generation (55 styles, Gemini AI), corporate identity program (50 deliverables, CIP mockups), HTML presentations (Chart.js), banner design (22 styles, social\u002Fads\u002Fweb\u002Fprint), icon design (15 styles, SVG, Gemini 3.1 Pro), social photos (HTML→screenshot, multi-platform). Actions: design logo, create CIP, generate mockups, build slides, design banner, generate icon, create social photos, social media images, brand identity, design system. Platforms: Facebook, Twitter, LinkedIn, YouTube, Instagram, Pinterest, TikTok, Threads, Google Ads.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fdesign\u002FSKILL.md",[147,150,151,154],{"categoryNo":148,"categoryName":149,"taxonomyType":113,"taxonomyTypeDesc":114},"01JBSEEDCAT000000000000003","演示文稿",{"categoryNo":111,"categoryName":112,"taxonomyType":113,"taxonomyTypeDesc":114},{"categoryNo":152,"categoryName":153,"taxonomyType":113,"taxonomyTypeDesc":114},"01JBSEEDCAT000000000000023","Skill与智能体开发",{"categoryNo":116,"categoryName":117,"taxonomyType":118,"taxonomyTypeDesc":119},[126,143,125,156,130,121,157,131,158,159,160,161,162,163,164,165,27,166,139,140],"google","presentations","generate","screenshot","actions","Media","logo","ads","youtube","tiktok","chart",{"skillNo":168,"name":169,"nameZh":6,"description":170,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":171,"categories":172,"keywords":175,"publishedAt":39},"01M6Q4PJE27GEA3M0CECEBCZKS","ckm:design-system","Token architecture, component specifications, and slide generation. Three-layer tokens (primitive→semantic→component), CSS variables, spacing\u002Ftypography scales, component specs, strategic slide creation. Use for design tokens, systematic design, brand-compliant presentations.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fdesign-system\u002FSKILL.md",[173,174],{"categoryNo":111,"categoryName":112,"taxonomyType":113,"taxonomyTypeDesc":114},{"categoryNo":116,"categoryName":117,"taxonomyType":118,"taxonomyTypeDesc":119},[126,176,177,178,143,125,127,130,179,157,27,180,181,182,183,184,185,186,139,140],"design system","system","ckm:design system","architecture","token","creation","systematic","css variables","Variables","spacing","layer",{"skillNo":188,"name":189,"nameZh":6,"description":190,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":191,"categories":192,"keywords":198,"publishedAt":39},"01M6Q4P90JXFYMH2S634QM6SQJ","ckm:banner-design","Design banners for social media, ads, website heroes, creative assets, and print. Multiple art direction options with AI-generated visuals. Actions: design, create, generate banner. Platforms: Facebook, Twitter\u002FX, LinkedIn, YouTube, Instagram, Google Display, website hero, print. Styles: minimalist, gradient, bold typography, photo-based, illustrated, geometric, retro, glassmorphism, 3D, neon, duotone, editorial, collage. Uses ui-ux-pro-max, frontend-design, ai-artist, ai-multimodal skills.","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fui-design\u002Fui-rules\u002Fui-ux-pro-max\u002Fclaude\u002Fskills\u002Fbanner-design\u002FSKILL.md",[193,196,197],{"categoryNo":194,"categoryName":195,"taxonomyType":113,"taxonomyTypeDesc":114},"01JBSEEDCAT000000000000009","前端开发",{"categoryNo":111,"categoryName":112,"taxonomyType":113,"taxonomyTypeDesc":114},{"categoryNo":116,"categoryName":117,"taxonomyType":118,"taxonomyTypeDesc":119},[126,199,200,201,125,202,160,161,203,204,205,206,207,208,209,210,139,140,211,212],"banner design","ckm:banner design","banner","frontend","3D","generated","Art","social","dimensions","neon","direction","display","frontend-design","hero",{"skillNo":214,"name":215,"nameZh":6,"description":216,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":217,"categories":218,"keywords":225,"publishedAt":39},"01M6Q2RZXBJ9TBE413GXCYQNDB","seo","Comprehensive SEO analysis for any website or business type. Performs full site audits, single-page deep analysis, technical SEO checks (crawlability, indexability, Core Web Vitals with INP), schema markup detection\u002Fvalidation\u002Fgeneration, content quality assessment (E-E-A-T framework per Dec 2025 update extending to all competitive queries), image optimization, sitemap analysis, and Generative Engine Optimization (GEO) for AI Overviews, ChatGPT, and Perplexity citations. Analyzes AI crawler accessibility (GPTBot, ClaudeBot, PerplexityBot), llms.txt compliance, brand mention signals, and passage-level citability. Industry detection for SaaS, e-commerce, local business, publishers, agencies. Triggers on: \"SEO\", \"audit\", \"schema\", \"Core Web Vitals\", \"sitemap\", \"E-E-A-T\", \"AI Overviews\", \"GEO\", \"technical SEO\", \"content quality\", \"page speed\", \"structured data\".","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo\u002FSKILL.md",[219,222],{"categoryNo":220,"categoryName":221,"taxonomyType":113,"taxonomyTypeDesc":114},"01JBSEEDCAT000000000000019","营销推广",{"categoryNo":223,"categoryName":224,"taxonomyType":118,"taxonomyTypeDesc":119},"01JBSEEDCAT000000000000035","市场营销",[215,226,227,228,229,230,231,27,26,232,233,234,235,236,237,238,239,240,241,242],"image","llms","assessment","deep analysis","Citations","analysis","deep","crawlability","seo analysis","2025","commerce","URL","domain\u002Fseo","source\u002Fskills-seo","vitals","generative","publishers",{"skillNo":244,"name":245,"nameZh":6,"description":246,"descriptionZh":6,"repositoryFullName":8,"ownerLogin":9,"ownerAvatarUrl":10,"ownerAccountNo":11,"ownerDisplayName":12,"repositoryNo":13,"starsCount":14,"licenseSpdxId":107,"licenseFileUrl":6,"sourceHtmlUrl":247,"categories":248,"keywords":251,"publishedAt":39},"01M6Q2RVE7VGFCFQKBK468NHVY","seo-technical","Technical SEO audit across 9 categories: crawlability, indexability, security, URL structure, mobile, Core Web Vitals, structured data, JavaScript rendering, and IndexNow protocol. Use when user says \"technical SEO\", \"crawl issues\", \"robots.txt\", \"Core Web Vitals\", \"site speed\", or \"security headers\".","https:\u002F\u002Fgithub.com\u002Fibragimov-oasis\u002Fvibe-coder\u002Fblob\u002Fmain\u002Fvc-kit\u002Fcontent\u002FCOMBINED\u002FCOMBINED\u002Fskills\u002Fskills-seo\u002Fseo\u002Fclaude-seo\u002Fskills\u002Fseo-technical\u002FSKILL.md",[249,250],{"categoryNo":220,"categoryName":221,"taxonomyType":113,"taxonomyTypeDesc":114},{"categoryNo":223,"categoryName":224,"taxonomyType":118,"taxonomyTypeDesc":119},[215,252,253,254,255,256,257,258,259,27,134,233,260,261,237,262,263,238,239,240],"technical","seo technical","issues","audit","data","mobile","crawl","structure","rendering","technical seo audit","headers","categories"]