add linting.yml, run format all

Author: Nigma-Ks

frontend/src/App.tsx

@@ -1,4 +1,4 @@
-import ComparisonForm from "./components/ComparisonForm";
+import ComparisonForm from './components/ComparisonForm';
 
 function App() {
   return (

frontend/src/components/ComparisonForm.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { Form, Button, Input, Typography, message } from "antd";
-import UploadModel from "./components/UploadModel";
-import MethodsSelection from "./components/MethodsSelection";
+import React, { useState } from 'react';
+import { Form, Button, Input, Typography, message } from 'antd';
+import UploadModel from './components/UploadModel';
+import MethodsSelection from './components/MethodsSelection';
 
 const { Title } = Typography;
 
@@ -16,37 +16,37 @@ const ComparisonForm: React.FC = () => {
 
   const onFinish = async (values: FieldType) => {
     if (!file) {
-      message.error("Please upload a model file first.");
+      message.error('Please upload a model file first.');
       return;
     }
     if (methods.length === 0) {
-      message.error("Please select at least one method.");
+      message.error('Please select at least one method.');
       return;
     }
 
     const formData = new FormData();
-    formData.append("file", file);
-    formData.append("experiment", values.experiment);
-    formData.append("email", values.email);
-    formData.append("methods", JSON.stringify(methods));
+    formData.append('file', file);
+    formData.append('experiment', values.experiment);
+    formData.append('email', values.email);
+    formData.append('methods', JSON.stringify(methods));
 
     try {
-      const res = await fetch("http://localhost:8000/api/upload", {
-        method: "POST",
+      const res = await fetch('http://localhost:8000/api/upload', {
+        method: 'POST',
         body: formData,
       });
-      if (!res.ok) throw new Error("Upload failed");
+      if (!res.ok) throw new Error('Upload failed');
       const data = await res.json();
       message.success(data.message);
       console.log(data);
     } catch (err) {
       console.error(err);
-      message.error("Submission failed");
+      message.error('Submission failed');
     }
   };
 
   const onFinishFailed = (errorInfo) => {
-    console.log("Failed:", errorInfo);
+    console.log('Failed:', errorInfo);
   };
 
   return (
@@ -57,32 +57,32 @@ const ComparisonForm: React.FC = () => {
       onFinishFailed={onFinishFailed}
       autoComplete="off"
     >
-      <Title level={2} style={{ textAlign: "center" }}>
+      <Title level={2} style={{ textAlign: 'center' }}>
         Comparison of the model with the baseline
       </Title>
 
       <Form.Item
         label="Your experiment name"
         name="experiment"
-        rules={[{ required: true, message: "Enter experiment name" }]}
+        rules={[{ required: true, message: 'Enter experiment name' }]}
       >
         <Input />
       </Form.Item>
 
-      <Form.Item label={null} style={{ textAlign: "center" }}>
+      <Form.Item label={null} style={{ textAlign: 'center' }}>
         <UploadModel onFileChange={(f) => setFile(f?.originFileObj || null)} />
       </Form.Item>
 
-      <Form.Item label={null} style={{ textAlign: "center" }}>
+      <Form.Item label={null} style={{ textAlign: 'center' }}>
         <MethodsSelection onChange={setMethods} />
       </Form.Item>
 
       <Form.Item
         label="Email"
         name="email"
         rules={[
-          { required: true, message: "Enter email address" },
-          { type: "email", message: "Enter a valid email address" },
+          { required: true, message: 'Enter email address' },
+          { type: 'email', message: 'Enter a valid email address' },
         ]}
       >
         <Input />

frontend/src/components/components/MethodsSelection.tsx

@@ -1,6 +1,6 @@
-import React, { useState } from "react";
-import { TreeSelect } from "antd";
-import { METHODS } from "./Methods";
+import React, { useState } from 'react';
+import { TreeSelect } from 'antd';
+import { METHODS } from './Methods';
 
 const { SHOW_PARENT } = TreeSelect;
 
@@ -24,7 +24,7 @@ const MethodsSelection: React.FC<MethodsSelectionProps> = ({ onChange }) => {
       treeCheckable
       showCheckedStrategy={SHOW_PARENT}
       placeholder="Please select methods"
-      style={{ width: "100%" }}
+      style={{ width: '100%' }}
       maxTagCount={2}
       maxTagPlaceholder={(omittedValues) => `+${omittedValues.length} selected`}
     />

frontend/src/components/components/UploadModel.tsx

@@ -1,7 +1,7 @@
-import React, { useState } from "react";
-import { InboxOutlined } from "@ant-design/icons";
-import type { UploadProps, UploadFile } from "antd";
-import { message, Upload } from "antd";
+import React, { useState } from 'react';
+import { InboxOutlined } from '@ant-design/icons';
+import type { UploadProps, UploadFile } from 'antd';
+import { message, Upload } from 'antd';
 
 const { Dragger } = Upload;
 
@@ -13,29 +13,29 @@ const UploadModel: React.FC<UploadModelProps> = ({ onFileChange }) => {
   const [fileList, setFileList] = useState<UploadFile[]>([]);
 
   const props: UploadProps = {
-    name: "file",
-    accept: ".onnx",
+    name: 'file',
+    accept: '.onnx',
     multiple: false,
     fileList,
     onChange(info) {
       const newFileList = info.fileList.slice(-1);
       setFileList(newFileList);
       onFileChange(newFileList[0] || null);
       const { status } = info.file;
-      if (status !== "uploading") {
+      if (status !== 'uploading') {
         console.log(info.file, info.fileList);
       }
     },
     onDrop(e) {
-      console.log("Dropped files", e.dataTransfer.files);
+      console.log('Dropped files', e.dataTransfer.files);
     },
     beforeUpload(file) {
       if (fileList.length >= 1) {
-        message.warning("You can only upload one file.");
+        message.warning('You can only upload one file.');
         return Upload.LIST_IGNORE;
       }
-      if (file.name.split(".").pop()?.toLowerCase() !== "onnx") {
-        message.error("Only .onnx files are allowed!");
+      if (file.name.split('.').pop()?.toLowerCase() !== 'onnx') {
+        message.error('Only .onnx files are allowed!');
         return Upload.LIST_IGNORE;
       }
       return false;

frontend/src/index.css

@@ -1,4 +1,4 @@
-@import "tailwindcss";
+@import 'tailwindcss';
 :root {
   font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;

frontend/src/main.tsx

@@ -1,5 +1,5 @@
-import { createRoot } from "react-dom/client";
-import "./index.css";
-import App from "./App.tsx";
+import { createRoot } from 'react-dom/client';
+import './index.css';
+import App from './App.tsx';
 
-createRoot(document.getElementById("root")!).render(<App />);
+createRoot(document.getElementById('root')!).render(<App />);

frontend/tsconfig.json

@@ -1,7 +1,4 @@
 {
   "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
+  "references": [{ "path": "./tsconfig.app.json" }, { "path": "./tsconfig.node.json" }]
 }

frontend/vite.config.ts

@@ -1,5 +1,5 @@
-import { defineConfig } from "vite";
-import tailwindcss from "@tailwindcss/vite";
+import { defineConfig } from 'vite';
+import tailwindcss from '@tailwindcss/vite';
 
 export default defineConfig({
   plugins: [tailwindcss()],