Merge pull request #9 from AI4Bharat/react-django

React Django Merge

backend/areas/views.py

@@ -2,6 +2,9 @@
 from rest_framework.response import Response
 from rest_framework.exceptions import NotFound
 import requests
+import base64 
+import ffmpeg
+import subprocess
 
 # Create your views here.
 from .models import Dataset, Tool, Model,News
@@ -15,6 +18,7 @@
 DHRUVA_MODEL_VIEW_URL = "https://api.dhruva.ekstep.ai/services/details/view_service"
 DHRUVA_API_KEY = "0aaef7ff-86f3-4bb0-a30b-9f50f3de1a52"
 
+
 @permission_classes((permissions.AllowAny,))
 class InferenceView(APIView):
     def post(self, request, format=None):
@@ -44,8 +48,60 @@ def post(self, request, format=None):
                                                     }
                                                 ]
                                                 })
+            return Response(inferenceResult.json(),status=status.HTTP_200_OK)
+
+        elif task == "asr":
+
+            INFERENCE_API = "https://api.dhruva.ekstep.ai/services/inference/asr"
+
+            webm_base64 = body["audioContent"]
+            webm_data = base64.b64decode(webm_base64)
+
+            with open("/tmp/temp.webm", "wb") as webm_file:
+                webm_file.write(webm_data)
+
+            subprocess.run(["ffmpeg","-y", "-i", "/tmp/temp.webm", "/tmp/temp.wav"], check=True)
+
+            with open("/tmp/temp.wav", "rb") as wav_file:
+                wav_data = wav_file.read()
+                wav_base64 = base64.b64encode(wav_data).decode('utf-8')
+
+
+            inferenceResult = requests.post(INFERENCE_API,headers=
+                                       {'x-auth-source': 'API_KEY',
+                                        'Authorization': DHRUVA_API_KEY},
+                                        json={
+                                                "controlConfig": {
+                                                    "dataTracking": True
+                                                },
+                                                "config": {
+                                                    "audioFormat": "wav",
+                                                    "language": {
+                                                    "sourceLanguage": body["sourceLanguage"],
+                                                    "sourceScriptCode": ""
+                                                    },
+                                                    "encoding": "wav",
+                                                    "samplingRate": body["samplingRate"],
+                                                    "serviceId": body["serviceId"],
+                                                    "preProcessors": body["preProcessors"],
+                                                    "postProcessors": body["postProcessors"],
+                                                    "transcriptionFormat": {
+                                                    "value": "transcript"
+                                                    },
+                                                    "bestTokenCount": 0
+                                                },
+                                                "audio": [
+                                                    {
+                                                    "audioContent": wav_base64,
+                                                    }
+                                                ]
+                                            }
+                                            )
+            return Response(inferenceResult.json(),status=status.HTTP_200_OK)
+
+
+
 
-        return Response(inferenceResult.json(),status=status.HTTP_200_OK)
 
 
 class NewsViewSet(viewsets.ModelViewSet):

frontend/components/Models.tsx

@@ -15,6 +15,7 @@ import { API_URL } from "@/app/config";
 import { useEffect, useState } from "react";
 import axios from "axios";
 import NMT from "./TryOut/NMT";
+import ASR from "./TryOut/ASR";
 import { FaPaperclip, FaGithub } from "react-icons/fa";
 
 const fetchModel = async ({ title }: { title: string }) => {
@@ -49,6 +50,13 @@ const renderTryOut = ({ area, model }: { area: string; model: Model }) => {
           serviceId={model.service_id}
         />
       );
+    case "ASR":
+      return (
+        <ASR
+          sourceLanguages={model.languageFilters.sourceLanguages}
+          serviceId={model.service_id}
+        />
+      );
   }
 };
 

frontend/components/TryOut/ASR.tsx

@@ -0,0 +1,68 @@
+"use client";
+import React from "react";
+import { useState } from "react";
+import {
+  FormControl,
+  FormLabel,
+  FormErrorMessage,
+  FormHelperText,
+  Select,
+  Textarea,
+  Button,
+  Card,
+  HStack,
+  VStack,
+  Switch,
+} from "@chakra-ui/react";
+import { LANGUAGE_CODE_NAMES } from "@/app/config";
+import axios from "axios";
+import { API_URL } from "@/app/config";
+import { useToast } from "@chakra-ui/react";
+import { FaMicrophone } from "react-icons/fa";
+import { AudioRecorder, useAudioRecorder } from "react-audio-voice-recorder";
+
+const fetchAudio = ({ blob }: { blob: Blob }) => {
+  const reader = new FileReader();
+  let base64data: string | ArrayBuffer | null;
+  reader.readAsDataURL(blob);
+  reader.onloadend = function () {
+    base64data = reader.result;
+    const audioString = (base64data as string).split(",")[1];
+    console.log(audioString);
+  };
+};
+
+interface LanguageCodeNames {
+  [key: string]: string;
+}
+
+export default function ASR({
+  sourceLanguages = [],
+  serviceId,
+}: {
+  sourceLanguages: Array<string>;
+  serviceId: string;
+}) {
+  const recorderControls = useAudioRecorder();
+  return (
+    <Card borderWidth={1} borderColor={"a4borange"} boxShadow={"2xl"} p={5}>
+      <FormControl isRequired>
+        <VStack>
+          <HStack>
+            <FormLabel textColor={"gray.500"}>
+              Select Source Language:
+            </FormLabel>
+            <Select></Select>
+          </HStack>
+        </VStack>
+        <VStack w={"full"}>
+          <AudioRecorder
+            onRecordingComplete={(blob) => fetchAudio({ blob: blob })}
+            recorderControls={recorderControls}
+          />
+          <Textarea isReadOnly></Textarea>
+        </VStack>
+      </FormControl>
+    </Card>
+  );
+}

frontend/components/TryOut/NMT.tsx

@@ -18,6 +18,7 @@ import { LANGUAGE_CODE_NAMES } from "@/app/config";
 import axios from "axios";
 import { API_URL } from "@/app/config";
 import { IndicTransliterate } from "@ai4bharat/indic-transliterate";
+import { useToast } from "@chakra-ui/react";
 
 const fetchTranslation = async ({
   sourceLanguage,
@@ -66,9 +67,11 @@ export default function NMT({
   const [inputText, setInputText] = useState("");
   const [outputText, setOutputText] = useState("");
 
+  const toast = useToast();
+
   return (
     <Card borderWidth={1} borderColor={"a4borange"} boxShadow={"2xl"} p={5}>
-      <FormControl>
+      <FormControl isRequired>
         <VStack>
           <HStack>
             <VStack>
@@ -130,26 +133,36 @@ export default function NMT({
               }}
               lang={sourceLanguage}
             />
-            {/* <Textarea
-              minWidth={270}
-              width={{ base: "90%", md: "80%", lg: "100%" }}
-              value={inputText}
-              onChange={(event) => {
-                setInputText(event.target.value);
-              }}
-            /> */}
             <Textarea value={outputText} isReadOnly></Textarea>
             <Button
               onClick={async () => {
                 setOutputText("");
-                const inferenceResult = await fetchTranslation({
-                  sourceLanguage,
-                  targetLanguage,
-                  input: inputText,
-                  task: "translation",
-                  serviceId,
-                });
-                setOutputText(inferenceResult["output"][0]["target"]);
+                if (inputText === "") {
+                  toast({
+                    title: "Input Error",
+                    description: "Provide text to be translated",
+                    status: "warning",
+                    duration: 5000,
+                    isClosable: true,
+                  });
+                } else {
+                  const inferenceResult = await fetchTranslation({
+                    sourceLanguage,
+                    targetLanguage,
+                    input: inputText,
+                    task: "translation",
+                    serviceId,
+                  });
+
+                  setOutputText(inferenceResult["output"][0]["target"]);
+                  toast({
+                    title: "Success",
+                    description: "Translation Inference Successful",
+                    status: "success",
+                    duration: 5000,
+                    isClosable: true,
+                  });
+                }
               }}
               color={"a4borange"}
             >

frontend/next.config.mjs

@@ -4,14 +4,6 @@ const nextConfig = {
   eslint: {
     ignoreDuringBuilds: true,
   },
-  // async rewrites() {
-  //   return [
-  //     {
-  //       source: "/:path*",
-  //       destination: "/",
-  //     },
-  //   ];
-  // },
   images: {
     unoptimized: true,
     domains: ["localhost", "admin.models.ai4bharat.org"], // Replace 'example.com' with the hostname of your image source

frontend/package.json

@@ -18,6 +18,7 @@
     "@mui/x-data-grid": "^7.14.0",
     "@types/react-syntax-highlighter": "^15.5.13",
     "axios": "^1.7.4",
+    "ffmpeg": "^0.0.4",
     "framer-motion": "^11.3.28",
     "html-react-parser": "^5.1.12",
     "markdown-to-jsx": "^7.5.0",

frontend/src/app/areas/model/[area]/[title]/page.tsx

@@ -1,6 +1,8 @@
 import { title } from "process";
 import ModelView from "../../../../../../components/Models";
 
+export const dynamicParams = true;
+
 interface Model {
   area: string;
   title: string;
@@ -26,7 +28,6 @@ export async function generateStaticParams() {
   return params;
 }
 
-export const dynamicParams = true;
 export default function Model({
   params,
 }: {

frontend/src/app/tools/[tool]/page.tsx

@@ -1,6 +1,8 @@
 import ToolComponent from "../../../../components/Dynamic/Tool";
 import axios from "axios";
 
+export const dynamicParams = true;
+
 interface ToolType {
   title: string;
 }
@@ -20,7 +22,7 @@ export async function generateStaticParams() {
 
   return params;
 }
-export const dynamicParams = true;
+
 export default function Tool({ params }: { params: { tool: string } }) {
   return <ToolComponent slug={params.tool} />;
 }