img to text converter using Tesseract.js library & button style taken…

… from https://uiverse.io/escannord/smooth-bat-37
TBS96 · May 10, 2024 · 9dfee3d · 9dfee3d
commit 9dfee3d
Show file tree

Hide file tree

Showing 7 changed files with 363 additions and 0 deletions.
diff --git a/README.md b/README.md
@@ -0,0 +1,3 @@
+# Image To Text Converter.
+
+## src is currently wip.
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,282 @@
+*{
+    margin: 0 auto;
+    padding: 0;
+    box-sizing: border-box;
+    text-align: center;
+}
+
+h1{
+    font-family: Consolas, monospace;
+    font-size: 4em;
+    text-shadow: 5px 5px 5px rgb(18, 87, 18);
+    letter-spacing: 0.2em;
+    margin-bottom: 40px;
+}
+
+.input-and-btn-container{
+    padding: 25px;
+    width: 450px;
+}
+
+#imgInput{
+    border: 2px solid red;
+    border-radius: 5px;
+    padding: 5px;
+}
+
+/* button{
+    display: block;
+    margin-top: 20px;
+    margin-left: 5px;
+    background-color: transparent;
+    border: 2px solid rgb(43, 250, 2);
+    border-radius: 10px;
+    color: #030303;
+    padding: 10px;
+    font-size: 17px;
+    cursor: pointer;
+    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
+}
+
+button:hover{
+    background-color: rgb(43, 250, 2);
+    color: #ffffff;
+    border-color: #ffffff;
+    border-radius: 15px;
+} */
+
+
+
+/* Button from https://uiverse.io/escannord/smooth-bat-37 */
+
+.button {
+    cursor: pointer;
+    position: relative;
+    display: block;
+    margin-top: 140px;
+    transform-style: preserve-3d;
+    transform: rotateX(-45deg) rotateY(25deg) rotateZ(0deg);
+    background-color: transparent;
+    border: none;
+  }
+
+  .lid {
+    position: absolute;
+    transform-style: preserve-3d;
+    transition: all 1s ease-in-out;
+    transform-origin: 0 80px -120px;
+    height: 80px;
+    width: 250px;
+    background-color: rgba(0, 0, 0, 0);
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .lid:hover,
+  .button:hover .lid {
+    transform: translate(-50%, -50%) rotateX(60deg);
+  }
+
+  .lid .side {
+    display: inline-block;
+    width: 250px;
+    height: 250px;
+    background-color: rgba(63, 112, 141, 0.308);
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    border: solid 1px rgba(0, 132, 255, 0.226);
+  }
+  .front {
+    transform: translate(-50%, -50%) translateZ(125px);
+    height: 80px !important;
+  }
+  .top {
+    transform: translate(-50%, -50%) rotateX(90deg) translateZ(40px);
+    background-color: rgba(167, 47, 10, 0.438);
+  }
+  .left {
+    transform: translate(-50%, -50%) rotateY(90deg) translateZ(125px);
+    height: 80px !important;
+  }
+
+  .right {
+    transform: translate(-50%, -50%) rotateY(-90deg) translateZ(125px);
+    height: 80px !important;
+  }
+
+  .back {
+    transform: translate(-50%, -50%) rotateY(180deg) translateZ(125px);
+    background-color: rgba(250, 234, 18, 0.418);
+    height: 80px !important;
+  }
+
+  .back::before {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    width: 20px;
+    height: 10px;
+    background-color: black;
+    bottom: 0;
+    left: 10px;
+  }
+
+  .back::after {
+    content: "";
+    display: inline-block;
+    position: absolute;
+    width: 20px;
+    height: 10px;
+    background-color: black;
+    bottom: 0;
+    right: 10px;
+  }
+
+  .panels {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%) rotateX(90deg) translateZ(-40px);
+  }
+
+  .panel-1 {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 250px;
+    width: 250px;
+    background-color: rgb(166, 255, 0);
+    background: repeating-linear-gradient(
+      45deg,
+      rgb(247, 243, 33) 0% 2%,
+      black 2% 4%
+    );
+    box-shadow: 0px 0px 0px 20px red;
+  }
+
+  .panel-2 {
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    height: 200px;
+    width: 200px;
+    background-color: rgb(0, 0, 0);
+    background: linear-gradient(-135deg, rgb(43, 42, 42), black);
+    border: solid 5px rgb(247, 243, 33);
+  }
+
+  .panel-1::after {
+    content: "SELF-DESTRUCT";
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 290px;
+    height: 25px;
+    color: white;
+    font-weight: bold;
+    transform: translate(-50%, -50%) translateY(170px);
+    font-size: larger;
+    background-color: red;
+  }
+
+  .panel-1::before {
+    content: "WARNING: DANGER";
+    display: inline-block;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 290px;
+    height: 25px;
+    color: white;
+    font-weight: bold;
+    transform: translate(-50%, -50%) rotateZ(90deg) translateY(170px);
+    font-size: larger;
+    background-color: red;
+  }
+
+  .btn-trigger {
+    position: absolute;
+    top: 50%;
+    right: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .btn-trigger-1 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 100px;
+    height: 100px;
+    background-color: rgb(207, 195, 195);
+    box-shadow: -0px 1px 0 rgb(54, 54, 54), -0px 2px 0 rgb(54, 54, 54),
+      -1px 3px 0 rgb(54, 54, 54), -1px 4px 0 rgb(54, 54, 54),
+      -2px 5px 0 rgb(54, 54, 54), -2px 6px 0 rgb(54, 54, 54),
+      -3px 7px 0 rgb(54, 54, 54), -3px 8px 0 rgb(54, 54, 54),
+      -4px 9px 0 rgb(54, 54, 54), -4px 10px 0 rgb(54, 54, 54),
+      -5px 11px 0 rgb(54, 54, 54), -5px 12px 0 rgb(54, 54, 54),
+      -6px 13px 0 rgb(54, 54, 54), -6px 14px 0 rgb(54, 54, 54),
+      -7px 15px 0 rgb(54, 54, 54), -7px 16px 0 rgb(54, 54, 54),
+      -8px 17px 0 rgb(54, 54, 54), -8px 18px 0 rgb(54, 54, 54),
+      -9px 19px 0 rgb(54, 54, 54), -9px 20px 0 rgb(54, 54, 54),
+      -10px 21px 0 rgb(54, 54, 54), -10px 22px 0 rgb(54, 54, 54),
+      -11px 23px 0 rgb(54, 54, 54), -11px 24px 0 rgb(54, 54, 54),
+      -12px 25px 0 rgb(54, 54, 54), -12px 26px 0 rgb(54, 54, 54);
+    border-radius: 50%;
+    transform: translate(-50%, -50%) translateZ(50px);
+  }
+
+  .btn-trigger-2 {
+    position: absolute;
+    width: 80px;
+    height: 80px;
+    background-color: rgb(241, 17, 17);
+    box-shadow: -0px 1px 0 rgb(128, 5, 5), -0px 2px 0 rgb(128, 5, 5),
+      -1px 3px 0 rgb(128, 5, 5), -1px 4px 0 rgb(128, 5, 5),
+      -2px 5px 0 rgb(128, 5, 5), -2px 6px 0 rgb(128, 5, 5),
+      -3px 7px 0 rgb(128, 5, 5), -3px 8px 0 rgb(128, 5, 5),
+      -4px 9px 0 rgb(128, 5, 5), -4px 10px 0 rgb(128, 5, 5),
+      -5px 11px 0 rgb(128, 5, 5), -5px 12px 0 rgb(128, 5, 5),
+      -6px 13px 0 rgb(128, 5, 5), -6px 14px 0 rgb(128, 5, 5),
+      -7px 15px 0 rgb(128, 5, 5), -7px 16px 0 rgb(128, 5, 5);
+    border-radius: 50%;
+    transition: all 0.3s;
+    transform: translate(-40%, -70%) translateZ(100px);
+  }
+
+  .btn-trigger-2:active {
+    transform: translate(-50%, -50%) translateZ(100px);
+    box-shadow: none;
+  }
+
+  @keyframes rotate {
+    100% {
+      transform: rotateX(360deg);
+    }
+  }
+
+
+#output{
+    border: 2px solid black;
+    border-radius: 10px;
+    text-align: justify;
+    width: 300px;
+    height: 300px;
+    padding: 7px;
+    margin-top: 150px;
+    color: rgb(6, 10, 238);
+    overflow: auto;
+    resize: both;
+    transform: perspective(100px) rotate3d(80, 150, 50, 5deg);
+    column-count: 4;
+    text-align: justify;
+    column-gap: 30px;
+    column-rule: 1px solid black;
+    column-width: 200px;
+}
diff --git a/img/bangla-bengali-date-today.jpg b/img/bangla-bengali-date-today.jpg
diff --git a/img/ss.png b/img/ss.png
diff --git a/img/ss2.png b/img/ss2.png
diff --git a/index.html b/index.html
@@ -0,0 +1,57 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Image To Text Converter</title>
+
+    <!-- Tesseract.JS v5 Link -->
+    <script src='https://cdn.jsdelivr.net/npm/tesseract.js@5/dist/tesseract.min.js'></script>
+
+    <!-- Raw CSS Link -->
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+
+    <h1>Image To Text Converter</h1>
+
+    <div class="input-and-btn-container">
+
+        <input type="file" id="imgInput" accept="image/*">
+        <!-- <button onclick="extractTexts()">Extract Texts</button> -->
+
+        <button onclick="extractTexts()" class="button">
+            <div class="lid">
+              <span class="side top"></span>
+              <span class="side front"></span>
+              <span class="side back"> </span>
+              <span class="side left"></span>
+              <span class="side right"></span>
+            </div>
+            <div class="panels">
+              <div class="panel-1">
+                <div class="panel-2">
+                  <div class="btn-trigger">
+                    <span class="btn-trigger-1"></span>
+                    <span class="btn-trigger-2"></span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </button>
+
+
+    </div>
+
+    <div id="output"></div>
+
+
+    <!-- Raw JS Link -->
+    <script src="js/script.js"></script>
+</body>
+</html>
+
+
+
+
+<!-- Tesseract.JS is a JS library. -->
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,21 @@
+const extractTexts = () => {
+    const imgFileInput = document.getElementById('imgInput');
+    const outputDiv = document.getElementById('output');
+
+    const imagesFiles = imgFileInput.files[0];
+
+    if(!imagesFiles)
+    {
+        outputDiv.textContent = 'Please select an image file!';
+        return;
+    }
+
+    Tesseract.recognize(imagesFiles,'eng')
+    .then( ({data}) => {
+        outputDiv.textContent = data.text;
+    })
+    .catch( (error) => {
+        console.error('Error!',error);
+        outputDiv.textContent = 'Error!!';
+    })
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		# Image To Text Converter.

		## src is currently wip.