Bridging the Gap: Using Python and Brython for Machine Learning Web Interfaces

The rise of machine learning has transformed many industries, with companies of all sizes racing to incorporate ML models into their products and services. A common challenge is enabling non-technical end-users to interact with these models through intuitive web interfaces.

Traditionally, this has required data scientists to hand off their trained models to frontend engineers, who then build interfaces using JavaScript and frameworks like React or Angular. But what if it was possible for data scientists to create those user-facing interfaces themselves, using the same language they‘re already comfortable with?

Enter Brython, an implementation of Python 3 that runs in the browser. With Brython, data scientists can create web apps that communicate with backend ML models using Python‘s familiar syntax and libraries. This eliminates the need to context switch between languages and empowers data teams to deliver end-to-end solutions faster.

In this post, we‘ll explore the benefits of using Brython for ML web interfaces, walk through a complete example project, and discuss best practices for architecture and deployment. Whether you‘re a data scientist looking to expand your skillset or a web developer collaborating with ML teams, this guide will help you get started with Brython and understand its potential.

Why Brython for Machine Learning Interfaces?

Python has become the de facto standard language for data science and machine learning. According to the 2021 Stack Overflow Developer Survey, Python is the most wanted language among developers, with 30% of respondents expressing interest in learning it. The same survey found that data scientists and machine learning specialists are among the highest paid developer roles.

However, while Python dominates in the world of data science, it‘s less common in web development. JavaScript and related frameworks like React, Angular, and Vue.js are far more popular choices for building web interfaces. This means that when it comes time to deploy an ML model and make it accessible to users, data scientists often have to hand off their work to a separate web development team.

This handoff can introduce communication overhead, delays, and the risk of requirements getting lost in translation. It also limits the ability of data scientists to prototype and iterate quickly on user-facing features.

Brython offers a way to bridge this gap by allowing data scientists to create web interfaces using Python. Some key benefits of this approach include:

• Reduced context switching between languages and tools
• Ability to prototype and iterate faster
• More control over the end-to-end user experience
• Fewer dependencies on other teams

Of course, Brython is not a silver bullet. For complex, highly interactive web applications, JavaScript frameworks are still the best choice. Brython is best suited for simpler interfaces that mostly involve displaying model outputs and capturing user inputs.

How Brython Works

Brython is a transpiler that converts Python code to JavaScript, which can then run in any modern web browser. It provides a standard library that mirrors Python‘s, along with additional modules for interacting with the browser DOM and events.

Here‘s a simple example of how you might use Brython to create a button that triggers an alert:

<html>
<head>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"></script>
  <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js"></script>
</head>

<body onload="brython()">

  <button id="hello">Click me!</button>

  <script type="text/python">
from browser import document, alert

def hello(e):
  alert(‘Hello Brython!‘)

document[‘hello‘].bind(‘click‘, hello)
  </script>
</body>
</html>

In this example, we first include the Brython library and standard library from a CDN. We also add the brython() function to the body‘s onload attribute, which initializes Brython when the page loads.

Inside the <script type="text/python"> tag, we write our Brython code. First we import the document and alert modules from the browser package. Then we define a hello function that displays an alert when called. Finally, we bind this function to the button‘s click event using document[‘hello‘].bind().

When the user clicks the button, the hello function is called, and the alert is displayed. This is a trivial example, but it demonstrates the basic pattern of using Brython to respond to user events and manipulate the DOM.

Serving ML Models with a Python Backend

Before we can build a Brython interface for an ML model, we need a way to deploy that model as a web service that can receive requests and return predictions.

For Python-based models, a common approach is to use a web framework like Flask or FastAPI to create a REST API. Here‘s a minimal example of how you might serve a scikit-learn model with Flask:

from flask import Flask, request, jsonify
import joblib

app = Flask(__name__)

# Load model from file
model = joblib.load(‘model.pkl‘) 

@app.route(‘/predict‘, methods=[‘POST‘])
def predict():
    # Get data from request
    data = request.get_json(force=True)

    # Make prediction
    prediction = model.predict([data[‘features‘]])

    # Return response
    output = {‘prediction‘: prediction[0]}
    return jsonify(output)

if __name__ == ‘__main__‘:
    app.run(port=5000, debug=True)

In this code, we first load a pre-trained model from a file using joblib. We then define a /predict endpoint that expects a POST request with a JSON payload containing the features for prediction.

When a request is received, we extract the feature data, pass it into the model‘s predict method, and return the result as a JSON response.

To deploy this app, we can use a platform like Heroku or AWS Elastic Beanstalk that supports Python web applications. We‘ll also need to ensure that any required dependencies (like scikit-learn) are specified in a requirements file.

Building the Brython Frontend

With our backend ready, we can now create the Brython frontend that will allow users to interact with the ML model.

Let‘s start with a simple HTML page containing a form for input and an area to display the result:

<!DOCTYPE html>
<html>
  <head>
    <title>ML Predictor</title>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/[email protected]/brython_stdlib.js"></script>
  </head>
  <body onload="brython()">

    <form id="input-form">
      <label for="feature1">Feature 1:</label>
      <input type="text" id="feature1" name="feature1"><br><br>
      <label for="feature2">Feature 2:</label>
      <input type="text" id="feature2" name="feature2"><br><br>
      <input type="button" value="Predict" id="submit-btn">
    </form> 
    <h2>Result:</h2>
    <div id="result"></div>

    <script type="text/python">
from browser import document, ajax

def predict(e):
  feature1 = document[‘feature1‘].value
  feature2 = document[‘feature2‘].value

  body = {
    ‘features‘: [feature1, feature2]
  }

  req = ajax.Ajax()
  req.open(‘POST‘, ‘https://example.com/predict‘, True)
  req.set_header(‘content-type‘, ‘application/json‘)
  req.send(body)

  def on_complete(e):
    if req.status == 200:
      document[‘result‘].text = f"Prediction: {e.target.responseText}"
    else:
      document[‘result‘].text = f"Error: {req.status}"

  req.bind(‘complete‘, on_complete)

document[‘submit-btn‘].bind(‘click‘, predict)
    </script>
  </body>
</html>

This page includes a form with two input fields for features, a submit button, and a div for displaying the prediction result.

In the Brython script, we define a predict function that will be called when the submit button is clicked. This function retrieves the values from the input fields, packages them into a JSON payload, and sends a POST request to the /predict endpoint on our backend using the ajax module.

We also define a callback function on_complete that will handle the response from the server. If the request is successful (status code 200), it will display the returned prediction in the result div. If there‘s an error, it will display the status code.

Finally, we bind the predict function to the button‘s click event.

With this code in place, we have a basic working interface for our ML model. The user can input feature values, click predict, and see the model‘s output displayed on the page.

Deploying the App

To make our Brython app accessible to users, we need to deploy it to a web server. One simple option is to use GitHub Pages, which allows you to serve static files directly from a GitHub repository.

To deploy with GitHub Pages:

1. Create a new repository and push your HTML file (named index.html) to it.
2. Go to the repository settings and scroll down to the "GitHub Pages" section.
3. Select the main branch as your source and click "Save".

GitHub will then provide a URL where your page is live (e.g. https://<username>.github.io/<repo-name>).

Keep in mind that for the app to function, the backend model API must also be deployed and accessible at the URL specified in the Ajax request. Make sure to update this URL to match your deployed backend.

Best Practices and Considerations

When building ML interfaces with Brython, there are a few best practices and considerations to keep in mind:

• Security: Be sure to validate and sanitize any user inputs on the backend to prevent potential exploits. Don‘t trust data from the frontend.
• Performance: Brython adds some overhead compared to native JavaScript. For complex applications, it may be worth using a JS framework instead.
• Error handling: Make sure to handle potential errors gracefully, both in the backend API and the frontend Brython code. Display user-friendly error messages when something goes wrong.
• Testing: Thoroughly test your Brython code in multiple browsers to ensure compatability. Use tools like Selenium for automated frontend tests.
• Scalability: If your app becomes popular, you may need to scale your backend infrastructure to handle increased traffic. Consider using a platform like AWS that can automatically scale based on demand.

Real-World Examples

Brython has been used to create a variety of web applications, from simple utilities to complex dashboards. Here are a few examples:

• Pyodide: A port of Python‘s scientific stack (including NumPy, Pandas, Matplotlib, and Scikit-learn) to WebAssembly, allowing Python code to run in the browser at near-native speed. Pyodide uses Brython for its REPL and notebook interfaces. (Link)
• GenePattern Notebook: An open-source, interactive web application for analyzing genomic data. GenePattern Notebook uses Brython to enable user interaction and visualization in a Jupyter-notebook-like interface. (Link)
• Anvil: A platform for building full-stack web apps with pure Python. Anvil uses Brython to enable Python code to run in the browser, with a simple API for manipulating the DOM and handling events. (Link)

These examples demonstrate the potential of Brython for creating sophisticated web interfaces, especially in data-heavy fields like bioinformatics and scientific computing.

Alternatives to Brython

While Brython is a powerful tool for running Python in the browser, it‘s not the only option. Here are a few alternatives worth considering:

• Pyodide: As mentioned above, Pyodide is a port of Python‘s scientific stack to WebAssembly. It allows Python code to run at near-native speed in the browser, making it well-suited for computationally intensive tasks. Pyodide can be used in combination with Brython or on its own.
• Skulpt: Another implementation of Python in JavaScript, Skulpt is designed to be lightweight and easy to embed in web pages. It supports a subset of Python‘s syntax and standard library.
• Transcrypt: A transpiler that converts Python code to JavaScript, similar to Brython. Transcrypt is focused on performance and generating human-readable JavaScript code.
• PyPy.js: A port of the PyPy Python interpreter to WebAssembly. PyPy.js allows running Python code in the browser with performance similar to native Python.

Each of these tools has its own strengths and use cases. The best choice depends on your specific requirements, such as performance, compatibility, and ease of integration.

The Future of Python in the Frontend

As the popularity of Python continues to grow, especially in fields like data science and machine learning, the demand for tools that allow running Python in the browser will likely increase. Brython and other Python-to-JavaScript transpilers are well-positioned to meet this demand.

At the same time, the rise of WebAssembly is opening up new possibilities for running Python and other languages at near-native speed in the browser. Tools like Pyodide and PyPy.js are already taking advantage of this technology to enable more computationally intensive Python workloads in the browser.

In the future, we can expect to see more tools and frameworks that make it easier to build web interfaces with Python. These may include higher-level libraries for data visualization, user interaction, and integration with popular frontend frameworks.

As more data scientists and ML practitioners learn web development skills, and more web developers learn data science, the lines between these fields will continue to blur. Python‘s versatility and ease of use make it a natural choice for bridging this gap, and tools like Brython will play an important role in enabling this convergence.

Conclusion

In this post, we‘ve explored how Brython can be used to create web interfaces for machine learning models, allowing data scientists to build end-to-end solutions with Python. By serving models with a Python backend and using Brython to create the frontend, teams can reduce context-switching, iterate faster, and deliver more value.

We‘ve walked through a simple example of how to build a Brython interface for a scikit-learn model, including best practices for architecture, security, and deployment. We‘ve also looked at real-world examples of Brython in action and discussed alternative tools for running Python in the browser.

As the demand for data science and machine learning skills continues to grow, tools like Brython will become increasingly important for enabling Python developers to create web interfaces and interact with users. By learning these skills, data scientists can expand their capabilities and deliver more end-to-end value.

Of course, Brython is not a replacement for JavaScript and traditional web development tools, but rather a complement to them. For complex, highly interactive applications, using a framework like React or Angular is still the best approach. But for simpler interfaces and rapid prototyping, Brython offers a powerful and intuitive way to leverage Python skills in the frontend.

Ultimately, the choice of tools and approach depends on the specific needs of the project and the skills of the team. But with Brython, data scientists and Python developers have a new option for creating web interfaces and bringing their models to life. As the field evolves, we can expect to see even more innovative tools and frameworks that empower data teams to deliver value faster and more effectively.