Fixture - Slider Number (#345)

* 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

* Add number to slider

---------

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

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

@@ -1,4 +1,4 @@
-import React, { FC, useState } from "react";
+import React, { FC, useState, useEffect } from "react";
 import { Collapse } from "react-bootstrap";
 import parse from "html-react-parser";
 
@@ -23,8 +23,12 @@ const SimpleSliderNoExplanation: FC<SimpleSliderNoExplanationProps> = ({
 }) => {
   const [open, setOpen] = useState(initialOpen);
   const [selectedValue, setelectedValue] = useState("");
+  const [showTooltip, setShowTooltip] = useState(false);
+  const minValue = Number(optionsSlider[0]);
+  const maxValue = Number(optionsSlider[1]);
 
   const handleChange = (value: string) => {
+    setShowTooltip(true);
     const updatedResponses = { instructions: value };
 
     setelectedValue(value);
@@ -36,6 +40,20 @@ const SimpleSliderNoExplanation: FC<SimpleSliderNoExplanationProps> = ({
     );
   };
 
+  useEffect(() => {
+    let timeout: NodeJS.Timeout | undefined;
+
+    if (showTooltip) {
+      timeout = setTimeout(() => {
+        setShowTooltip(false);
+      }, 1500);
+    }
+
+    return () => {
+      clearTimeout(timeout);
+    };
+  }, [showTooltip]);
+
   return (
     <div className="py-2 ">
       <div
@@ -53,14 +71,30 @@ const SimpleSliderNoExplanation: FC<SimpleSliderNoExplanationProps> = ({
       </div>
       <Collapse in={open}>
         <div className="flex items-center justify-center px-20 pt-2">
-          <div className="w-full">
+          <div className="w-full relative">
             <h3 className="my-3 text-base normal-case text-letter-color">
               {parse(instructions_slider)}
             </h3>
             <div className="flex items-center justify-between">
               <p className="text-sm text-gray-600">{optionsSlider[0]}</p>
               <p className="text-sm text-gray-600">{optionsSlider[1]}</p>
             </div>
+            {showTooltip && (
+              <div
+                className={`absolute bottom-0 transform -translate-x-1/2 -translate-y-6 bg-gray-800 text-white text-sm px-2 py-1 rounded-md transition-opacity duration-1000 ${
+                  showTooltip ? "opacity-0" : "opacity-100"
+                }"`}
+                style={{
+                  left: `${
+                    ((Number(selectedValue) - minValue) /
+                      (maxValue - minValue)) *
+                    100
+                  }%`,
+                }}
+              >
+                {selectedValue}
+              </div>
+            )}
             <input
               type="range"
               min={optionsSlider[0]}