From b81e2821968e636ae402a71028a2e0c0f7ec15cf Mon Sep 17 00:00:00 2001
From: Shanks0465 <umashanks99@gmail.com>
Date: Thu, 29 Aug 2024 18:37:43 +0530
Subject: [PATCH 1/7] Empty Input NMT Handling

---
 frontend/components/TryOut/NMT.tsx | 47 +++++++++++++++++++-----------
 1 file changed, 30 insertions(+), 17 deletions(-)

diff --git a/frontend/components/TryOut/NMT.tsx b/frontend/components/TryOut/NMT.tsx
index 27a5f8b..81635ad 100644
--- a/frontend/components/TryOut/NMT.tsx
+++ b/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"}
             >

From a2c1cc5dc93c38a84580ed459267d425f0c307e2 Mon Sep 17 00:00:00 2001
From: Shanks0465 <umashanks99@gmail.com>
Date: Thu, 29 Aug 2024 22:26:05 +0530
Subject: [PATCH 2/7] Recorder Test

---
 frontend/components/Models.tsx     |  3 ++
 frontend/components/TryOut/ASR.tsx | 68 ++++++++++++++++++++++++++++++
 frontend/next.config.mjs           | 10 +----
 frontend/package-lock.json         | 15 +++++++
 frontend/package.json              |  1 +
 5 files changed, 88 insertions(+), 9 deletions(-)
 create mode 100644 frontend/components/TryOut/ASR.tsx

diff --git a/frontend/components/Models.tsx b/frontend/components/Models.tsx
index 41bf4e2..b9ba043 100644
--- a/frontend/components/Models.tsx
+++ b/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,8 @@ const renderTryOut = ({ area, model }: { area: string; model: Model }) => {
           serviceId={model.service_id}
         />
       );
+    case "ASR":
+      return <ASR />;
   }
 };
 
diff --git a/frontend/components/TryOut/ASR.tsx b/frontend/components/TryOut/ASR.tsx
new file mode 100644
index 0000000..0686550
--- /dev/null
+++ b/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 }) => {
+  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>
+  );
+}
diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
index e73acfa..c5c1b95 100644
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -1,17 +1,9 @@
 const nextConfig = {
   basePath: process.env.BASE_PATH || "",
-  output: "export",
+  // output: "export",
   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
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 0f61f46..9d9f385 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -17,6 +17,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",
@@ -4472,6 +4473,14 @@
         "url": "https://github.com/sponsors/wooorm"
       }
     },
+    "node_modules/ffmpeg": {
+      "version": "0.0.4",
+      "resolved": "https://registry.npmjs.org/ffmpeg/-/ffmpeg-0.0.4.tgz",
+      "integrity": "sha512-3TgWUJJlZGQn+crJFyhsO/oNeRRnGTy6GhgS98oUCIfZrOW5haPPV7DUfOm3xJcHr5q3TJpjk2GudPutrNisRA==",
+      "dependencies": {
+        "when": ">= 0.0.1"
+      }
+    },
     "node_modules/file-entry-cache": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-6.0.1.tgz",
@@ -9458,6 +9467,12 @@
         "webidl-conversions": "^3.0.0"
       }
     },
+    "node_modules/when": {
+      "version": "3.7.8",
+      "resolved": "https://registry.npmjs.org/when/-/when-3.7.8.tgz",
+      "integrity": "sha512-5cZ7mecD3eYcMiCH4wtRPA5iFJZ50BJYDfckI5RRpQiktMiYTcn0ccLTZOvcbBume+1304fQztxeNzNS9Gvrnw==",
+      "license": "MIT"
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index e1fb3b4..7ad4834 100644
--- a/frontend/package.json
+++ b/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",

From 295a20221c8c330a6e71023162e540046b5fa375 Mon Sep 17 00:00:00 2001
From: Shanks0465 <umashanks99@gmail.com>
Date: Fri, 30 Aug 2024 01:48:46 +0530
Subject: [PATCH 3/7] Added ASR Inference Support

---
 backend/areas/views.py | 58 +++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 57 insertions(+), 1 deletion(-)

diff --git a/backend/areas/views.py b/backend/areas/views.py
index 6671510..b2008be 100644
--- a/backend/areas/views.py
+++ b/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):

From 2341d0961f6154b8792f202b60a64e9fb0d6cba3 Mon Sep 17 00:00:00 2001
From: Shanks0465 <umashanks99@gmail.com>
Date: Fri, 30 Aug 2024 14:45:17 +0530
Subject: [PATCH 4/7] Set dynamicParams True

---
 frontend/src/app/areas/model/[area]/[title]/page.tsx | 3 ++-
 frontend/src/app/tools/[tool]/page.tsx               | 4 +++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/frontend/src/app/areas/model/[area]/[title]/page.tsx b/frontend/src/app/areas/model/[area]/[title]/page.tsx
index 2aa067c..fd837c4 100644
--- a/frontend/src/app/areas/model/[area]/[title]/page.tsx
+++ b/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,
 }: {
diff --git a/frontend/src/app/tools/[tool]/page.tsx b/frontend/src/app/tools/[tool]/page.tsx
index f1af121..688a371 100644
--- a/frontend/src/app/tools/[tool]/page.tsx
+++ b/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} />;
 }

From cf25cf86eb8c5d3fe501ee08badddb0d7408eac8 Mon Sep 17 00:00:00 2001
From: Shanks0465 <umashanks99@gmail.com>
Date: Fri, 30 Aug 2024 14:49:17 +0530
Subject: [PATCH 5/7] Added ASR Component Params

---
 frontend/components/Models.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/frontend/components/Models.tsx b/frontend/components/Models.tsx
index b9ba043..36568a1 100644
--- a/frontend/components/Models.tsx
+++ b/frontend/components/Models.tsx
@@ -51,7 +51,12 @@ const renderTryOut = ({ area, model }: { area: string; model: Model }) => {
         />
       );
     case "ASR":
-      return <ASR />;
+      return (
+        <ASR
+          sourceLanguages={model.languageFilters.sourceLanguages}
+          serviceId={model.service_id}
+        />
+      );
   }
 };
 

From e90ec0094e2bb34e5db8bd7bade68c3765635bdf Mon Sep 17 00:00:00 2001
From: Shanks0465 <umashanks99@gmail.com>
Date: Fri, 30 Aug 2024 14:51:10 +0530
Subject: [PATCH 6/7] Added Blob type to fetchAudio

---
 frontend/components/TryOut/ASR.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/components/TryOut/ASR.tsx b/frontend/components/TryOut/ASR.tsx
index 0686550..a5fc997 100644
--- a/frontend/components/TryOut/ASR.tsx
+++ b/frontend/components/TryOut/ASR.tsx
@@ -21,7 +21,7 @@ import { useToast } from "@chakra-ui/react";
 import { FaMicrophone } from "react-icons/fa";
 import { AudioRecorder, useAudioRecorder } from "react-audio-voice-recorder";
 
-const fetchAudio = ({ blob }) => {
+const fetchAudio = ({ blob }: { blob: Blob }) => {
   const reader = new FileReader();
   let base64data: string | ArrayBuffer | null;
   reader.readAsDataURL(blob);

From 04eb47caaad01e68614e0e26bde301f5256157cb Mon Sep 17 00:00:00 2001
From: Shanks0465 <umashanks99@gmail.com>
Date: Fri, 30 Aug 2024 14:54:52 +0530
Subject: [PATCH 7/7] Added Export Param to Config

---
 frontend/next.config.mjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/next.config.mjs b/frontend/next.config.mjs
index c5c1b95..b85dbe9 100644
--- a/frontend/next.config.mjs
+++ b/frontend/next.config.mjs
@@ -1,6 +1,6 @@
 const nextConfig = {
   basePath: process.env.BASE_PATH || "",
-  // output: "export",
+  output: "export",
   eslint: {
     ignoreDuringBuilds: true,
   },