はじめに
こんにちは！
Saku0512です。
今回はEelを使ってチャットアプリを作った話をします。
そもそもEelってなんだ？
PythonのEelは、Pythonでデスクトップアプリを簡単に作成できるライブラリです。
バックエンドをPythonで処理し、フロントエンドをHTML/CSS/JavaScriptで構築できます。
特徴
- バックエンドをPythonで処理し、フロントエンドをHTML/CSS/JavaScriptで構築できる
- Pythonの関数をJavaScriptから呼び出すことや、JavaScriptの関数をPythonから呼び出すことができる
- Webサーバーを立てて、ローカルで動作する
インストール
pip install eel
サンプルコード
import eel
# フロントエンドのHTMLフォルダを指定
eel.init('web')
@eel.expose # Python関数をJavaScriptから呼び出せるようにする
def say_hello(name):
return f"Hello, {name}!"
# アプリを起動
eel.start('index.html', size=(400, 300))
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Eelアプリ</title>
</head>
<body>
<h1>EelでPythonとJSを連携</h1>
<button onclick="callPython()">Pythonを呼ぶ</button>
<p id="output"></p>
<script type="text/javascript">
function callPython() {
eel.say_hello("Eelユーザー")(function(response) {
document.getElementById("output").innerText = response;
});
}
</script>
</body>
</html>
ディレクトリ構造
.
├ main.py
└ web/
└ index.html
実行方法
python main.py
仕組み
-
eel.init('web')で/webフォルダ内のファイルを読み込む -
eel.start('index.html', size=(400, 300))でアプリを起動 -
@eel.exposeでPython関数をJavaScriptから呼び出せるようにする -
eel.say_hello("Eelユーザー")でPython関数を呼び出し、結果をJavaScriptに返す
詳細は公式ドキュメントを参照してください。
作ったアプリの解説
概要
Open AI APIを用いてチャット機能を実装し、botuiを用いてチャット画面を作成しました。
ソースコードはGitHubに公開しています。
実装した機能
- ユーザー登録・ログイン
-
MySQLを用いてユーザー登録・ログインを実装。 -
redisを用いてセッション管理を実装。
-
- チャット
-
Eelを用いてjsからpythonに処理を移す。 -
Open AI APIを用いてチャット機能を実装。 - APIから返ってきた文字列を整形してhtmlコードにする。
-
botuiを用いてチャット画面を作成。
-
- 音声入力
-
Web Speech APIを用いて音声入力を実装。
-
- ソースコード実行
-
paiza.ioを用いてソースコード実行。 -
C,C#,C++,Python,JavaScript,Java,Ruby,PHPに対応。
-