Sync GitHub repo and Hugging Face Space Repo with GitHub Actions

I’ve used Hugging Face Space for my daily job. However, right now only 2 people are using repos, so we are updating the main branch directly since Hugging Face repo’s git system is totally different from GitHub and it’s not really software engineer friendly. They have their own system.

Our Pull requests do not use forks and branches, but instead custom “branches” called refs that are stored directly on the source repo.

Pull requests and Discussions

As a result, I started thinking of using GitHub as my normal projects’ tasks. Right now, only 2 people are updating the repos and codebase's structure is really simple but for further development, we would need to use GitHub to develop an application.

Then I found a GitHub Action, Sync With Hugging Face Hub.

Sync With Hugging Face Hub - GitHub Marketplace

The steps to sync GitHub repo and Hugging Face Space repo are very easy with that.

Prerequisites
- GitHub account https://github.com/
- Hugging Face account https://huggingface.co/

Steps

Step 1 Create a repo on GitHub

First, we need to create a repository on GitHub.

Step 2 Create a space on Hugging Face

Next we would need to create a new space. In this post, we will create a simple UI with Gradio so we will need to create a Gradiospace.

Hugging Face Space

Step 3 Setup GitHub Action

Now we need to set up GitHub Action to sync two repos via GitHub Action. In this case, the action is kicked when we merge a branch into main branch.

First we need to clone the repo we created in step 1. The following command is what I created to test the GitHub Actions. You need to replace the repo URL with yours.

git clone https://github.com/koji/hugging_face_space.git
git cd hugging_face_space
git checkout -b chore_setup-github-actions

Then create two folders for GitHub Actions.

.github

.github/workflows

We will add a yaml file to workflows. I named push_to_hf_space.ymlbut you can name whatever you want.

name: Sync with Hugging Face Hub

on:
  push:
    branches:
      - main

jobs:
  build:
    runs-on: ubuntu-latest
    steps:
    - name: Sync with Hugging Face
      uses: nateraw/huggingface-sync-action@v0.0.4
      with:
        github_repo_id: your_github_repo_id
        huggingface_repo_id: your_hugging_face_repo_id
        repo_type: space
        space_sdk: gradio
        hf_token: ${{ secrets.HF_TOKEN }}

Mine is here.

https://github.com/koji/hugging_face_space/blob/main/.github/workflows/push_to_hf_space.yml

Before pushing the change to your GitHub repo, we will need to add two more files. One is app.py for a Gradio app and the other is readme.md. When you created a repo on GitHub, you might generate readme.md too. However, we need to update that for Hugging Face space since for space, readme.md is a special file for running a Docker image.

app.py

import gradio as gr

def greet(name):
    return "Hello " + name + "!!"

iface = gr.Interface(fn=greet, inputs="text", outputs="text")
iface.launch()

Readme.md

My readme is like below. You can get your own readme file from your Hugging Face Space Files.

---
title: Gh Action
emoji: 🐨
colorFrom: blue
colorTo: red
sdk: gradio
sdk_version: 4.14.0
app_file: app.py
pinned: false
license: mit
---

Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

Now it’s time to test GitHub Actions. We need push our changes to the GitHub repository.

git add .
git commit -m "set up GitHub Actions and add a simple gradio app"
git push 

After finishing pushing your branch, you just need to merge your branch into edge.

Then you can go to your Hugging Face Space, and you will see something like this.

My repo for this

GitHub - koji/hugging_face_space