Tutorial Lengkap Generator Gambar AI + Domain .my.id + Deploy ke GitHub Pages

1

Buat Kode Website dengan Deepseek AI

1.1 Akses Deepseek AI

Buka Deepseek Chat
Buat akun gratis atau login jika sudah punya

1.2 Kirim Prompt Spesifik

Gunakan prompt berikut atau bisa Anda kembangkan lagi sesuai kebutuhan masing-masing untuk membuat generator gambar AI:

buatkan website generator gambar AI menggunakan parameter pollinations AI: 
Generate Image: `GET https://image.pollinations.ai/prompt/{prompt}`

List Models: `GET https://image.pollinations.ai/models`

Atau berikut

/* Buatkan kode website generator gambar AI dengan fitur:
1. Input text area untuk prompt gambar
2. Pilihan model AI (Stable Diffusion, DALL-E, FLUX)
3. Parameter: width (512-1024), height (512-1024), steps (20-100)
4. Tombol generate yang mengakses API pollinations.ai
5. Tampilkan hasil gambar dalam grid responsive
6. Fitur download gambar
7. Desain modern dengan gradien biru-ungu
8. Animasi loading saat proses generate
9. Error handling untuk API response

Gunakan:
- HTML5, CSS3 modern dengan flexbox/grid
- Vanilla JavaScript ES6
- API endpoint: https://image.pollinations.ai/prompt/{prompt}
- Contoh parameter: ?width=512&height=512&steps=50

Buat dalam satu file HTML dengan CSS dan JS embedded */

Tips: Anda bisa modifikasi prompt dengan menambahkan:

"Tambahkan pilihan style (realistic, anime, painting)"
"Buat dark/light mode toggle"
"Tambahkan history prompt (local storage)"
"Tambahkan fitur share ke media sosial"

1.3 Simpan Kode yang Dihasilkan

Copy seluruh kode dari Deepseek
Buat file baru bernama index.html
Paste kode tersebut dan simpan
Buka file di browser untuk mengetes fungsionalitas dasar

Perhatian: Pastikan kode yang dihasilkan sudah termasuk semua fitur yang diminta dalam prompt. Jika ada yang kurang, Anda bisa meminta Deepseek untuk menyempurnakannya.

2

Optimasi Kode untuk Pollinations API

2.1 Contoh Kode Dasar

Berikut struktur dasar yang akan dihasilkan Deepseek:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI Image Generator</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background: #f5f7ff;
            margin: 0;
            padding: 20px;
        }
            .container {
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background: white;
            border-radius: 10px;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        h1 {
            background: linear-gradient(135deg, #4A6CF7, #9C27B0);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            text-align: center;
        }
        #result {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            gap: 20px;
            margin-top: 20px;
        }
        .image-card {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 3px 6px rgba(0,0,0,0.1);
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>AI Image Generator</h1>
        <div class="controls">
            <textarea id="prompt" placeholder="Describe the image..." rows="3"></textarea>
            <button id="generate">Generate</button>
        </div>
        <div id="result"></div>
    </div>

    <script>
        document.getElementById('generate').addEventListener('click', () => {
            const prompt = document.getElementById('prompt').value;
            if (!prompt) return alert('Please enter a prompt');
            
            const url = `https://image.pollinations.ai/prompt/${encodeURIComponent(prompt)}`;
            
            const img = document.createElement('img');
            img.src = url;
            img.alt = prompt;
            img.classList.add('image-card');
            document.getElementById('result').appendChild(img);
        });
    </script>
</body>
</html>

2.2 Kode yang Dioptimasi (opsional)

Tambahkan fitur berikut untuk pengalaman lebih baik:

// Optimasi JavaScript const generateImage = async () => { const prompt = document.getElementById('prompt').value; const model = document.getElementById('model').value || 'stable-diffusion'; const width = document.getElementById('width').value || 512; const height = document.getElementById('height').value || 512; const steps = document.getElementById('steps').value || 50; if (!prompt) { showAlert('Masukkan prompt terlebih dahulu', 'error'); return; } // Tampilkan loading document.getElementById('loading').style.display = 'block'; document.getElementById('result').innerHTML = ''; try { // Generate 4 variasi gambar for (let i = 0; i < 4; i++) { const seed = Math.floor(Math.random() * 10000); const imgUrl = `https://image.pollinations.ai/prompt/${ model}:${encodeURIComponent(prompt)}?width=${width}&height=${height}&steps=${steps}&seed=${seed}`; const imgCard = document.createElement('div'); imgCard.className = 'image-card'; const img = document.createElement('img'); img.src = imgUrl; img.alt = prompt; img.loading = 'lazy'; img.onerror = () => { imgCard.innerHTML = '

Gagal memuat gambar. Coba prompt lain.

'; imgCard.style.padding = '15px'; imgCard.style.textAlign = 'center'; }; const downloadBtn = document.createElement('button'); downloadBtn.innerHTML = ' Download'; downloadBtn.onclick = () => downloadImage(imgUrl, prompt); imgCard.appendChild(img); imgCard.appendChild(downloadBtn); document.getElementById('result').appendChild(imgCard); } } catch (error) { console.error('Error:', error); showAlert('Gagal generate gambar', 'error'); } finally { document.getElementById('loading').style.display = 'none'; } }; // Fungsi download gambar const downloadImage = (url, filename) => { fetch(url) .then(response => { if (!response.ok) throw new Error('Network response was not ok'); return response.blob(); }) .then(blob => { const link = document.createElement('a'); link.href = URL.createObjectURL(blob); link.download = `ai-image-${filename.substring(0, 20)}-${Date.now()}.jpg`; document.body.appendChild(link); link.click(); document.body.removeChild(link); }) .catch(error => { console.error('Download error:', error); showAlert('Gagal mengunduh gambar', 'error'); }); }; // Fungsi tampilkan alert const showAlert = (message, type) => { const alertDiv = document.createElement('div'); alertDiv.className = `alert ${type}`; alertDiv.textContent = message; document.body.appendChild(alertDiv); setTimeout(() => { alertDiv.remove(); }, 3000); }; // Event listener untuk tombol generate document.getElementById('generateBtn').addEventListener('click', generateImage); // Event listener untuk tekan Enter di textarea document.getElementById('prompt').addEventListener('keypress', (e) => { if (e.key === 'Enter') { e.preventDefault(); generateImage(); } });

Penjelasan Optimasi:

Menambahkan error handling yang lebih baik
Mendukung multiple image generation dengan seed berbeda
Fitur download yang lebih reliable
Animasi loading saat proses generate
Dukungan untuk model dan parameter berbeda
Alert system yang lebih user friendly

3

Beli Domain .my.id di IDWebhost

3.1 Registrasi Domain

Kunjungi IDWebhost
Cari domain .my.id yang tersedia (contoh: aigenerator.my.id)
Klik "Pesan Sekarang" dan ikuti proses checkout
Verifikasi email dari PANDI untuk aktivasi domain

Penting: Domain .my.id membutuhkan verifikasi identitas. Pastikan data registrasi sesuai dengan KTP/SIM. Proses verifikasi biasanya memakan waktu 1-2 hari kerja. (agar aktivasi lebih cepat, pastikan pembayaran melalui QRIS)

Harga Domain Rp. 3000 1 April - 30 Juni 2025

3.2 Konfigurasi DNS

Setelah domain aktif:

Login ke member area IDWebhost
Pilih "Domain Saya" > "Manage Domain"
Pilih "DNS Management"
Tambahkan record berikut:

Catatan: Ganti "username" dengan username GitHub Anda. Jika menggunakan organization, formatnya adalah: organizationname.github.io

4

Deploy ke GitHub Pages

4.1 Buat Repository GitHub

Buka github.com/new
Beri nama: username.github.io (ganti dengan username GitHub Anda)
Pilih "Public"
Centang "Add a README file"
Klik "Create repository"

4.2 Upload Kode Website

Metode 1: Via Web Interface

Di repository baru, klik "Add file" > "Upload files"
Drag & drop file index.html
Klik "Commit changes"

Metode 2: Via Git Command Line

# Clone repository git clone https://github.com/username/username.github.io.git # Masuk ke direktori cd username.github.io # Copy file HTML ke direktori cp /path/ke/index.html . # Commit dan push git add . git commit -m "Add AI image generator" git push origin main

4.3 Setting Custom Domain

Di repository, buka "Settings" > "Pages"
Di "Custom domain", masukkan domain Anda (contoh: aigenerator.my.id)
Klik "Save"
Buat file CNAME berisi domain Anda (tanpa http/https)
Commit perubahan

Propagasi DNS: Butuh waktu 1-24 jam sampai domain bisa diakses. Cek progres di WhatsMyDNS.net dengan memasukkan domain Anda.

Penting: Pastikan repository Anda public dan GitHub Pages sudah aktif. Anda bisa cek di Settings > Pages, harus ada tulisan "Your site is live at https://username.github.io".

5

Verifikasi dan Peluncuran

5.1 Tes Website

Buka domain Anda di browser (contoh: https://aigenerator.my.id)
Masukkan prompt dan klik generate
Pastikan gambar muncul dan bisa didownload
Test di berbagai device dan browser

5.2 Optimasi Tambahan

Tambahkan fitur ini untuk pengalaman lebih baik:

// Tambahkan di HTML
<div class="params">
    <select id="model">
        <option value="stable-diffusion">Stable Diffusion</option>
        <option value="dall-e">DALL-E</option>
        <option value="kandinsky">Kandinsky</option>
    </select>
    <input type="number" id="width" placeholder="Width" min="256" max="1024" value="512">
    <input type="number" id="height" placeholder="Height" min="256" max="1024" value="512">
    <input type="number" id="steps" placeholder="Steps" min="20" max="100" value="50">
    <select id="style">
        <option value="">Default Style</option>
        <option value="realistic">Realistic</option>
        <option value="anime">Anime</option>
        <option value="painting">Painting</option>
    </select>
</div>

// Tambahkan di CSS
.params {
    display: flex;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: wrap;
}
.params select, .params input {
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid #ddd;
    background: var(--card-bg);
    color: var(--text);
    transition: all 0.3s ease;
}
.params select:focus, .params input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 2px rgba(74, 108, 247, 0.2);
}

// Tambahkan di JavaScript
// Simpan prompt terakhir ke localStorage
localStorage.setItem('lastPrompt', prompt);
const lastPrompt = localStorage.getItem('lastPrompt');
if (lastPrompt) {
    document.getElementById('prompt').value = lastPrompt;
}

// Tambahkan fitur share
const shareImage = (imgUrl, prompt) => {
    if (navigator.share) {
        navigator.share({
            title: 'AI Generated Image',
            text: `Check out this AI generated image: ${prompt}`,
            url: imgUrl,
        }).catch(console.error);
    } else {
        // Fallback untuk browser yang tidak support Web Share API
        const shareUrl = `https://twitter.com/intent/tweet?text=${encodeURIComponent(`AI generated image: ${prompt}`)}&url=${encodeURIComponent(imgUrl)}`;
        window.open(shareUrl, '_blank');
    }
};

// Tambahkan tombol share di setiap gambar
const shareBtn = document.createElement('button');
shareBtn.innerHTML = ' Share';
shareBtn.onclick = () => shareImage(imgUrl, prompt);
imgCard.appendChild(shareBtn);

Fitur Tambahan:

Pilihan model AI lebih banyak
Pilihan style gambar
Penyimpanan prompt terakhir
Fitur share gambar
Tampilan yang lebih responsif

Lihat Demo 1 Lihat Demo 2

Tutorial Lengkap Generator AI + Domain + Deploy