From d4ec6d94aff8ae26682981182e9b5fea2859cba8 Mon Sep 17 00:00:00 2001 From: Shanks0465 Date: Wed, 28 Aug 2024 17:06:35 +0530 Subject: [PATCH] Moved Area to Dynamic Component --- frontend/components/Dynamic/Area.tsx | 121 ++++++++++++++++++++++++ frontend/next.config.mjs | 1 + frontend/src/app/areas/[slug]/page.tsx | 125 +------------------------ 3 files changed, 126 insertions(+), 121 deletions(-) create mode 100644 frontend/components/Dynamic/Area.tsx diff --git a/frontend/components/Dynamic/Area.tsx b/frontend/components/Dynamic/Area.tsx new file mode 100644 index 0000000..b673f19 --- /dev/null +++ b/frontend/components/Dynamic/Area.tsx @@ -0,0 +1,121 @@ +"use client"; +import { + chakra, + Link, + Stack, + Box, + Button, + useColorModeValue, + Container, + Flex, + Text, + Heading, + VStack, +} from "@chakra-ui/react"; +import { useQuery } from "react-query"; +import axios from "axios"; +import { API_URL } from "@/app/config"; +import { useEffect, useState } from "react"; +import AreaTimeline from "../AreaTimeline"; +import { title } from "process"; + +const areaInfo: { [key: string]: { title: string; description: string } } = { + nmt: { + title: "Machine Translation", + description: + "AI4Bharat is a pioneering initiative focused on building open-source AI solutions that address challenges unique to India. One of their significant contributions is in the field of machine translation, where they aim to bridge the linguistic diversity of the country. AI4Bharat has developed state-of-the-art models that facilitate the translation of text between Indian languages, enabling seamless communication across different linguistic communities. Their work includes creating large-scale datasets, fine-tuning models for regional languages, and ensuring these tools are accessible to developers and researchers. This initiative not only promotes inclusivity but also helps preserve the rich linguistic heritage of India by making digital content available in multiple languages.", + }, + llm: { + title: "Large Language Models", + description: `At AI4Bharat, our dedication to building language models and datasets for all 22 constitutionally + recognized Indian languages is central to our mission. We employ a multifaceted approach, leveraging + large-scale data crawling, synthetic data creation, and human annotation/crowd collections to create + comprehensive datasets. Our efforts have resulted in an extensive pretraining corpus of 251 million + tokens across 22 languages, complemented by 74.7 million prompt-response pairs in 20 Indian + languages. Tools like Setu play a crucial role in large-scale crawling and data cleaning, enabling + us to build state-of-the-art models such as Airavata, IndicBART, and IndicBERT. We also emphasize + rigorous evaluation of our models, as demonstrated by our works like FBI, IndicXTREME, IndicNLG, and + IndicGLUE, which set new benchmarks in language model performance. Looking ahead, we are committed + to expanding our pretraining corpora to support the development of even more robust generative + models, while ensuring diversity in their generation capabilities, thereby advancing the frontier of + language technology for India’s diverse linguistic landscape.`, + }, +}; + +const fetchAreaData = async (slug: string) => { + try { + const response = await axios.get(`${API_URL}/area/${slug}/`); + return response.data; + } catch (error) { + console.error("Error fetching filterOptions:", error); + return []; + } +}; + +export default function AreaComponent({ slug }: { slug: string }) { + const [areaData, setAreaData] = useState([]); + + const { data, isLoading, error } = useQuery("fetchAreaData", () => + fetchAreaData(slug.toUpperCase()) + ); + + useEffect(() => { + if (!isLoading && !error) { + setAreaData(data); + } + console.log(data); + }, [data, isLoading, error]); + + return ( + + {areaInfo[slug] ? ( + + + + + {areaInfo[slug].title} + + + + To know more about our contributions over the years see the + timeline below! + + + + + {areaInfo[slug].description} + + + + ) : ( + <> + )} + + {areaInfo[slug] ? : <>} + + + ); +} diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs index 43722ea..436c51b 100644 --- a/frontend/next.config.mjs +++ b/frontend/next.config.mjs @@ -13,6 +13,7 @@ const nextConfig = { // ]; // }, images: { + unoptimized: true, domains: ["localhost", "admin.models.ai4bharat.org"], // Replace 'example.com' with the hostname of your image source }, }; diff --git a/frontend/src/app/areas/[slug]/page.tsx b/frontend/src/app/areas/[slug]/page.tsx index 0d22df9..df4bdc4 100644 --- a/frontend/src/app/areas/[slug]/page.tsx +++ b/frontend/src/app/areas/[slug]/page.tsx @@ -1,57 +1,4 @@ -"use client"; -import { useParams } from "next/navigation"; -import { - chakra, - Link, - Stack, - Box, - Button, - useColorModeValue, - Container, - Flex, - Text, - Heading, - VStack, -} from "@chakra-ui/react"; -import { useQuery } from "react-query"; -import axios from "axios"; -import { API_URL } from "@/app/config"; -import { useEffect, useState } from "react"; -import AreaTimeline from "../../../../components/AreaTimeline"; -import { title } from "process"; - -const areaInfo = { - nmt: { - title: "Machine Translation", - description: - "AI4Bharat is a pioneering initiative focused on building open-source AI solutions that address challenges unique to India. One of their significant contributions is in the field of machine translation, where they aim to bridge the linguistic diversity of the country. AI4Bharat has developed state-of-the-art models that facilitate the translation of text between Indian languages, enabling seamless communication across different linguistic communities. Their work includes creating large-scale datasets, fine-tuning models for regional languages, and ensuring these tools are accessible to developers and researchers. This initiative not only promotes inclusivity but also helps preserve the rich linguistic heritage of India by making digital content available in multiple languages.", - }, - llm: { - title: "Large Language Models", - description: `At AI4Bharat, our dedication to building language models and datasets for all 22 constitutionally - recognized Indian languages is central to our mission. We employ a multifaceted approach, leveraging - large-scale data crawling, synthetic data creation, and human annotation/crowd collections to create - comprehensive datasets. Our efforts have resulted in an extensive pretraining corpus of 251 million - tokens across 22 languages, complemented by 74.7 million prompt-response pairs in 20 Indian - languages. Tools like Setu play a crucial role in large-scale crawling and data cleaning, enabling - us to build state-of-the-art models such as Airavata, IndicBART, and IndicBERT. We also emphasize - rigorous evaluation of our models, as demonstrated by our works like FBI, IndicXTREME, IndicNLG, and - IndicGLUE, which set new benchmarks in language model performance. Looking ahead, we are committed - to expanding our pretraining corpora to support the development of even more robust generative - models, while ensuring diversity in their generation capabilities, thereby advancing the frontier of - language technology for India’s diverse linguistic landscape.`, - }, -}; - -const fetchAreaData = async (slug: string) => { - try { - const response = await axios.get(`${API_URL}/area/${slug}/`); - return response.data; - } catch (error) { - console.error("Error fetching filterOptions:", error); - return []; - } -}; +import AreaComponent from "../../../../components/Dynamic/Area"; export async function generateStaticParams() { const areas = ["xlit", "nmt", "asr", "tts", "llm"]; @@ -61,72 +8,8 @@ export async function generateStaticParams() { })); } -export default function Areas() { - const params = useParams(); - const slug = params.slug as keyof typeof areaInfo; - const [areaData, setAreaData] = useState([]); - - const { data, isLoading, error } = useQuery("fetchAreaData", () => - fetchAreaData(slug.toUpperCase()) - ); - - useEffect(() => { - if (!isLoading && !error) { - setAreaData(data); - } - console.log(data); - }, [data, isLoading, error]); +export default function Areas({ params }) { + const slug = params.slug; - return ( - - {areaInfo[slug] ? ( - - - - - {areaInfo[slug].title} - - - - To know more about our contributions over the years see the - timeline below! - - - - - {areaInfo[slug].description} - - - - ) : ( - <> - )} - - {areaInfo[slug] ? : <>} - - - ); + return ; }