LoLGPT - AI-Powered Web Application

A complete, modern React web application featuring AI-powered chat, image generation, PDF analysis, and voice processing capabilities.

🚀 Features

💬 Chat Module

• GPT-style AI chat with streaming responses
• Markdown support for code blocks, lists, and tables
• Save conversation history in IndexedDB
• Export chat to TXT files
• Chat history sidebar

🎨 Image Module

• Text-to-image generation via OpenAI DALL·E
• Preview images in responsive grid
• Download generated images
• Favorite/bookmark system
• Save images in IndexedDB

📄 PDF Module

• Upload and process PDF files
• Extract text using pdf.js
• AI-powered document summarization
• PDF viewer with pagination
• Export summaries to TXT

🎤 Voice Module

• Speech-to-text transcription
• Text-to-speech generation
• Live microphone recording
• Audio playback controls
• Save recordings in IndexedDB

🛠️ Tech Stack

• React 19 - UI framework
• React Router - Navigation
• TailwindCSS - Styling
• IndexedDB (idb) - Local data persistence
• pdf.js - PDF processing
• React Markdown - Markdown rendering
• Lucide React - Icons
• Vite - Build tool

📦 Installation

1. Clone the repository
2. Navigate to the ai directory
3. Install dependencies:

```bash npm install ```

4. (Optional) Add your OpenAI API key:

   • Copy .env.example to .env
   • Add your API key: VITE_OPENAI_API_KEY=your_key_here

5. Start the development server:

```bash npm run dev ```

6. Open your browser to http://localhost:5173

🎯 Usage

Without API Key

The app works immediately with simulated responses for testing. All features are functional with placeholder data.

With API Key

1. Get your API key from OpenAI Platform
2. Add it to .env file
3. Restart the dev server
4. Enjoy real AI-powered features!

🌓 Dark Mode

Toggle between light and dark themes using the button in the navbar. Theme preference is saved in localStorage.

💾 Data Storage

All data is stored locally:

• LocalStorage: Theme preferences, settings
• IndexedDB: Chat history, generated images, PDF summaries, voice recordings

🏗️ Project Structure

``` ai/ ├── src/ │ ├── api/ │ │ └── openai.js # OpenAI API integration │ ├── components/ │ │ ├── Button.jsx # Reusable button │ │ ├── Loader.jsx # Loading spinner │ │ ├── Modal.jsx # Modal dialog │ │ └── Navbar.jsx # Navigation bar │ ├── context/ │ │ └── UserContext.jsx # Global state management │ ├── modules/ │ │ ├── Chat/ │ │ │ ├── ChatModule.jsx │ │ │ └── ChatMessage.jsx │ │ ├── Image/ │ │ │ ├── ImageModule.jsx │ │ │ └── ImagePreview.jsx │ │ ├── PDF/ │ │ │ ├── PDFModule.jsx │ │ │ └── PDFViewer.jsx │ │ └── Voice/ │ │ ├── VoiceModule.jsx │ │ └── VoicePlayer.jsx │ ├── pages/ │ │ ├── Home.jsx # Landing page │ │ └── Dashboard.jsx # Main app dashboard │ ├── utils/ │ │ ├── storage.js # IndexedDB helpers │ │ └── pdfUtils.js # PDF processing │ ├── App.jsx # Main app component │ ├── main.jsx # Entry point │ └── styles.css # Global styles ├── index.html ├── package.json ├── tailwind.config.js ├── postcss.config.js └── vite.config.js ```

🔧 Available Scripts

• npm run dev - Start development server
• npm run build - Build for production
• npm run preview - Preview production build
• npm run lint - Run ESLint

🌟 Key Features

• ✅ 100% Frontend-first (no backend required)
• ✅ Dark/Light mode with persistence
• ✅ Responsive design (mobile, tablet, desktop)
• ✅ Local data storage (IndexedDB + LocalStorage)
• ✅ Export functionality (TXT, images, audio)
• ✅ Modular architecture
• ✅ Modern UI with TailwindCSS
• ✅ Accessibility support

📝 License

MIT

🤝 Contributing

Contributions are welcome! Feel free to open issues or submit pull requests.

🙏 Acknowledgments

• OpenAI for AI APIs
• Mozilla for pdf.js
• The React and Vite teams
• TailwindCSS team