Ну дамаю как демо хватит
This commit is contained in:
parent
a4063bd47f
commit
34eee1ec53
40
react-app/src/components/AnalyticsPage.js
vendored
40
react-app/src/components/AnalyticsPage.js
vendored
@ -1,21 +1,48 @@
|
||||
import React from 'react';
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './Style.css';
|
||||
|
||||
function AnalyticsPage() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
// Состояние для выбора значения в ComboBox
|
||||
const [selectedOption, setSelectedOption] = useState('Option1');
|
||||
|
||||
const metricsData = Array.from({ length: 10 }, (_, epoch) => ({
|
||||
epoch: epoch + 1,
|
||||
accuracy: Math.random() * 20 + 80,
|
||||
loss: Math.random() * 0.5 + 0.5,
|
||||
}));
|
||||
|
||||
// Функция для обработки изменения значения в ComboBox
|
||||
const handleChange = (event) => {
|
||||
setSelectedOption(event.target.value);
|
||||
window.location.reload(); // Перезагружаем страницу при изменении выбора
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="analytics-container">
|
||||
<h2 className="text-center mb-4">Аналитика и результаты обучения</h2>
|
||||
<div className="analytics-content">
|
||||
<div className="mb-4">
|
||||
<h4 className="text-center">Выбор модели</h4>
|
||||
<label className="text-light" htmlFor="metricSelector"></label>
|
||||
<select
|
||||
id="metricSelector"
|
||||
className="form-select"
|
||||
value={selectedOption}
|
||||
onChange={handleChange}
|
||||
>
|
||||
<option value="Option">Модель</option>
|
||||
<option value="Option">Модель</option>
|
||||
<option value="Option">Модель</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
{/* Графики */}
|
||||
<div className="graph-section mb-4">
|
||||
<h3 className="section-title">Графики метрик</h3>
|
||||
<h3 className="text-center mb-4">Графики метрик</h3>
|
||||
<div className="graph-container">
|
||||
<div className="graph">
|
||||
<h5 className="text-light">Точность (Accuracy)</h5>
|
||||
@ -63,7 +90,7 @@ function AnalyticsPage() {
|
||||
|
||||
{/* Таблица метрик */}
|
||||
<div className="metrics-section mb-4">
|
||||
<h3 className="section-title">Таблица метрик</h3>
|
||||
<h3 className="text-center mb-4">Таблица метрик</h3>
|
||||
<table className="metrics-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -83,12 +110,7 @@ function AnalyticsPage() {
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
{/* Визуализация */}
|
||||
<div className="visualization-section">
|
||||
<h3 className="section-title">Визуализация процесса обучения</h3>
|
||||
<div className="visualization-placeholder">Здесь будет визуализация (например, конфигурация модели)</div>
|
||||
</div>
|
||||
<button className="btn w-100" onClick={() => navigate('/dashboard')}>Перейти в главное меню</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
32
react-app/src/components/Dashboard.js
vendored
32
react-app/src/components/Dashboard.js
vendored
@ -10,21 +10,33 @@ function Dashboard() {
|
||||
<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 className="projects-section">
|
||||
<h3 className="text-center mb-4">Работа с моделями</h3>
|
||||
<div className="buttons-section">
|
||||
<button className="btn w-100" onClick={() => navigate('/model-designer')}>Создать новую модель</button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="projects-section">
|
||||
<h3 className="section-title">Текущие проекты</h3>
|
||||
<h3 className="text-center mb-4">Текущие модели</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>
|
||||
<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 className="analytics-section">
|
||||
<h3 className="text-center mb-4">Статистика</h3>
|
||||
<button className="btn w-100" onClick={() => navigate('/analytics')}>Просмотреть статистику</button>
|
||||
</div>
|
||||
<div className="analytics-section">
|
||||
<h3 className="text-center mb-4">Набор данных</h3>
|
||||
<button className="btn w-100" onClick={() => navigate('/data-processing')}>Просмотреть наборы данных</button>
|
||||
</div>
|
||||
<div className="projects-section">
|
||||
<h3 className="text-center mb-4">Настройка аккаунта</h3>
|
||||
<div className="buttons-section">
|
||||
<button className="btn w-100" onClick={() => navigate('/user-settings')}>Перейти в профиль</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
10
react-app/src/components/DataProcessing.js
vendored
10
react-app/src/components/DataProcessing.js
vendored
@ -1,8 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './Style.css';
|
||||
|
||||
function DataProcessing() {
|
||||
const navigate = useNavigate();
|
||||
const [fileName, setFileName] = useState(null);
|
||||
const [currentPage, setCurrentPage] = useState(1);
|
||||
const rowsPerPage = 10;
|
||||
@ -43,10 +45,9 @@ function DataProcessing() {
|
||||
|
||||
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>
|
||||
<h3 className="text-center mb-4">Загрузка данных</h3>
|
||||
<input
|
||||
type="file"
|
||||
accept=".csv"
|
||||
@ -56,7 +57,7 @@ function DataProcessing() {
|
||||
{fileName && <p className="file-name">Загруженный файл: {fileName}</p>}
|
||||
</div>
|
||||
<div className="preprocessing-section mb-4">
|
||||
<h3 className="section-title">Предобработка данных</h3>
|
||||
<h3 className="text-center mb-4">Предобработка данных</h3>
|
||||
<table className="data-table">
|
||||
<thead>
|
||||
<tr>
|
||||
@ -88,8 +89,9 @@ function DataProcessing() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="processing-section">
|
||||
<button className="btn btn-process" onClick={handleDataProcessing}>Начать обработку</button>
|
||||
<button className="btn w-100" onClick={handleDataProcessing}>Сохранить набор данных</button>
|
||||
</div>
|
||||
<button className="btn w-100" onClick={() => navigate('/dashboard')}>Перейти в главное меню</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
18
react-app/src/components/ModelDesigner.js
vendored
18
react-app/src/components/ModelDesigner.js
vendored
@ -1,7 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './Style.css';
|
||||
function ModelDesigner() {
|
||||
const navigate = useNavigate();
|
||||
|
||||
const [layers, setLayers] = useState([]);
|
||||
|
||||
const addLayer = (type) => {
|
||||
@ -20,13 +23,11 @@ function ModelDesigner() {
|
||||
<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>
|
||||
<button className="btn w-100" onClick={() => addLayer('Dense')}>Добавить Dense</button>
|
||||
<button className="btn w-100" onClick={() => addLayer('Conv2D')}>Добавить Conv2D</button>
|
||||
<button className="btn w-100" onClick={() => addLayer('LSTM')}>Добавить LSTM</button>
|
||||
<div className="layers-section mb-4">
|
||||
<h3 className="section-title">Слои модели</h3>
|
||||
<h3 className="text-center mb-4">Слои модели</h3>
|
||||
{layers.length === 0 ? (
|
||||
<p className="text-center">Слои пока не добавлены</p>
|
||||
) : (
|
||||
@ -46,9 +47,10 @@ function ModelDesigner() {
|
||||
)}
|
||||
</div>
|
||||
<div className="training-section">
|
||||
<h3 className="section-title">Обучение модели</h3>
|
||||
<button className="btn btn-train" onClick={handleTrainModel}>Обучить модель</button>
|
||||
<h3 className="text-center mb-4">Обучение модели</h3>
|
||||
<button className="btn w-100" onClick={handleTrainModel}>Обучить модель</button>
|
||||
</div>
|
||||
<button className="btn w-100" onClick={() => navigate('/dashboard')}>Перейти в главное меню</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -2,11 +2,14 @@ body {
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
font-family: Arial, sans-serif;
|
||||
height: 100vh;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.auth-container {
|
||||
background-color: #1a1a1a;
|
||||
@ -173,7 +176,7 @@ body {
|
||||
border: 1px solid #fff;
|
||||
}
|
||||
|
||||
.projects-section, .analytics-section {
|
||||
.projects-section, .analytics-section, .upload-file-section {
|
||||
background-color: #2a2a2a;
|
||||
border-radius: 10px;
|
||||
padding: 20px;
|
||||
@ -417,30 +420,3 @@ body {
|
||||
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;
|
||||
}
|
||||
21
react-app/src/components/UserSettings.js
vendored
21
react-app/src/components/UserSettings.js
vendored
@ -1,8 +1,10 @@
|
||||
import React, { useState } from 'react';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
import 'bootstrap/dist/css/bootstrap.min.css';
|
||||
import './Style.css';
|
||||
|
||||
function UserSettings() {
|
||||
const navigate = useNavigate();
|
||||
const [password, setPassword] = useState('');
|
||||
const [notifications, setNotifications] = useState(true);
|
||||
|
||||
@ -26,7 +28,7 @@ function UserSettings() {
|
||||
<div className="user-settings-content">
|
||||
{/* Секция настройки профиля */}
|
||||
<div className="profile-settings-section mb-4">
|
||||
<h3 className="section-title">Настройки профиля</h3>
|
||||
<h3 className="text-center mb-4">Настройки профиля</h3>
|
||||
<form onSubmit={handleSubmit}>
|
||||
<div className="form-group">
|
||||
<label htmlFor="password" className="text-light">Новый пароль</label>
|
||||
@ -52,23 +54,10 @@ function UserSettings() {
|
||||
/>
|
||||
</div>
|
||||
|
||||
<button type="submit" className="btn btn-success mt-4">Сохранить изменения</button>
|
||||
<button type="submit" className="btn w-100 mt-2">Сохранить изменения</button>
|
||||
</form>
|
||||
</div>
|
||||
|
||||
{/* Секция настройки уведомлений */}
|
||||
<div className="notification-settings-section mb-4">
|
||||
<h3 className="section-title">Настройки уведомлений</h3>
|
||||
<div className="notification-toggle">
|
||||
<label className="text-light">Получать уведомления</label>
|
||||
<input
|
||||
type="checkbox"
|
||||
className="ml-2"
|
||||
checked={notifications}
|
||||
onChange={handleNotificationsChange}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<button className="btn w-100" onClick={() => navigate('/dashboard')}>Перейти в главное меню</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user