Gambar AI generate

 

import React, { useState } from 'react'; // Main App component const App = () => { const [prompt, setPrompt] = useState(''); const [imageUrl, setImageUrl] = useState(''); const [isLoading, setIsLoading] = useState(false); const [error, setError] = useState(''); // Function to handle image generation const generateImage = async () => { if (!prompt.trim()) { setError('Silakan masukkan deskripsi untuk gambar.'); return; } setIsLoading(true); setError(''); setImageUrl(''); try { // Payload for the image generation API call const payload = { instances: { prompt: prompt }, parameters: { "sampleCount": 1 } }; // API key is left empty; Canvas will provide it at runtime const apiKey = ""; // API URL for image generation const apiUrl = `https://generativelanguage.googleapis.com/v1beta/models/imagen-3.0-generate-002:predict?key=${apiKey}`; const response = await fetch(apiUrl, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const result = await response.json(); // Check if the response contains the image data if (result.predictions && result.predictions.length > 0 && result.predictions[0].bytesBase64Encoded) { const base64Image = result.predictions[0].bytesBase64Encoded; setImageUrl(`data:image/png;base64,${base64Image}`); } else { setError('Gagal membuat gambar. Coba lagi.'); console.error('Unexpected API response:', result); } } catch (err) { setError('Terjadi kesalahan saat membuat gambar. Periksa koneksi Anda atau coba lagi nanti.'); console.error('Error generating image:', err); } finally { setIsLoading(false); } }; return (

Buat Gambar Anda

setPrompt(e.target.value)} rows="4" >

{error && (

{error}

)} {imageUrl && (

Gambar Anda:

{ e.target.onerror = null; e.target.src="https://placehold.co/400x300/CCCCCC/333333?text=Gagal+Memuat+Gambar"; }} />

)}

); }; export default App;