# Building a GPU-Powered Web Interface with Gradio and CuPy on Atlantic.Net GPU Server

> URL: https://www.atlantic.net/gpu-server-hosting/building-a-gpu-powered-web-interface-with-gradio-and-cupy-on-atlantic-net-gpu-server/ | Published: 2025-01-22 | Updated: 2026-05-04 | Author: Hitesh Jethva

GPUs (Graphics Processing Units) are indispensable for high-performance computations. They excel at parallel processing, making them ideal for tasks such as machine learning, data analysis, and scientific computations. When paired with intuitive tools like Gradio and CuPy, GPUs become even more accessible, enabling developers to build interactive and efficient applications for real-world use cases.

This guide demonstrates how to set up a GPU-powered web interface for performing arithmetic computations using Atlantic.Net [GPU servers](https://www.atlantic.net/gpu-server-hosting/).

## Prerequisites

Before starting, ensure you have the following:

- An Ubuntu 22.04 Cloud GPU Server.
- CUDA Toolkit and cuDNN Installed.
- A root or sudo privileges.

## Step 1: Installing Required Libraries

To perform GPU-accelerated computations, you need the CuPy library, which provides an interface similar to NumPy but runs operations on the GPU. Additionally, Gradio simplifies the creation of a web interface.

Run the following command to install these libraries:

```bash
pip install cupy-cuda12x gradio
```

To verify the installation, execute:

```bash
python3 -c "import cupy as cp; print(cp.arange(10).sum())"
```

Expected output:

```bash
45
```

This output confirms that **CuPy** is installed correctly and leveraging the **GPU** for computations.

## Step 2: Writing the Application

We will now create a Python application **(app.py)** that performs GPU-based arithmetic operations and hosts a web interface.

Use a text editor such as **nano** to create the application file:

```bash
nano app.py
```

Add the following code:

```bash
import gradio as gr
import cupy as cp

def gpu_arithmetic(num_elements, operation):
    a = cp.arange(num_elements, dtype=cp.float32)
    b = cp.arange(num_elements, dtype=cp.float32)

    if operation == "Add":
        result = a + b
    elif operation == "Multiply":
        result = a * b
    elif operation == "Dot Product":
        result = cp.dot(a, b)
        return f"Result: {result}"

    return f"First 10 elements: {result[:10].get()}"

iface = gr.Interface(
    fn=gpu_arithmetic, 
    inputs=[
        gr.Number(label="Number of Elements"), 
        gr.Dropdown(choices=["Add", "Multiply", "Dot Product"], label="Operation")
    ], 
    outputs="text", 
    description="Perform GPU arithmetic on two arrays of the given length."
)

iface.launch(server_name="0.0.0.0", server_port=8888, share=False)
```

This script does the following:

- **Defines the gpu_arithmetic Function**: Performs operations (Add, Multiply, Dot Product) on two arrays using CuPy.
- **Sets Up the Gradio Interface**: Creates an interactive web interface with:
- **Inputs:** Number of elements and operation type.
- **Output:** Result of the computation.
- **Launches the Interface**: Hosts the application on port **8888.**

## Step 3: Running the Application

You can now run the application using the following command.

```bash
python3 app.py
```

The output should display something like:

```bash

Running on local URL:  http://0.0.0.0:8888
```

## Step 4: Access the Gradio Web UI

1. Open a web browser and navigate to **http://your-server-IP:8888.** Replace **your-server-IP** with your Atlantic.Net server’s public IP address.

2. Specify the array’s number in the given field, select the **“Add”** operation, and click **Submit.** This will add the corresponding elements of two arrays and display the result.

![](https://www.atlantic.net/wp-content/uploads/2024/12/p1-7.png)

3. Specify the number of the array in the given field, select the **“Multiply”** operation, and click **Submit.** This will multiply the corresponding elements of two arrays and display the result.

![](https://www.atlantic.net/wp-content/uploads/2024/12/p2-6.png)

4. Specify the array’s number in the given field, select the **“Dot Product”** operation, and click **Submit.** This will compute the dot product of two arrays and display the result.

![](https://www.atlantic.net/wp-content/uploads/2024/12/p3-3.png)

## Conclusion

Setting up a GPU-powered web interface using Gradio and CuPy on an Atlantic.Net [GPU server](https://www.atlantic.net/gpu-server-hosting/) is a powerful way to handle heavy computations. With CuPy, you can perform fast, GPU-accelerated operations, and Gradio makes it easy to create an interactive web interface for users to access these capabilities.