change place of the import/export buttons

src/frontend/package.json

@@ -53,5 +53,6 @@
             "last 1 firefox version",
             "last 1 safari version"
         ]
-    }
+    },
+    "proxy":"http://localhost:7860"
 }

src/frontend/src/controllers/NodesServices/index.ts

@@ -4,10 +4,10 @@ import axios, { AxiosResponse } from "axios";
 const backendUrl = process.env.BACKEND || "http://localhost:5003";
 
 export async function getAll():Promise<AxiosResponse<APIObjectType>> {
-    return await axios.get(`${backendUrl}/all`);
+    return await axios.get(`/all`);
 }
 
 export async function sendAll(data:sendAllProps) {
     console.log(data);
-    return await axios.post(`${backendUrl}/predict`, data);
+    return await axios.post(`/predict`, data);
 }

src/frontend/src/pages/FlowPage/components/tabsManagerComponent/index.tsx

@@ -4,17 +4,24 @@ import TabComponent from "../tabComponent";
 import { TabsContext } from "../../../../contexts/tabsContext";
 import FlowPage from "../..";
 import { darkContext } from "../../../../contexts/darkContext";
-import { BellIcon, MoonIcon, SunIcon } from "@heroicons/react/24/outline";
+import {
+	ArrowDownTrayIcon,
+	ArrowUpTrayIcon,
+	BellIcon,
+	MoonIcon,
+	SunIcon,
+} from "@heroicons/react/24/outline";
 import { PopUpContext } from "../../../../contexts/popUpContext";
 import AlertDropdown from "../../../../alerts/alertDropDown";
 import { alertContext } from "../../../../contexts/alertContext";
 
 export default function TabsManagerComponent() {
-	const { flows, addFlow, tabIndex, setTabIndex } = useContext(TabsContext);
+	const { flows, addFlow, tabIndex, setTabIndex, uploadFlow, downloadFlow } = useContext(TabsContext);
 	const { openPopUp } = useContext(PopUpContext);
-	const AlertWidth = 256
+	const AlertWidth = 256;
 	const { dark, setDark } = useContext(darkContext);
-	const {notificationCenter, setNotificationCenter} = useContext(alertContext)
+	const { notificationCenter, setNotificationCenter } =
+		useContext(alertContext);
 	useEffect(() => {
 		//create the first flow
 		if (flows.length === 0) {
@@ -43,6 +50,12 @@ export default function TabsManagerComponent() {
 					flow={null}
 				/>
 				<div className="ml-auto mr-2 flex gap-3">
+					<button onClick={() => uploadFlow()} className="flex items-center gap-1 text-gray-400 hover:text-gray-500">
+						Import <ArrowUpTrayIcon className="w-5 h-5" />
+					</button>
+					<button onClick={() => downloadFlow()} className="flex items-center gap-1 text-gray-400 hover:text-gray-500">
+						Export <ArrowDownTrayIcon className="h-5 w-5" />
+					</button>
 					<button
 						className="text-gray-400 hover:text-gray-500 "
 						onClick={() => {
@@ -58,13 +71,23 @@ export default function TabsManagerComponent() {
 					<button
 						className="text-gray-400 hover:text-gray-500 relative"
 						onClick={(event: React.MouseEvent<HTMLElement>) => {
-							setNotificationCenter(false)
+							setNotificationCenter(false);
-							const top = (event.target as Element).getBoundingClientRect().top
+							const top = (event.target as Element).getBoundingClientRect().top;
-							const left = (event.target as Element).getBoundingClientRect().left
+							const left = (event.target as Element).getBoundingClientRect()
-							openPopUp(<div className="z-10 absolute" style={{top:top+20, left:left-AlertWidth}}><AlertDropdown/></div>)
+								.left;
+							openPopUp(
+								<div
+									className="z-10 absolute"
+									style={{ top: top + 20, left: left - AlertWidth }}
+								>
+									<AlertDropdown />
+								</div>
+							);
 						}}
 					>
-						{notificationCenter&&<div className='absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]'></div>}
+						{notificationCenter && (
+							<div className="absolute w-1.5 h-1.5 rounded-full bg-red-600 right-[3px]"></div>
+						)}
 						<BellIcon className="h-5 w-5" aria-hidden="true" />
 					</button>
 				</div>

src/frontend/src/pages/FlowPage/index.tsx

@@ -182,17 +182,6 @@ export default function FlowPage({ flow }:{flow:FlowType}) {
 					>
 						<Background className="dark:bg-gray-900"/>
 						<Controls className="[&>button]:text-black  [&>button]:dark:bg-gray-800 hover:[&>button]:dark:bg-gray-700 [&>button]:dark:text-gray-400 [&>button]:dark:fill-gray-400 [&>button]:dark:border-gray-600">
-							<ControlButton
-								onClick={() => uploadFlow()}
-							>
-								<ArrowUpTrayIcon />
-							</ControlButton>
-
-							<ControlButton
-								onClick={() => downloadFlow()}
-							>
-								<ArrowDownTrayIcon />
-							</ControlButton>
 						</Controls>
 					</ReactFlow>
 					<Chat flow={flow} reactFlowInstance={reactFlowInstance} />