🚀 ThinkAI: Your AI-Powered Question-Answering System

ThinkAI is an intelligent question-answering system powered by OpenAI's GPT-3.5 model. Users can ask questions, and the AI responds with accurate and relevant answers in real time. This web application leverages React.js for the frontend and FastAPI with the OpenAI API for the backend.

✨ Features

Real-time Question-Answering

• Ask any question, and get instant, relevant answers powered by GPT-3.5
• Interactive user interface for seamless interaction
• Instantaneous responses for any query

User Interface

• Simple and user-friendly design
• Responsive layout optimized for desktops, tablets, and mobile devices
• Real-time updates of user questions and AI responses

🛠️ Tech Stack

Backend

• FastAPI
• OpenAI GPT-3.5 API
• Python 3.8+
• CORS enabled for cross-origin requests

Frontend

• React.js
• React Router for navigation
• Context API for state management

💻 Components Structure

Frontend Components

- App.js            // Main React component
- App.css           // Styles for the frontend

Backend Components

- main.py          // FastAPI backend entry point

🚀 Local Development Setup

Backend Setup

1. Clone the repository

git clone https://github.com/yourusername/thinkai.git
cd thinkai

2. Create a virtual environment

python -m venv venv
source venv/bin/activate  # For Windows: venv\Scripts\activate

3. Install dependencies

pip install -r requirements.txt

4. Set up environment variables (.env)

OPENAI_API_KEY=your-openai-api-key-here

5. Run the backend server

uvicorn main:app --reload

Frontend Setup

1. Navigate to the frontend directory

cd frontend

2. Install dependencies

npm install

3. Set up environment variables (.env)

REACT_APP_API_URL=http://localhost:8000

4. Start the frontend server

npm start

📡 API Endpoints

Question-Answering

POST /ask             - Send a question to the AI for an answer

🔄 Example Usage

// Example of sending a question from the frontend
const response = await fetch(${process.env.REACT_APP_API_URL}/ask, {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({ question: 'What is React.js?' })
});
const data = await response.json();
console.log(data.answer); // Logs the AI-generated answer

🚀 Deployment

Backend Deployment

1. Create a new Web Service on Render or your preferred platform
2. Set the environment variable for OpenAI API key
3. Deploy the backend service with FastAPI and Uvicorn

Frontend Deployment

1. Deploy the frontend on platforms like Render, Netlify, or Vercel
2. Connect the deployed frontend to the backend API

🔐 Security Features

• Environment variables for API keys
• Cross-origin resource sharing (CORS) protection

🐛 Troubleshooting

Common issues and solutions:

• API errors: Verify your OpenAI API key and network connection
• CORS issues: Ensure your frontend URL is allowed in the backend CORS settings

📱 Responsive Design

The application is fully responsive and tested on:

• Desktop (1200px+)
• Tablet (768px - 1199px)
• Mobile (320px - 767px)

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Commit your changes
4. Push your branch
5. Create a Pull Request

📄 License

This project is licensed under the MIT License.

Made with ❤️ by Vislavath Pavani