| <!DOCTYPE html> |
| <html lang="ru"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>ChatGPT с генерацией изображений</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"> |
| <style> |
| @keyframes pulse { |
| 0%, 100% { opacity: 1; } |
| 50% { opacity: 0.5; } |
| } |
| .typing-indicator span { |
| animation: pulse 1.5s infinite; |
| } |
| .typing-indicator span:nth-child(2) { |
| animation-delay: 0.2s; |
| } |
| .typing-indicator span:nth-child(3) { |
| animation-delay: 0.4s; |
| } |
| .message-enter { |
| animation: messageEnter 0.3s ease-out; |
| } |
| @keyframes messageEnter { |
| from { |
| opacity: 0; |
| transform: translateY(10px); |
| } |
| to { |
| opacity: 1; |
| transform: translateY(0); |
| } |
| } |
| .scrollbar-hide::-webkit-scrollbar { |
| display: none; |
| } |
| .scrollbar-hide { |
| -ms-overflow-style: none; |
| scrollbar-width: none; |
| } |
| .tab-button { |
| transition: all 0.2s ease; |
| } |
| .tab-button.active { |
| border-bottom: 2px solid #10B981; |
| color: #10B981; |
| font-weight: 500; |
| } |
| .generated-image { |
| transition: transform 0.3s ease; |
| } |
| .generated-image:hover { |
| transform: scale(1.03); |
| } |
| </style> |
| </head> |
| <body class="bg-gray-50 h-screen flex flex-col"> |
| |
| <header class="bg-white border-b border-gray-200 py-3 px-4 flex items-center justify-between"> |
| <div class="flex items-center space-x-2"> |
| <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">C</div> |
| <h1 class="text-lg font-semibold">ChatGPT</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <button class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-sun"></i> |
| </button> |
| <button class="text-gray-500 hover:text-gray-700"> |
| <i class="fas fa-cog"></i> |
| </button> |
| </div> |
| </header> |
|
|
| |
| <div class="bg-white border-b border-gray-200 px-4"> |
| <div class="max-w-3xl mx-auto flex space-x-6"> |
| <button id="chat-tab" class="tab-button active py-3">Чат</button> |
| <button id="image-tab" class="tab-button py-3">Генератор изображений</button> |
| </div> |
| </div> |
|
|
| |
| <div id="chat-section" class="flex-1 overflow-y-auto scrollbar-hide py-4 px-4 space-y-6"> |
| |
| <div class="max-w-3xl mx-auto message-enter"> |
| <div class="flex space-x-4"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">C</div> |
| <div class="flex-1"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <p class="text-gray-800">Привет! Я ChatGPT, ваш ИИ-помощник. Чем могу помочь сегодня?</p> |
| </div> |
| <div class="mt-2 flex space-x-4 text-sm text-gray-500"> |
| <button class="hover:bg-gray-100 px-2 py-1 rounded">Идеи для проекта</button> |
| <button class="hover:bg-gray-100 px-2 py-1 rounded">Объяснить тему</button> |
| <button class="hover:bg-gray-100 px-2 py-1 rounded">Помощь с кодом</button> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div id="image-section" class="flex-1 overflow-y-auto scrollbar-hide py-4 px-4 space-y-6 hidden"> |
| <div class="max-w-3xl mx-auto message-enter"> |
| <div class="flex space-x-4"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">C</div> |
| <div class="flex-1"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <p class="text-gray-800">Я могу генерировать изображения по вашему описанию. Просто напишите, что вы хотите увидеть, например: "Кот в космосе в стиле Ван Гога"</p> |
| </div> |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4" id="image-examples"> |
| <div class="bg-gray-100 rounded-lg overflow-hidden"> |
| <img src="https://source.unsplash.com/random/300x300/?cat,space,art" alt="Пример изображения" class="w-full h-48 object-cover generated-image"> |
| <div class="p-3"> |
| <p class="text-sm text-gray-600">"Кот в космосе"</p> |
| </div> |
| </div> |
| <div class="bg-gray-100 rounded-lg overflow-hidden"> |
| <img src="https://source.unsplash.com/random/300x300/?fantasy,castle" alt="Пример изображения" class="w-full h-48 object-cover generated-image"> |
| <div class="p-3"> |
| <p class="text-sm text-gray-600">"Фэнтезийный замок"</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| </div> |
| <div id="image-results" class="max-w-3xl mx-auto space-y-4"></div> |
| </div> |
|
|
| |
| <div class="bg-white border-t border-gray-200 py-4 px-4"> |
| <div class="max-w-3xl mx-auto relative"> |
| <form id="chat-form" class="relative"> |
| <textarea |
| id="message-input" |
| rows="1" |
| placeholder="Напишите сообщение..." |
| class="w-full border border-gray-300 rounded-lg py-3 px-4 pr-12 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-transparent resize-none" |
| style="min-height: 60px; max-height: 200px;"></textarea> |
| <button |
| type="submit" |
| id="send-button" |
| class="absolute right-2 bottom-2 w-8 h-8 rounded-md bg-green-500 text-white flex items-center justify-center hover:bg-green-600 disabled:opacity-50 disabled:cursor-not-allowed" |
| disabled> |
| <i class="fas fa-paper-plane"></i> |
| </button> |
| </form> |
| <div class="mt-2 text-xs text-gray-500 text-center"> |
| ChatGPT может допускать ошибки. Проверяйте важную информацию. |
| </div> |
| </div> |
| </div> |
|
|
| <script> |
| document.addEventListener('DOMContentLoaded', function() { |
| const chatForm = document.getElementById('chat-form'); |
| const messageInput = document.getElementById('message-input'); |
| const sendButton = document.getElementById('send-button'); |
| const chatContainer = document.getElementById('chat-section'); |
| const imageResults = document.getElementById('image-results'); |
| const chatTab = document.getElementById('chat-tab'); |
| const imageTab = document.getElementById('image-tab'); |
| const chatSection = document.getElementById('chat-section'); |
| const imageSection = document.getElementById('image-section'); |
| |
| let currentMode = 'chat'; |
| |
| |
| chatTab.addEventListener('click', function() { |
| currentMode = 'chat'; |
| chatTab.classList.add('active'); |
| imageTab.classList.remove('active'); |
| chatSection.classList.remove('hidden'); |
| imageSection.classList.add('hidden'); |
| messageInput.placeholder = "Напишите сообщение..."; |
| }); |
| |
| imageTab.addEventListener('click', function() { |
| currentMode = 'image'; |
| imageTab.classList.add('active'); |
| chatTab.classList.remove('active'); |
| imageSection.classList.remove('hidden'); |
| chatSection.classList.add('hidden'); |
| messageInput.placeholder = "Опишите изображение для генерации..."; |
| }); |
| |
| |
| messageInput.addEventListener('input', function() { |
| this.style.height = 'auto'; |
| this.style.height = (this.scrollHeight) + 'px'; |
| sendButton.disabled = this.value.trim() === ''; |
| }); |
| |
| |
| chatForm.addEventListener('submit', function(e) { |
| e.preventDefault(); |
| const message = messageInput.value.trim(); |
| if (message) { |
| if (currentMode === 'chat') { |
| addUserMessage(message); |
| showTypingIndicator(); |
| setTimeout(() => { |
| removeTypingIndicator(); |
| addAiResponse(message); |
| }, 1000 + Math.random() * 2000); |
| } else { |
| addUserImageRequest(message); |
| showImageLoading(); |
| setTimeout(() => { |
| removeImageLoading(); |
| generateImages(message); |
| }, 1500 + Math.random() * 2000); |
| } |
| |
| messageInput.value = ''; |
| messageInput.style.height = 'auto'; |
| sendButton.disabled = true; |
| } |
| }); |
| |
| |
| function addUserMessage(message) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = 'max-w-3xl mx-auto message-enter'; |
| messageDiv.innerHTML = ` |
| <div class="flex space-x-4 justify-end"> |
| <div class="flex-1 max-w-[80%]"> |
| <div class="bg-green-500 text-white p-4 rounded-lg shadow-sm"> |
| <p>${message}</p> |
| </div> |
| </div> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600"> |
| <i class="fas fa-user"></i> |
| </div> |
| </div> |
| `; |
| chatContainer.appendChild(messageDiv); |
| scrollToBottom(); |
| } |
| |
| |
| function addUserImageRequest(message) { |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = 'max-w-3xl mx-auto message-enter'; |
| messageDiv.innerHTML = ` |
| <div class="flex space-x-4 justify-end"> |
| <div class="flex-1 max-w-[80%]"> |
| <div class="bg-green-500 text-white p-4 rounded-lg shadow-sm"> |
| <p>Сгенерируй изображение: ${message}</p> |
| </div> |
| </div> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-gray-300 flex items-center justify-center text-gray-600"> |
| <i class="fas fa-user"></i> |
| </div> |
| </div> |
| `; |
| imageResults.appendChild(messageDiv); |
| scrollToBottom(); |
| } |
| |
| |
| function showTypingIndicator() { |
| const typingDiv = document.createElement('div'); |
| typingDiv.className = 'max-w-3xl mx-auto message-enter'; |
| typingDiv.id = 'typing-indicator'; |
| typingDiv.innerHTML = ` |
| <div class="flex space-x-4"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">C</div> |
| <div class="flex-1"> |
| <div class="bg-white p-4 rounded-lg shadow-sm w-20"> |
| <div class="typing-indicator flex space-x-1"> |
| <span class="w-2 h-2 rounded-full bg-gray-400"></span> |
| <span class="w-2 h-2 rounded-full bg-gray-400"></span> |
| <span class="w-2 h-2 rounded-full bg-gray-400"></span> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| chatContainer.appendChild(typingDiv); |
| scrollToBottom(); |
| } |
| |
| |
| function showImageLoading() { |
| const loadingDiv = document.createElement('div'); |
| loadingDiv.className = 'max-w-3xl mx-auto message-enter'; |
| loadingDiv.id = 'image-loading'; |
| loadingDiv.innerHTML = ` |
| <div class="flex space-x-4"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">C</div> |
| <div class="flex-1"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <div class="flex items-center space-x-2"> |
| <div class="animate-spin"> |
| <i class="fas fa-spinner text-green-500"></i> |
| </div> |
| <p class="text-gray-800">Генерирую изображения по вашему запросу...</p> |
| </div> |
| </div> |
| </div> |
| </div> |
| `; |
| imageResults.appendChild(loadingDiv); |
| scrollToBottom(); |
| } |
| |
| |
| function removeTypingIndicator() { |
| const typingIndicator = document.getElementById('typing-indicator'); |
| if (typingIndicator) { |
| typingIndicator.remove(); |
| } |
| } |
| |
| |
| function removeImageLoading() { |
| const loadingIndicator = document.getElementById('image-loading'); |
| if (loadingIndicator) { |
| loadingIndicator.remove(); |
| } |
| } |
| |
| |
| function addAiResponse(userMessage) { |
| const responses = [ |
| `Я понял ваш запрос о "${userMessage}". Вот что я могу рассказать по этой теме...`, |
| `Интересный вопрос! "${userMessage}" - это то, с чем я могу помочь. Давайте разберёмся...`, |
| `Относительно "${userMessage}", я могу дать следующую информацию...`, |
| `Я проанализировал ваш запрос о "${userMessage}" и вот мой ответ...`, |
| `Отличный вопрос! "${userMessage}" - это тема, в которой я разбираюсь. Вот что вам нужно знать...` |
| ]; |
| |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; |
| |
| const messageDiv = document.createElement('div'); |
| messageDiv.className = 'max-w-3xl mx-auto message-enter'; |
| messageDiv.innerHTML = ` |
| <div class="flex space-x-4"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">C</div> |
| <div class="flex-1"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <p class="text-gray-800">${randomResponse}</p> |
| </div> |
| <div class="mt-2 flex space-x-4 text-sm text-gray-500"> |
| <button class="hover:bg-gray-100 px-2 py-1 rounded" onclick="copyResponse(this)"><i class="fas fa-copy mr-1"></i> Копировать</button> |
| <button class="hover:bg-gray-100 px-2 py-1 rounded" onclick="likeResponse(this)"><i class="far fa-thumbs-up mr-1"></i> Нравится</button> |
| <button class="hover:bg-gray-100 px-2 py-1 rounded" onclick="dislikeResponse(this)"><i class="far fa-thumbs-down mr-1"></i> Не нравится</button> |
| </div> |
| </div> |
| </div> |
| `; |
| chatContainer.appendChild(messageDiv); |
| scrollToBottom(); |
| } |
| |
| |
| function generateImages(prompt) { |
| |
| const imageUrls = [ |
| `https://source.unsplash.com/random/600x600/?${encodeURIComponent(prompt.split(' ').join(','))}&sig=${Math.floor(Math.random() * 1000)}`, |
| `https://source.unsplash.com/random/600x600/?${encodeURIComponent(prompt.split(' ').join(','))}&sig=${Math.floor(Math.random() * 1000) + 1000}` |
| ]; |
| |
| const responseDiv = document.createElement('div'); |
| responseDiv.className = 'max-w-3xl mx-auto message-enter'; |
| responseDiv.innerHTML = ` |
| <div class="flex space-x-4"> |
| <div class="flex-shrink-0 w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white font-bold">C</div> |
| <div class="flex-1"> |
| <div class="bg-white p-4 rounded-lg shadow-sm"> |
| <p class="text-gray-800">Вот изображения по вашему запросу: "${prompt}"</p> |
| </div> |
| <div class="mt-4 grid grid-cols-1 md:grid-cols-2 gap-4"> |
| <div class="bg-gray-100 rounded-lg overflow-hidden"> |
| <img src="${imageUrls[0]}" alt="${prompt}" class="w-full h-64 object-cover generated-image"> |
| <div class="p-3 flex justify-between items-center"> |
| <p class="text-sm text-gray-600">"${prompt}"</p> |
| <button class="text-green-500 hover:text-green-600" onclick="downloadImage('${imageUrls[0]}', '${prompt.replace(/[^a-zа-яё0-9]/gi, '_')}')"> |
| <i class="fas fa-download"></i> |
| </button> |
| </div> |
| </div> |
| <div class="bg-gray-100 rounded-lg overflow-hidden"> |
| <img src="${imageUrls[1]}" alt="${prompt}" class="w-full h-64 object-cover generated-image"> |
| <div class="p-3 flex justify-between items-center"> |
| <p class="text-sm text-gray-600">"${prompt}"</p> |
| <button class="text-green-500 hover:text-green-600" onclick="downloadImage('${imageUrls[1]}', '${prompt.replace(/[^a-zа-яё0-9]/gi, '_')}')"> |
| <i class="fas fa-download"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| <div class="mt-3 text-sm text-gray-500"> |
| <p>Хотите уточнить или сгенерировать другие варианты?</p> |
| </div> |
| </div> |
| </div> |
| `; |
| imageResults.appendChild(responseDiv); |
| scrollToBottom(); |
| } |
| |
| |
| function scrollToBottom() { |
| if (currentMode === 'chat') { |
| chatSection.scrollTop = chatSection.scrollHeight; |
| } else { |
| imageSection.scrollTop = imageSection.scrollHeight; |
| } |
| } |
| |
| |
| document.querySelectorAll('#chat-section button').forEach(button => { |
| button.addEventListener('click', function() { |
| const text = this.textContent.trim(); |
| messageInput.value = text; |
| messageInput.dispatchEvent(new Event('input')); |
| messageInput.focus(); |
| }); |
| }); |
| }); |
| |
| |
| function copyResponse(button) { |
| const response = button.closest('.flex-1').querySelector('p').textContent; |
| navigator.clipboard.writeText(response); |
| |
| |
| const originalHtml = button.innerHTML; |
| button.innerHTML = '<i class="fas fa-check mr-1"></i> Скопировано!'; |
| setTimeout(() => { |
| button.innerHTML = originalHtml; |
| }, 2000); |
| } |
| |
| function likeResponse(button) { |
| button.innerHTML = '<i class="fas fa-thumbs-up mr-1"></i> Понравилось'; |
| button.nextElementSibling.disabled = true; |
| button.disabled = true; |
| } |
| |
| function dislikeResponse(button) { |
| button.innerHTML = '<i class="fas fa-thumbs-down mr-1"></i> Не понравилось'; |
| button.previousElementSibling.disabled = true; |
| button.disabled = true; |
| } |
| |
| function downloadImage(url, filename) { |
| |
| |
| const link = document.createElement('a'); |
| link.href = url; |
| link.download = filename || 'generated_image'; |
| document.body.appendChild(link); |
| link.click(); |
| document.body.removeChild(link); |
| |
| |
| alert(`Изображение сохранено как ${filename || 'generated_image'}.jpg`); |
| } |
| </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=Greats/redfs" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
