生成AIのWebアプリをGoogle Colaboratoryで作ってみた（LINE japanese-large-lm）

# はじめに
数日間、「LINE japanese-large-lm」に関する記事を書いてみました。
内容は、シンプルなAPI連携に留まってしまっており、
実際にPythonでコードを実行すると、面白さが格段にあがるのでどうしたものかと悩みます。

Power AppsをフロントにしたWebアプリにするためには、Azureを活用するにも、
仮想マシンが必要なのか、コンテナーというもので実現できるのか、まだまだ知識不足です。

下記の方の記事が、とても参考になりましたので**Google Colaboratory**で
Webアプリ的なノートブックを書いてみました。

https://karaage.hatenadiary.jp/entry/2022/08/29/073000

### 今までのアウトプット

https://qiita.com/DEmodoriGatsuO/items/d702f81816a6697caf19

https://qiita.com/DEmodoriGatsuO/items/274fcc7844e62d76972d

## 参考
まずコードについてですが、下記の記事を沢山参考にさせていただいております。

https://note.com/npaka/n/ndf326abda939

公開されているコードを関数の形式に修正し、実現することにしました。

# Gradioについて
Google ColabでWebアプリを実現する方法で、[Gradio](https://www.gradio.app/)というライブラリーがあることを知りました。
使用する方法は**pipコマンドでインストールするだけ**です。

**プロトタイプをとりあえず作ってみたい！という私の希望には打って付けのライブラリです。**

https://www.gradio.app/

# Google Colaboratory
**Google Colaboratoryは、ブラウザで使える無料のPython環境です。**

Googleアカウントがあれば誰でも実行することが出来ます。
**「Pythonの学習をとりあえず始めてみたい」** という方には、とてもおススメです。

一方でAIを活用するライブラリには、「GPU」が必要とのこと。
無料で扱う場合、制限が厳しく**Google Colab Pro** が良いようですが・・・
課金対象が加速度的に増してきて困る💦

- Notebook

https://colab.research.google.com/github/DEmodoriGatsuO/huggingface-colab-apps/blob/main/01_japanese_large_lm_gui.ipynb

:::note warn
READMEは準備中です・・・
:::

### requirement
```shell
! pip install transformers accelerate bitsandbytes
! pip install sentencepiece
! pip install ipywidgets
! pip install gradio
```

### Code
```python
#@title **Launch App**
#@markdown　Execute and click URL ex: `Running on public URL: https://xxxx.gradio.app`

import gradio as gr
import torch
from transformers import AutoModelForCausalLM, AutoTokenizer
from IPython.display import clear_output

def generate_text(prompt):
    """
    Text to Text

    Args:
        prompt (str): テキスト生成のためのプロンプト。

    Returns:
        str: モデルから生成されたテキスト。
    """
    # トークナイザーとモデルの準備
    tokenizer = AutoTokenizer.from_pretrained(
        "line-corporation/japanese-large-lm-3.6b",
        use_fast=False
    )
    model = AutoModelForCausalLM.from_pretrained(
        "line-corporation/japanese-large-lm-3.6b",
        load_in_8bit=True,
        torch_dtype=torch.float16,
        device_map="auto",
    )

    # 推論の実行
    input_ids = tokenizer.encode(prompt, add_special_tokens=False, return_tensors="pt")
    tokens = model.generate(
        input_ids.to(device=model.device),
        max_length=30,
        temperature=1.0,
        do_sample=True,
        pad_token_id=tokenizer.pad_token_id,
    )
    generated_text = tokenizer.decode(tokens[0])
    return generated_text

from IPython.display import clear_output

block = gr.Blocks(css=".container { max-width: 800px; margin: auto; }")

with block as demo:
    gr.Markdown("Japanese-large-lm GUI Tool")
    gr.Markdown(
        'japanese-large-lm useful web tool'
    )
    with gr.Group():
        with gr.Box():
            gr.Markdown(
                'Enter prompt and Run!!'
            )
            with gr.Row().style(mobile_collapse=False, equal_height=True):

                text = gr.Textbox(
                    label='Enter prompt', show_label=False, max_lines=1
                ).style(
                    border=(True, False, True, True),
                    rounded=(True, False, False, True),
                    container=False,
                )
                btn = gr.Button("Run").style(
                    margin=False,
                    rounded=(False, True, True, False),
                )
        result = gr.Textbox(label="result text", show_label=False).style(
            grid=[2], height = "auto"
        )

        btn.click(generate_text,
                 inputs=text, outputs=result)

    gr.Markdown(
        """___

   Created by japanese language lm

   """
    )

clear_output()
demo.launch(debug=True)
     
```

直感的に`gradio`で画面を作っていけそうな感覚があり、やり易かったです。
今回は凄腕の方々のコードを微修正し、画面を作ったまでですが、
**今後自分のやれることの幅も増えそうということで、備忘録として残します。**

おかげ様でWeb画面もそれらしいものに👀✨
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/2734332/ce218862-1ac8-f30d-4cf7-8843a03ad01e.png)


アウトプットを残してくださる、偉大な方々に感謝です。

勉強がんばらないとな～💦