Fixture - Slider and Chat (#344)

* Update model methods to run background task when creating the endpoint and creating score endpoint for runpod to use

* Handle error from Runpod, URL inference from yaml file

* Update backend/app/api/endpoints/base/score.py

Co-authored-by: Rafael Mosquera <rafael.mosquera@factored.ai>

* Rename method

* rename endpoint

* Print background tasks and correct typo

* Correct typos and correct schemas

* model uid

* remove c

* ad ta to metada (facepalm)

* add update publish status to make change the publish state of the models

* change order of background tasks

* print instead of raising error for the second background task to run

* New components required by ps-on-ai challenge

* rename component

* New Big components and update chatbot

* add style to be included from the beginning

* Fix for the rabio button selection to stick and allow the input text for the chatbot to grow a little bit bigger

* add more time to generate_text

* remove print

* Improve get distinctive context, correct use of context inside component and manage data in radio buttons

---------

Co-authored-by: Rafael Mosquera <rafael.mosquera@factored.ai>

backend/app/domain/services/base/context.py

@@ -353,6 +353,6 @@ def upload_new_contexts(self, task_id, file):
     def get_distinct_context(self, user_id: int, round_id: int):
         context = self.context_repository.get_distinct_context(round_id, user_id)
         if not context:
-            return {"context": None}
+            return None
 
-        return {"context": context}
+        return context

backend/app/infrastructure/repositories/context.py

@@ -106,6 +106,7 @@ def get_distinct_context(self, round_id: int, user_id: int):
                 isouter=True,
             )
             .filter(self.model.r_realid == round_id)
+            .filter(Example.id.is_(None))
             .order_by(func.rand())
             .first()
         )

frontends/web/src/new_front/components/CreateSamples/CreateSamples/AnnotationInterfaces/Contexts/AnnotationContextStrategy.tsx

@@ -17,7 +17,7 @@ import { BarLoader } from "react-spinners";
 import { ContextConfigType } from "new_front/types/createSamples/createSamples/annotationContext";
 
 const Import = (
-  module: string,
+  module: string
 ): LazyExoticComponent<ComponentType<AnnotationFactoryType>> =>
   React.lazy(() => import(`./${module}`).catch(() => import(`./GoalFallback`)));
 
@@ -35,6 +35,7 @@ const AnnotationContextStrategy: FC<Props & ContextAnnotationFactoryType> = ({
   setIsGenerativeContext,
   setPartialSampleId,
   userId,
+  setContextInfo = () => {},
 }) => {
   const [goalRender, setGoalRender] =
     useState<ReactElement<ContextConfigType & ContextAnnotationFactoryType>>();
@@ -53,9 +54,10 @@ const AnnotationContextStrategy: FC<Props & ContextAnnotationFactoryType> = ({
             setIsGenerativeContext,
             setPartialSampleId,
             userId,
+            setContextInfo,
             ...config,
           }}
-        />,
+        />
       );
     };
     getView();

frontends/web/src/new_front/components/CreateSamples/CreateSamples/AnnotationInterfaces/Contexts/ChatRandomWithInstructions.tsx

@@ -1,6 +1,5 @@
 import React, { FC, useContext, useEffect, useState, useCallback } from "react";
 import { useLocation, useHistory } from "react-router-dom";
-import MDEditor from "@uiw/react-md-editor";
 import Modal from "react-bootstrap/Modal";
 import queryString from "query-string";
 import useFetch from "use-http";
@@ -26,34 +25,30 @@ const ChatWithInstructions: FC<
   setIsGenerativeContext,
   context,
   realRoundId,
+  setContextInfo,
 }) => {
   const artifactsInput = generative_context.artifacts;
   const [signInConsent, setSignInConsent] = useState(true);
   const [callLoading, setCallLoading] = useState(true);
-  const [showExample, setShowExample] = useState(false);
-  const [showInstructions, setShowInstructions] = useState(false);
   const [chatHistory, setChatHistory] = useState<ChatHistoryType>({
     user: [],
     bot: [],
   });
   const [modelName, setModelName] = useState({});
   const [provider, setProvider] = useState("");
-  const [newContext, setNewContext] = useState<any>();
+  const [localContext, setLocalContext] = useState(null);
   const [agreeText, setAgreeText] = useState(null);
   const [consentTerms, setConsentTerms] = useState(null);
   const [finishConversation, setFinishConversation] = useState(false);
   const [readInstructions, setReadInstructions] = useState(
     artifactsInput?.jump_instructions ? true : false
   );
   const { updateModelInputs } = useContext(CreateInterfaceContext);
-  const [example, setExample] = useState("");
   const { get, post, response, loading } = useFetch();
   const { user } = useContext(UserContext);
   const location = useLocation();
   const history = useHistory();
 
-  const queryParams = queryString.parse(location.search);
-
   const bringConsentTerms = useCallback(async () => {
     await get(`/task/get_task_consent?task_id=${taskId}`);
     if (response.ok) {
@@ -93,23 +88,40 @@ const ChatWithInstructions: FC<
         get(`/task/get_random_provider_and_model_info?task_id=${taskId}`),
       ]);
       if (response.ok) {
-        if (!contextResponse.context || !modelResponse.provider) {
+        if (!contextResponse || !modelResponse.provider) {
           Swal.fire({
-            title: !contextResponse.context
+            title: !contextResponse
               ? "No more tasks"
               : "No models or providers",
-            text: !contextResponse.context
+            text: !contextResponse
               ? "You have no more task to complete in this round"
               : "There are no models or providers available for this task",
-            icon: !contextResponse.context ? "success" : "error",
+            icon: !contextResponse ? "success" : "error",
             confirmButtonText: "Ok",
           }).then(() => {
-            history.goBack();
+            //got to task page
+            if (location.pathname.includes("tasks")) {
+              const newPath = location.pathname
+                .split("/")
+                .slice(0, -1)
+                .join("/");
+              history.push(newPath);
+            } else {
+              history.goBack();
+            }
           });
+        } else {
+          setModelName({ [modelResponse.provider]: modelResponse.model });
+          setProvider(modelResponse.provider);
+          setLocalContext(contextResponse.context_json);
+          const newContext = {
+            context_id: contextResponse.id,
+            current_context: contextResponse.context_json,
+            real_round_id: realRoundId,
+            tag: contextResponse.tag,
+          };
+          setContextInfo?.(newContext);
         }
-        setNewContext(contextResponse.context);
-        setModelName({ [modelResponse.provider]: modelResponse.model });
-        setProvider(modelResponse.provider);
       }
     } catch (error) {
       console.log("error", error);
@@ -136,64 +148,6 @@ const ChatWithInstructions: FC<
         <>
           {signInConsent ? (
             <>
-              <div className="flex items-end justify-between align-end">
-                <button
-                  type="button"
-                  className="my-2 btn btn-outline-primary btn-sm btn-help-info"
-                  onClick={() => {
-                    setShowInstructions(!showInstructions);
-                  }}
-                >
-                  <span className="text-base font-normal text-letter-color">
-                    Instructions
-                  </span>
-                </button>
-                {showInstructions && (
-                  <Modal
-                    show={showInstructions}
-                    onHide={() => {
-                      setShowInstructions(false);
-                    }}
-                    size="lg"
-                  >
-                    <Modal.Header closeButton>
-                      <Modal.Title>Instructions</Modal.Title>
-                    </Modal.Header>
-                    <Modal.Body>
-                      <MDEditor.Markdown source={context.instructions} />
-                    </Modal.Body>
-                  </Modal>
-                )}
-                <button
-                  type="button"
-                  className="my-2 btn btn-outline-primary btn-sm btn-help-info"
-                  onClick={() => {
-                    setShowExample(!showExample);
-                  }}
-                >
-                  <span className="text-base font-normal text-letter-color">
-                    Example
-                  </span>
-                </button>
-                {showExample && (
-                  <>
-                    <Modal
-                      show={showExample}
-                      onHide={() => {
-                        setShowExample(false);
-                      }}
-                      size="lg"
-                    >
-                      <Modal.Header closeButton>
-                        <Modal.Title>Example</Modal.Title>
-                      </Modal.Header>
-                      <Modal.Body>
-                        <MDEditor.Markdown source={example} />
-                      </Modal.Body>
-                    </Modal>
-                  </>
-                )}
-              </div>
               {
                 //if jump_instructions is true and exist in
                 //generative context under artifacts, then
@@ -262,9 +216,7 @@ const ChatWithInstructions: FC<
                   </div>
                   <div className="col-span-1">
                     <div className="px-4 overflow-y-auto max-h-96">
-                      <BasicInstructions
-                        instructions={newContext?.context_json}
-                      />
+                      <BasicInstructions instructions={localContext} />
                     </div>
                   </div>
                 </div>

frontends/web/src/new_front/components/CreateSamples/CreateSamples/AnnotationInterfaces/UserInput/HorizontalRadioButtonOptions.tsx

@@ -13,6 +13,7 @@ const HorizontalRadioButtonOptions: FC<
   instruction,
   field_name_for_the_model,
   initiate_open,
+  metadata,
 }) => {
   const { updateModelInputs } = useContext(CreateInterfaceContext);
 
@@ -30,6 +31,7 @@ const HorizontalRadioButtonOptions: FC<
               field_name_for_the_model={field_name_for_the_model}
               onInputChange={updateModelInputs}
               InitialOpen={initiate_open}
+              metadata={metadata}
             />
           </AnnotationInstruction>
         </>

frontends/web/src/new_front/components/CreateSamples/CreateSamples/AnnotationInterfaces/UserInput/SimpleSlider.tsx

@@ -1,4 +1,4 @@
-import SimpleSliderNoExplaination from "new_front/components/Inputs/SimpleSliderNoExplaination";
+import SimpleSliderNoExplanation from "new_front/components/Inputs/SimpleSliderNoExplanation";
 import AnnotationInstruction from "new_front/components/OverlayInstructions/Annotation";
 import { CreateInterfaceContext } from "new_front/context/CreateInterface/Context";
 import { AnnotationFactoryType } from "new_front/types/createSamples/createSamples/annotationFactory";
@@ -12,20 +12,22 @@ const SimpleSlider: FC<AnnotationFactoryType & AnnotationUserInput> = ({
   metadata,
   options_slider,
   instructions_slider,
+  initiate_open,
 }) => {
   const { updateModelInputs } = useContext(CreateInterfaceContext);
 
   return (
     <>
       {instructions && options_slider && (
         <AnnotationInstruction placement="left" tooltip={instruction || "Rate"}>
-          <SimpleSliderNoExplaination
+          <SimpleSliderNoExplanation
             optionsSlider={options_slider}
             instructions_slider={instructions_slider || "Select a value"}
             instructions={instructions}
             field_name_for_the_model={field_name_for_the_model}
             metadata={metadata}
             onInputChange={updateModelInputs}
+            initialOpen={initiate_open}
           />
         </AnnotationInstruction>
       )}

frontends/web/src/new_front/components/Inputs/BasicInstructions.tsx

@@ -3,12 +3,12 @@ import React from "react";
 const BasicInstructions = ({ instructions }: any) => {
   return (
     <div className="flex flex-col items-start justify-center pt-8">
-      <h1 className="text-2xl font-bold">{instructions.title}</h1>
-      <p className="pt-3 text-lg">{instructions.description}</p>
-      <h4 className="pt-3 text-xl font-bold">{instructions.heading_1}</h4>
-      <p className="pt-3 text-lg">{instructions.body_1}</p>
-      <h4 className="pt-3 text-xl font-bold">{instructions.heading_2}</h4>
-      <p className="pt-3 text-lg">{instructions.body_2}</p>
+      <h1 className="text-2xl font-bold">{instructions?.title}</h1>
+      <p className="pt-3 text-lg">{instructions?.description}</p>
+      <h4 className="pt-3 text-xl font-bold">{instructions?.heading_1}</h4>
+      <p className="pt-3 text-lg">{instructions?.body_1}</p>
+      <h4 className="pt-3 text-xl font-bold">{instructions?.heading_2}</h4>
+      <p className="pt-3 text-lg">{instructions?.body_2}</p>
     </div>
   );
 };

frontends/web/src/new_front/components/Inputs/SimpleSliderNoExplaination.tsx → frontends/web/src/new_front/components/Inputs/SimpleSliderNoExplanation.tsx

@@ -2,31 +2,32 @@ import React, { FC, useState } from "react";
 import { Collapse } from "react-bootstrap";
 import parse from "html-react-parser";
 
-type SimpleSliderNoExplainationProps = {
+type SimpleSliderNoExplanationProps = {
   instructions: string;
   optionsSlider: string[];
   field_name_for_the_model: string;
   metadata?: boolean;
   instructions_slider: string;
   onInputChange: (data: any, metadata?: boolean) => void;
+  initialOpen?: boolean;
 };
 
-const SimpleSliderNoExplaination: FC<SimpleSliderNoExplainationProps> = ({
+const SimpleSliderNoExplanation: FC<SimpleSliderNoExplanationProps> = ({
   instructions,
   optionsSlider = ["0", "100"],
   field_name_for_the_model,
   metadata,
   instructions_slider,
   onInputChange,
+  initialOpen = true,
 }) => {
-  const [open, setOpen] = useState(false);
+  const [open, setOpen] = useState(initialOpen);
   const [selectedValue, setelectedValue] = useState("");
 
   const handleChange = (value: string) => {
     const updatedResponses = { instructions: value };
 
     setelectedValue(value);
-
     onInputChange(
       {
         [field_name_for_the_model]: updatedResponses,
@@ -74,4 +75,4 @@ const SimpleSliderNoExplaination: FC<SimpleSliderNoExplainationProps> = ({
     </div>
   );
 };
-export default SimpleSliderNoExplaination;
+export default SimpleSliderNoExplanation;

frontends/web/src/new_front/pages/CreateSamples/CreateInterface.tsx

@@ -214,6 +214,11 @@ const CreateInterface = () => {
                     setPartialSampleId={setPartialSampleId}
                     setIsGenerativeContext={setIsGenerativeContext}
                     userId={user.id!}
+                    setContextInfo={
+                      (taskConfiguration?.context as any)?.context_for_start
+                        ? undefined
+                        : setTaskContextInfo
+                    }
                   />
                 )}
               </div>

frontends/web/src/new_front/types/createSamples/createSamples/annotationFactory.ts

@@ -11,4 +11,5 @@ export type ContextAnnotationFactoryType = AnnotationFactoryType & {
   taskId?: number;
   realRoundId: number;
   userId?: number;
+  setContextInfo?: (taskContextInfo: any) => void;
 };