Merge pull request #71 from cloudera/new-templates-dev

UI Issues that have been resolved by the PR:

Evaluate button in top section is disabled always (now it is fixed)
Re-evaluate does not work properly
The AiAssitant icon has been added for the Generate Custom Prompt button and the position is moved to the top right
MaxToken has been removed from Parameters section

Author: Khauneesh-AI

app/client/src/pages/DataGenerator/AiAssistantIcon.tsx

@@ -0,0 +1,58 @@
+/*******************************************************************************
+ * CLOUDERA APPLIED MACHINE LEARNING PROTOTYPE (AMP)
+ * (C) Cloudera, Inc. 2024
+ * All rights reserved.
+ *
+ * Applicable Open Source License: Apache 2.0
+ *
+ * NOTE: Cloudera open source products are modular software products
+ * made up of hundreds of individual components, each of which was
+ * individually copyrighted.  Each Cloudera open source product is a
+ * collective work under U.S. Copyright Law. Your license to use the
+ * collective work is as provided in your written agreement with
+ * Cloudera.  Used apart from the collective work, this file is
+ * licensed for your use pursuant to the open source license
+ * identified above.
+ *
+ * This code is provided to you pursuant a written agreement with
+ * (i) Cloudera, Inc. or (ii) a third-party authorized to distribute
+ * this code. If you do not have a written agreement with Cloudera nor
+ * with an authorized and properly licensed third party, you do not
+ * have any rights to access nor to use this code.
+ *
+ * Absent a written agreement with Cloudera, Inc. ("Cloudera") to the
+ * contrary, A) CLOUDERA PROVIDES THIS CODE TO YOU WITHOUT WARRANTIES OF ANY
+ * KIND; (B) CLOUDERA DISCLAIMS ANY AND ALL EXPRESS AND IMPLIED
+ * WARRANTIES WITH RESPECT TO THIS CODE, INCLUDING BUT NOT LIMITED TO
+ * IMPLIED WARRANTIES OF TITLE, NON-INFRINGEMENT, MERCHANTABILITY AND
+ * FITNESS FOR A PARTICULAR PURPOSE; (C) CLOUDERA IS NOT LIABLE TO YOU,
+ * AND WILL NOT DEFEND, INDEMNIFY, NOR HOLD YOU HARMLESS FOR ANY CLAIMS
+ * ARISING FROM OR RELATED TO THE CODE; AND (D)WITH RESPECT TO YOUR EXERCISE
+ * OF ANY RIGHTS GRANTED TO YOU FOR THE CODE, CLOUDERA IS NOT LIABLE FOR ANY
+ * DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, PUNITIVE OR
+ * CONSEQUENTIAL DAMAGES INCLUDING, BUT NOT LIMITED TO, DAMAGES
+ * RELATED TO LOST REVENUE, LOST PROFITS, LOSS OF INCOME, LOSS OF
+ * BUSINESS ADVANTAGE OR UNAVAILABILITY, OR LOSS OR CORRUPTION OF
+ * DATA.
+ ******************************************************************************/
+import React from "react";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const AiAssistantIcon = (props: any) =>
+  /*#__PURE__*/ React.createElement(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      width: "1em",
+      height: "1em",
+      className: "cdp-icon-ai-assistant",
+      ...props,
+    },
+    /*#__PURE__*/ React.createElement("path", {
+      d: "M2 7.207l3.838-1.383L7.207 2 8.58 5.824l3.833 1.383-3.833 1.378-1.374 3.83-1.396-3.83-3.812-1.378zM3.5 18.174l2.82-1.016 1.006-2.81 1.01 2.81 2.816 1.016-2.817 1.012L7.325 22 6.3 19.186l-2.8-1.012zM8.865 13.06l4.842-1.745 1.726-4.823 1.732 4.823L22 13.059l-4.835 1.737-1.732 4.83-1.76-4.83-4.808-1.737z",
+      fill: "currentColor",
+    }),
+  );
+
+export default AiAssistantIcon;

app/client/src/pages/DataGenerator/Configure.tsx

@@ -26,9 +26,13 @@ export const StyledTextArea = styled(Input.TextArea)`
 `;
 
 export const USECASE_OPTIONS = [
+    // { label: 'Lending Dataset', value: 'lending_dataset' },
+    // { label: 'Credit Card History', value: 'credit_card_history' },
+    // { label: 'Housing Dataset', value: 'housing_dataset' },
     { label: 'Code Generation', value: 'code_generation' },
     { label: 'Text to SQL', value: 'text2sql' },
-    { label: 'Custom', value: 'custom' }
+    { label: 'Custom', value: 'custom' },
+
 ];
 
 export const WORKFLOW_OPTIONS = [

app/client/src/pages/DataGenerator/CustomPromptButton.tsx

@@ -4,6 +4,7 @@ import { useMutation } from "@tanstack/react-query";
 import styled from "styled-components";
 import { fetchCustomPrompt } from "./hooks";
 import Loading from "../Evaluator/Loading";
+import AiAssistantIcon from "./AiAssistantIcon";
 
 interface Props {
     model_id: string;
@@ -45,6 +46,12 @@ const StyledFlex = styled(Flex)`
   flex-direction: row-reverse;
 `;
 
+const StyledIcon = styled.div`
+  svg {
+    font-size: 20px;
+  }
+`;
+
 
 const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_endpoint, use_case, example_path, setPrompt }) => {
   const [form] = Form.useForm();
@@ -92,13 +99,19 @@ const CustomPromptButton: React.FC<Props> = ({ model_id, inference_type, caii_en
 
   return (
     <>
-      <Button onClick={() => setShowModal(true)} style={{ marginLeft: '8px' }}>Generate Custom Prompt</Button>
+      <Button type="link" 
+        onClick={() => setShowModal(true)} 
+        style={{ marginLeft: '8px' }} 
+        icon={
+          <StyledIcon><AiAssistantIcon /></StyledIcon>
+        }>Generate Prompt</Button>
       {showModal && 
         (
             <StyledModal
               visible={showModal}
               okText={`Generate`}
               title={`Generate Custom Prompt`}
+              onClose={() => setShowModal(false)}
               footer={
                 <Row>
                   <Col sm={12} />    

app/client/src/pages/DataGenerator/Parameters.tsx

@@ -185,7 +185,7 @@ const Parameters = () => {
                     </Col>
                 </Row>
             </StyledFormItem>
-            <StyledFormItem
+            {/* <StyledFormItem
                 name={['model_parameters', ModelParameters.MAX_TOKENS]}
                 label={<ParamLabel>{LABELS[ModelParameters.MAX_TOKENS]}</ParamLabel>}
                 labelCol={{ span: 24 }}
@@ -215,7 +215,7 @@ const Parameters = () => {
                         />
                     </Col>
                 </Row>
-            </StyledFormItem>
+            </StyledFormItem> */}
         </>
 
     )

app/client/src/pages/DataGenerator/Prompt.tsx

@@ -26,6 +26,13 @@ const FormLabel = styled(Title)`
 const StyledFormItem = styled(Form.Item)`
     margin-bottom: 0px;
 `;
+
+const StyledPromptFormItem = styled(StyledFormItem)`
+    label {
+        width: 100%;
+    }
+`;
+
 const RestoreDefaultBtn = styled(Button)`
     max-width: fit-content;
 `;
@@ -191,22 +198,37 @@ const Prompt = () => {
             <LeftCol span={17}>
                 <Flex vertical gap={14}>
                     <div>
-                        <StyledFormItem
+                        <StyledPromptFormItem
                             name='custom_prompt'
                             label={
-                                <FormLabel level={4}>
+                                <div style={{ width: '100%', height: '32px', display: 'flex' }}>
+                                <FormLabel level={4} style={{ width: '240px'}}>
                                     <Space>
                                         <>{'Prompt'}</>
                                         <TooltipIcon message={'Enter a prompt to describe your dataset'}/>
                                     </Space>
                                 </FormLabel>
+                                <Flex style={{ flexDirection: 'row-reverse', width: '100%' }}>
+                                    {(form.getFieldValue('use_case') === Usecases.CUSTOM.toLowerCase() ||
+                                        workflow_type === WorkflowType.CUSTOM_DATA_GENERATION) &&  
+                                        <CustomPromptButton 
+                                            model_id={model_id}
+                                            inference_type={inference_type}
+                                            caii_endpoint={caii_endpoint}
+                                            use_case={useCase}
+                                            example_path={form.getFieldValue('example_path') || null}
+                                            setPrompt={setPrompt}
+                                        />
+                                    }
+                                    </Flex>
+                                </div>
                             }
                             labelCol={{ span: 24 }}
                             wrapperCol={{ span: 24 }}
                             shouldUpdate
                         >
                             <StyledTextArea autoSize placeholder={'Enter a prompt'}/>
-                        </StyledFormItem>
+                        </StyledPromptFormItem>
                         <RestoreDefaultBtn
                             onClick={() => {
                                 return Modal.warning({
@@ -229,21 +251,10 @@ const Prompt = () => {
                                     ),
                                     maskClosable: true,
                                 })
-                            }}
-                        >
-                            {'Restore'}
+                            }}>
+                                {'Restore'}
                         </RestoreDefaultBtn>
-                        {(form.getFieldValue('use_case') === Usecases.CUSTOM.toLowerCase() ||
-                            workflow_type === WorkflowType.CUSTOM_DATA_GENERATION) &&  
-                            <CustomPromptButton 
-                                model_id={model_id}
-                                inference_type={inference_type}
-                                caii_endpoint={caii_endpoint}
-                                use_case={useCase}
-                                example_path={form.getFieldValue('example_path') || null}
-                                setPrompt={setPrompt}
-                            />
-                        }
+                        
                     </div>
                     {((workflow_type === WorkflowType.CUSTOM_DATA_GENERATION && !isEmpty(doc_paths)) ||
                     (workflow_type === WorkflowType.SUPERVISED_FINE_TUNING && !isEmpty(doc_paths))) && 

app/client/src/pages/DataGenerator/constants.ts

@@ -2,7 +2,9 @@ import { ModelProviders, ModelProvidersDropdownOpts } from './types';
 
 export const MODEL_PROVIDER_LABELS = {
   [ModelProviders.BEDROCK]: 'AWS Bedrock',
-  [ModelProviders.CAII]: 'Cloudera AI Inference Service'
+  [ModelProviders.CAII]: 'Cloudera AI Inference Service',
+  [ModelProviders.GOOGLE_GEMINI]: 'Google Gemini',
+  [ModelProviders.AZURE_OPENAI]: 'Azure OpenAI',
 };
 
 export const MIN_SEED_INSTRUCTIONS = 1

app/client/src/pages/DataGenerator/types.ts

@@ -16,7 +16,9 @@ export enum Usecases {
 
 export enum ModelProviders {
     BEDROCK = 'aws_bedrock',
-    CAII = 'CAII'
+    CAII = 'CAII',
+    AZURE_OPENAI = 'AZURE_OPENAI',
+    GOOGLE_GEMINI = 'GOOGLE_GEMINI',
 }
 
 export type ModelProvidersDropdownOpts = { label: string, value: ModelProviders }[];

app/client/src/pages/Evaluator/ReevaluatorPage.tsx

@@ -51,7 +51,9 @@ const ReevaluatorPage: React.FC = () => {
   }, [evaluate]);
 
   const evaluateDataset = async (formData: unknown) => {
-    const response = await fetch(`${BASE_API_URL}/synthesis/evaluate`, {
+    const url = dataset.technique === 'freeforms' ? 
+        `${BASE_API_URL}/synthesis/evaluate` : `${BASE_API_URL}/synthesis/evaluate_freeform`;
+    const response = await fetch(url, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',

app/client/src/pages/Home/EvaluateButton.tsx

@@ -17,8 +17,8 @@ const EvaluateButton: React.FC = () => {
     const {data, isLoading} = useDatasets();
 
     useEffect(() => {
-        if(!isEmpty(data?.datasets)) {
-            setDatasets(data?.datasets);
+        if(!isEmpty(data?.data)) {
+            setDatasets(data?.data);
         }
     }, [data]);