# Widget

## Apa itu widget?

Banyak repositori model memiliki widget yang memungkinkan siapa pun untuk menjalankan inferensi langsung di browser. Widget ini didukung oleh [Inference Providers](https://huggingface.co/docs/inference-providers), yang memberikan akses yang terpadu dan efisien bagi pengembang ke ratusan model machine learning, didukung oleh mitra inferensi serverless kami.

Berikut adalah beberapa contoh model populer saat ini:

- [DeepSeek V3](https://huggingface.co/deepseek-ai/DeepSeek-V3-0324) - Model percakapan open-weights terkini
- [Flux Kontext](https://huggingface.co/black-forest-labs/FLUX.1-Kontext-dev) - Model transformer open-weights untuk pengeditan gambar
- [Deteksi NSFW Falconsai](https://huggingface.co/Falconsai/nsfw_image_detection) - Moderasi konten gambar
- [Chatterbox dari ResembleAI](https://huggingface.co/ResembleAI/chatterbox) - Model teks-ke-suara open source tingkat produksi.

Anda dapat menjelajahi lebih banyak model dan widget mereka di [halaman model](https://huggingface.co/models?inference_provider=all&sort=trending) atau mencobanya secara interaktif di [Inference Playground](https://huggingface.co/playground).

## Mengaktifkan widget

Widget ditampilkan ketika model dihosting oleh setidaknya satu Inference Provider, memastikan kinerja dan keandalan yang optimal untuk inferensi model. Provider secara otonom memilih dan mengontrol model apa yang mereka deploy.

Jenis widget yang ditampilkan (teks ke gambar, pengenalan ucapan otomatis, dll) disimpulkan dari `pipeline_tag` model, yaitu tag khusus yang Hub coba hitung secara otomatis untuk semua model. Satu-satunya pengecualian adalah widget `conversational`, yang ditampilkan pada semua model dengan `pipeline_tag` berupa `text-generation` atau `image-text-to-text`. Kami memilih untuk menampilkan **hanya satu** widget per model demi kesederhanaan.

Untuk beberapa pustaka, seperti `transformers`, tipe model dapat disimpulkan secara otomatis berdasarkan file konfigurasi (`config.json`). Arsitektur dapat menentukan tipe: misalnya, `AutoModelForTokenClassification` sesuai dengan `token-classification`. Jika Anda tertarik, Anda dapat melihat pseudo-code di [gist ini](https://gist.github.com/julien-c/857ba86a6c6a895ecd90e7f7cab48046).

Untuk sebagian besar kasus penggunaan lainnya, kami menggunakan tag model untuk menentukan jenis tugas model. Misalnya, jika ada `tag: text-classification` di [metadata kartu model](./model-cards), `pipeline_tag` yang disimpulkan akan menjadi `text-classification`.

**Anda selalu dapat menimpa tipe pipeline secara manual dengan `pipeline_tag: xxx` di [metadata kartu model](./model-cards#model-card-metadata) Anda.** (Anda juga dapat menggunakan editor GUI metadata untuk melakukan ini).

### Bagaimana saya dapat mengontrol input contoh widget model saya?

Anda dapat menentukan input widget di bagian metadata kartu model:

```yaml
widget:
  - text: "This new restaurant has amazing food and great service!"
    example_title: "Positive Review"
  - text: "I'm really disappointed with this product. Poor quality and overpriced."
    example_title: "Negative Review"
  - text: "The weather is nice today."
    example_title: "Neutral Statement"
```

Anda dapat menyediakan lebih dari satu contoh input. Di menu dropdown contoh pada widget, mereka akan muncul sebagai `Example 1`, `Example 2`, dan seterusnya. Secara opsional, Anda juga dapat menyediakan `example_title`.

```yaml
widget:
  - text: "Is this review positive or negative? Review: Best cast iron skillet you will ever buy."
    example_title: "Sentiment analysis"
  - text: "Barack Obama nominated Hilary Clinton as his secretary of state on Monday. He chose her because she had ..."
    example_title: "Coreference resolution"
  - text: "On a shelf, there are five books: a gray book, a red book, a purple book, a blue book, and a black book ..."
    example_title: "Logic puzzles"
  - text: "The two men running to become New York City's next mayor will face off in their first debate Wednesday night ..."
    example_title: "Reading comprehension"
```

Selain itu, Anda dapat menentukan contoh input non-teks dalam metadata kartu model. Lihat [di sini](./models-widgets-examples) untuk daftar lengkap format input contoh untuk semua jenis widget. Untuk jenis widget visi & audio, berikan contoh input dengan `src` alih-alih `text`.

Sebagai contoh, izinkan pengguna memilih dari dua file audio sampel untuk tugas pengenalan ucapan otomatis dengan cara:

```yaml
widget:
  - src: https://example.org/somewhere/speech_samples/sample1.flac
    example_title: Speech sample 1
  - src: https://example.org/somewhere/speech_samples/sample2.flac
    example_title: Speech sample 2
```

Perhatikan bahwa Anda juga dapat menyertakan file contoh di repositori model Anda dan menggunakannya sebagai:

```yaml
widget:
  - src: https://huggingface.co/username/model_repo/resolve/main/sample1.flac
    example_title: Custom Speech Sample 1
```

Namun yang lebih praktis lagi, jika file berada di repo model yang sesuai, Anda cukup menggunakan nama file atau path file di dalam repo:

```yaml
widget:
  - src: sample1.flac
    example_title: Custom Speech Sample 1
```

atau jika file tersebut bersarang di dalam repositori:

```yaml
widget:
  - src: nested/directory/sample1.flac
```

Kami menyediakan contoh input untuk beberapa bahasa dan sebagian besar jenis widget di [file default-widget-inputs.ts](https://github.com/huggingface/huggingface.js/blob/main/packages/tasks/src/default-widget-inputs.ts). Jika ada contoh yang belum tersedia, kami menyambut PR dari komunitas untuk menambahkannya!

## Contoh keluaran

Sebagai perluasan dari contoh input, untuk setiap contoh widget, Anda juga dapat secara opsional menjelaskan output model yang sesuai, langsung di properti `output`.

Hal ini berguna ketika model belum didukung oleh Inference Providers, sehingga halaman model tetap dapat menampilkan cara kerja model dan hasil yang diberikan.

Sebagai contoh, untuk model [automatic-speech-recognition](./models-widgets-examples#automatic-speech-recognition):

```yaml
widget:
  - src: sample1.flac
    output:
      text: "Hello my name is Julien"
```

Properti `output` harus berupa kamus YAML yang merepresentasikan format keluaran dari Inference Providers.

Untuk model yang mengoutputkan teks, lihat contoh di atas.

Untuk model yang mengoutputkan label (misalnya model [text-classification](./models-widgets-examples#text-classification)), output seharusnya terlihat seperti ini:

```yaml
widget:
  - text: "I liked this movie"
    output:
      - label: POSITIVE
        score: 0.8
      - label: NEGATIVE
        score: 0.2
```

Terakhir, untuk model yang menghasilkan gambar, audio, atau jenis aset lainnya, output harus menyertakan properti `url` yang berisi tautan ke nama file atau path di dalam repo, atau ke URL remote. Sebagai contoh, untuk model text-to-image:

```yaml
widget:
  - text: "picture of a futuristic tiger, artstation"
    output:
      url: images/tiger.jpg
```

Kita juga dapat menampilkan output contoh di antarmuka Hugging Face, misalnya, untuk model teks-ke-gambar guna menampilkan galeri generasi gambar yang menarik.

## Ketersediaan Widget dan Dukungan Provider

Tidak semua model memiliki widget yang tersedia. Ketersediaan widget bergantung pada:

1. **Dukungan Tugas**: Tugas model harus didukung oleh setidaknya satu penyedia dalam jaringan Inference Providers
2. **Ketersediaan Provider**: Minimal satu provider harus menyajikan model spesifik
3. **Konfigurasi Model**: Model harus memiliki metadata dan file konfigurasi yang tepat

Untuk melihat daftar lengkap tugas yang didukung, lihat [halaman dokumentasi khusus kami](https://huggingface.co/docs/inference-providers/tasks/index).

Daftar semua penyedia dan tugas yang mereka dukung tersedia di [halaman dokumentasi ini](https://huggingface.co/docs/inference-providers/index#partners).

Untuk model tanpa dukungan penyedia, Anda tetap dapat menampilkan fungsionalitas menggunakan [contoh output](#example-outputs) di kartu model Anda.

Anda juga dapat mengklik _Minta dukungan penyedia_ langsung di halaman model untuk mendorong penyedia agar menyajikan model tersebut, asalkan ada minat komunitas yang cukup.

## Menjelajahi Model dengan Inference Playground

Sebelum mengintegrasikan model ke dalam aplikasi Anda, Anda dapat mengujinya secara interaktif dengan [Inference Playground](https://huggingface.co/playground). Playground memungkinkan Anda untuk:

- Uji coba berbagai [model pelengkapan obrolan](https://huggingface.co/models?inference_provider=all&sort=trending&other=conversational) dengan prompt kustom
- Bandingkan respons di antara berbagai model
- Eksperimen dengan parameter inferensi seperti temperature, max tokens, dan lainnya
- Temukan model yang sempurna untuk kasus penggunaan spesifik Anda

Playground menggunakan infrastruktur Inference Providers yang sama yang menggerakkan widget, sehingga Anda dapat mengharapkan kinerja dan kemampuan yang serupa saat mengintegrasikan model ke aplikasi Anda sendiri.