DevAI Tools - Docker Deployment

A lightweight, developer-focused frontend web application for AI text and image generation.

Features

• Text Chat: Interactive chat interface for AI-powered text generation
• Image Generation: Create AI images from text prompts
• Lightweight: No heavy UI frameworks, custom CSS only
• Responsive: Mobile-friendly design
• Docker Ready: Optimized for containerized deployment

Quick Start

Using Docker

# Build and start the application
docker-compose up --build

# Access the app at http://localhost

Development

Local Development

# Install dependencies
npm install

# Start development server
npm run dev

# Access the app at http://localhost:8080

Production Build

# Build for production
npm run build

# Preview production build
npm run preview

API Integration

The app is configured to work with these placeholder endpoints that you can replace with your actual AI service URLs:

Text Generation

# Replace https://api.example.com/text with your actual endpoint
POST https://api.example.com/text
Content-Type: application/json
{
  "message": "Your text prompt here"
}

Response:
{
  "response": "Generated text response"
}

Image Generation

# Replace https://api.example.com/image with your actual endpoint
POST https://api.example.com/image
Content-Type: application/json
{
  "prompt": "Your image prompt here"
}

Response:
{
  "image_url": "https://your-generated-image-url.com/image.jpg"
}

Customization

Update API URLs

Replace the placeholder URLs in these files with your actual API endpoints:

• Text API: src/pages/TextChatPage.tsx (line 33)
• Image API: src/pages/ImageGenPage.tsx (line 21)

Example API Services

You can integrate with services like:

• OpenAI GPT API for text generation
• DALL-E, Midjourney, or Stable Diffusion for images
• Your own custom AI backends

Architecture

┌─────────────────┐
│   Frontend      │
│   (React/TS)    │
│   Port 80       │
└─────────────────┘
         │
         ▼
┌─────────────────┐
│   NGINX         │
│   Static Files  │
└─────────────────┘

Production Optimizations

• Multi-stage build: Reduces final image size
• NGINX: Efficient static file serving
• Gzip compression: Reduces bandwidth usage
• Caching headers: Improves performance
• Security headers: Basic security hardening

Technology Stack

• Frontend: React 18, TypeScript, Vite
• Routing: React Router v6
• Styling: Custom CSS (no frameworks)
• Build: Vite (fast builds)
• Server: NGINX (production)
• Container: Alpine Linux (lightweight)

File Structure

src/
├── components/
│   └── Navigation.tsx      # App navigation
├── pages/
│   ├── Index.tsx          # Landing page
│   ├── TextChatPage.tsx   # Text chat interface
│   ├── ImageGenPage.tsx   # Image generation
│   └── NotFound.tsx       # 404 page
├── index.css              # Custom CSS styles
└── App.tsx                # Main app component

Docker files:
├── Dockerfile             # Multi-stage build
├── docker-compose.yml     # Frontend only setup
├── nginx.conf            # NGINX configuration
└── .dockerignore         # Build optimization

Deployment

Production Deployment

1. Configure your API URLs in the frontend code
2. Build and deploy the Docker container
3. Configure your AI backend services separately

Cloud Deployment Examples

Docker Hub + VPS:

docker build -t username/devai-tools .
docker push username/devai-tools
# Deploy on your VPS

Cloud Platforms:

• AWS ECS/Fargate
• Google Cloud Run
• Azure Container Instances
• DigitalOcean App Platform

License

MIT License - feel free to use and modify as needed.