Create high-quality visual content with GPT-Image-1 and Sora on Azure OpenAI—tailored for professional use cases.

• Create videos from a text prompt with the Sora model
• Generate polished image assets from text prompts, input images, or both
• Refine prompts using AI best practices to ensure high-impact visuals
• Analyze outputs with AI for quality control, metadata tagging, and asset optimization
• Provide guardrails for content showing brands products (brand protection)
• Manage your content in an organized asset library

You can also get started with our notebooks to explore the models and APIs:

• Image generation: gpt-image-1.ipynb
• Video generation: sora-api-starter.ipynb

Azure resources:

• Azure OpenAI resource with a deployed gpt-image-1 model
• Azure OpenAI resource with a deployed Sora model
• Azure OpenAI gpt-4.1 model deployment (used for prompt enhancements and image analysis)
• Azure Storage Account with a Blob Container for your images and videos. You can use virtual folders to organize your content.

Compute environment:

• Python 3.12+
• Node.js 19+ and npm
• Git
• uv package manager
• Code editor (we are using VSCode in the instructions)

The quickest way to get started is using GitHub Codespaces, a hosted environment that is automatically set up for you. Click this button to create a Codespace (4-core machine recommended):

Wait for the Codespace to initialize. Python 3.12, Node.js 19, and dependencies will be automatically installed.

Now you can continue with Step 2: Configure Resources.

git clone https://github.com/Azure-Samples/visionary-lab

UV is a fast Python package installer and resolver that we use for managing dependencies.

Mac/Linux:

curl -LsSf https://astral.sh/uv/install.sh | sh

Windows (using PowerShell):

powershell -ExecutionPolicy ByPass -c "irm https://astral.sh/uv/install.ps1 | iex"

cp .env.example .env

The environment variables will be defined below.

cd frontend
npm install --legacy-peer-deps

1. Configure Azure credentials using a code or text editor:

   code .env

   Replace the placeholders with your actual Azure values:

   Service / Model	Variables
   Sora	- SORA_AOAI_RESOURCE: name of the Azure OpenAI resource used for Sora - SORA_DEPLOYMENT: deployment name for the Sora model - SORA_AOAI_API_KEY: API key for the Azure OpenAI Sora resource
   GPT-Image-1	- IMAGEGEN_AOAI_RESOURCE: name of the Azure OpenAI resource used for gpt-image-1 - IMAGEGEN_DEPLOYMENT: deployment name for the gpt-image-1 model - IMAGEGEN_AOAI_API_KEY: API key for the gpt-image-1 resource
   GPT-4.1	- LLM_AOAI_RESOURCE: name of the Azure OpenAI resource used for GPT-4.1 - LLM_DEPLOYMENT: deployment name for the GPT-4.1 model - LLM_AOAI_API_KEY: API key for the GPT-4.1 resource
   Azure Storage	- AZURE_BLOB_SERVICE_URL: URL to your Azure Blob Storage service - AZURE_STORAGE_ACCOUNT_NAME: name of your Azure Storage Account - AZURE_STORAGE_ACCOUNT_KEY: access key for your Azure Storage Account - AZURE_BLOB_IMAGE_CONTAINER: name of the Blob Container for images - AZURE_BLOB_VIDEO_CONTAINER: name of the Blob Container for videos

Note: For the best experience, use both Sora and GPT-Image-1. However, the app also works if you use only one of these models.

Once everything is set up:

1. Start the backend:

   cd backend
   uv run fastapi dev

   The backend server will start on http://localhost:8000. You can verify it's running by visiting http://localhost:8000/api/v1/health in your browser.

   Note:
   If you encounter the error: ImportError: libGL.so.1: cannot open shared object file: No such file or directory, install the missing OpenCV library:

   sudo apt update
   sudo apt install libgl1-mesa-glx

   This step is not needed in Codespaces as it's automatically installed

2. Open a new terminal to start the frontend:

   cd frontend
   npm run build
   npm start

   The frontend will be available at http://localhost:3000.