Сделал частично некоторые страницы

react-app/src/components/AnalyticsPage.css

@@ -0,0 +1,67 @@
+body {
+    background-color: #000;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.analytics-container {
+    background-color: #1a1a1a;
+    border-radius: 15px;
+    padding: 30px;
+    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
+    max-width: 900px;
+    width: 100%;
+}
+
+.analytics-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.graph-section, .metrics-section, .visualization-section {
+    background-color: #2a2a2a;
+    border-radius: 10px;
+    padding: 20px;
+}
+
+.section-title {
+    margin-bottom: 15px;
+    color: #ccc;
+}
+
+.graph-placeholder, .visualization-placeholder {
+    background-color: #333;
+    color: #ccc;
+    height: 200px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-radius: 10px;
+}
+
+.metrics-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 15px;
+    color: #fff;
+}
+
+.metrics-table th, .metrics-table td {
+    border: 1px solid #555;
+    padding: 10px;
+    text-align: center;
+}
+
+.metrics-table th {
+    background-color: #444;
+    color: #fff;
+}
+
+.metrics-table tr:nth-child(even) {
+    background-color: #333;
+}

react-app/src/components/AnalyticsPage.js

@@ -1,14 +1,52 @@
 import React from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './AnalyticsPage.css';
 
 function AnalyticsPage() {
-  return (
+    const metricsData = Array.from({ length: 10 }, (_, epoch) => ({
-    <div className="analytics-page container">
+        epoch: epoch + 1,
-      <h1>Аналитика</h1>
+        accuracy: (Math.random() * 20 + 80).toFixed(2),
-      <p>Здесь будут отображаться метрики и графики:</p>
+        loss: (Math.random() * 0.5 + 0.5).toFixed(2),
-      <div className="graph">[График метрик]</div>
+    }));
-      <div className="table mt-3">[Таблица метрик]</div>
+
-    </div>
+    return (
-  );
+        <div className="analytics-container">
+            <h2 className="text-center mb-4">Аналитика и результаты обучения</h2>
+            <div className="analytics-content">
+                <div className="graph-section mb-4">
+                    <h3 className="section-title">Графики метрик</h3>
+                    <div className="graph-placeholder">Здесь будут графики (accuracy, loss)</div>
+                </div>
+
+                <div className="metrics-section mb-4">
+                    <h3 className="section-title">Таблица метрик</h3>
+                    <table className="metrics-table">
+                        <thead>
+                            <tr>
+                                <th>Эпоха</th>
+                                <th>Точность (Accuracy)</th>
+                                <th>Потери (Loss)</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {metricsData.map((row, index) => (
+                                <tr key={index}>
+                                    <td>{row.epoch}</td>
+                                    <td>{row.accuracy}%</td>
+                                    <td>{row.loss}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                </div>
+
+                <div className="visualization-section">
+                    <h3 className="section-title">Визуализация процесса обучения</h3>
+                    <div className="visualization-placeholder">Здесь будет визуализация (например, конфигурация модели)</div>
+                </div>
+            </div>
+        </div>
+    );
 }
 
 export default AnalyticsPage;

react-app/src/components/Dashboard.css

@@ -0,0 +1,74 @@
+body {
+    background-color: #000;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.dashboard-container {
+    background-color: #1a1a1a;
+    border-radius: 15px;
+    padding: 30px;
+    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
+    max-width: 800px;
+    width: 100%;
+}
+
+.dashboard-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.buttons-section {
+    display: flex;
+    justify-content: space-between;
+}
+
+.btn-dashboard {
+    background-color: #fff;
+    color: #000;
+    border-radius: 10px;
+    padding: 10px 20px;
+    transition: all 0.3s ease;
+}
+
+.btn-dashboard:hover {
+    background-color: #000;
+    color: #fff;
+    border: 1px solid #fff;
+}
+
+.projects-section, .analytics-section {
+    background-color: #2a2a2a;
+    border-radius: 10px;
+    padding: 20px;
+}
+
+.section-title {
+    margin-bottom: 15px;
+    color: #ccc;
+}
+
+.projects-list {
+    list-style: none;
+    padding: 0;
+}
+
+.project-item {
+    background-color: #1a1a1a;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+    color: #fff;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.project-item:hover {
+    background-color: #e6e6e6;
+    color: #000;
+}

react-app/src/components/Dashboard.js

@@ -1,26 +1,34 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './Dashboard.css';
+import { useNavigate } from 'react-router-dom';
 
 function Dashboard() {
-  return (
+    const navigate = useNavigate();
-    <div className="dashboard container">
+
-      <h1>Главная страница</h1>
+    return (
-      <div className="d-flex flex-column">
+        <div className="dashboard-container">
-        <Link to="/model-designer" className="btn btn-primary mb-2">
+            <h2 className="text-center mb-4">Главная страница</h2>
-          Создать новую модель
+            <div className="dashboard-content">
-        </Link>
+                <div className="buttons-section mb-4">
-        <Link to="/data-processing" className="btn btn-secondary mb-2">
+                    <button className="btn btn-dashboard" onClick={() => alert('Создание нового проекта')}>Создать новый проект</button>
-          Загрузка и обработка данных
+                    <button className="btn btn-dashboard" onClick={() => navigate('/model-designer')}>Создать новую модель</button>
-        </Link>
+                </div>
-        <Link to="/analytics" className="btn btn-info mb-2">
+                <div className="projects-section">
-          Аналитика
+                    <h3 className="section-title">Текущие проекты</h3>
-        </Link>
+                    <ul className="projects-list">
-        <Link to="/user-settings" className="btn btn-dark">
+                        <li className="project-item" onClick={() => alert('Управление проектом 1')}>Проект 1</li>
-          Настройки пользователя
+                        <li className="project-item" onClick={() => alert('Управление проектом 2')}>Проект 2</li>
-        </Link>
+                        <li className="project-item" onClick={() => alert('Управление проектом 3')}>Проект 3</li>
-      </div>
+                    </ul>
-    </div>
+                </div>
-  );
+                <div className="analytics-section mt-4">
+                    <h3 className="section-title">Аналитика</h3>
+                    <button className="btn btn-dashboard" onClick={() => alert('Переход к аналитике')}>Просмотреть аналитику</button>
+                </div>
+            </div>
+        </div>
+    );
 }
 
 export default Dashboard;

react-app/src/components/DataProcessing.css

@@ -0,0 +1,121 @@
+body {
+    background-color: #000;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.data-processing-container {
+    background-color: #1a1a1a;
+    border-radius: 15px;
+    padding: 30px;
+    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
+    max-width: 900px;
+    width: 100%;
+}
+
+.data-processing-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.upload-section, .preprocessing-section {
+    background-color: #2a2a2a;
+    border-radius: 10px;
+    padding: 20px;
+}
+
+.section-title {
+    margin-bottom: 15px;
+    color: #ccc;
+}
+
+.file-input {
+    background-color: #fff;
+    color: #000;
+    border-radius: 10px;
+    padding: 10px;
+    width: 100%;
+    transition: all 0.3s ease;
+}
+
+.file-input:hover {
+    background-color: #ccc;
+}
+
+.file-name {
+    margin-top: 10px;
+    color: #fff;
+}
+
+.data-table {
+    width: 100%;
+    border-collapse: collapse;
+    margin-top: 15px;
+    color: #fff;
+}
+
+.data-table th, .data-table td {
+    border: 1px solid #555;
+    padding: 10px;
+    text-align: center;
+}
+
+.data-table th {
+    background-color: #444;
+    color: #fff;
+}
+
+.data-table tr:nth-child(even) {
+    background-color: #333;
+}
+
+.pagination {
+    display: flex;
+    justify-content: center;
+    margin-top: 15px;
+    gap: 5px;
+}
+
+.page-button {
+    background-color: #444;
+    color: #fff;
+    border: none;
+    padding: 5px 10px;
+    border-radius: 5px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.page-button.active {
+    background-color: #fff;
+    color: #000;
+    font-weight: bold;
+}
+
+.page-button:hover {
+    background-color: #666;
+}
+
+.processing-section {
+    display: flex;
+    justify-content: center;
+}
+
+.btn-process {
+    background-color: #fff;
+    color: #000;
+    border-radius: 10px;
+    padding: 10px 20px;
+    transition: all 0.3s ease;
+}
+
+.btn-process:hover {
+    background-color: #000;
+    color: #fff;
+    border: 1px solid #fff;
+}

react-app/src/components/DataProcessing.js

@@ -1,14 +1,98 @@
-import React from 'react';
+import React, { useState } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './DataProcessing.css';
 
 function DataProcessing() {
-  return (
+    const [fileName, setFileName] = useState(null);
-    <div className="data-processing container">
+    const [currentPage, setCurrentPage] = useState(1);
-      <h1>Загрузка и обработка данных</h1>
+    const rowsPerPage = 10;
-      <p>Загрузите данные и настройте параметры обработки:</p>
+
-      <button className="btn btn-primary">Загрузить CSV</button>
+    // Пример данных для таблицы
-      <button className="btn btn-info mt-3">Начать обработку</button>
+    const data = Array.from({ length: 25 }, (_, index) => ({
-    </div>
+        col1: `Данные ${index + 1}.1`,
-  );
+        col2: `Данные ${index + 1}.2`,
+        col3: `Данные ${index + 1}.3`,
+    }));
+
+    const handleFileUpload = (event) => {
+        const file = event.target.files[0];
+        if (file) {
+            setFileName(file.name);
+            alert(`Файл ${file.name} загружен`);
+        }
+    };
+
+    const handleDataProcessing = () => {
+        alert('Обработка данных начата');
+    };
+
+    const handlePageChange = (pageNumber) => {
+        setCurrentPage(pageNumber);
+    };
+
+    // Определяем текущие строки для отображения
+    const indexOfLastRow = currentPage * rowsPerPage;
+    const indexOfFirstRow = indexOfLastRow - rowsPerPage;
+    const currentRows = data.slice(indexOfFirstRow, indexOfLastRow);
+
+    // Генерация кнопок пагинации
+    const pageNumbers = [];
+    for (let i = 1; i <= Math.ceil(data.length / rowsPerPage); i++) {
+        pageNumbers.push(i);
+    }
+
+    return (
+        <div className="data-processing-container">
+            <h2 className="text-center mb-4">Загрузка и обработка данных</h2>
+            <div className="data-processing-content">
+                <div className="upload-section mb-4">
+                    <h3 className="section-title">Загрузка данных</h3>
+                    <input
+                        type="file"
+                        accept=".csv"
+                        className="file-input"
+                        onChange={handleFileUpload}
+                    />
+                    {fileName && <p className="file-name">Загруженный файл: {fileName}</p>}
+                </div>
+                <div className="preprocessing-section mb-4">
+                    <h3 className="section-title">Предобработка данных</h3>
+                    <table className="data-table">
+                        <thead>
+                            <tr>
+                                <th>Столбец 1</th>
+                                <th>Столбец 2</th>
+                                <th>Столбец 3</th>
+                            </tr>
+                        </thead>
+                        <tbody>
+                            {currentRows.map((row, index) => (
+                                <tr key={index}>
+                                    <td>{row.col1}</td>
+                                    <td>{row.col2}</td>
+                                    <td>{row.col3}</td>
+                                </tr>
+                            ))}
+                        </tbody>
+                    </table>
+                    <div className="pagination">
+                        {pageNumbers.map((number) => (
+                            <button
+                                key={number}
+                                className={`page-button ${currentPage === number ? 'active' : ''}`}
+                                onClick={() => handlePageChange(number)}
+                            >
+                                {number}
+                            </button>
+                        ))}
+                    </div>
+                </div>
+                <div className="processing-section">
+                    <button className="btn btn-process" onClick={handleDataProcessing}>Начать обработку</button>
+                </div>
+            </div>
+        </div>
+    );
 }
 
 export default DataProcessing;

react-app/src/components/ModelDesigner.css

@@ -0,0 +1,104 @@
+body {
+    background-color: #000;
+    color: #fff;
+    font-family: Arial, sans-serif;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.model-designer-container {
+    background-color: #1a1a1a;
+    border-radius: 15px;
+    padding: 30px;
+    box-shadow: 0 4px 15px rgba(255, 255, 255, 0.2);
+    max-width: 900px;
+    width: 100%;
+}
+
+.model-designer-content {
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
+}
+
+.toolbar {
+    display: flex;
+    justify-content: space-between;
+}
+
+.btn-designer {
+    background-color: #fff;
+    color: #000;
+    border-radius: 10px;
+    padding: 10px 20px;
+    transition: all 0.3s ease;
+}
+
+.btn-designer:hover {
+    background-color: #000;
+    color: #fff;
+    border: 1px solid #fff;
+}
+
+.layers-section, .training-section {
+    background-color: #2a2a2a;
+    border-radius: 10px;
+    padding: 20px;
+}
+
+.section-title {
+    margin-bottom: 15px;
+    color: #ccc;
+}
+
+.layers-list {
+    list-style: none;
+    padding: 0;
+}
+
+.layer-item {
+    background-color: #1a1a1a;
+    border-radius: 5px;
+    padding: 10px;
+    margin-bottom: 10px;
+    color: #fff;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    transition: all 0.3s ease;
+}
+
+.layer-item:hover {
+    background-color: #e6e6e6;
+    color: #000;
+}
+
+.btn-remove {
+    background-color: #e63946;
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    padding: 5px 10px;
+    cursor: pointer;
+    transition: all 0.3s ease;
+}
+
+.btn-remove:hover {
+    background-color: #ff0000;
+}
+
+.btn-train {
+    background-color: #fff;
+    color: #000;
+    border-radius: 10px;
+    padding: 10px 20px;
+    transition: all 0.3s ease;
+}
+
+.btn-train:hover {
+    background-color: #000;
+    color: #fff;
+    border: 1px solid #fff;
+}

react-app/src/components/ModelDesigner.js

@@ -1,17 +1,58 @@
-import React from 'react';
+import React, { useState } from 'react';
+import 'bootstrap/dist/css/bootstrap.min.css';
+import './ModelDesigner.css';
 
 function ModelDesigner() {
-  return (
+    const [layers, setLayers] = useState([]);
-    <div className="model-designer container">
+
-      <h1>Проектирование модели</h1>
+    const addLayer = (type) => {
-      <p>Инструменты для настройки нейронной сети:</p>
+        setLayers([...layers, { id: layers.length + 1, type, settings: {} }]);
-      <div className="panel">
+    };
-        <button className="btn btn-primary mb-2">Добавить слой</button>
+
-        <button className="btn btn-danger mb-2">Удалить слой</button>
+    const removeLayer = (id) => {
-        <button className="btn btn-success">Обучить модель</button>
+        setLayers(layers.filter((layer) => layer.id !== id));
-      </div>
+    };
-    </div>
+
-  );
+    const handleTrainModel = () => {
+        alert('Начало процесса обучения модели');
+    };
+
+    return (
+        <div className="model-designer-container">
+            <h2 className="text-center mb-4">Проектирование модели</h2>
+            <div className="model-designer-content">
+                <div className="toolbar mb-4">
+                    <button className="btn btn-designer" onClick={() => addLayer('Dense')}>Добавить Dense</button>
+                    <button className="btn btn-designer" onClick={() => addLayer('Conv2D')}>Добавить Conv2D</button>
+                    <button className="btn btn-designer" onClick={() => addLayer('LSTM')}>Добавить LSTM</button>
+                </div>
+                <div className="layers-section mb-4">
+                    <h3 className="section-title">Слои модели</h3>
+                    {layers.length === 0 ? (
+                        <p className="text-center">Слои пока не добавлены</p>
+                    ) : (
+                        <ul className="layers-list">
+                            {layers.map((layer) => (
+                                <li key={layer.id} className="layer-item">
+                                    {layer.type}
+                                    <button
+                                        className="btn btn-remove"
+                                        onClick={() => removeLayer(layer.id)}
+                                    >
+                                        Удалить
+                                    </button>
+                                </li>
+                            ))}
+                        </ul>
+                    )}
+                </div>
+                <div className="training-section">
+                    <h3 className="section-title">Обучение модели</h3>
+                    <button className="btn btn-train" onClick={handleTrainModel}>Обучить модель</button>
+                </div>
+            </div>
+        </div>
+    );
 }
 
 export default ModelDesigner;