Spaces:
Running
Running
| title: Panno-AI-API | |
| emoji: 📸 | |
| colorFrom: blue | |
| colorTo: indigo | |
| sdk: docker | |
| pinned: false | |
| # PannoAI - AI-Powered 3D Panorama Generator | |
| PannoAI is a cutting-edge web application that transforms standard indoor photos into immersive 360° panoramas using Google's Gemini 2.x Multimodal AI. Designed for real estate, interior design, and digital twins, it provides a seamless experience from image upload to interactive 3D exploration. | |
| ## 🚀 Features | |
| - **AI-Driven Scene Analysis**: Leverages `gemini-2.5-flash-image` to analyze uploaded photos and identify flooring, lighting, layout, and architectural styles. | |
| - **Immersive 3D Viewer**: Built with Three.js and React Three Fiber, featuring smooth orbit controls, auto-rotation, and responsive design. | |
| - **Intelligent Fallback System**: Implements a robust API key rotation mechanism to bypass quota limits and ensuring high availability. | |
| - **Premium Aesthetics**: A modern, glassmorphic UI built with Next.js 15, Tailwind CSS, and Framer Motion. | |
| - **Offline Reliability**: Integrated stable fallback textures and local storage history for a consistent user experience. | |
| ## 🛠️ Tech Stack | |
| - **Framework**: [Next.js 15 (App Router)](https://nextjs.org/) | |
| - **3D Engine**: [Three.js](https://threejs.org/) with [@react-three/fiber](https://github.com/pmndrs/react-three-fiber) | |
| - **AI Integration**: [Google Gemini API](https://ai.google.dev/) | |
| - **Styling**: [Tailwind CSS](https://tailwindcss.com/) | |
| - **Animations**: [Framer Motion](https://www.framer.com/motion/) | |
| - **Icons**: [Lucide React](https://lucide.dev/) | |
| ## 📦 Getting Started | |
| ### Prerequisites | |
| - Node.js 18.x or later | |
| - A Google AI (Gemini) API Key | |
| ### Installation | |
| 1. **Clone the repository**: | |
| ```bash | |
| git clone https://github.com/NZLouislu/panno-ai.git | |
| cd panno-ai | |
| ``` | |
| 2. **Install dependencies**: | |
| ```bash | |
| npm install | |
| ``` | |
| 3. **Configure environment variables**: | |
| Create a `.env` file in the root directory: | |
| ```env | |
| Gemini_API=your_primary_api_key | |
| # Optional: Add multiple keys for rotation | |
| AULouis_Gemini_API=your_backup_key | |
| Blog_Gemini_API=your_backup_key | |
| Tasky_Gemini_API=your_backup_key | |
| ``` | |
| 4. **Run the development server**: | |
| ```bash | |
| npm run dev | |
| ``` | |
| 5. Open [http://localhost:3000](http://localhost:3000) in your browser. | |
| ## 📖 Usage | |
| 1. **Upload**: Click the upload area or drag and drop indoor photos of a room. | |
| 2. **Generate**: Click "Create 360° Panorama". PannoAI will analyze the images and map them to a high-quality 360° scene. | |
| 3. **Explore**: Use your mouse or touch to look around the generated 3D room. | |
| 4. **History**: Your previous creations are saved and can be accessed from the "Your Gallery" section. | |
| ## 📄 License | |
| This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details. | |