Spaces:
Running
Running
File size: 5,137 Bytes
2e77168 d88e289 2e77168 d88e289 2e77168 e08e97a 2e77168 f5c4c58 2e77168 f5c4c58 2e77168 f5c4c58 2e77168 f5c4c58 2e77168 f5c4c58 2e77168 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
# MultimodalInput
A multimodal input component based on [Ant Design X](https://x.ant.design), supporting file upload, voice recording, and more.
## Examples
### Basic
<demo name="basic"></demo>
### Integration with Chatbot
<demo name="with_chatbot"></demo>
### Configuring Extra Buttons
<demo name="extra_button"></demo>
### Block Mode
<demo name="block_mode"></demo>
### Upload Configuration
<demo name="upload_config"></demo>
## API
### Props
| Attribute | Type | Default Value | Description |
| ------------- | -------------------------------------------------------- | ---------------- | --------------------------------------------------------------------------------------------------------------- |
| value | `dict \| MultimodalInputValue \| None` | None | Default value to display, formatted as `{ "text":"", "files":[] }`. |
| loading | `bool \| None` | None | Whether the input is in a loading state, in which case the `cancel` event can be triggered. |
| mode | `inline \| block` | 'inline' | The rending mode of the input box. If `block`, the input box and the submit button will be rendered separately. |
| auto_size | `bool \| { minRows?: number; maxRows?: number } \| None` | { "maxRows": 8 } | Height auto size feature, can be set to True \| False or an object { "minRows": 2, "maxRows": 6 }. |
| read_only | `bool \| None` | None | Whether the input is read-only. |
| submit_type | `Literal['enter', 'shiftEnter'] \| None` | 'enter' | How the input box triggers the `submit` event. |
| placeholder | `str \| None` | None | Input placeholder text. |
| disabled | `bool \| None` | None | Whether to disable. |
| upload_config | `MultimodalInputUploadConfig \| dict \| None` | None | File upload configuration. |
### Slots
```python
SLOTS=['actions', "prefix", 'footer', 'header']
```
### Types
```python
class MultimodalInputUploadConfig(GradioModel):
"""
fullscreen_drop: Whether to allow fullscreen drop files to the attachments.
allow_upload: Whether to allow upload files to the attachments.
allow_paste_file: Whether to allow paste file to the attachments.
allow_speech: Whether to allow speech input.
show_count: Whether to show the count of files when the attachments panel is close.
upload_button_tooltip: Tooltip of the upload button.
accept: File types that can be accepted. See [input accept Attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file#accept).
max_count: Limit the number of uploaded files. Will replace current one when maxCount is 1.
directory: Support upload whole directory.
disabled: Disable upload files.
multiple: Whether to support selected multiple files. IE10+ supported. You can select multiple files with CTRL holding down while multiple is set to be True.
overflow: Behavior when the file list overflows.
title: Title of the attachments panel.
image_props: Image config, same as [Image](https://ant.design/components/image)
placeholder: Placeholder information when there is no file.
"""
fullscreen_drop: Optional[bool] = False
allow_upload: Optional[bool] = True
allow_paste_file: Optional[bool] = True
allow_speech: Optional[bool] = False
show_count: Optional[bool] = True
upload_button_tooltip: Optional[str] = None
accept: Optional[str] = None
max_count: Optional[int] = None
directory: Optional[bool] = False
multiple: Optional[bool] = False
disabled: Optional[bool] = False
overflow: Literal['wrap', 'scrollX', 'scrollY'] | None = None
title: Optional[str] = "Attachments"
image_props: Optional[dict] = None
placeholder: Optional[dict] = field(
default_factory=lambda: {
"inline": {
"title": "Upload files",
"description": "Click or drag files to this area to upload"
},
"drop": {
"title": "Drop files here",
}
})
class MultimodalInputValue(GradioModel):
files: Optional[ListFiles] = None
text: Optional[str] = None
```
|