HuggingFaceのSpaceを構築する手順書

# HuggingFaceのSpaceを構築する手順書です。  
前提知識: コマンドプロンプトの操作経験者  
到達目標: HuggingFaceのSpaceの環境構築及び実行  

# システム要件  
- ツール  
[Git](https://git-scm.com/)  
- リポジトリ  
[Gradio](https://www.gradio.app/)のアプリが開発済みでローカルにClone済みであること。  
- アカウント  
[HuggingFace](https://huggingface.co/)の開設済みアカウント  
⚠アカウント作成から一週間程度経過しないとスペースは作成出来ませんでした。(n=1) 
画像は、新規アカウント作成後のSpaceの作成制限。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168591/487175f4-938f-29cd-2b8a-db33b32bac70.png)

# 作業手順
1. [Spaceの設定情報をReadMe.mdに追加](#1-Spaceの設定情報を追加)  
1. [Spaceのリポジトリを作成](#2-spaceのリポジトリを作成)  
1. [アクセストークンを作成](#3-アクセストークンを作成)  
1. [Spaceにプッシュ](#4-spaceにプッシュ)  
1. [アプリの動作確認](#5-アプリの動作確認)  
---

## 1. Spaceの設定情報を追加  
- ローカルリポジトリの直下の`ReadMe.md`ファイルの冒頭にSpaceの設定情報を追加する。  
記述サンプルと公式情報：[Spaces Configuration Reference](https://huggingface.co/docs/hub/spaces-config-reference)
```ReadMe.md  
---
license: mit
title: Sample
sdk: gradio
emoji: 📊
colorFrom: yellow
colorTo: yellow
pinned: false
---
```
- 変更をコミットし、`git pull`、`git push`を実行する。  

## 2. Spaceのリポジトリを作成
Spaceにリポジトリを作成しGitで操作できるようにする。  
https://huggingface.co/spaces を開き「Create new Space」ボタンをクリックし、新しいSpaceを作成する。  
![Spaceの作成画面](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168591/cd21b5c2-a427-08f3-e7f4-b9d4b397bd50.png)
内容を入力し、Select the Space SDKは`Gradio`を選択し「Create Space」を押す。  
> **NOTE**  
> Spaceの可視性の値(`Public`と`Private`)は、後からSetttings画面で変更が行える。  

## 3. アクセストークンを作成  
- https://huggingface.co/settings/tokens を開き、「New Token」ボタンをクリックし、アクセストークンを作成する。  
  - Name: `任意の名前`  
  - Type: `Fine-grained (custom)`  
  - 「Generate a token」ボタンをクリックして生成する。  
  - アクセストークンの値の横の「Copy」をクリックしてクリップボードにコピーする。    
  - 「Set Permissions」ボタンをクリックし、「Edit Access Token Permissions」画面に移動する。  
- Edit Access Token Permissions画面  
  - 「Repositories permissions」の項目を設定する。  
1, 「Search for repos」のテキスト欄をクリックしてリポジトリを選択
2, 「Write access to contents/settings of selected repos」をチェックする。
3, 設定を保存する。  
    一番下の「Save」ボタンをクリックする。

## 4. Spaceにプッシュ  
### Spaceのリポジトリを`Git Clone`コマンドで複製する。
- `git clone`します。  
ローカルリポジトリ <---- リモートリポジトリ  
```
git clone https://huggingface.co/spaces/<repo_path>
```
`<repo_path>`はリポジトリのパスです。  

- ローカルにClone済みのGradioアプリのリポジトリを、ローカルのSpaceリポジトリにコピーする。  

```フォルダの構造.txt
  / (ローカル)
  ├── Gradioアプリのリポジトリ/  (.git以外をSpaceのリポジトリにコピー)
  └── Spaceのリポジトリ/
```

### Spacesのリモートリポジトリにプッシュする  
- `Git Clone`したSpaceのローカルリポジトリに移動する。  
```
cd <Spaceのローカルリポジトリ名>
```
- `git remote set-url`コマンドでリモートURLを変更する。  
```
git remote set-url origin https://<user_name>:<token>@huggingface.co/<repo_path>
```
`<user_name>`はHugging Faceのユーザー名、`<token>`は作成したアクセストークン、`<repo_path>`はリポジトリのパスです。 

> **NOTE**  
> リモートURLを変更する前に、[git remote -v](https://git-scm.com/docs/git-remote)で現在のリモートURLを確認できます。
```
git remote -v
```
- ローカルで変更をステージングし、コミットします。  
```
git add .
git commit -m "Commit message"
```
- `git pull`  
ローカルリポジトリ <---- リモートリポジトリ  
```
git pull origin main
```
- git push  
ローカルリポジトリ ----> リモートリポジトリ
```
git push origin main
```

### 5. アプリの動作確認  
到達目標: 状態がRunningになり、動作確認を行える事  
プッシュすると、アプリが自動的にビルドされ、起動する。  
※`Building`→`Starting`→`Running`と処理が進む。  

`https://huggingface.co/spaces/<repo_path>`を開き、![Running](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/168591/0640e5f0-cf3b-be33-b341-f74c6f27353b.png)状態かどうかを確認する。  

> **NOTE**  
> Gradioのアプリのポート番号が7860以外の場合、StartingからRunningに状態が遷移しない現象が発生しました。
→ポート番号を7860に設定し解決しました。
- アプリの動作確認を行うと作業終了です。お疲れ様でした。  

### まとめ
HuggingFaceのSpaceの環境構築及び実行の説明を行いました。
GitHub Actionsを使用して自動デプロイする方法は、関連リンクを参考にしてください。

# 関連
- HuggingFaceのSpaceに自動デプロイするGitHub Action用ワークフロー

https://github.com/umyuu/SaliencyMapDemo/blob/main/.github/workflows/deploy.yml

- GitHubActionを使用してSpaceに自動デプロイする方法  | HuggingFace  

https://huggingface.co/docs/hub/spaces-github-actions