Skip to content

Commit

Permalink
Support for Multiple Dhruva Services on Try Out
Browse files Browse the repository at this point in the history
  • Loading branch information
@Shanks0465
Shanks0465 committed Aug 31, 2024
1 parent ab2f289 commit 68cb5e4
Show file tree
Hide file tree
Showing 4 changed files with 338 additions and 75 deletions.
29 changes: 13 additions & 16 deletions frontend/components/Models.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -39,27 +39,17 @@ interface Model {
github_link: string | undefined;
title: string;
description?: string;
services: any;
}

const renderTryOut = ({ area, model }: { area: string; model: Model }) => {
const renderTryOut = ({ area, services }: { area: string; services: any }) => {
switch (area) {
case "NMT":
return (
<NMT
sourceLanguages={model.languageFilters.sourceLanguages}
targetLanguages={model.languageFilters.targetLanguages}
serviceId={model.service_id}
/>
);
return <NMT services={services} />;
case "ASR":
return (
<ASR
sourceLanguages={model.languageFilters.sourceLanguages}
serviceId={model.service_id}
/>
);
return <ASR services={services} />;
case "XLIT":
return <XLIT sourceLanguages={model.languageFilters.sourceLanguages} />;
return <XLIT services={services} />;
}
};

Expand All @@ -80,6 +70,7 @@ export default function ModelView({
github_link: string | undefined;
title: string;
description?: string;
services: any;
}>({
title: "",
description: "",
Expand All @@ -90,6 +81,7 @@ export default function ModelView({
inferenceSchema: {},
languageFilters: {},
service_id: "",
services: {},
});

const {
Expand All @@ -110,6 +102,7 @@ export default function ModelView({
inferenceSchema: {},
languageFilters: {},
service_id: "",
services: {},
});
} else {
setModel(modelData);
Expand Down Expand Up @@ -210,7 +203,11 @@ export default function ModelView({
position={"relative"}
w={"full"}
>
{modelLoading ? <></> : renderTryOut({ area: area, model: model })}
{modelLoading ? (
<></>
) : (
renderTryOut({ area: area, services: model.services })
)}
</Flex>
) : (
<></>
Expand Down
177 changes: 155 additions & 22 deletions frontend/components/TryOut/ASR.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,56 +13,189 @@ import {
HStack,
VStack,
Switch,
Checkbox,
Box,
Stack,
} 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";
import { headers } from "next/headers";

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);
};
const preProcessors = ["vad"];
const postProcessors = ["itn", "punctuation"];

const fetchAudioTranscription = async ({
sourceLanguage,
audioContent,
task,
serviceId,
samplingRate,
preProcessors,
postProcessors,
}: {
sourceLanguage: string;
audioContent: string;
task: string;
serviceId: string;
samplingRate: number;
preProcessors: Array<string>;
postProcessors: Array<string>;
}) => {
try {
const response = await axios.post(`${API_URL}/inference/`, {
sourceLanguage: sourceLanguage,
audioContent: audioContent,
task: task,
serviceId: serviceId,
samplingRate: samplingRate,
preProcessors: preProcessors,
postProcessors: postProcessors,
});
console.log(response.data);
} catch (error) {
console.error("Error fetching inference:", error);
return {};
}
};

interface LanguageCodeNames {
[key: string]: string;
}

export default function ASR({
sourceLanguages = [],
serviceId,
}: {
sourceLanguages: Array<string>;
serviceId: string;
}) {
export default function ASR({ services }: { services: any }) {
const recorderControls = useAudioRecorder();
const [service, setService] = useState(Object.keys(services)[0]);
const [preProcessor, setPreProcessor] = useState<string[]>([]);
const [postProcessor, setPostProcessor] = useState<string[]>([]);
const [samplingRate, setSamplingRate] = useState(16000);
const [sourceLanguage, setSourceLanguage] = useState(
services[Object.keys(services)[0]]["languageFilters"]["sourceLanguages"][0]
);
const [outputText, setOutputText] = useState("");

const fetchAudio = async ({ blob }: { blob: Blob }) => {
const reader = new FileReader();
let base64data: string | ArrayBuffer | null;
reader.readAsDataURL(blob);
reader.onloadend = async function () {
base64data = reader.result;
const audioString = (base64data as string).split(",")[1];
const response = await axios.post(`${API_URL}/inference/`, {
sourceLanguage: sourceLanguage,
audioContent: audioString,
task: "asr",
serviceId: service,
samplingRate: samplingRate,
preProcessors: preProcessor,
postProcessors: postProcessor,
});
const result = response.data;
if ("output" in result) {
setOutputText(result["output"][0]["source"]);
}
};
};

const handlePreCheckboxChange = (value: string) => {
setPreProcessor((prev) =>
prev.includes(value)
? prev.filter((item) => item !== value)
: [...prev, value]
);
console.log(preProcessor);
};

const handlePostCheckboxChange = (value: string) => {
setPostProcessor((prev) =>
prev.includes(value)
? prev.filter((item) => item !== value)
: [...prev, value]
);
console.log(postProcessor);
};

return (
<Card borderWidth={1} borderColor={"a4borange"} boxShadow={"2xl"} p={5}>
<FormControl isRequired>
<VStack>
<FormLabel textColor={"gray.500"}>Select Service:</FormLabel>
<Select
value={service}
onChange={(event) => {
setService(event.target.value);
setSourceLanguage(
services[event.target.value]["languageFilters"][
"sourceLanguages"
][0]
);
}}
>
{Object.entries(services).map(([key, val]) => (
<option key={key} value={key}>
{key}
</option>
))}
</Select>
<FormLabel textColor={"gray.500"}>Select Source Language:</FormLabel>
<Select></Select>
<Select onChange={(event) => setSourceLanguage(event.target.value)}>
{services[service].languageFilters.sourceLanguages.map(
(language: string) => (
<option key={language} value={language}>
{(LANGUAGE_CODE_NAMES as LanguageCodeNames)[language]}
</option>
)
)}
</Select>
<FormLabel textColor={"gray.500"}>Select Pre Processors:</FormLabel>
<Select></Select>
<Box>
<HStack spacing={4}>
{preProcessors.map((option) => (
<Checkbox
key={option}
isChecked={preProcessor.includes(option)}
onChange={() => handlePreCheckboxChange(option)}
>
{option}
</Checkbox>
))}
</HStack>
</Box>
<FormLabel textColor={"gray.500"}>Select Post Processors:</FormLabel>
<Select></Select>
<Box>
<HStack spacing={4}>
{postProcessors.map((option) => (
<Checkbox
key={option}
isChecked={postProcessor.includes(option)}
onChange={() => handlePostCheckboxChange(option)}
>
{option}
</Checkbox>
))}
</HStack>
</Box>
<FormLabel textColor={"gray.500"}>Select Sampling Rate:</FormLabel>
<Select></Select>
<Select
onChange={(event) => setSamplingRate(parseInt(event.target.value))}
>
<option value={8000}>8000</option>
<option value={16000}>16000</option>
<option value={48000}>48000</option>
</Select>
</VStack>
<VStack p={5} w={"full"}>
<AudioRecorder
onRecordingComplete={(blob) => fetchAudio({ blob: blob })}
onRecordingComplete={(blob) => {
setOutputText("");
fetchAudio({ blob: blob });
}}
recorderControls={recorderControls}
/>
<Textarea isReadOnly></Textarea>
<Textarea width={344} value={outputText} isReadOnly></Textarea>
</VStack>
</FormControl>
</Card>
Expand Down
69 changes: 45 additions & 24 deletions frontend/components/TryOut/NMT.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,8 @@ interface LanguageCodeNames {
[key: string]: string;
}

export default function NMT({
sourceLanguages = [],
targetLanguages = [],
serviceId,
}: {
sourceLanguages: Array<string>;
targetLanguages: Array<string>;
serviceId: string;
}) {
export default function NMT({ services }: { services: any }) {
const [service, setService] = useState(Object.keys(services)[0]);
const [sourceLanguage, setSourceLanguage] = useState("en");
const [targetLanguage, setTargetLanguage] = useState("hi");
const [transliteration, setTransliteration] = useState(true);
Expand All @@ -73,23 +66,46 @@ export default function NMT({
<Card borderWidth={1} borderColor={"a4borange"} boxShadow={"2xl"} p={5}>
<FormControl isRequired>
<VStack>
<HStack>
<VStack>
<VStack>
<FormLabel textColor={"gray.500"}>Select Service:</FormLabel>
<Select
value={service}
onChange={(event) => {
setService(event.target.value);
setSourceLanguage(
services[event.target.value]["languageFilters"][
"sourceLanguages"
][0]
);
}}
>
{Object.entries(services).map(([key, val]) => (
<option key={key} value={key}>
{key}
</option>
))}
</Select>
<FormLabel textColor={"gray.500"}>
Select Source Language:
</FormLabel>
<Select
value={sourceLanguage}
onChange={(event) => setSourceLanguage(event.target.value)}
>
{sourceLanguages.length === 0 ? (
{services[Object.keys(services)[0]].languageFilters
.sourceLanguages.length === 0 ? (
<></>
) : (
sourceLanguages.map((language, index) => (
<option key={index} value={language}>
{(LANGUAGE_CODE_NAMES as LanguageCodeNames)[language]}
</option>
))
services[
Object.keys(services)[0]
].languageFilters.sourceLanguages.map(
(language: string, index: number) => (
<option key={index} value={language}>
{(LANGUAGE_CODE_NAMES as LanguageCodeNames)[language]}
</option>
)
)
)}
</Select>
</VStack>
Expand All @@ -101,14 +117,19 @@ export default function NMT({
value={targetLanguage}
onChange={(event) => setTargetLanguage(event.target.value)}
>
{targetLanguages.length === 0 ? (
{services[Object.keys(services)[0]].languageFilters
.targetLanguages.length === 0 ? (
<></>
) : (
targetLanguages.map((language, index) => (
<option key={index} value={language}>
{(LANGUAGE_CODE_NAMES as LanguageCodeNames)[language]}
</option>
))
services[
Object.keys(services)[0]
].languageFilters.targetLanguages.map(
(language: string, index: number) => (
<option key={index} value={language}>
{(LANGUAGE_CODE_NAMES as LanguageCodeNames)[language]}
</option>
)
)
)}
</Select>
</VStack>
Expand All @@ -122,7 +143,7 @@ export default function NMT({
colorScheme={"orange"}
></Switch>
</VStack>
</HStack>
</VStack>
<VStack w={"full"}>
<IndicTransliterate
enabled={sourceLanguage !== "en" && transliteration}
Expand Down Expand Up @@ -151,7 +172,7 @@ export default function NMT({
targetLanguage,
input: inputText,
task: "translation",
serviceId,
serviceId: service,
});

setOutputText(inferenceResult["output"][0]["target"]);
Expand Down
Loading

0 comments on commit 68cb5e4

Please sign in to comment.