API details state management looks done - next step is wrapping robof…

…low API requests

src/App.tsx

@@ -13,18 +13,27 @@ import {SizeItUpView} from './views/SizeItUpView/SizeItUpView';
 import {PlatformModel} from './staticModels/PlatformModel';
 import classNames from 'classnames';
 import NotificationsView from './views/NotificationsView/NotificationsView';
+import { RoboflowAPIDetails } from './store/ai/types';
 
 interface IProps {
  projectType: ProjectType;
  windowSize: ISize;
  isObjectDetectorLoaded: boolean;
  isPoseDetectionLoaded: boolean;
  isYOLOV5ObjectDetectorLoaded: boolean;
+ roboflowAPIDetails: RoboflowAPIDetails;
 }
 
-const App: React.FC<IProps> = ({
- projectType, windowSize, isObjectDetectorLoaded, isPoseDetectionLoaded, isYOLOV5ObjectDetectorLoaded
-}) => {
+const App: React.FC<IProps> = (
+ {
+ projectType,
+ windowSize,
+ isObjectDetectorLoaded,
+ isPoseDetectionLoaded,
+ isYOLOV5ObjectDetectorLoaded,
+ roboflowAPIDetails
+ }
+) => {
  const selectRoute = () => {
  if (!!PlatformModel.mobileDeviceData.manufacturer && !!PlatformModel.mobileDeviceData.os)
  return <MobileMainView/>;
@@ -38,7 +47,11 @@ const App: React.FC<IProps> = ({
  }
  }
  };
- const isAILoaded = isObjectDetectorLoaded || isPoseDetectionLoaded || isYOLOV5ObjectDetectorLoaded
+ const isAILoaded = isObjectDetectorLoaded
+ || isPoseDetectionLoaded
+ || isYOLOV5ObjectDetectorLoaded
+ || (roboflowAPIDetails.model !== '' && roboflowAPIDetails.key !== '')
+
  return (
  <div className={classNames('App', {'AI': isAILoaded})} draggable={false}
  >
@@ -54,7 +67,8 @@ const mapStateToProps = (state: AppState) => ({
  windowSize: state.general.windowSize,
  isSSDObjectDetectorLoaded: state.ai.isSSDObjectDetectorLoaded,
  isPoseDetectorLoaded: state.ai.isPoseDetectorLoaded,
- isYOLOV5ObjectDetectorLoaded: state.ai.isYOLOV5ObjectDetectorLoaded
+ isYOLOV5ObjectDetectorLoaded: state.ai.isYOLOV5ObjectDetectorLoaded,
+ roboflowAPIDetails: state.ai.roboflowAPIDetails
 });
 
 export default connect(

src/store/ai/reducer.ts

@@ -7,7 +7,10 @@ const initialState: AIState = {
  isSSDObjectDetectorLoaded: false,
  isYOLOV5ObjectDetectorLoaded: false,
  isPoseDetectorLoaded: false,
- roboflowAPIDetails: null,
+ roboflowAPIDetails: {
+ model: '',
+ key: ''
+ },
  isAIDisabled: false
 };
 

src/store/ai/types.ts

@@ -1,8 +1,7 @@
 import {Action} from '../Actions';
 
 export type RoboflowAPIDetails = {
- modelID: string,
- modelVersion: number,
+ model: string,
  key: string
 }
 
@@ -17,7 +16,7 @@ export type AIState = {
  isPoseDetectorLoaded: boolean;
 
  // ROBOFLOW API
- roboflowAPIDetails: RoboflowAPIDetails | null;
+ roboflowAPIDetails: RoboflowAPIDetails;
 
  // GENERAL
  suggestedLabelList: string[];

src/views/Common/StyledTextField/StyledTextField.tsx

@@ -0,0 +1,25 @@
+import { TextField } from '@mui/material';
+import { styled } from '@mui/system';
+import { Settings } from '../../../settings/Settings';
+
+
+export const StyledTextField = styled(TextField)({
+ '& .MuiInputBase-root': {
+ color: 'white',
+ },
+ '& label': {
+ color: 'white',
+ },
+ '& .MuiInput-underline:before': {
+ borderBottomColor: 'white',
+ },
+ '& .MuiInput-underline:hover:before': {
+ borderBottomColor: 'white',
+ },
+ '& label.Mui-focused': {
+ color: Settings.SECONDARY_COLOR,
+ },
+ '& .MuiInput-underline:after': {
+ borderBottomColor: Settings.SECONDARY_COLOR,
+ }
+});

src/views/PopupView/ConnectInferenceServerPopup/ConnectInferenceServerPopup.scss

@@ -0,0 +1,23 @@
+@import '../../../settings/Settings';
+
+.right-container {
+ .message {
+ align-self: stretch;
+ color: white;
+ font-size: 15px;
+ padding: 30px 40px;
+ border-bottom: solid 1px $darkThemeFirstColor;
+ }
+
+ .details {
+ align-self: stretch;
+ padding: 30px 40px;
+
+ display: flex;
+ flex-direction: column;
+ flex-wrap: nowrap;
+ justify-content: flex-start;
+ align-items: flex-start;
+ align-content: flex-start;
+ }
+}

src/views/PopupView/ConnectInferenceServerPopup/ConnectInferenceServerPopup.tsx

@@ -11,14 +11,31 @@ import { submitNewNotification } from '../../../store/notifications/actionCreato
 import { NotificationUtil } from '../../../utils/NotificationUtil';
 import { NotificationsDataMap } from '../../../data/info/NotificationsData';
 import { Notification } from '../../../data/enums/Notification';
+import './ConnectInferenceServerPopup.scss'
+import { StyledTextField } from '../../Common/StyledTextField/StyledTextField';
+import { updateRoboflowAPIDetails } from '../../../store/ai/actionCreators';
+import { AIActionTypes, RoboflowAPIDetails } from '../../../store/ai/types';
 
 interface IProps {
+ roboflowAPIDetails: RoboflowAPIDetails;
  submitNewNotificationAction: (notification: INotification) => NotificationsActionType;
+ updateRoboflowAPIDetailsAction: (roboflowAPIDetails: RoboflowAPIDetails) => AIActionTypes;
 }
 
-const ConnectInferenceServerPopup: React.FC<IProps> = ({ submitNewNotificationAction}) => {
+const ConnectInferenceServerPopup: React.FC<IProps> = (
+ {
+ roboflowAPIDetails,
+ submitNewNotificationAction,
+ updateRoboflowAPIDetailsAction
+ }
+) => {
+ // general
  const [currentServerType, setCurrentServerType] = useState(InferenceServerType.ROBOFLOW);
 
+ // roboflow
+ const [roboflowModel, setRoboflowModel] = useState(roboflowAPIDetails.model);
+ const [roboflowKey, setRoboflowKey] = useState(roboflowAPIDetails.key);
+
  const wrapServerOnClick = (newServerType: InferenceServerType) => {
  return () => {
  if (!InferenceServerDataMap[newServerType].isDisabled) {
@@ -31,18 +48,79 @@ const ConnectInferenceServerPopup: React.FC<IProps> = ({ submitNewNotificationAc
  }
  }
 
+ const disableAcceptButton = () => {
+ switch(currentServerType) {
+ case InferenceServerType.ROBOFLOW:
+ return roboflowModel === '' || roboflowKey === ''
+ default:
+ return true;
+ }
+ }
+
  const onAccept = () => {
+ if (disableAcceptButton()) {
+ return;
+ }
+ updateRoboflowAPIDetailsAction({
+ model: roboflowModel,
+ key: roboflowKey
+ })
  PopupActions.close();
  };
 
  const onReject = () => {
  PopupActions.close();
  };
 
- const renderContent = () => {
- return <div className='load-model-popup-content'>
- null
- </div>
+ const roboflowModelOnChangeCallback = (event: React.ChangeEvent<HTMLInputElement>) => {
+ setRoboflowModel(event.target.value)
+ }
+
+ const roboflowKeyOnChangeCallback = (event: React.ChangeEvent<HTMLInputElement>) => {
+ setRoboflowKey(event.target.value)
+ }
+
+ const renderContent = (): JSX.Element => {
+ if (currentServerType === InferenceServerType.ROBOFLOW) {
+ return <>
+ <div className='message'>
+ Provide details of the Roboflow model you want to run over tha API, as well as your API key.
+ </div>
+ <div className='details'>
+ <StyledTextField
+ variant='standard'
+ id={'key'}
+ autoComplete={'off'}
+ autoFocus={true}
+ type={'text'}
+ margin={'dense'}
+ label={'roboflow model'}
+ value={roboflowModel}
+ onChange={roboflowModelOnChangeCallback}
+ style={{ width: 280 }}
+ InputLabelProps={{
+ shrink: true,
+ }}
+ />
+ <StyledTextField
+ variant='standard'
+ id={'key'}
+ autoComplete={'off'}
+ autoFocus={true}
+ type={'password'}
+ margin={'dense'}
+ label={'roboflow api key'}
+ value={roboflowKey}
+ onChange={roboflowKeyOnChangeCallback}
+ style={{ width: 280 }}
+ InputLabelProps={{
+ shrink: true,
+ }}
+ />
+ </div>
+ </>;
+ }
+ return <div className='load-model-popup-content'/>
  };
 
  const renderSideMenuContent = (): JSX.Element[] => {
@@ -66,17 +144,21 @@ const ConnectInferenceServerPopup: React.FC<IProps> = ({ submitNewNotificationAc
  renderSideMenuContent={renderSideMenuContent}
  acceptLabel={'Connect'}
  onAccept={onAccept}
+ disableAcceptButton={disableAcceptButton()}
  rejectLabel={'Back'}
  onReject={onReject}
  />
  );
 }
 
 const mapDispatchToProps = {
- submitNewNotificationAction: submitNewNotification
+ submitNewNotificationAction: submitNewNotification,
+ updateRoboflowAPIDetailsAction: updateRoboflowAPIDetails
 };
 
-const mapStateToProps = (state: AppState) => ({});
+const mapStateToProps = (state: AppState) => ({
+ roboflowAPIDetails: state.ai.roboflowAPIDetails
+});
 
 export default connect(
  mapStateToProps,

src/views/PopupView/GenericSideMenuPopup/GenericSideMenuPopup.tsx

@@ -1,13 +1,12 @@
 import React from 'react';
 import './GenericSideMenuPopup.scss'
 import { GenericYesNoPopup } from '../GenericYesNoPopup/GenericYesNoPopup';
-import { jsx } from '@emotion/react';
-import JSX = jsx.JSX;
 
 interface IProps {
  title: string;
  acceptLabel: string;
  onAccept: () => void;
+ disableAcceptButton?: boolean;
  rejectLabel: string;
  onReject: () => void;
  renderContent: () => JSX.Element;
@@ -19,6 +18,7 @@ export const GenericSideMenuPopup: React.FC<IProps> = (
  title,
  acceptLabel,
  onAccept,
+ disableAcceptButton,
  rejectLabel,
  onReject,
  renderContent,
@@ -42,6 +42,7 @@ export const GenericSideMenuPopup: React.FC<IProps> = (
  title={title}
  renderContent={renderPopupContent}
  acceptLabel={acceptLabel}
+ disableAcceptButton={disableAcceptButton}
  onAccept={onAccept}
  rejectLabel={rejectLabel}
  onReject={onReject}

src/views/PopupView/InsertLabelNamesPopup/InsertLabelNamesPopup.tsx

@@ -21,30 +21,7 @@ import { INotification } from '../../../store/notifications/types';
 import { NotificationUtil } from '../../../utils/NotificationUtil';
 import { NotificationsDataMap } from '../../../data/info/NotificationsData';
 import { Notification } from '../../../data/enums/Notification';
-
-import { TextField } from '@mui/material';
-import { styled } from '@mui/system';
-
-const StyledTextField = styled(TextField)({
- '& .MuiInputBase-root': {
- color: 'white',
- },
- '& label': {
- color: 'white',
- },
- '& .MuiInput-underline:before': {
- borderBottomColor: 'white',
- },
- '& .MuiInput-underline:hover:before': {
- borderBottomColor: 'white',
- },
- '& label.Mui-focused': {
- color: Settings.SECONDARY_COLOR,
- },
- '& .MuiInput-underline:after': {
- borderBottomColor: Settings.SECONDARY_COLOR,
- }
-});
+import { StyledTextField } from '../../Common/StyledTextField/StyledTextField';
 
 interface IProps {
  updateActivePopupTypeAction: (activePopupType: PopupWindowType) => any;