Spaces:

aziizpra
/

FE-nllb-tugas-akhir

Runtime error

App Files Files Community

aziizpra commited on Jun 27, 2023

Commit

2d208c0

•

1 Parent(s): cf15ba9

Upload 15 files

Browse files

Files changed (15) hide show

Dockerfile +21 -0
package-lock.json +0 -0
package.json +42 -0
public/favicon.ico +0 -0
public/index.html +12 -0
public/logo192.png +0 -0
public/logo512.png +0 -0
public/manifest.json +25 -0
public/robots.txt +3 -0
src/App.js +8 -0
src/index.css +3 -0
src/index.js +11 -0
src/pages/result.js +18 -0
src/pages/translation.js +93 -0
tailwind.config.js +11 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,21 @@

+# Stage 1: Build React App
+FROM node:16.13.2
+WORKDIR /app
+# Copy package.json and package-lock.json
+COPY package.json package-lock.json ./
+# Install dependencies
+RUN npm install --legacy-peer-deps
+# Copy the entire project
+COPY public/ .
+COPY src/ .
+COPY tailwind.config.js .
+# Build the React app
+RUN npm build
+# Start Nginx server
+CMD ["npm", "start"]

package-lock.json ADDED Viewed

The diff for this file is too large to render. See raw diff

package.json ADDED Viewed

	@@ -0,0 +1,42 @@

+{
+  "name": "fe-mesin-translasi",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "axios": "^1.4.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1",
+    "web-vitals": "^2.1.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "tailwindcss": "^3.3.2"
+  }
+}

public/favicon.ico ADDED Viewed

public/index.html ADDED Viewed

	@@ -0,0 +1,12 @@

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <title>Translation with NLLB methods</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>

public/logo192.png ADDED Viewed

public/logo512.png ADDED Viewed

public/manifest.json ADDED Viewed

	@@ -0,0 +1,25 @@

+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt ADDED Viewed

	@@ -0,0 +1,3 @@

+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.js ADDED Viewed

	@@ -0,0 +1,8 @@

+import React from 'react';
+import MyComponent from './pages/translation';
+function App() {
+  return <MyComponent />;
+}
+export default App;

src/index.css ADDED Viewed

	@@ -0,0 +1,3 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

src/index.js ADDED Viewed

	@@ -0,0 +1,11 @@

+import React from 'react';
+import ReactDOM from 'react-dom/client';
+import './index.css';
+import App from './App';
+const root = ReactDOM.createRoot(document.getElementById('root'));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/pages/result.js ADDED Viewed

	@@ -0,0 +1,18 @@

+import React from 'react';
+const result = ({response, time}) => {
+    return(
+        <>
+            <div className="mb-4">
+                <label htmlFor="name" className="block mb-2 font-bold text-gray-800">Result:</label>
+                <textarea type="text" value={response} id="name" name="text" className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-500" readOnly>{response}</textarea>
+            </div>
+            <div className="mb-4">
+                <label htmlFor="name" className="block mb-2 font-bold text-gray-800">Inference Time:</label>
+                <input type="text" value={time} id="name" name="text" className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-500" readOnly/>
+            </div>
+        </>
+    );
+}
+export default result

src/pages/translation.js ADDED Viewed

	@@ -0,0 +1,93 @@

+import React, { useState } from 'react';
+import axios from 'axios';
+import Result from './result';
+const MyComponent = () => {
+    const [formData, setFormData] = useState({
+        from_lang: 'ind_Latn',
+        to_lang: 'bjn_Latn',
+        text: '',
+    });
+    const [responseMessage, setResponseMessage] = useState('');
+    const [responseMessage1, setResponseMessage1] = useState('');
+    const [responseSuccess, setResponseSuccess] = useState(0);
+    const handleSubmit = async (event) => {
+        event.preventDefault();
+        try {
+            const response = await axios.post('https://aziizpra-api-nllb-tugas-akhir.hf.space/predict', formData);
+            const responseData = response.data;
+            setResponseMessage(responseData.result);
+            setResponseMessage1(responseData.inference_time);
+            setResponseSuccess(1);
+        } catch (error) {
+            console.log(error);
+        }
+    };
+    const handleSwapLanguages = () => {
+        setFormData((prevFormData) => ({
+            ...prevFormData,
+            from_lang: formData.to_lang,
+            to_lang: formData.from_lang,
+        }));
+    };
+    const handleChange = (event) => {
+        setFormData({ ...formData, [event.target.name]: event.target.value });
+    };
+    const getLanguageText = (lang) => {
+        if (lang === 'ind_Latn') {
+            return 'Indonesia';
+        } else if (lang === 'bjn_Latn') {
+            return 'Banjar';
+        } else {
+          return lang; // Menampilkan nilai lang jika tidak ada kecocokan
+        }
+    };
+    return (
+        <>
+            <div className="p-4">
+                <div className="bg-white rounded-lg shadow-lg">
+                    <div className="p-6">
+                        <div className="text-center">
+                            <h2 className="text-xl font-bold mb-4">Machine Translation With No Language Left Behind Methods</h2>
+                        </div>
+                        <form onSubmit={handleSubmit}>
+                            <div className="flex mb-4 items-center">
+                                <div className="w-1/2 relative mr-2">
+                                    <label htmlFor="input1" className="block mb-2 font-bold text-gray-800">From Language:</label>
+                                    <input type="text" id="input1" name="from_lang" className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-500" value={getLanguageText(formData.from_lang)} readOnly onChange={handleChange} />
+                                </div>
+                                <button type="button" className="flex-shrink-0 bg-gray-600 rounded-full w-10 h-10 mt-8 flex items-center justify-center shadow" onClick={handleSwapLanguages}>
+                                    <svg xmlns="http://www.w3.org/2000/svg" className="h-6 w-6 text-white" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                                    <path strokeLinecap="round" strokeLinejoin="round" strokeWidth="2" d="M10 4l6 6m0 0l-6 6m6-6H4"></path>
+                                    </svg>
+                                </button>
+                                <div className="w-1/2 relative ml-2">
+                                    <label htmlFor="input2" className="block mb-2 font-bold text-gray-800">To Language:</label>
+                                    <input type="text" id="input2" name="to_lang" className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-500" value={getLanguageText(formData.to_lang)} readOnly onChange={handleChange} />
+                                </div>
+                            </div>
+                            <div className="mb-4">
+                                <label htmlFor="name" className="block mb-2 font-bold text-gray-800">Text:</label>
+                                <input type="text" id="name" name="text" className="w-full px-3 py-2 border rounded-lg focus:outline-none focus:ring focus:border-blue-500" maxLength={1024} placeholder="Enter your Text to Translate" onChange={handleChange} required/>
+                            </div>
+                            <div className="text-center">
+                                <button type="submit" className="px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600">Translate!</button>
+                            </div>
+                        </form>
+                        {responseSuccess === 1 && <Result response={responseMessage} time={responseMessage1}/> }
+                    </div>
+                </div>
+            </div>
+        </>
+    );
+};
+export default MyComponent;

tailwind.config.js ADDED Viewed

	@@ -0,0 +1,11 @@

+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}