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"))