This project is a sleek and user-friendly web application built with React/Nextjs. It utilizes the cutting-edge capabilities of OpenAI's GPT-4 Vision API to analyze images and provide detailed descriptions of their content. With a simple drag-and-drop or file upload interface, users can quickly get insights into their images.
- Drag and drop or click to upload an image
- Real-time image preview
- Secure API interaction with OpenAI's GPT-4 Vision API
- Responsive and intuitive UI
- Progress bar for upload status
- Display of analysis results in a readable format
To run this project locally, follow these steps:
- Clone the repository:
git clone https://github.com/admineral/GPT4-Vision-React-Starter.git
- Navigate to the project directory:
cd GPT4-Vision-React-Starter
- Install the dependencies:
npm install
or if you're using yarn:
yarn install
- Create a
.env
file in the root directory and add your OpenAI API key:
OPENAI_API_KEY=your_openai_api_key_here
- Start the development server:
npm start
or
npm run dev
or with yarn:
yarn start
The application should now be running on http://localhost:3000.
To analyze an image:
- Drag and drop an image into the designated area or click the area to select an image from your device.
- The image will be displayed as a preview.
- Click the "Analyze Image" button to send the image for analysis.
- View the analysis results below the upload area.
- OpenAI GPT-4 Vision API - Image analysis API