AI Electronic Module Identifier

Platform web cerdas berbasis computer vision dan generative AI untuk mengenali, mengidentifikasi, dan menyajikan spesifikasi teknis lengkap berbagai modul elektronik, sensor, aktuator, serta papan mikrokontroler melalui foto atau umpan kamera langsung.

---

Ringkasan Proyek

Mengidentifikasi modul elektronik sering kali menjadi kendala bagi pelajar, pengembang IoT, dan praktisi robotika ketika berhadapan dengan komponen tanpa label yang jelas. Kesalahan dalam konfigurasi tegangan (seperti menghubungkan 5V ke pin 3.3V) dapat menyebabkan kerusakan fatal pada komponen.

AI Electronic Module Identifier hadir sebagai solusi terpadu untuk:

1. Mengenali modul elektronik secara instan menggunakan model visi multimodal (Google Gemini Vision).
2. Memvisualisasikan diagram pinout interaktif dengan indikator tegangan aman.
3. Menyediakan asisten AI (Hardware Copilot) untuk konsultasi perancangan skema rangkaian dan pemecahan masalah (troubleshooting).
4. Menyediakan pustaka contoh kode inisialisasi yang dapat disalin untuk berbagai platform mikrokontroler.

---

Fitur Utama

• Pemindai Modul AI (Module Scanner):
  • Unggah berkas gambar dengan antarmuka tarik-dan-lepas (drag-and-drop).
  • Integrasi kamera peramban (WebRTC) untuk pengambilan foto langsung.
  • Pilihan gambar sampel bawaan untuk pengujian instan.
• Identifikasi Komponen Otomatis:
  • Deteksi nama modul, varian mikrokontroler, dan nilai tingkat keyakinan (confidence score).
  • Informasi tegangan operasional, antarmuka komunikasi (I2C, SPI, UART, GPIO), dan ringkasan fungsionalitas.
• Diagram Pinout Interaktif:
  • Visualisasi pin dengan kode warna terstandarisasi (Power, Ground, Digital, Analog, Communication).
  • Peringatan batas tegangan untuk mencegah kerusakan komponen akibat kesalahan sambungan daya.
• AI Hardware Copilot:
  • Asisten cerdas berbasis obrolan untuk tanya jawab skema pengkabelan (wiring diagram), perhitungan nilai resistor, dan pemilihan modul pengganti.
• Playground Kode Inisialisasi:
  • Templat kode program awal siap pakai dalam format Arduino C++, MicroPython, dan CircuitPython.
• Direktori Modul Lengkap:
  • Basis data modul elektronik bawaan dengan fitur pencarian dan penyaringan berdasarkan kategori.

---

Arsitektur Sistem

flowchart TD
    subgraph Input_Layer["1. Lapisan Masukan Citra"]
        Upload["Unggah Gambar (JPG/PNG/WebP)"]
        Webcam["Tangkapan Kamera WebRTC"]
        Samples["Pustaka Gambar Sampel"]
    end

    subgraph Processing_Layer["2. Mesin Analisis AI dan Visi"]
        Preprocessor["Praperlakuan Citra (Resize dan Base64)"]
        GeminiVision["Google Gemini Vision AI Engine"]
        RuleMatcher["Pencocok Basis Data Modul Internal"]
    end

    subgraph Service_Layer["3. Layanan Pendukung"]
        Copilot["AI Hardware Copilot (LLM Chat)"]
        CodeEngine["Generator Kode dan Sintaksis"]
        PinoutMapper["Visualisator Pinout dan Tegangan"]
    end

    subgraph UI_Layer["4. Antarmuka Pengguna (React dan Vite)"]
        Dashboard["Tampilan Utama dan Hasil Deteksi"]
        PinoutView["Komponen Diagram Pinout"]
        ChatUI["Panel Obrolan Asisten Hardware"]
        CodeView["Playground Kode dan Salin Skrip"]
    end

    Input_Layer --> Preprocessor
    Preprocessor --> GeminiVision
    GeminiVision --> RuleMatcher
    RuleMatcher --> PinoutMapper
    RuleMatcher --> CodeEngine
    RuleMatcher --> Copilot
    PinoutMapper --> PinoutView
    CodeEngine --> CodeView
    Copilot --> ChatUI
    PinoutView --> Dashboard
    CodeView --> Dashboard
    ChatUI --> Dashboard

Loading

---

Prasyarat Sistem

• Node.js 18.0 atau lebih baru
• npm atau yarn / pnpm
• Google Gemini API Key (Dapat diperoleh secara gratis melalui Google AI Studio)

---

Panduan Instalasi dan Menjalankan

1. Kloning Repositori

git clone https://github.com/murdifin15/AI-Electronic-Module-Identifier.git
cd AI-Electronic-Module-Identifier

2. Masuk ke Direktori Frontend

cd frontend

3. Instalasi Dependensi

npm install

4. Konfigurasi Kunci API (API Key)

Buat berkas .env di dalam folder frontend/ atau masukkan kunci API langsung melalui menu pengaturan antarmuka aplikasi:

VITE_GEMINI_API_KEY=your_google_gemini_api_key_here

5. Menjalankan Server Pengembangan

npm run dev

Buka peramban dan navigasikan ke alamat lokal:

http://localhost:5173

---

Struktur Direktori Repositori

AI-Electronic-Module-Identifier/
├── backend/
│   └── .gitkeep                  # Direktori layanan backend
│
├── frontend/
│   ├── public/                   # Aset statis publik, favicon, dan ikon SVG
│   ├── src/
│   │   ├── components/           # Komponen antarmuka modular React
│   │   │   ├── code/             # Modul Code Playground: editor dan penyalin kode
│   │   │   ├── copilot/          # Modul AI Hardware Copilot: panel chat konsultasi
│   │   │   ├── directory/        # Modul Katalog Direktori: pencarian modul
│   │   │   ├── module-view/      # Modul Detail Tampilan: spesifikasi modul
│   │   │   ├── pinout/           # Modul Pinout Interaktif: visualisasi pin & voltase
│   │   │   ├── scanner/          # Modul Pemindai: penangkap kamera WebRTC & upload
│   │   │   └── settings/         # Modal Pengaturan: konfigurasi API Key Gemini
│   │   ├── data/
│   │   │   ├── moduleDatabase.ts # Basis data spesifikasi teknis modul & sensor
│   │   │   └── sampleImages.ts   # Pustaka gambar sampel untuk pengujian instan
│   │   ├── services/
│   │   │   ├── geminiVisionService.ts  # Integrasi Google Gemini Vision API
│   │   │   ├── copilotService.ts       # Integrasi asisten percakapan LLM
│   │   │   └── aiInferenceService.ts   # Orkestrator inferensi & pemrosesan citra
│   │   ├── types/
│   │   │   └── moduleTypes.ts    # Definisi tipe dan antarmuka TypeScript
│   │   ├── App.tsx               # Komponen root aplikasi React
│   │   └── main.tsx              # Titik masuk eksekusi React DOM
│   ├── index.html                # Berkas HTML utama
│   ├── package.json              # Konfigurasi dependensi JavaScript (React, Lucide, Vite)
│   ├── tsconfig.json             # Konfigurasi kompilator TypeScript
│   └── vite.config.ts            # Konfigurasi bundler Vite
│
├── LICENSE                       # Berkas lisensi resmi MIT (Hak Cipta Murdifin)
├── PRD.md                        # Dokumen Persyaratan Produk (PRD)
├── StyleGuide.md                 # Pedoman standar desain antarmuka (UI/UX)
├── Tasks.md                      # Log tugas dan catatan pengembangan
├── .gitignore                    # Konfigurasi pengabaian berkas sementara oleh Git
└── README.md                     # Dokumentasi teknis proyek

Penjelasan Komponen dan Modul Frontend

Direktori / Modul	Komponen Kunci	Deskripsi Fungsional
components/scanner/	ModuleScanner.tsx	Menangani masukan citra dari webcam secara real-time via WebRTC, fitur drag-and-drop berkas gambar, serta efek animasi pemindaian (scanline).
components/pinout/	InteractivePinout.tsx	Merender visualisasi pinout perangkat keras secara interaktif dengan indikator kode warna untuk pin Daya, Ground, Digital, dan Komunikasi (I2C/SPI/UART).
components/copilot/	AiHardwareCopilot.tsx	Antarmuka percakapan interaktif untuk asisten AI teknis dalam memecahkan masalah rangkaian elektronika, skema wiring, dan pemilihan komponen.
components/code/	CodePlayground.tsx	Menyajikan templat kode inisialisasi yang dapat langsung diuji dan disalin untuk Arduino IDE, MicroPython, dan CircuitPython.
services/	geminiVisionService.ts, copilotService.ts	Mengelola komunikasi jaringan ke Google Gemini API untuk pengenalan gambar multimodal dan penalaran konteks perangkat keras.
data/	moduleDatabase.ts	Menyimpan katalog informasi statis, pinout, tegangan kerja, dan deskripsi teknis untuk berbagai mikrokontroler dan sensor populer.

---

Lisensi

Proyek ini dilisensikan di bawah MIT License - Hak Cipta (c) 2026 Murdifin.