magnum-opus-nn-cp/frontend
1
0
Fork 0
mirror of https://github.com/magnum-opus-nn-cp/frontend.git synced 2025-07-14 18:22:29 +03:00
Code Issues Packages Projects Releases Wiki Activity

feat: add metrics

Browse Source
This commit is contained in:
Pavel Torbeev 2023-09-10 00:58:49 +03:00
parent fc6a3d8f9c
commit 3151ed72d3
8 changed files with 96 additions and 49 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/api/process/createProcess.ts
View File

@ -16,7 +16,6 @@ export type CreateProcessResponse = {
export const createProcess = (data: CreateProcessDTO): Promise<CreateProcessResponse> => { export const createProcess = (data: CreateProcessDTO): Promise<CreateProcessResponse> => {
const isForm = data.files?.length !== 0; const isForm = data.files?.length !== 0;
console.log(data);
let inputData: any; let inputData: any;
if (isForm) { if (isForm) {
inputData = new FormData(); inputData = new FormData();

6
src/api/process/getText.ts
View File

@ -1,9 +1,9 @@
import { useQuery } from '@tanstack/react-query'; import { useQuery } from '@tanstack/react-query';
import { axios } from '../../lib/axios'; import { axios } from '../../lib/axios';
import { ExtractFnReturnType, QueryConfig } from '../../lib/react-query'; import { ExtractFnReturnType, QueryConfig } from '../../lib/react-query';
import { ProcessDescriptor, ScoreType, TextDescriptor } from './types'; import { ScoreType, TextDescriptor } from './types';
import { PROCESS_API_URL, TEXT_API_URL, TEXT_PARAM } from './urlKeys'; import { TEXT_API_URL, TEXT_PARAM } from './urlKeys';
import { QUERY_KEY_PROCESSES, QUERY_KEY_TEXTS } from './queryKeys'; import { QUERY_KEY_TEXTS } from './queryKeys';
export type GetTextResponse = TextDescriptor; export type GetTextResponse = TextDescriptor;

2
src/pages/_layouts/DefaultLayout/DefaultLayout.module.scss
View File

@ -15,7 +15,7 @@
.DefaultLayout__container { .DefaultLayout__container {
@include flex-col; @include flex-col;
grid-column: 3 / span 8; grid-column: 2 / span 10;
@include tablet-down { @include tablet-down {
grid-column: 1 / -1; grid-column: 1 / -1;

12
src/pages/home/HomePage.tsx
View File

@ -1,4 +1,4 @@
import { useCallback, useEffect, useState } from 'react'; import { useCallback, useEffect } from 'react';
import { SubmitHandler, useForm } from 'react-hook-form'; import { SubmitHandler, useForm } from 'react-hook-form';
import { useDropzone } from 'react-dropzone'; import { useDropzone } from 'react-dropzone';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
@ -9,8 +9,7 @@ import { ETextVariants, Text } from '../../components/Text';
import { Button, ButtonSize, ButtonVariant } from '../../components/Button'; import { Button, ButtonSize, ButtonVariant } from '../../components/Button';
import { Divider } from '../../components/Divider'; import { Divider } from '../../components/Divider';
import { Textarea } from '../../components/Textarea'; import { Textarea } from '../../components/Textarea';
import { useCreateProcess } from '../../api/process'; import { useCreateProcess, useProcess } from '../../api/process';
import { useProcess } from '../../api/process/getProcess';
import { useSingleTimeout } from '../../hooks/useSingleTimeout'; import { useSingleTimeout } from '../../hooks/useSingleTimeout';
import { Upload } from '../../components/Upload'; import { Upload } from '../../components/Upload';
import { Attachment } from '../../components/Attachment'; import { Attachment } from '../../components/Attachment';
@ -24,7 +23,8 @@ export type FormFields = {
files: File[]; files: File[];
}; };
export const PROCESS_POLLING_MS = 500; // 3207
export const PROCESS_POLLING_MS = 2000;
export const HomePage: ReactFCC = () => { export const HomePage: ReactFCC = () => {
const { const {
@ -136,8 +136,8 @@ export const HomePage: ReactFCC = () => {
</Heading> </Heading>
<Text className={s.HomePage__text} variant={ETextVariants.BODY_M_REGULAR}> <Text className={s.HomePage__text} variant={ETextVariants.BODY_M_REGULAR}>
Позволяет оценить кредитный рейтинг компании на основе пресс-релиза с выделением в тексте меток по различным Позволяет оценить кредитный рейтинг компании на основе пресс-релиза с выделением в тексте ключевых фраз с
метрикам. использованием различных методов.
</Text> </Text>
<form className={s.HomePage__box} onSubmit={handleSubmit(onSubmit)}> <form className={s.HomePage__box} onSubmit={handleSubmit(onSubmit)}>

48
src/pages/response/ResponsePage.tsx
View File

@ -3,12 +3,11 @@ import { useNavigate } from 'react-router-dom';
import { Heading, HeadingSize } from '../../components/Heading'; import { Heading, HeadingSize } from '../../components/Heading';
import { Link } from '../../components/Link'; import { Link } from '../../components/Link';
import { getPercentageColor } from '../../utils/getPercentageColor'; import { getPercentageColor } from '../../utils/getPercentageColor';
import { EMDASH } from '../../utils/chars';
import { ModalBody, useModal, ModalContainer } from '../../components/Modal'; import { ModalBody, useModal, ModalContainer } from '../../components/Modal';
import { useIsMobile } from '../../hooks/useIsMobile'; import { useIsMobile } from '../../hooks/useIsMobile';
import { useUrlParam } from '../../hooks/useUrlParam'; import { useUrlParam } from '../../hooks/useUrlParam';
import { PathBuilder, RESPONSE_PAGE_PARAM } from '../../app/routes'; import { PathBuilder, RESPONSE_PAGE_PARAM } from '../../app/routes';
import { useProcess } from '../../api/process/getProcess'; import { useProcess } from '../../api/process';
import { TextItem } from './components'; import { TextItem } from './components';
import s from './ResponsePage.module.scss'; import s from './ResponsePage.module.scss';
@ -67,9 +66,9 @@ export const ResponsePage: FC = () => {
<tr> <tr>
<th>ID</th> <th>ID</th>
<th>Имя</th> <th>Имя</th>
<th>М. н-с.</th> <th>Нейросетевой метод</th>
<th>М. стат.</th> <th>Статистический метод</th>
<th>М. c.</th> <th>Метод схожести</th>
{/*<th>Рез.</th>*/} {/*<th>Рез.</th>*/}
<th>Крат. сод.</th> <th>Крат. сод.</th>
</tr> </tr>
@ -81,23 +80,38 @@ export const ResponsePage: FC = () => {
<td>{text.id}</td> <td>{text.id}</td>
<td>{text.file_name.length > 10 ? `${text.file_name.slice(0, 10)}...` : text.file_name}</td> <td>{text.file_name.length > 10 ? `${text.file_name.slice(0, 10)}...` : text.file_name}</td>
<td> <td>
{text.score.bert.answer} {text.score.bert.answer}{' '}
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/} {text.score.bert.metric && (
<>
| Точность{' '}
<span style={{ color: getPercentageColor(text.score.bert.metric) }}>
{text.score.bert.metric.toFixed(2)}
</span>
</>
)}
</td> </td>
<td> <td>
{text.score.f.answer} {text.score.f.answer}{' '}
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/} {text.score.f.metric && (
<>
| Точность{' '}
<span style={{ color: getPercentageColor(text.score.f.metric) }}>
{text.score.f.metric.toFixed(2)}
</span>
</>
)}
</td> </td>
<td> <td>
{text.score.nearest.answer} {text.score.nearest.answer}{' '}
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/} {text.score.nearest.metric && (
<>
| Точность{' '}
<span style={{ color: getPercentageColor(text.score.nearest.metric) }}>
{text.score.nearest.metric.toFixed(2)}
</span>
</>
)}
</td> </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}> <td className={s.ResponsePage__tableSummary}>
<Link <Link
component={'button'} component={'button'}

42
src/pages/response/components/TextItem/TextItem.tsx
View File

@ -29,23 +29,43 @@ export const TextItem: ReactFCC<TextItemProps> = (props) => {
<div className={s.TextItem__row}> <div className={s.TextItem__row}>
<Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}> <Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>
М. н-с: {text.score.bert.answer} Нейросетевой метод: {text.score.bert.answer}{' '}
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/} {text.score.bert.metric && (
</Text>{' '} <>
| Точность{' '}
<span style={{ color: getPercentageColor(text.score.bert.metric) }}>
{text.score.bert.metric.toFixed(2)}
</span>
</>
)}
</Text>
</div> </div>
<div className={s.TextItem__row}> <div className={s.TextItem__row}>
<Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}> <Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>
М. стат: {text.score.f.answer} Статистический метод: {text.score.f.answer}{' '}
{/*| <span style={{ color: getPercentageColor(0.99) }}>0.99</span>*/} {text.score.f.metric && (
</Text>{' '} <>
| Точность{' '}
<span style={{ color: getPercentageColor(text.score.f.metric) }}>{text.score.f.metric.toFixed(2)}</span>
</>
)}
</Text>
</div> </div>
{/*<div className={s.TextItem__row}>*/} <div className={s.TextItem__row}>
{/* <Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>*/} <Text component={'span'} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>
{/* М. п: AA+ | <span style={{ color: getPercentageColor(0.63) }}>0.63</span>*/} Метод схожести: {text.score.nearest.answer}{' '}
{/* </Text>{' '}*/} {text.score.nearest.metric && (
{/*</div>*/} <>
| Точность{' '}
<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)}> <div className={clsx(s.TextItem__row, s.TextItem__row_link)}>
<Text component={'span'} variant={ETextVariants.BODY_S_REGULAR}> <Text component={'span'} variant={ETextVariants.BODY_S_REGULAR}>

32
src/pages/text/TextPage.tsx
View File

@ -20,7 +20,7 @@ export type TextFields = {
type: ScoreType; type: ScoreType;
}; };
export const TEXT_REFETCH_MS = 500; export const TEXT_REFETCH_MS = 2000;
export const TextPage: FC = () => { export const TextPage: FC = () => {
const textId = useUrlParam(TEXT_PAGE_PARAM, { parser: parseInt }); const textId = useUrlParam(TEXT_PAGE_PARAM, { parser: parseInt });
@ -167,32 +167,46 @@ export const TextPage: FC = () => {
<span className={s.TextPage__underline}>нейросетевому</span> <span className={s.TextPage__underline}>нейросетевому</span>
</Tooltip>{' '} </Tooltip>{' '}
методу: {textEntity.score.bert.answer} методу: {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>
<Text component={'div'} className={s.TextPage__prop} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}> <Text component={'div'} className={s.TextPage__prop} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}>
Результат по{' '} Результат по{' '}
<Tooltip <Tooltip
className={s.TextPage__tooltip} className={s.TextPage__tooltip}
content={'Лемматизация + TF/IDF + RandomForest'} content={'Лемматизация + TF-IDF + RandomForest'}
placement={'right'}> placement={'right'}>
<span className={s.TextPage__underline}>статистическому</span> <span className={s.TextPage__underline}>статистическому</span>
</Tooltip>{' '} </Tooltip>{' '}
методу: {textEntity.score.f.answer} методу: {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>
<Text component={'div'} className={s.TextPage__prop} variant={ETextVariants.PROGRAMMING_CODE_REGULAR}> <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> <span className={s.TextPage__underline}>схожести</span>
</Tooltip> </Tooltip>
: {textEntity.score.nearest.answer} : {textEntity.score.nearest.answer}
{textEntity.score.nearest.metric && ( {textEntity.score.nearest.metric && (
<> <>
| Точность:{' '} | Точность:{' '}
<span style={{ color: getPercentageColor(textEntity.score.nearest.metric / 100) }}> <span style={{ color: getPercentageColor(textEntity.score.nearest.metric) }}>
{(textEntity.score.nearest.metric / 100).toFixed(2)} {textEntity.score.nearest.metric.toFixed(2)}
</span> </span>
</> </>
)} )}
@ -269,8 +283,8 @@ export const TextPage: FC = () => {
</p> </p>
<p> <p>
Точность{' '} Точность{' '}
<span style={{ color: getPercentageColor(activeDetailed.features[1] / 100) }}> <span style={{ color: getPercentageColor(activeDetailed.features[1]) }}>
{(activeDetailed.features[1] / 100).toFixed(2)} {activeDetailed.features[1].toFixed(2)}
</span> </span>
</p> </p>
{activeDetailed.features[2].map((text, index) => ( {activeDetailed.features[2].map((text, index) => (

2
src/pages/text/utils/getTextFromDetailed.ts
View File

@ -6,7 +6,7 @@ export const getTextFromDetailed = (detailed: DetailDescriptor[] = []) => {
detailed.forEach((item, index) => { detailed.forEach((item, index) => {
const [_, metric] = item.features; 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> `; html += `<p class="detailedText" data-index="${index}" style="background-color: ${color};">${item.text}</p> `;
}); });