Merge pull request #30 from AI4Bharat/react-django

Added Area Hero Buttons and Latest Model
AI4Bharat · Sep 5, 2024 · d87d936 · d87d936
2 parents 80e02b8 + b5c291b
commit d87d936
Show file tree

Hide file tree

Showing 2 changed files with 98 additions and 63 deletions.
diff --git a/frontend/components/Dynamic/Area.tsx b/frontend/components/Dynamic/Area.tsx
@@ -1,7 +1,6 @@
 "use client";
 import {
   chakra,
-  Link,
   Stack,
   Box,
   Button,
@@ -17,7 +16,8 @@ import axios from "axios";
 import { API_URL } from "@/app/config";
 import { useEffect, useState } from "react";
 import AreaTimeline from "../AreaTimeline";
-import { title } from "process";
+import Link from "next/link";
+import { imagePrefix } from "@/app/config";
 
 const areaInfo: { [key: string]: { title: string; description: string } } = {
   nmt: {
@@ -74,6 +74,7 @@ const fetchAreaData = async (slug: string) => {
 
 export default function AreaComponent({ slug }: { slug: string }) {
   const [areaData, setAreaData] = useState([]);
+  const [latest, setLatest] = useState("");
 
   const { data, isLoading, error } = useQuery("fetchAreaData", () =>
     fetchAreaData(slug.toUpperCase())
@@ -82,8 +83,13 @@ export default function AreaComponent({ slug }: { slug: string }) {
   useEffect(() => {
     if (!isLoading && !error) {
       setAreaData(data);
+      data.forEach((element: any) => {
+        if (element.latest) {
+          setLatest(element.title);
+          console.log(element.title);
+        }
+      });
     }
-    console.log(data);
   }, [data, isLoading, error]);
 
   return (
@@ -105,6 +111,25 @@ export default function AreaComponent({ slug }: { slug: string }) {
                 {areaInfo[slug].title}
               </Text>
             </Heading>
+            {latest !== "" ? (
+              <Link
+                href={`${imagePrefix}/areas/model/${slug.toUpperCase()}/${latest}`}
+              >
+                <Button
+                  rounded={"full"}
+                  size={"lg"}
+                  fontWeight={"normal"}
+                  px={6}
+                  textColor={"white"}
+                  bg={"a4borange"}
+                  _hover={{ bg: "red.500" }}
+                >
+                  Try Out the Latest Model
+                </Button>
+              </Link>
+            ) : (
+              <></>
+            )}
             <Text textColor={"a4borange"}>
               To know more about our contributions over the years see the
               timeline below!

diff --git a/frontend/components/Hero.tsx b/frontend/components/Hero.tsx
@@ -15,7 +15,10 @@ import {
   IconProps,
   useColorModeValue,
   Divider,
+  Wrap,
 } from "@chakra-ui/react";
+import Link from "next/link";
+import { imagePrefix } from "@/app/config";
 
 import Features from "./Features";
 import Datasets from "./Datasets";
@@ -57,66 +60,73 @@ export default function Hero() {
             in real-world use cases, making a significant impact across
             academia, industry, and government sectors.
           </Text>
-          {/* <Stack
-            spacing={{ base: 4, sm: 6 }}
-            direction={{ base: "column", sm: "row" }}
-          >
-            <Button
-              rounded={"full"}
-              size={"lg"}
-              fontWeight={"normal"}
-              px={6}
-              colorScheme={"red"}
-              bg={"red.400"}
-              _hover={{ bg: "red.500" }}
-            >
-              XLIT
-            </Button>
-            <Button
-              rounded={"full"}
-              size={"lg"}
-              fontWeight={"normal"}
-              px={6}
-              colorScheme={"red"}
-              bg={"red.400"}
-              _hover={{ bg: "red.500" }}
-            >
-              MT
-            </Button>
-            <Button
-              rounded={"full"}
-              size={"lg"}
-              fontWeight={"normal"}
-              px={6}
-              colorScheme={"red"}
-              bg={"red.400"}
-              _hover={{ bg: "red.500" }}
-            >
-              ASR
-            </Button>
-            <Button
-              rounded={"full"}
-              size={"lg"}
-              fontWeight={"normal"}
-              px={6}
-              colorScheme={"red"}
-              bg={"red.400"}
-              _hover={{ bg: "red.500" }}
-            >
-              TTS
-            </Button>
-            <Button
-              rounded={"full"}
-              size={"lg"}
-              fontWeight={"normal"}
-              px={6}
-              colorScheme={"red"}
-              bg={"red.400"}
-              _hover={{ bg: "red.500" }}
-            >
-              LLMs
-            </Button>
-          </Stack> */}
+          <Wrap>
+            <Link href={`${imagePrefix}/areas/xlit`}>
+              <Button
+                rounded={"full"}
+                size={"lg"}
+                fontWeight={"normal"}
+                px={6}
+                colorScheme={"red"}
+                bg={"red.400"}
+                _hover={{ bg: "red.500" }}
+              >
+                XLIT
+              </Button>
+            </Link>
+            <Link href={`${imagePrefix}/areas/nmt`}>
+              <Button
+                rounded={"full"}
+                size={"lg"}
+                fontWeight={"normal"}
+                px={6}
+                colorScheme={"red"}
+                bg={"red.400"}
+                _hover={{ bg: "red.500" }}
+              >
+                NMT
+              </Button>
+            </Link>
+            <Link href={`${imagePrefix}/areas/asr`}>
+              <Button
+                rounded={"full"}
+                size={"lg"}
+                fontWeight={"normal"}
+                px={6}
+                colorScheme={"red"}
+                bg={"red.400"}
+                _hover={{ bg: "red.500" }}
+              >
+                ASR
+              </Button>
+            </Link>
+            <Link href={`${imagePrefix}/areas/tts`}>
+              <Button
+                rounded={"full"}
+                size={"lg"}
+                fontWeight={"normal"}
+                px={6}
+                colorScheme={"red"}
+                bg={"red.400"}
+                _hover={{ bg: "red.500" }}
+              >
+                TTS
+              </Button>
+            </Link>
+            <Link href={`${imagePrefix}/areas/llm`}>
+              <Button
+                rounded={"full"}
+                size={"lg"}
+                fontWeight={"normal"}
+                px={6}
+                colorScheme={"red"}
+                bg={"red.400"}
+                _hover={{ bg: "red.500" }}
+              >
+                LLMs
+              </Button>
+            </Link>
+          </Wrap>
         </Stack>
         <Flex
           flex={1}