Communication with API Backend

Role in the Project

Handles data exchange between the frontend and backend services to ensure real-time updates and efficient processing.

Strengths & Weaknesses

Strengths:

• GraphQL enables fetching only required data, reducing bandwidth.
• WebSockets allow real-time updates for AI detection results.

Weaknesses:

• Managing subscriptions in GraphQL requires additional setup.
• WebSockets need proper scaling strategies.

Available Technologies & Comparison

• Apollo Client (Chosen) vs. SWR (Good caching but limited for complex GraphQL queries).
• WebSockets (Chosen for real-time) vs. Polling (Increases server load).

Chosen Approach

• Apollo Client for GraphQL queries with caching mechanisms.
• WebSockets for live AI detection updates, ensuring instant feedback to users.

Example of GraphQL query with Apollo Client:

import { useQuery, gql } from '@apollo/client';
const GET_OBJECTS = gql`
  query GetObjects {
    detectedObjects {
      label
      confidence
    }
  }
`;
const { data, loading } = useQuery(GET_OBJECTS);

This frontend architecture ensures scalability, performance, and an optimized user experience for interacting with AI-powered vision processing.