gradio_app.py

#!/usr/bin/env python3
"""
DR-Image-Magic Gradio Interface
A web UI for the Artistic Photo Transform project on Hugging Face Spaces
"""

import gradio as gr
import subprocess
import os
import sys
from pathlib import Path

# Get the project root directory
PROJECT_ROOT = Path(__file__).parent

def run_command(cmd, shell=True):
    """Execute a command and return output"""
    try:
        result = subprocess.run(
            cmd,
            shell=shell,
            capture_output=True,
            text=True,
            cwd=PROJECT_ROOT,
            timeout=300
        )
        return result.stdout + result.stderr
    except subprocess.TimeoutExpired:
        return "⚠️ Command timed out (5 minutes)"
    except Exception as e:
        return f"❌ Error: {str(e)}"

def install_dependencies():
    """Install pnpm dependencies"""
    return run_command("pnpm install")

def start_dev_server():
    """Start development server"""
    return run_command("pnpm run dev", shell=True)

def type_check():
    """Run TypeScript type checking"""
    return run_command("pnpm run check")

def format_code():
    """Format code with prettier"""
    return run_command("pnpm run format")

def run_tests():
    """Run test suite"""
    return run_command("pnpm test")

def push_db_schema():
    """Push database schema"""
    return run_command("pnpm run db:push")

def build_production():
    """Build for production"""
    return run_command("pnpm run build")

def get_project_info():
    """Get project information"""
    info = """
# 🎨 Artistic Photo Transform - DR-Image-Magic

## Project Overview
A full-stack application that uses AI to transform photos into artistic variations.

## Tech Stack
- **Frontend**: React 19 + TypeScript + Tailwind CSS
- **Backend**: Express + tRPC + Node.js
- **Database**: MySQL + Drizzle ORM
- **Storage**: AWS S3
- **AI**: Image generation with custom prompts
- **UI Components**: Radix UI + shadcn/ui
- **Testing**: Vitest

## Project Structure
```
├── client/          # React frontend application
├── server/          # Express backend server
├── shared/          # Shared types and utilities
├── drizzle/         # Database migrations
└── patches/         # Patch files for dependencies
```

## Key Features
✅ Photo upload with drag-and-drop
✅ AI-powered image transformations (3 variations)
✅ S3 storage for images
✅ User authentication & history
✅ Transformation gallery view
✅ Image download functionality
✅ Real-time status updates
✅ Responsive design

## Scripts
- `pnpm run dev` - Start development server
- `pnpm run build` - Build for production
- `pnpm start` - Run production server
- `pnpm test` - Run tests
- `pnpm run format` - Format code
- `pnpm run check` - Type checking
- `pnpm run db:push` - Push database schema
"""
    return info

def get_setup_guide():
    """Get setup instructions"""
    guide = """
# Setup Guide

## Prerequisites
- Node.js 18+
- pnpm package manager
- MySQL database
- AWS S3 account

## Installation Steps

### 1. Install Dependencies
Click the button below to install all required packages:
(Note: This requires pnpm to be installed)

### 2. Environment Variables
Create a `.env` file with:
```
DATABASE_URL=mysql://user:password@localhost:3306/dr_image_magic
AWS_ACCESS_KEY_ID=your_key
AWS_SECRET_ACCESS_KEY=your_secret
AWS_S3_BUCKET=your_bucket
OPENAI_API_KEY=your_openai_key
```

### 3. Database Setup
Run migrations to set up your database:
```bash
pnpm run db:push
```

### 4. Development
Start the development server:
```bash
pnpm run dev
```

The app will be available at `http://localhost:5173`

### 5. Production Deployment
Build the app:
```bash
pnpm run build
```

Start the production server:
```bash
pnpm start
```
"""
    return guide

# Create the Gradio interface
with gr.Blocks(title="DR-Image-Magic") as demo:
    gr.Markdown("""
    # 🎨 DR-Image-Magic Dashboard
    ## Artistic Photo Transform Project Manager
    """)
    
    with gr.Tabs():
        # Tab 1: Project Info
        with gr.Tab("📋 Project Info"):
            project_info = gr.Markdown(get_project_info())
        
        # Tab 2: Setup
        with gr.Tab("⚙️ Setup"):
            gr.Markdown(get_setup_guide())
            with gr.Row():
                install_btn = gr.Button("📥 Install Dependencies", size="lg", variant="primary")
                db_btn = gr.Button("🗄️ Push Database Schema", size="lg")
            
            install_output = gr.Textbox(
                label="Installation Output",
                lines=10,
                interactive=False,
                placeholder="Click 'Install Dependencies' to start..."
            )
            db_output = gr.Textbox(
                label="Database Push Output",
                lines=10,
                interactive=False,
                placeholder="Click 'Push Database Schema' to start..."
            )
            
            install_btn.click(install_dependencies, outputs=install_output)
            db_btn.click(push_db_schema, outputs=db_output)
        
        # Tab 3: Development
        with gr.Tab("🚀 Development"):
            gr.Markdown("""
            ## Development Tools
            
            Use these tools during development:
            - **Type Check**: Verify TypeScript types
            - **Format Code**: Auto-format with Prettier
            - **Run Tests**: Execute test suite
            """)
            
            with gr.Row():
                type_check_btn = gr.Button("✓ Type Check", size="lg", variant="secondary")
                format_btn = gr.Button("📝 Format Code", size="lg", variant="secondary")
                test_btn = gr.Button("🧪 Run Tests", size="lg", variant="secondary")
            
            with gr.Row():
                type_check_output = gr.Textbox(
                    label="Type Check Results",
                    lines=8,
                    interactive=False
                )
                format_output = gr.Textbox(
                    label="Format Results",
                    lines=8,
                    interactive=False
                )
                test_output = gr.Textbox(
                    label="Test Results",
                    lines=8,
                    interactive=False
                )
            
            type_check_btn.click(type_check, outputs=type_check_output)
            format_btn.click(format_code, outputs=format_output)
            test_btn.click(run_tests, outputs=test_output)
        
        # Tab 4: Production
        with gr.Tab("📦 Production"):
            gr.Markdown("""
            ## Production Deployment
            
            Build your application for production:
            1. Click "Build for Production" to optimize the code
            2. Once complete, run `pnpm start` to launch the production server
            3. Your app will be available at the server URL
            """)
            
            build_btn = gr.Button("🏗️ Build for Production", size="lg", variant="stop")
            build_output = gr.Textbox(
                label="Build Output",
                lines=15,
                interactive=False,
                placeholder="Click 'Build for Production' to start..."
            )
            
            build_btn.click(build_production, outputs=build_output)
    
    gr.Markdown("""
    ---
    ## 💡 Tips
    - This interface provides a web UI for managing the DR-Image-Magic project
    - Most operations require pnpm and Node.js to be installed
    - For full development, clone the repository locally
    - Check the GitHub repo: [DR-Studios/DR-Image-Magic](https://github.com/DR-Studios/DR-Image-Magic)
    """)

if __name__ == "__main__":
    demo.launch(share=False, theme=gr.themes.Soft(primary_hue="orange"))