создай нейросеть для 1С, чтобы потом эту нейросеть интегрировать с 1С. 1С используется в производстве, на заводе, я хочу чтобы она умела читать чертежи, выдавать правильный технологический процесс после прочтения чертежей и анализировать ситуацию в производстве, чтобы она давала советы по улучшениям и изменениям, а также расставляла выполнение заказов по приоритетности - Initial Deployment
5ccf5ec
verified
| <html lang="ru"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Factory Assistant для 1С</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> | |
| .drawing-preview { | |
| background: linear-gradient(45deg, #f3f4f6 25%, transparent 25%), | |
| linear-gradient(-45deg, #f3f4f6 25%, transparent 25%), | |
| linear-gradient(45deg, transparent 75%, #f3f4f6 75%), | |
| linear-gradient(-45deg, transparent 75%, #f3f4f6 75%); | |
| background-size: 20px 20px; | |
| background-position: 0 0, 0 10px, 10px -10px, -10px 0px; | |
| } | |
| .process-step { | |
| position: relative; | |
| } | |
| .process-step:not(:last-child):after { | |
| content: ""; | |
| position: absolute; | |
| bottom: -15px; | |
| left: 20px; | |
| width: 2px; | |
| height: 15px; | |
| background-color: #3b82f6; | |
| } | |
| .gantt-bar { | |
| transition: all 0.3s ease; | |
| } | |
| .gantt-bar:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| @keyframes pulse { | |
| 0%, 100% { | |
| opacity: 1; | |
| } | |
| 50% { | |
| opacity: 0.5; | |
| } | |
| } | |
| .animate-pulse { | |
| animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 min-h-screen"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <!-- Шапка системы --> | |
| <header class="bg-white rounded-xl shadow-md p-6 mb-8 flex flex-col md:flex-row justify-between items-center"> | |
| <div class="flex items-center mb-4 md:mb-0"> | |
| <div class="bg-blue-600 text-white p-3 rounded-lg mr-4"> | |
| <i class="fas fa-robot text-2xl"></i> | |
| </div> | |
| <div> | |
| <h1 class="text-2xl font-bold text-gray-800">AI Factory Assistant</h1> | |
| <p class="text-gray-600">Интеллектуальная система для интеграции с 1С на производстве</p> | |
| </div> | |
| </div> | |
| <div class="flex space-x-3"> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-plug mr-2"></i> Подключить к 1С | |
| </button> | |
| <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center"> | |
| <i class="fas fa-cog mr-2"></i> Настройки | |
| </button> | |
| </div> | |
| </header> | |
| <!-- Основной контент --> | |
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Левая колонка - загрузка чертежей --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-file-import mr-2 text-blue-600"></i> Анализ чертежей | |
| </h2> | |
| <div class="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center mb-6 drawing-preview"> | |
| <i class="fas fa-file-image text-4xl text-gray-400 mb-3"></i> | |
| <p class="text-gray-500 mb-3">Перетащите сюда файлы чертежей (DWG, DXF, PDF)</p> | |
| <button class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-lg"> | |
| Выбрать файлы | |
| </button> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Тип изделия</label> | |
| <select class="w-full p-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500"> | |
| <option>Металлоконструкции</option> | |
| <option>Механические узлы</option> | |
| <option>Электронные компоненты</option> | |
| <option>Деревянные изделия</option> | |
| <option>Пластиковые формы</option> | |
| </select> | |
| </div> | |
| <div class="mb-6"> | |
| <label class="block text-gray-700 mb-2 font-medium">Материалы</label> | |
| <div class="space-y-2"> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label class="ml-2 text-gray-700">Сталь</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label class="ml-2 text-gray-700">Алюминий</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label class="ml-2 text-gray-700">Пластик</label> | |
| </div> | |
| <div class="flex items-center"> | |
| <input type="checkbox" class="h-4 w-4 text-blue-600 focus:ring-blue-500 border-gray-300 rounded"> | |
| <label class="ml-2 text-gray-700">Дерево</label> | |
| </div> | |
| </div> | |
| </div> | |
| <button class="w-full bg-green-600 hover:bg-green-700 text-white py-3 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-brain mr-2"></i> Анализировать чертеж | |
| </button> | |
| </div> | |
| <!-- Центральная колонка - технологический процесс --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-project-diagram mr-2 text-purple-600"></i> Технологический процесс | |
| </h2> | |
| <div class="bg-gray-100 p-4 rounded-lg mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Деталь #A-2045</span> | |
| <span class="text-sm bg-blue-100 text-blue-800 px-2 py-1 rounded">Новый</span> | |
| </div> | |
| <div class="text-sm text-gray-600 mb-3">Кронштейн крепления (сталь 3мм)</div> | |
| <div class="flex justify-between text-xs text-gray-500"> | |
| <span><i class="fas fa-ruler-combined mr-1"></i> 450x320x80 мм</span> | |
| <span><i class="fas fa-weight-hanging mr-1"></i> 2.4 кг</span> | |
| <span><i class="fas fa-layer-group mr-1"></i> 12 операций</span> | |
| </div> | |
| </div> | |
| <div class="space-y-4"> | |
| <div class="process-step bg-gray-50 p-4 rounded-lg border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium">1. Раскрой листа</h3> | |
| <p class="text-sm text-gray-600">Лазерная резка по контуру</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">5 мин</span> | |
| </div> | |
| </div> | |
| <div class="process-step bg-gray-50 p-4 rounded-lg border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium">2. Гибка заготовки</h3> | |
| <p class="text-sm text-gray-600">Гибочный пресс, угол 90°</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">3 мин</span> | |
| </div> | |
| </div> | |
| <div class="process-step bg-gray-50 p-4 rounded-lg border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium">3. Сверление отверстий</h3> | |
| <p class="text-sm text-gray-600">4 отверстия Ø8 мм</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">6 мин</span> | |
| </div> | |
| </div> | |
| <div class="process-step bg-gray-50 p-4 rounded-lg border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium">4. Обработка кромок</h3> | |
| <p class="text-sm text-gray-600">Шлифовка острых кромок</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">4 мин</span> | |
| </div> | |
| </div> | |
| <div class="process-step bg-gray-50 p-4 rounded-lg border-l-4 border-blue-500"> | |
| <div class="flex justify-between items-start"> | |
| <div> | |
| <h3 class="font-medium">5. Покраска</h3> | |
| <p class="text-sm text-gray-600">Грунт-эмаль RAL 7016</p> | |
| </div> | |
| <span class="bg-blue-100 text-blue-800 text-xs px-2 py-1 rounded">15 мин</span> | |
| </div> | |
| </div> | |
| <div class="text-center mt-4"> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center justify-center mx-auto"> | |
| <i class="fas fa-plus-circle mr-1"></i> Добавить операцию | |
| </button> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 bg-yellow-50 border-l-4 border-yellow-400 rounded-lg"> | |
| <h3 class="font-medium text-yellow-800 flex items-center"> | |
| <i class="fas fa-lightbulb mr-2"></i> Рекомендация AI | |
| </h3> | |
| <p class="text-sm text-yellow-700 mt-1">Для сокращения времени на 22% можно объединить операции 2 и 3 на многофункциональном станке с ЧПУ.</p> | |
| </div> | |
| </div> | |
| <!-- Правая колонка - приоритезация и аналитика --> | |
| <div class="lg:col-span-1 bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-tasks mr-2 text-green-600"></i> Управление заказами | |
| </h2> | |
| <div class="mb-6"> | |
| <div class="flex justify-between items-center mb-2"> | |
| <span class="font-medium">Приоритет заказов</span> | |
| <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">Обновлено: 12:45</span> | |
| </div> | |
| <div class="space-y-3"> | |
| <div class="p-3 bg-red-50 border-l-4 border-red-500 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium">#ORD-2048</h3> | |
| <p class="text-xs text-gray-600">Срок: сегодня 18:00</p> | |
| </div> | |
| <span class="text-xs bg-red-100 text-red-800 px-2 py-1 rounded">Критический</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-orange-50 border-l-4 border-orange-500 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium">#ORD-2049</h3> | |
| <p class="text-xs text-gray-600">Срок: завтра 10:00</p> | |
| </div> | |
| <span class="text-xs bg-orange-100 text-orange-800 px-2 py-1 rounded">Высокий</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-blue-50 border-l-4 border-blue-500 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium">#ORD-2050</h3> | |
| <p class="text-xs text-gray-600">Срок: послезавтра 15:00</p> | |
| </div> | |
| <span class="text-xs bg-blue-100 text-blue-800 px-2 py-1 rounded">Средний</span> | |
| </div> | |
| </div> | |
| <div class="p-3 bg-gray-50 border-l-4 border-gray-400 rounded-lg"> | |
| <div class="flex justify-between items-center"> | |
| <div> | |
| <h3 class="font-medium">#ORD-2051</h3> | |
| <p class="text-xs text-gray-600">Срок: 25.06.2023</p> | |
| </div> | |
| <span class="text-xs bg-gray-100 text-gray-800 px-2 py-1 rounded">Низкий</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mb-6"> | |
| <h3 class="font-medium mb-3">График загрузки цеха</h3> | |
| <div class="h-40 bg-gray-100 rounded-lg p-3"> | |
| <!-- Упрощенный график Ганта --> | |
| <div class="flex h-full items-center"> | |
| <div class="flex-1 h-full flex flex-col justify-end"> | |
| <div class="gantt-bar bg-red-500 rounded mb-1" style="height: 90%;" title="Станок #1: 90% загрузки"></div> | |
| </div> | |
| <div class="flex-1 h-full flex flex-col justify-end"> | |
| <div class="gantt-bar bg-yellow-500 rounded mb-1" style="height: 60%;" title="Станок #2: 60% загрузки"></div> | |
| </div> | |
| <div class="flex-1 h-full flex flex-col justify-end"> | |
| <div class="gantt-bar bg-green-500 rounded mb-1" style="height: 40%;" title="Станок #3: 40% загрузки"></div> | |
| </div> | |
| <div class="flex-1 h-full flex flex-col justify-end"> | |
| <div class="gantt-bar bg-blue-500 rounded mb-1" style="height: 75%;" title="Станок #4: 75% загрузки"></div> | |
| </div> | |
| <div class="flex-1 h-full flex flex-col justify-end"> | |
| <div class="gantt-bar bg-purple-500 rounded mb-1" style="height: 30%;" title="Станок #5: 30% загрузки"></div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="p-4 bg-blue-50 border-l-4 border-blue-400 rounded-lg"> | |
| <h3 class="font-medium text-blue-800 flex items-center"> | |
| <i class="fas fa-chart-line mr-2"></i> Аналитика производства | |
| </h3> | |
| <ul class="text-sm text-blue-700 mt-2 space-y-1"> | |
| <li class="flex items-start"> | |
| <i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i> | |
| <span>Среднее время выполнения заказа: <span class="font-medium">2.4 дня</span></span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-exclamation-triangle text-yellow-500 mt-1 mr-2"></i> | |
| <span>Узкое место: <span class="font-medium">участок покраски</span> (+18% к плану)</span> | |
| </li> | |
| <li class="flex items-start"> | |
| <i class="fas fa-lightbulb text-purple-500 mt-1 mr-2"></i> | |
| <span>Оптимизация: <span class="font-medium">перераспределить 15% заказов</span> на вечернюю смену</span> | |
| </li> | |
| </ul> | |
| </div> | |
| <button class="w-full mt-6 bg-purple-600 hover:bg-purple-700 text-white py-3 rounded-lg font-medium flex items-center justify-center"> | |
| <i class="fas fa-sync-alt mr-2"></i> Пересчитать приоритеты | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Блок интеграции с 1С --> | |
| <div class="mt-8 bg-white rounded-xl shadow-md p-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800 flex items-center"> | |
| <i class="fas fa-exchange-alt mr-2 text-indigo-600"></i> Интеграция с 1С | |
| </h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-6"> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-database text-indigo-600"></i> | |
| </div> | |
| <h3 class="font-medium">Данные производства</h3> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Автоматическая синхронизация данных о заказах, материалах и ресурсах с 1С</p> | |
| <div class="flex items-center text-sm"> | |
| <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs flex items-center"> | |
| <i class="fas fa-check-circle mr-1"></i> Активно | |
| </span> | |
| <span class="ml-auto text-gray-500">Последняя синхр.: 12:42</span> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-cogs text-indigo-600"></i> | |
| </div> | |
| <h3 class="font-medium">Техпроцессы</h3> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Экспорт разработанных техпроцессов в 1С для формирования норм</p> | |
| <div class="flex items-center text-sm"> | |
| <span class="bg-yellow-100 text-yellow-800 px-2 py-1 rounded-full text-xs flex items-center"> | |
| <i class="fas fa-exclamation-triangle mr-1"></i> Ожидает настройки | |
| </span> | |
| </div> | |
| </div> | |
| <div class="border border-gray-200 rounded-lg p-4"> | |
| <div class="flex items-center mb-3"> | |
| <div class="bg-indigo-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-bell text-indigo-600"></i> | |
| </div> | |
| <h3 class="font-medium">Уведомления</h3> | |
| </div> | |
| <p class="text-sm text-gray-600 mb-3">Отправка рекомендаций и предупреждений в 1С и на email</p> | |
| <div class="flex items-center text-sm"> | |
| <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs flex items-center"> | |
| <i class="fas fa-check-circle mr-1"></i> Частично | |
| </span> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-6 p-4 bg-indigo-50 border-l-4 border-indigo-500 rounded-lg"> | |
| <h3 class="font-medium text-indigo-800 flex items-center"> | |
| <i class="fas fa-info-circle mr-2"></i> Информация о подключении | |
| </h3> | |
| <p class="text-sm text-indigo-700 mt-1">Для полной интеграции с 1С необходимо установить модуль обмена данными на сервер 1С и настроить права доступа.</p> | |
| <button class="mt-3 text-indigo-600 hover:text-indigo-800 text-sm font-medium flex items-center"> | |
| <i class="fas fa-book mr-1"></i> Открыть инструкцию | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Статус системы --> | |
| <div class="mt-6 bg-white rounded-xl shadow-md p-4 flex flex-wrap items-center justify-between"> | |
| <div class="flex items-center mb-2 sm:mb-0"> | |
| <div class="h-3 w-3 rounded-full bg-green-500 mr-2 animate-pulse"></div> | |
| <span class="text-sm font-medium">Система активна</span> | |
| </div> | |
| <div class="text-sm text-gray-600"> | |
| <span class="hidden sm:inline-block">Последний анализ: </span> | |
| <span class="font-medium">3 чертежа</span> за сегодня, | |
| <span class="font-medium">8 заказов</span> в работе, | |
| <span class="font-medium">12 рекомендаций</span> сгенерировано | |
| </div> | |
| <button class="text-blue-600 hover:text-blue-800 text-sm font-medium flex items-center mt-2 sm:mt-0"> | |
| <i class="fas fa-history mr-1"></i> История изменений | |
| </button> | |
| </div> | |
| </div> | |
| <script> | |
| // Имитация работы нейросети | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Анимация загрузки при анализе чертежа | |
| const analyzeBtn = document.querySelector('.bg-green-600'); | |
| analyzeBtn.addEventListener('click', function() { | |
| analyzeBtn.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Анализируем...'; | |
| analyzeBtn.classList.add('opacity-75'); | |
| analyzeBtn.disabled = true; | |
| setTimeout(function() { | |
| analyzeBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Анализ завершен'; | |
| analyzeBtn.classList.remove('bg-green-600', 'hover:bg-green-700'); | |
| analyzeBtn.classList.add('bg-green-500'); | |
| // Показываем уведомление | |
| const notification = document.createElement('div'); | |
| notification.className = 'fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg flex items-center'; | |
| notification.innerHTML = '<i class="fas fa-check-circle mr-2"></i> Чертеж успешно проанализирован!'; | |
| document.body.appendChild(notification); | |
| setTimeout(function() { | |
| notification.remove(); | |
| }, 3000); | |
| // Восстанавливаем кнопку через 3 секунды | |
| setTimeout(function() { | |
| analyzeBtn.innerHTML = '<i class="fas fa-brain mr-2"></i> Анализировать чертеж'; | |
| analyzeBtn.classList.remove('bg-green-500', 'opacity-75'); | |
| analyzeBtn.classList.add('bg-green-600', 'hover:bg-green-700'); | |
| analyzeBtn.disabled = false; | |
| }, 3000); | |
| }, 2000); | |
| }); | |
| // Имитация пересчета приоритетов | |
| const recalculateBtn = document.querySelector('.bg-purple-600'); | |
| recalculateBtn.addEventListener('click', function() { | |
| recalculateBtn.innerHTML = '<i class="fas fa-cog fa-spin mr-2"></i> Пересчитываем...'; | |
| recalculateBtn.classList.add('opacity-75'); | |
| recalculateBtn.disabled = true; | |
| setTimeout(function() { | |
| recalculateBtn.innerHTML = '<i class="fas fa-check mr-2"></i> Готово!'; | |
| recalculateBtn.classList.remove('bg-purple-600', 'hover:bg-purple-700'); | |
| recalculateBtn.classList.add('bg-purple-500'); | |
| // Анимация изменения приоритетов | |
| const priorityItems = document.querySelectorAll('.bg-red-50, .bg-orange-50, .bg-blue-50, .bg-gray-50'); | |
| priorityItems.forEach(item => { | |
| item.classList.add('transform', 'transition', 'duration-500', 'hover:scale-105'); | |
| setTimeout(() => { | |
| item.classList.remove('transform', 'transition', 'duration-500', 'hover:scale-105'); | |
| }, 1000); | |
| }); | |
| // Восстанавливаем кнопку через 3 секунды | |
| setTimeout(function() { | |
| recalculateBtn.innerHTML = '<i class="fas fa-sync-alt mr-2"></i> Пересчитать приоритеты'; | |
| recalculateBtn.classList.remove('bg-purple-500', 'opacity-75'); | |
| recalculateBtn.classList.add('bg-purple-600', 'hover:bg-purple-700'); | |
| recalculateBtn.disabled = false; | |
| }, 3000); | |
| }, 1500); | |
| }); | |
| // Drag and drop для чертежей | |
| const dropArea = document.querySelector('.drawing-preview'); | |
| ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, preventDefaults, false); | |
| }); | |
| function preventDefaults(e) { | |
| e.preventDefault(); | |
| e.stopPropagation(); | |
| } | |
| ['dragenter', 'dragover'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, highlight, false); | |
| }); | |
| ['dragleave', 'drop'].forEach(eventName => { | |
| dropArea.addEventListener(eventName, unhighlight, false); | |
| }); | |
| function highlight() { | |
| dropArea.classList.add('border-blue-500', 'bg-blue-50'); | |
| } | |
| function unhighlight() { | |
| dropArea.classList.remove('border-blue-500', 'bg-blue-50'); | |
| } | |
| dropArea.addEventListener('drop', handleDrop, false); | |
| function handleDrop(e) { | |
| const dt = e.dataTransfer; | |
| const files = dt.files; | |
| handleFiles(files); | |
| } | |
| function handleFiles(files) { | |
| if (files.length > 0) { | |
| const file = files[0]; | |
| const fileName = file.name; | |
| const fileSize = (file.size / 1024 / 1024).toFixed(2); // в MB | |
| dropArea.innerHTML = ` | |
| <i class="fas fa-file-image text-4xl text-blue-500 mb-3"></i> | |
| <p class="font-medium text-gray-800">${fileName}</p> | |
| <p class="text-sm text-gray-500">${fileSize} MB</p> | |
| <div class="w-full bg-gray-200 rounded-full h-2.5 mt-3"> | |
| <div class="bg-blue-600 h-2.5 rounded-full" style="width: 0%" id="uploadProgress"></div> | |
| </div> | |
| `; | |
| // Имитация загрузки | |
| let progress = 0; | |
| const progressBar = document.getElementById('uploadProgress'); | |
| const uploadInterval = setInterval(() => { | |
| progress += 5; | |
| progressBar.style.width = `${progress}%`; | |
| if (progress >= 100) { | |
| clearInterval(uploadInterval); | |
| dropArea.innerHTML = ` | |
| <i class="fas fa-check-circle text-4xl text-green-500 mb-3"></i> | |
| <p class="font-medium text-gray-800">${fileName}</p> | |
| <p class="text-sm text-gray-500">Готово к анализу</p> | |
| `; | |
| } | |
| }, 100); | |
| } | |
| } | |
| }); | |
| </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=LI17ZAA/https-huggingface-co-spaces-li17zaa-za19-li" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |