// material-ui import { Button, Divider, Grid, InputLabel, Stack, TextField } from '@mui/material'; import { LocalizationProvider } from '@mui/x-date-pickers'; import { AdapterDateFns } from '@mui/x-date-pickers/AdapterDateFns'; import axios from 'axios'; import MainCard from 'components/MainCard'; // third-party import { Form, FormikProvider, useFormik } from 'formik'; import { useState } from 'react'; import * as Yup from 'yup'; // project imports // assets // types // ==============================|| List ||============================== // const TextTranslate = () => { const [showUnityWebGL, setShowUnityWebGL] = useState(false); const FormSchema = Yup.object().shape({ userInputText: Yup.string() .required('Field is required') .test('is-sinhala', 'Input must be in Sinhala', (value) => { // You can use a regular expression or any custom logic to validate Sinhala text. // Here's a basic example using a regular expression for Sinhala characters. const sinhalaRegex = /^[\u0D80-\u0DFF\s]+$/; // Range for Sinhala Unicode characters if (!value) { // If the field is empty, it's valid as it's already being checked by 'required' return true; } return sinhalaRegex.test(value); }) .max(255, 'Input must be at most 255 characters long'), }); const formik = useFormik({ initialValues: { userInputText: "", }, validationSchema: FormSchema, enableReinitialize: true, onSubmit: async (values, { setSubmitting, resetForm }) => { try { // API Call Here const response = await axios.post("http://127.0.0.1:8000/rest_pyton/get_user_input_text", { userInputText: values.userInputText, }); // Check if the request was successful if (response.status === 200) { console.log("Success:", response.data); setShowUnityWebGL(true) } else { console.error("Request failed with status code:", response.status); } resetForm() setSubmitting(false); } catch (error) { console.error(error); } } }); const { errors, touched, handleSubmit, isSubmitting, getFieldProps } = formik; return ( <> <FormikProvider value={formik}> <LocalizationProvider dateAdapter={AdapterDateFns}> <Form autoComplete="off" noValidate onSubmit={handleSubmit}> <MainCard> <Grid container spacing={3}> <Grid item xs={4} md={4}> <Grid container spacing={3}> <Grid item xs={12}> <Stack spacing={1.25}> <InputLabel htmlFor="userInputText">Enter Text to Translate</InputLabel> <TextField fullWidth id="userInputText" placeholder="Enter Text Name" {...getFieldProps('userInputText')} error={Boolean(touched.userInputText && errors.userInputText)} helperText={touched.userInputText && errors.userInputText} /> </Stack> </Grid> <Grid item xs={12}> <Divider /> </Grid> <Grid item xs={12}> <Grid container justifyContent="space-between" alignItems="center"> <Grid item> </Grid> <Grid item> <Stack direction="row" spacing={2} alignItems="center"> <Button color="error" onClick={() => { setShowUnityWebGL(false) }}> Cancel </Button> <Button type="submit" variant="contained" disabled={isSubmitting}> TRANSLATE </Button> </Stack> </Grid> </Grid> </Grid> </Grid> </Grid> <Grid item xs={8} md={8}> {showUnityWebGL ? <iframe // src="https://64f66d39fdef493229b2ddd9--lambent-unicorn-97396a.netlify.app/" src="https://64f7cfd336356b18eb42de2b--lambent-unicorn-97396a.netlify.app/" width="100%" height="700px" // Adjust the height as needed title="Unity WebGL" style={{ border: 'none', overflow: 'hidden' }} ></iframe> : <>3D model Rendered Here...</>} </Grid> </Grid> </MainCard> </Form> </LocalizationProvider> </FormikProvider > </> ); }; export default TextTranslate;