DEV Community: Love Otudor

Building an AI Image Generator with OpenAI

Love Otudor — Wed, 09 Sep 2026 15:59:56 +0000

In this tutorial, we're going to build a web application that uses OpenAI's Images API to turn drawings into photorealistic images. We'll build the entire app using Python with Anvil.

When the app is finished, we'll be able to upload an image and click a button to call the Images API. When the model has finished generating a new image, it will be displayed on the screen, and we can download it.

To build the app, we will:

Create an Anvil app
Drag and drop components to build the UI
Get an API key from OpenAI
Write backend logic to call the OpenAI Images API
Call the API in a background task
Generate the image and update the UI
Add the ability to download the image
Publish our app to the web

For this tutorial, you will need basic Python knowledge and an OpenAI account with API credits.

If you'd prefer to follow the video version of this tutorial, you can find that here: https://www.youtube.com/watch?v=imJ_YaSHxOk

Let's get started!

Step 1 - Create an Anvil app

If you can't find the New M3 theme, you may need to open the "Advanced" dropdown

First, rename the Form to "MainForm" by right-clicking on it in the App Browser, then rename the app. Click on the name at the top of the screen and give it a name like "OpenAI Image Generator".

Step 2 - Build the UI

We're now looking at the Form Editor, where we can drag and drop components from the Toolbox to build our app's UI.

Let's start by adding a Card to the Form to hold our images and buttons. Drop a ColumnPanel inside the Card to make it easier to lay out the components.

Add a FileLoader

We need a button to upload an image - that's what the FileLoader component is for. Drag and drop a FileLoader into the ColumnPanel.

Centre-align the FileLoader using the floating Object Palette. From the Properties Panel, change its appearance property to filled. We only want to upload images, so set the file_types property to image/*.

Add Image components

We need an Image component to display the uploaded image. Drag and drop an Image component above the FileLoader. Change its name to uploaded_img.

We don't want it visible until an image is uploaded, so click the eye icon on the Object Palette to make it invisible. Also set its display_mode property to fill_width.

Add another Image component next to the first one to display our generated image. Name it output_img and make it invisible too.

Add the Generate button

We now need a button that, when clicked, will call the OpenAI API. Add a Button component to the page and name it generate_button. Centre it, change the text to "Turn into photo", and make it invisible to start. We'll make the Button visible once a file is uploaded.

Handle the file upload

Let's write some code that will make the uploaded_img and generate_button components visible when an image is uploaded.

Select the FileLoader and click on change event from the Object Palette. This opens the code view and automatically creates a method that runs when a file is uploaded.

Add the following code:

@handle("file_loader_1", "change")
def self.file_loader_1_change(self, file, **event_args):
    """This method is called when a new file is loaded into this FileLoader"""
    if file:
        self.uploaded_img.source = file
        self.uploaded_img.visible = True
        self.generate_button.visible = True

Test out the app

Let's test out our UI and the code we just wrote. At the top right of the Anvil Editor, click the green Run button. Upload an image and you should see it appear along with the "Turn into photo" button.

Step 3 - Set up OpenAI

We're going to use the Images API from OpenAI to turn our drawings into photorealistic images. In order to use this API, we need to get an API key from OpenAI.

Create an account and add credits

If you don't already have an OpenAI account, create one at platform.openai.com.

Once logged in, go to the Billing page and add credits to your account. The minimum amount that you can add is typically $5, which is plenty for building and testing this app.

Verify your account

You'll need to verify your account to use the Images API. In the "General" tab, look for a "Verify Organization" button.

If you don't see the verification button immediately, you may need to wait a few days for it to appear. Once verified, it will say "Organization verified".

Get your API key

Navigate to "API keys" and click "Create new secret key". Give it a name and copy the key that appears. You won't be able to see the key again after navigating away.

Store your API key securely

We can now store the key securely in our Anvil app. Back in the app, click the blue '+' button in the Sidebar Menu and choose "App Secrets".

Click "Create new secret" and name it OPEN_AI_API_KEY. Click "Set value" and paste in your API key from OpenAI. This key is now encrypted and stored securely.

Step 4 - Write backend code to call the API

We can now set up our backend to call the API and get a generated image.

Install the `openai` pacakage

First, we need to install the OpenAI Python package in our app's server environment.

In the Sidebar Menu, navigate to Settings and select "Python versions". Switch the base package to "Machine Learning", and in the packages section, add openai. You can leave the version box blank.

Copy the OpenAI code

Back in the App Browser, click "Add Server Module" to add a server environment to your app. This is a Python environment running on Anvil's secure cloud servers.

Let's first copy and paste the code from the Images API documentation that can be found here. Add your API key that's stored in App Secrets to the OpenAI client:

client = OpenAI(api_key=anvil.secrets.get_secret('OPEN_AI_API_KEY'))

We'll need to modify this code so that it works in Anvil but for now, your server code should look like this:

import anvil.secrets
import anvil.server
import base64
from openai import OpenAI
client = OpenAI(api_key=anvil.secrets.get_secret('OPEN_AI_API_KEY'))

prompt = """
Generate a photorealistic image of a gift basket on a white background 
labeled 'Relax & Unwind' with a ribbon and handwriting-like font, 
containing all the items in the reference pictures.
"""

result = client.images.edit(
    model="gpt-image-1",
    image=[
        open("body-lotion.png", "rb"),
        open("bath-bomb.png", "rb"),
        open("incense-kit.png", "rb"),
        open("soap.png", "rb"),
    ],
    prompt=prompt
)

image_base64 = result.data[0].b64_json
image_bytes = base64.b64decode(image_base64)

Create a function

An Anvil server module doesn’t run top to bottom like a normal Python script. Any code we write here will run when it’s called, so we need to turn this code into a function. We’ll then call that function when the generate_button is clicked.

Create a function called generate_image that takes in input_img as an argument. Indent the code we copied into this function and change the prompt to say "Turn the drawing into a photorealistic image". Your server code should now look something like this:

import anvil.secrets
import anvil.server
import base64
from openai import OpenAI
client = OpenAI(api_key=anvil.secrets.get_secret('OPEN_AI_API_KEY'))


def generate_image(input_img):
    result = client.images.edit(
        model="gpt-image-1",
        image=[
            open("body-lotion.png", "rb"),
            open("bath-bomb.png", "rb"),
            open("incense-kit.png", "rb"),
            open("soap.png", "rb"),
        ],
        prompt="Turn the drawing into a photorealistic image"
    )

    image_base64 = result.data[0].b64_json
    image_bytes = base64.b64decode(image_base64)

    # Save the image to a file
    with open("gift-basket.png", "wb") as f:
        f.write(image_bytes)

Pass in the input image

We need to pass in a file path for our input image into the OpenAI API. We can get a temporary file path using anvil.media.TempFile.

OpenAI checks the MIME type of images based on the file extension, not the actual content, so we also need to append the proper file extension to our temporary file path.

Add the following import statements to your server code:

import anvil.media
import mimetypes
import os

Then, inside generate_image, we'll get the MIME type of input_img and use mimetypes to find the corresponding file extension. We then need to create a TempFile and rename the filepath so that it includes this extension:

def generate_image(input_img):
    #get the MIME type and extension from the input_img
    mime_type = input_img.content_type
    ext = mimetypes.guess_extension(mime_type)
    #create a temporary file path
    with anvil.media.TempFile(input_img) as tmp_path:
        #add the extension to the temporary path
        new_path = tmp_path + ext
        result = client.images.edit(
            model="gpt-image-1",
            image=[
                #pass the path to the model
                open(new_path, "rb"),
            ],
            prompt="Turn the drawing into a photorealistic image"
        )

        image_base64 = result.data[0].b64_json
        image_bytes = base64.b64decode(image_base64)

        # Save the image to a file
        with open("gift-basket.png", "wb") as f:
            f.write(image_bytes)

Create a media object

When the model finishes generating an image, we can create an Anvil Media Object instead of writing to a file. Replace the with statement at the end of the server function with:

output_img =  anvil.BlobMedia(content_type="text/jpeg", content=image_bytes, name="ai-image.jpg")

The name argument will be the name of your file when downloaded. You can change this name to anything you'd like.

Your server code should now look like this:

import anvil.secrets
import anvil.server
import base64
from openai import OpenAI
import anvil.media
import mimetypes
import os

client = OpenAI(api_key=anvil.secrets.get_secret('OPEN_AI_API_KEY'))


def generate_image(input_img):
    #get the MIME type and extension from the input_img
    mime_type = input_img.content_type
    ext = mimetypes.guess_extension(mime_type)
    #create a temporary file path
    with anvil.media.TempFile(input_img) as tmp_path:
        #add the extension to the temporary path
        new_path = tmp_path + ext
        result = client.images.edit(
            model="gpt-image-1",
            image=[
                #pass the path to the model
                open(new_path, "rb"),
            ],
            prompt="Turn the drawing into a photorealistic image"
        )

    image_base64 = result.data[0].b64_json
    image_bytes = base64.b64decode(image_base64)

    # Save the image to a file
    output_img =  anvil.BlobMedia(content_type="text/jpeg", content=image_bytes, name="ai-image.jpg")

Step 5 - Run the function in the background

The image generation request may take some time, so we don't want our server to hang while waiting. To prevent this, we can run the function in the background using Background Tasks.

Create the background task

To turn the function into a background task, we just need to decorate it with @anvil.server.background_task.

@anvil.server.background_task
def generate_image(input_img):
    ...

Launch the background task

We want to be able to launch the background task when the generate_button is clicked. To do that, we need to create a client-callable function that launches the background task.

In the ServerModule, add the following function

@anvil.server.callable
def launch_bg_task(input_img):
    task = anvil.server.launch_background_task('generate_image', input_img)
    return task

The @anvil.server.callable decorator makes this function callable from our frontend code.

anvil.server.launch_background_task returns a Task object, which we can use to check when the background task is finished and get the return value.

Store the generated image in a Data Table

We can't return a Media object directly from a background task, so we'll store the generated image in a Data Table.

Choose Data from the Sidebar Menu and click "Add Table" to create a new Data Table. Call this table tasks and add the following columns:

image (Media column) - for the generated image
task_id (Text column) - for the background task ID

Add the generated image to the Data Table

When the image has finished generating, we need to add a row to the Data Table and return the row. Add the following lines of code to the bottom of the generate_image function:

task_id = anvil.server.context.background_task_id
row = app_tables.tasks.add_row(image=output_img, task_id=task_id)
return row

Your finished ServerModule should now look something like this:

import anvil.secrets
import anvil.server
import base64
from openai import OpenAI
import anvil.media
import mimetypes
import os

client = OpenAI(api_key=anvil.secrets.get_secret('OPEN_AI_API_KEY'))

@anvil.server.callable
def launch_bg_task(input_img):
    task = anvil.server.launch_background_task('generate_image', input_img)
    return task

@anvil.server.background_task
def generate_image(input_img):
    #get the MIME type and extension from the input_img
    mime_type = input_img.content_type
    ext = mimetypes.guess_extension(mime_type)
    #create a temporary file path
    with anvil.media.TempFile(input_img) as tmp_path:
        #add the extension to the temporary path
        new_path = tmp_path + ext
        result = client.images.edit(
            model="gpt-image-1",
            image=[
                #pass the path to the model
                open(new_path, "rb"),
            ],
            prompt="Turn the drawing into a photorealistic image"
        )

    image_base64 = result.data[0].b64_json
    image_bytes = base64.b64decode(image_base64)

    # Save the image to a file
    output_img =  anvil.BlobMedia(content_type="text/jpeg", content=image_bytes, name="ai-image.jpg")
    task_id = anvil.server.context.background_task_id
    row = app_tables.tasks.add_row(image=output_img, task_id=task_id)
    return row

Step 6 - Generate the image and update the UI

Now that our server code is finished, we can launch the background task from the generate_button.

Launch the background task when the button is clicked

Switch back to the Design view of MainForm and select the generate_button. Click on click event from the Object Palette to set up a function that will run when the Button is clicked.

From this function, we want to call launch_bg_task, passing in the uploaded file. We also want to disable the generate_button while the background task is running:

    @handle("generate_button", "click")
    def generate_button_click(self, **event_args):
        """This method is called when the button is clicked"""
        self.task = anvil.server.call('launch_bg_task', self.file_loader_1.file)
        self.generate_button.enabled = False

Add a progress indicator

Switch back to Design view, and add a LinearProgressIndicator component underneath the Image components. We'll use this to indicate to the user that the image is being generated.

Click on the eye icon from the Object Palette to make the component invisible to start. We'll make it visible while the image is being generated.

Update the generate_button_click event to make the linear_progress_indicator visible when clicked:

    @handle("generate_button", "click")
    def generate_button_click(self, **event_args):
        """This method is called when the button is clicked"""
        self.task = anvil.server.call('launch_bg_task', self.file_loader_1.file)
        self.generate_button.enabled = False
        #indicate that the task is running
        self.linear_progress_indicator_1.visible = True

Update the UI when the image has been generated

We need to poll the server to check if the background task has finished running and our image has been generated.

Drag and drop a Timer component onto the Form. It will appear at the top because it's an invisible component. Timers have an interval property that determines how frequently they raise a tick event. We can then write a function that runs every time the Timer "ticks".

From the Properties Panel, set the Timer's interval to 0. We don't want it to start ticking until we tell it to.

From the Object Palette, set up a tick event handler for the Timer. In here, we want to check if the background task has finished, and if so, we'll update the UI accordingly. We can also use with anvil.server.no_loading_indicator to stop Anvil's loading spinner from appearing every time we poll the server.

Your timer_1_tick function should look like this:

    @handle("timer_1", "tick")
    def timer_1_tick(self, **event_args):
        """This method is called Every [interval] seconds. Does not trigger if [interval] is 0."""
        with anvil.server.no_loading_indicator:
            #check if the background task has finished
            if self.task.is_completed():
                #get the image from the Data Table row 
                self.generated_img = self.task.get_return_value()['image']
                #display the generated image
                self.output_img.source = self.generated_image
                self.linear_progress_indicator_1.visible = False
                self.output_img.visible = True
                self.generate_button.enabled = True
                #stop the timer from ticking
                self.timer_1.interval = 0

Step 7 - Make the generated image downloadable

Finally, we can add the ability to download the generated image.

Back in Design view, add a Button to the page and name it download_button. Centre align the Button and make it invisible. Change it's appearance to tonal and set its icon to mi:downlaod.

Set up a click event handler for the download_button, and inside that function, call anvil.media.download(self.generated_image).

    @handle("download_button", "click")
    def download_button_click(self, **event_args):
        """This method is called when the component is clicked."""
        anvil.media.download(self.generated_img)

At the top of the Form code, make sure to import anvil.media:

import anvil.media

Step 8 - Test and publish

It's now time to test out the app! Click the green Run button, upload a drawing and click "Turn into photo". Wait for the AI to generate a photorealistic image and then try downloading it.

To publish your app to the web, click "Publish" at the top right of the editor, then "Publish this app". You'll get a URL you can share with others.

What we built

We built a complete web app that:

Let's you upload an image
Connects to OpenAI's Images API
Uses a background task to call the API and generate an image
Stores generated images in a Data Table
Displays the generated image on the UI
Allows users to download their results

We did it all in Python and deployed it instantly to the web!

Next steps

There's a lot you can do to extend this app:

Error handling: Catch errors from OpenAI and display helpful messages to users
User accounts: Add login functionality so users can see their previously generated images
Payments: Use Anvil's Stripe integration to charge for API usage
Different models: Let users choose between different OpenAI image models or prompts

New to Anvil?

If you're new here, welcome! Anvil is a platform for building full-stack web apps with nothing but Python. No need to wrestle with JS, HTML, CSS, Python, SQL and all their frameworks - just build it all in Python.

Yes - Python that runs in the browser. Python that runs on the server. Python that builds your UI. A drag-and-drop UI editor. We even have a built-in Python database, in case you don't have your own.

Why not have a play with the app builder? It's free! Click here to get started:

Build with AI in the Anvil Editor

Love Otudor — Wed, 01 Jul 2026 15:19:19 +0000

Anvil's AI integration is here! You can now connect to and chat with your favourite AI agent directly from the Anvil Editor.

Whether you're starting a new project or improving an existing one, AI agents in Anvil understand how Anvil apps are built. That means less time explaining your framework to an AI and more time building. You can ask it to build an entire app from a prompt, or bring it in as a coding assistant to fix bugs, implement features, or explain unfamiliar code.

Read on to find out more, or start building now.

Connect to your preferred Agent with no Upcharge

Connect your existing ChatGPT or Claude account from the Anvil Editor and start chatting straight away. Anvil doesn't add any extra charges, so you only pay for your provider as normal, whether you're on a free or paid plan.

With Anvil Enterprise, you can connect your own enterprise model provider and private endpoints instead.

Generate Apps from a Prompt

Describe the app you want to build using plain text, recorded audio, or images, and the agent will build it for you. It can create Forms, layouts, server code, modules, Data Tables, and any other Anvil services your app needs, all in one go. Because the agent understands how Anvil apps are structured, it generates apps that feel familiar, using Python and tools you already know.

Need a particular look and feel? Instead of describing layouts, spacing, and colours in words, you can attach images to your prompt to guide the design of your app. The agent uses those images to create interfaces that are closer to what you have in mind from the start.

Tweak the Results

The agent writes real, editable code, and every change it makes can be modified or reverted in the Anvil Editor. You can still drag and drop components into the generated UI in the designer like you always have, or edit the properties of the generated UI elements in the Properties panel. The same goes for your Forms, modules, Data Tables, and everything else the agent creates.

You can also ask the agent to make changes to the code from chat. You can even mention specific Forms, modules, layouts, or assets in the chat, so the agent knows exactly what you're referring to.

Use the Agent on your existing Apps

The agent works just as well on existing apps. Ask it to implement new features, fix bugs, suggest improvements, or explain unfamiliar code. You can also use agent commands like /review-commit to review code changes in a particular commit.

Because the agent reads and understands your existing Anvil code, its changes and suggestions fit naturally into your app's architecture.

Get started

Open an app in the Anvil Editor, click the ✧ icon in the sidebar, connect your AI provider, and start chatting.

For tips on getting the best results, check out our docs and prompting best practices.

Looking forward to what you build!

More about Anvil

Build a Web App with MongoDB Using Just Python

Love Otudor — Tue, 13 Jan 2026 16:37:03 +0000

Build and deploy a full-stack web app that interacts with your external database using only Python. No HTML, CSS, or JavaScript required.

In this tutorial, we guide you step-by-step on how to create a Customer Relationship Management (CRM) system connected to a MongoDB Atlas cluster, starting completely from scratch. You'll see how to build both the frontend and backend in Python using Anvil and deploy it to the web with two clicks.

Anvil lets you build full-stack web apps with all the power of Python and the flexibility of code.

In this tutorial, we will cover:

Installing Python packages in your Server Module
Securing passwords with App Secrets
Communicating between Forms with custom events
Authentication with the Users Service
Deploying your app on Anvil's free hosting

More about Anvil

Case Study: How Chris Houston Built a BI Tool with Anvil

Love Otudor — Fri, 11 Jul 2025 14:45:28 +0000

Query Streams transforms Excel and Google Sheets into powerful BI tools by enabling real-time database queries directly within the spreadsheet—no coding required. Built as a nights-and-weekends side project by Chris using Anvil, Query Streams soft launched just four weeks ago and is already being used by data analysts across multiple companies.

Built by a solo developer

Production-ready in under 5 months

Google Sheets add-on is live

Microsoft Excel add-in is live

The Challenge: When BI Tools Meet Reality

Every data team knows the cycle: Companies invest heavily in BI tools because everyone loves beautiful dashboards. Yet somehow, the most common follow-up question is still:

"The dashboards look great… uh, how do I export this to a spreadsheet?"

And then it all ends up in a spreadsheet anyway. Despite years of trying to move away from Excel and Google Sheets, spreadsheets are more popular than ever. According to a 2025 survey by Alteryx, 76% of data analysts still use spreadsheets as their primary tool.

What If We Stopped Fighting Spreadsheets?

Chris had been thinking about this for years. What if, instead of replacing spreadsheets, we empowered them?
“What if we didn’t try to replace spreadsheets with BI tools? What if we made spreadsheets the BI tool?”
This idea stuck with him until just after Thanksgiving 2024, when he started building a solution.

The Solution: Turn Spreadsheets Into the BI Tool

Query Streams is a real-time data integration platform that lets users run SQL queries from Google Sheets and Excel directly against remote databases, without exposing credentials, setting up VPNs, or configuring firewalls. It supports SQL Server, MySQL, PostgreSQL, SQLite, Access, and other databases. You can:

Share and receive queries
Build live dashboards
Securely expose specific database queries
Choose what data to share and with whom

No hassle. No copy-pasting. No manual exports. Just real-time data, right where analysts already work.

Building Query Streams: Smarter Tools, Built Faster with Anvil

The most challenging part of building Query Streams was building the network agent in C# and other technologies that Chris wasn’t familiar with. Once he overcame that technical hurdle, building the web app in Anvil was straightforward.

With minimal experience in HTML, CSS, and JavaScript, Chris leaned heavily on Anvil’s custom HTML support and Anvil components to bring his unique UI ideas to life.

I thought we were locked into the Anvil components on the designer. But as I explored custom components in Anvil, I realised that, wow, you can build anything in Anvil.

Chris Houston — Founder and CEO, Query Streams

In just four months, Query Streams was ready to use. Built entirely in Chris's spare time while working a full-time job. Since Anvil is web-based, he could work on Query Streams wherever and whenever he had time—whether at home, in early mornings, or even while travelling with just his laptop.

The Results: From Idea to Impact

Query Streams has begun gaining traction even before its official launch. In the four weeks since its soft launch with the Google Sheets add-on, teams and analysts across several organisations have started using the platform.

Now, with the Excel add-in also live on the Microsoft AppSource marketplace, Query Streams has expanded its reach to both major spreadsheet platforms. With both add-ons available, Chris is preparing for the official launch and broader publicity efforts. You can follow along and get updates on X and LinkedIn.

Anvil is like a Swiss army knife of awesome! It allowed me to build Query Streams with a lot of ease while working alone.

Chris Houston — Founder and CEO, Query Streams

More Information

Query Streams lets you run real-time database queries directly from Excel or Google Sheets — no code required.

If you’re new to Anvil and want to see how you can build powerful web apps using just Python, up to 7× faster than traditional development:

Have questions or want to get in touch? Visit anvil.works/contact.

Secure Team Collaboration in Anvil

Love Otudor — Fri, 30 May 2025 14:48:49 +0000

You asked and we answered! We put together a practical how-to guide on collaborating as a team in Anvil. Building amazing Anvil apps is even better with your team by your side, and we've developed foolproof methods to make this process hassle-free.

This guide walks you through how to:

Set up secure, real-world workflows for collaborating on Anvil apps while keeping your production environment isolated and safe.
Separate development and production environments to ensure only well-tested and reviewed changes reach your users.

Whether your team prefers working together on a shared Anvil app or on individual ones, this step-by-step guide will help you implement Git-based workflows that improve code quality and team efficiency.

More about Anvil

Building a Game App with Just Python

Love Otudor — Wed, 16 Apr 2025 16:51:04 +0000

"Guess the Sketch" is a multiplayer game where you draw sketches and challenge friends to guess what they are. Players earn points for correct guesses, with fewer attempts leading to higher scores. Each round, one player is chosen to sketch, while the others try to guess as quickly as possible.

I built this game using Python and Anvil, and it was surprisingly easy! I didn’t need to write HTML, CSS, or JavaScript. In this post, I will walk you through the key parts of building Guess the Sketch:

Building the UI,
Saving and sending sketches,
Sending invites,
Managing players and scores, and
Publishing and sharing.

Let's get started!

Building the UI

With Anvil’s drag-and-drop editor, building the UI was very intuitive. Instead of writing HTML and CSS, I simply dragged components from the Toolbox onto the Form and arranged them as needed. Here is how easy it was to build the SketchScreen, where players create and name their sketches.

Anvil’s Canvas component provided a seamless way to add a drawing area to the game. It is a Python wrapper around the HTML <canvas> element, with built-in methods and event handlers that handle drawing effortlessly. I used the mouse_down, mouse_move, and mouse_up events to track real-time mouse movement and draw lines on the canvas. Adding an eraser was as simple as setting the brush colour to match the background of the drawing area.

Want to learn more about the Canvas component? Check out this Canvas Tutorial:

Saving and Sending Sketches

Once a player finishes drawing and clicks the Send Sketch button, the image is retrieved from the Canvas using the .get_image() method:

sketch = self.canvas_1.get_image()

This converts the sketch into a Media object, which is then stored in a Data Table for later retrieval.

When a player submits a sketch, one of two things happens:

A new game is created, along with its first round (if the player is starting a new game).
A new round is added to an existing game, which happens when a player joins an ongoing game and takes their turn.

Here’s how I handled both scenarios:

sketch = self.canvas_1.get_image()

# Add a round to an existing game
if self.game_id:
  anvil.server.call('add_game_round', self.game_id, sketch, sketch_name)
  navigate(path = "/invite/:id", params = {"id":self.game_id})

# Create a new game
else:
  game_id = anvil.server.call('start_game', sketch, sketch_name)
  navigate(path = "/invite/:id", params = {"id":game_id})

In both cases, a new game round is created and linked to the current game, whether the game is newly created or ongoing.

With Data Tables, creating a round is as simple as inserting a new row into the Rounds Table and adding the round ID to the corresponding game's rounds column (which stores a list of round IDs for that game).

Here’s how I create and link a round to an existing game:

@anvil.server.callable(require_user=True)
def add_game_round(game_id, image, sketch_name):
  # Other game logic...
  game = app_tables.game_table.get_by_id(game_id)
  round = app_tables.rounds_table.add_row(game_id=game_id, image=image, owner=player, sketch_name=sketch_name, start_time=datetime.now())
  game['rounds'] += [round]
  # Other game logic...

Sending Invites

Anvil has a built-in Email Service, which makes sending invites as simple as a single function call. I used anvil.email.send() to email friends a game invite with a preview of the sketch as an inline attachment:

  anvil.email.send(
    bcc = emails, 
    from_address = player['email'], 
    subject = f"{player['name']} is inviting you to Guess the Sketch!",
    html = f"""
      Hey,
      I just created this sketch:<br>
      <img src="cid:sketch"><br>
      Think you can figure out what it is? Click this link to play: {link} 
    """,
    inline_attachments = {'sketch': image})

Players receive this email with a preview of the sketch right in their inbox. Here’s how it looks:

This makes it really easy for players to see the sketch before they click the link to play.

Managing Players and Scores

To manage player authentication, I used Anvil’s Users Service, which automatically created a Users Table that stored player details.

With just one line, I could add a login Form:

anvil.users.login_with_form()

This allows players to sign up and log in with their Google accounts, making it easy to track their progress across games. Each new user is automatically added as a row in the Users Table.

At any point in the app, I can access the currently logged-in player by calling:

player = anvil.users.get_user()

Tracking Player Scores

To track scores, I added a points column to the automatically generated Users Table, where I store the total points each player accumulates.

For every point a player earns in a game, I update the player’s total score:

player = anvil.users.get_user()

# Other game logic...

    if player['points']:
      player['points'] += points_gained
    else:
      player['points'] = points_gained

This ensures that scores remain updated and persistent across game sessions.

Publishing and Sharing

Once everything was ready, publishing the game was just one click on the Publish button in the Anvil editor. I instantly got a public URL, that I could share with friends to start playing right away!

Want to Build Your Own?

These are just some of the highlights, but you can clone the full project and explore how it works yourself.

More about Anvil

Introducing the Interactive Debugger in Anvil

Love Otudor — Wed, 26 Feb 2025 09:47:49 +0000

Say Hello to the Interactive Debugger in Anvil

We are very excited to announce the first release of the Interactive Debugger in Anvil. Say goodbye to countless print statements!

With the Interactive Debugger, you can now pause your code as it executes, inspect variables, and gain deeper insights into what’s happening in your code—whether on the client or server side.

What is the Interactive Debugger?

The Interactive Debugger lets you:

Add breakpoints to your code to pause execution at specific lines.
Inspect variables and values at runtime.
Debug both client-side and server-side code, including background tasks and HTTP endpoints.

Getting started is simple: Click in the gutter next to any executable line of code to add a breakpoint and then run your code. When this breakpoint is hit, the debugger pauses execution and opens the Debugger Window, where you can easily view and inspect all the variables in your code.

Get Deeper Insights into your Code in real time

With the debugger, you can add and remove breakpoints even while execution is paused, allowing you to adjust your debugging strategy as needed. The debugger toolbar gives you complete control to resume, restart, or stop execution, step over breakpoints, and step into or out of functions effortlessly. This makes it easy to navigate through your code seamlessly and gain a deeper understanding of its behaviour.

Easy Debugging Across Client and Server Code

Anvil’s debugger allows you to step into server code directly from client code. For example, you can start in your client-side form code and step directly into your server code while showing the entire call stack on the browser frame.

Here is a demo illustrating how you can step into server code from client code seamlessly:

Debug Background Tasks and HTTP Endpoints

Debugging background tasks and HTTP endpoints in server modules has never been easier. By adding breakpoints to your background tasks or endpoint calls, you can pause execution, inspect variables, and diagnose issues with accuracy and confidence.

Availability

The debugger is available to everyone!

Free users can use Anvil’s debugger only on the client-side (Form) code.
Client-side and server-side debugging is available on a Business Plan or higher.

What’s Next?

This is just the first version of the Anvil Debugger and we have plans for more interesting features, so stay tuned! In the meantime, we would love to hear your feedback! Try out the debugger today and let us know how it works for you.

For a deep dive into debugging with the interactive debugger in Anvil, as well as additional tools to enhance your debugging process, check out our Debugging Documentation.

Happy debugging!

DEV Community: Love Otudor

Building an AI Image Generator with OpenAI

Step 1 - Create an Anvil app

Step 2 - Build the UI

Add a FileLoader

Add Image components

Add the Generate button

Handle the file upload

Test out the app

Step 3 - Set up OpenAI

Create an account and add credits

Verify your account

Get your API key

Store your API key securely

Step 4 - Write backend code to call the API

Install the openai pacakage

Copy the OpenAI code

Create a function

Pass in the input image

Create a media object

Step 5 - Run the function in the background

Create the background task

Launch the background task

Store the generated image in a Data Table

Add the generated image to the Data Table

Step 6 - Generate the image and update the UI

Launch the background task when the button is clicked

Add a progress indicator

Update the UI when the image has been generated

Step 7 - Make the generated image downloadable

Step 8 - Test and publish

What we built

Next steps

New to Anvil?

Build with AI in the Anvil Editor

Connect to your preferred Agent with no Upcharge

Generate Apps from a Prompt

Tweak the Results

Use the Agent on your existing Apps

Get started

More about Anvil

Build a Web App with MongoDB Using Just Python

More about Anvil

Case Study: How Chris Houston Built a BI Tool with Anvil

The Challenge: When BI Tools Meet Reality

What If We Stopped Fighting Spreadsheets?

The Solution: Turn Spreadsheets Into the BI Tool

Building Query Streams: Smarter Tools, Built Faster with Anvil

The Results: From Idea to Impact

More Information

Secure Team Collaboration in Anvil

More about Anvil

Building a Game App with Just Python

Building the UI

Saving and Sending Sketches

Sending Invites

Managing Players and Scores

Tracking Player Scores

Publishing and Sharing

Want to Build Your Own?

More about Anvil

Introducing the Interactive Debugger in Anvil

Say Hello to the Interactive Debugger in Anvil

What is the Interactive Debugger?

Get Deeper Insights into your Code in real time

Easy Debugging Across Client and Server Code

Debug Background Tasks and HTTP Endpoints

Availability

What’s Next?

More about Anvil

Install the `openai` pacakage