MACRO NEPAL
SOURCE CODE FOR GOOGLE NANO BANATEXT GENERATION
awiskar acharya
September 29, 2025
3:08 pm
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Nano Banana Image Generator</title>
<script src="https://js.puter.com/v2/"></script>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
min-height: 100vh;
color: #333;
padding: 20px;
}
.container {
max-width: 1200px;
margin: 0 auto;
background: white;
border-radius: 20px;
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
overflow: hidden;
}
header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 40px;
text-align: center;
}
.logo {
font-size: 4rem;
margin-bottom: 15px;
animation: float 3s ease-in-out infinite;
}
@keyframes float {
0%, 100% { transform: translateY(0px); }
50% { transform: translateY(-10px); }
}
h1 {
font-size: 2.8rem;
margin-bottom: 15px;
font-weight: 800;
}
.subtitle {
font-size: 1.3rem;
opacity: 0.9;
max-width: 600px;
margin: 0 auto;
line-height: 1.6;
}
.main-content {
padding: 40px;
}
.app-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 40px;
}
@media (max-width: 968px) {
.app-container {
grid-template-columns: 1fr;
}
}
.input-section, .output-section {
display: flex;
flex-direction: column;
}
.card {
background: #f8fafc;
border-radius: 15px;
padding: 30px;
margin-bottom: 25px;
border: 1px solid #e2e8f0;
}
.card h2 {
color: #2d3748;
margin-bottom: 20px;
font-size: 1.5rem;
display: flex;
align-items: center;
gap: 10px;
}
.card h2 i {
color: #667eea;
}
.form-group {
margin-bottom: 25px;
}
label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #2d3748;
font-size: 1.1rem;
}
textarea {
width: 100%;
padding: 20px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 16px;
transition: all 0.3s;
resize: vertical;
min-height: 120px;
line-height: 1.6;
}
textarea:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.style-options {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: 12px;
margin-top: 10px;
}
.style-option {
background: white;
border: 2px solid #e2e8f0;
border-radius: 10px;
padding: 15px;
text-align: center;
cursor: pointer;
transition: all 0.3s;
font-weight: 500;
}
.style-option:hover {
border-color: #667eea;
transform: translateY(-2px);
}
.style-option.selected {
border-color: #667eea;
background: #667eea;
color: white;
}
.dimension-options {
display: flex;
gap: 15px;
margin-top: 10px;
}
.dimension-option {
flex: 1;
text-align: center;
padding: 15px;
background: white;
border: 2px solid #e2e8f0;
border-radius: 10px;
cursor: pointer;
transition: all 0.3s;
font-weight: 600;
}
.dimension-option:hover {
border-color: #667eea;
}
.dimension-option.selected {
border-color: #667eea;
background: #667eea;
color: white;
}
button {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
padding: 18px 30px;
border-radius: 12px;
font-size: 18px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s;
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
width: 100%;
margin: 10px 0;
}
button:hover {
transform: translateY(-3px);
box-shadow: 0 15px 30px rgba(102, 126, 234, 0.4);
}
button:active {
transform: translateY(-1px);
}
.loading {
display: none;
text-align: center;
padding: 40px;
}
.spinner {
border: 5px solid rgba(102, 126, 234, 0.2);
border-left-color: #667eea;
border-radius: 50%;
width: 60px;
height: 60px;
animation: spin 1s linear infinite;
margin: 0 auto 20px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.image-container {
background: #f8fafc;
border-radius: 15px;
padding: 30px;
text-align: center;
min-height: 400px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border: 2px dashed #cbd5e0;
}
.placeholder-text {
color: #718096;
font-size: 1.1rem;
margin-bottom: 20px;
}
.placeholder-icon {
font-size: 4rem;
color: #cbd5e0;
margin-bottom: 20px;
}
.generated-image {
max-width: 100%;
max-height: 500px;
border-radius: 12px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
display: none;
}
.image-actions {
display: flex;
gap: 15px;
margin-top: 25px;
width: 100%;
}
.action-btn {
flex: 1;
padding: 15px;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
border: 2px solid #667eea;
}
.download-btn {
background: #667eea;
color: white;
}
.regenerate-btn {
background: white;
color: #667eea;
}
.action-btn:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.history-section {
margin-top: 30px;
}
.history-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
gap: 15px;
margin-top: 15px;
}
.history-item {
border-radius: 10px;
overflow: hidden;
cursor: pointer;
transition: transform 0.3s;
aspect-ratio: 1;
}
.history-item:hover {
transform: scale(1.05);
}
.history-item img {
width: 100%;
height: 100%;
object-fit: cover;
}
.notification {
position: fixed;
top: 20px;
right: 20px;
background: #48bb78;
color: white;
padding: 15px 25px;
border-radius: 10px;
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);
display: none;
z-index: 1000;
animation: slideIn 0.3s ease;
}
@keyframes slideIn {
from { transform: translateX(100%); opacity: 0; }
to { transform: translateX(0); opacity: 1; }
}
@media (max-width: 768px) {
.main-content {
padding: 20px;
}
.style-options {
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
}
.dimension-options {
flex-direction: column;
}
h1 {
font-size: 2.2rem;
}
.logo {
font-size: 3rem;
}
}
</style>
</head>
<body>
<div class="container">
<header>
<div class="logo">🍌</div>
<h1>Nano Banana Image Generator</h1>
<p class="subtitle">Create stunning AI-generated images for free using Google's Gemini 2.5 Flash Image model. No API keys required!</p>
</header>
<div class="main-content">
<div class="app-container">
<!-- Input Section -->
<div class="input-section">
<div class="card">
<h2><i class="fas fa-edit"></i> Image Description</h2>
<div class="form-group">
<label for="prompt">Describe your image</label>
<textarea id="prompt" placeholder="Enter a detailed description of the image you want to generate...">A serene Japanese garden with cherry blossoms, koi pond, and traditional pagoda during golden hour</textarea>
</div>
</div>
<div class="card">
<h2><i class="fas fa-palette"></i> Art Style</h2>
<div class="style-options">
<div class="style-option" data-style="realistic">Realistic</div>
<div class="style-option selected" data-style="digital art">Digital Art</div>
<div class="style-option" data-style="painting">Painting</div>
<div class="style-option" data-style="anime">Anime</div>
<div class="style-option" data-style="fantasy">Fantasy</div>
<div class="style-option" data-style="minimalist">Minimalist</div>
</div>
</div>
<div class="card">
<h2><i class="fas fa-expand"></i> Image Size</h2>
<div class="dimension-options">
<div class="dimension-option selected" data-size="1024x1024">Square</div>
<div class="dimension-option" data-size="1024x768">Landscape</div>
<div class="dimension-option" data-size="768x1024">Portrait</div>
</div>
</div>
<button id="generate-btn">
<span>✨</span> Generate Image
</button>
<div class="loading" id="loading">
<div class="spinner"></div>
<p>Creating your image with Nano Banana AI...</p>
</div>
</div>
<!-- Output Section -->
<div class="output-section">
<div class="card">
<h2><i class="fas fa-image"></i> Generated Image</h2>
<div class="image-container" id="image-container">
<div class="placeholder-icon">🖼️</div>
<div class="placeholder-text">Your generated image will appear here</div>
<img class="generated-image" id="generated-image" alt="Generated image">
</div>
<div class="image-actions" id="image-actions" style="display: none;">
<button class="action-btn download-btn" id="download-btn">
<span>📥</span> Download
</button>
<button class="action-btn regenerate-btn" id="regenerate-btn">
<span>🔄</span> Regenerate
</button>
</div>
</div>
<div class="card history-section">
<h2><i class="fas fa-history"></i> Generation History</h2>
<div class="history-grid" id="history-grid">
<!-- History items will be added here -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Notification -->
<div class="notification" id="notification">
<i class="fas fa-check-circle"></i> Image downloaded successfully!
</div>
<script>
// DOM Elements
const promptInput = document.getElementById('prompt');
const generateBtn = document.getElementById('generate-btn');
const loadingElement = document.getElementById('loading');
const imageContainer = document.getElementById('image-container');
const generatedImage = document.getElementById('generated-image');
const imageActions = document.getElementById('image-actions');
const downloadBtn = document.getElementById('download-btn');
const regenerateBtn = document.getElementById('regenerate-btn');
const historyGrid = document.getElementById('history-grid');
const notification = document.getElementById('notification');
// Style and dimension options
const styleOptions = document.querySelectorAll('.style-option');
const dimensionOptions = document.querySelectorAll('.dimension-option');
// Selected options
let selectedStyle = 'digital art';
let selectedSize = '1024x1024';
let currentImageUrl = '';
let generationHistory = [];
// Event Listeners
styleOptions.forEach(option => {
option.addEventListener('click', () => {
styleOptions.forEach(opt => opt.classList.remove('selected'));
option.classList.add('selected');
selectedStyle = option.getAttribute('data-style');
});
});
dimensionOptions.forEach(option => {
option.addEventListener('click', () => {
dimensionOptions.forEach(opt => opt.classList.remove('selected'));
option.classList.add('selected');
selectedSize = option.getAttribute('data-size');
});
});
generateBtn.addEventListener('click', generateImage);
downloadBtn.addEventListener('click', downloadImage);
regenerateBtn.addEventListener('click', generateImage);
// Generate image function
async function generateImage() {
const prompt = promptInput.value.trim();
if (!prompt) {
showNotification('Please enter an image description', 'error');
return;
}
// Show loading state
loadingElement.style.display = 'block';
imageActions.style.display = 'none';
generatedImage.style.display = 'none';
try {
// Enhanced prompt with style and details
const enhancedPrompt = `${prompt}, ${selectedStyle} style, high quality, detailed, masterpiece`;
// Generate image using Puter.js and Nano Banana
const imageElement = await puter.ai.txt2img(enhancedPrompt, { 
model: "gemini-2.5-flash-image-preview",
size: selectedSize
});
// Get the image URL
currentImageUrl = imageElement.src;
// Display the generated image
generatedImage.src = currentImageUrl;
generatedImage.style.display = 'block';
imageActions.style.display = 'flex';
// Add to history
addToHistory(currentImageUrl, prompt);
showNotification('Image generated successfully!', 'success');
} catch (error) {
console.error('Error generating image:', error);
showNotification('Error generating image. Please try again.', 'error');
} finally {
loadingElement.style.display = 'none';
}
}
// Download image function
function downloadImage() {
if (!currentImageUrl) return;
const link = document.createElement('a');
link.href = currentImageUrl;
link.download = `nano-banana-${Date.now()}.png`;
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
showNotification('Image downloaded successfully!', 'success');
}
// Add image to history
function addToHistory(imageUrl, prompt) {
const historyItem = {
url: imageUrl,
prompt: prompt,
timestamp: new Date().toLocaleString()
};
generationHistory.unshift(historyItem);
// Keep only last 6 items
if (generationHistory.length > 6) {
generationHistory.pop();
}
updateHistoryGrid();
}
// Update history grid
function updateHistoryGrid() {
historyGrid.innerHTML = '';
generationHistory.forEach((item, index) => {
const historyItem = document.createElement('div');
historyItem.className = 'history-item';
historyItem.innerHTML = `<img src="${item.url}" alt="${item.prompt}">`;
historyItem.addEventListener('click', () => {
generatedImage.src = item.url;
currentImageUrl = item.url;
generatedImage.style.display = 'block';
imageActions.style.display = 'flex';
});
historyGrid.appendChild(historyItem);
});
}
// Show notification
function showNotification(message, type) {
notification.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : 'exclamation'}-circle"></i> ${message}`;
notification.style.background = type === 'success' ? '#48bb78' : '#f56565';
notification.style.display = 'block';
setTimeout(() => {
notification.style.display = 'none';
}, 3000);
}
// Initialize with sample generation
window.onload = function() {
// You can add a sample image to history on load if desired
};
</script>
<!-- Font Awesome for icons -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/js/all.min.js"></script>
</body>
</html>
Category : SOURCE CODE

Leave a Reply

Your email address will not be published. Required fields are marked *


Macro Nepal Helper