Trading Card Generator

A .NET 10 web application that generates custom sports trading cards using OpenAI's gpt-image-1 image generation model. Users can create personalized trading cards by uploading their photo and customizing team information and colors.

🚀 Getting Started

Prerequisites

• .NET 10.0 SDK
• Azure OpenAI API access with access to gpt-image-1
• Visual Studio 2022 or Visual Studio Code
• Aspire CLI

Running the application

Make sure you have the following user-secrets configured for the src/InfoSupport.TradingCardGenerator.Api project:

Secret Name	Description
ImageGeneration:Models:gpt-image-1.5:Endpoint	The Foundry endpoint hosting the gpt-image-1.5 model
ImageGeneration:Models:gpt-image-1.5:ApiKey	Optional API key; Entra ID is used when omitted
ImageGeneration:Models:mai-image-flash:Endpoint	The endpoint hosting the MAI-Image-2.5-Flash model
ImageGeneration:Models:mai-image-flash:ApiKey	Optional API key; Entra ID is used when omitted

The models themselves and the mapping between features and models live in appsettings.json under the ImageGeneration section:

{
  "ImageGeneration": {
    "DefaultModel": "gpt-image-1.5",
    "Models": {
      "gpt-image-1.5": { "Provider": "AzureOpenAI", "DeploymentName": "gpt-image-1.5" },
      "mai-image-flash": { "Provider": "Mai", "DeploymentName": "MAI-Image-2.5-Flash" }
    },
    "Features": {
      "Sports": "gpt-image-1.5",
      "Jurassic": "gpt-image-1.5",
      "Medieval": "mai-image-flash"
    }
  }
}

Each provider has its own IImageEditClient implementation (AzureOpenAiImageEditClient, MaiImageEditClient) because the APIs differ: the gpt-image family uses the deployment-scoped Azure OpenAI image edit API, while MAI uses its own /mai/v1/images/edits REST endpoint. Switching a feature to another model is a matter of pointing its entry in Features at a different model key. DeploymentName must match the deployment name in Foundry.

To run the full application execute the following command from the root of the repository:

aspire run

Conference display sizing

The generator pages use compact vertical spacing to leave more room for the card preview and controls on demo screens. Card sizes, text sizes, downloads, and printing are unchanged. Smaller windows retain normal scrolling.

🏗️ Project Structure

├── src/
│   ├── InfoSupport.TradingCardGenerator.Api/           # Backend API
│   │   ├── Features/                                   # Feature modules
│   │   │   └── <FeatureName>/                          # Each feature follows this structure
│   │   │       ├── Endpoints/                          # API endpoint definitions
│   │   │       ├── Models/                             # Data models and DTOs
│   │   │       └── Prompts/                            # AI prompt templates
│   │   └── Shared/                                     # Shared utilities
│   ├── InfoSupport.TradingCardGenerator.AppHost/       # Aspire AppHost for orchestration
│   ├── InfoSupport.TradingCardGenerator.ServiceDefaults/ # Aspire service defaults
│   └── InfoSupport.TradingCardGenerator.Web/           # Frontend Next.js application
│       ├── public/                                     # Static assets (team logos)
│       └── src/
│           ├── app/                                    # Next.js app directory
│           ├── components/                             # React components
│           ├── hooks/                                  # Custom React hooks
│           └── lib/                                    # Utilities and constants
├── test/
│   ├── InfoSupport.TradingCardGenerator.Api.Tests/     # API unit tests
│   └── InfoSupport.TradingCardGenerator.ServiceDefaults.Tests/
├── docs/                                               # Architecture documentation
└── README.md

🧪 Running Tests

We have two test suites, one for the backend API which you can run using the following command:

dotnet test

The frontend tests can be run by running the following commands:

cd src/InfoSupport.TradingCardGenerator.Web
npm test

🚦 Development

Adding New Features

1. Feature Module: Create a new folder under src/InfoSupport.TradingCardGenerator.Api/Features/
2. Models: Add data models in your feature's Models/ folder
3. Endpoints: Define API endpoints in your feature's Endpoints/ folder
4. Prompts: Add AI prompt templates in your feature's Prompts/ folder
5. Tests: Add corresponding tests in test/InfoSupport.TradingCardGenerator.Api.Tests/Features/

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

Documentation

1. Introduction and goals
2. Constraints
3. Context and scope
4. Solution strategy
5. Building block view
6. Runtime view
7. Deployment view
8. Quality

---

Note: This application requires a valid Azure OpenAI subscription and API access to function properly.