Image Caption Web Application

A web application that allows users to upload images and receive AI-generated captions using Microsoft Azure AI Vision. The project features a Vue 3 + Vite frontend and a Flask backend, designed for easy deployment on Azure.

Project Description

This application allows users to upload images via a web frontend. The backend sends the image to Microsoft Azure AI Vision / Computer Vision and returns an image caption, which is displayed in the frontend.

Project Structure

image-caption/
  backend/
    app/
      routes/
      services/
    .venv/
  frontend/
    src/
      components/
      services/
    public/
  docs/
  infra/
    modules/
  scripts/

Local Development

Backend (Flask)

1. Change to the backend directory:

   cd backend

2. Create a local virtual environment:

   python -m venv .venv

3. Activate the environment:

   source .venv/bin/activate

4. Install the dependencies:

   pip install -r requirements.txt

5. Create a .env file (see .env.example).
6. Start the backend (development):

   flask --app run run

   For production (e.g., Azure App Service):

   gunicorn run:app

Frontend (Vue 3 + Vite)

1. Change to the frontend directory:

   cd frontend

2. Install the dependencies:

   npm install

3. Start the development server:

   npm run dev

Environment Variables

• Create a .env file in the backend (see .env.example).
• Required variables:
  • AZURE_VISION_ENDPOINT
  • AZURE_VISION_KEY
  • MAX_CONTENT_LENGTH (optional, e.g., 4 * 1024 * 1024 for 4MB)

Deployment

Prerequisites

• Azure CLI installed and logged in (az login)
• SWA CLI installed for frontend deployment (npm install -g @azure/static-web-apps-cli)
• For backend: Azure App Service and resource group created (see infra/)
• For frontend: Azure Static Web App resource created (see infra/)
• Required environment variables set (see below)

Backend Deployment

To deploy the backend to Azure App Service:

1. Ensure you are logged in to Azure:

   az login
   az account set --subscription "<SUBSCRIPTION_ID_OR_NAME>"

2. Set the required environment variables in your shell:

   export AZURE_VISION_ENDPOINT="https://<your-endpoint>.cognitiveservices.azure.com/"
   export AZURE_VISION_KEY="<your-key>"

3. Run the backend deployment script from the project root:

   ./scripts/deploy_backend.sh

   The script will package the backend, set app settings, and deploy to Azure App Service. The deployed API endpoint will be shown at the end.

Frontend Deployment

To deploy the frontend to Azure Static Web Apps:

1. Ensure you are logged in to Azure:

   az login
   az account set --subscription "<SUBSCRIPTION_ID_OR_NAME>"

2. (Optional) Set the SWA deployment token if not using Azure CLI authentication:

   export SWA_CLI_DEPLOYMENT_TOKEN="<your-static-web-app-deployment-token>"

3. Run the frontend deployment script from the project root:

   ./scripts/deploy_frontend.sh

   The script will build the frontend and deploy it to Azure Static Web Apps. The production URL will be shown at the end.

Notes on Deployment

• The scripts perform pre-checks and will fail early if requirements are not met.
• For custom resource names or locations, adjust the variables at the top of each script.
• Ensure your backend and frontend are correctly linked in Azure for production API calls.
• For infrastructure provisioning, see the infra/ directory and its documentation.

Further Reading & Documentation

• Flask Documentation
• Vue.js 3 Documentation
• Vite Documentation
• Bulma CSS Framework
• Azure AI Vision Documentation
• Azure CLI Documentation
• Bicep Documentation
• Azure App Service Documentation
• Azure Static Web Apps Documentation
• Azure Key Vault Documentation

Authors & Acknowledgements

Author:
Copyright (c) 2026 Roland Abel (GitHub)

AI Assistance:
Parts of this project were created or improved with the help of AI-based tools, including GitHub Copilot and other generative AI assistants.

License

This software is available under the following licenses:

See MIT License (MIT)