Skip to content

Commit 8a70651

Browse files
author
Developer
committed
Basic setup
1 parent c377416 commit 8a70651

File tree

1 file changed

+0
-0
lines changed

1 file changed

+0
-0
lines changed

‎README.md‎

-16.1 KB

Snap2Slides

Convert images to presentation slides using AI.

Setup

\\�ash npm install npm run dev \\

Usage

  1. Upload an image
  2. Wait for AI processing
  3. Download generated slides
https://img.shields.io/badge/Next.js-14.2.33-black?style=for-the-badge&logo=next.js)](https://nextjs.org/ https://img.shields.io/badge/TypeScript-5.0-blue?style=for-the-badge&logo=typescript)](https://www.typescriptlang.org/ https://img.shields.io/badge/Google_AI-Gemini-4285F4?style=for-the-badge&logo=google)](https://ai.google.dev/ https://img.shields.io/badge/Deploy-Vercel-000000?style=for-the-badge&logo=vercel)](https://vercel.com/ https://snap2slides-pro.vercel.app ## 💡 **The Story Behind Snap2Slides** > *What started as a simple weekend project to help students create presentations quickly has evolved into a professional AI-powered platform that's changing how people approach presentation creation.* ### 🎬 **The Problem** Ever spent hours staring at a blank slide, wondering how to turn your research images, charts, or screenshots into a compelling presentation? **We've all been there.** ### 💫 **The Solution** Drop any image → AI analyzes it → Professional slides ready in seconds. **That simple.** ### 🏆 **The Evolution** ```mermaid graph LR A[Basic File Upload] --> B[AI Integration] B --> C[Mobile Optimization] C --> D[Cross-Device Support] D --> E[Production Platform] style E fill:#ff6b6b,stroke:#fff,stroke-width:3px,color:#fff ``` ## ⚡ **Experience the Magic** | Step | Action | Magic Happens | |------|--------|---------------| | **1️⃣ Drop** | Drag your image/screenshot | AI instantly recognizes content type | | **2️⃣ Wait** | Watch the progress bar | Gemini AI analyzes & structures content | | **3️⃣ Download** | Get your professional slides | Ready for meetings, classes, or presentations |
🤖 What Our AI Actually Sees (Click to expand) When you upload an image, our AI doesn't just see pixels. It sees: - **📊 Charts & Data**: Extracts key insights and trends - **📝 Text Content**: Reads and summarizes important information - **🏗️ Structure**: Identifies hierarchies and relationships - **🎨 Design Elements**: Understands visual layout and composition - **💡 Context**: Comprehends the broader meaning and purpose
## 🔥 **Features That Make Us Different**
### 🧠 **AI-Powered Intelligence** - **Advanced Vision**: Google Gemini AI analyzes content semantically - **Smart Structuring**: Automatically organizes information logically - **Context Understanding**: Knows the difference between a chart and a meme - **Content Suggestions**: Proposes relevant slide titles and layouts ### 🚀 **Production Ready** - **Mobile First**: Works flawlessly on any device - **Lightning Fast**: Optimized for speed and performance - **Enterprise Grade**: Built with TypeScript and modern architecture - **Cross-Platform**: Desktop, tablet, mobile - anywhere you work
### 🎯 **Core Capabilities** ```diff + ✅ Drag & Drop Interface (with touch support) + ✅ Real-time Progress Tracking + ✅ Professional PowerPoint Export + ✅ Mobile Cross-Device Testing + ✅ CORS-Enabled API (works everywhere) + ✅ Type-Safe Development (TypeScript) + ✅ Responsive Design (iOS safe areas) + ✅ Error Boundary Protection + ✅ Performance Optimized (React.memo) ``` ## 🚀 **Quick Start Guide**
### 🛠️ **For Developers** ```bash # 1. Clone & Install git clone https://github.com/SaurabhCodesAI/snap2slides.git cd snap2slides npm install # 2. Setup Environment cp .env.example .env.local # Add your Google AI API key # 3. Start Development npm run dev # 4. Open Browser # http://localhost:3000 🎉 ``` ### 👥 **For Users** 1. **🌐 [Try Live Demo](https://snap2slides-pro.vercel.app)** 2. **📱 Works on mobile too!** 3. **🖼️ Upload any image** 4. **⏰ Wait 10-30 seconds** 5. **💼 Download professional slides** **No installation needed!**
### 🔑 **API Configuration**
🔧 Environment Variables Setup (Click to expand) ```bash # .env.local GOOGLE_API_KEY=your_gemini_api_key_here NODE_ENV=development # Optional: Advanced Configuration VERCEL_URL=your_production_url NEXT_PUBLIC_APP_NAME="Snap2Slides Pro" ``` **Get your API key from [Google AI Studio](https://makersuite.google.com/app/apikey)**
## 🎮 **How to Use** ``` ┌─────────────────────────────────────────────┐ │ 📁 Drag & Drop Your Image Here │ │ │ │ 🖼️ ← Your image (JPG, PNG, WebP) │ │ │ │ 📊 Charts? ✅ 📸 Screenshots? ✅ │ │ 📋 Documents? ✅ 🎨 Infographics? ✅ │ │ │ │ [🚀 Generate Slides] │ └─────────────────────────────────────────────┘ ⬇️ AI Magic Happens ⬇️ ┌─────────────────────────────────────────────┐ │ 📊 Processing... │ │ ████████████████▒▒▒▒ 80% │ │ │ │ 🧠 AI is analyzing your content... │ │ 📝 Structuring information... │ │ 🎨 Creating professional layouts... │ └─────────────────────────────────────────────┘ ⬇️ Instant Results ⬇️ ┌─────────────────────────────────────────────┐ │ ✅ Success! Your presentation is ready │ │ │ │ 📥 [Download PowerPoint] │ │ 👁️ [Preview Slides] │ │ ✏️ [Edit Content] │ │ │ │ 🎉 Professional slides in 30 seconds! │ └─────────────────────────────────────────────┘ ``` ### 💡 **Pro Tips for Best Results** | Image Type | AI Performance | Best For | |------------|----------------|----------| | **📊 Charts/Graphs** | ⭐⭐⭐⭐⭐ | Data presentations, reports | | **📋 Screenshots** | ⭐⭐⭐⭐⭐ | Tutorial slides, software demos | | **📄 Documents** | ⭐⭐⭐⭐ | Academic presentations, summaries | | **🎨 Infographics** | ⭐⭐⭐⭐ | Visual storytelling, concepts | | **📱 UI Mockups** | ⭐⭐⭐⭐⭐ | Design presentations, app demos | ## 🏗️ **Technical Excellence**
Next.js
Next.js 14
App Router & SSR 		TypeScript
TypeScript
Type Safety 		Tailwind
Tailwind CSS
Mobile First 		Google AI
Gemini AI
Vision API
### 🎯 **Architecture Highlights** ```mermaid graph TB A[📱 User Interface] -->|Upload| B[🔄 Next.js API Routes] B -->|Process| C[🤖 Google Gemini AI] C -->|Analyze| D[📊 Content Extraction] D -->|Generate| E[📄 PowerPoint Creation] E -->|Download| F[✅ Professional Slides] style A fill:#e1f5fe style C fill:#fff3e0 style E fill:#e8f5e8 ```
🔍 Deep Dive: Performance Optimizations **🚀 What makes it fast:** - **React.memo**: Prevents unnecessary re-renders - **useCallback**: Optimized event handlers - **useMemo**: Cached expensive computations - **CORS Headers**: Seamless cross-device API calls - **Network Binding**: Mobile testing capabilities - **Error Boundaries**: Graceful failure handling - **TypeScript**: Compile-time error catching **📱 Mobile Optimizations:** - iOS Safe Area support - Touch-optimized interactions - Responsive breakpoints - Hardware-accelerated animations - Compressed asset delivery
## 🔗 **API Reference** | Endpoint | Method | Purpose | Response Time | |----------|---------|---------|---------------| | `/api/gemini-vision` | `POST` | 🤖 AI image analysis | ~15-30 seconds | | `/api/generate-pptx-slides` | `POST` | 📄 PowerPoint creation | ~5-10 seconds | | `/api/slides` | `GET/POST/PUT` | 💾 Slide data management | ~100ms | | `/api/health` | `GET` | 🏥 System status check | ~50ms |
🔧 API Examples (Click to expand) ### Image Analysis ```javascript const formData = new FormData(); formData.append('file', imageFile); const response = await fetch('/api/gemini-vision', { method: 'POST', body: formData }); const result = await response.json(); // Returns: { content, insights, slideData } ``` ### PowerPoint Generation ```javascript const response = await fetch('/api/generate-pptx-slides', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ slideData }) }); // Returns downloadable .pptx file ```
## 📁 **Project Architecture**
🏗️ Codebase Structure (Click to explore) ``` snap2slides/ ├── 📂 app/ │ ├── 🔌 api/ │ │ ├── gemini-vision/route.ts # 🤖 AI processing engine │ │ ├── generate-pptx-slides/route.ts # 📄 PowerPoint creator │ │ ├── slides/route.ts # 💾 Data management │ │ └── health/route.ts # 🏥 System monitoring │ ├── 📝 editor/[id]/page.tsx # ✏️ Slide editor │ ├── 👁️ viewer/[id]/page.tsx # 🔍 Presentation viewer │ ├── 🎨 globals.css # 📱 Mobile-first styling │ ├── 🏠 layout.tsx # 🖼️ App shell │ └── 🚀 page.tsx # 🎯 Main interface ├── 📚 lib/ │ ├── api-manager.ts # 🔄 Multi-API rotation │ └── performance-utils.ts # ⚡ Speed optimizations ├── 🔧 components/ # 🧩 Reusable UI pieces ├── 📖 docs/ # 📋 Complete documentation └── ⚙️ Configuration files # 🛠️ Build & deploy setup ```
## 🌟 **Development Journey** > *"What started as a simple 'upload image, get slides' tool became a journey through modern web development, AI integration, and production deployment challenges."*
### 🎯 **Phase 1: The MVP** - Basic file upload - Simple UI design - Single API integration - Local development only **Learning:** *Sometimes the simplest ideas have the biggest impact* ### 🔧 **Phase 2: The Reality Check** - Mobile compatibility issues - CORS errors everywhere - Hydration mismatches - Performance bottlenecks **Learning:** *Real users use real devices* ### 🚀 **Phase 3: Production Ready** - Multi-device support - Error boundaries - Performance optimization - Comprehensive documentation **Learning:** *Polish makes the difference*
### 🎪 **Behind the Scenes: Technical Challenges Solved**
🐛 The Mobile "Failed to Fetch" Mystery **The Problem:** Users on mobile devices couldn't upload files - mysterious CORS errors. **The Investigation:** - Desktop worked fine ✅ - Mobile browsers failed ❌ - Network requests timing out - No clear error messages **The Solution:** ```typescript // Added comprehensive CORS headers function addCorsHeaders(response: NextResponse) { response.headers.set('Access-Control-Allow-Origin', '*'); response.headers.set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); response.headers.set('Access-Control-Allow-Headers', 'Content-Type, Authorization'); return response; } ``` **The Learning:** Cross-device testing isn't optional - it's essential.
⚡ The Hydration Nightmare **The Problem:** React hydration errors causing blank pages on refresh. **The Root Cause:** Server-side rendering vs client-side state mismatch. **The Fix:** ```typescript const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); if (!mounted) return
Loading...
; ``` **The Learning:** SSR and CSR need to be perfectly synchronized.
## � **Deployment & Production** https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/SaurabhCodesAI/snap2slides ### 🔧 **Environment Configuration** ```bash # Production Environment Variables GOOGLE_API_KEY=your_gemini_api_key_here NODE_ENV=production VERCEL_URL=https://your-app.vercel.app ``` ### 📊 **Production Metrics** - ⚡ **Build Time**: ~2 minutes - 🏃 **Cold Start**: <500ms - 📱 **Mobile Performance**: 90+ Lighthouse score - 🌍 **Global CDN**: Edge deployment ready - 🔒 **Security**: Headers configured, CORS enabled ## 🎉 **What's Next?** | Feature | Status | Timeline | |---------|---------|----------| | 🎨 Custom Templates | 🚧 In Progress | Q4 2025 | | 👥 Collaboration | 📋 Planned | Q1 2026 | | 🔐 User Accounts | 💭 Concept | Q2 2026 | | 📊 Analytics Dashboard | 💭 Concept | Q3 2026 | ## 🤝 **Contributing** We welcome contributions! See our [Contributing Guide](CONTRIBUTING.md) for details. https://img.shields.io/github/stars/SaurabhCodesAI/snap2slides?style=social)](https://github.com/SaurabhCodesAI/snap2slides/stargazers --- https://github.com/SaurabhCodesAI)** https://twitter.com/SaurabhCodesAI https://github.com/SaurabhCodesAI/snap2slides)** updated readme to be more interactive

0 commit comments

Comments
 (0)