Add HuggingFace Space Docker setup and update README

.dockerignore

@@ -1,49 +1,19 @@
-# Dependencies
-node_modules
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-package-lock.json
-yarn.lock
-pnpm-lock.yaml
-
-# Next.js
-.next
-out
-dist
-build
-
-# Testing
-coverage
-.nyc_output
-
-# Misc
-.DS_Store
-*.pem
-.env
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-# Debug
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-
-# IDEs
-.idea
-.vscode
-*.swp
-*.swo
-*~
-
-# Git
-.git
-.gitignore
-README.md
-
-# Docker
-Dockerfile
-.dockerignore
-docker-compose.yml
+node_modules
+.next
+out
+build
+coverage
+.DS_Store
+*.pem
+.env
+.env.local
+.env*.local
+npm-debug.log*
+yarn-debug.log*
+.idea
+.vscode
+.git
+.claude
+Dockerfile
+.dockerignore
+docker-compose.yml

Dockerfile

@@ -1,51 +1,41 @@
-# Stage 1: Dependencies
-FROM node:20-alpine AS deps
-RUN apk add --no-cache libc6-compat
-WORKDIR /app
-
-# Copy package files
-COPY package.json package-lock.json* ./
-RUN npm ci
-
-# Stage 2: Builder
-FROM node:20-alpine AS builder
-WORKDIR /app
-
-# Copy dependencies from deps stage
-COPY --from=deps /app/node_modules ./node_modules
-COPY . .
-
-# Disable telemetry during build
-ENV NEXT_TELEMETRY_DISABLED=1
-
-# Build the application
-RUN npm run build
-
-# Stage 3: Runner
-FROM node:20-alpine AS runner
-WORKDIR /app
-
-ENV NODE_ENV=production
-ENV NEXT_TELEMETRY_DISABLED=1
-
-# Create a non-root user
-RUN addgroup --system --gid 1001 nodejs
-RUN adduser --system --uid 1001 nextjs
-
-# Copy necessary files from builder
-COPY --from=builder /app/public ./public
-COPY --from=builder /app/.next/standalone ./
-COPY --from=builder /app/.next/static ./.next/static
-
-# Set correct permissions
-RUN chown -R nextjs:nodejs /app
-
-USER nextjs
-
-EXPOSE 3000
-
-ENV PORT=3000
-ENV HOSTNAME="0.0.0.0"
-
-# Start the application
-CMD ["node", "server.js"]
+FROM node:20-alpine AS base
+
+# Install dependencies only when needed
+FROM base AS deps
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+
+COPY package.json package-lock.json* ./
+RUN npm ci
+
+# Build the application
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+
+ENV NEXT_TELEMETRY_DISABLED=1
+
+RUN npm run build
+
+# Production image
+FROM base AS runner
+WORKDIR /app
+
+ENV NODE_ENV=production
+ENV NEXT_TELEMETRY_DISABLED=1
+ENV PORT=7860
+ENV HOSTNAME="0.0.0.0"
+
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+
+COPY --from=builder /app/public ./public
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+
+USER nextjs
+
+EXPOSE 7860
+
+CMD ["node", "server.js"]

README.md

@@ -1,345 +1,43 @@
-# PowerPoint AI Generator 🎨
-
-A modern, AI-powered presentation generator built with Next.js that creates professional PowerPoint presentations using various AI models. The application features a Google Slides-like editor interface with real-time editing capabilities.
-
-## ✨ Features
-
-- **AI-Powered Generation**: Create presentations using multiple AI models (Gemini, DeepSeek, GPT, Kimi, Llama)
-- **Automatic Image Integration**: Slides automatically include relevant images from Unsplash
-- **Image + Text Layouts**: Professional content-image layouts for visual presentations
-- **Google Slides-like Editor**: Modern interface with drag-and-drop functionality
-- **Rich Text Editing**: Bold, italic, underline formatting options
-- **Multi-slide Management**: Add, delete, and organize slides
-- **Export to PowerPoint**: Generate .pptx files with styled content
-- **Authentication**: HuggingFace Pro integration for premium models
-- **Responsive Design**: Works seamlessly across devices
-- **Dark Mode Support**: Built-in dark theme
-- **Multiple Slide Templates**: Title, bullets, charts, images, quotes, comparisons
-
-## 🛠 Tech Stack
-
-- **Framework**: Next.js 15.5.3 with App Router
-- **Language**: TypeScript 5.9.3
-- **Styling**: TailwindCSS v4 with custom design tokens
-- **UI Components**: Radix UI primitives
-- **AI Integration**: Google Generative AI, HuggingFace, OpenAI, Cohere
-- **Presentation Export**: pptxgenjs
-- **Authentication**: NextAuth with HuggingFace OAuth
-
-## 📁 Project Structure
-
-```
-powerpoint/
-├── app/                        # Next.js app directory
-│   ├── api/                   # API routes
-│   │   ├── auth/              # Authentication endpoints
-│   │   ├── export-pptx/       # PowerPoint export
-│   │   ├── generate-slides/   # AI slide generation
-│   │   ├── presentations/     # Main generation orchestrator
-│   │   ├── unsplash-download/ # Image downloads
-│   │   └── upload-template/   # Template uploads
-│   ├── editor/                # Editor page
-│   │   └── page.tsx           # Editor route component
-│   ├── globals.css            # Global styles & design tokens
-│   ├── layout.tsx             # Root layout with fonts
-│   └── page.tsx               # Landing page with prompt input
-│
-├── components/                 # React components
-│   ├── editor/                # Editor components
-│   │   ├── GoogleSlidesEditor.tsx  # Main editor interface
-│   │   ├── PowerPointEditor.tsx    # Alternative editor
-│   │   ├── Ribbon.tsx              # Toolbar ribbon
-│   │   └── SlideThumbnailPanel.tsx # Slide thumbnails
-│   ├── slides/                # Slide type components
-│   │   ├── TitleSlide.tsx     # Title slide template
-│   │   ├── BulletsSlide.tsx   # Bullet points slide
-│   │   ├── ChartSlide.tsx     # Chart visualization
-│   │   └── SlideFactory.tsx   # Slide component factory
-│   └── ui/                    # UI primitives
-│       └── select.tsx         # Custom select component
-│
-└── lib/                        # Utility libraries
-    └── orchestrator.ts        # AI provider orchestration
-```
-
-## 🚀 Getting Started
-
-### Prerequisites
-
-- Node.js 18+
-- npm or yarn
-- API keys for AI providers (optional, Gemini works free)
-
-### Installation
-
-1. Clone the repository:
-```bash
-git clone https://github.com/yourusername/powerpoint.git
-cd powerpoint
-```
-
-2. Install dependencies:
-```bash
-npm install
-```
-
-3. Set up environment variables:
-Create a `.env.local` file:
-```env
-# AI Provider Keys (Gemini is free and works without key)
-GOOGLE_GENERATIVE_AI_API_KEY=your_gemini_key
-
-# Image Integration (optional)
-UNSPLASH_ACCESS_KEY=your_unsplash_key
-
-# Authentication (optional - for premium models)
-NEXTAUTH_URL=http://localhost:3000
-NEXTAUTH_SECRET=your_secret_key
-```
-
-**Note**: Without an Unsplash API key, presentations will use text-only layouts. To enable automatic image integration:
-1. Sign up at [Unsplash Developers](https://unsplash.com/developers)
-2. Create a new application
-3. Copy your Access Key to `.env.local`
-
-4. Run the development server:
-```bash
-npm run dev
-```
-
-5. Open [http://localhost:3000](http://localhost:3000) in your browser
-
-## 💡 Usage
-
-1. **Landing Page** (`/`): Enter your presentation topic/prompt
-2. **Select AI Model**: Choose from available models (Gemini is free)
-3. **Authenticate** (if needed): Login with HuggingFace for Pro models
-4. **Generate**: Click the arrow button to create presentation
-   - Slides will automatically include relevant images if Unsplash is configured
-   - Content slides use professional image + text layouts
-5. **Edit**: Modify slides in the Google Slides-like editor
-   - Drag and resize elements
-   - Click on images to change them
-   - Edit text inline
-6. **Export**: Download as PowerPoint file
-
-## 🔌 API Endpoints
-
-### POST `/api/presentations/generate`
-Main endpoint for generating presentations with automatic image integration.
-- **Input**: `{ prompt: string, model: string }`
-- **Output**: JSON array of slides with titles, content, images, and layouts
-- **Features**: Automatically fetches relevant images from Unsplash for each slide
-
-### GET `/api/search-images`
-Search for images from Unsplash.
-- **Input**: `?query=search_term&per_page=1`
-- **Output**: Array of image objects with URLs and metadata
-- **Note**: Requires UNSPLASH_ACCESS_KEY in environment variables
-
-### POST `/api/export-pptx`
-Exports slides to PowerPoint format.
-- **Input**: Array of slides with title and content
-- **Output**: Base64-encoded .pptx file
-
-### POST `/api/generate-slides`
-Legacy endpoint for HuggingFace-specific generation.
-- **Input**: `{ prompt: string, model: string, authMethod: string }`
-- **Output**: JSON array of slides
-
-## 🔗 File Connections & Data Flow
-
-### Data Flow
-1. **User Input** → `app/page.tsx` (landing page)
-2. **Session Storage** → Stores prompt & model selection
-3. **Navigation** → Routes to `/editor`
-4. **Editor Load** → `app/editor/page.tsx` → `GoogleSlidesEditor.tsx`
-5. **AI Generation** → Calls `/api/presentations`
-6. **Orchestrator** → `lib/orchestrator.ts` routes to appropriate provider
-7. **Slide Rendering** → `components/slides/*` render content
-8. **Export** → `/api/export-pptx` creates PowerPoint file
-
-### Key Component Connections
-- `app/page.tsx` ↔ `app/editor/page.tsx` (via router & sessionStorage)
-- `GoogleSlidesEditor.tsx` ↔ `/api/presentations` (AI generation)
-- `GoogleSlidesEditor.tsx` ↔ `/api/export-pptx` (file export)
-- `components/slides/*` ← `SlideFactory.tsx` (component selection)
-
-## 📦 Key Libraries & Packages
-
-### AI & ML Integration
-- **@google/generative-ai**: Google's Gemini AI integration
-- **@huggingface/inference**: HuggingFace model access
-- **openai**: OpenAI GPT models
-- **cohere-ai**: Cohere language models
-
-### UI & Styling
-- **@radix-ui/react-***: Headless UI components (dialog, dropdown, popover, select)
-- **tailwindcss**: Utility-first CSS framework
-- **lucide-react**: Modern icon library
-- **@lobehub/icons**: AI model brand icons
-- **react-icons**: General icon set
-- **class-variance-authority**: Component variants
-- **clsx & tailwind-merge**: Class name utilities
-
-### Presentation & Editor
-- **pptxgenjs**: PowerPoint file generation
-- **react-draggable**: Drag-and-drop functionality for slide elements
-- **swiper**: Slide carousel functionality
-
-### Visualization
-- **chart.js & react-chartjs-2**: Chart creation and React wrapper
-- **html2canvas**: HTML to image conversion
-- **jspdf**: PDF generation capabilities
-
-### Authentication
-- **@auth/core**: Authentication core
-- **next-auth**: NextAuth integration
+---
+title: Powerpoint AI
+emoji: 🎨
+colorFrom: green
+colorTo: yellow
+sdk: docker
+app_port: 7860
+pinned: false
+---
 
-### Utilities
-- **axios**: HTTP client for API calls
-- **unsplash-js**: Unsplash image integration
+# PowerPoint AI Generator
 
-## 🎨 Design System
+AI-powered presentation generator with a Google Slides-like editor. Create professional presentations using Qwen3.5-9B via HuggingFace Inference, with automatic Unsplash image integration and Neo-Brutalism template support.
 
-### Font Stack
-Multiple Google Fonts for varied typography:
-- **Geist & Geist Mono**: Primary UI fonts
-- **Sora**: Modern display font
-- **Inter**: Highly readable body text
-- **Roboto**: Classic, versatile font
-- **Poppins**: Friendly, rounded font
-- **Montserrat**: Geometric sans-serif
-- **Playfair Display & Merriweather**: Elegant serif fonts
+## Features
 
-### Color System
-- **Light Mode**: Clean whites and subtle grays
-- **Dark Mode**: Deep blacks with emerald accents (#34d399)
-- **Brand Colors**: Blue-600 (#2563eb) / Blue-400 (#60a5fa)
+- **AI Slide Generation** using Qwen3.5-9B (Together AI provider)
+- **Template System** with Neo-Brutalism theme (dot grids, thick borders, hard shadows, bright colors)
+- **Unsplash Integration** for automatic slide images
+- **Google Slides-like Editor** with drag-and-drop, inline text editing
+- **Multiple Slide Types**: Title, Bullets, Content-Image, Quote, Comparison, Chart, Stats, Section
+- **Export to PowerPoint** (.pptx)
+- **HuggingFace OAuth** login
 
-## Example Prompts
+## Tech Stack
 
-- "Create a 5-slide presentation about renewable energy sources including solar, wind, and hydroelectric power"
-- "Make a presentation about machine learning fundamentals for beginners"
-- "Generate slides about effective remote work strategies and best practices"
-- "Create a business presentation about digital marketing trends in 2024"
+- Next.js 15 (App Router, Standalone output)
+- TypeScript, TailwindCSS v4
+- HuggingFace Inference Client
+- pptxgenjs for export
+- Radix UI primitives
 
 ## Environment Variables
 
-```env
-# Hugging Face OAuth (optional)
-HUGGINGFACE_CLIENT_ID=your_client_id
-HUGGINGFACE_CLIENT_SECRET=your_client_secret
-NEXT_PUBLIC_HUGGINGFACE_CLIENT_ID=your_client_id
-```
-
-## Development
-
-### Project Structure
-
-```
-├── app/
-│   ├── api/
-│   │   ├── generate-slides/    # Slide generation API
-│   │   ├── export-pptx/        # PowerPoint export API
-│   │   └── auth/               # Authentication handlers
-│   ├── layout.tsx              # Root layout
-│   └── page.tsx                # Home page
-├── components/
-│   ├── AuthProvider.tsx        # Authentication component
-│   ├── PresentationGenerator.tsx # Main generator component
-│   ├── ModelSelector.tsx       # Model selection component
-│   ├── SlideEditor.tsx         # Slide editing interface
-│   └── SlidePreview.tsx        # Presentation preview
-└── public/                     # Static assets
-```
-
-### Running Tests
-
-```bash
-npm run build
-npm run lint
-```
-
-## Troubleshooting
-
-### Common Issues
-
-1. **API Authentication Errors**: Ensure your Hugging Face API token is valid and has the necessary permissions
-
-2. **Model Not Found**: Verify the model ID exists on Hugging Face and supports text generation
-
-3. **Export Failures**: Check that all slides have valid content before exporting
-
-4. **Generation Timeouts**: Some models may take longer to respond; try a different model if timeouts occur
-
-## Credits
-
-Built with:
-- [Next.js](https://nextjs.org/) - React framework
-- [Hugging Face Inference](https://huggingface.co/docs/huggingface.js/inference/README) - AI model integration
-- [pptxgenjs](https://gitbrent.github.io/PptxGenJS/) - PowerPoint generation
-- [Tailwind CSS](https://tailwindcss.com/) - Styling
-- [Lucide React](https://lucide.dev/) - Icons
-
-## 🚦 Development Scripts
-
-```bash
-npm run dev      # Start development server with Turbopack
-npm run build    # Build for production with Turbopack
-npm run start    # Start production server
-npm run lint     # Run ESLint
-```
-
-## 🔧 Complex Code Logic Explained
-
-### 1. **Drag-and-Drop System** (`GoogleSlidesEditor.tsx`)
-The editor uses `react-draggable` to allow element positioning. Each element maintains its position state relative to the slide container, with boundary checking to prevent elements from moving outside the slide area.
-
-### 2. **AI Provider Orchestration** (`lib/orchestrator.ts`)
-The orchestrator intelligently routes requests to different AI providers based on the selected model name. It uses pattern matching to determine whether to use Gemini, HuggingFace, or other providers.
-
-### 3. **Session Storage Communication**
-The landing page (`app/page.tsx`) stores the prompt and model selection in sessionStorage, which the editor page retrieves on load. This allows seamless data transfer without URL parameters.
-
-### 4. **Slide Element Management**
-Each slide maintains an array of elements (text, images) with unique IDs. The editor tracks selected elements and applies transformations (position, size, rotation) through state updates.
-
-### 5. **PowerPoint Generation**
-The `pptxgenjs` library creates actual .pptx files by converting the slide data structure into PowerPoint-compatible format with styling, backgrounds, and animations.
-
-## 🎯 Key Features Explained
-
-### Gradient Animations (Landing Page)
-The landing page uses CSS keyframe animations with multiple gradient layers to create a dynamic, modern appearance. The animations are GPU-accelerated for smooth performance.
-
-### Model Selection Logic
-The application automatically determines authentication requirements based on the selected model. Free models like Gemini work without authentication, while premium models require HuggingFace Pro login.
-
-### Responsive Slide Editor
-The editor maintains a 16:9 aspect ratio for slides while scaling to fit different screen sizes. It uses CSS transforms for zooming without affecting the actual element dimensions.
-
-## 🤝 Contributing
-
-1. Fork the repository
-2. Create a feature branch (`git checkout -b feature/AmazingFeature`)
-3. Commit changes with clear messages
-4. Push to branch (`git push origin feature/AmazingFeature`)
-5. Open a Pull Request
-
-## 📄 License
-
-This project is proprietary software. All rights reserved.
-
-## 🙏 Acknowledgments
-
-- Next.js team for the amazing framework
-- Vercel for hosting and deployment
-- Google, HuggingFace, OpenAI for AI APIs
-- Open source community for the libraries
-
----
+Set these as **Secrets** in your HuggingFace Space settings:
 
-Built with ❤️ using Next.js and AI
-# PPT_AI
-
+| Variable | Required | Description |
+|---|---|---|
+| `UNSPLASH_ACCESS_KEY` | Optional | Unsplash API key for slide images |
+| `HF_TOKEN` | Optional | HuggingFace API token (fallback if OAuth not used) |
+| `HUGGINGFACE_CLIENT_ID` | Optional | HF OAuth client ID |
+| `HUGGINGFACE_CLIENT_SECRET` | Optional | HF OAuth client secret |
+| `NEXT_PUBLIC_HUGGINGFACE_CLIENT_ID` | Optional | Public HF OAuth client ID |