| <script lang="ts"> | |
| import { getContext } from 'svelte'; | |
| import Checkbox from '$lib/components/common/Checkbox.svelte'; | |
| import Tooltip from '$lib/components/common/Tooltip.svelte'; | |
| import { marked } from 'marked'; | |
| const i18n = getContext('i18n'); | |
| const capabilityLabels = { | |
| vision: { | |
| label: $i18n.t('Vision'), | |
| description: $i18n.t('Model accepts image inputs') | |
| }, | |
| file_upload: { | |
| label: $i18n.t('File Upload'), | |
| description: $i18n.t('Model accepts file inputs') | |
| }, | |
| web_search: { | |
| label: $i18n.t('Web Search'), | |
| description: $i18n.t('Model can search the web for information') | |
| }, | |
| image_generation: { | |
| label: $i18n.t('Image Generation'), | |
| description: $i18n.t('Model can generate images based on text prompts') | |
| }, | |
| code_interpreter: { | |
| label: $i18n.t('Code Interpreter'), | |
| description: $i18n.t('Model can execute code and perform calculations') | |
| }, | |
| usage: { | |
| label: $i18n.t('Usage'), | |
| description: $i18n.t( | |
| 'Sends `stream_options: { include_usage: true }` in the request.\nSupported providers will return token usage information in the response when set.' | |
| ) | |
| }, | |
| citations: { | |
| label: $i18n.t('Citations'), | |
| description: $i18n.t('Displays citations in the response') | |
| } | |
| }; | |
| export let capabilities: { | |
| vision?: boolean; | |
| file_upload?: boolean; | |
| web_search?: boolean; | |
| image_generation?: boolean; | |
| code_interpreter?: boolean; | |
| usage?: boolean; | |
| citations?: boolean; | |
| } = {}; | |
| </script> | |
| <div> | |
| <div class="flex w-full justify-between mb-1"> | |
| <div class=" self-center text-sm font-semibold">{$i18n.t('Capabilities')}</div> | |
| </div> | |
| <div class="flex items-center mt-2 flex-wrap"> | |
| {#each Object.keys(capabilityLabels) as capability} | |
| <div class=" flex items-center gap-2 mr-3"> | |
| <Checkbox | |
| state={capabilities[capability] ? 'checked' : 'unchecked'} | |
| on:change={(e) => { | |
| capabilities[capability] = e.detail === 'checked'; | |
| }} | |
| /> | |
| <div class=" py-0.5 text-sm capitalize"> | |
| <Tooltip content={marked.parse(capabilityLabels[capability].description)}> | |
| {$i18n.t(capabilityLabels[capability].label)} | |
| </Tooltip> | |
| </div> | |
| </div> | |
| {/each} | |
| </div> | |
| </div> | |