Skip to content

degrammer/gradio-js-example

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

14 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

title emoji colorFrom colorTo sdk sdk_version app_file pinned license
Mlops Demo
🏃
yellow
purple
gradio
3.40.1
app.py
false
mit

Hugging Face Logo

How Runme elevates your Machine Learning Ops

This demo showcases the utilization of Runme, highlighting a combination of a Runbook Runner and the Runme CLI to enhance Machine Learning Operations through Continuous Integration (CI).

Features

This is a Hugging Face Space using the basic Gradio example to customize JavaScript code. This project primarily aims to demonstrate the usage of Runme as a Runbook, coupled with a potent Runner for enhancing Runbook pipeline scripting. Specifically, we'll offer simple testable JavaScript functions in this example, accessible both locally and through CI. These functions are integrated within Gradio, with the advantage of maintaining separate JavaScript files to enhance discoverability and streamline development workflows.

Install dependencies

pip install gradio

Prepare Injected JavaScript functions (requires Node.js installed)

All the required JavaScript files should be added as part of the out folder, the following script will generate the files automatically. If you need to update or generate new functions, run the following script:

const fs = require('fs')
const functions = require('./js')

Object.keys(functions).forEach((fn) => {
    fs.writeFile(`out/${fn}.js`,functions[fn].toString(), (error) => {
        if (error) {
            return console.error(`Failed to save function ${fn}`)
        }
        console.log(`Function saved ${fn}`)
    })
})

Test JavaScript functions

To ensure an optimal developer experience, it's essential to validate the functionality of your custom JavaScript code reliably. Repeatedly manually running your Gradio app for testing can be cumbersome. By automating unit tests, you not only alleviate this burden but also enable the early identification of integration issues and bugs. This contributes significantly to a smoother development process.

Prior to testing your JavaScript functions within your Gradio app, it's advisable to create unit tests. This proactive approach ensures the correct functioning of your functions and helps you identify errors in advance, saving valuable time that would otherwise be spent on app debugging. Let's use again Node.js test runner to ensure everything works as expected, this can be used too as part of your CI process.

const { describe, it } = require('node:test')
const assert = require('node:assert')
const { reverseWords } = require('./js')

describe('Reverse words function', () => {
   it('Should reverse as expected', () => {
    assert.strictEqual(reverseWords(1,2,3), '3😇2😇1')
   })
})

You can also run the test suite using Runme CLI

runme run test-js

Adding JavaScript functions to your Python code

Ensure you add all the required JavaScript functions to your app.py file

Start running your Gradio app

Ensure the previous cell is executed, otherwise your JavaScript functions will fail or the web app is not going to be executed at all

python app.py

Load the app with reload mode

gradio app.py

Deploy to Hugging Face Space

Just use Git to push to main

Write your commit message

export COMMIT_MESSAGE=Enter your commit message
git add . && git commit -m $COMMIT_MESSAGE && git push gh head

Deploy manually to Hugging Face

https://github.com/degrammer/ml-ops-demo/blob/main/.github/workflows/deploy.yml

About

Write better JavaScript for your Gradio Apps

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published