Optical Character Recognition (OCR) adalah teknologi yang memungkinkan komputer untuk membaca teks dari gambar atau dokumen yang dipindai. Dalam tutorial ini, kita akan menggunakan Golang untuk melakukan OCR pada gambar dengan bantuan Tesseract OCR.


&nbsp;
### Persiapan
- Install **tesseract-ocr**, silahkan kunjungi link berikut ini https://tesseract-ocr.github.io/tessdoc/Installation.html
- Install Go : https://go.dev


\
Setelah menginstall kedua tools diatas, sekarang waktunya membuat project Golang.

&nbsp;
### Membuat Project

\
Buat folder dimana project kita ingin dibuat, misalnya folder **belajar-ocr.** kemudian masuk kedalam folder **belajar-ocr**

\
Lalu initiate module dengan memasukan perintah:

```shell
go mod init belajar-ocr
```

\
Setelah menjalankan perintah diatas, install pacakge yang diperlukan, jalankan perintah:

```shell
go get github.com/otiai10/gosseract/v2
```

\
Siapkan gambar yang ingin di convert menjadi teks, misalnya **test.jpg**

\
kemudian buat file **main.go**


```go
package main

import (
	"fmt"

	"github.com/otiai10/gosseract/v2"
)

func main() {
	client := gosseract.NewClient()
	defer client.Close()
	client.SetImage("test.jpeg")
	text, _ := client.Text()
	fmt.Println(text)
}
````

\
Kemudian jalankan perintah:

```shell
go run .
```

\
Dengan script sederhana seperti diatas, kita sudah berhasil membuat program convert gambar menjadi teks dengan OCR.

\
Silahkan eksplor kembali misalnya dengan membuat project dengan kasus:

- Scan ID Card
- Scan Plat Nomor
- Dll

\
Kita juga bisa mengintegrasikan dengan Frontend seperti React JS supaya ada form upload gambar lalu akan menghasilkan output berupa teks.

OCR, atau Optical Character Recognition, adalah teknologi yang digunakan untuk mengonversi teks dari gambar atau dokumen yang dipindai menjadi format teks yang dapat diedit dan dicari. 

large_OCR.png

medium_OCR.png

small_OCR.png

thumbnail_OCR.png

OCR.png

Golang : Convert gambar menjadi teks dengan OCR

Pandoc adalah alat yang sangat kuat dan fleksibel untuk konversi dokumen, yang dapat membantu Anda beralih antara berbagai format dokumen dengan mudah. Apakah Anda seorang penulis, akademisi, atau profesional di bidang teknologi, kemampuan untuk mengonversi dokumen dari satu format ke format lain seringkali menjadi kebutuhan yang mendesak.

\
Di era digital saat ini, di mana kolaborasi dan interoperabilitas menjadi semakin penting, memiliki alat yang dapat mengatasi berbagai format dokumen merupakan aset yang sangat berharga.


Dalam tutorial ini, kita akan menjelajahi kemampuan Pandoc dalam mengonversi file dokumen, khususnya dari format .docx ke .html. 

&nbsp;
### **Mengapa memilih Pandoc?**


Pandoc bukan hanya sekadar alat konversi, ia adalah pustaka pemrosesan dokumen yang mendukung berbagai format dokumen mulai dari Markdown, LaTeX, hingga EPUB dan banyak lainnya. Dengan menggunakan Pandoc, Anda bisa dengan mudah mengubah dokumen Word menjadi halaman web HTML yang rapi dan terstruktur, siap untuk dipublikasikan atau dibagikan.

&nbsp;
### **Install Pandoc**

Pandoc support dengan berbagai OS seperti Windows, Linux, MacOS, Docker, dan lain - lain, kita hanya perlu menyesuaikan saja.

&nbsp;
### **Cara menggunakan**

Untuk menggunakan pandoc caranya cukup mudah, buka terminal dan masukan perintah

```shell
pandoc [option]
```

&nbsp;
### **Konversi Docx to HTML**

Berikut ini cara melakukan konversi dari file Docx ke HTML

```shell
pandoc -s input.docx -o output.html
```
&nbsp;
Dalam perintah di atas:

 
*    input.docx adalah nama file Word yang ingin Anda konversi.
*  output.html adalah nama file HTML yang akan dihasilkan.


\
Pada contoh berikut ini saya akan coba melakukan konversi dokumen yang cukup komples dimana didalam dokumen tersebut terdapat rumus matematika.

\
![docx.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/docx_e44718468d.png)

\
**Jalankan Pandoc**

\
Buka terminal dan masukan perintah

```shell
pandoc input.docx --mathml --extract-media=./media  -o output.html
```

* extrac-media adalah lokasi dimana media seperti gambar di export (jika ada)
*  --mathml digunakan supaya rumus matematika di konversi menjadi MathML(Math HTML)

\
Hasil dari konversi diatas adalah seprti berikut ini:

&nbsp;

![pandoc_html.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/pandoc_html_0ccc6f4585.png)


\
Dari gambar diatas, terlihat hasil export HTML sangat mirip dengan apa yang ada di file Docx.


\
Pandoc bukan hanya alat konversi yang berdiri sendiri, tetapi juga alat yang sangat fleksibel dan dapat diintegrasikan dengan berbagai bahasa pemrograman, seperti Python, Go, Node.js, PHP, Rust, dan lainnya. Kemampuan ini membuat Pandoc menjadi pilihan favorit bagi para pengembang yang ingin mengotomatisasi proses konversi dokumen dalam aplikasi mereka.

\
Contoh penggunaan dengan Python

```shell
import pypandoc
output = pypandoc.convert_file('input.docx', 'html', outputfile='output.html')
print(output)
```


&nbsp;




Pada tutorial ini, kita akan belajar bagaimana cara convert file dokumen Docx menjadi HTML secara cepat dan mudah dengan menggunakan Pandoc

large_bg-pandoc.jpg

medium_bg-pandoc.jpg

small_bg-pandoc.jpg

thumbnail_bg-pandoc.jpg

bg-pandoc.jpg

Convert Docx FIle To HTML Support Math Equation Using Pandoc

Pada tutorial kali ini, kita akan belajar bagaimana melakukan Dockerize aplikasi Next JS dengan mode Standalone.

&nbsp;
### Apa itu mode standalone?

\
Mode standalone adalah proses build next js dimana akan mengoptimalkan hasil build dengan membuang node_modules dan hanya menggunakan library yang dibutuhkan saja dan di convert menjadi static file.

\
Dengan menggunakan standalone ukuran aplikasi akan menjadi lebih kecil sampai 80%

\
Jika kita ingin menjalankan aplikasi Next JS kita sebagai container maka menggunakan mode standalone akan sangat membantu mengurangi size dari container.

&nbsp;
### Install Next JS

\
Kita akan menginstall Next JS terlebih dahulu, jalankan perintah dibawah dan buat nama project misalnya "next-standalone"

&nbsp;
```shell
npx create-next-app@latest

```

\
Lalu masuk kedalam folder "next-standalone" kemudian edit file **next.config.js** tambahkan output

&nbsp;
```javascript
/** @type {import('next').NextConfig} */
const nextConfig = {
    output: 'standalone',
};

export default nextConfig;

```

\
Kemudian buat file Dockerfile

```shell
FROM node:18-alpine AS base

 
FROM base AS builder
RUN apk add --no-cache libc6-compat
RUN apk update
# Set working directory
WORKDIR /app
COPY . .
 
# Add lockfile and package.json's of isolated subworkspace
FROM base AS installer
RUN apk add --no-cache libc6-compat
RUN apk update
WORKDIR /app
 
# First install the dependencies (as they change less often)
COPY .gitignore .gitignore
COPY --from=builder /app/package.json .
RUN yarn install
 
# Build the project
COPY --from=builder /app/ .
RUN yarn build
 
FROM base AS runner
WORKDIR /app
 
 
# Don't run production as root
RUN addgroup --system --gid 1001 nodejs
RUN adduser --system --uid 1001 nextjs
USER nextjs
 
COPY --from=installer /app/next.config.mjs .
COPY --from=installer /app/package.json .
# COPY --from=installer /app/.env.production .
 
# Automatically leverage output traces to reduce image size
# https://nextjs.org/docs/advanced-features/output-file-tracing
COPY --from=installer --chown=nextjs:nodejs /app/.next/standalone ./
COPY --from=installer --chown=nextjs:nodejs /app/.next/static ./.next/static
COPY --from=installer --chown=nextjs:nodejs /app/public ./public

EXPOSE 3000

CMD node server.js 
```

\
Kemudian jalankan perintah


```shell
docker build -t next-standalone .
```

\
Setelah berhasil, kemudian testing dengan menjalankan perintah

```shell
docker run -it --rm -p 3000:3000 next-standalone
```

\
Kemudian akses broswer http://localhost:3000

![next.png](https://mrcodingblog.s3.ap-southeast-1.wasabisys.com/next_fecc7b40c4.png)

\
Berikut ini perbandingan ukuran container jika tanpa mode standalalone dan menggunakan mode standalone:


```shell
| No Standalone  |  With Standalone Mode |
| 500MB  |  100MB |
```

\
Ukuran diatas hanya perbandingan next js tanpa menggunakan library tambahan seperti Chakra UI, Taildwind CSS

Dockerize aplikasi Next JS dengan Mode Standalone dengan ukuran yang lebih kecil

#semuabisakoding

Bangun Karir Masa Depan Bersama
Mistercoding

Ingin menguasai Backend Developer + DevOps?

Ulasan Member

Frequently Asked Questions

#semuabisakoding

Bangun Karir Masa Depan Bersama .css-13wa1u5{background-image:linear-gradient(to right, var(--chakra-colors-gray-400), var(--chakra-colors-pink-400));color:transparent;-webkit-background-clip:text;background-clip:text;}Mistercoding

Ingin menguasai Backend Developer + DevOps?

Ulasan Member

Frequently Asked Questions

Apakah Mistercoding.com gratis?

Siapa saja yang bisa mengakses untuk belajar di Mistercoding?

Bagaimana proses belajar di Mistercoding.com?

Apakah tersedia sertifikat?

Apakah yang dimaksud akses kelas selamanya?

Bangun Karir Masa Depan Bersama
Mistercoding