355 lines
11 KiB
HTML
355 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Image Generation - AI Cheat Sheet</title>
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
</head>
|
|
<body>
|
|
|
|
<nav>
|
|
<div class="nav-inner">
|
|
<a href="../index.html" class="nav-brand">AI Cheat Sheet</a>
|
|
<div class="nav-links">
|
|
<a href="/pages/terminology.html">Terminology</a>
|
|
<a href="/pages/techniques.html">Techniques</a>
|
|
<a href="/pages/use-cases.html">Use Cases</a>
|
|
<a href="/pages/model-types.html">Model Types</a>
|
|
<a href="/pages/prompts.html">Prompt Guide</a>
|
|
<a href="/pages/math.html">Math & Concepts</a>
|
|
<a href="/pages/chat.html">Chat</a>
|
|
<a href="/pages/image-gen.html" class="active">Image Gen</a>
|
|
</div>
|
|
<button class="dark-toggle" id="darkToggle" aria-label="Toggle dark mode">🌙</button>
|
|
</div>
|
|
</nav>
|
|
|
|
<button class="menu-toggle" id="menuToggle" aria-label="Toggle menu">☰</button>
|
|
<div class="sidebar-backdrop" id="sidebarBackdrop"></div>
|
|
|
|
<script>
|
|
(function(){
|
|
var btn = document.getElementById('darkToggle');
|
|
var saved = localStorage.getItem('theme');
|
|
if(saved === 'dark' || (!saved && window.matchMedia('(prefers-color-scheme: dark)').matches)){
|
|
document.documentElement.setAttribute('data-theme','dark');
|
|
btn.textContent = '☀️';
|
|
}
|
|
btn.addEventListener('click', function(){
|
|
var isDark = document.documentElement.getAttribute('data-theme') === 'dark';
|
|
if(isDark){
|
|
document.documentElement.removeAttribute('data-theme');
|
|
btn.textContent = '🌙';
|
|
localStorage.setItem('theme','light');
|
|
} else {
|
|
document.documentElement.setAttribute('data-theme','dark');
|
|
btn.textContent = '☀️';
|
|
localStorage.setItem('theme','dark');
|
|
}
|
|
});
|
|
|
|
var menuToggle = document.getElementById('menuToggle');
|
|
var nav = document.querySelector('nav');
|
|
var backdrop = document.getElementById('sidebarBackdrop');
|
|
if(menuToggle && nav){
|
|
menuToggle.addEventListener('click', function(){
|
|
nav.classList.toggle('sidebar-open');
|
|
var isOpen = nav.classList.contains('sidebar-open');
|
|
menuToggle.textContent = isOpen ? '✕' : '☰';
|
|
if(backdrop){
|
|
backdrop.classList.toggle('visible', isOpen);
|
|
}
|
|
});
|
|
if(backdrop){
|
|
backdrop.addEventListener('click', function(){
|
|
nav.classList.remove('sidebar-open');
|
|
menuToggle.textContent = '☰';
|
|
backdrop.classList.remove('visible');
|
|
});
|
|
}
|
|
document.addEventListener('click', function(e){
|
|
if(nav.classList.contains('sidebar-open') && !nav.contains(e.target) && e.target !== menuToggle){
|
|
nav.classList.remove('sidebar-open');
|
|
menuToggle.textContent = '☰';
|
|
if(backdrop) backdrop.classList.remove('visible');
|
|
}
|
|
});
|
|
}
|
|
})();
|
|
</script>
|
|
|
|
<div class="hero">
|
|
<h1>Image Generation</h1>
|
|
<p>Generate images from text prompts using AI.</p>
|
|
</div>
|
|
|
|
<div class="container">
|
|
<div class="chat-config">
|
|
<div class="config-row">
|
|
<label for="apiUrl">API Endpoint</label>
|
|
<input type="text" id="apiUrl" value="https://image-gen.reeselink.com/v1">
|
|
</div>
|
|
<div class="config-row">
|
|
<label for="apiToken">API Token</label>
|
|
<input type="password" id="apiToken" placeholder="Enter your API token">
|
|
</div>
|
|
<div class="config-row">
|
|
<label for="modelName">Model</label>
|
|
<input type="text" id="modelName" value="flux">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="image-gen-prompt-area">
|
|
<label for="promptInput">Prompt</label>
|
|
<textarea id="promptInput" placeholder="Describe the image you want to generate..." rows="3"></textarea>
|
|
<button id="generateBtn" class="generate-btn">Generate</button>
|
|
</div>
|
|
|
|
<div class="image-gen-results" id="imageResults">
|
|
<div class="image-gen-placeholder" id="imagePlaceholder">
|
|
<p>Your generated image will appear here.</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>AI Cheat Sheet — A learning reference for artificial intelligence</footer>
|
|
|
|
<div class="search-results-dropdown" id="searchResultsContainer"></div>
|
|
|
|
<script src="../lib/search.js"></script>
|
|
<script>Search.init();</script>
|
|
|
|
<script>
|
|
(function(){
|
|
var apiUrlInput = document.getElementById('apiUrl');
|
|
var apiTokenInput = document.getElementById('apiToken');
|
|
var modelNameInput = document.getElementById('modelName');
|
|
var promptInput = document.getElementById('promptInput');
|
|
var generateBtn = document.getElementById('generateBtn');
|
|
var imageResults = document.getElementById('imageResults');
|
|
var imagePlaceholder = document.getElementById('imagePlaceholder');
|
|
|
|
var savedToken = localStorage.getItem('imageGenToken');
|
|
if(savedToken) apiTokenInput.value = savedToken;
|
|
var savedModel = localStorage.getItem('imageGenModel');
|
|
if(savedModel) modelNameInput.value = savedModel;
|
|
var savedUrl = localStorage.getItem('imageGenUrl');
|
|
if(savedUrl) apiUrlInput.value = savedUrl;
|
|
|
|
var isGenerating = false;
|
|
|
|
function setLoading(loading) {
|
|
isGenerating = loading;
|
|
generateBtn.disabled = loading;
|
|
generateBtn.textContent = loading ? 'Generating...' : 'Generate';
|
|
promptInput.disabled = loading;
|
|
}
|
|
|
|
function showImage(dataUrl, prompt) {
|
|
if(imagePlaceholder) {
|
|
imagePlaceholder.style.display = 'none';
|
|
}
|
|
|
|
var existingImages = imageResults.querySelectorAll('.generated-image-card');
|
|
for(var i = 0; i < existingImages.length; i++) {
|
|
existingImages[i].remove();
|
|
}
|
|
|
|
var card = document.createElement('div');
|
|
card.className = 'generated-image-card';
|
|
|
|
var promptText = document.createElement('p');
|
|
promptText.className = 'generated-image-prompt';
|
|
promptText.textContent = prompt;
|
|
|
|
var imgContainer = document.createElement('div');
|
|
imgContainer.className = 'generated-image-container';
|
|
|
|
var img = document.createElement('img');
|
|
img.className = 'generated-image';
|
|
img.src = dataUrl;
|
|
img.alt = prompt;
|
|
imgContainer.appendChild(img);
|
|
|
|
var actions = document.createElement('div');
|
|
actions.className = 'generated-image-actions';
|
|
|
|
var copyBtn = document.createElement('button');
|
|
copyBtn.className = 'image-action-btn';
|
|
copyBtn.textContent = 'Copy Image';
|
|
copyBtn.addEventListener('click', function() {
|
|
copyToClipboard(dataUrl, copyBtn);
|
|
});
|
|
|
|
var downloadBtn = document.createElement('button');
|
|
downloadBtn.className = 'image-action-btn';
|
|
downloadBtn.textContent = 'Download';
|
|
downloadBtn.addEventListener('click', function() {
|
|
var a = document.createElement('a');
|
|
a.href = dataUrl;
|
|
a.download = 'generated-image-' + Date.now() + '.png';
|
|
a.click();
|
|
});
|
|
|
|
actions.appendChild(copyBtn);
|
|
actions.appendChild(downloadBtn);
|
|
|
|
card.appendChild(promptText);
|
|
card.appendChild(imgContainer);
|
|
card.appendChild(actions);
|
|
|
|
imageResults.appendChild(card);
|
|
imageResults.scrollTop = imageResults.scrollHeight;
|
|
}
|
|
|
|
function copyToClipboard(dataUrl, copyBtn) {
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open('GET', dataUrl, true);
|
|
xhr.responseType = 'blob';
|
|
xhr.onload = function() {
|
|
var blob = xhr.response;
|
|
if(navigator.clipboard && navigator.clipboard.write) {
|
|
navigator.clipboard.write([
|
|
new ClipboardItem({ 'image/png': blob })
|
|
]).then(function() {
|
|
copyBtn.textContent = 'Copied!';
|
|
setTimeout(function() {
|
|
copyBtn.textContent = 'Copy Image';
|
|
}, 2000);
|
|
}).catch(function() {
|
|
fallbackCopy(dataUrl);
|
|
});
|
|
} else {
|
|
fallbackCopy(dataUrl);
|
|
}
|
|
};
|
|
xhr.send();
|
|
}
|
|
|
|
function fallbackCopy(dataUrl) {
|
|
var textarea = document.createElement('textarea');
|
|
textarea.value = dataUrl;
|
|
document.body.appendChild(textarea);
|
|
textarea.select();
|
|
document.execCommand('copy');
|
|
document.body.removeChild(textarea);
|
|
alert('Image URL copied to clipboard.');
|
|
}
|
|
|
|
function showError(message) {
|
|
if(imagePlaceholder) {
|
|
imagePlaceholder.style.display = 'block';
|
|
imagePlaceholder.innerHTML = '<p class="image-gen-error">' + message + '</p>';
|
|
}
|
|
}
|
|
|
|
function generate() {
|
|
if(isGenerating) return;
|
|
|
|
var prompt = promptInput.value.trim();
|
|
if(!prompt) {
|
|
alert('Please enter a prompt.');
|
|
promptInput.focus();
|
|
return;
|
|
}
|
|
|
|
var model = modelNameInput.value.trim();
|
|
if(!model) {
|
|
alert('Please enter a model name.');
|
|
modelNameInput.focus();
|
|
return;
|
|
}
|
|
|
|
setLoading(true);
|
|
if(imagePlaceholder) {
|
|
imagePlaceholder.style.display = 'block';
|
|
imagePlaceholder.innerHTML = '<p class="image-gen-loading">Generating image... This may take a few seconds.</p>';
|
|
}
|
|
|
|
var existingImages = imageResults.querySelectorAll('.generated-image-card');
|
|
for(var i = 0; i < existingImages.length; i++) {
|
|
existingImages[i].remove();
|
|
}
|
|
|
|
var apiEndpoint = apiUrlInput.value.trim().replace(/\/+$/, '');
|
|
var apiToken = apiTokenInput.value.trim();
|
|
|
|
var headers = { 'Content-Type': 'application/json' };
|
|
if(apiToken) {
|
|
headers['Authorization'] = 'Bearer ' + apiToken;
|
|
}
|
|
|
|
fetch(apiEndpoint + '/images/generations', {
|
|
method: 'POST',
|
|
headers: headers,
|
|
body: JSON.stringify({
|
|
prompt: prompt,
|
|
model: model,
|
|
n: 1,
|
|
size: '1024x1024'
|
|
})
|
|
})
|
|
.then(function(response) {
|
|
if(!response.ok) {
|
|
return response.text().then(function(text) {
|
|
throw new Error('API error ' + response.status + ': ' + (text || response.statusText));
|
|
});
|
|
}
|
|
return response.json();
|
|
})
|
|
.then(function(data) {
|
|
setLoading(false);
|
|
if(data.data && data.data[0]) {
|
|
var imageData = data.data[0];
|
|
var dataUrl;
|
|
if(imageData.url) {
|
|
dataUrl = imageData.url;
|
|
} else if(imageData.b64_json) {
|
|
dataUrl = 'data:image/png;base64,' + imageData.b64_json;
|
|
} else {
|
|
showError('Unexpected response format from the API.');
|
|
return;
|
|
}
|
|
showImage(dataUrl, prompt);
|
|
} else {
|
|
showError('No image returned from the API.');
|
|
}
|
|
})
|
|
.catch(function(err) {
|
|
setLoading(false);
|
|
showError('Error: ' + err.message);
|
|
});
|
|
}
|
|
|
|
generateBtn.addEventListener('click', generate);
|
|
|
|
promptInput.addEventListener('keydown', function(e) {
|
|
if(e.key === 'Enter' && !e.shiftKey) {
|
|
e.preventDefault();
|
|
generate();
|
|
}
|
|
});
|
|
|
|
promptInput.addEventListener('input', function() {
|
|
this.style.height = 'auto';
|
|
this.style.height = Math.min(this.scrollHeight, 200) + 'px';
|
|
});
|
|
|
|
apiTokenInput.addEventListener('change', function() {
|
|
localStorage.setItem('imageGenToken', this.value);
|
|
});
|
|
modelNameInput.addEventListener('change', function() {
|
|
localStorage.setItem('imageGenModel', this.value);
|
|
});
|
|
apiUrlInput.addEventListener('change', function() {
|
|
localStorage.setItem('imageGenUrl', this.value);
|
|
});
|
|
|
|
promptInput.focus();
|
|
})();
|
|
</script>
|
|
|
|
</body>
|
|
</html>
|