Merge pull request #36 from nadinCodeHat/fix/update

Fix/update

Author: nadinCodeHat

api/api.py

@@ -6,18 +6,19 @@
 api = Flask(__name__)
 cors = CORS(api)
 
+
 @api.route('/translate/post', methods=['POST'])
 def recieve():
     data = request.get_json()
     json_str = json.dumps(data)
     resp = json.loads(json_str)
-    
+
     global inputText, src, dst
 
     inputText = resp['inputText']
     src = resp['srctext']
     dst = resp['dsttext']
-    
+
     return "200 OK"
 
 

api/requirements.txt

@@ -2,5 +2,6 @@
 
 flask
 flask-cors
-transformers==4.12.4
+python-dotenv
+transformers[torch]
 sentencepiece

src/App.js

@@ -1,11 +1,9 @@
-import './App.scss';
-import React from 'react'
-import Layout from './layouts';
+import "./App.scss";
+import React from "react";
+import Layout from "./layouts";
 
 function App() {
-  return (
-    <Layout />
-  );
+  return <Layout />;
 }
 
 export default App;

src/components/appbar.js

@@ -1,35 +1,25 @@
-import * as React from 'react';
-import AppBar from '@mui/material/AppBar';
-import Toolbar from '@mui/material/Toolbar';
-import Typography from '@mui/material/Typography';
-import Container from '@mui/material/Container';
+import * as React from "react";
+import AppBar from "@mui/material/AppBar";
+import Toolbar from "@mui/material/Toolbar";
+import Typography from "@mui/material/Typography";
+import Container from "@mui/material/Container";
 
 const ResponsiveAppBar = () => {
-    return (
-        <AppBar position="static">
-            <Container maxWidth="xl">
-                <Toolbar disableGutters>
-                    <Typography
-                        variant="h6"
-                        noWrap
-                        component="div"
-                        sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
-                    >
-                        OpenTranslate
-                    </Typography>
-
-
-                    <Typography
-                        variant="h6"
-                        noWrap
-                        component="div"
-                        sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
-                    >
-                        OpenTranslate
-                    </Typography>
-                </Toolbar>
-            </Container>
-        </AppBar>
-    );
+  return (
+    <AppBar position="static">
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <Typography
+            variant="h6"
+            noWrap
+            component="div"
+            sx={{ flexGrow: 1, textAlign: "center" }}
+          >
+            OpenTranslate (Machine Translation using HuggingFace Transformers)
+          </Typography>
+        </Toolbar>
+      </Container>
+    </AppBar>
+  );
 };
 export default ResponsiveAppBar;

src/layouts/index.js

@@ -1,26 +1,23 @@
 import React from "react";
-import {
-    BrowserRouter as Router
-} from "react-router-dom";
+import { BrowserRouter as Router } from "react-router-dom";
 import PrimarySearchAppBar from "../components/appbar";
 import routes from "../routes/routes";
 
-
 export default function Layout() {
-    return (
-        <Router>
-            <div>
-                <PrimarySearchAppBar />
+  return (
+    <Router>
+      <div>
+        <PrimarySearchAppBar />
 
-                {/*
+        {/*
             A <Switch> looks through all its children <Route>
             elements and renders the first one whose path
             matches the current URL. Use a <Switch> any time
             you have multiple routes, but you want only one
             of them to render at a time
           */}
-                {routes}
-            </div>
-        </Router>
-    );
-}
+        {routes}
+      </div>
+    </Router>
+  );
+}

src/pages/home.js

@@ -8,6 +8,7 @@ import Box from "@mui/material/Box";
 import MuiGrid from "@mui/material/Grid";
 import CompareArrowsIcon from "@mui/icons-material/CompareArrows";
 import TextField from "@mui/material/TextField";
+import Button from "@mui/material/Button";
 import "./home.scss";
 import axios from "axios";
 
@@ -23,11 +24,14 @@ const TRANSLATION_API_BASE_URL_POST = "http://localhost:5000/translate/post";
 const TRANSLATION_API_BASE_URL_GET = "http://localhost:5000/translate/get";
 
 export default function Home() {
-  const languages = [
+  const flanguage = [
     {
       value: "en",
       label: "English",
     },
+  ];
+
+  const tlanguage = [
     {
       value: "de",
       label: "German",
@@ -62,14 +66,13 @@ export default function Home() {
     setTranslateToLang(event.value);
   };
 
-  // Handle input text
+  // Handle text translation
   const handleChangeTranslate = async (event) => {
-    setTranslateText(event.target.value);
     //POST input text
     try {
       await axios
         .post(TRANSLATION_API_BASE_URL_POST, {
-          inputText: event.target.value,
+          inputText: translateText,
           srctext: translateFromLang,
           dsttext: translateToLang,
         })
@@ -81,7 +84,6 @@ export default function Home() {
     }
 
     //GET translated text
-    
     try {
       await axios.get(TRANSLATION_API_BASE_URL_GET).then((response) => {
         setTranslatedText({
@@ -98,34 +100,36 @@ export default function Home() {
   };
 
   return (
-    <div style={{ marginTop: "1em" }}>
+    <div style={{ marginTop: "5em" }}>
       <div className="translate-div">
+        {/* Translate language from */}
         <div style={{ width: 500 }}>
           <Box sx={{ minWidth: 120 }}>
             <Select
               placeholder="Translate From"
-              value={languages.find((obj) => obj.value === translateFromLang)}
-              options={languages}
+              value={flanguage.find((obj) => obj.value === translateFromLang)}
+              options={flanguage}
               onChange={handleChangeTranslationFrom}
             ></Select>
           </Box>
         </div>
 
         <CompareArrowsIcon />
 
+        {/* Translate language to */}
         <div style={{ width: 500 }}>
           <Box sx={{ minWidth: 120 }}>
             <Select
               placeholder="Translate To"
-              value={languages.find((obj) => obj.value === translateToLang)}
-              options={languages}
+              value={tlanguage.find((obj) => obj.value === translateToLang)}
+              options={tlanguage}
               onChange={handleChangeTranslationTo}
             ></Select>
           </Box>
         </div>
       </div>
 
-      <div className="card-div">
+      <div className="cards-div">
         <Card
           sx={{
             width: 520,
@@ -142,13 +146,12 @@ export default function Home() {
                     <TextField
                       variant="standard"
                       id="outlined-textarea"
-                      placeholder="Enter some text"
+                      placeholder="Enter some text here..."
                       multiline
                       autoFocus={true}
                       fullWidth
                       rows={13}
-                      value={translateText}
-                      onChange={handleChangeTranslate}
+                      onChange={(e) => setTranslateText(e.target.value)}
                       InputProps={{
                         disableUnderline: true,
                       }}
@@ -182,6 +185,18 @@ export default function Home() {
           </CardContent>
         </Card>
       </div>
+      <Button
+        sx={{
+          display: "block",
+          width: "74em",
+          height: "3em",
+          margin: "10px auto 0px auto",
+        }}
+        variant="contained"
+        onClick={handleChangeTranslate}
+      >
+        Translate
+      </Button>
     </div>
   );
-}
+}

src/pages/home.scss

@@ -1,18 +1,16 @@
 .translate-div {
-    align-items: center;
-    display: flex;
-    justify-content: space-between;
-    max-width: 65em;
-    margin: 0 auto;
+  align-items: center;
+  display: flex;
+  justify-content: space-between;
+  max-width: 65em;
+  margin: 0 auto;
+  margin-bottom: 2em;
 }
 
-.card-div {
-    position: fixed;
-    top: 50%;
-    left: 50%;
-    transform: translate( -50%, -50%);
-    display: flex;
-    justify-content: space-between;
-    max-width: 67em;
-    margin: 0 auto;
-}
+.cards-div {
+  display: flex;
+  justify-content: space-between;
+  max-width: 67em;
+  margin: 0 auto;
+  margin-bottom: 1em;
+}

src/routes/routes.js

@@ -3,9 +3,9 @@ import { Route, Routes } from "react-router-dom";
 import Home from "../pages/home";
 
 const routes = (
-    <Routes>
-        <Route path="/" element={<Home />} />
-    </Routes>
+  <Routes>
+    <Route path="/" element={<Home />} />
+  </Routes>
 );
 
-export default routes;
+export default routes;