| | <!DOCTYPE html> |
| | <html lang="ru"> |
| | <head> |
| | <meta charset="UTF-8"> |
| | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| | <title>Mindia AI - Умный помощник инженера</title> |
| | <script crossorigin src="https://unpkg.com/react@18/umd/react.production.min.js"></script> |
| | <script crossorigin src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"></script> |
| | <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script> |
| | <script src="https://cdn.tailwindcss.com"></script> |
| | <style> |
| | * { |
| | margin: 0; |
| | padding: 0; |
| | box-sizing: border-box; |
| | } |
| | body { |
| | font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif; |
| | } |
| | @keyframes fadeIn { |
| | from { opacity: 0; transform: translateY(10px); } |
| | to { opacity: 1; transform: translateY(0); } |
| | } |
| | .fade-in { |
| | animation: fadeIn 0.5s ease-out; |
| | } |
| | @keyframes typing { |
| | from { width: 0; } |
| | to { width: 100%; } |
| | } |
| | .typing { |
| | overflow: hidden; |
| | white-space: nowrap; |
| | border-right: 3px solid #3b82f6; |
| | animation: typing 2s steps(40, end), blink 0.75s step-end infinite; |
| | } |
| | @keyframes blink { |
| | from, to { border-color: transparent; } |
| | 50% { border-color: #3b82f6; } |
| | } |
| | </style> |
| | </head> |
| | <body> |
| | <div id="root"></div> |
| |
|
| | <script type="text/babel"> |
| | const { useState, useEffect, useRef } = React; |
| | |
| | |
| | const Search = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <circle cx="11" cy="11" r="8"/> |
| | <path d="m21 21-4.35-4.35"/> |
| | </svg> |
| | ); |
| | |
| | const Brain = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <path d="M9.5 2A2.5 2.5 0 0 1 12 4.5v15a2.5 2.5 0 0 1-4.96.44 2.5 2.5 0 0 1-2.96-3.08 3 3 0 0 1-.34-5.58 2.5 2.5 0 0 1 1.32-4.24 2.5 2.5 0 0 1 1.98-3A2.5 2.5 0 0 1 9.5 2Z"/> |
| | <path d="M14.5 2A2.5 2.5 0 0 0 12 4.5v15a2.5 2.5 0 0 0 4.96.44 2.5 2.5 0 0 0 2.96-3.08 3 3 0 0 0 .34-5.58 2.5 2.5 0 0 0-1.32-4.24 2.5 2.5 0 0 0-1.98-3A2.5 2.5 0 0 0 14.5 2Z"/> |
| | </svg> |
| | ); |
| | |
| | const FileText = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"/> |
| | <polyline points="14 2 14 8 20 8"/> |
| | <line x1="16" y1="13" x2="8" y2="13"/> |
| | <line x1="16" y1="17" x2="8" y2="17"/> |
| | </svg> |
| | ); |
| | |
| | const Book = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <path d="M4 19.5A2.5 2.5 0 0 1 6.5 17H20"/> |
| | <path d="M6.5 2H20v20H6.5A2.5 2.5 0 0 1 4 19.5v-15A2.5 2.5 0 0 1 6.5 2z"/> |
| | </svg> |
| | ); |
| | |
| | const Link = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/> |
| | <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/> |
| | </svg> |
| | ); |
| | |
| | const Zap = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <polygon points="13 2 3 14 12 14 11 22 21 10 12 10 13 2"/> |
| | </svg> |
| | ); |
| | |
| | const Clock = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <circle cx="12" cy="12" r="10"/> |
| | <polyline points="12 6 12 12 16 14"/> |
| | </svg> |
| | ); |
| | |
| | const TrendingUp = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <polyline points="23 6 13.5 15.5 8.5 10.5 1 18"/> |
| | <polyline points="17 6 23 6 23 12"/> |
| | </svg> |
| | ); |
| | |
| | const Users = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <path d="M17 21v-2a4 4 0 0 0-4-4H5a4 4 0 0 0-4 4v2"/> |
| | <circle cx="9" cy="7" r="4"/> |
| | <path d="M23 21v-2a4 4 0 0 0-3-3.87"/> |
| | <path d="M16 3.13a4 4 0 0 1 0 7.75"/> |
| | </svg> |
| | ); |
| | |
| | const Image = ({ size = 24, className = "" }) => ( |
| | <svg width={size} height={size} viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" className={className}> |
| | <rect x="3" y="3" width="18" height="18" rx="2" ry="2"/> |
| | <circle cx="8.5" cy="8.5" r="1.5"/> |
| | <polyline points="21 15 16 10 5 21"/> |
| | </svg> |
| | ); |
| | |
| | const MindiaAssistant = () => { |
| | const [query, setQuery] = useState(''); |
| | const [isSearching, setIsSearching] = useState(false); |
| | const [searchResult, setSearchResult] = useState(null); |
| | const [searchHistory, setSearchHistory] = useState([ |
| | { query: 'температура эксплуатации двигателя ДП-45', time: '14:23' }, |
| | { query: 'схема подключения датчика вибрации', time: '13:45' }, |
| | { query: 'регламент ТО редуктора', time: '12:10' } |
| | ]); |
| | |
| | const exampleQueries = [ |
| | "момент затяжки болтов для редуктора Р-500", |
| | "температурный режим работы двигателя ДП-45", |
| | "схема подключения датчика давления", |
| | "периодичность замены масла в гидросистеме", |
| | "допустимый уровень вибрации для насоса НШ-100" |
| | ]; |
| | |
| | const knowledgeBase = { |
| | "момент затяжки болтов для редуктора Р-500": { |
| | answer: "Момент затяжки болтов крепления крышки редуктора Р-500 составляет 120 Н·м (класс прочности 8.8).", |
| | source: { |
| | title: "Инструкция по эксплуатации Р-500.pdf", |
| | page: 42, |
| | section: "3.5.1", |
| | excerpt: "...для обеспечения герметичности, момент затяжки болтов (поз. 12 на рис. 4) должен составлять 120 Н·м при использовании болтов класса прочности 8.8. Затяжку производить крест-накрест в два этапа: сначала 60 Н·м, затем 120 Н·м..." |
| | }, |
| | relatedDocs: [ |
| | { title: "Сборочный чертеж редуктора Р-500.dwg", type: "DWG" }, |
| | { title: "Регламент ТО-2 для Линии 3.pdf", type: "PDF" }, |
| | { title: "ГОСТ 1759.4-87 Болты класс прочности.pdf", type: "PDF" } |
| | ] |
| | }, |
| | "температурный режим работы двигателя ДП-45": { |
| | answer: "Номинальная рабочая температура двигателя ДП-45: обмотка 80-105°C, подшипники не более 65°C. Критическая температура обмотки: 130°C.", |
| | source: { |
| | title: "Техническая документация ДП-45.pdf", |
| | page: 18, |
| | section: "2.3", |
| | excerpt: "Температурный режим работы: номинальная температура обмотки статора 80-105°C (класс изоляции F). Температура подшипников не должна превышать 65°C. При достижении температуры обмотки 130°C необходима немедленная остановка..." |
| | }, |
| | relatedDocs: [ |
| | { title: "Схема термоконтроля ДП-45.pdf", type: "PDF" }, |
| | { title: "Инструкция по монтажу двигателей.pdf", type: "PDF" } |
| | ] |
| | }, |
| | "схема подключения датчика давления": { |
| | answer: "Датчик давления подключается по 4-проводной схеме: +24V (красный), GND (черный), Signal+ (белый), Signal- (синий). Диапазон измерения: 0-10 bar, выходной сигнал: 4-20 mA.", |
| | source: { |
| | title: "Руководство по КИПиА.pdf", |
| | page: 67, |
| | section: "5.2.4", |
| | excerpt: "Датчики давления серии ДД-100 подключаются по стандартной 4-проводной схеме. Красный провод - питание +24V DC, черный - общий (GND), белый и синий - дифференциальный токовый выход 4-20 mA..." |
| | }, |
| | relatedDocs: [ |
| | { title: "Схема подключения КИП.dwg", type: "DWG" }, |
| | { title: "Паспорт датчика ДД-100.pdf", type: "PDF" } |
| | ] |
| | } |
| | }; |
| | |
| | const handleSearch = () => { |
| | if (!query.trim()) return; |
| | |
| | setIsSearching(true); |
| | |
| | setTimeout(() => { |
| | const result = knowledgeBase[query.toLowerCase()] || { |
| | answer: `По вашему запросу "${query}" найдено 3 документа. Наиболее релевантная информация находится в техническом регламенте.`, |
| | source: { |
| | title: "Общий технический регламент.pdf", |
| | page: 124, |
| | section: "Раздел 7", |
| | excerpt: "Информация по запросу доступна в разделе технической документации..." |
| | }, |
| | relatedDocs: [ |
| | { title: "Техническая документация оборудования.pdf", type: "PDF" }, |
| | { title: "Справочник инженера.pdf", type: "PDF" } |
| | ] |
| | }; |
| | |
| | setSearchResult(result); |
| | setSearchHistory(prev => [ |
| | { query, time: new Date().toLocaleTimeString('ru-RU', { hour: '2-digit', minute: '2-digit' }) }, |
| | ...prev.slice(0, 9) |
| | ]); |
| | setIsSearching(false); |
| | }, 1500); |
| | }; |
| | |
| | const handleExampleClick = (example) => { |
| | setQuery(example); |
| | }; |
| | |
| | return ( |
| | <div className="min-h-screen bg-gradient-to-br from-indigo-50 via-white to-purple-50 p-6"> |
| | <div className="max-w-6xl mx-auto"> |
| | {/* Header */} |
| | <div className="bg-gradient-to-r from-indigo-600 to-purple-700 rounded-xl shadow-2xl p-8 mb-8 border-2 border-indigo-300"> |
| | <div className="flex items-center gap-4 mb-4"> |
| | <div className="bg-white p-3 rounded-xl shadow-lg"> |
| | <Brain size={40} className="text-indigo-600" /> |
| | </div> |
| | <div> |
| | <h1 className="text-4xl font-bold text-white mb-1">MINDIA</h1> |
| | <p className="text-indigo-100 text-lg font-medium">База знаний предприятия • Умный помощник инженера</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | {/* Search Bar */} |
| | <div className="bg-white rounded-xl shadow-2xl p-6 mb-6 border-2 border-indigo-200"> |
| | <div className="flex gap-3"> |
| | <div className="flex-1 relative"> |
| | <Search className="absolute left-4 top-1/2 transform -translate-y-1/2 text-gray-400" size={24} /> |
| | <input |
| | type="text" |
| | value={query} |
| | onChange={(e) => setQuery(e.target.value)} |
| | onKeyPress={(e) => e.key === 'Enter' && handleSearch()} |
| | placeholder="Задайте вопрос на естественном языке..." |
| | className="w-full pl-14 pr-4 py-4 text-lg border-2 border-gray-300 rounded-lg focus:border-indigo-500 focus:outline-none" |
| | /> |
| | </div> |
| | <button |
| | onClick={handleSearch} |
| | disabled={isSearching} |
| | className="px-8 py-4 bg-gradient-to-r from-indigo-600 to-purple-600 text-white font-bold rounded-lg hover:from-indigo-700 hover:to-purple-700 transition-all shadow-lg disabled:opacity-50 disabled:cursor-not-allowed" |
| | > |
| | {isSearching ? ( |
| | <div className="flex items-center gap-2"> |
| | <div className="animate-spin rounded-full h-5 w-5 border-b-2 border-white"></div> |
| | Поиск... |
| | </div> |
| | ) : ( |
| | 'Найти' |
| | )} |
| | </button> |
| | </div> |
| | |
| | {/* Example Queries */} |
| | <div className="mt-4"> |
| | <p className="text-sm text-gray-600 mb-2 font-semibold">Примеры запросов:</p> |
| | <div className="flex flex-wrap gap-2"> |
| | {exampleQueries.map((example, index) => ( |
| | <button |
| | key={index} |
| | onClick={() => handleExampleClick(example)} |
| | className="text-sm px-3 py-1.5 bg-indigo-50 text-indigo-700 rounded-full hover:bg-indigo-100 transition-colors border border-indigo-200" |
| | > |
| | "{example}" |
| | </button> |
| | ))} |
| | </div> |
| | </div> |
| | </div> |
| | |
| | <div className="grid grid-cols-3 gap-6"> |
| | {/* Left Column - Search Result */} |
| | <div className="col-span-2"> |
| | {searchResult ? ( |
| | <div className="space-y-6 fade-in"> |
| | {/* Direct Answer */} |
| | <div className="bg-white rounded-xl shadow-xl p-6 border-2 border-green-200"> |
| | <div className="flex items-center gap-2 mb-4"> |
| | <Zap className="text-green-600" size={24} /> |
| | <h2 className="text-xl font-bold text-gray-800">Прямой ответ</h2> |
| | </div> |
| | <div className="bg-green-50 rounded-lg p-6 border-2 border-green-200"> |
| | <p className="text-lg text-gray-800 leading-relaxed font-medium"> |
| | {searchResult.answer} |
| | </p> |
| | </div> |
| | </div> |
| | |
| | {/* Source Document */} |
| | <div className="bg-white rounded-xl shadow-xl p-6 border-2 border-blue-200"> |
| | <div className="flex items-center gap-2 mb-4"> |
| | <FileText className="text-blue-600" size={24} /> |
| | <h2 className="text-xl font-bold text-gray-800">Источник</h2> |
| | </div> |
| | <div className="space-y-4"> |
| | <div className="flex items-center gap-3 p-4 bg-blue-50 rounded-lg border border-blue-200"> |
| | <FileText className="text-blue-600" size={32} /> |
| | <div className="flex-1"> |
| | <p className="font-bold text-blue-900">{searchResult.source.title}</p> |
| | <p className="text-sm text-blue-700"> |
| | Страница {searchResult.source.page}, пункт {searchResult.source.section} |
| | </p> |
| | </div> |
| | </div> |
| | <div className="bg-gray-50 rounded-lg p-4 border-l-4 border-blue-500"> |
| | <p className="text-gray-700 leading-relaxed italic"> |
| | {searchResult.source.excerpt} |
| | </p> |
| | </div> |
| | <button className="w-full bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-4 rounded-lg flex items-center justify-center gap-2 transition-colors"> |
| | <Image size={18} /> |
| | Показать на схеме |
| | </button> |
| | </div> |
| | </div> |
| | |
| | {/* Related Documents */} |
| | <div className="bg-white rounded-xl shadow-xl p-6 border-2 border-purple-200"> |
| | <div className="flex items-center gap-2 mb-4"> |
| | <Book className="text-purple-600" size={24} /> |
| | <h2 className="text-xl font-bold text-gray-800">Связанные документы</h2> |
| | </div> |
| | <div className="space-y-3"> |
| | {searchResult.relatedDocs.map((doc, index) => ( |
| | <div |
| | key={index} |
| | className="flex items-center gap-3 p-4 bg-purple-50 rounded-lg border border-purple-200 hover:bg-purple-100 transition-colors cursor-pointer" |
| | > |
| | <div className={`px-3 py-1 rounded font-bold text-sm ${ |
| | doc.type === 'PDF' |
| | ? 'bg-red-100 text-red-700' |
| | : 'bg-blue-100 text-blue-700' |
| | }`}> |
| | {doc.type} |
| | </div> |
| | <p className="flex-1 text-gray-800 font-medium">{doc.title}</p> |
| | <Link className="text-purple-600" size={20} /> |
| | </div> |
| | ))} |
| | </div> |
| | </div> |
| | </div> |
| | ) : ( |
| | <div className="bg-white rounded-xl shadow-xl p-12 border-2 border-gray-200 text-center"> |
| | <Brain size={64} className="mx-auto mb-4 text-gray-300" /> |
| | <h3 className="text-2xl font-bold text-gray-800 mb-2"> |
| | Задайте вопрос Mindia |
| | </h3> |
| | <p className="text-gray-600"> |
| | Я помогу найти нужную информацию в технической документации |
| | </p> |
| | </div> |
| | )} |
| | </div> |
| | |
| | {/* Right Column - Info and History */} |
| | <div className="col-span-1 space-y-6"> |
| | {/* Statistics */} |
| | <div className="bg-white rounded-xl shadow-xl p-6 border-2 border-indigo-200"> |
| | <h2 className="text-lg font-bold text-gray-800 mb-4">Эффективность</h2> |
| | <div className="space-y-4"> |
| | <div className="bg-gradient-to-br from-green-500 to-green-600 rounded-lg p-4 text-white"> |
| | <div className="flex items-center gap-2 mb-1"> |
| | <Zap size={18} /> |
| | <p className="text-sm font-semibold">Скорость поиска</p> |
| | </div> |
| | <p className="text-3xl font-bold">×10</p> |
| | <p className="text-xs opacity-90">быстрее</p> |
| | </div> |
| | <div className="bg-gradient-to-br from-blue-500 to-blue-600 rounded-lg p-4 text-white"> |
| | <div className="flex items-center gap-2 mb-1"> |
| | <Clock size={18} /> |
| | <p className="text-sm font-semibold">Экономия времени</p> |
| | </div> |
| | <p className="text-3xl font-bold">30%</p> |
| | <p className="text-xs opacity-90">рабочего времени</p> |
| | </div> |
| | <div className="bg-gradient-to-br from-purple-500 to-purple-600 rounded-lg p-4 text-white"> |
| | <div className="flex items-center gap-2 mb-1"> |
| | <Users size={18} /> |
| | <p className="text-sm font-semibold">Адаптация новичков</p> |
| | </div> |
| | <p className="text-3xl font-bold">5×</p> |
| | <p className="text-xs opacity-90">быстрее</p> |
| | </div> |
| | </div> |
| | </div> |
| | |
| | {/* Search History */} |
| | <div className="bg-white rounded-xl shadow-xl p-6 border-2 border-gray-200"> |
| | <h2 className="text-lg font-bold text-gray-800 mb-4 flex items-center gap-2"> |
| | <Clock className="text-gray-600" /> |
| | История запросов |
| | </h2> |
| | <div className="space-y-2 max-h-96 overflow-y-auto"> |
| | {searchHistory.map((item, index) => ( |
| | <div |
| | key={index} |
| | onClick={() => setQuery(item.query)} |
| | className="p-3 bg-gray-50 rounded-lg hover:bg-gray-100 transition-colors cursor-pointer border border-gray-200" |
| | > |
| | <p className="text-sm text-gray-800 font-medium line-clamp-2"> |
| | {item.query} |
| | </p> |
| | <p className="text-xs text-gray-500 mt-1">{item.time}</p> |
| | </div> |
| | ))} |
| | </div> |
| | </div> |
| | |
| | {/* Knowledge Base Stats */} |
| | <div className="bg-gradient-to-br from-indigo-600 to-purple-700 rounded-xl shadow-xl p-6 text-white"> |
| | <h2 className="text-lg font-bold mb-4">База знаний</h2> |
| | <div className="space-y-3 text-sm"> |
| | <div className="flex justify-between"> |
| | <span className="opacity-90">Документов:</span> |
| | <span className="font-bold">2,847</span> |
| | </div> |
| | <div className="flex justify-between"> |
| | <span className="opacity-90">ГОСТы:</span> |
| | <span className="font-bold">456</span> |
| | </div> |
| | <div className="flex justify-between"> |
| | <span className="opacity-90">Чертежей:</span> |
| | <span className="font-bold">1,203</span> |
| | </div> |
| | <div className="flex justify-between"> |
| | <span className="opacity-90">Инструкций:</span> |
| | <span className="font-bold">892</span> |
| | </div> |
| | <div className="pt-3 border-t border-white/20"> |
| | <p className="text-xs opacity-75">Последнее обновление: сегодня, 09:15</p> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | </div> |
| | ); |
| | }; |
| | |
| | const root = ReactDOM.createRoot(document.getElementById('root')); |
| | root.render(<MindiaAssistant />); |
| | </script> |
| | </body> |
| | </html> |
| |
|
