Merge pull request #268 from l3vels/feat/fine-tuning

apps/ui/src/Route.tsx

@@ -90,6 +90,9 @@ import CreateGroupForm from 'plugins/contact/pages/Group/GroupForm/CreateGroupFo
 import EditGroupForm from 'plugins/contact/pages/Group/GroupForm/EditGroupForm'
 import ScheduleRunModal from 'modals/ScheduleRunModal'
 import RunLogsModal from 'modals/RunLogsModal/RunLogsModal'
+import CreateFineTuningModal from 'modals/CreateFineTuningModal'
+import CreateFineTuningForm from 'pages/Models/FineTuning/FineTuningForm/CreateFineTuningForm'
+import EditFineTuningForm from 'pages/Models/FineTuning/FineTuningForm/EditFineTuningForm'
 
 const Route = () => {
   const { loading } = useContext(AuthContext)
@@ -243,6 +246,16 @@ const Route = () => {
 
             <Router path={'models'} element={<MainRouteLayout />} key={document.location.href}>
               <Router index element={<Models />} key={document.location.href} />
+              <Router
+                path={'create-fine-tuning'}
+                element={<CreateFineTuningForm />}
+                key={document.location.href}
+              />
+              <Router
+                path={':fineTuningId/edit-fine-tuning'}
+                element={<EditFineTuningForm />}
+                key={document.location.href}
+              />
             </Router>
 
             <Router path={'schedules'} element={<MainRouteLayout />} key={document.location.href}>

apps/ui/src/components/DataGrid/GridComponents/MultiselectEditor.tsx

@@ -85,6 +85,7 @@ const MultiselectEditor = forwardRef((props: any, ref) => {
   return (
     <StyledDiv>
       <StyledDropDown
+        size={'small'}
         ref={refInput}
         options={options}
         openMenuOnFocus={true}

apps/ui/src/components/ImportFile/ImportFile.tsx

@@ -0,0 +1,93 @@
+import { useEffect } from 'react'
+import styled from 'styled-components'
+
+import ReviewImport, { StyledButtonContainer } from './ReviewImport'
+
+import useImportFile from './useImportFile'
+
+import Button from '@l3-lib/ui-core/dist/Button'
+import UploadButton from 'components/UploadButton'
+import { ButtonTertiary } from 'components/Button/Button'
+import { useDownloadTemplate } from './useDownloadTemplate'
+
+import { t } from 'i18next'
+
+const ImportFile = ({ setFieldValue, value = '' }: { setFieldValue: any; value?: string }) => {
+  const {
+    // handleFileChange,
+    step,
+    parsedData,
+    setStep,
+    handleUploadJson,
+    handleConvertData,
+    fileIsLoading,
+  } = useImportFile({
+    setFieldValue: setFieldValue,
+  })
+
+  const { handleDownloadTemplate } = useDownloadTemplate()
+
+  useEffect(() => {
+    if (value.length > 0) {
+      // Replace 'fileUrl' with the actual URL of the file you want to read.
+      const fileUrl = value
+
+      fetch(fileUrl)
+        .then(response => {
+          if (!response.ok) {
+            throw new Error(`Failed to fetch file: ${response.status} ${response.statusText}`)
+          }
+          return response.text() // or response.json() for JSON files, response.blob() for binary files, etc.
+        })
+        .then(data => {
+          handleConvertData(data) // Update the state with the file content
+        })
+        .catch(error => {
+          console.error('Error fetching file:', error)
+        })
+    }
+  }, [value])
+
+  function renderTabs(tabIndex: number) {
+    switch (tabIndex) {
+      case 0:
+        return (
+          <StyledButtonContainer>
+            <ButtonTertiary onClick={handleDownloadTemplate} size={Button.sizes.SMALL}>
+              {t('download-template')}
+            </ButtonTertiary>
+
+            {/* <UploadButton onChange={handleFileChange} isLoading={false} label={t('upload-csv')} /> */}
+            <UploadButton
+              onChange={handleUploadJson}
+              isLoading={fileIsLoading}
+              label={t('upload-json')}
+            />
+          </StyledButtonContainer>
+        )
+
+      case 1:
+        return (
+          <>
+            <ReviewImport data={parsedData} setStep={setStep} />
+          </>
+        )
+
+      default:
+        return <>Error..!</>
+    }
+  }
+
+  return (
+    <>
+      <StyledFormSection>{renderTabs(step)}</StyledFormSection>
+    </>
+  )
+}
+
+export default ImportFile
+
+export const StyledFormSection = styled.div<{ columns?: string }>`
+  width: 100%;
+  height: 100%;
+`

apps/ui/src/components/ImportFile/ReviewImport.tsx

@@ -0,0 +1,142 @@
+import React from 'react'
+// import { CustomTable } from 'oldComponents/atoms/CustomTable'
+import useReviewImport from './useReviewImport'
+import { FormikProvider } from 'formik'
+import Dropdown from '@l3-lib/ui-core/dist/Dropdown'
+
+import styled from 'styled-components'
+
+import Button from '@l3-lib/ui-core/dist/Button'
+
+import Table from 'components/Table'
+import { ButtonTertiary } from 'components/Button/Button'
+import { t } from 'i18next'
+import { useDownloadTemplate } from './useDownloadTemplate'
+
+const ReviewImport = ({ data, setStep: startOver }: { data: any[]; setStep: any }) => {
+  const { handleDownloadTemplate } = useDownloadTemplate()
+
+  const { formik, keys, options, step, response, setStep } = useReviewImport(data)
+
+  const columns = [
+    {
+      Header: 'System',
+      accessor: 'System',
+      minWidth: 75,
+    },
+    {
+      Header: 'User',
+      accessor: 'User',
+      minWidth: 75,
+    },
+    {
+      Header: 'Assistant',
+      accessor: 'Assistant',
+      minWidth: 75,
+    },
+  ]
+  const renderTable = React.useMemo(
+    () => (
+      <>
+        <Table columns={columns} data={data} />
+      </>
+    ),
+    [data],
+  )
+
+  return (
+    <>
+      {!response ? (
+        <>
+          <StyledContentWrapper>
+            <FormikProvider value={formik}>
+              <StyledButtonContainer>
+                <ButtonTertiary onClick={handleDownloadTemplate} size={Button.sizes.SMALL}>
+                  {t('download-template')}
+                </ButtonTertiary>
+                {/* <ButtonTertiary onClick={formik.handleSubmit} size={Button.sizes.SMALL}>
+                  Save
+                </ButtonTertiary> */}
+                <ButtonTertiary onClick={() => startOver(0)} size={Button.sizes.SMALL}>
+                  {t('start-over')}
+                </ButtonTertiary>
+              </StyledButtonContainer>
+              {/* <StyledHeaderContainer itemLength={itemLength}>
+                {keys.map((item: any, index: number) => (
+                  <SelectHeader options={options} index={index} item={item} key={index} />
+                ))}
+              </StyledHeaderContainer> */}
+              <StyledTableWrapper>{renderTable}</StyledTableWrapper>
+            </FormikProvider>
+          </StyledContentWrapper>
+        </>
+      ) : (
+        <>
+          <StyledButtonContainer>
+            <Button onClick={() => setStep(0)} disabled={step === 0}>
+              Imported
+            </Button>
+            <Button onClick={() => setStep(1)} disabled={step === 1}>
+              Not imported
+            </Button>
+            <Button onClick={() => window.open(response.error_record_download_url, '_blank')}>
+              Download error record
+            </Button>
+            <Button onClick={() => startOver(0)}>Start over</Button>
+          </StyledButtonContainer>
+          <StyledButtonContainer>
+            <div>Total imported: {response.total_imported}</div>
+            <div>Total not imported: {response?.not_imported.length}</div>
+          </StyledButtonContainer>
+          <StyledContentWrapper>
+            <StyledTableWrapper>
+              {/* <DataGrid
+                data={step === 0 ? response?.assets ?? [] : response?.not_imported ?? []}
+                columnConfig={step === 0 ? importedConfig : notImportedConfig}
+              /> */}
+            </StyledTableWrapper>
+          </StyledContentWrapper>
+        </>
+      )}
+    </>
+  )
+}
+
+export default ReviewImport
+
+const StyledTableWrapper = styled.div`
+  height: 100%;
+  width: 100%;
+`
+
+const StyledHeaderWrapper = styled.div`
+  width: 100%;
+  position: sticky;
+  padding: 20px 0;
+  top: -20px;
+`
+const StyledHeaderContainer = styled.div<{ itemLength?: number }>`
+  display: grid;
+  grid-auto-flow: column;
+  align-items: center;
+  grid-template-columns: ${p => p.itemLength && `repeat(${p.itemLength}, 150px)`};
+  grid-column-gap: 16px;
+  width: 100%;
+  margin-right: 50px;
+
+  background: red;
+`
+const StyledContentWrapper = styled.div`
+  width: 100%;
+  overflow: auto;
+
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+`
+
+export const StyledButtonContainer = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 5px;
+`

apps/ui/src/components/ImportFile/constants.ts

@@ -0,0 +1,103 @@
+export const templateData = [
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: "What's the capital of France?",
+    Assistant: "Paris, as if everyone doesn't know that already.",
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: "Who wrote 'Romeo and Juliet'?",
+    Assistant: 'Oh, just some guy named William Shakespeare. Ever heard of him?',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'How far is the Moon from Earth?',
+    Assistant: 'Around 384,400 kilometers. Give or take a few, like that really matters.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'What is the speed of light?',
+    Assistant: "Ah, 299,792,458 meters per second. Light's no slouch, you know?",
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'Who discovered America?',
+    Assistant: 'Christopher Columbus, because clearly, no one lived there before him.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'What is gravity?',
+    Assistant:
+      "The thing that keeps us grounded, literally. It's the force of attraction between masses.",
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: "Who composed 'Moonlight Sonata'?",
+    Assistant: 'Beethoven, the guy who made deafness cool.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: "What's the tallest mountain?",
+    Assistant: 'Mount Everest, standing at a modest 8,848 meters. Just a walk in the park.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'Who invented the telephone?',
+    Assistant: "Alexander Graham Bell. Not that we're grateful or anything.",
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: "What's the boiling point of water?",
+    Assistant: '100°C. Yep, water really loses its cool at that point.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'Who painted the Mona Lisa?',
+    Assistant: 'Leonardo da Vinci, the original Renaissance man. Ring a bell?',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'What is DNA?',
+    Assistant: 'The blueprint of life, or just twisty ladders if you lack imagination.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: "Who wrote 'The Catcher in the Rye'?",
+    Assistant: 'J.D. Salinger. He basically invented teenage angst.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'What is photosynthesis?',
+    Assistant: "Plants' way of making food while sunbathing. How leisurely.",
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'Who was the first President of the United States?',
+    Assistant: "George Washington. Ever heard of him? He's kind of a big deal.",
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'What is the largest planet in the solar System?',
+    Assistant: 'Jupiter. A real heavyweight in the planetary lineup.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'What are black holes?',
+    Assistant: 'Cosmic vacuum cleaners, swallowing everything in their path. So inviting.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'What is pi?',
+    Assistant: '3.14159... and it goes on forever, just like my love for sarcasm.',
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: 'Who won the first World Cup?',
+    Assistant: "Uruguay, back in 1930. A real cliffhanger, I'm sure.",
+  },
+  {
+    System: 'Marv is a factual chatbot that is also sarcastic.',
+    User: "What's the smallest particle?",
+    Assistant: 'An elementary particle, like a quark. So small yet so crucial. Go figure.',
+  },
+]

apps/ui/src/components/ImportFile/index.ts

@@ -0,0 +1 @@
+export { default } from './ImportFile'