Merge pull request #47 from AI4Bharat/v1.0

UI Changes
AI4Bharat · Sep 9, 2024 · 313aa66 · 313aa66
2 parents 29e2637 + f34bb21
commit 313aa66
Show file tree

Hide file tree

Showing 7 changed files with 128 additions and 23 deletions.
diff --git a/frontend/components/AreaTimeline.tsx b/frontend/components/AreaTimeline.tsx
@@ -278,7 +278,17 @@ const Card = ({
             View Model
           </Button>
         ) : (
-          <></>
+          <Button
+            as={Link}
+            target="_blank"
+            href={website_link}
+            borderColor={"a4borange"}
+            variant={"outline"}
+            color={"a4borange"}
+            fontSize={15}
+          >
+            View Dataset
+          </Button>
         )}
       </Box>
     </HStack>

diff --git a/frontend/components/Datasets.tsx b/frontend/components/Datasets.tsx
@@ -34,11 +34,11 @@ import {
 } from "react-icons/fa";
 
 const datasetIcons: { [key: string]: React.ReactElement } = {
-  nmt: <FaLanguage color="orange" size={35} />,
-  llm: <FaFileAlt color="orange" size={35} />,
-  asr: <FaMicrophone color="orange" size={35} />,
-  tts: <FaVolumeUp color="orange" size={35} />,
-  xlit: <FaKeyboard color="orange" size={35} />,
+  nmt: <FaLanguage color="orange" size={20} />,
+  llm: <FaFileAlt color="orange" size={20} />,
+  asr: <FaMicrophone color="orange" size={20} />,
+  tts: <FaVolumeUp color="orange" size={20} />,
+  xlit: <FaKeyboard color="orange" size={20} />,
 };
 
 interface FeatureProps {
@@ -69,14 +69,10 @@ const Feature = ({ title, icon, dataset_link }: FeatureProps) => {
   return (
     <HStack as={Link} href={dataset_link}>
       <Flex
-        w={16}
-        h={16}
         align={"center"}
         justify={"center"}
         color={"white"}
         rounded={"full"}
-        // bg={"gray.100"}
-        mb={1}
       >
         {datasetIcons[icon]}
       </Flex>
@@ -113,7 +109,7 @@ export default function Datasets() {
       <Stack
         align={"center"}
         spacing={{ base: 8, md: 10 }}
-        py={{ base: 20, md: 28 }}
+        p={10}
         direction={{ base: "column", md: "row" }}
       >
         <Stack flex={1} spacing={{ base: 5, md: 10 }}>

diff --git a/frontend/components/Dynamic/Tool.tsx b/frontend/components/Dynamic/Tool.tsx
@@ -92,7 +92,7 @@ export default function ToolComponent({ slug }: { slug: string }) {
         py={{ base: 10, md: 18 }}
         direction={{ base: "column", md: "row" }}
       >
-        <Stack flex={1}>
+        <Stack flex={1} spacing={7}>
           <Heading
             lineHeight={1.1}
             fontWeight={600}
@@ -134,7 +134,11 @@ export default function ToolComponent({ slug }: { slug: string }) {
           {tool.main_video_hyperlink === "" ? (
             <></>
           ) : (
-            <ReactPlayer url={tool.main_video_hyperlink} controls />
+            <ReactPlayer
+              style={{ borderRadius: 50 }}
+              url={tool.main_video_hyperlink}
+              controls
+            />
           )}
         </Flex>
       </Stack>

diff --git a/frontend/components/Feedback.tsx b/frontend/components/Feedback.tsx
@@ -10,10 +10,69 @@ import {
   ModalCloseButton,
   useDisclosure,
   Button,
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  FormHelperText,
+  Textarea,
+  useRadio,
+  useRadioGroup,
+  Box,
+  HStack,
 } from "@chakra-ui/react";
+import { ReactElement, ReactSVGElement, useState } from "react";
+import { FaThumbsUp, FaThumbsDown } from "react-icons/fa";
+
+const thumbs: { [key: string]: ReactElement } = {
+  true: <FaThumbsUp color="orange" size={25} />,
+  false: <FaThumbsDown color="orange" size={25} />,
+};
+
+function RadioCard(props: any) {
+  const { getInputProps, getRadioProps } = useRadio(props);
+
+  const input = getInputProps();
+  const checkbox = getRadioProps();
+
+  return (
+    <Box as="label">
+      <input {...input} />
+      <Box
+        {...checkbox}
+        cursor="pointer"
+        borderWidth="1px"
+        borderRadius="md"
+        boxShadow="md"
+        _checked={{
+          bg: "a4borange",
+          color: "white",
+          borderColor: "teal.600",
+        }}
+        px={5}
+        py={3}
+      >
+        {props.children}
+      </Box>
+    </Box>
+  );
+}
 
 export default function Feedback() {
   const { isOpen, onOpen, onClose } = useDisclosure();
+
+  const [liked, setLiked] = useState("false");
+  const [comment, setComment] = useState("");
+
+  const options = ["true", "false"];
+
+  const { getRootProps, getRadioProps } = useRadioGroup({
+    name: "framework",
+    defaultValue: liked,
+    onChange: setLiked,
+  });
+
+  const group = getRootProps();
+
   return (
     <>
       <Button
@@ -29,20 +88,48 @@ export default function Feedback() {
       <Modal isOpen={isOpen} onClose={onClose}>
         <ModalOverlay />
         <ModalContent>
-          <ModalHeader>Modal Title</ModalHeader>
+          <ModalHeader>Model Feedback</ModalHeader>
           <ModalCloseButton />
           <ModalBody>
-            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Amet
-            asperiores rerum voluptate praesentium labore consequuntur a
-            perspiciatis. Explicabo distinctio sint vel illum? Architecto
-            doloribus vel placeat non quae et nesciunt.
+            <FormControl isRequired>
+              <FormLabel>Comment</FormLabel>
+              <Textarea
+                value={comment}
+                onChange={(event) => {
+                  setComment(event.target.value);
+                }}
+              />
+              <FormHelperText>
+                Provide your comment on the model's performance
+              </FormHelperText>
+              <br />
+              <HStack {...group}>
+                {options.map((value) => {
+                  const radio = getRadioProps({ value });
+                  return (
+                    <RadioCard key={value} {...radio}>
+                      {thumbs[value]}
+                    </RadioCard>
+                  );
+                })}
+              </HStack>
+            </FormControl>
           </ModalBody>
 
           <ModalFooter>
-            <Button colorScheme="blue" mr={3} onClick={onClose}>
-              Close
+            <Button
+              variant={"solid"}
+              color="a4borange"
+              mr={3}
+              isDisabled={comment === ""}
+              onClick={() => {
+                console.log({ comment: comment, liked: liked });
+                setComment("");
+                onClose();
+              }}
+            >
+              Submit Feedback
             </Button>
-            <Button variant="ghost">Secondary Action</Button>
           </ModalFooter>
         </ModalContent>
       </Modal>

diff --git a/frontend/components/Models.tsx b/frontend/components/Models.tsx
@@ -192,7 +192,7 @@ export default function ModelView({
                 borderColor={"a4borange"}
               >
                 <Text textColor={"a4borange"}>
-                  Downloads : {model.hfData.downloads}
+                  Downloads last month : {model.hfData.downloads}
                 </Text>
               </Box>
             ) : (

diff --git a/frontend/components/People.tsx b/frontend/components/People.tsx
@@ -91,7 +91,13 @@ const Card = ({ first_name, last_name, role, gradYear, photo }: CardProps) => {
       overflow="hidden"
       p={5}
     >
-      <Stack align={"start"} spacing={2}>
+      <Stack
+        alignContent={"center"}
+        justifyContent={"center"}
+        justifyItems={"center"}
+        alignItems={"center"}
+        spacing={1}
+      >
         {photo !== null ? (
           <Image
             src={photo}

diff --git a/frontend/components/ToolInstructionComponent.tsx b/frontend/components/ToolInstructionComponent.tsx
@@ -67,12 +67,14 @@ export default function ToolInstructions({
                   whiteSpace={"pre-wrap"}
                   borderRadius={15}
                   p={5}
+                  width={"fit-content"}
                   fontSize="sm"
                   color="gray.500"
                   textOverflow={"clip"}
                   display="flex"
                   justifyContent="space-between"
                   alignItems="center"
+                  mt={5}
                   gap={5}
                 >
                   {data.codeString}