|
|
<!DOCTYPE html> |
|
|
<html lang="en"> |
|
|
<head> |
|
|
<meta charset="UTF-8"> |
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0"> |
|
|
<title>AI Drawing Board</title> |
|
|
<script src="https://cdn.tailwindcss.com"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/@excalidraw/excalidraw@0/dist/excalidraw.min.js"></script> |
|
|
<script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> |
|
|
<style> |
|
|
.drawing-container { |
|
|
height: calc(100vh - 180px); |
|
|
} |
|
|
.ai-suggestion { |
|
|
transition: all 0.3s ease; |
|
|
} |
|
|
.ai-suggestion:hover { |
|
|
transform: translateY(-5px); |
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1); |
|
|
} |
|
|
@keyframes pulse { |
|
|
0%, 100% { |
|
|
opacity: 1; |
|
|
} |
|
|
50% { |
|
|
opacity: 0.5; |
|
|
} |
|
|
} |
|
|
.animate-pulse { |
|
|
animation: pulse 2s infinite; |
|
|
} |
|
|
</style> |
|
|
</head> |
|
|
<body class="bg-gray-100"> |
|
|
<div class="container mx-auto px-4 py-6"> |
|
|
|
|
|
<header class="flex flex-col md:flex-row justify-between items-center mb-6"> |
|
|
<div class="flex items-center mb-4 md:mb-0"> |
|
|
<h1 class="text-3xl font-bold text-indigo-700">AI Drawing Board</h1> |
|
|
<span class="ml-2 px-2 py-1 bg-indigo-100 text-indigo-800 text-xs font-semibold rounded-full">Beta</span> |
|
|
</div> |
|
|
<div class="flex space-x-2"> |
|
|
<button id="save-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
Save Drawing |
|
|
</button> |
|
|
<button id="clear-btn" class="px-4 py-2 bg-white border border-gray-300 rounded-lg shadow-sm text-sm font-medium text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
Clear Board |
|
|
</button> |
|
|
<button id="export-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-lg shadow-sm text-sm font-medium hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
Export as PNG |
|
|
</button> |
|
|
</div> |
|
|
</header> |
|
|
|
|
|
|
|
|
<div class="flex flex-col lg:flex-row gap-6"> |
|
|
|
|
|
<div class="flex-1 bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 bg-gray-50"> |
|
|
<h2 class="text-lg font-medium text-gray-900">Drawing Canvas</h2> |
|
|
<p class="text-sm text-gray-500">Draw freely or use AI suggestions</p> |
|
|
</div> |
|
|
<div id="drawing-container" class="drawing-container"></div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="w-full lg:w-80 bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 bg-gray-50"> |
|
|
<h2 class="text-lg font-medium text-gray-900">AI Assistant</h2> |
|
|
<p class="text-sm text-gray-500">Get creative suggestions</p> |
|
|
</div> |
|
|
<div class="p-4 space-y-4"> |
|
|
|
|
|
<div> |
|
|
<label for="ai-prompt" class="block text-sm font-medium text-gray-700 mb-1">Describe what you want to draw</label> |
|
|
<div class="flex"> |
|
|
<input type="text" id="ai-prompt" class="flex-1 px-3 py-2 border border-gray-300 rounded-l-lg focus:ring-indigo-500 focus:border-indigo-500" placeholder="e.g. a sunset over mountains"> |
|
|
<button id="generate-btn" class="px-4 py-2 bg-indigo-600 text-white rounded-r-lg hover:bg-indigo-700 focus:outline-none focus:ring-2 focus:ring-indigo-500"> |
|
|
Generate |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div> |
|
|
<h3 class="text-sm font-medium text-gray-700 mb-2">Quick Suggestions</h3> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<button class="ai-suggestion px-3 py-2 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-lg hover:bg-indigo-100"> |
|
|
Simple House |
|
|
</button> |
|
|
<button class="ai-suggestion px-3 py-2 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-lg hover:bg-indigo-100"> |
|
|
Tree Landscape |
|
|
</button> |
|
|
<button class="ai-suggestion px-3 py-2 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-lg hover:bg-indigo-100"> |
|
|
Abstract Art |
|
|
</button> |
|
|
<button class="ai-suggestion px-3 py-2 bg-indigo-50 text-indigo-700 text-xs font-medium rounded-lg hover:bg-indigo-100"> |
|
|
Flow Chart |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="ai-processing" class="hidden p-4 bg-blue-50 rounded-lg"> |
|
|
<div class="flex items-center space-x-2 text-blue-700"> |
|
|
<svg class="animate-spin h-5 w-5" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24"> |
|
|
<circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle> |
|
|
<path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path> |
|
|
</svg> |
|
|
<span>AI is generating your drawing...</span> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div id="ai-results" class="space-y-3 hidden"> |
|
|
<h3 class="text-sm font-medium text-gray-700">AI Suggestions</h3> |
|
|
<div class="grid grid-cols-2 gap-2"> |
|
|
<div class="ai-suggestion p-2 bg-white border border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300"> |
|
|
<div class="h-20 bg-gray-100 rounded mb-1"></div> |
|
|
<p class="text-xs text-gray-600 truncate">Option 1</p> |
|
|
</div> |
|
|
<div class="ai-suggestion p-2 bg-white border border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300"> |
|
|
<div class="h-20 bg-gray-100 rounded mb-1"></div> |
|
|
<p class="text-xs text-gray-600 truncate">Option 2</p> |
|
|
</div> |
|
|
<div class="ai-suggestion p-2 bg-white border border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300"> |
|
|
<div class="h-20 bg-gray-100 rounded mb-1"></div> |
|
|
<p class="text-xs text-gray-600 truncate">Option 3</p> |
|
|
</div> |
|
|
<div class="ai-suggestion p-2 bg-white border border-gray-200 rounded-lg cursor-pointer hover:border-indigo-300"> |
|
|
<div class="h-20 bg-gray-100 rounded mb-1"></div> |
|
|
<p class="text-xs text-gray-600 truncate">Option 4</p> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="pt-4 border-t border-gray-200"> |
|
|
<h3 class="text-sm font-medium text-gray-700 mb-2">AI Enhancement Tools</h3> |
|
|
<div class="space-y-2"> |
|
|
<button class="w-full flex items-center justify-between px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50"> |
|
|
<span class="text-sm text-gray-700">Improve Drawing</span> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-between px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50"> |
|
|
<span class="text-sm text-gray-700">Add Color Palette</span> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> |
|
|
</svg> |
|
|
</button> |
|
|
<button class="w-full flex items-center justify-between px-3 py-2 bg-white border border-gray-200 rounded-lg hover:bg-gray-50"> |
|
|
<span class="text-sm text-gray-700">Convert to Diagram</span> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
|
|
|
<div class="mt-8 bg-white rounded-xl shadow-md overflow-hidden"> |
|
|
<div class="p-4 border-b border-gray-200 bg-gray-50"> |
|
|
<h2 class="text-lg font-medium text-gray-900">Recent Drawings</h2> |
|
|
<p class="text-sm text-gray-500">Your saved creations</p> |
|
|
</div> |
|
|
<div class="p-4"> |
|
|
<div class="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4"> |
|
|
<div class="relative group"> |
|
|
<div class="h-32 bg-gray-100 rounded-lg"></div> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200"> |
|
|
<button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<div class="h-32 bg-gray-100 rounded-lg"></div> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200"> |
|
|
<button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<div class="h-32 bg-gray-100 rounded-lg"></div> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200"> |
|
|
<button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<div class="h-32 bg-gray-100 rounded-lg"></div> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200"> |
|
|
<button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative group"> |
|
|
<div class="h-32 bg-gray-100 rounded-lg"></div> |
|
|
<div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-20 rounded-lg flex items-center justify-center opacity-0 group-hover:opacity-100 transition-all duration-200"> |
|
|
<button class="p-2 bg-white rounded-full shadow-md text-indigo-600 hover:bg-indigo-50"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4" /> |
|
|
</svg> |
|
|
</button> |
|
|
</div> |
|
|
</div> |
|
|
<div class="relative flex items-center justify-center h-32 bg-gray-50 border-2 border-dashed border-gray-300 rounded-lg hover:border-gray-400 cursor-pointer"> |
|
|
<div class="text-center"> |
|
|
<svg xmlns="http://www.w3.org/2000/svg" class="mx-auto h-8 w-8 text-gray-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"> |
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6" /> |
|
|
</svg> |
|
|
<span class="text-sm text-gray-600">New Drawing</span> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
</div> |
|
|
|
|
|
<script> |
|
|
|
|
|
const excalidrawWrapper = document.getElementById("drawing-container"); |
|
|
const { Excalidraw, exportToCanvas } = EXCALIDRAW; |
|
|
|
|
|
let excalidrawAPI = null; |
|
|
|
|
|
const initExcalidraw = async () => { |
|
|
excalidrawAPI = new Excalidraw({ |
|
|
width: excalidrawWrapper.offsetWidth, |
|
|
height: excalidrawWrapper.offsetHeight, |
|
|
}); |
|
|
|
|
|
excalidrawWrapper.appendChild(excalidrawAPI); |
|
|
|
|
|
|
|
|
const isDark = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches; |
|
|
excalidrawAPI.updateScene({ |
|
|
appState: { theme: isDark ? "dark" : "light" } |
|
|
}); |
|
|
|
|
|
|
|
|
const savedData = localStorage.getItem('excalidraw-data'); |
|
|
if (savedData) { |
|
|
excalidrawAPI.updateScene(JSON.parse(savedData)); |
|
|
} |
|
|
}; |
|
|
|
|
|
|
|
|
document.getElementById('save-btn').addEventListener('click', () => { |
|
|
const sceneData = excalidrawAPI.getSceneData(); |
|
|
localStorage.setItem('excalidraw-data', JSON.stringify(sceneData)); |
|
|
|
|
|
|
|
|
const saveBtn = document.getElementById('save-btn'); |
|
|
const originalText = saveBtn.textContent; |
|
|
saveBtn.textContent = 'Saved!'; |
|
|
saveBtn.classList.remove('bg-white'); |
|
|
saveBtn.classList.add('bg-green-100', 'text-green-800'); |
|
|
|
|
|
setTimeout(() => { |
|
|
saveBtn.textContent = originalText; |
|
|
saveBtn.classList.remove('bg-green-100', 'text-green-800'); |
|
|
saveBtn.classList.add('bg-white'); |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
document.getElementById('clear-btn').addEventListener('click', () => { |
|
|
if (confirm('Are you sure you want to clear the drawing board?')) { |
|
|
excalidrawAPI.resetScene(); |
|
|
} |
|
|
}); |
|
|
|
|
|
document.getElementById('export-btn').addEventListener('click', async () => { |
|
|
const canvas = await exportToCanvas({ |
|
|
elements: excalidrawAPI.getSceneElements(), |
|
|
appState: excalidrawAPI.getAppState(), |
|
|
files: excalidrawAPI.getFiles(), |
|
|
}); |
|
|
|
|
|
const link = document.createElement('a'); |
|
|
link.download = 'drawing.png'; |
|
|
link.href = canvas.toDataURL('image/png'); |
|
|
link.click(); |
|
|
}); |
|
|
|
|
|
document.getElementById('generate-btn').addEventListener('click', () => { |
|
|
const prompt = document.getElementById('ai-prompt').value.trim(); |
|
|
if (!prompt) { |
|
|
alert('Please enter a description for the AI'); |
|
|
return; |
|
|
} |
|
|
|
|
|
|
|
|
document.getElementById('ai-processing').classList.remove('hidden'); |
|
|
document.getElementById('ai-results').classList.add('hidden'); |
|
|
|
|
|
|
|
|
setTimeout(() => { |
|
|
document.getElementById('ai-processing').classList.add('hidden'); |
|
|
document.getElementById('ai-results').classList.remove('hidden'); |
|
|
|
|
|
|
|
|
const suggestionBoxes = document.querySelectorAll('#ai-results .ai-suggestion p'); |
|
|
suggestionBoxes.forEach((box, index) => { |
|
|
box.textContent = `${prompt} - Variation ${index + 1}`; |
|
|
}); |
|
|
}, 2000); |
|
|
}); |
|
|
|
|
|
|
|
|
document.querySelectorAll('.ai-suggestion').forEach(button => { |
|
|
button.addEventListener('click', function() { |
|
|
const suggestion = this.textContent.trim(); |
|
|
document.getElementById('ai-prompt').value = suggestion; |
|
|
}); |
|
|
}); |
|
|
|
|
|
|
|
|
document.addEventListener('DOMContentLoaded', () => { |
|
|
initExcalidraw(); |
|
|
|
|
|
|
|
|
window.addEventListener('resize', () => { |
|
|
if (excalidrawAPI) { |
|
|
excalidrawAPI.updateScene({ |
|
|
appState: { |
|
|
...excalidrawAPI.getAppState(), |
|
|
width: excalidrawWrapper.offsetWidth, |
|
|
height: excalidrawWrapper.offsetHeight |
|
|
} |
|
|
}); |
|
|
} |
|
|
}); |
|
|
}); |
|
|
</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=chaojie/aiboard" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
|
|
</html> |
