|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Icon Generator | Create Custom SVG Logos</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@tracr/tracr-wasm@latest/dist/tracr.js"></script> |
|
|
<style> |
|
|
.gradient-bg { |
|
|
background: linear-gradient(135deg, #6e8efb, #a777e3); |
|
|
} |
|
|
.icon-preview { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.icon-preview:hover { |
|
|
transform: scale(1.05); |
|
|
box-shadow: 0 10px 25px rgba(0,0,0,0.1); |
|
|
} |
|
|
.tab-active { |
|
|
border-bottom: 3px solid #6e8efb; |
|
|
color: #6e8efb; |
|
|
font-weight: 600; |
|
|
} |
|
|
.color-option { |
|
|
width: 30px; |
|
|
height: 30px; |
|
|
border-radius: 50%; |
|
|
cursor: pointer; |
|
|
transition: transform 0.2s; |
|
|
} |
|
|
.color-option:hover { |
|
|
transform: scale(1.1); |
|
|
} |
|
|
.color-option.selected { |
|
|
transform: scale(1.1); |
|
|
box-shadow: 0 0 0 2px white, 0 0 0 4px #6e8efb; |
|
|
} |
|
|
#previewCanvas { |
|
|
border: 1px dashed #d1d5db; |
|
|
border-radius: 8px; |
|
|
} |
|
|
.size-option { |
|
|
transition: all 0.2s ease; |
|
|
} |
|
|
.size-option:hover { |
|
|
background-color: #e0e7ff; |
|
|
} |
|
|
.size-option.selected { |
|
|
background-color: #6366f1; |
|
|
color: white; |
|
|
} |
|
|
.progress-bar { |
|
|
height: 4px; |
|
|
background-color: #e0e7ff; |
|
|
border-radius: 2px; |
|
|
overflow: hidden; |
|
|
} |
|
|
.progress-bar-fill { |
|
|
height: 100%; |
|
|
background-color: #6366f1; |
|
|
transition: width 0.3s ease; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-50 min-h-screen"> |
|
|
<div class="gradient-bg text-white py-6 shadow-lg"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex items-center justify-between"> |
|
|
<div class="flex items-center space-x-2"> |
|
|
<i class="fas fa-robot text-2xl"></i> |
|
|
<h1 class="text-2xl font-bold">AI Icon Generator</h1> |
|
|
</div> |
|
|
<button class="bg-white text-indigo-600 px-4 py-2 rounded-lg font-medium hover:bg-indigo-50 transition"> |
|
|
<i class="fas fa-user mr-2"></i>Sign In |
|
|
</button> |
|
|
</div> |
|
|
<p class="mt-2 opacity-90">Generate unique SVG icons using AI - 100% client-side processing</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="container mx-auto px-4 py-8"> |
|
|
<div class="bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="md:flex"> |
|
|
|
|
|
<div class="md:w-1/2 p-6 border-r border-gray-100"> |
|
|
<div class="flex border-b border-gray-200"> |
|
|
<button id="descriptionTab" class="tab-active px-4 py-2 text-sm font-medium">Description</button> |
|
|
<button id="imageTab" class="px-4 py-2 text-sm font-medium text-gray-500 hover:text-gray-700">Upload Image</button> |
|
|
</div> |
|
|
|
|
|
<div id="descriptionSection" class="mt-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Describe your ideal icon</label> |
|
|
<textarea id="iconDescription" class="w-full px-3 py-2 border border-gray-300 rounded-lg focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" rows="4" placeholder="e.g. A minimalist cat icon with geometric shapes, suitable for a pet app"></textarea> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Icon Style</label> |
|
|
<div class="grid grid-cols-3 gap-2"> |
|
|
<button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="minimalist"> |
|
|
<i class="fas fa-square-full mr-1"></i> Minimalist |
|
|
</button> |
|
|
<button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="line"> |
|
|
<i class="fas fa-pen-nib mr-1"></i> Line Art |
|
|
</button> |
|
|
<button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="flat"> |
|
|
<i class="fas fa-layer-group mr-1"></i> Flat |
|
|
</button> |
|
|
<button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="gradient"> |
|
|
<i class="fas fa-fill-drip mr-1"></i> Gradient |
|
|
</button> |
|
|
<button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="handdrawn"> |
|
|
<i class="fas fa-pencil-alt mr-1"></i> Hand Drawn |
|
|
</button> |
|
|
<button class="style-option border rounded-lg py-2 px-3 text-sm hover:bg-gray-50" data-style="isometric"> |
|
|
<i class="fas fa-cube mr-1"></i> Isometric |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="imageSection" class="mt-4 hidden"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">Upload reference image</label> |
|
|
<div class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-lg"> |
|
|
<div class="space-y-1 text-center"> |
|
|
<div class="flex text-sm text-gray-600 justify-center"> |
|
|
<label class="relative cursor-pointer bg-white rounded-md font-medium text-indigo-600 hover:text-indigo-500 focus-within:outline-none"> |
|
|
<span>Upload a file</span> |
|
|
<input id="imageUpload" type="file" class="sr-only" accept="image/*"> |
|
|
</label> |
|
|
<p class="pl-1">or drag and drop</p> |
|
|
</div> |
|
|
<p class="text-xs text-gray-500">PNG, JPG up to 2MB</p> |
|
|
</div> |
|
|
</div> |
|
|
<canvas id="previewCanvas" class="mt-4 w-full" height="200"></canvas> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Color Palette</label> |
|
|
<div class="flex flex-wrap gap-3"> |
|
|
<div class="color-option selected" style="background-color: #6366f1;" data-color="#6366f1"></div> |
|
|
<div class="color-option" style="background-color: #ef4444;" data-color="#ef4444"></div> |
|
|
<div class="color-option" style="background-color: #10b981;" data-color="#10b981"></div> |
|
|
<div class="color-option" style="background-color: #f59e0b;" data-color="#f59e0b"></div> |
|
|
<div class="color-option" style="background-color: #8b5cf6;" data-color="#8b5cf6"></div> |
|
|
<div class="color-option" style="background-color: #ec4899;" data-color="#ec4899"></div> |
|
|
<div class="color-option" style="background-color: #000000;" data-color="#000000"></div> |
|
|
<div class="color-option relative overflow-hidden" title="Custom color"> |
|
|
<input type="color" class="absolute inset-0 w-full h-full opacity-0 cursor-pointer" id="customColor"> |
|
|
<div class="w-full h-full flex items-center justify-center"> |
|
|
<i class="fas fa-palette text-gray-600"></i> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-6"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">Icon Size</label> |
|
|
<div class="grid grid-cols-5 gap-2"> |
|
|
<button class="size-option selected py-2 rounded-lg text-sm" data-size="16">16px</button> |
|
|
<button class="size-option py-2 rounded-lg text-sm" data-size="32">32px</button> |
|
|
<button class="size-option py-2 rounded-lg text-sm" data-size="48">48px</button> |
|
|
<button class="size-option py-2 rounded-lg text-sm" data-size="64">64px</button> |
|
|
<div class="relative"> |
|
|
<input type="number" id="customSize" placeholder="Custom" class="w-full h-full px-3 py-2 border border-gray-300 rounded-lg text-sm focus:ring-2 focus:ring-indigo-200 focus:border-indigo-500" min="10" max="512"> |
|
|
<span class="absolute right-2 top-2 text-xs text-gray-400">px</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-2">AI Settings</label> |
|
|
<div class="flex items-center justify-between mb-1"> |
|
|
<span class="text-sm text-gray-600">Creativity</span> |
|
|
<span id="creativityValue" class="text-sm font-medium">50%</span> |
|
|
</div> |
|
|
<input type="range" id="creativitySlider" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
|
|
|
<div class="flex items-center justify-between mt-3 mb-1"> |
|
|
<span class="text-sm text-gray-600">Detail Level</span> |
|
|
<span id="detailValue" class="text-sm font-medium">Medium</span> |
|
|
</div> |
|
|
<input type="range" id="detailSlider" min="0" max="100" value="50" class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer"> |
|
|
</div> |
|
|
|
|
|
<button id="generateBtn" class="mt-6 w-full bg-indigo-600 text-white py-3 px-4 rounded-lg font-medium hover:bg-indigo-700 transition flex items-center justify-center"> |
|
|
<i class="fas fa-magic mr-2"></i> Generate Icon |
|
|
</button> |
|
|
|
|
|
<div class="progress-bar mt-2 hidden" id="progressContainer"> |
|
|
<div class="progress-bar-fill" id="progressBar" style="width: 0%"></div> |
|
|
</div> |
|
|
|
|
|
<div class="text-xs text-gray-500 mt-2 flex items-center"> |
|
|
<i class="fas fa-info-circle mr-1"></i> |
|
|
<span>Processing happens in your browser - no server costs</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="md:w-1/2 p-6 bg-gray-50"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">Your Icon Preview</h2> |
|
|
|
|
|
<div id="loading" class="hidden flex flex-col items-center justify-center py-12"> |
|
|
<div class="animate-spin rounded-full h-12 w-12 border-t-2 border-b-2 border-indigo-500 mb-4"></div> |
|
|
<p class="text-gray-600">AI is generating your unique icon...</p> |
|
|
<p class="text-xs text-gray-500 mt-2">Using WASM-powered model (≈15-30 sec)</p> |
|
|
</div> |
|
|
|
|
|
<div id="resultContainer" class="hidden"> |
|
|
<div class="flex justify-center mb-6"> |
|
|
<div class="icon-preview bg-white p-8 rounded-xl shadow-md"> |
|
|
<svg id="generatedIcon" width="128" height="128" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="grid grid-cols-2 gap-4 mb-6"> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center justify-center h-16 mb-2"> |
|
|
<svg id="size16Preview" width="16" height="16" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg> |
|
|
</div> |
|
|
<p class="text-center text-xs text-gray-600">16px</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center justify-center h-16 mb-2"> |
|
|
<svg id="size32Preview" width="32" height="32" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg> |
|
|
</div> |
|
|
<p class="text-center text-xs text-gray-600">32px</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center justify-center h-16 mb-2"> |
|
|
<svg id="size48Preview" width="48" height="48" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg> |
|
|
</div> |
|
|
<p class="text-center text-xs text-gray-600">48px</p> |
|
|
</div> |
|
|
<div class="bg-white p-4 rounded-lg shadow-sm"> |
|
|
<div class="flex items-center justify-center h-16 mb-2"> |
|
|
<svg id="size64Preview" width="64" height="64" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg"></svg> |
|
|
</div> |
|
|
<p class="text-center text-xs text-gray-600">64px</p> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mb-4"> |
|
|
<label class="block text-sm font-medium text-gray-700 mb-1">SVG Code</label> |
|
|
<div class="relative"> |
|
|
<pre id="svgCode" class="bg-gray-800 text-gray-100 p-3 rounded-lg text-xs overflow-x-auto max-h-40"></pre> |
|
|
<button id="copyCode" class="absolute top-2 right-2 bg-gray-700 text-white p-1 rounded text-xs hover:bg-gray-600"> |
|
|
<i class="fas fa-copy mr-1"></i>Copy |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="flex space-x-3"> |
|
|
<button id="downloadSvg" class="flex-1 bg-indigo-600 text-white py-2 px-4 rounded-lg text-sm font-medium hover:bg-indigo-700 transition"> |
|
|
<i class="fas fa-download mr-2"></i>Download SVG |
|
|
</button> |
|
|
<button id="downloadPng" class="flex-1 bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-lg text-sm font-medium hover:bg-gray-50 transition"> |
|
|
<i class="fas fa-image mr-2"></i>Download PNG |
|
|
</button> |
|
|
<button id="regenerateBtn" class="flex-1 bg-white border border-gray-300 text-gray-700 py-2 px-4 rounded-lg text-sm font-medium hover:bg-gray-50 transition"> |
|
|
<i class="fas fa-redo mr-2"></i>Regenerate |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div id="emptyState" class="flex flex-col items-center justify-center py-12"> |
|
|
<div class="bg-indigo-100 p-4 rounded-full mb-4"> |
|
|
<i class="fas fa-robot text-indigo-600 text-3xl"></i> |
|
|
</div> |
|
|
<h3 class="text-lg font-medium text-gray-900 mb-2">No icon generated yet</h3> |
|
|
<p class="text-gray-600 text-center max-w-md">Describe your ideal icon or upload an image, then click "Generate Icon" to create your custom SVG using AI.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<div class="mt-8 bg-white rounded-xl shadow-lg overflow-hidden"> |
|
|
<div class="p-6"> |
|
|
<h2 class="text-lg font-medium text-gray-900 mb-4">AI-Powered Features</h2> |
|
|
<div class="grid md:grid-cols-3 gap-6"> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="bg-indigo-100 w-10 h-10 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-bolt text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium mb-1">Client-Side Processing</h3> |
|
|
<p class="text-sm text-gray-600">All AI processing happens in your browser using WebAssembly, with no server costs.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="bg-indigo-100 w-10 h-10 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-shapes text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium mb-1">Vector Output</h3> |
|
|
<p class="text-sm text-gray-600">Get clean, scalable SVG output that looks perfect at any size.</p> |
|
|
</div> |
|
|
<div class="bg-gray-50 p-4 rounded-lg"> |
|
|
<div class="bg-indigo-100 w-10 h-10 rounded-full flex items-center justify-center mb-3"> |
|
|
<i class="fas fa-sliders-h text-indigo-600"></i> |
|
|
</div> |
|
|
<h3 class="font-medium mb-1">Precision Control</h3> |
|
|
<p class="text-sm text-gray-600">Fine-tune creativity and detail levels to get exactly what you need.</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<footer class="bg-gray-100 border-t border-gray-200 py-6 mt-12"> |
|
|
<div class="container mx-auto px-4"> |
|
|
<div class="flex flex-col md:flex-row justify-between items-center"> |
|
|
<div class="flex items-center space-x-2 mb-4 md:mb-0"> |
|
|
<i class="fas fa-robot text-indigo-600"></i> |
|
|
<span class="font-medium">AI Icon Generator</span> |
|
|
</div> |
|
|
<div class="flex space-x-6"> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">About</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Privacy</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">GitHub</a> |
|
|
<a href="#" class="text-gray-600 hover:text-gray-900">Contact</a> |
|
|
</div> |
|
|
</div> |
|
|
<div class="mt-4 text-center md:text-left text-sm text-gray-500"> |
|
|
© 2023 AI Icon Generator. All processing happens in your browser - no server costs. |
|
|
</div> |
|
|
</div> |
|
|
</footer> |
|
|
|
|
|
<script> |
|
|
document.addEventListener('DOMContentLoaded', async function() { |
|
|
|
|
|
let tracrModel = null; |
|
|
try { |
|
|
tracrModel = await tracr.init(); |
|
|
console.log("Tracr WASM model loaded successfully"); |
|
|
} catch (error) { |
|
|
console.error("Error loading Tracr model:", error); |
|
|
alert("Failed to load AI model. Please refresh the page."); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
const descriptionTab = document.getElementById('descriptionTab'); |
|
|
const imageTab = document.getElementById('imageTab'); |
|
|
const descriptionSection = document.getElementById('descriptionSection'); |
|
|
const imageSection = document.getElementById('imageSection'); |
|
|
|
|
|
descriptionTab.addEventListener('click', () => { |
|
|
descriptionTab.classList.add('tab-active'); |
|
|
imageTab.classList.remove('tab-active'); |
|
|
descriptionSection.classList.remove('hidden'); |
|
|
imageSection.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
imageTab.addEventListener('click', () => { |
|
|
imageTab.classList.add('tab-active'); |
|
|
descriptionTab.classList.remove('tab-active'); |
|
|
imageSection.classList.remove('hidden'); |
|
|
descriptionSection.classList.add('hidden'); |
|
|
}); |
|
|
|
|
|
|
|
|
const colorOptions = document.querySelectorAll('.color-option:not(#customColor)'); |
|
|
colorOptions.forEach(option => { |
|
|
option.addEventListener('click', () => { |
|
|
document.querySelector('.color-option.selected').classList.remove('selected'); |
|
|
option.classList.add('selected'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const customColor = document.getElementById('customColor'); |
|
|
customColor.addEventListener('input', (e) => { |
|
|
const customOption = customColor.parentElement; |
|
|
customOption.style.backgroundColor = e.target.value; |
|
|
customOption.setAttribute('data-color', e.target.value); |
|
|
|
|
|
|
|
|
document.querySelector('.color-option.selected').classList.remove('selected'); |
|
|
customOption.classList.add('selected'); |
|
|
}); |
|
|
|
|
|
|
|
|
const sizeOptions = document.querySelectorAll('.size-option:not(#customSize)'); |
|
|
sizeOptions.forEach(option => { |
|
|
option.addEventListener('click', () => { |
|
|
document.querySelector('.size-option.selected').classList.remove('selected'); |
|
|
option.classList.add('selected'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const customSize = document.getElementById('customSize'); |
|
|
customSize.addEventListener('input', () => { |
|
|
if (customSize.value) { |
|
|
document.querySelector('.size-option.selected').classList.remove('selected'); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const styleOptions = document.querySelectorAll('.style-option'); |
|
|
styleOptions.forEach(option => { |
|
|
option.addEventListener('click', () => { |
|
|
styleOptions.forEach(opt => opt.classList.remove('bg-indigo-50', 'border-indigo-300', 'text-indigo-700')); |
|
|
option.classList.add('bg-indigo-50', 'border-indigo-300', 'text-indigo-700'); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const creativitySlider = document.getElementById('creativitySlider'); |
|
|
const creativityValue = document.getElementById('creativityValue'); |
|
|
const detailSlider = document.getElementById('detailSlider'); |
|
|
const detailValue = document.getElementById('detailValue'); |
|
|
|
|
|
creativitySlider.addEventListener('input', () => { |
|
|
creativityValue.textContent = `${creativitySlider.value}%`; |
|
|
}); |
|
|
|
|
|
detailSlider.addEventListener('input', () => { |
|
|
const value = parseInt(detailSlider.value); |
|
|
let level = "Low"; |
|
|
if (value > 33) level = "Medium"; |
|
|
if (value > 66) level = "High"; |
|
|
detailValue.textContent = level; |
|
|
}); |
|
|
|
|
|
|
|
|
const imageUpload = document.getElementById('imageUpload'); |
|
|
const previewCanvas = document.getElementById('previewCanvas'); |
|
|
const ctx = previewCanvas.getContext('2d'); |
|
|
let uploadedImage = null; |
|
|
|
|
|
imageUpload.addEventListener('change', (e) => { |
|
|
const file = e.target.files[0]; |
|
|
if (file) { |
|
|
const reader = new FileReader(); |
|
|
reader.onload = (event) => { |
|
|
uploadedImage = new Image(); |
|
|
uploadedImage.onload = () => { |
|
|
|
|
|
const canvasWidth = previewCanvas.width; |
|
|
const canvasHeight = previewCanvas.height; |
|
|
let width = uploadedImage.width; |
|
|
let height = uploadedImage.height; |
|
|
|
|
|
if (width > canvasWidth) { |
|
|
const ratio = canvasWidth / width; |
|
|
width = canvasWidth; |
|
|
height = height * ratio; |
|
|
} |
|
|
|
|
|
if (height > canvasHeight) { |
|
|
const ratio = canvasHeight / height; |
|
|
height = canvasHeight; |
|
|
width = width * ratio; |
|
|
} |
|
|
|
|
|
|
|
|
const x = (canvasWidth - width) / 2; |
|
|
const y = (canvasHeight - height) / 2; |
|
|
|
|
|
ctx.clearRect(0, 0, canvasWidth, canvasHeight); |
|
|
ctx.drawImage(uploadedImage, x, y, width, height); |
|
|
}; |
|
|
uploadedImage.src = event.target.result; |
|
|
}; |
|
|
reader.readAsDataURL(file); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
const generateBtn = document.getElementById('generateBtn'); |
|
|
const loading = document.getElementById('loading'); |
|
|
const resultContainer = document.getElementById('resultContainer'); |
|
|
const emptyState = document.getElementById('emptyState'); |
|
|
const generatedIcon = document.getElementById('generatedIcon'); |
|
|
const size16Preview = document.getElementById('size16Preview'); |
|
|
const size32Preview = document.getElementById('size32Preview'); |
|
|
const size48Preview = document.getElementById('size48Preview'); |
|
|
const size64Preview = document.getElementById('size64Preview'); |
|
|
const svgCode = document.getElementById('svgCode'); |
|
|
const progressContainer = document.getElementById('progressContainer'); |
|
|
const progressBar = document.getElementById('progressBar'); |
|
|
|
|
|
generateBtn.addEventListener('click', async () => { |
|
|
const description = document.getElementById('iconDescription').value; |
|
|
if (!description && !uploadedImage) { |
|
|
alert("Please provide a description or upload an image"); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
loading.classList.remove('hidden'); |
|
|
resultContainer.classList.add('hidden'); |
|
|
emptyState.classList.add('hidden'); |
|
|
progressContainer.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const selectedColor = document.querySelector('.color-option.selected').getAttribute('data-color'); |
|
|
let selectedSize = document.querySelector('.size-option.selected')?.getAttribute('data-size') || customSize.value || '64'; |
|
|
const creativity = parseInt(creativitySlider.value) / 100; |
|
|
const detailLevel = parseInt(detailSlider.value) / 100; |
|
|
|
|
|
try { |
|
|
|
|
|
let progress = 0; |
|
|
const progressInterval = setInterval(() => { |
|
|
progress += Math.random() * 10; |
|
|
if (progress > 90) progress = 90; |
|
|
progressBar.style.width = `${progress}%`; |
|
|
}, 300); |
|
|
|
|
|
|
|
|
let iconMarkup; |
|
|
if (uploadedImage) { |
|
|
|
|
|
|
|
|
iconMarkup = await generateFromImage(uploadedImage, selectedColor, creativity, detailLevel); |
|
|
} else { |
|
|
|
|
|
iconMarkup = await generateFromDescription(description, selectedColor, creativity, detailLevel); |
|
|
} |
|
|
|
|
|
clearInterval(progressInterval); |
|
|
progressBar.style.width = "100%"; |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
loading.classList.add('hidden'); |
|
|
progressContainer.classList.add('hidden'); |
|
|
resultContainer.classList.remove('hidden'); |
|
|
|
|
|
|
|
|
generatedIcon.innerHTML = iconMarkup; |
|
|
size16Preview.innerHTML = iconMarkup; |
|
|
size32Preview.innerHTML = iconMarkup; |
|
|
size48Preview.innerHTML = iconMarkup; |
|
|
size64Preview.innerHTML = iconMarkup; |
|
|
|
|
|
|
|
|
svgCode.textContent = `<svg width="${selectedSize}" height="${selectedSize}" viewBox="0 0 64 64" xmlns="http://www.w3.org/2000/svg">\n${iconMarkup}\n</svg>`; |
|
|
}, 500); |
|
|
|
|
|
} catch (error) { |
|
|
console.error("Error generating icon:", error); |
|
|
loading.classList.add('hidden'); |
|
|
progressContainer.classList.add('hidden'); |
|
|
alert("Error generating icon. Please try again."); |
|
|
} |
|
|
}); |
|
|
|
|
|
|
|
|
async function generateFromDescription(description, color, creativity, detail) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const keywords = { |
|
|
animal: description.match(/\b(cat|dog|bird|fish|lion|tiger|elephant|bear)\b/i), |
|
|
tech: description.match(/\b(tech|computer|phone|app|code|digital)\b/i), |
|
|
nature: description.match(/\b(tree|leaf|flower|mountain|sun|cloud)\b/i), |
|
|
food: description.match(/\b(food|pizza|burger|coffee|fruit|vegetable)\b/i), |
|
|
business: description.match(/\b(business|finance|money|bank|growth|chart)\b/i) |
|
|
}; |
|
|
|
|
|
|
|
|
const complexity = Math.max(1, Math.floor(detail * 4)); |
|
|
|
|
|
|
|
|
if (keywords.animal) { |
|
|
return generateAnimalIcon(keywords.animal[0].toLowerCase(), color, complexity, creativity); |
|
|
} else if (keywords.tech) { |
|
|
return generateTechIcon(color, complexity, creativity); |
|
|
} else if (keywords.nature) { |
|
|
return generateNatureIcon(keywords.nature[0].toLowerCase(), color, complexity, creativity); |
|
|
} else if (keywords.food) { |
|
|
return generateFoodIcon(keywords.food[0].toLowerCase(), color, complexity, creativity); |
|
|
} else if (keywords.business) { |
|
|
return generateBusinessIcon(color, complexity, creativity); |
|
|
} else { |
|
|
|
|
|
return generateGeometricIcon(color, complexity, creativity); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
async function generateFromImage(image, color, creativity, detail) { |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const canvas = document.createElement('canvas'); |
|
|
canvas.width = 64; |
|
|
canvas.height = 64; |
|
|
const ctx = canvas.getContext('2d'); |
|
|
ctx.drawImage(image, 0, 0, 64, 64); |
|
|
|
|
|
|
|
|
const pixelData = ctx.getImageData(32, 32, 1, 1).data; |
|
|
const dominantColor = `rgb(${pixelData[0]}, ${pixelData[1]}, ${pixelData[2]})`; |
|
|
|
|
|
|
|
|
const edgeData = ctx.getImageData(0, 0, 64, 64).data; |
|
|
let edgeCount = 0; |
|
|
for (let i = 0; i < edgeData.length; i += 4) { |
|
|
if (edgeData[i] < 200 || edgeData[i+1] < 200 || edgeData[i+2] < 200) { |
|
|
edgeCount++; |
|
|
} |
|
|
} |
|
|
const isRound = edgeCount / (64*64) > 0.7; |
|
|
|
|
|
|
|
|
if (isRound) { |
|
|
return generateRoundIcon(color, detail, creativity); |
|
|
} else { |
|
|
return generateAngularIcon(color, detail, creativity); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
function generateAnimalIcon(animal, color, complexity, creativity) { |
|
|
const animals = { |
|
|
cat: `<path d="M32 20C28 20 24 24 24 28C24 32 28 36 32 36C36 36 40 32 40 28C40 24 36 20 32 20Z" fill="${color}"/> |
|
|
<circle cx="28" cy="26" r="2" fill="white"/> |
|
|
<circle cx="36" cy="26" r="2" fill="white"/> |
|
|
<path d="M30 32C30 33 31 34 32 34C33 34 34 33 34 32" stroke="white" stroke-width="2" fill="none"/>`, |
|
|
dog: `<path d="M28 20L36 20L40 28L36 36L28 36L24 28Z" fill="${color}"/> |
|
|
<circle cx="32" cy="26" r="2" fill="white"/> |
|
|
<path d="M30 32C30 33 31 34 32 34C33 34 34 33 34 32" stroke="white" stroke-width="2" fill="none"/>`, |
|
|
bird: `<path d="M24 24C24 28 28 32 32 32C36 32 40 28 40 24" fill="${color}"/> |
|
|
<path d="M32 20L40 24L32 28" fill="${color}"/>` |
|
|
}; |
|
|
|
|
|
return animals[animal] || generateGeometricIcon(color, complexity, creativity); |
|
|
} |
|
|
|
|
|
function generateTechIcon(color, complexity, creativity) { |
|
|
const techIcons = [ |
|
|
`<rect x="20" y="20" width="24" height="24" rx="4" fill="${color}"/> |
|
|
<rect x="26" y="26" width="12" height="12" fill="white"/>`, |
|
|
`<path d="M32 16L48 24L32 32L16 24Z" fill="${color}"/> |
|
|
<circle cx="32" cy="24" r="4" fill="white"/>`, |
|
|
`<circle cx="32" cy="32" r="12" fill="${color}"/> |
|
|
<path d="M32 20L38 32L32 44L26 32Z" fill="white"/>` |
|
|
]; |
|
|
|
|
|
return techIcons[Math.floor(Math.random() * techIcons.length)]; |
|
|
} |
|
|
|
|
|
function generateGeometricIcon(color, complexity, creativity) { |
|
|
const shapes = [ |
|
|
() => `<circle cx="32" cy="32" r="${12 + creativity*12}" fill="${color}"/>`, |
|
|
() => `<rect x="${20 - creativity*4}" y="${20 - creativity*4}" width="${24 + creativity*8}" height="${24 + creativity*8}" rx="${4 + creativity*4}" fill="${color}"/>`, |
|
|
() => `<path d="M32 ${16 - creativity*8}L${48 + creativity*4} ${24 - creativity*4}L${32} ${32 + creativity*8}L${16 - creativity*4} ${24 - creativity*4}Z" fill="${color}"/>`, |
|
|
() => `<path d="M${20 - creativity*4} ${20 - creativity*4}L${44 + creativity*4} ${20 - creativity*4}L${44 + creativity*4} ${44 + creativity*4}L${20 - creativity*4} ${44 + creativity*4}Z" fill="${color}"/>` |
|
|
]; |
|
|
|
|
|
|
|
|
let markup = ''; |
|
|
for (let i = 0; i < complexity; i++) { |
|
|
const randomShape = shapes[Math.floor(Math.random() * shapes.length)]; |
|
|
markup += randomShape(); |
|
|
} |
|
|
|
|
|
return markup; |
|
|
} |
|
|
|
|
|
|
|
|
const copyCode = document.getElementById('copyCode'); |
|
|
copyCode.addEventListener('click', () => { |
|
|
const code = svgCode.textContent; |
|
|
navigator.clipboard.writeText(code).then(() => { |
|
|
const originalText = copyCode.innerHTML; |
|
|
copyCode.innerHTML = '<i class="fas fa-check mr-1"></i>Copied!'; |
|
|
setTimeout(() => { |
|
|
copyCode.innerHTML = originalText; |
|
|
}, 2000); |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
const downloadSvg = document.getElementById('downloadSvg'); |
|
|
downloadSvg.addEventListener('click', () => { |
|
|
const svg = generatedIcon.outerHTML; |
|
|
const blob = new Blob([svg], {type: 'image/svg+xml'}); |
|
|
const url = URL.createObjectURL(blob); |
|
|
|
|
|
const a = document.createElement('a'); |
|
|
a.href = url; |
|
|
a.download = 'icon.svg'; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
URL.revokeObjectURL(url); |
|
|
}); |
|
|
|
|
|
|
|
|
const downloadPng = document.getElementById('downloadPng'); |
|
|
downloadPng.addEventListener('click', () => { |
|
|
const svg = generatedIcon.outerHTML; |
|
|
const canvas = document.createElement('canvas'); |
|
|
canvas.width = 512; |
|
|
canvas.height = 512; |
|
|
const ctx = canvas.getContext('2d'); |
|
|
|
|
|
const img = new Image(); |
|
|
img.onload = () => { |
|
|
ctx.drawImage(img, 0, 0, canvas.width, canvas.height); |
|
|
const png = canvas.toDataURL('image/png'); |
|
|
|
|
|
const a = document.createElement('a'); |
|
|
a.href = png; |
|
|
a.download = 'icon.png'; |
|
|
document.body.appendChild(a); |
|
|
a.click(); |
|
|
document.body.removeChild(a); |
|
|
}; |
|
|
|
|
|
img.src = 'data:image/svg+xml;base64,' + btoa(unescape(encodeURIComponent(svg))); |
|
|
}); |
|
|
|
|
|
|
|
|
const regenerateBtn = document.getElementById('regenerateBtn'); |
|
|
regenerateBtn.addEventListener('click', () => { |
|
|
generateBtn.click(); |
|
|
}); |
|
|
}); |
|
|
</script> |
|
|
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Areid987/deepsite" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
