-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(ui): add TEXT_GENERATION model create (#211)
* feat(ui): add LLM model creation * feat(ui): add TEXT_GENERATION model create * feat(ui): rename LLM into TextGeneration components * feat(ui): add readonly on text-geneeration createModal
- Loading branch information
Showing
6 changed files
with
337 additions
and
13 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
157 changes: 157 additions & 0 deletions
157
ui/src/components/modals/add-new-model/text-generation/form-fields.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,157 @@ | ||
| import useAutoFocus from '@Src/hooks/use-auto-focus'; | ||
| import { | ||
| DataTypeEnum, DataTypeEnumLabel, GranularityEnum, GranularityEnumLabel, | ||
| ModelTypeEnum, | ||
| ModelTypeEnumLabel, | ||
| } from '@State/models/constants'; | ||
| import { | ||
| FormField, | ||
| Input, | ||
| Select, | ||
| } from '@radicalbit/radicalbit-design-system'; | ||
| import { useRef } from 'react'; | ||
| import { useModalContext } from '../modal-context-provider'; | ||
| import useHandleOnSubmit from './use-handle-on-submit'; | ||
|
|
||
| function Name() { | ||
| const ref = useRef(null); | ||
|
|
||
| const { handleOnSubmit, isSubmitDisabled } = useHandleOnSubmit(); | ||
| const { useFormbit } = useModalContext(); | ||
| const { form, error, write } = useFormbit; | ||
|
|
||
| const handleOnChange = ({ target: { value } }) => { | ||
| write('name', value); | ||
| }; | ||
|
|
||
| useAutoFocus(ref); | ||
|
|
||
| return ( | ||
| <FormField label="Name" message={error('name')} modifier="w-full" required> | ||
| <Input | ||
| onChange={handleOnChange} | ||
| onPressEnter={handleOnSubmit} | ||
| readOnly={isSubmitDisabled} | ||
| ref={ref} | ||
| value={form.name} | ||
| /> | ||
| </FormField> | ||
| ); | ||
| } | ||
|
|
||
| function ModelType() { | ||
| const { useFormbit } = useModalContext(); | ||
| const { form, write } = useFormbit; | ||
|
|
||
| const { isSubmitDisabled } = useHandleOnSubmit(); | ||
|
|
||
| const handleOnChange = (value) => { | ||
| write('modelType', value); | ||
| }; | ||
|
|
||
| const modelTypeSelections = [ | ||
| ModelTypeEnum.BINARY_CLASSIFICATION, | ||
| ModelTypeEnum.MULTI_CLASSIFICATION, | ||
| ModelTypeEnum.REGRESSION, | ||
| ModelTypeEnum.TEXT_GENERATION, | ||
| ]; | ||
|
|
||
| return ( | ||
| <FormField label="Model type" modifier="w-full" required> | ||
| <Select onChange={handleOnChange} readOnly={isSubmitDisabled} value={form.modelType}> | ||
| {Object.values(modelTypeSelections).map((value) => ( | ||
| <Select.Option key={value}> | ||
| {ModelTypeEnumLabel[value]} | ||
| </Select.Option> | ||
| ))} | ||
| </Select> | ||
| </FormField> | ||
| ); | ||
| } | ||
|
|
||
| function DataType() { | ||
| const { useFormbit } = useModalContext(); | ||
| const { error } = useFormbit; | ||
|
|
||
| return ( | ||
| <FormField label="Data type" message={error('dataType')} modifier="w-full" required> | ||
| {DataTypeEnumLabel[DataTypeEnum.TEXT]} | ||
| </FormField> | ||
| ); | ||
| } | ||
|
|
||
| function Granularity() { | ||
| const { useFormbit } = useModalContext(); | ||
| const { form, error, write } = useFormbit; | ||
|
|
||
| const { isSubmitDisabled } = useHandleOnSubmit(); | ||
|
|
||
| const handleOnChange = (value) => { | ||
| write('granularity', value); | ||
| }; | ||
|
|
||
| return ( | ||
| <FormField label="Granularity" message={error('granularity')} modifier="w-full" required> | ||
| <Select onChange={handleOnChange} readOnly={isSubmitDisabled} value={form.granularity}> | ||
| {Object.values(GranularityEnum).map((value) => ( | ||
| <Select.Option key={value}> | ||
| {GranularityEnumLabel[value]} | ||
| </Select.Option> | ||
| ))} | ||
| </Select> | ||
| </FormField> | ||
| ); | ||
| } | ||
|
|
||
| function Framework() { | ||
| const { useFormbit } = useModalContext(); | ||
| const { form, error, write } = useFormbit; | ||
|
|
||
| const { handleOnSubmit, isSubmitDisabled } = useHandleOnSubmit(); | ||
|
|
||
| const handleOnChange = ({ target: { value } }) => { | ||
| write('frameworks', value); | ||
| }; | ||
|
|
||
| return ( | ||
| <FormField label="Framework" message={error('frameworks')} modifier="w-full"> | ||
| <Input | ||
| onChange={handleOnChange} | ||
| onPressEnter={handleOnSubmit} | ||
| readOnly={isSubmitDisabled} | ||
| value={form.frameworks} | ||
| /> | ||
| </FormField> | ||
| ); | ||
| } | ||
|
|
||
| function Algorithm() { | ||
| const { useFormbit } = useModalContext(); | ||
| const { form, error, write } = useFormbit; | ||
|
|
||
| const { handleOnSubmit, isSubmitDisabled } = useHandleOnSubmit(); | ||
|
|
||
| const handleOnChange = ({ target: { value } }) => { | ||
| write('algorithm', value); | ||
| }; | ||
|
|
||
| return ( | ||
| <FormField label="Algorithm" message={error('algorithm')} modifier="w-full"> | ||
| <Input | ||
| onChange={handleOnChange} | ||
| onPressEnter={handleOnSubmit} | ||
| readOnly={isSubmitDisabled} | ||
| value={form.algorithm} | ||
| /> | ||
| </FormField> | ||
| ); | ||
| } | ||
|
|
||
| export { | ||
| Algorithm, | ||
| DataType, | ||
| Framework, | ||
| Granularity, | ||
| ModelType, | ||
| Name, | ||
| }; |
59 changes: 59 additions & 0 deletions
59
ui/src/components/modals/add-new-model/text-generation/index.jsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,59 @@ | ||
| import { Button, FormField, SectionTitle } from '@radicalbit/radicalbit-design-system'; | ||
| import { | ||
| Algorithm, DataType, Framework, Granularity, ModelType, Name, | ||
| } from './form-fields'; | ||
| import { useModalContext } from '../modal-context-provider'; | ||
| import useHandleOnSubmit from './use-handle-on-submit'; | ||
|
|
||
| function TextGenerationHeader() { | ||
| return <SectionTitle title="New Model" />; | ||
| } | ||
|
|
||
| function TextGenerationBody() { | ||
| const { useFormbit } = useModalContext(); | ||
| const { error } = useFormbit; | ||
|
|
||
| return ( | ||
| <div className="flex flex-row justify-center"> | ||
| <div className="flex flex-col gap-4 w-full max-w-[400px] items-center"> | ||
| <Name /> | ||
|
|
||
| <div className="flex flex-row gap-4 w-full"> | ||
| <ModelType /> | ||
|
|
||
| <DataType /> | ||
| </div> | ||
|
|
||
| <Granularity /> | ||
|
|
||
| <Framework /> | ||
|
|
||
| <Algorithm /> | ||
|
|
||
| <FormField message={error('silent.backend')} /> | ||
| </div> | ||
| </div> | ||
|
|
||
| ); | ||
| } | ||
|
|
||
| function TextGenerationActionButton() { | ||
| const { handleOnSubmit, args, isSubmitDisabled } = useHandleOnSubmit(); | ||
|
|
||
| return ( | ||
| <> | ||
| <div /> | ||
|
|
||
| <Button | ||
| disabled={isSubmitDisabled} | ||
| loading={args.isLoading} | ||
| onClick={handleOnSubmit} | ||
| type="primary" | ||
| > | ||
| Save Model | ||
| </Button> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| export { TextGenerationHeader, TextGenerationBody, TextGenerationActionButton }; |
Oops, something went wrong.