Back to Projects

OpenAI Project

Simpel Web App untuk berinteraksi dengan ChatGPT & Dall·E 2 menggunakan OpenAI API

OpenAI Project - Image 1
0 views
2 min read

Project Overview

OpenAI Project adalah sebuah web application sederhana yang saya bangun untuk bereksperimen langsung dengan OpenAI API, khususnya untuk berinteraksi dengan ChatGPT dan DALL·E 2.

Project ini menyediakan dua mode utama:

  • Chat mode untuk berinteraksi dengan Large Language Model (LLM)
  • Image generation mode untuk menghasilkan gambar berbasis teks menggunakan DALL·E 2

Aplikasi ini dibuat sebagai bentuk eksplorasi awal saya terhadap sistem AI generatif dan bagaimana LLM dapat diintegrasikan ke dalam aplikasi web.


Latar Belakang & Motivasi

Project ini dibuat pada akhir tahun 2022, tepat setelah ChatGPT pertama kali dirilis dan mulai booming. Pada saat itu, saya sangat penasaran:

  • Bagaimana cara kerja chatbot berbasis LLM?
  • Bagaimana cara membangun sistem chat yang terhubung ke model AI?
  • Bagaimana OpenAI API digunakan secara praktis di aplikasi web?

Alih-alih hanya menggunakan ChatGPT sebagai user, saya ingin memahami prosesnya dari sisi developer — mulai dari request ke API, pengelolaan prompt, hingga menampilkan respons ke UI.


Tujuan Project

Tujuan utama dari project ini adalah pembelajaran dan eksplorasi teknis, bukan untuk membangun produk skala besar.

Melalui project ini, saya ingin:

  • Memahami cara integrasi OpenAI API
  • Membuat sistem chatbot sederhana berbasis web
  • Mengeksplorasi text-to-image generation menggunakan DALL·E 2
  • Mempelajari batasan, response pattern, dan penggunaan API LLM secara langsung

Fitur Utama

Project ini memiliki dua fitur inti:

1. Chat dengan ChatGPT

  • User dapat melakukan percakapan dengan ChatGPT melalui UI web
  • Prompt dikirim ke OpenAI API menggunakan Axios
  • Respons ditampilkan secara real-time sebagai chat interface
  • Digunakan untuk memahami pola input-output LLM

2. Image Generation dengan DALL·E 2

  • User dapat memasukkan prompt deskriptif
  • Sistem akan menghasilkan gambar menggunakan DALL·E 2
  • Output berupa gambar AI-generated yang sesuai dengan prompt
  • Digunakan untuk memahami workflow text-to-image generation

Teknologi & Arsitektur

Project ini dibangun dengan stack yang cukup sederhana namun relevan untuk eksperimen:

  • React

    • Digunakan untuk membangun UI interaktif
  • TailwindCSS

    • Styling cepat dan ringan
  • Axios

    • HTTP client untuk komunikasi dengan OpenAI API
  • OpenAI API

    • Chat completion (ChatGPT)
    • Image generation (DALL·E 2)
  • Vercel

    • Deployment aplikasi web

Aplikasi ini menggunakan pendekatan frontend-heavy dengan pemanggilan API langsung untuk keperluan eksplorasi.


What I Learned

Dari project ini, saya mendapatkan banyak pembelajaran awal terkait AI dan LLM, di antaranya:

  • Cara kerja dasar Large Language Model (LLM)
  • Cara berinteraksi dengan OpenAI API
  • Mengelola prompt dan response dari AI
  • Perbedaan workflow antara text generation dan image generation
  • Tantangan dalam membangun UI chat sederhana
  • Pentingnya prompt clarity terhadap hasil output AI

Project ini menjadi salah satu pintu masuk saya ke dunia AI-powered application development.


Keterbatasan Project

Karena fokus utama project ini adalah eksplorasi, terdapat beberapa keterbatasan:

  • Belum ada sistem conversation memory yang kompleks
  • Belum ada backend khusus untuk security dan rate limiting
  • Fokus pada fitur inti, bukan scalability atau production-readiness

Namun, keterbatasan ini memang disengaja agar fokus tetap pada pemahaman konsep dasar.


Mengapa Project Ini Penting

Walaupun sederhana, project ini memiliki peran penting dalam perjalanan saya karena:

  • Dibuat di momen awal kebangkitan AI generatif
  • Menjadi eksperimen pertama saya dengan LLM
  • Membantu saya memahami AI bukan hanya sebagai user, tetapi sebagai developer
  • Menjadi fondasi pemahaman untuk eksplorasi AI selanjutnya

Kesimpulan

OpenAI Project adalah project eksplorasi awal saya dalam membangun aplikasi berbasis AI menggunakan OpenAI API.

Project ini merepresentasikan rasa penasaran saya terhadap teknologi baru yang sedang berkembang pesat, serta keinginan untuk memahami cara kerja LLM dan AI generatif dari sisi implementasi teknis.

Untuk detail implementasi, contoh prompt, dan source code lengkap, silakan langsung melihat repository project ini di GitHub.

More or Related Projects

Beasiswa
June 14, 2023

Beasiswa

Sistem manajemen beasiswa berbasis web untuk mengelola pengajuan, seleksi penerima, dan laporan.

0000
Tools:
+5
E-Perpus Solo
November 29, 2023

E-Perpus Solo

Sebuah aplikasi sistem manajemen perpustakaan open source dengan framework CodeIgniter versi 3.1.13

0000
Tools:
+10
Finboost Backend
May 10, 2024

Finboost Backend

Layanan backend berbasis cloud untuk aplikasi mobile yang menyediakan autentikasi, fitur chat, dan kapabilitas berbasis AI.

0000
Tools:
+8