Сделал частично некоторые страницы
This commit is contained in:
parent
a5f8059caa
commit
99a24d8b9b
67
react-app/src/components/AnalyticsPage.css
Normal file
67
react-app/src/components/AnalyticsPage.css
Normal file
@ -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;
|
||||
}
|
||||
54
react-app/src/components/AnalyticsPage.js
vendored
54
react-app/src/components/AnalyticsPage.js
vendored
@ -1,14 +1,52 @@
|
||||
import React from 'react';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './AnalyticsPage.css';
|
||||
|
||||
function AnalyticsPage() {
|
||||
return (
|
||||
<div className="analytics-page container">
|
||||
<h1>Аналитика</h1>
|
||||
<p>Здесь будут отображаться метрики и графики:</p>
|
||||
<div className="graph">[График метрик]</div>
|
||||
<div className="table mt-3">[Таблица метрик]</div>
|
||||
</div>
|
||||
);
|
||||
const metricsData = Array.from({ length: 10 }, (_, epoch) => ({
|
||||
epoch: epoch + 1,
|
||||
accuracy: (Math.random() * 20 + 80).toFixed(2),
|
||||
loss: (Math.random() * 0.5 + 0.5).toFixed(2),
|
||||
}));
|
||||
|
||||
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;
|
||||
|
||||
74
react-app/src/components/Dashboard.css
Normal file
74
react-app/src/components/Dashboard.css
Normal file
@ -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;
|
||||
}
|
||||
48
react-app/src/components/Dashboard.js
vendored
48
react-app/src/components/Dashboard.js
vendored
@ -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 (
|
||||
<div className="dashboard container">
|
||||
<h1>Главная страница</h1>
|
||||
<div className="d-flex flex-column">
|
||||
<Link to="/model-designer" className="btn btn-primary mb-2">
|
||||
Создать новую модель
|
||||
</Link>
|
||||
<Link to="/data-processing" className="btn btn-secondary mb-2">
|
||||
Загрузка и обработка данных
|
||||
</Link>
|
||||
<Link to="/analytics" className="btn btn-info mb-2">
|
||||
Аналитика
|
||||
</Link>
|
||||
<Link to="/user-settings" className="btn btn-dark">
|
||||
Настройки пользователя
|
||||
</Link>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const navigate = useNavigate();
|
||||
|
||||
return (
|
||||
<div className="dashboard-container">
|
||||
<h2 className="text-center mb-4">Главная страница</h2>
|
||||
<div className="dashboard-content">
|
||||
<div className="buttons-section mb-4">
|
||||
<button className="btn btn-dashboard" onClick={() => alert('Создание нового проекта')}>Создать новый проект</button>
|
||||
<button className="btn btn-dashboard" onClick={() => navigate('/model-designer')}>Создать новую модель</button>
|
||||
</div>
|
||||
<div className="projects-section">
|
||||
<h3 className="section-title">Текущие проекты</h3>
|
||||
<ul className="projects-list">
|
||||
<li className="project-item" onClick={() => alert('Управление проектом 1')}>Проект 1</li>
|
||||
<li className="project-item" onClick={() => alert('Управление проектом 2')}>Проект 2</li>
|
||||
<li className="project-item" onClick={() => alert('Управление проектом 3')}>Проект 3</li>
|
||||
</ul>
|
||||
</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;
|
||||
|
||||
121
react-app/src/components/DataProcessing.css
Normal file
121
react-app/src/components/DataProcessing.css
Normal file
@ -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;
|
||||
}
|
||||
102
react-app/src/components/DataProcessing.js
vendored
102
react-app/src/components/DataProcessing.js
vendored
@ -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 (
|
||||
<div className="data-processing container">
|
||||
<h1>Загрузка и обработка данных</h1>
|
||||
<p>Загрузите данные и настройте параметры обработки:</p>
|
||||
<button className="btn btn-primary">Загрузить CSV</button>
|
||||
<button className="btn btn-info mt-3">Начать обработку</button>
|
||||
</div>
|
||||
);
|
||||
const [fileName, setFileName] = useState(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const rowsPerPage = 10;
|
||||
|
||||
// Пример данных для таблицы
|
||||
const data = Array.from({ length: 25 }, (_, index) => ({
|
||||
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;
|
||||
|
||||
104
react-app/src/components/ModelDesigner.css
Normal file
104
react-app/src/components/ModelDesigner.css
Normal file
@ -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;
|
||||
}
|
||||
65
react-app/src/components/ModelDesigner.js
vendored
65
react-app/src/components/ModelDesigner.js
vendored
@ -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 (
|
||||
<div className="model-designer container">
|
||||
<h1>Проектирование модели</h1>
|
||||
<p>Инструменты для настройки нейронной сети:</p>
|
||||
<div className="panel">
|
||||
<button className="btn btn-primary mb-2">Добавить слой</button>
|
||||
<button className="btn btn-danger mb-2">Удалить слой</button>
|
||||
<button className="btn btn-success">Обучить модель</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
const [layers, setLayers] = useState([]);
|
||||
|
||||
const addLayer = (type) => {
|
||||
setLayers([...layers, { id: layers.length + 1, type, settings: {} }]);
|
||||
};
|
||||
|
||||
const removeLayer = (id) => {
|
||||
setLayers(layers.filter((layer) => layer.id !== id));
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user