https://github.com/thatlinuxguyyouknow/object-detection-frontend
Front End for an Object Detection Project, built with Next.js
https://github.com/thatlinuxguyyouknow/object-detection-frontend
nextjs reactjs
Last synced: 3 months ago
JSON representation
Front End for an Object Detection Project, built with Next.js
- Host: GitHub
- URL: https://github.com/thatlinuxguyyouknow/object-detection-frontend
- Owner: ThatLinuxGuyYouKnow
- Created: 2025-01-08T20:01:57.000Z (over 1 year ago)
- Default Branch: main
- Last Pushed: 2025-01-15T23:59:01.000Z (over 1 year ago)
- Last Synced: 2025-01-29T12:15:54.793Z (over 1 year ago)
- Topics: nextjs, reactjs
- Language: TypeScript
- Homepage: https://object-detection-pearl.vercel.app
- Size: 764 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Object Detection(and image analysis) Frontend
An interface for uploading and analyzing images using different processing modes.
## First, a sample
## Features
- Clean, modern UI built with shadcn/ui components
- Three processing modes:
- General object detection with visual results
- AI-powered scene analysis
- Detailed report generation
- Real-time processing status feedback
- Error handling with user-friendly messages
- Responsive design with Tailwind CSS
- Type-safe implementation with TypeScript
## Getting Started
1. Install dependencies:
```bash
npm install --force
# or
yarn install
```
2. Configure the backend URL in `logic/imageProcessing.ts` (currently set to `http://127.0.0.1:5000`)
3. Start the development server:
```bash
npm run dev
# or
yarn dev
```
### Image Processing Functions
Located in `logic/imageProcessing.ts`:
- `analyzeImage`: Get AI analysis of the image
- `generateImageReport`: Generate detailed scene report
- `detectObjects`: Perform object detection with bounding boxes
## API Integration
The frontend interacts with three backend endpoints:
### 1. Object Detection
```typescript
POST /detect
Content-Type: multipart/form-data
Body: FormData with 'image' field
Response: Blob (processed image)
```
### 2. Analysis
```typescript
POST /analyse
Content-Type: multipart/form-data
Body: FormData with 'file' field
Response: { data: { analysis: string } }
```
### 3. Report Generation
```typescript
POST /report
Content-Type: multipart/form-data
Body: FormData with 'file' field
Response: { data: { report: string } }
```
## UI Components
The application uses the following shadcn/ui components:
- Button
- Input
- Card (with CardHeader, CardContent, CardTitle)
- Custom styling with Tailwind CSS
### Prerequisites
- Node.js 16+
- npm or yarn
- Backend service running (see backend README)
## License
MIT License