init

shinich39 · May 17, 2024 · a42cfac · a42cfac
1 parent 6fc9b81
commit a42cfac
Show file tree

Hide file tree

Showing 8 changed files with 75 additions and 31 deletions.
diff --git a/README.md b/README.md
@@ -2,6 +2,48 @@
 
 Text translator with electron.
 
-## Usage
+## Text
+
+1. Type to Text A. (source text)
+2. If Language A (source language) is not matched, replace Language A manually.
+3. Type Language B (destination language)
+4. Click Translate A to B
+
+<p>
+  <img src="./imgs/1.png" width="50%" title="1.png">
+</p>
+
+## TXT files
+
+1. Type to Directory A. (directory path)
+2. Type to Directory B. (directory path)
+3. If Language A (source language) is not matched, replace Language A manually.
+4. Type Language B (destination language)
+4. Click Translate A to B
+
+<p>
+  <img src="./imgs/2.png" width="50%" title="2.png">
+</p>
+
+## Settings
+
+#### Translate Type
+
+- local: Use NLLB model
+- google
+- deepl
+- papago
+- yandex
+- bing: Disabled
+
+#### Translate Unit
+
+- All: Disabled
+- Paragraph: Default
+- Sentence: Slow
+
+<p>
+  <img src="./imgs/3.png" width="50%" title="3.png">
+</p>
 
 ## References
diff --git a/imgs/1.png b/imgs/1.png
diff --git a/imgs/2.png b/imgs/2.png
diff --git a/imgs/3.png b/imgs/3.png
diff --git a/index.html b/index.html
@@ -3,31 +3,11 @@
 
 <head>
   <meta charset="UTF-8">
-  <title>TT</title>
+  <title>Text Translator</title>
   <meta http-equiv="Content-Security-Policy" content="script-src 'self'">
   <link rel="stylesheet" type="text/css" href="./node_modules/bootstrap/dist/css/bootstrap.min.css">
   <link rel="stylesheet" type="text/css" href="./libs/bootstrap-toaster.min.css">
   <link rel="stylesheet" type="text/css" href="./style.css">
-  <style>
-    body{
-      padding: 1rem;
-    }
-
-    #loading{
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      z-index: 1000;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      align-items: center;
-      background-color: rgba(0,0,0,1);
-      color: #FFF;
-    }
-  </style>
 </head>
 
 <body data-bs-theme="dark">
@@ -87,11 +67,11 @@ <h3 class="message">Loading...</h3>
       <div class="row my-3">
         <div class="col-6">
           <label for="text-input-text" class="form-label">Text A:</label>
-          <textarea class="form-control" id="text-input-text" rows="12"></textarea>
+          <textarea class="form-control" id="text-input-text" rows="8"></textarea>
         </div>
         <div class="col-6">
           <label for="text-output-text" class="form-label">Text B:</label>
-          <textarea class="form-control" id="text-output-text" rows="12"></textarea>
+          <textarea class="form-control" id="text-output-text" rows="8"></textarea>
         </div>
       </div>
     </div>
@@ -132,7 +112,7 @@ <h3 class="message">Loading...</h3>
     <div class="tab-pane fade" id="settings-tab-pane" role="tabpanel" aria-labelledby="settings-tab" tabindex="0">
       <div class="row my-3">
         <div class="col-12">
-          <h4>Translate type</h4>
+          <h5>Translate Type</h5>
           <div class="form-check form-check-inline">
             <input class="form-check-input" type="radio" name="translate-type" id="settings-translate-type-1" value="local" checked>
             <label class="form-check-label" for="settings-translate-type-1">
@@ -169,7 +149,11 @@ <h4>Translate type</h4>
               Bing (disabled)
             </label>
           </div>
-          <h4>Translate unit</h4>
+        </div>
+      </div>
+      <div class="row my-3">
+        <div class="col-12">
+          <h5>Translate Unit</h5>
           <div class="form-check form-check-inline">
             <input class="form-check-input" type="radio" name="translate-unit" id="settings-translate-unit-1" value="all" disabled>
             <label class="form-check-label" for="settings-translate-unit-1">

diff --git a/main.js b/main.js
@@ -243,7 +243,7 @@ function createWindow() {
   w.loadFile('index.html');
 
   // Open the DevTools.
-  w.webContents.openDevTools();
+  // w.webContents.openDevTools();
 
   // Set event listeners.
   w.webContents.on("did-finish-load", onWindowLoad);
@@ -296,7 +296,7 @@ async function onWindowLoad() {
     await nllb.init();
 
     sendMsg("init", {
-      progress: 50,
+      progress: 0.5,
       message: "Downloading model..."
     });
 
@@ -305,7 +305,7 @@ async function onWindowLoad() {
     sendMsg("test", result);
 
     sendMsg("init", {
-      progress: 100,
+      progress: 1,
       message: "Complete initialization."
     });
   } catch(err) {

diff --git a/renderer.js b/renderer.js
@@ -536,10 +536,10 @@ getMsg("init", function(err, msg, event) {
   }
 
   const { progress, message } = msg;
-  progressElement.style.width = progress + "%";
+  progressElement.style.width = (progress * 100) + "%";
   messageElement.innerHTML = message;
 
-  if (progress === 100) {
+  if (progress === 1) {
     setTimeout(function() {
       document.getElementById("loading").style.display = "none";
     }, 1000);

diff --git a/style.css b/style.css
@@ -0,0 +1,18 @@
+body{
+  padding: 1rem;
+}
+
+#loading{
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 1000;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  background-color: rgba(0,0,0,1);
+  color: #FFF;
+}