HuggingFaceでGradio製のアプリを展開する

# はじめに

最近では、ちょっと思いついたアプリケーションなどについて
difyなどを活用しながらAIのアプリを作っていく流れが一般的になりつつあるかと思います。
RAGを活用したチャットなどのユースケースでは十分ですが、もう少しプログラムを書いて、AIを活用したゲームを動かしてみたい！などのユースケースの場合は、difyに加えて、アプリケーションサーバーなど別途用意する必要が出てきます。
そのような中で、HuggingFaceのSpaceを最近、使い始めていますが、
とても便利です。また、Gradioという仕組みを用いることで必要最低限のことを記述するだけでAI関連の仕組みをWebアプリとして動かすことが可能となります。

HuggingFaceでは、AI-Game-Jamのようなイベントも行われているようで、Gradioで作られたアプリケーションなどが紹介されていました。

https://huggingface.co/Mistral-AI-Game-Jam

![IMG_0364.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/5f68a38f-028f-37ee-8e5b-26b5e9b6e6c5.jpeg)

# 使い方

### 1.Githubのcodespaceを使って立ち上げる。

### 2. インストール

![IMG_0368.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/48457a39-1283-85e1-99c2-9c2f32be3e2f.jpeg)


```bash
$ pip install gradio
$ touch app.py
```

デモのコードを記述

fn ... UIと連携する関数
inputs ... 入力コンポーネント
outpus ... 出力コンポーネント

```python
import gradio as gr

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

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

demo.launch()

```

![IMG_0367.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/af3426f7-db69-fa32-72df-287c37ef60de.jpeg)

実行
```bash
$ python app.py
```

![IMG_0366.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/898a0850-3121-4191-cc57-b4346277ecd7.jpeg)


# 画像アプリを作る

Gradioでは、gr.Image()を使うことで、画像アップロード画面がアプリケーションで表示される。下記コードでは画像フィルタをかけるサンプル。


```python 
import numpy as np
import gradio as gr

def sepia(input_img):
    sepia_filter = np.array([
        [0.393, 0.769, 0.189],
        [0.349, 0.686, 0.168],
        [0.272, 0.534, 0.131]
    ])
    sepia_img = input_img.dot(sepia_filter.T)
    sepia_img /= sepia_img.max()
    return sepia_img

demo = gr.Interface(sepia, gr.Image(), "image")
demo.launch()

```

![IMG_0370.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/bfa02989-afec-166b-adfe-117403fe7269.jpeg)

![IMG_0371.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/a31a0abb-394c-d487-16fa-4cd97a53ecb0.jpeg)


# 複数のステップによる実行を行う事例

```
from transformers import pipeline

import gradio as gr

asr = pipeline("automatic-speech-recognition", "facebook/wav2vec2-base-960h")
classifier = pipeline("text-classification")


demo.launch()

```

# チャットぼっと

```python app.py
import gradio as gr
from openai import OpenAI

OPENAI_API_KEY="自分のAPIキーを入力"
client = OpenAI(api_key=OPENAI_API_KEY)

def chatbot_response(message, history):
    messages = []
    if len(history) > 6:
        history = history[2:]
    for h in history:
        messages.append({"role": "user", "content": h[0]})
        messages.append({"role": "assistant", "content": h[1]})
    messages.append({"role": "user", "content": message})
    completion = client.chat.completions.create(
        model="gpt-3.5-turbo",
        messages=messages,
    )
    return completion.choices[0].message.content

app = gr.ChatInterface(chatbot_response)
app.launch()

```

# HuggingFace側で作成する

LLMを活用したチャットぼっとなどはHuggingFaceでテンプレートが用意されているため、こちらを実行することでも実装が可能です。

### 1.
 
![IMG_0360.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/7a42dbb0-d513-6c04-308f-0de29cc7a7db.jpeg)


### 2. 

![IMG_0361.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/eb83c746-49bc-8602-0141-52e2269137b7.jpeg)

### 3.

![IMG_0363.jpeg](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/43766/98cfde83-c173-f899-e767-00aed59cbb60.jpeg)