Memo - AI Image & Chat

Memo

AI Image Generator & Chat

body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; color: #333; } .container { max-width: 1200px; margin: 0 auto; padding: 20px; } header { text-align: center; margin-bottom: 30px; } header h1 { font-size: 3rem; color: #4a6bff; margin-bottom: 10px; } header p { font-size: 1.2rem; color: #666; } .main-content { background-color: white; border-radius: 10px; padding: 20px; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); } .tab-container { display: flex; margin-bottom: 20px; border-bottom: 1px solid #ddd; } .tab-btn { padding: 10px 20px; background: none; border: none; cursor: pointer; font-size: 1rem; color: #666; transition: all 0.3s; } .tab-btn.active { color: #4a6bff; border-bottom: 2px solid #4a6bff; } .tab-content { display: none; } .tab-content.active { display: block; } .prompt-input { margin-bottom: 20px; } .prompt-input textarea { width: 100%; padding: 15px; border: 1px solid #ddd; border-radius: 5px; resize: vertical; min-height: 100px; font-size: 1rem; margin-bottom: 10px; } button { background-color: #4a6bff; color: white; border: none; padding: 10px 20px; border-radius: 5px; cursor: pointer; font-size: 1rem; transition: background-color 0.3s; } button:hover { background-color: #3a5bef; } .image-result { text-align: center; margin-top: 20px; } #generated-image { max-width: 100%; border-radius: 5px; border: 1px solid #ddd; min-height: 300px; display: flex; align-items: center; justify-content: center; background-color: #f9f9f9; } .chat-container { border: 1px solid #ddd; border-radius: 5px; overflow: hidden; } #chat-messages { height: 400px; overflow-y: auto; padding: 15px; background-color: #f9f9f9; } .chat-input { display: flex; padding: 10px; background-color: white; border-top: 1px solid #ddd; } .chat-input input { flex: 1; padding: 10px; border: 1px solid #ddd; border-radius: 5px; margin-right: 10px; } document.addEventListener('DOMContentLoaded', function() { // Tab switching functionality const tabButtons = document.querySelectorAll('.tab-btn'); const tabContents = document.querySelectorAll('.tab-content'); tabButtons.forEach(button => { button.addEventListener('click', () => { const tabId = button.getAttribute('data-tab'); // Update active tab button tabButtons.forEach(btn => btn.classList.remove('active')); button.classList.add('active'); // Update active tab content tabContents.forEach(content => content.classList.remove('active')); document.getElementById(`${tabId}-tab`).classList.add('active'); }); }); // Image generation functionality const generateBtn = document.getElementById('generate-btn'); const imagePrompt = document.getElementById('image-prompt'); const generatedImage = document.getElementById('generated-image'); generateBtn.addEventListener('click', async () => { const prompt = imagePrompt.value.trim(); if (!prompt) { alert('Please enter a prompt for the image'); return; } generatedImage.innerHTML = '

Generating image... Please wait.

'; try { // In a real implementation, this would call an AI image generation API // For demo purposes, we'll simulate this with a timeout setTimeout(() => { // This is just a placeholder - in a real app you would display the actual generated image generatedImage.innerHTML = `

Demo Image for: "${prompt}"

(In a real implementation, this would show the AI-generated image)

`; }, 2000); } catch (error) { generatedImage.innerHTML = '

Error generating image. Please try again.

'; console.error('Error:', error); } }); // Chat functionality const chatInput = document.getElementById('chat-input'); const sendBtn = document.getElementById('send-btn'); const chatMessages = document.getElementById('chat-messages'); function addMessage(content, isUser) { const messageDiv = document.createElement('div'); messageDiv.classList.add('message', isUser ? 'user-message' : 'ai-message'); messageDiv.innerHTML = `

${content}

`; chatMessages.appendChild(messageDiv); chatMessages.scrollTop = chatMessages.scrollHeight; } sendBtn.addEventListener('click', sendMessage); chatInput.addEventListener('keypress', function(e) { if (e.key === 'Enter') { sendMessage(); } }); function sendMessage() { const message = chatInput.value.trim(); if (!message) return; addMessage(message, true); chatInput.value = ''; // Simulate AI response setTimeout(() => { addMessage(`This is a simulated AI response to: "${message}". In a real implementation, this would connect to an AI chat API.`, false); }, 1000); } });