Folder ini berisi pipeline Computer Vision dan Generative AI (LLM) untuk mengubah gambar slide presentasi menjadi halaman HTML interaktif dan editable (dapat diedit). Proses ini menggabungkan Optical Character Recognition (OCR), Image Inpainting, dan ekstraksi styling cerdas menggunakan model multimodal.

• function.py: Kumpulan fungsi inti (core functions) yang digunakan dalam pipeline, meliputi pemrosesan gambar, inpainting, interaksi dengan Gemini API, hingga pembuatan file HTML.
• pipeline.ipynb: Notebook Jupyter yang menjadi alur kerja utama (main pipeline). Berisi eksekusi berurutan dari ekstraksi OCR hingga generasi output akhir.

Sistem bekerja dengan langkah-langkah berikut:

1. Ekstraksi Teks (OCR): Menggunakan EasyOCR di dalam pipeline.ipynb untuk mendeteksi teks dan bounding box dari gambar slide asli.
2. Pembuatan Masking (masking_damaged_area): Membuat mask hitam-putih pada area di mana teks terdeteksi.
3. Penghapusan Teks / Inpainting (inpainting_image): Menggunakan OpenCV (cv2.inpaint metode TELEA) yang digabungkan dengan algoritma denoising dan smoothing untuk menghapus teks dari gambar asli, menghasilkan gambar latar belakang (background) yang bersih dari teks.
4. Augmentasi Data dengan AI Multimodal (generate_augmented_data): Mengirimkan gambar asli dan data teks mentah (hasil OCR) ke Google Gemini Multimodal API. Gemini akan melakukan proses Reverse Engineering UI/UX dengan mencocokkan teks ke elemen visual di gambar untuk memprediksi atribut styling CSS (seperti ukuran font, ketebalan font, dan warna hex). Hasilnya berupa JSON.
5. Generasi HTML (generate_html): Menyusun struktur HTML & CSS menggunakan gambar hasil inpainting sebagai latar belakang, dan menempatkan teks (hasil dari JSON Gemini) secara absolut (position: absolute) dengan style dan koordinat yang akurat sesuai gambar aslinya. Elemen teks dibuat contenteditable="true" sehingga dapat langsung diedit di browser.

Pastikan Anda memiliki package berikut:

pip install opencv-python easyocr numpy pillow matplotlib google-generativeai python-dotenv

Anda juga membutuhkan API Key dari Google Gemini. Buat file .env di folder ini (atau folder root) dan tambahkan key Anda:

GOOGLE_API_KEY=your_gemini_api_key_here

Fungsi-fungsi di skrip ini akan secara otomatis membuat folder output jika belum ada (diletakkan satu level di atas direktori ini atau sesuai path relatif):

• ../masking/: Hasil visualisasi teks yang dideteksi oleh EasyOCR.
• ../masking/mask/: Gambar mask (hitam-putih) tempat lokasi teks berada.
• ../inpaint/: Hasil slide yang teksnya telah dihapus secara presisi (latar belakang bersih).
• ../augmented_data/: File JSON yang berisi penggabungan teks OCR dengan atribut CSS hasil prediksi LLM.
• ../result/: Hasil akhir berupa file .html yang dapat dibuka langsung melalui browser.

1. Siapkan gambar slide di direktori ../image/ (misalnya slide1.jpg).
2. Buka pipeline.ipynb menggunakan Jupyter Notebook atau VS Code.
3. Jalankan cell secara berurutan. Semua proses akan tereksekusi, dari OCR hingga pembentukan file HTML.
4. Buka file .html yang digenerasi di dalam folder ../result/ dengan browser pilihan Anda.