| <!DOCTYPE html> |
| <html lang="uk"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>🤖 Дашборд підходів до побудови AI-систем</title> |
| <link rel="stylesheet" href="style.css"> |
| </head> |
| <body> |
| <div class="container"> |
| <header class="header"> |
| <h1>🤖 Дашборд підходів до побудови AI-систем</h1> |
| <p>Порівняння та аналіз чотирьох основних підходів до створення штучного інтелекту</p> |
| </header> |
|
|
| <main class="main-content"> |
| |
| <div class="filters-section"> |
| <div class="card"> |
| <div class="card__body"> |
| <h3>🔍 Фільтри</h3> |
| <div class="filters-grid"> |
| <div class="form-group"> |
| <label for="approach-filter" class="form-label">Підхід</label> |
| <select id="approach-filter" class="form-control"> |
| <option value="">Усі підходи</option> |
| <option value="LLM Workflow">LLM Workflow</option> |
| <option value="RAG">RAG</option> |
| <option value="AI Agent">AI Agent</option> |
| <option value="Agentic AI">Agentic AI</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label for="complexity-filter" class="form-label">Складність</label> |
| <select id="complexity-filter" class="form-control"> |
| <option value="">Усі рівні</option> |
| <option value="Низька">Низька</option> |
| <option value="Середня">Середня</option> |
| <option value="Висока">Висока</option> |
| <option value="Дуже висока">Дуже висока</option> |
| </select> |
| </div> |
| <div class="form-group"> |
| <label for="criteria-filter" class="form-label">Критерій</label> |
| <select id="criteria-filter" class="form-control"> |
| <option value="">Усі критерії</option> |
| <option value="Функціональність">Функціональність</option> |
| <option value="Найкращий кейс">Найкращий кейс</option> |
| <option value="Сильні сторони">Сильні сторони</option> |
| <option value="Слабкі сторони">Слабкі сторони</option> |
| </select> |
| </div> |
| </div> |
| <button id="reset-filters" class="btn btn--secondary btn--sm">Скинути фільтри</button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="comparison-section"> |
| <div class="card"> |
| <div class="card__body"> |
| <h3>📊 Таблиця порівняння</h3> |
| <div class="table-container"> |
| <table id="comparison-table" class="comparison-table"> |
| <thead> |
| <tr> |
| <th>Підхід</th> |
| <th>Функціональність</th> |
| <th>Найкращий кейс</th> |
| <th>Сильні сторони</th> |
| <th>Слабкі сторони</th> |
| <th>Складність</th> |
| </tr> |
| </thead> |
| <tbody id="comparison-table-body"> |
| </tbody> |
| </table> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="workflows-section"> |
| <div class="card"> |
| <div class="card__body"> |
| <h3>🔄 Робочі процеси</h3> |
| <div class="workflows-grid" id="workflows-grid"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="details-section"> |
| <div class="card"> |
| <div class="card__body"> |
| <h3>📋 Детальна інформація</h3> |
| <div class="details-grid" id="details-grid"> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="recommendations-section"> |
| <div class="card"> |
| <div class="card__body"> |
| <h3>💡 Рекомендації по вибору підходу</h3> |
| <div class="recommendations-grid" id="recommendations-grid"> |
| </div> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| <footer class="footer"> |
| <p>© 2025 Дашборд підходів до побудови AI-систем. Створено для навчальних цілей.</p> |
| </footer> |
| </div> |
|
|
| <script src="app.js"></script> |
| </body> |
| </html> |
