├── .devcontainer
├── Dockerfile
└── devcontainer.json
├── .env.sample
├── .gitignore
├── .vscode
└── settings.json
├── README.md
├── requirements.txt
├── resource
├── fig
│ ├── github_イシューの例.png
│ ├── logo_松尾研究所.jpeg
│ ├── vscode_devcontainerインストール.png
│ ├── vscode_env.png
│ ├── vscode_コマンドパレットでコンテナを再度開く.png
│ └── vscode_フォルダ選択.png
└── movie
│ ├── readme_part4制作物.gif
│ └── readme_part4制作物_画像.png
└── src
└── demo.py
/.devcontainer/Dockerfile:
--------------------------------------------------------------------------------
1 | # ベースとなるイメージを指定
2 | FROM mcr.microsoft.com/devcontainers/python:0-3.11
3 |
4 | # fish shellのインストール
5 | RUN apt-get update && apt-get install -y fish
6 |
--------------------------------------------------------------------------------
/.devcontainer/devcontainer.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "CHATBOT",
3 | "build": {
4 | "dockerfile": "Dockerfile"
5 | },
6 | "settings": {
7 | "terminal.integrated.defaultProfile.linux": "fish"
8 | },
9 | "customizations": {
10 | "vscode": {
11 | "extensions": [
12 | "ms-python.black-formatter",
13 | "ms-python.flake8",
14 | "ms-python.isort",
15 | "ms-python.vscode-pylance",
16 | "njpwerner.autodocstring",
17 | "shardulm94.trailing-spaces",
18 | "shd101wyy.markdown-preview-enhanced",
19 | "oderwat.indent-rainbow",
20 | "GitHub.Copilot",
21 | "GitHub.copilot-chat",
22 | "DanielSanMedium.dscodegpt",
23 | "christian-kohler.path-intellisense",
24 | "esbenp.prettier-vscode",
25 | "DavidAnson.vscode-markdownlint",
26 | "ms-python.autopep8",
27 | "ms-toolsai.jupyter"
28 | ]
29 | }
30 | },
31 | "runArgs": [
32 | "--env-file",
33 | ".env" // .envファイルへのパスを指定します
34 | ],
35 | "forwardPorts": [
36 | 8000
37 | ],
38 | "postCreateCommand": "pip install --upgrade pip && pip install --user -r requirements.txt",
39 | "remoteUser": "vscode"
40 | }
41 |
--------------------------------------------------------------------------------
/.env.sample:
--------------------------------------------------------------------------------
1 | OPENAI_API_KEY=your-api-key
2 |
--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
1 | .chainlit/
2 | ## copy from https://github.com/github/gitignore/blob/main/Python.gitignore
3 |
4 | # Byte-compiled / optimized / DLL files
5 | __pycache__/
6 | *.py[cod]
7 | *$py.class
8 |
9 | # C extensions
10 | *.so
11 |
12 | # Distribution / packaging
13 | .Python
14 | build/
15 | develop-eggs/
16 | dist/
17 | downloads/
18 | eggs/
19 | .eggs/
20 | lib/
21 | lib64/
22 | parts/
23 | sdist/
24 | var/
25 | wheels/
26 | share/python-wheels/
27 | *.egg-info/
28 | .installed.cfg
29 | *.egg
30 | MANIFEST
31 |
32 | # PyInstaller
33 | # Usually these files are written by a python script from a template
34 | # before PyInstaller builds the exe, so as to inject date/other infos into it.
35 | *.manifest
36 | *.spec
37 |
38 | # Installer logs
39 | pip-log.txt
40 | pip-delete-this-directory.txt
41 |
42 | # Unit test / coverage reports
43 | htmlcov/
44 | .tox/
45 | .nox/
46 | .coverage
47 | .coverage.*
48 | .cache
49 | nosetests.xml
50 | coverage.xml
51 | *.cover
52 | *.py,cover
53 | .hypothesis/
54 | .pytest_cache/
55 | cover/
56 |
57 | # Translations
58 | *.mo
59 | *.pot
60 |
61 | # Django stuff:
62 | *.log
63 | local_settings.py
64 | db.sqlite3
65 | db.sqlite3-journal
66 |
67 | # Flask stuff:
68 | instance/
69 | .webassets-cache
70 |
71 | # Scrapy stuff:
72 | .scrapy
73 |
74 | # Sphinx documentation
75 | docs/_build/
76 |
77 | # PyBuilder
78 | .pybuilder/
79 | target/
80 |
81 | # Jupyter Notebook
82 | .ipynb_checkpoints
83 |
84 | # IPython
85 | profile_default/
86 | ipython_config.py
87 |
88 | # pyenv
89 | # For a library or package, you might want to ignore these files since the code is
90 | # intended to run in multiple environments; otherwise, check them in:
91 | # .python-version
92 |
93 | # pipenv
94 | # According to pypa/pipenv#598, it is recommended to include Pipfile.lock in version control.
95 | # However, in case of collaboration, if having platform-specific dependencies or dependencies
96 | # having no cross-platform support, pipenv may install dependencies that don't work, or not
97 | # install all needed dependencies.
98 | #Pipfile.lock
99 |
100 | # poetry
101 | # Similar to Pipfile.lock, it is generally recommended to include poetry.lock in version control.
102 | # This is especially recommended for binary packages to ensure reproducibility, and is more
103 | # commonly ignored for libraries.
104 | # https://python-poetry.org/docs/basic-usage/#commit-your-poetrylock-file-to-version-control
105 | #poetry.lock
106 |
107 | # pdm
108 | # Similar to Pipfile.lock, it is generally recommended to include pdm.lock in version control.
109 | #pdm.lock
110 | # pdm stores project-wide configurations in .pdm.toml, but it is recommended to not include it
111 | # in version control.
112 | # https://pdm.fming.dev/#use-with-ide
113 | .pdm.toml
114 |
115 | # PEP 582; used by e.g. github.com/David-OConnor/pyflow and github.com/pdm-project/pdm
116 | __pypackages__/
117 |
118 | # Celery stuff
119 | celerybeat-schedule
120 | celerybeat.pid
121 |
122 | # SageMath parsed files
123 | *.sage.py
124 |
125 | # Environments
126 | .env
127 | .venv
128 | env/
129 | venv/
130 | ENV/
131 | env.bak/
132 | venv.bak/
133 |
134 | # Spyder project settings
135 | .spyderproject
136 | .spyproject
137 |
138 | # Rope project settings
139 | .ropeproject
140 |
141 | # mkdocs documentation
142 | /site
143 |
144 | # mypy
145 | .mypy_cache/
146 | .dmypy.json
147 | dmypy.json
148 |
149 | # Pyre type checker
150 | .pyre/
151 |
152 | # pytype static type analyzer
153 | .pytype/
154 |
155 | # Cython debug symbols
156 | cython_debug/
157 |
158 | # PyCharm
159 | # JetBrains specific template is maintained in a separate JetBrains.gitignore that can
160 | # be found at https://github.com/github/gitignore/blob/main/Global/JetBrains.gitignore
161 | # and can be added to the global gitignore or merged into this file. For a more nuclear
162 | # option (not recommended) you can uncomment the following to ignore the entire idea folder.
163 | #.idea/
164 |
165 | log/
166 | models/
167 | wandb/
168 | outputs/
169 |
170 | .DS_Store
171 |
172 | data/*
173 | !data/public.pkl
174 | !data/one_minute_sample.pkl
175 |
176 | config/*
177 | !config/example.yaml
178 |
179 | submission/*
180 | !submission/sample_strategy.py
181 |
182 | outputs/*
183 |
--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 | "python.linting.pylintEnabled": false,
3 | "python.linting.enabled": true,
4 | "python.linting.flake8Enabled": true,
5 | "editor.formatOnSave": true,
6 | "[python]": {
7 | "editor.codeActionsOnSave": {
8 | "source.organizeImports": "explicit"
9 | },
10 | // "editor.defaultFormatter": "ms-python.black-formatter",
11 | "editor.defaultFormatter": "esbenp.prettier-vscode", // この行を追加する
12 | },
13 | "flake8.args": [
14 | "--ignore=E203,E226,E402,W503,E501",
15 | "--max-complexity=12"
16 | ],
17 | "python.formatting.provider": "none",
18 | "python.analysis.typeCheckingMode": "basic",
19 | }
20 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | 
2 |
3 | # 0. 本課題について
4 |
5 | 本課題では、LLM のアプリ開発を行なっていただきます。
6 | 実装においては、Chainlit というライブラリを使用します。
7 |
8 | > Chainlit とは？
9 | >
10 | > - Python のオープンソースのライブラリ
11 | > - ChatGPT のような UI のアプリを、短いコードで作成し、デプロイできる
12 | > - 「chainlit」で検索すれば多くの日本語記事が出てくる
13 | > - 公式レポジトリ：https://github.com/Chainlit/chainlit
14 |
15 | みなさんには、アプリで追加したい機能に関するイシューを 4 つ立ててもらい、そのイシューを 1 つずつ解決していくことで、 LLM アプリの機能追加を行なっていただきます。
16 |
17 | > 作成するイシューの例
18 | > 
19 |
20 | このフローに沿って開発することで、ツールの使い方や開発の流れの理解し、1 人のエンジニアとして活躍できるスキルの基礎を身につけて行きます。
21 |
22 |
23 | 最終制作物のイメージ（動画）
24 |
25 | 
26 |
27 |
28 |
29 |
30 | 最終制作物のイメージ（画像）
31 |
32 | 
33 |
34 |
35 |
36 | ---
37 |
38 | 本講義で使うツールは、以下の通りです。
39 |
40 | - Docker（見出し 1 で説明）
41 | - 仮想化プラットフォーム。自分のローカルの PC 環境を汚さずに環境を構築できる
42 | - VSCode（見出し 2 で説明）
43 | - 多くの開発者が使う、コードを書く環境（IDE；総合開発環境）
44 | - Devcontainer（見出し 2 で説明）
45 | - VSCode 上で Docker を簡単に使うためのツール
46 |
47 | 以下の手順に従って、開発環境を用意しましょう！
48 |
49 | # 1. Docker Desktop のインストール
50 |
51 | Docker は、アプリケーションをコンテナという単位でパッケージ化し、環境に依存せずに実行できるようにする技術です。コンテナは、アプリケーションの実行に必要なコード、ライブラリ、設定ファイルなどを含んでおり、どの環境でも同じように動作します。これにより、「開発環境では動いたのに、本番環境では動かない」といった問題を解決できます。
52 |
53 | Docker Desktop は、Windows や Mac などのデスクトップ環境で Docker を簡単に使用できるようにするアプリケーションです。Docker Desktop によって、GUI を通した Docker のセットアップが可能になり、スムーズに Docker エコシステムへの参入が可能になります。
54 |
55 | > 参考リンク
56 | >
57 | > - [【入門】Docker Desktop とは何ができるの？インストールと使い方](https://www.kagoya.jp/howto/cloud/container/dockerdesktop/)
58 | > - [Windows 11 に Docker Desktop を入れる手順（令和 5 年最新版）](https://qiita.com/zembutsu/items/a98f6f25ef47c04893b3)
59 | > - [Docker for Mac をインストールする方法は？導入手順や使い方を初心者向けに解説](https://www.kagoya.jp/howto/cloud/container/dockerformac/)
60 |
61 | # 2. VSCode の準備
62 |
63 | ## 2.1. VSCode のインストール
64 |
65 | Visual Studio Code（VSCode）は、Microsoft が開発した無料でオープンソースのコードエディタです。軽量でありながら強力な機能を備えており、Windows、Mac、Linux の各プラットフォームに対応しています。プログラミング言語やフレームワークに依存しない汎用性の高さ、開発を円滑にする拡張機能や git 連携により、世界中の開発者に広く利用されています。
66 |
67 | > 参考記事
68 | >
69 | > - [Visual Studio Code のダウンロードとインストール | javadrive](https://www.javadrive.jp/vscode/install/index1.html)
70 | > - [MacOS で Visual Studio Code をインストールする手順 | Qiita](https://qiita.com/watamura/items/51c70fbb848e5f956fd6)
71 |
72 | ## 2.2. devcontainer のインストール・使い方
73 |
74 | DevContainer は、VSCode の Remote - Containers 拡張機能を通じて、Docker コンテナ内で開発環境を構築し、利用するための機能です。
75 |
76 | DevContainer の利用により、開発環境のセットアップ時間が大幅に短縮されます。また、プロジェクトに参加する全員が同じ開発環境を共有するため、環境差異によるトラブルを防ぐことができます。さらに、Docker コンテナを使用するため、開発環境を簡単に再現、共有、移行することが可能となります。これにより、環境構築の複雑さを意識することなく、コーディングに集中することができます。
77 |
78 | DevContainer は、VSCode の拡張機能（2x2 のマスで右上だけ浮いているようなアイコン）からインストールできます
79 |
80 | > 
81 |
82 | > 参考記事
83 | >
84 | > - [VSCode Dev Containers でこれからの開発環境構築](https://cloudsmith.co.jp/blog/virtualhost/docker/2023/05/2381142.html)
85 | > - [VS Code+DevContainer+Docker で最強 Python 開発環境](https://zenn.dev/aidemy/articles/vscode-env-python)
86 |
87 | # 3. 本課題でコードを書くまで
88 |
89 | ### 1. 今見ているページをローカルの適当な場所に git clone する
90 |
91 | ```sh
92 | git clone https://github.com/matsuoinstitute/chatbot-demo
93 | ```
94 |
95 | ### 2. VSCode にて、clone してできた chatbot-demo フォルダを選択
96 |
97 | > 
98 |
99 | ### 3. env ファイルの設定
100 |
101 | env.sample をコピー＆ペーストして、作成できたファイルを「.env」という名前に変更
102 |
103 | > 以下のような構造になっていれば OK です
104 |
105 | > 
106 |
107 | .env ファイルには、「sk-」から始まる自分の OpenAI API キーを設定します。（step1 にて使用）
108 |
109 | ### 4. 右下に出てくる、「コンテナを再度開く」ボタンを押す
110 |
111 | > ボタンが出てこない場合は、コマンドパレット（⌘+shift+p）を開けば、コンテナを開くボタンが出現します
112 |
113 | > 
114 |
115 | ---
116 |
117 | これで、コードを書ける環境ができたはずです。
118 |
119 | Github のイシューの切り方や、PR（プルリクエスト）の作り方など、具体的な開発手順は [wiki](https://github.com/matsuoinstitute/chatbot-demo/wiki) に記載しているので、そちらも併せてご覧ください。
120 |
121 | まずは、src 直下に移動して、demo.py を動かしてみましょう！
122 |
123 | ```py
124 | # src直下に移動
125 | cd src
126 | ```
127 |
128 | ```sh
129 | # demo.pyを実行
130 | chainlit run demo.py -w
131 | ```
132 |
--------------------------------------------------------------------------------
/requirements.txt:
--------------------------------------------------------------------------------
1 | chainlit==1.0.200
--------------------------------------------------------------------------------
/resource/fig/github_イシューの例.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsuoinstitute/chatbot-demo/35ecde7dbff9dee5560bbe745e159270714e69a0/resource/fig/github_イシューの例.png
--------------------------------------------------------------------------------
/resource/fig/logo_松尾研究所.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsuoinstitute/chatbot-demo/35ecde7dbff9dee5560bbe745e159270714e69a0/resource/fig/logo_松尾研究所.jpeg
--------------------------------------------------------------------------------
/resource/fig/vscode_devcontainerインストール.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsuoinstitute/chatbot-demo/35ecde7dbff9dee5560bbe745e159270714e69a0/resource/fig/vscode_devcontainerインストール.png
--------------------------------------------------------------------------------
/resource/fig/vscode_env.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsuoinstitute/chatbot-demo/35ecde7dbff9dee5560bbe745e159270714e69a0/resource/fig/vscode_env.png
--------------------------------------------------------------------------------
/resource/fig/vscode_コマンドパレットでコンテナを再度開く.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsuoinstitute/chatbot-demo/35ecde7dbff9dee5560bbe745e159270714e69a0/resource/fig/vscode_コマンドパレットでコンテナを再度開く.png
--------------------------------------------------------------------------------
/resource/fig/vscode_フォルダ選択.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsuoinstitute/chatbot-demo/35ecde7dbff9dee5560bbe745e159270714e69a0/resource/fig/vscode_フォルダ選択.png
--------------------------------------------------------------------------------
/resource/movie/readme_part4制作物.gif:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsuoinstitute/chatbot-demo/35ecde7dbff9dee5560bbe745e159270714e69a0/resource/movie/readme_part4制作物.gif
--------------------------------------------------------------------------------
/resource/movie/readme_part4制作物_画像.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/matsuoinstitute/chatbot-demo/35ecde7dbff9dee5560bbe745e159270714e69a0/resource/movie/readme_part4制作物_画像.png
--------------------------------------------------------------------------------
/src/demo.py:
--------------------------------------------------------------------------------
1 | import chainlit as cl
2 |
3 |
4 | @cl.step
5 | def tool():
6 | return "Response from the tool!"
7 |
8 |
9 | @cl.on_message # this function will be called every time a user inputs a message in the UI
10 | async def main(message: cl.Message):
11 | """
12 | This function is called every time a user inputs a message in the UI.
13 | It sends back an intermediate response from the tool, followed by the final answer.
14 | Args:
15 | message: The user's message.
16 | Returns:
17 | None.
18 | """
19 |
20 | # Call the tool
21 | tool()
22 |
23 | # Send the final answer.
24 | await cl.Message(content="This is the final answer").send()
--------------------------------------------------------------------------------