mirror of
https://github.com/magnum-opus-nn-cp/frontend.git
synced 2025-04-22 01:31:58 +03:00
feat: add metrics
This commit is contained in:
Pavel Torbeev
parent
fc6a3d8f9c
commit
3151ed72d3
|
|
@ -16,7 +16,6 @@ export type CreateProcessResponse = {
|
|||
export const createProcess = (data: CreateProcessDTO): Promise<CreateProcessResponse> => {
|
||||
const isForm = data.files?.length !== 0;
|
||||
|
||||
console.log(data);
|
||||
let inputData: any;
|
||||
if (isForm) {
|
||||
inputData = new FormData();
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
import { useQuery } from '@tanstack/react-query';
|
||||
import { axios } from '../../lib/axios';
|
||||
import { ExtractFnReturnType, QueryConfig } from '../../lib/react-query';
|
||||
import { ProcessDescriptor, ScoreType, TextDescriptor } from './types';
|
||||
import { PROCESS_API_URL, TEXT_API_URL, TEXT_PARAM } from './urlKeys';
|
||||
import { QUERY_KEY_PROCESSES, QUERY_KEY_TEXTS } from './queryKeys';
|
||||
import { ScoreType, TextDescriptor } from './types';
|
||||
import { TEXT_API_URL, TEXT_PARAM } from './urlKeys';
|
||||
import { QUERY_KEY_TEXTS } from './queryKeys';
|
||||
|
||||
export type GetTextResponse = TextDescriptor;
|
||||
|
||||
|
|
|
|||
|
|
@ -15,7 +15,7 @@
|
|||
|
||||
.DefaultLayout__container {
|
||||
@include flex-col;
|
||||
grid-column: 3 / span 8;
|
||||
grid-column: 2 / span 10;
|
||||
|
||||
@include tablet-down {
|
||||
grid-column: 1 / -1;
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { useCallback, useEffect, useState } from 'react';
|
||||
import { useCallback, useEffect } from 'react';
|
||||
import { SubmitHandler, useForm } from 'react-hook-form';
|
||||
import { useDropzone } from 'react-dropzone';
|
||||
import { useNavigate } from 'react-router-dom';
|
||||
|
|
@ -9,8 +9,7 @@ import { ETextVariants, Text } from '../../components/Text';
|
|||
import { Button, ButtonSize, ButtonVariant } from '../../components/Button';
|
||||
import { Divider } from '../../components/Divider';
|
||||
import { Textarea } from '../../components/Textarea';
|
||||
import { useCreateProcess } from '../../api/process';
|
||||
import { useProcess } from '../../api/process/getProcess';
|
||||
import { useCreateProcess, useProcess } from '../../api/process';
|
||||
import { useSingleTimeout } from '../../hooks/useSingleTimeout';
|
||||
import { Upload } from '../../components/Upload';
|
||||
import { Attachment } from '../../components/Attachment';
|
||||
|
|
@ -24,7 +23,8 @@ export type FormFields = {
|
|||
files: File[];
|
||||
};
|
||||
|
||||
export const PROCESS_POLLING_MS = 500;
|
||||
// 3207
|
||||
export const PROCESS_POLLING_MS = 2000;
|
||||
|
||||
export const HomePage: ReactFCC = () => {
|
||||
const {
|
||||
|
|
@ -136,8 +136,8 @@ export const HomePage: ReactFCC = () => {
|
|||
</Heading>
|
||||
|
||||
<Text className={s.HomePage__text} variant={ETextVariants.BODY_M_REGULAR}>
|
||||
Позволяет оценить кредитный рейтинг компании на основе пресс-релиза с выделением в тексте меток по различным
|
||||
метрикам.
|
||||
Позволяет оценить кредитный рейтинг компании на основе пресс-релиза с выделением в тексте ключевых фраз с
|
||||
использованием различных методов.
|
||||
</Text>
|
||||
|
||||
<form className={s.HomePage__box} onSubmit={handleSubmit(onSubmit)}>
|
||||
|
|
|
|||
|
|
@ -3,12 +3,11 @@ import { useNavigate } from 'react-router-dom';
|
|||
import { Heading, HeadingSize } from '../../components/Heading';
|
||||
import { Link } from '../../components/Link';
|
||||
import { getPercentageColor } from '../../utils/getPercentageColor';
|
||||
import { EMDASH } from '../../utils/chars';
|
||||
import { ModalBody, useModal, ModalContainer } from '../../components/Modal';
|
||||
import { useIsMobile } from '../../hooks/useIsMobile';
|
||||
import { useUrlParam } from '../../hooks/useUrlParam';
|
||||
import { PathBuilder, RESPONSE_PAGE_PARAM } from '../../app/routes';
|
||||
import { useProcess } from '../../api/process/getProcess';
|
||||
import { useProcess } from '../../api/process';
|
||||
import { TextItem } from './components';
|
||||
import s from './ResponsePage.module.scss';
|
||||
|
||||
|
|
@ -67,9 +66,9 @@ export const ResponsePage: FC = () => {
|
|||
<tr>
|
||||
<th>ID</th>
|
||||
<th>Имя</th>
|
||||
<th>М. н-с.</th>
|
||||
<th>М. стат.</th>
|
||||
<th>М. c.</th>
|
||||
<th>Нейросетевой метод</th>
|
||||
<th>Статистический метод</th>
|
||||
<th>Метод схожести</th>
|
||||
{/*<th>Рез.</th>*/}
|
||||
<th>Крат. сод.</th>
|
||||
</tr>
|
||||
|
|
@ -81,23 +80,38 @@ export const ResponsePage: FC = () => {
|
|||
<td>{text.id}</td>
|
||||
<td>{text.file_name.length > 10 ? `${text.file_name.slice(0, 10)}...` : text.file_name}</td>
|
||||
<td>
|
||||
{text.score.bert.answer}
|
||||
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/}
|
||||
{text.score.bert.answer}{' '}
|
||||
{text.score.bert.metric && (
|
||||
<>
|
||||
| Точность{' '}
|
||||
<span style={{ color: getPercentageColor(text.score.bert.metric) }}>
|
||||
{text.score.bert.metric.toFixed(2)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{text.score.f.answer}
|
||||
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/}
|
||||
{text.score.f.answer}{' '}
|
||||
{text.score.f.metric && (
|
||||
<>
|
||||
| Точность{' '}
|
||||
<span style={{ color: getPercentageColor(text.score.f.metric) }}>
|
||||
{text.score.f.metric.toFixed(2)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
<td>
|
||||
{text.score.nearest.answer}
|
||||
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/}
|
||||
{text.score.nearest.answer}{' '}
|
||||
{text.score.nearest.metric && (
|
||||
<>
|
||||
| Точность{' '}
|
||||
<span style={{ color: getPercentageColor(text.score.nearest.metric) }}>
|
||||
{text.score.nearest.metric.toFixed(2)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</td>
|
||||
{/*<td>*/}
|
||||
{/* AA+ | <span style={{ color: getPercentageColor(0.95) }}>0.95</span>*/}
|
||||
{/*</td>*/}
|
||||
{/*<td>*/}
|
||||
{/* AA+ | <span style={{ color: getPercentageColor(0.95) }}>0.95</span>*/}
|
||||
{/*</td>*/}
|
||||
<td className={s.ResponsePage__tableSummary}>
|
||||
<Link
|
||||
component={'button'}
|
||||
|
|
|
|||
|
|
@ -29,23 +29,43 @@ export const TextItem: ReactFCC<TextItemProps> = (props) => {
|
|||
|
||||
<div className={s.TextItem__row}>
|
||||
<Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>
|
||||
М. н-с: {text.score.bert.answer}
|
||||
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/}
|
||||
</Text>{' '}
|
||||
Нейросетевой метод: {text.score.bert.answer}{' '}
|
||||
{text.score.bert.metric && (
|
||||
<>
|
||||
| Точность{' '}
|
||||
<span style={{ color: getPercentageColor(text.score.bert.metric) }}>
|
||||
{text.score.bert.metric.toFixed(2)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div className={s.TextItem__row}>
|
||||
<Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>
|
||||
М. стат: {text.score.f.answer}
|
||||
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/}
|
||||
</Text>{' '}
|
||||
Статистический метод: {text.score.f.answer}{' '}
|
||||
{text.score.f.metric && (
|
||||
<>
|
||||
| Точность{' '}
|
||||
<span style={{ color: getPercentageColor(text.score.f.metric) }}>{text.score.f.metric.toFixed(2)}</span>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
{/*<div className={s.TextItem__row}>*/}
|
||||
{/* <Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>*/}
|
||||
{/* М. п: AA+ | <span style={{ color: getPercentageColor(0.63) }}>0.63</span>*/}
|
||||
{/* </Text>{' '}*/}
|
||||
{/*</div>*/}
|
||||
<div className={s.TextItem__row}>
|
||||
<Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>
|
||||
Метод схожести: {text.score.nearest.answer}{' '}
|
||||
{text.score.nearest.metric && (
|
||||
<>
|
||||
| Точность{' '}
|
||||
<span style={{ color: getPercentageColor(text.score.nearest.metric) }}>
|
||||
{text.score.nearest.metric.toFixed(2)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
</div>
|
||||
|
||||
<div className={clsx(s.TextItem__row, s.TextItem__row_link)}>
|
||||
<Text component={'span'} variant={ETextVariants.BODY_S_REGULAR}>
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ export type TextFields = {
|
|||
type: ScoreType;
|
||||
};
|
||||
|
||||
export const TEXT_REFETCH_MS = 500;
|
||||
export const TEXT_REFETCH_MS = 2000;
|
||||
|
||||
export const TextPage: FC = () => {
|
||||
const textId = useUrlParam(TEXT_PAGE_PARAM, { parser: parseInt });
|
||||
|
|
@ -167,32 +167,46 @@ export const TextPage: FC = () => {
|
|||
<span className={s.TextPage__underline}>нейросетевому</span>
|
||||
</Tooltip>{' '}
|
||||
методу: {textEntity.score.bert.answer}
|
||||
{/*| Accuracy: <span style={{ color: getPercentageColor(0.95) }}>0.95</span>*/}
|
||||
{textEntity.score.bert.metric && (
|
||||
<>
|
||||
| Точность:{' '}
|
||||
<span style={{ color: getPercentageColor(textEntity.score.bert.metric) }}>
|
||||
{textEntity.score.bert.metric.toFixed(2)}
|
||||
</span>
|
||||
</>
|
||||
)}{' '}
|
||||
</Text>
|
||||
|
||||
<Text component={'div'} className={s.TextPage__prop} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>
|
||||
Результат по{' '}
|
||||
<Tooltip
|
||||
className={s.TextPage__tooltip}
|
||||
content={'Лемматизация + TF/IDF + RandomForest'}
|
||||
content={'Лемматизация + TF-IDF + RandomForest'}
|
||||
placement={'right'}>
|
||||
<span className={s.TextPage__underline}>статистическому</span>
|
||||
</Tooltip>{' '}
|
||||
методу: {textEntity.score.f.answer}
|
||||
{/*| Accuracy: <span style={{ color: getPercentageColor(0.71) }}>0.71</span>*/}
|
||||
{textEntity.score.f.metric && (
|
||||
<>
|
||||
| Точность:{' '}
|
||||
<span style={{ color: getPercentageColor(textEntity.score.f.metric) }}>
|
||||
{textEntity.score.f.metric.toFixed(2)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
</Text>
|
||||
|
||||
<Text component={'div'} className={s.TextPage__prop} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>
|
||||
Результат по методу{' '}
|
||||
<Tooltip className={s.TextPage__tooltip} content={'Bert + Annoy'}>
|
||||
<Tooltip className={s.TextPage__tooltip} content={'LaBSe + Annoy'}>
|
||||
<span className={s.TextPage__underline}>схожести</span>
|
||||
</Tooltip>
|
||||
: {textEntity.score.nearest.answer}
|
||||
{textEntity.score.nearest.metric && (
|
||||
<>
|
||||
| Точность:{' '}
|
||||
<span style={{ color: getPercentageColor(textEntity.score.nearest.metric / 100) }}>
|
||||
{(textEntity.score.nearest.metric / 100).toFixed(2)}
|
||||
<span style={{ color: getPercentageColor(textEntity.score.nearest.metric) }}>
|
||||
{textEntity.score.nearest.metric.toFixed(2)}
|
||||
</span>
|
||||
</>
|
||||
)}
|
||||
|
|
@ -269,8 +283,8 @@ export const TextPage: FC = () => {
|
|||
</p>
|
||||
<p>
|
||||
Точность{' '}
|
||||
<span style={{ color: getPercentageColor(activeDetailed.features[1] / 100) }}>
|
||||
{(activeDetailed.features[1] / 100).toFixed(2)}
|
||||
<span style={{ color: getPercentageColor(activeDetailed.features[1]) }}>
|
||||
{activeDetailed.features[1].toFixed(2)}
|
||||
</span>
|
||||
</p>
|
||||
{activeDetailed.features[2].map((text, index) => (
|
||||
|
|
|
|||
|
|
@ -6,7 +6,7 @@ export const getTextFromDetailed = (detailed: DetailDescriptor[] = []) => {
|
|||
|
||||
detailed.forEach((item, index) => {
|
||||
const [_, metric] = item.features;
|
||||
const color = getColorFromValue(metric / 100);
|
||||
const color = getColorFromValue(metric);
|
||||
html += `<p class="detailedText" data-index="${index}" style="background-color: ${color};">${item.text}</p> `;
|
||||
});
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue
Block a user