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
-
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 resourceGPT-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 resourceGPT-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 resourceAzure 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:
-
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
-
Open a new terminal to start the frontend:
cd frontend npm run build npm start
The frontend will be available at http://localhost:3000.