feat: make description field be a universal optional field when creat…

…e model (#151) Because - #145 - Before this commit, description stay in the configuration field. After the refactoring of backend, it becomes a field just like id but optional This commit - make description field be a universal optional field when create model - close #145
instill-ai · Jul 12, 2022 · f7718a5 · f7718a5
1 parent d466a09
commit f7718a5
Show file tree

Hide file tree

Showing 3 changed files with 117 additions and 56 deletions.
diff --git a/src/components/forms/model/CreateModelForm/CreateModelForm.tsx b/src/components/forms/model/CreateModelForm/CreateModelForm.tsx
@@ -165,6 +165,7 @@ const CreateNewModelFlow: FC = () => {
         const payload: CreateGithubModelPayload = {
           id: values.id,
           model_definition: "model-definitions/github",
+          description: values.description ?? null,
           configuration: {
             repository: values.repo,
           },
@@ -214,7 +215,7 @@ const CreateNewModelFlow: FC = () => {
 
         const payload: CreateLocalModelPayload = {
           id: values.id,
-          desctiption: values.description ? values.description : "",
+          description: values.description ? values.description : "",
           model_definition: "model-definitions/local",
           configuration: {
             content: values.file,
@@ -261,6 +262,7 @@ const CreateNewModelFlow: FC = () => {
         const payload: CreateArtivcModelPayload = {
           id: values.id,
           model_definition: "model-definitions/artivc",
+          description: values.description ?? null,
           configuration: {
             url: values.gcsBucketPath,
             credential: values.credentials,
@@ -307,7 +309,7 @@ const CreateNewModelFlow: FC = () => {
         const payload: CreateHuggingFaceModelPayload = {
           id: values.id,
           model_definition: "model-definitions/huggingface",
-          desctiption: values.description ?? null,
+          description: values.description ?? null,
           configuration: {
             repo_id: values.huggingFaceRepo,
           },
@@ -513,22 +515,33 @@ const CreateNewModelFlow: FC = () => {
               required={true}
             />
             {values.modelDefinition === "github" ? (
-              <TextField
-                id="modelRepo"
-                name="repo"
-                label="GitHub repository"
-                additionalMessageOnLabel={null}
-                description="The name of a public GitHub repository, e.g. `instill-ai/yolov4`."
-                value={values.repo}
-                error={errors.repo || null}
-                additionalOnChangeCb={null}
-                disabled={modelCreated ? true : false}
-                readOnly={false}
-                required={true}
-                placeholder=""
-                type="text"
-                autoComplete="off"
-              />
+              <>
+                <TextArea
+                  id="description"
+                  name="description"
+                  label="Description"
+                  description="Fill with a short description of your new model"
+                  value={values.description}
+                  error={errors.description || null}
+                  disabled={modelCreated ? true : false}
+                />
+                <TextField
+                  id="modelRepo"
+                  name="repo"
+                  label="GitHub repository"
+                  additionalMessageOnLabel={null}
+                  description="The name of a public GitHub repository, e.g. `instill-ai/yolov4`."
+                  value={values.repo}
+                  error={errors.repo || null}
+                  additionalOnChangeCb={null}
+                  disabled={modelCreated ? true : false}
+                  readOnly={false}
+                  required={true}
+                  placeholder=""
+                  type="text"
+                  autoComplete="off"
+                />
+              </>
             ) : null}
             {values.modelDefinition === "local" ? (
               <>
@@ -559,6 +572,15 @@ const CreateNewModelFlow: FC = () => {
             ) : null}
             {values.modelDefinition === "artivc" ? (
               <>
+                <TextArea
+                  id="description"
+                  name="description"
+                  label="Description"
+                  description="Fill with a short description of your new model"
+                  value={values.description}
+                  error={errors.description || null}
+                  disabled={modelCreated ? true : false}
+                />
                 <TextField
                   id="gcsBucketPath"
                   name="gcsBucketPath"
@@ -587,6 +609,17 @@ const CreateNewModelFlow: FC = () => {
             ) : null}
             {values.modelDefinition === "huggingface" ? (
               <>
+                <TextArea
+                  id="description"
+                  name="description"
+                  label="Description"
+                  description="Fill with a short description of your new model"
+                  value={values.description}
+                  error={errors.description || null}
+                  disabled={modelCreated ? true : false}
+                  enableCounter={true}
+                  counterWordLimit={1023}
+                />
                 <TextField
                   id="huggingFaceRepo"
                   name="huggingFaceRepo"
@@ -603,17 +636,6 @@ const CreateNewModelFlow: FC = () => {
                   type="text"
                   autoComplete="off"
                 />
-                <TextArea
-                  id="description"
-                  name="description"
-                  label="Description"
-                  description="Fill with a short description of your new model"
-                  value={values.description}
-                  error={errors.description || null}
-                  disabled={modelCreated ? true : false}
-                  enableCounter={true}
-                  counterWordLimit={1023}
-                />
               </>
             ) : null}
             <div className="flex flex-row">

diff --git a/...omponents/forms/pipeline/CreatePipelineForm/SetupModelStep/CreateNewModelInstanceFlow.tsx b/...omponents/forms/pipeline/CreatePipelineForm/SetupModelStep/CreateNewModelInstanceFlow.tsx
@@ -187,6 +187,7 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
       const payload: CreateGithubModelPayload = {
         id: values.model.new.id,
         model_definition: "model-definitions/github",
+        description: values.model.new.description ?? null,
         configuration: {
           repository: values.model.new.repo,
         },
@@ -234,9 +235,7 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
 
       const payload: CreateLocalModelPayload = {
         id: values.model.new.id,
-        desctiption: values.model.new.description
-          ? values.model.new.description
-          : "",
+        description: values.model.new.description ?? null,
         model_definition: "model-definitions/local",
         configuration: {
           content: values.model.new.file,
@@ -278,6 +277,7 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
       const payload: CreateArtivcModelPayload = {
         id: values.model.new.id,
         model_definition: "model-definitions/artivc",
+        description: values.model.new.description ?? null,
         configuration: {
           url: values.model.new.gcsBucketPath,
           credential: values.model.new.credentials,
@@ -324,7 +324,7 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
       const payload: CreateHuggingFaceModelPayload = {
         id: values.model.new.id,
         model_definition: "model-definitions/huggingface",
-        desctiption: values.model.new.description ?? null,
+        description: values.model.new.description ?? null,
         configuration: {
           repo_id: values.model.new.huggingFaceRepo,
         },
@@ -512,22 +512,32 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
         required={true}
       />
       {values.model.new.modelDefinition === "github" ? (
-        <TextField
-          id="modelRepo"
-          name="model.new.repo"
-          label="GitHub repository"
-          additionalMessageOnLabel={null}
-          description="The name of a public GitHub repository, e.g. `instill-ai/yolov4`."
-          value={values.model.new.repo}
-          error={errors.model?.new?.repo || null}
-          additionalOnChangeCb={null}
-          disabled={modelCreated ? true : false}
-          readOnly={false}
-          required={true}
-          placeholder=""
-          type="text"
-          autoComplete="off"
-        />
+        <>
+          <TextArea
+            id="description"
+            name="model.new.description"
+            label="Description"
+            description="Fill with a short description of your new model"
+            value={values.model.new.description}
+            error={errors.model?.new?.description || null}
+          />
+          <TextField
+            id="modelRepo"
+            name="model.new.repo"
+            label="GitHub repository"
+            additionalMessageOnLabel={null}
+            description="The name of a public GitHub repository, e.g. `instill-ai/yolov4`."
+            value={values.model.new.repo}
+            error={errors.model?.new?.repo || null}
+            additionalOnChangeCb={null}
+            disabled={modelCreated ? true : false}
+            readOnly={false}
+            required={true}
+            placeholder=""
+            type="text"
+            autoComplete="off"
+          />
+        </>
       ) : null}
       {values.model.new.modelDefinition === "local" ? (
         <>
@@ -557,6 +567,14 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
       ) : null}
       {values.model.new.modelDefinition === "artivc" ? (
         <>
+          <TextArea
+            id="description"
+            name="model.new.description"
+            label="Description"
+            description="Fill with a short description of your new model"
+            value={values.model.new.description}
+            error={errors.model?.new?.description || null}
+          />
           <TextField
             id="gcsBucketPath"
             name="model.new.gcsBucketPath"
@@ -585,6 +603,14 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
       ) : null}
       {values.model.new.modelDefinition === "huggingface" ? (
         <>
+          <TextArea
+            id="description"
+            name="model.new.description"
+            label="Description"
+            description="Fill with a short description of your new model"
+            value={values.model.new.description}
+            error={errors.model?.new?.description || null}
+          />
           <TextField
             id="huggingFaceRepo"
             name="model.new.huggingFaceRepo"
@@ -615,7 +641,7 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
         <BasicProgressMessageBox
           state={createModelMessageBoxState}
           setState={setCreateModelMessageBoxState}
-          width="w-[25vw]"
+          width="w-[15vw]"
           closable={true}
         />
         <PrimaryButton
@@ -647,7 +673,7 @@ const CreateNewModelInstanceFlow: FC<CreateNewModelInstanceFlowProps> = ({
             <BasicProgressMessageBox
               state={deployModelInstanceMessageBoxState}
               setState={setDeployModelInstanceMessageBoxState}
-              width="w-[25vw]"
+              width="w-[15vw]"
               closable={true}
             />
             <PrimaryButton

diff --git a/src/lib/instill/model/mutations.ts b/src/lib/instill/model/mutations.ts
@@ -9,6 +9,7 @@ export type CreateGithubModelConfiguration = {
 export type CreateGithubModelPayload = {
   id: string;
   model_definition: string;
+  description: Nullable<string>;
   configuration: CreateGithubModelConfiguration;
 };
 
@@ -22,7 +23,14 @@ export const createGithubModelMutation = async (
   try {
     const { data } = await axios.post<CreateGithubModelResponse>(
       `${process.env.NEXT_PUBLIC_MODEL_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/models`,
-      payload
+      {
+        id: payload.id,
+        model_definition: payload.model_definition,
+        description: payload.description ?? undefined,
+        configuration: {
+          repository: payload.configuration.repository,
+        },
+      }
     );
     return Promise.resolve(data.model);
   } catch (err) {
@@ -36,7 +44,7 @@ export type CreateLocalModelConfiguration = {
 
 export type CreateLocalModelPayload = {
   id: string;
-  desctiption: string;
+  description: Nullable<string>;
   model_definition: string;
   configuration: CreateLocalModelConfiguration;
 };
@@ -51,10 +59,13 @@ export const createLocalModelMutation = async (
   try {
     const formData = new FormData();
     formData.append("id", payload.id);
-    formData.append("description", payload.desctiption);
     formData.append("model_definition", payload.model_definition);
     formData.append("content", payload.configuration.content);
 
+    if (payload.description) {
+      formData.append("description", payload.description);
+    }
+
     const { data } = await axios.post<CreateLocalModelResponse>(
       `${process.env.NEXT_PUBLIC_MODEL_BACKEND_BASE_URL}/${process.env.NEXT_PUBLIC_API_VERSION}/models:multipart`,
       formData,
@@ -78,6 +89,7 @@ export type ArtivcConfiguration = {
 export type CreateArtivcModelPayload = {
   id: string;
   model_definition: string;
+  description: Nullable<string>;
   configuration: ArtivcConfiguration;
 };
 
@@ -94,6 +106,7 @@ export const createArtivcModelMutation = async (
       {
         id: payload.id,
         model_definition: payload.model_definition,
+        description: payload.description ?? undefined,
         configuration: {
           url: payload.configuration.url,
           credential: payload.configuration.credential
@@ -115,7 +128,7 @@ export type HuggingFaceConfiguration = {
 export type CreateHuggingFaceModelPayload = {
   id: string;
   model_definition: string;
-  desctiption: Nullable<string>;
+  description: Nullable<string>;
   configuration: HuggingFaceConfiguration;
 };
 
@@ -132,7 +145,7 @@ export const createHuggingFaceModelMutation = async (
       {
         id: payload.id,
         model_definition: payload.model_definition,
-        description: payload.desctiption,
+        description: payload.description ?? undefined,
         configuration: {
           repo_id: payload.configuration.repo_id,
         },