diff --git a/src/renderer/components/Experiment/Train/DynamicPluginForm.tsx b/src/renderer/components/Experiment/Train/DynamicPluginForm.tsx index cea7555739c71c0a304130cca80603662eb13b93..bedb13ab33431428dee29943a4d1779fda43b8bc 100644 --- a/src/renderer/components/Experiment/Train/DynamicPluginForm.tsx +++ b/src/renderer/components/Experiment/Train/DynamicPluginForm.tsx @@ -4,9 +4,12 @@ import * as React from 'react'; import { RJSFSchema } from '@rjsf/utils'; import validator from '@rjsf/validator-ajv8'; import Form from '@rjsf/core'; +import useSWR from 'swr'; +import * as chatAPI from 'renderer/lib/transformerlab-api-sdk'; +import { Typography } from '@mui/joy'; +import { useMemo } from 'react'; -const schema: RJSFSchema = { - title: 'Todo', +const schemaTemplate: RJSFSchema = { type: 'object', required: ['title'], properties: { @@ -16,16 +19,57 @@ const schema: RJSFSchema = { }, }; +function getSchema(data) { + if (data) { + console.log('Getting new schema from plugin'); + console.log(data); + let parsedData = JSON.parse(data); + let schemaParameters = parsedData.parameters; + let newSchemaTemplate = { ...schemaTemplate }; + newSchemaTemplate.properties = schemaParameters; + console.log('New schema'); + console.log(newSchemaTemplate); + return newSchemaTemplate; + } + return schemaTemplate; +} + const log = (type) => console.log.bind(console, type); +const fetcher = (url) => fetch(url).then((res) => res.json()); + +export default function DynamicPluginForm({ experimentInfo, plugin }) { + const { data, error, isLoading } = useSWR( + experimentInfo?.id && + plugin && + chatAPI.Endpoints.Experiment.ScriptGetFile( + experimentInfo?.id, + plugin, + 'index.json' + ), + fetcher + ); + + const schema = useMemo(() => getSchema(data), [data]); -export default function DynamicPluginForm({ plugin }) { return ( <> - {plugin} - {plugin ? ( - <Form className="pure-form" schema={schema} validator={validator} /> + <Typography level="title-lg"> + Custom Fields from Plugin: {plugin} + </Typography> + {/* <pre>{JSON.stringify(getSchema(data), null, 2)}</pre> */} + {plugin && data ? ( + <Form + tagName="div" + className="pure-form pure-form-stacked" + schema={schema} + validator={validator} + children={true} // removes submit button + idPrefix="" + idSeparator="" + id="plugin_parameters" + /> ) : ( - 'No plugin selected' + 'No plugin selected...' )} </> ); diff --git a/src/renderer/components/Experiment/Train/TrainingModalLoRA.tsx b/src/renderer/components/Experiment/Train/TrainingModalLoRA.tsx index ac0c096fc0eb4c83d98be46d281ef5bb3e7a3d41..7cc19a174f4f80e5c6a3ec49196c4660761c22c8 100644 --- a/src/renderer/components/Experiment/Train/TrainingModalLoRA.tsx +++ b/src/renderer/components/Experiment/Train/TrainingModalLoRA.tsx @@ -450,7 +450,10 @@ export default function TrainingModalLoRA({ open, onClose, experimentInfo }) { </Sheet> </TabPanel> <TabPanel value={2} sx={{ p: 2 }} keepMounted> - <DynamicPluginForm plugin={selectedPlugin} /> + <DynamicPluginForm + experimentInfo={experimentInfo} + plugin={selectedPlugin} + /> </TabPanel> </Tabs> <Stack spacing={2} direction="row" justifyContent="flex-end"> diff --git a/src/renderer/styles.css b/src/renderer/styles.css index ab2c6ef3e899d198cb77be5f20bdd32abecf4137..48c59aef257867045ff8cd65fb41ff9a1fcae750 100644 --- a/src/renderer/styles.css +++ b/src/renderer/styles.css @@ -170,25 +170,8 @@ so we can ignore the csslint warning. border-radius: 4px; vertical-align: middle; box-sizing: border-box; -} - -/* -Need to separate out the :not() selector from the rest of the CSS 2.1 selectors -since IE8 won't execute CSS that contains a CSS3 selector. -*/ -.pure-form input:not([type]) { - padding: 0.5em 0.6em; - display: inline-block; - border: 1px solid #ccc; - box-shadow: inset 0 1px 3px #ddd; - border-radius: 4px; - box-sizing: border-box; -} - -/* Chrome (as of v.32/34 on OS X) needs additional room for color to display. */ -/* May be able to remove this tweak as color inputs become more standardized across browsers. */ -.pure-form input[type='color'] { - padding: 0.2em 0.5em; + width: 100%; + font-size: 18px; } .pure-form input[type='text']:focus, @@ -211,21 +194,6 @@ since IE8 won't execute CSS that contains a CSS3 selector. border-color: #129fea; } -/* -Need to separate out the :not() selector from the rest of the CSS 2.1 selectors -since IE8 won't execute CSS that contains a CSS3 selector. -*/ -.pure-form input:not([type]):focus { - outline: 0; - border-color: #129fea; -} - -.pure-form input[type='file']:focus, -.pure-form input[type='radio']:focus, -.pure-form input[type='checkbox']:focus { - outline: thin solid #129fea; - outline: 1px auto #129fea; -} .pure-form .pure-checkbox, .pure-form .pure-radio { margin: 0.5em 0; @@ -253,15 +221,6 @@ since IE8 won't execute CSS that contains a CSS3 selector. color: #cad2d3; } -/* -Need to separate out the :not() selector from the rest of the CSS 2.1 selectors -since IE8 won't execute CSS that contains a CSS3 selector. -*/ -.pure-form input:not([type])[disabled] { - cursor: not-allowed; - background-color: #eaeded; - color: #cad2d3; -} .pure-form input[readonly], .pure-form select[readonly], .pure-form textarea[readonly] { @@ -292,6 +251,8 @@ since IE8 won't execute CSS that contains a CSS3 selector. } .pure-form label { margin: 0.5em 0 0.2em; + font-size: 14px; + font-weight: 500; } .pure-form fieldset { margin: 0; @@ -443,3 +404,7 @@ since IE8 won't execute CSS that contains a CSS3 selector. color: #666; font-size: 0.875em; } + +.form-group { + margin-bottom: 20px; +}