sjehan / gpt4-vision-react-starter

Early Alpha Release: Chat with Your Image - Leveraging GPT-4 Vision and Function Calls for AI-Powered Image Analysis and Description

OpenAI GPT-4 Vision API Image Analyzer

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.

Features

• 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

Getting Started

To run this project locally, follow these steps:

Installation

1. Clone the repository:

git clone https://github.com/admineral/GPT4-Vision-React-Starter.git

2. Navigate to the project directory:

cd GPT4-Vision-React-Starter

3. Install the dependencies:

npm install

or if you're using yarn:

yarn install

4. Create a .env file in the root directory and add your OpenAI API key:

OPENAI_API_KEY=your_openai_api_key_here

5. 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.

Usage

To analyze an image:

1. Drag and drop an image into the designated area or click the area to select an image from your device.
2. The image will be displayed as a preview.
3. Click the "Analyze Image" button to send the image for analysis.
4. View the analysis results below the upload area.

Built With

• OpenAI GPT-4 Vision API - Image analysis API