mirror of
https://github.com/yhirose/cpp-httplib.git
synced 2026-04-12 03:38:30 +00:00
"Building a Desktop LLM App with cpp-httplib" (#2403)
This commit is contained in:
yhirose
236
docs-src/pages/ja/llm-app/ch01-setup.md
Normal file
236
docs-src/pages/ja/llm-app/ch01-setup.md
Normal file
@@ -0,0 +1,236 @@
|
||||
---
|
||||
title: "1. プロジェクト環境を作る"
|
||||
order: 1
|
||||
|
||||
---
|
||||
|
||||
llama.cppを推論エンジンに使って、テキスト翻訳のREST APIサーバーを段階的に作っていきます。最終的にはこんなリクエストで翻訳結果が返ってくるようになります。
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:8080/translate \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"text": "The weather is nice today. Shall we go for a walk?", "target_lang": "ja"}'
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"translation": "今日はいい天気ですね。散歩に行きましょうか？"
|
||||
}
|
||||
```
|
||||
|
||||
「翻訳API」はあくまで一例です。プロンプトを差し替えれば、要約・コード生成・チャットボットなど、お好きなLLMアプリに応用できます。
|
||||
|
||||
最終的にサーバーが提供するAPIの一覧です。
|
||||
|
||||
| メソッド | パス | 説明 | 章 |
|
||||
| -------- | ---- | ---- | -- |
|
||||
| `GET` | `/health` | サーバーの状態を返す | 1 |
|
||||
| `POST` | `/translate` | テキストを翻訳してJSONで返す | 2 |
|
||||
| `POST` | `/translate/stream` | トークン単位でSSEストリーミング | 3 |
|
||||
| `GET` | `/models` | モデル一覧（available / downloaded / selected） | 4 |
|
||||
| `POST` | `/models/select` | モデルを選択（未ダウンロードなら自動取得） | 4 |
|
||||
|
||||
この章では、まずプロジェクトの環境を整えます。依存ライブラリの取得、ディレクトリ構成、ビルド設定、モデルファイルの入手まで済ませて、次の章ですぐにコードを書き始められるようにしましょう。
|
||||
|
||||
## 前提条件
|
||||
|
||||
- C++20対応コンパイラ（GCC 10+、Clang 10+、MSVC 2019 16.8+）
|
||||
- CMake 3.20以上
|
||||
- OpenSSL（4章でHTTPSクライアントに使用。macOS: `brew install openssl`、Ubuntu: `sudo apt install libssl-dev`）
|
||||
- 十分なディスク容量（モデルファイルが数GBになります）
|
||||
|
||||
## 1.1 何を使うか
|
||||
|
||||
使うライブラリはこちらです。
|
||||
|
||||
| ライブラリ | 役割 |
|
||||
| ----------- | ------ |
|
||||
| [cpp-httplib](https://github.com/yhirose/cpp-httplib) | HTTPサーバー/クライアント |
|
||||
| [nlohmann/json](https://github.com/nlohmann/json) | JSONパーサー |
|
||||
| [cpp-llamalib](https://github.com/yhirose/cpp-llamalib) | llama.cppラッパー |
|
||||
| [llama.cpp](https://github.com/ggml-org/llama.cpp) | LLM推論エンジン |
|
||||
| [webview/webview](https://github.com/webview/webview) | デスクトップWebView（6章で使用） |
|
||||
|
||||
cpp-httplib、nlohmann/json、cpp-llamalibはヘッダーオンリーライブラリです。`curl`でヘッダーファイルを1枚ダウンロードして`#include`するだけでも使えますが、本書ではCMakeの`FetchContent`で自動取得します。`CMakeLists.txt`に書いておけば、`cmake -B build`の時点で全ライブラリが自動でダウンロード・ビルドされるので、手作業の手順が減ります。`webview`は6章で使うので、今は気にしなくて大丈夫です。
|
||||
|
||||
## 1.2 ディレクトリ構成
|
||||
|
||||
最終的にこんな構成になります。
|
||||
|
||||
```ascii
|
||||
translate-app/
|
||||
├── CMakeLists.txt
|
||||
├── models/
|
||||
│ └── (GGUFファイル)
|
||||
└── src/
|
||||
└── main.cpp
|
||||
```
|
||||
|
||||
ライブラリのソースコードはプロジェクトに含めません。CMakeの`FetchContent`がビルド時に自動で取得するので、必要なのは自分のコードだけです。
|
||||
|
||||
プロジェクトディレクトリを作って、gitリポジトリにしましょう。
|
||||
|
||||
```bash
|
||||
mkdir translate-app && cd translate-app
|
||||
mkdir src models
|
||||
git init
|
||||
```
|
||||
|
||||
## 1.3 GGUFモデルファイルを入手する
|
||||
|
||||
LLMの推論にはモデルファイルが必要です。GGUFはllama.cppが使うモデル形式で、Hugging Faceにたくさんあります。
|
||||
|
||||
まずは小さいモデルで試してみましょう。GoogleのGemma 2 2Bの量子化版（約1.6GB）がおすすめです。軽量ですが多言語に対応していて、翻訳タスクにも向いています。
|
||||
|
||||
```bash
|
||||
curl -L -o models/gemma-2-2b-it-Q4_K_M.gguf \
|
||||
https://huggingface.co/bartowski/gemma-2-2b-it-GGUF/resolve/main/gemma-2-2b-it-Q4_K_M.gguf
|
||||
```
|
||||
|
||||
4章で、このダウンロード自体をアプリ内からcpp-httplibのクライアント機能で行えるようにします。
|
||||
|
||||
## 1.4 CMakeLists.txt
|
||||
|
||||
プロジェクトルートに`CMakeLists.txt`を作ります。`FetchContent`で依存ライブラリを宣言しておくと、CMakeが自動でダウンロード・ビルドしてくれます。
|
||||
|
||||
<!-- data-file="CMakeLists.txt" -->
|
||||
```cmake
|
||||
cmake_minimum_required(VERSION 3.20)
|
||||
project(translate-server CXX)
|
||||
set(CMAKE_CXX_STANDARD 20)
|
||||
|
||||
include(FetchContent)
|
||||
|
||||
# llama.cpp（LLM推論エンジン）
|
||||
FetchContent_Declare(llama
|
||||
GIT_REPOSITORY https://github.com/ggml-org/llama.cpp
|
||||
GIT_TAG master
|
||||
GIT_SHALLOW TRUE
|
||||
)
|
||||
FetchContent_MakeAvailable(llama)
|
||||
|
||||
# cpp-httplib（HTTPサーバー/クライアント）
|
||||
FetchContent_Declare(httplib
|
||||
GIT_REPOSITORY https://github.com/yhirose/cpp-httplib
|
||||
GIT_TAG master
|
||||
)
|
||||
FetchContent_MakeAvailable(httplib)
|
||||
|
||||
# nlohmann/json（JSONパーサー）
|
||||
FetchContent_Declare(json
|
||||
URL https://github.com/nlohmann/json/releases/download/v3.11.3/json.tar.xz
|
||||
)
|
||||
FetchContent_MakeAvailable(json)
|
||||
|
||||
# cpp-llamalib（llama.cppヘッダーオンリーラッパー）
|
||||
FetchContent_Declare(cpp_llamalib
|
||||
GIT_REPOSITORY https://github.com/yhirose/cpp-llamalib
|
||||
GIT_TAG main
|
||||
)
|
||||
FetchContent_MakeAvailable(cpp_llamalib)
|
||||
|
||||
add_executable(translate-server src/main.cpp)
|
||||
|
||||
target_link_libraries(translate-server PRIVATE
|
||||
httplib::httplib
|
||||
nlohmann_json::nlohmann_json
|
||||
cpp-llamalib
|
||||
)
|
||||
```
|
||||
|
||||
`FetchContent_Declare`でライブラリのソース取得先を宣言し、`FetchContent_MakeAvailable`で実際に取得・ビルドします。初回の`cmake -B build`は全ライブラリのダウンロードとllama.cppのビルドが走るので時間がかかりますが、2回目以降はキャッシュが効きます。
|
||||
|
||||
`target_link_libraries`でリンクするだけで、インクルードパスやビルド設定は各ライブラリのCMakeが自動で設定してくれます。
|
||||
|
||||
## 1.5 雛形コードの作成
|
||||
|
||||
この雛形コードをベースに、章ごとに機能を追加していきます。
|
||||
|
||||
<!-- data-file="main.cpp" -->
|
||||
```cpp
|
||||
// src/main.cpp
|
||||
#include <httplib.h>
|
||||
#include <nlohmann/json.hpp>
|
||||
|
||||
#include <csignal>
|
||||
#include <iostream>
|
||||
|
||||
using json = nlohmann::json;
|
||||
|
||||
httplib::Server svr;
|
||||
|
||||
// `Ctrl+C`でgraceful shutdown
|
||||
void signal_handler(int sig) {
|
||||
if (sig == SIGINT || sig == SIGTERM) {
|
||||
std::cout << "\nReceived signal, shutting down gracefully...\n";
|
||||
svr.stop();
|
||||
}
|
||||
}
|
||||
|
||||
int main() {
|
||||
// リクエストとレスポンスをログに記録
|
||||
svr.set_logger([](const auto &req, const auto &res) {
|
||||
std::cout << req.method << " " << req.path << " -> " << res.status
|
||||
<< std::endl;
|
||||
});
|
||||
|
||||
// ヘルスチェック
|
||||
svr.Get("/health", [](const auto &, auto &res) {
|
||||
res.set_content(json{{"status", "ok"}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
// 各エンドポイントのダミー実装（以降の章で本物に差し替えていく）
|
||||
svr.Post("/translate",
|
||||
[](const auto &req, auto &res) {
|
||||
res.set_content(json{{"translation", "TODO"}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
svr.Post("/translate/stream",
|
||||
[](const auto &req, auto &res) {
|
||||
res.set_content("data: \"TODO\"\n\ndata: [DONE]\n\n", "text/event-stream");
|
||||
});
|
||||
|
||||
svr.Get("/models",
|
||||
[](const auto &req, auto &res) {
|
||||
res.set_content(json{{"models", json::array()}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
svr.Post("/models/select",
|
||||
[](const auto &req, auto &res) {
|
||||
res.set_content(json{{"status", "TODO"}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
// `Ctrl+C` (`SIGINT`)や`kill` (`SIGTERM`)でサーバーを停止できるようにする
|
||||
signal(SIGINT, signal_handler);
|
||||
signal(SIGTERM, signal_handler);
|
||||
|
||||
// サーバー起動
|
||||
std::cout << "Listening on http://127.0.0.1:8080" << std::endl;
|
||||
svr.listen("127.0.0.1", 8080);
|
||||
}
|
||||
```
|
||||
|
||||
## 1.6 ビルドと動作確認
|
||||
|
||||
ビルドしてサーバーを起動し、curlでリクエストが通るか確かめます。
|
||||
|
||||
```bash
|
||||
cmake -B build
|
||||
cmake --build build -j
|
||||
./build/translate-server
|
||||
```
|
||||
|
||||
別のターミナルからcurlで確認してみましょう。
|
||||
|
||||
```bash
|
||||
curl http://localhost:8080/health
|
||||
# => {"status":"ok"}
|
||||
```
|
||||
|
||||
JSONが返ってくれば環境構築は完了です。
|
||||
|
||||
## 次の章へ
|
||||
|
||||
環境が整ったので、次の章ではこの雛形に翻訳REST APIを実装します。llama.cppで推論を行い、cpp-httplibでそれをHTTPエンドポイントとして公開します。
|
||||
|
||||
**Next:** [llama.cppを組み込んでREST APIを作る](../ch02-rest-api)
|
||||
212
docs-src/pages/ja/llm-app/ch02-rest-api.md
Normal file
212
docs-src/pages/ja/llm-app/ch02-rest-api.md
Normal file
@@ -0,0 +1,212 @@
|
||||
---
|
||||
title: "2. llama.cppを組み込んでREST APIを作る"
|
||||
order: 2
|
||||
|
||||
---
|
||||
|
||||
1章の雛形では`/translate`が`"TODO"`を返すだけでした。この章ではllama.cppの推論を組み込んで、実際に翻訳結果を返すAPIに仕上げます。
|
||||
|
||||
llama.cppのAPIを直接扱うとコードが長くなるので、薄いラッパーライブラリ[cpp-llamalib](https://github.com/yhirose/cpp-llamalib)を使います。モデルのロードから推論まで数行で書けるので、cpp-httplibの使い方に集中できます。
|
||||
|
||||
## 2.1 LLMの初期化
|
||||
|
||||
`llamalib::Llama`にモデルファイルのパスを渡すだけで、モデルのロード・コンテキスト作成・サンプラー設定がすべて済みます。1章で別のモデルをダウンロードした場合は、パスをそのモデルに合わせてください。
|
||||
|
||||
```cpp
|
||||
#include <cpp-llamalib.h>
|
||||
|
||||
int main() {
|
||||
auto llm = llamalib::Llama{"models/gemma-2-2b-it-Q4_K_M.gguf"};
|
||||
|
||||
// LLM推論は時間がかかるのでタイムアウトを長めに設定（デフォルトは5秒）
|
||||
svr.set_read_timeout(300);
|
||||
svr.set_write_timeout(300);
|
||||
|
||||
// ... HTTPサーバーの構築・起動 ...
|
||||
}
|
||||
```
|
||||
|
||||
GPU層数やコンテキスト長などを変えたい場合は`llamalib::Options`で指定できます。
|
||||
|
||||
```cpp
|
||||
auto llm = llamalib::Llama{"models/gemma-2-2b-it-Q4_K_M.gguf", {
|
||||
.n_gpu_layers = 0, // CPUのみ
|
||||
.n_ctx = 4096,
|
||||
}};
|
||||
```
|
||||
|
||||
## 2.2 `/translate`ハンドラ
|
||||
|
||||
1章ではダミーのJSONを返していたハンドラを、実際の推論に差し替えます。
|
||||
|
||||
```cpp
|
||||
svr.Post("/translate",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
// JSONパース（第3引数`false`: 失敗時に例外を投げず`is_discarded()`で判定）
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "Invalid JSON"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
// 必須フィールドの検証
|
||||
if (!input.contains("text") || !input["text"].is_string() ||
|
||||
input["text"].get<std::string>().empty()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'text' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto text = input["text"].get<std::string>();
|
||||
auto target_lang = input.value("target_lang", "ja"); // デフォルトは日本語
|
||||
|
||||
// プロンプトを組み立てて推論
|
||||
auto prompt = "Translate the following text to " + target_lang +
|
||||
". Output only the translation, nothing else.\n\n" + text;
|
||||
|
||||
try {
|
||||
auto translation = llm.chat(prompt);
|
||||
res.set_content(json{{"translation", translation}}.dump(),
|
||||
"application/json");
|
||||
} catch (const std::exception &e) {
|
||||
res.status = 500;
|
||||
res.set_content(json{{"error", e.what()}}.dump(), "application/json");
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
`llm.chat()`は推論中に例外を投げることがあります（コンテキスト長の超過など）。`try/catch`で捕捉してエラーをJSONで返すことで、サーバーがクラッシュするのを防ぎます。
|
||||
|
||||
## 2.3 全体のコード
|
||||
|
||||
ここまでの変更をまとめた完成形です。
|
||||
|
||||
<details>
|
||||
<summary data-file="main.cpp">全体のコード（main.cpp）</summary>
|
||||
|
||||
```cpp
|
||||
#include <httplib.h>
|
||||
#include <nlohmann/json.hpp>
|
||||
#include <cpp-llamalib.h>
|
||||
|
||||
#include <csignal>
|
||||
#include <iostream>
|
||||
|
||||
using json = nlohmann::json;
|
||||
|
||||
httplib::Server svr;
|
||||
|
||||
// `Ctrl+C`でgraceful shutdown
|
||||
void signal_handler(int sig) {
|
||||
if (sig == SIGINT || sig == SIGTERM) {
|
||||
std::cout << "\nReceived signal, shutting down gracefully...\n";
|
||||
svr.stop();
|
||||
}
|
||||
}
|
||||
|
||||
int main() {
|
||||
// 1章でダウンロードしたモデルをロード
|
||||
auto llm = llamalib::Llama{"models/gemma-2-2b-it-Q4_K_M.gguf"};
|
||||
|
||||
// LLM推論は時間がかかるのでタイムアウトを長めに設定（デフォルトは5秒）
|
||||
svr.set_read_timeout(300);
|
||||
svr.set_write_timeout(300);
|
||||
|
||||
// リクエストとレスポンスをログに記録
|
||||
svr.set_logger([](const auto &req, const auto &res) {
|
||||
std::cout << req.method << " " << req.path << " -> " << res.status
|
||||
<< std::endl;
|
||||
});
|
||||
|
||||
svr.Get("/health", [](const httplib::Request &, httplib::Response &res) {
|
||||
res.set_content(json{{"status", "ok"}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
svr.Post("/translate",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
// JSONパース（第3引数`false`: 失敗時に例外を投げず`is_discarded()`で判定）
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "Invalid JSON"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
// 必須フィールドの検証
|
||||
if (!input.contains("text") || !input["text"].is_string() ||
|
||||
input["text"].get<std::string>().empty()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'text' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto text = input["text"].get<std::string>();
|
||||
auto target_lang = input.value("target_lang", "ja"); // デフォルトは日本語
|
||||
|
||||
// プロンプトを組み立てて推論
|
||||
auto prompt = "Translate the following text to " + target_lang +
|
||||
". Output only the translation, nothing else.\n\n" + text;
|
||||
|
||||
try {
|
||||
auto translation = llm.chat(prompt);
|
||||
res.set_content(json{{"translation", translation}}.dump(),
|
||||
"application/json");
|
||||
} catch (const std::exception &e) {
|
||||
res.status = 500;
|
||||
res.set_content(json{{"error", e.what()}}.dump(), "application/json");
|
||||
}
|
||||
});
|
||||
|
||||
// 以降の章で本物に差し替えるダミー実装
|
||||
svr.Get("/models",
|
||||
[](const httplib::Request &, httplib::Response &res) {
|
||||
res.set_content(json{{"models", json::array()}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
svr.Post("/models/select",
|
||||
[](const httplib::Request &, httplib::Response &res) {
|
||||
res.set_content(json{{"status", "TODO"}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
// `Ctrl+C` (`SIGINT`)や`kill` (`SIGTERM`)でサーバーを停止できるようにする
|
||||
signal(SIGINT, signal_handler);
|
||||
signal(SIGTERM, signal_handler);
|
||||
|
||||
// サーバー起動（`stop()`が呼ばれるまでブロック）
|
||||
std::cout << "Listening on http://127.0.0.1:8080" << std::endl;
|
||||
svr.listen("127.0.0.1", 8080);
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## 2.4 動作確認
|
||||
|
||||
ビルドし直してサーバーを起動し、今度は実際の翻訳結果が返ってくるか確かめましょう。
|
||||
|
||||
```bash
|
||||
cmake --build build -j
|
||||
./build/translate-server
|
||||
```
|
||||
|
||||
```bash
|
||||
curl -X POST http://localhost:8080/translate \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"text": "I had a great time visiting Tokyo last spring. The cherry blossoms were beautiful.", "target_lang": "ja"}'
|
||||
# => {"translation":"去年の春に東京を訪れた。桜が綺麗だった。"}
|
||||
```
|
||||
|
||||
1章では`"TODO"`が返ってきていましたが、今度は実際の翻訳結果が返ってきます。
|
||||
|
||||
## 次の章へ
|
||||
|
||||
この章で作ったREST APIは、翻訳が完了するまで全文を待つので、長いテキストだとユーザーは進捗がわからないまま待つことになります。
|
||||
|
||||
次の章ではSSE（Server-Sent Events）を使って、トークンが生成されるたびにリアルタイムで返す仕組みにします。
|
||||
|
||||
**Next:** [SSEでトークンストリーミングを追加する](../ch03-sse-streaming)
|
||||
264
docs-src/pages/ja/llm-app/ch03-sse-streaming.md
Normal file
264
docs-src/pages/ja/llm-app/ch03-sse-streaming.md
Normal file
@@ -0,0 +1,264 @@
|
||||
---
|
||||
title: "3. SSEでトークンストリーミングを追加する"
|
||||
order: 3
|
||||
|
||||
---
|
||||
|
||||
2章の`/translate`は、翻訳が完了してから結果をまとめて返していました。短い文なら問題ありませんが、長い文だとユーザーは何も表示されないまま何秒も待つことになります。
|
||||
|
||||
この章ではSSE（Server-Sent Events）を使って、トークンが生成されるたびにリアルタイムで返す`/translate/stream`エンドポイントを追加します。ChatGPTやClaudeのAPIでおなじみの方式です。
|
||||
|
||||
## 3.1 SSEとは
|
||||
|
||||
SSEはHTTPのレスポンスをストリームとして送る仕組みです。クライアントがリクエストを送ると、サーバーは接続を保ったままイベントを少しずつ返します。フォーマットはシンプルなテキストです。
|
||||
|
||||
```text
|
||||
data: "去年の"
|
||||
data: "春に"
|
||||
data: "東京を"
|
||||
data: [DONE]
|
||||
```
|
||||
|
||||
各行は`data:`で始まり、空行で区切ります。Content-Typeは`text/event-stream`です。トークンはJSON文字列としてエスケープして送るので、ダブルクォートで囲んだ形式になります（3.3節で実装します）。
|
||||
|
||||
## 3.2 cpp-httplibでのストリーミング
|
||||
|
||||
cpp-httplibでは`set_chunked_content_provider`を使うと、レスポンスを少しずつ送れます。コールバックの中で`sink.os`に書き込むたびにデータがクライアントに届きます。
|
||||
|
||||
```cpp
|
||||
res.set_chunked_content_provider(
|
||||
"text/event-stream",
|
||||
[](size_t offset, httplib::DataSink &sink) {
|
||||
sink.os << "data: hello\n\n";
|
||||
sink.done();
|
||||
return true;
|
||||
});
|
||||
```
|
||||
|
||||
`sink.done()`を呼ぶとストリームが終了します。クライアントが途中で接続を切った場合、`sink.os`の書き込みが失敗して`sink.os.fail()`が`true`になります。これを使って切断を検知し、不要な推論を中断できます。
|
||||
|
||||
## 3.3 `/translate/stream`ハンドラ
|
||||
|
||||
JSONパースとバリデーションは2章の`/translate`と同じです。違うのはレスポンスの返し方だけ。`llm.chat()`のストリーミングコールバックと`set_chunked_content_provider`を組み合わせます。
|
||||
|
||||
```cpp
|
||||
svr.Post("/translate/stream",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
// ... JSONパース・バリデーションは/translateと同じ ...
|
||||
|
||||
res.set_chunked_content_provider(
|
||||
"text/event-stream",
|
||||
[&, prompt](size_t, httplib::DataSink &sink) {
|
||||
try {
|
||||
llm.chat(prompt, [&](std::string_view token) {
|
||||
sink.os << "data: "
|
||||
<< json(std::string(token)).dump(
|
||||
-1, ' ', false, json::error_handler_t::replace)
|
||||
<< "\n\n";
|
||||
return sink.os.good(); // 切断されたらfalse→推論を中断
|
||||
});
|
||||
sink.os << "data: [DONE]\n\n";
|
||||
} catch (const std::exception &e) {
|
||||
sink.os << "data: " << json({{"error", e.what()}}).dump() << "\n\n";
|
||||
}
|
||||
sink.done();
|
||||
return true;
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
ポイントをいくつか。
|
||||
|
||||
- `llm.chat()`にコールバックを渡すと、トークンが生成されるたびに呼ばれます。コールバックが`false`を返すと生成を中断します
|
||||
- `sink.os`に書き込んだ後、`sink.os.good()`でクライアントがまだ接続しているかを確認できます。切断されていたら`false`を返して推論を止めます
|
||||
- 各トークンは`json(token).dump()`でJSON文字列としてエスケープしてから送ります。改行やクォートを含むトークンでも安全です
|
||||
- `dump(-1, ' ', false, ...)`の最初の3つの引数はデフォルトと同じです。重要なのは第4引数の`json::error_handler_t::replace`です。LLMはトークンをサブワード単位で返すため、マルチバイト文字（日本語など）の途中でトークンが切れることがあります。不完全なUTF-8バイト列をそのまま`dump()`に渡すと例外が飛ぶので、`replace`で安全に置換します。ブラウザ側で結合されるため、表示上の問題はありません
|
||||
- `try/catch`でラムダ全体を囲んでいます。`llm.chat()`はコンテキストウィンドウの超過などで例外を投げることがあります。ラムダ内で例外が未捕捉だとサーバーがクラッシュするので、エラーをSSEイベントとして返します
|
||||
- `data: [DONE]`はOpenAI APIと同じ慣習で、ストリームの終了をクライアントに伝えます
|
||||
|
||||
## 3.4 全体のコード
|
||||
|
||||
2章のコードに`/translate/stream`を追加した完成形です。
|
||||
|
||||
<details>
|
||||
<summary data-file="main.cpp">全体のコード（main.cpp）</summary>
|
||||
|
||||
```cpp
|
||||
#include <httplib.h>
|
||||
#include <nlohmann/json.hpp>
|
||||
#include <cpp-llamalib.h>
|
||||
|
||||
#include <csignal>
|
||||
#include <iostream>
|
||||
|
||||
using json = nlohmann::json;
|
||||
|
||||
httplib::Server svr;
|
||||
|
||||
// `Ctrl+C`でgraceful shutdown
|
||||
void signal_handler(int sig) {
|
||||
if (sig == SIGINT || sig == SIGTERM) {
|
||||
std::cout << "\nReceived signal, shutting down gracefully...\n";
|
||||
svr.stop();
|
||||
}
|
||||
}
|
||||
|
||||
int main() {
|
||||
// GGUFモデルをロード
|
||||
auto llm = llamalib::Llama{"models/gemma-2-2b-it-Q4_K_M.gguf"};
|
||||
|
||||
// LLM推論は時間がかかるのでタイムアウトを長めに設定（デフォルトは5秒）
|
||||
svr.set_read_timeout(300);
|
||||
svr.set_write_timeout(300);
|
||||
|
||||
// リクエストとレスポンスをログに記録
|
||||
svr.set_logger([](const auto &req, const auto &res) {
|
||||
std::cout << req.method << " " << req.path << " -> " << res.status
|
||||
<< std::endl;
|
||||
});
|
||||
|
||||
svr.Get("/health", [](const httplib::Request &, httplib::Response &res) {
|
||||
res.set_content(json{{"status", "ok"}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
// 2章で作った通常の翻訳エンドポイント
|
||||
svr.Post("/translate",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
// JSONパース・バリデーション（詳細は2章を参照）
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "Invalid JSON"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!input.contains("text") || !input["text"].is_string() ||
|
||||
input["text"].get<std::string>().empty()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'text' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto text = input["text"].get<std::string>();
|
||||
auto target_lang = input.value("target_lang", "ja");
|
||||
|
||||
auto prompt = "Translate the following text to " + target_lang +
|
||||
". Output only the translation, nothing else.\n\n" + text;
|
||||
|
||||
try {
|
||||
auto translation = llm.chat(prompt);
|
||||
res.set_content(json{{"translation", translation}}.dump(),
|
||||
"application/json");
|
||||
} catch (const std::exception &e) {
|
||||
res.status = 500;
|
||||
res.set_content(json{{"error", e.what()}}.dump(), "application/json");
|
||||
}
|
||||
});
|
||||
|
||||
// SSEストリーミング翻訳エンドポイント
|
||||
svr.Post("/translate/stream",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
// JSONパース・バリデーション（/translateと同じ）
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "Invalid JSON"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!input.contains("text") || !input["text"].is_string() ||
|
||||
input["text"].get<std::string>().empty()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'text' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto text = input["text"].get<std::string>();
|
||||
auto target_lang = input.value("target_lang", "ja");
|
||||
|
||||
auto prompt = "Translate the following text to " + target_lang +
|
||||
". Output only the translation, nothing else.\n\n" + text;
|
||||
|
||||
res.set_chunked_content_provider(
|
||||
"text/event-stream",
|
||||
[&, prompt](size_t, httplib::DataSink &sink) {
|
||||
try {
|
||||
llm.chat(prompt, [&](std::string_view token) {
|
||||
sink.os << "data: "
|
||||
<< json(std::string(token)).dump(
|
||||
-1, ' ', false, json::error_handler_t::replace)
|
||||
<< "\n\n";
|
||||
return sink.os.good(); // 切断されたら推論を中断
|
||||
});
|
||||
sink.os << "data: [DONE]\n\n";
|
||||
} catch (const std::exception &e) {
|
||||
sink.os << "data: " << json({{"error", e.what()}}).dump() << "\n\n";
|
||||
}
|
||||
sink.done();
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
// 以降の章で本物に差し替えるダミー実装
|
||||
svr.Get("/models",
|
||||
[](const httplib::Request &, httplib::Response &res) {
|
||||
res.set_content(json{{"models", json::array()}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
svr.Post("/models/select",
|
||||
[](const httplib::Request &, httplib::Response &res) {
|
||||
res.set_content(json{{"status", "TODO"}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
// `Ctrl+C` (`SIGINT`)や`kill` (`SIGTERM`)でサーバーを停止できるようにする
|
||||
signal(SIGINT, signal_handler);
|
||||
signal(SIGTERM, signal_handler);
|
||||
|
||||
// サーバー起動（`stop()`が呼ばれるまでブロック）
|
||||
std::cout << "Listening on http://127.0.0.1:8080" << std::endl;
|
||||
svr.listen("127.0.0.1", 8080);
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## 3.5 動作確認
|
||||
|
||||
ビルドしてサーバーを起動します。
|
||||
|
||||
```bash
|
||||
cmake --build build -j
|
||||
./build/translate-server
|
||||
```
|
||||
|
||||
curlの`-N`オプションでバッファリングを無効にすると、トークンが届くたびにリアルタイムで表示されます。
|
||||
|
||||
```bash
|
||||
curl -N -X POST http://localhost:8080/translate/stream \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"text": "I had a great time visiting Tokyo last spring. The cherry blossoms were beautiful.", "target_lang": "ja"}'
|
||||
```
|
||||
|
||||
```text
|
||||
data: "去年の"
|
||||
data: "春に"
|
||||
data: "東京を"
|
||||
data: "訪れた"
|
||||
data: "。"
|
||||
data: "桜が"
|
||||
data: "綺麗だった"
|
||||
data: "。"
|
||||
data: [DONE]
|
||||
```
|
||||
|
||||
トークンがひとつずつ流れてくるのが確認できるはずです。2章の`/translate`も引き続き使えます。
|
||||
|
||||
## 次の章へ
|
||||
|
||||
サーバーの翻訳機能はこれで一通り揃いました。次の章では、cpp-httplibのクライアント機能を使ってHugging Faceからモデルを取得・管理する機能を追加します。
|
||||
|
||||
**Next:** [モデルの取得・管理機能を追加する](../ch04-model-management)
|
||||
788
docs-src/pages/ja/llm-app/ch04-model-management.md
Normal file
788
docs-src/pages/ja/llm-app/ch04-model-management.md
Normal file
@@ -0,0 +1,788 @@
|
||||
---
|
||||
title: "4. モデルの取得・管理機能を追加する"
|
||||
order: 4
|
||||
|
||||
---
|
||||
|
||||
3章まででサーバーの翻訳機能は一通り揃いました。しかし、モデルファイルは1章で手動ダウンロードした1つだけです。この章ではcpp-httplibの**クライアント機能**を使い、アプリ内からHugging Faceのモデルをダウンロード・切り替えできるようにします。
|
||||
|
||||
完成すると、こんなリクエストでモデルを管理できるようになります。
|
||||
|
||||
```bash
|
||||
# 利用可能なモデル一覧を取得
|
||||
curl http://localhost:8080/models
|
||||
```
|
||||
|
||||
```json
|
||||
{
|
||||
"models": [
|
||||
{"name": "gemma-2-2b-it", "params": "2B", "size": "1.6 GB", "downloaded": true, "selected": true},
|
||||
{"name": "gemma-2-9b-it", "params": "9B", "size": "5.8 GB", "downloaded": false, "selected": false},
|
||||
{"name": "Llama-3.1-8B-Instruct", "params": "8B", "size": "4.9 GB", "downloaded": false, "selected": false}
|
||||
]
|
||||
}
|
||||
```
|
||||
|
||||
```bash
|
||||
# 別のモデルを選択（未ダウンロードなら自動で取得）
|
||||
curl -N -X POST http://localhost:8080/models/select \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"model": "gemma-2-9b-it"}'
|
||||
```
|
||||
|
||||
```text
|
||||
data: {"status":"downloading","progress":0}
|
||||
data: {"status":"downloading","progress":12}
|
||||
...
|
||||
data: {"status":"downloading","progress":100}
|
||||
data: {"status":"loading"}
|
||||
data: {"status":"ready"}
|
||||
```
|
||||
|
||||
## 4.1 httplib::Clientの基本
|
||||
|
||||
これまでは`httplib::Server`だけを使ってきましたが、cpp-httplibはクライアント機能も備えています。Hugging FaceはHTTPSなので、TLS対応のクライアントが必要です。
|
||||
|
||||
```cpp
|
||||
#include <httplib.h>
|
||||
|
||||
// URLスキームを含めると自動でSSLClientが使われる
|
||||
httplib::Client cli("https://huggingface.co");
|
||||
|
||||
// リダイレクト先を自動で追従（Hugging FaceはCDNにリダイレクトする）
|
||||
cli.set_follow_location(true);
|
||||
|
||||
auto res = cli.Get("/api/models");
|
||||
if (res && res->status == 200) {
|
||||
std::cout << res->body << std::endl;
|
||||
}
|
||||
```
|
||||
|
||||
HTTPSを使うには、ビルド時にOpenSSLを有効にする必要があります。`CMakeLists.txt`に以下を追加しましょう。
|
||||
|
||||
```cmake
|
||||
find_package(OpenSSL REQUIRED)
|
||||
|
||||
target_link_libraries(translate-server PRIVATE OpenSSL::SSL OpenSSL::Crypto)
|
||||
target_compile_definitions(translate-server PRIVATE CPPHTTPLIB_OPENSSL_SUPPORT)
|
||||
|
||||
# macOS: システム証明書の読み込みに必要
|
||||
if(APPLE)
|
||||
target_link_libraries(translate-server PRIVATE "-framework CoreFoundation" "-framework Security")
|
||||
endif()
|
||||
```
|
||||
|
||||
`CPPHTTPLIB_OPENSSL_SUPPORT`を定義すると、`httplib::Client("https://...")`がTLS接続を行います。macOSではシステム証明書ストアにアクセスするため、CoreFoundationとSecurityフレームワークのリンクも必要です。完全な`CMakeLists.txt`は4.8節にあります。
|
||||
|
||||
## 4.2 モデル一覧を定義する
|
||||
|
||||
アプリが扱えるモデルの一覧を定義します。翻訳タスクで検証済みの4モデルを用意しました。
|
||||
|
||||
```cpp
|
||||
struct ModelInfo {
|
||||
std::string name; // 表示名
|
||||
std::string params; // パラメータ数
|
||||
std::string size; // GGUF Q4サイズ
|
||||
std::string repo; // Hugging Faceリポジトリ
|
||||
std::string filename; // GGUFファイル名
|
||||
};
|
||||
|
||||
const std::vector<ModelInfo> MODELS = {
|
||||
{
|
||||
.name = "gemma-2-2b-it",
|
||||
.params = "2B",
|
||||
.size = "1.6 GB",
|
||||
.repo = "bartowski/gemma-2-2b-it-GGUF",
|
||||
.filename = "gemma-2-2b-it-Q4_K_M.gguf",
|
||||
},
|
||||
{
|
||||
.name = "gemma-2-9b-it",
|
||||
.params = "9B",
|
||||
.size = "5.8 GB",
|
||||
.repo = "bartowski/gemma-2-9b-it-GGUF",
|
||||
.filename = "gemma-2-9b-it-Q4_K_M.gguf",
|
||||
},
|
||||
{
|
||||
.name = "Llama-3.1-8B-Instruct",
|
||||
.params = "8B",
|
||||
.size = "4.9 GB",
|
||||
.repo = "bartowski/Meta-Llama-3.1-8B-Instruct-GGUF",
|
||||
.filename = "Meta-Llama-3.1-8B-Instruct-Q4_K_M.gguf",
|
||||
},
|
||||
};
|
||||
```
|
||||
|
||||
## 4.3 モデルの保存場所
|
||||
|
||||
3章まではプロジェクトディレクトリ内の`models/`にモデルを置いていました。しかし複数モデルを管理するなら、アプリ専用のディレクトリに保存する方が適切です。macOS/Linuxでは`~/.translate-app/models/`、Windowsでは`%APPDATA%\translate-app\models\`を使います。
|
||||
|
||||
```cpp
|
||||
std::filesystem::path get_models_dir() {
|
||||
#ifdef _WIN32
|
||||
auto env = std::getenv("APPDATA");
|
||||
auto base = env ? std::filesystem::path(env) : std::filesystem::path(".");
|
||||
return base / "translate-app" / "models";
|
||||
#else
|
||||
auto env = std::getenv("HOME");
|
||||
auto base = env ? std::filesystem::path(env) : std::filesystem::path(".");
|
||||
return base / ".translate-app" / "models";
|
||||
#endif
|
||||
}
|
||||
```
|
||||
|
||||
環境変数が未設定の場合はカレントディレクトリにフォールバックします。このディレクトリはアプリ起動時に自動作成します（`create_directories`は既に存在していてもエラーになりません）。
|
||||
|
||||
## 4.4 モデルの初期化を書き換える
|
||||
|
||||
モデルの初期化を`main()`の先頭で書き換えます。1章ではパスをハードコードしていましたが、ここからはモデルの切り替えに対応します。現在ロード中のファイル名は`selected_model`変数で管理します。起動時は`MODELS`の先頭エントリーをロードします。この変数は`GET /models`や`POST /models/select`のハンドラから参照・更新します。
|
||||
|
||||
cpp-httplibはスレッドプールでハンドラを並行実行します。そのため、モデル切り替え中（`llm`の上書き中）に別スレッドで`llm.chat()`が走るとクラッシュします。`std::mutex`で排他制御を入れておきます。
|
||||
|
||||
```cpp
|
||||
int main() {
|
||||
auto models_dir = get_models_dir();
|
||||
std::filesystem::create_directories(models_dir);
|
||||
|
||||
std::string selected_model = MODELS[0].filename;
|
||||
auto path = models_dir / selected_model;
|
||||
|
||||
// デフォルトモデルが未ダウンロードなら起動時に自動取得
|
||||
if (!std::filesystem::exists(path)) {
|
||||
std::cout << "Downloading " << selected_model << "..." << std::endl;
|
||||
if (!download_model(MODELS[0], [](int pct) {
|
||||
std::cout << "\r" << pct << "%" << std::flush;
|
||||
return true;
|
||||
})) {
|
||||
std::cerr << "\nFailed to download model." << std::endl;
|
||||
return 1;
|
||||
}
|
||||
std::cout << std::endl;
|
||||
}
|
||||
auto llm = llamalib::Llama{path};
|
||||
std::mutex llm_mutex; // モデル切り替え中のアクセスを保護する
|
||||
// ...
|
||||
}
|
||||
```
|
||||
|
||||
初回起動時にユーザーが`curl`で手動ダウンロードしなくても済むようにしています。4.6節の`download_model`関数を使い、進捗をコンソールに表示します。
|
||||
|
||||
## 4.5 `GET /models`ハンドラ
|
||||
|
||||
モデル一覧に「ダウンロード済みか」「選択中か」の情報を付けて返します。
|
||||
|
||||
```cpp
|
||||
svr.Get("/models",
|
||||
[&](const httplib::Request &, httplib::Response &res) {
|
||||
auto arr = json::array();
|
||||
for (const auto &m : MODELS) {
|
||||
auto path = get_models_dir() / m.filename;
|
||||
arr.push_back({
|
||||
{"name", m.name},
|
||||
{"params", m.params},
|
||||
{"size", m.size},
|
||||
{"downloaded", std::filesystem::exists(path)},
|
||||
{"selected", m.filename == selected_model},
|
||||
});
|
||||
}
|
||||
res.set_content(json{{"models", arr}}.dump(), "application/json");
|
||||
});
|
||||
```
|
||||
|
||||
## 4.6 大きなファイルをダウンロードする
|
||||
|
||||
GGUFモデルは数GBあるため、全体をメモリに載せるわけにはいきません。`httplib::Client::Get`にコールバックを渡すと、チャンクごとにデータを受け取れます。
|
||||
|
||||
```cpp
|
||||
// content_receiver: データチャンクを受け取るコールバック
|
||||
// progress: ダウンロード進捗コールバック
|
||||
cli.Get(url,
|
||||
[&](const char *data, size_t len) { // content_receiver
|
||||
ofs.write(data, len);
|
||||
return true; // falseを返すと中断
|
||||
},
|
||||
[&](size_t current, size_t total) { // progress
|
||||
int pct = total ? (int)(current * 100 / total) : 0;
|
||||
std::cout << pct << "%" << std::endl;
|
||||
return true; // falseを返すと中断
|
||||
});
|
||||
```
|
||||
|
||||
これを使ってHugging Faceからモデルをダウンロードする関数を作ります。
|
||||
|
||||
```cpp
|
||||
#include <filesystem>
|
||||
#include <fstream>
|
||||
|
||||
// モデルをダウンロードし、進捗をprogress_cbで通知する
|
||||
// progress_cbがfalseを返すとダウンロードを中断する
|
||||
bool download_model(const ModelInfo &model,
|
||||
std::function<bool(int)> progress_cb) {
|
||||
httplib::Client cli("https://huggingface.co");
|
||||
cli.set_follow_location(true);
|
||||
cli.set_read_timeout(std::chrono::hours(1));
|
||||
|
||||
auto url = "/" + model.repo + "/resolve/main/" + model.filename;
|
||||
auto path = get_models_dir() / model.filename;
|
||||
auto tmp_path = std::filesystem::path(path).concat(".tmp");
|
||||
|
||||
std::ofstream ofs(tmp_path, std::ios::binary);
|
||||
if (!ofs) { return false; }
|
||||
|
||||
auto res = cli.Get(url,
|
||||
[&](const char *data, size_t len) {
|
||||
ofs.write(data, len);
|
||||
return ofs.good();
|
||||
},
|
||||
[&](size_t current, size_t total) {
|
||||
return progress_cb(total ? (int)(current * 100 / total) : 0);
|
||||
});
|
||||
|
||||
ofs.close();
|
||||
|
||||
if (!res || res->status != 200) {
|
||||
std::filesystem::remove(tmp_path);
|
||||
return false;
|
||||
}
|
||||
|
||||
// .tmpに書いてからリネームすることで、DLが途中で止まっても
|
||||
// 不完全なファイルがモデルとして使われるのを防ぐ
|
||||
std::filesystem::rename(tmp_path, path);
|
||||
return true;
|
||||
}
|
||||
```
|
||||
|
||||
## 4.7 `/models/select`ハンドラ
|
||||
|
||||
モデルの選択リクエストを処理します。レスポンスは常にSSEで返し、ダウンロード進捗 → ロード → 完了のステータスを順に通知します。
|
||||
|
||||
```cpp
|
||||
svr.Post("/models/select",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded() || !input.contains("model")) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'model' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto name = input["model"].get<std::string>();
|
||||
|
||||
// モデル一覧から探す
|
||||
auto it = std::find_if(MODELS.begin(), MODELS.end(),
|
||||
[&](const ModelInfo &m) { return m.name == name; });
|
||||
|
||||
if (it == MODELS.end()) {
|
||||
res.status = 404;
|
||||
res.set_content(json{{"error", "Unknown model"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
const auto &model = *it;
|
||||
|
||||
// 常にSSEで応答する（DL済みでも未DLでも同じ形式）
|
||||
res.set_chunked_content_provider(
|
||||
"text/event-stream",
|
||||
[&, model](size_t, httplib::DataSink &sink) {
|
||||
// SSEイベント送信ヘルパー
|
||||
auto send = [&](const json &event) {
|
||||
sink.os << "data: " << event.dump() << "\n\n";
|
||||
};
|
||||
|
||||
// 未ダウンロードならダウンロード（進捗をSSEで通知）
|
||||
auto path = get_models_dir() / model.filename;
|
||||
if (!std::filesystem::exists(path)) {
|
||||
bool ok = download_model(model, [&](int pct) {
|
||||
send({{"status", "downloading"}, {"progress", pct}});
|
||||
return sink.os.good(); // クライアント切断時にダウンロードを中断
|
||||
});
|
||||
if (!ok) {
|
||||
send({{"status", "error"}, {"message", "Download failed"}});
|
||||
sink.done();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// モデルをロードして切り替え
|
||||
send({{"status", "loading"}});
|
||||
{
|
||||
std::lock_guard<std::mutex> lock(llm_mutex);
|
||||
llm = llamalib::Llama{path};
|
||||
selected_model = model.filename;
|
||||
}
|
||||
|
||||
send({{"status", "ready"}});
|
||||
sink.done();
|
||||
return true;
|
||||
});
|
||||
});
|
||||
```
|
||||
|
||||
いくつか補足します。
|
||||
|
||||
- `download_model`の進捗コールバックから直接SSEイベントを送っています。3章の`set_chunked_content_provider` + `sink.os`の応用です
|
||||
- コールバックが`sink.os.good()`を返すので、クライアントが接続を切るとダウンロードも中断します。5章で追加するキャンセルボタンで使います
|
||||
- `selected_model`を更新すると、`GET /models`の`selected`フラグに反映されます
|
||||
- `llm`の上書きを`llm_mutex`で保護しています。`/translate`や`/translate/stream`のハンドラも同じ`mutex`でロックするので、モデル切り替え中に推論が走ることはありません（全体コードを参照）
|
||||
|
||||
## 4.8 全体のコード
|
||||
|
||||
3章のコードにモデル管理機能を追加した完成形です。
|
||||
|
||||
<details>
|
||||
<summary data-file="CMakeLists.txt">全体のコード（CMakeLists.txt）</summary>
|
||||
|
||||
```cmake
|
||||
cmake_minimum_required(VERSION 3.20)
|
||||
project(translate-server CXX)
|
||||
set(CMAKE_CXX_STANDARD 20)
|
||||
|
||||
include(FetchContent)
|
||||
|
||||
# llama.cpp
|
||||
FetchContent_Declare(llama
|
||||
GIT_REPOSITORY https://github.com/ggml-org/llama.cpp
|
||||
GIT_TAG master
|
||||
GIT_SHALLOW TRUE
|
||||
)
|
||||
FetchContent_MakeAvailable(llama)
|
||||
|
||||
# cpp-httplib
|
||||
FetchContent_Declare(httplib
|
||||
GIT_REPOSITORY https://github.com/yhirose/cpp-httplib
|
||||
GIT_TAG master
|
||||
)
|
||||
FetchContent_MakeAvailable(httplib)
|
||||
|
||||
# nlohmann/json
|
||||
FetchContent_Declare(json
|
||||
URL https://github.com/nlohmann/json/releases/download/v3.11.3/json.tar.xz
|
||||
)
|
||||
FetchContent_MakeAvailable(json)
|
||||
|
||||
# cpp-llamalib
|
||||
FetchContent_Declare(cpp_llamalib
|
||||
GIT_REPOSITORY https://github.com/yhirose/cpp-llamalib
|
||||
GIT_TAG main
|
||||
)
|
||||
FetchContent_MakeAvailable(cpp_llamalib)
|
||||
|
||||
find_package(OpenSSL REQUIRED)
|
||||
|
||||
add_executable(translate-server src/main.cpp)
|
||||
|
||||
target_link_libraries(translate-server PRIVATE
|
||||
httplib::httplib
|
||||
nlohmann_json::nlohmann_json
|
||||
cpp-llamalib
|
||||
OpenSSL::SSL OpenSSL::Crypto
|
||||
)
|
||||
|
||||
target_compile_definitions(translate-server PRIVATE CPPHTTPLIB_OPENSSL_SUPPORT)
|
||||
|
||||
if(APPLE)
|
||||
target_link_libraries(translate-server PRIVATE
|
||||
"-framework CoreFoundation"
|
||||
"-framework Security"
|
||||
)
|
||||
endif()
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary data-file="main.cpp">全体のコード（main.cpp）</summary>
|
||||
|
||||
```cpp
|
||||
#include <httplib.h>
|
||||
#include <nlohmann/json.hpp>
|
||||
#include <cpp-llamalib.h>
|
||||
|
||||
#include <algorithm>
|
||||
#include <csignal>
|
||||
#include <filesystem>
|
||||
#include <fstream>
|
||||
#include <iostream>
|
||||
#include <mutex>
|
||||
|
||||
using json = nlohmann::json;
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// モデル定義
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
struct ModelInfo {
|
||||
std::string name;
|
||||
std::string params;
|
||||
std::string size;
|
||||
std::string repo;
|
||||
std::string filename;
|
||||
};
|
||||
|
||||
const std::vector<ModelInfo> MODELS = {
|
||||
{
|
||||
.name = "gemma-2-2b-it",
|
||||
.params = "2B",
|
||||
.size = "1.6 GB",
|
||||
.repo = "bartowski/gemma-2-2b-it-GGUF",
|
||||
.filename = "gemma-2-2b-it-Q4_K_M.gguf",
|
||||
},
|
||||
{
|
||||
.name = "gemma-2-9b-it",
|
||||
.params = "9B",
|
||||
.size = "5.8 GB",
|
||||
.repo = "bartowski/gemma-2-9b-it-GGUF",
|
||||
.filename = "gemma-2-9b-it-Q4_K_M.gguf",
|
||||
},
|
||||
{
|
||||
.name = "Llama-3.1-8B-Instruct",
|
||||
.params = "8B",
|
||||
.size = "4.9 GB",
|
||||
.repo = "bartowski/Meta-Llama-3.1-8B-Instruct-GGUF",
|
||||
.filename = "Meta-Llama-3.1-8B-Instruct-Q4_K_M.gguf",
|
||||
},
|
||||
};
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// モデル保存ディレクトリ
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
std::filesystem::path get_models_dir() {
|
||||
#ifdef _WIN32
|
||||
auto env = std::getenv("APPDATA");
|
||||
auto base = env ? std::filesystem::path(env) : std::filesystem::path(".");
|
||||
return base / "translate-app" / "models";
|
||||
#else
|
||||
auto env = std::getenv("HOME");
|
||||
auto base = env ? std::filesystem::path(env) : std::filesystem::path(".");
|
||||
return base / ".translate-app" / "models";
|
||||
#endif
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// モデルダウンロード
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
// progress_cbがfalseを返したらダウンロードを中断する
|
||||
bool download_model(const ModelInfo &model,
|
||||
std::function<bool(int)> progress_cb) {
|
||||
httplib::Client cli("https://huggingface.co");
|
||||
cli.set_follow_location(true); // Hugging FaceはCDNにリダイレクトする
|
||||
cli.set_read_timeout(std::chrono::hours(1)); // 大きなモデルに備えて長めに
|
||||
|
||||
auto url = "/" + model.repo + "/resolve/main/" + model.filename;
|
||||
auto path = get_models_dir() / model.filename;
|
||||
auto tmp_path = std::filesystem::path(path).concat(".tmp");
|
||||
|
||||
std::ofstream ofs(tmp_path, std::ios::binary);
|
||||
if (!ofs) { return false; }
|
||||
|
||||
auto res = cli.Get(url,
|
||||
// content_receiver: チャンクごとにデータを受け取ってファイルに書き込む
|
||||
[&](const char *data, size_t len) {
|
||||
ofs.write(data, len);
|
||||
return ofs.good();
|
||||
},
|
||||
// progress: ダウンロード進捗を通知（falseを返すと中断）
|
||||
[&, last_pct = -1](size_t current, size_t total) mutable {
|
||||
int pct = total ? (int)(current * 100 / total) : 0;
|
||||
if (pct == last_pct) return true; // 同じ値なら通知をスキップ
|
||||
last_pct = pct;
|
||||
return progress_cb(pct);
|
||||
});
|
||||
|
||||
ofs.close();
|
||||
|
||||
if (!res || res->status != 200) {
|
||||
std::filesystem::remove(tmp_path);
|
||||
return false;
|
||||
}
|
||||
|
||||
// ダウンロード完了後にリネーム
|
||||
std::filesystem::rename(tmp_path, path);
|
||||
return true;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// サーバー
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
httplib::Server svr;
|
||||
|
||||
void signal_handler(int sig) {
|
||||
if (sig == SIGINT || sig == SIGTERM) {
|
||||
std::cout << "\nReceived signal, shutting down gracefully...\n";
|
||||
svr.stop();
|
||||
}
|
||||
}
|
||||
|
||||
int main() {
|
||||
// モデル保存ディレクトリを作成
|
||||
auto models_dir = get_models_dir();
|
||||
std::filesystem::create_directories(models_dir);
|
||||
|
||||
// デフォルトモデルが未ダウンロードなら自動取得
|
||||
std::string selected_model = MODELS[0].filename;
|
||||
auto path = models_dir / selected_model;
|
||||
if (!std::filesystem::exists(path)) {
|
||||
std::cout << "Downloading " << selected_model << "..." << std::endl;
|
||||
if (!download_model(MODELS[0], [](int pct) {
|
||||
std::cout << "\r" << pct << "%" << std::flush;
|
||||
return true;
|
||||
})) {
|
||||
std::cerr << "\nFailed to download model." << std::endl;
|
||||
return 1;
|
||||
}
|
||||
std::cout << std::endl;
|
||||
}
|
||||
auto llm = llamalib::Llama{path};
|
||||
std::mutex llm_mutex; // モデル切り替え中のアクセスを保護する
|
||||
|
||||
// LLM推論は時間がかかるのでタイムアウトを長めに設定（デフォルトは5秒）
|
||||
svr.set_read_timeout(300);
|
||||
svr.set_write_timeout(300);
|
||||
|
||||
svr.set_logger([](const auto &req, const auto &res) {
|
||||
std::cout << req.method << " " << req.path << " -> " << res.status
|
||||
<< std::endl;
|
||||
});
|
||||
|
||||
svr.Get("/health", [](const httplib::Request &, httplib::Response &res) {
|
||||
res.set_content(json{{"status", "ok"}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
// --- 翻訳エンドポイント（2章） -----------------------------------------
|
||||
|
||||
svr.Post("/translate",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
// JSONパース・バリデーション（詳細は2章を参照）
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "Invalid JSON"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!input.contains("text") || !input["text"].is_string() ||
|
||||
input["text"].get<std::string>().empty()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'text' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto text = input["text"].get<std::string>();
|
||||
auto target_lang = input.value("target_lang", "ja");
|
||||
|
||||
auto prompt = "Translate the following text to " + target_lang +
|
||||
". Output only the translation, nothing else.\n\n" + text;
|
||||
|
||||
try {
|
||||
std::lock_guard<std::mutex> lock(llm_mutex);
|
||||
auto translation = llm.chat(prompt);
|
||||
res.set_content(json{{"translation", translation}}.dump(),
|
||||
"application/json");
|
||||
} catch (const std::exception &e) {
|
||||
res.status = 500;
|
||||
res.set_content(json{{"error", e.what()}}.dump(), "application/json");
|
||||
}
|
||||
});
|
||||
|
||||
// --- SSEストリーミング翻訳（3章）--------------------------------------
|
||||
|
||||
svr.Post("/translate/stream",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "Invalid JSON"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!input.contains("text") || !input["text"].is_string() ||
|
||||
input["text"].get<std::string>().empty()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'text' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto text = input["text"].get<std::string>();
|
||||
auto target_lang = input.value("target_lang", "ja");
|
||||
|
||||
auto prompt = "Translate the following text to " + target_lang +
|
||||
". Output only the translation, nothing else.\n\n" + text;
|
||||
|
||||
res.set_chunked_content_provider(
|
||||
"text/event-stream",
|
||||
[&, prompt](size_t, httplib::DataSink &sink) {
|
||||
std::lock_guard<std::mutex> lock(llm_mutex);
|
||||
try {
|
||||
llm.chat(prompt, [&](std::string_view token) {
|
||||
sink.os << "data: "
|
||||
<< json(std::string(token)).dump(
|
||||
-1, ' ', false, json::error_handler_t::replace)
|
||||
<< "\n\n";
|
||||
return sink.os.good(); // 切断されたら推論を中断
|
||||
});
|
||||
sink.os << "data: [DONE]\n\n";
|
||||
} catch (const std::exception &e) {
|
||||
sink.os << "data: " << json({{"error", e.what()}}).dump() << "\n\n";
|
||||
}
|
||||
sink.done();
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
// --- モデル一覧（4章） -------------------------------------------------
|
||||
|
||||
svr.Get("/models",
|
||||
[&](const httplib::Request &, httplib::Response &res) {
|
||||
auto models_dir = get_models_dir();
|
||||
auto arr = json::array();
|
||||
for (const auto &m : MODELS) {
|
||||
auto path = models_dir / m.filename;
|
||||
arr.push_back({
|
||||
{"name", m.name},
|
||||
{"params", m.params},
|
||||
{"size", m.size},
|
||||
{"downloaded", std::filesystem::exists(path)},
|
||||
{"selected", m.filename == selected_model},
|
||||
});
|
||||
}
|
||||
res.set_content(json{{"models", arr}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
// --- モデル選択（4章） -------------------------------------------------
|
||||
|
||||
svr.Post("/models/select",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded() || !input.contains("model")) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'model' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto name = input["model"].get<std::string>();
|
||||
|
||||
auto it = std::find_if(MODELS.begin(), MODELS.end(),
|
||||
[&](const ModelInfo &m) { return m.name == name; });
|
||||
|
||||
if (it == MODELS.end()) {
|
||||
res.status = 404;
|
||||
res.set_content(json{{"error", "Unknown model"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
const auto &model = *it;
|
||||
|
||||
// 常にSSEで応答する（DL済みでも未DLでも同じ形式）
|
||||
res.set_chunked_content_provider(
|
||||
"text/event-stream",
|
||||
[&, model](size_t, httplib::DataSink &sink) {
|
||||
// SSEイベント送信ヘルパー
|
||||
auto send = [&](const json &event) {
|
||||
sink.os << "data: " << event.dump() << "\n\n";
|
||||
};
|
||||
|
||||
// 未ダウンロードならダウンロード（進捗をSSEで通知）
|
||||
auto path = get_models_dir() / model.filename;
|
||||
if (!std::filesystem::exists(path)) {
|
||||
bool ok = download_model(model, [&](int pct) {
|
||||
send({{"status", "downloading"}, {"progress", pct}});
|
||||
return sink.os.good(); // クライアント切断時にダウンロードを中断
|
||||
});
|
||||
if (!ok) {
|
||||
send({{"status", "error"}, {"message", "Download failed"}});
|
||||
sink.done();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// モデルをロードして切り替え
|
||||
send({{"status", "loading"}});
|
||||
{
|
||||
std::lock_guard<std::mutex> lock(llm_mutex);
|
||||
llm = llamalib::Llama{path};
|
||||
selected_model = model.filename;
|
||||
}
|
||||
|
||||
send({{"status", "ready"}});
|
||||
sink.done();
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
// `Ctrl+C` (`SIGINT`)や`kill` (`SIGTERM`)でサーバーを停止できるようにする
|
||||
signal(SIGINT, signal_handler);
|
||||
signal(SIGTERM, signal_handler);
|
||||
|
||||
std::cout << "Listening on http://127.0.0.1:8080" << std::endl;
|
||||
svr.listen("127.0.0.1", 8080);
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
## 4.9 動作確認
|
||||
|
||||
CMakeLists.txtにOpenSSLの設定を追加したので、CMakeを再実行してからビルドします。
|
||||
|
||||
```bash
|
||||
cmake -B build
|
||||
cmake --build build -j
|
||||
./build/translate-server
|
||||
```
|
||||
|
||||
### モデル一覧の確認
|
||||
|
||||
```bash
|
||||
curl http://localhost:8080/models
|
||||
```
|
||||
|
||||
1章でダウンロードした`gemma-2-2b-it`が`downloaded: true`、`selected: true`になっているはずです。
|
||||
|
||||
### 別のモデルに切り替える
|
||||
|
||||
```bash
|
||||
curl -N -X POST http://localhost:8080/models/select \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"model": "gemma-2-9b-it"}'
|
||||
```
|
||||
|
||||
SSEでダウンロード進捗が流れ、完了すると`"ready"`が返ります。
|
||||
|
||||
### 複数モデルで翻訳を比較する
|
||||
|
||||
同じ例文を異なるモデルで翻訳してみましょう。
|
||||
|
||||
```bash
|
||||
# gemma-2-9b-itで翻訳（先ほど切り替えたモデル）
|
||||
curl -X POST http://localhost:8080/translate \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"text": "The quick brown fox jumps over the lazy dog.", "target_lang": "ja"}'
|
||||
|
||||
# gemma-2-2b-itに戻す
|
||||
curl -N -X POST http://localhost:8080/models/select \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"model": "gemma-2-2b-it"}'
|
||||
|
||||
# 同じ文を翻訳
|
||||
curl -X POST http://localhost:8080/translate \
|
||||
-H "Content-Type: application/json" \
|
||||
-d '{"text": "The quick brown fox jumps over the lazy dog.", "target_lang": "ja"}'
|
||||
```
|
||||
|
||||
同じコード・同じプロンプトでもモデルによって翻訳結果が変わることがわかります。cpp-llamalibがモデルごとのチャットテンプレートを自動適用するので、コード側の変更は不要です。
|
||||
|
||||
## 次の章へ
|
||||
|
||||
これでサーバーの主要な機能が揃いました。REST API、SSEストリーミング、モデルのダウンロードと切り替え。次の章では静的ファイル配信を追加して、ブラウザから操作できるWeb UIを作ります。
|
||||
|
||||
**Next:** [Web UIを追加する](../ch05-web-ui)
|
||||
1223
docs-src/pages/ja/llm-app/ch05-web-ui.md
Normal file
1223
docs-src/pages/ja/llm-app/ch05-web-ui.md
Normal file
File diff suppressed because it is too large
Load Diff
724
docs-src/pages/ja/llm-app/ch06-desktop-app.md
Normal file
724
docs-src/pages/ja/llm-app/ch06-desktop-app.md
Normal file
@@ -0,0 +1,724 @@
|
||||
---
|
||||
title: "6. WebViewでデスクトップアプリ化する"
|
||||
order: 6
|
||||
|
||||
---
|
||||
|
||||
5章で、ブラウザから操作できる翻訳アプリが完成しました。でも使うたびに「サーバーを起動して、ブラウザでURLを開いて…」という手順が必要です。普通のアプリのように、ダブルクリックで起動してすぐ使えるようにしたいですよね。
|
||||
|
||||
この章では2つのことをやります。
|
||||
|
||||
1. **WebView化** — [webview/webview](https://github.com/webview/webview)でブラウザなしで動くデスクトップアプリにする
|
||||
2. **シングルバイナリ化** — [cpp-embedlib](https://github.com/yhirose/cpp-embedlib)でHTML/CSS/JSをバイナリに埋め込み、配布物を1ファイルにする
|
||||
|
||||
完成すると、`./translate-app`を実行するだけでウインドウが開き、翻訳が使えるようになります。
|
||||
|
||||
|
||||
|
||||
モデルは初回起動時に自動ダウンロードされるので、ユーザーに渡すのはバイナリ1つだけです。
|
||||
|
||||
## 6.1 webview/webview を導入する
|
||||
|
||||
[webview/webview](https://github.com/webview/webview)は、OS標準のWebViewコンポーネント（macOSならWKWebView、LinuxならWebKitGTK、WindowsならWebView2）をC/C++から使えるようにするライブラリです。Electronのように独自ブラウザを同梱するわけではないので、バイナリサイズへの影響はほぼありません。
|
||||
|
||||
CMakeで取得します。`CMakeLists.txt`に以下を追加してください。
|
||||
|
||||
```cmake
|
||||
# webview/webview
|
||||
FetchContent_Declare(webview
|
||||
GIT_REPOSITORY https://github.com/webview/webview
|
||||
GIT_TAG master
|
||||
)
|
||||
FetchContent_MakeAvailable(webview)
|
||||
```
|
||||
|
||||
これで`webview::core`というCMakeターゲットが使えるようになります。`target_link_libraries`でリンクすると、インクルードパスやプラットフォーム固有のフレームワークを自動で設定してくれます。
|
||||
|
||||
> **macOS**: 追加の依存は不要です。WKWebViewはシステムに組み込まれています。
|
||||
>
|
||||
> **Linux**: WebKitGTKが必要です。`sudo apt install libwebkit2gtk-4.1-dev`でインストールしてください。
|
||||
>
|
||||
> **Windows**: WebView2ランタイムが必要です。Windows 11には標準搭載されています。Windows 10の場合は[Microsoft公式サイト](https://developer.microsoft.com/en-us/microsoft-edge/webview2/)から入手してください。
|
||||
|
||||
## 6.2 サーバーをバックグラウンドスレッドで動かす
|
||||
|
||||
5章まではサーバーの`listen()`がメインスレッドをブロックしていました。WebViewを使うには、サーバーを別スレッドで動かし、メインスレッドでWebViewのイベントループを回す必要があります。
|
||||
|
||||
```cpp
|
||||
#include "webview/webview.h"
|
||||
#include <thread>
|
||||
|
||||
int main() {
|
||||
// ... (サーバーのセットアップは5章と同じ) ...
|
||||
|
||||
// サーバーをバックグラウンドスレッドで起動
|
||||
auto port = svr.bind_to_any_port("127.0.0.1");
|
||||
std::thread server_thread([&]() { svr.listen_after_bind(); });
|
||||
|
||||
std::cout << "Listening on http://127.0.0.1:" << port << std::endl;
|
||||
|
||||
// WebViewでUIを表示
|
||||
webview::webview w(false, nullptr);
|
||||
w.set_title("Translate App");
|
||||
w.set_size(1024, 768, WEBVIEW_HINT_NONE);
|
||||
w.navigate("http://127.0.0.1:" + std::to_string(port));
|
||||
w.run(); // ウインドウが閉じるまでブロック
|
||||
|
||||
// ウインドウが閉じたらサーバーも停止
|
||||
svr.stop();
|
||||
server_thread.join();
|
||||
}
|
||||
```
|
||||
|
||||
ポイントを見ていきましょう。
|
||||
|
||||
- **`bind_to_any_port`** — `listen("127.0.0.1", 8080)`の代わりに、OSに空いているポートを選んでもらいます。デスクトップアプリは複数起動されることがあるので、ポートを固定するとぶつかります
|
||||
- **`listen_after_bind`** — `bind_to_any_port`で確保したポートでリクエストの受付を開始します。`listen()`はbindとlistenを一度にやりますが、ポート番号を先に知る必要があるので分けています
|
||||
- **シャットダウン順序** — WebViewのウインドウが閉じたら`svr.stop()`でサーバーを止め、`server_thread.join()`でスレッドの終了を待ちます。逆順だとWebViewがサーバーにアクセスできなくなります
|
||||
|
||||
5章の`signal_handler`は不要になります。デスクトップアプリではウインドウを閉じることがアプリの終了を意味するからです。
|
||||
|
||||
## 6.3 cpp-embedlib で静的ファイルを埋め込む
|
||||
|
||||
5章では`public/`ディレクトリからファイルを配信していました。これだと配布時に`public/`も一緒に渡す必要があります。[cpp-embedlib](https://github.com/yhirose/cpp-embedlib)を使うと、HTML・CSS・JavaScriptをバイナリに埋め込んで、配布物をバイナリ1つにまとめられます。
|
||||
|
||||
### CMakeLists.txt
|
||||
|
||||
cpp-embedlibを取得し、`public/`を埋め込みます。
|
||||
|
||||
```cmake
|
||||
# cpp-embedlib
|
||||
FetchContent_Declare(cpp-embedlib
|
||||
GIT_REPOSITORY https://github.com/yhirose/cpp-embedlib
|
||||
GIT_TAG main
|
||||
)
|
||||
FetchContent_MakeAvailable(cpp-embedlib)
|
||||
|
||||
# public/ ディレクトリをバイナリに埋め込む
|
||||
cpp_embedlib_add(WebAssets
|
||||
FOLDER ${CMAKE_CURRENT_SOURCE_DIR}/public
|
||||
NAMESPACE Web
|
||||
)
|
||||
|
||||
target_link_libraries(translate-app PRIVATE
|
||||
WebAssets # 埋め込みファイル
|
||||
cpp-embedlib-httplib # cpp-httplib連携
|
||||
)
|
||||
```
|
||||
|
||||
`cpp_embedlib_add`は、`public/`配下のファイルをコンパイル時にバイナリに変換し、`WebAssets`という静的ライブラリを作ります。リンクすると`Web::FS`というオブジェクトから埋め込みファイルにアクセスできます。`cpp-embedlib-httplib`は`httplib::mount()`関数を提供するヘルパーライブラリです。
|
||||
|
||||
### set_mount_point を httplib::mount に置き換える
|
||||
|
||||
5章の`set_mount_point`をcpp-embedlibの`httplib::mount`に置き換えるだけです。
|
||||
|
||||
```cpp
|
||||
#include <cpp-embedlib-httplib.h>
|
||||
#include "WebAssets.h"
|
||||
|
||||
// 5章:
|
||||
// svr.set_mount_point("/", "./public");
|
||||
|
||||
// 6章:
|
||||
httplib::mount(svr, Web::FS);
|
||||
```
|
||||
|
||||
`httplib::mount`は、`Web::FS`に埋め込まれたファイルをHTTPで配信するハンドラを登録します。MIMEタイプはファイルの拡張子から自動判定するので、`Content-Type`を手動で設定する必要はありません。
|
||||
|
||||
ファイルの中身はバイナリのデータセグメントに直接マップしているので、メモリコピーもヒープ割り当ても発生しません。
|
||||
|
||||
## 6.4 macOS: Editメニューの追加
|
||||
|
||||
入力欄に`Cmd+V`でテキストをペーストしようとすると、動かないことに気づくはずです。macOSでは、`Cmd+V`（ペースト）や`Cmd+C`（コピー）などのキーボードショートカットは、アプリケーションのメニューバーを経由してWebViewに届きます。webview/webviewはメニューバーを作らないので、これらのショートカットが効きません。Objective-CランタイムAPIを使ってEditメニューを追加する必要があります。
|
||||
|
||||
```cpp
|
||||
#ifdef __APPLE__
|
||||
#include <objc/objc-runtime.h>
|
||||
|
||||
void setup_macos_edit_menu() {
|
||||
auto cls = [](const char *n) { return (id)objc_getClass(n); };
|
||||
auto sel = sel_registerName;
|
||||
auto msg = reinterpret_cast<id (*)(id, SEL)>(objc_msgSend);
|
||||
auto msg_s = reinterpret_cast<id (*)(id, SEL, const char *)>(objc_msgSend);
|
||||
auto msg_id = reinterpret_cast<id (*)(id, SEL, id)>(objc_msgSend);
|
||||
auto msg_v = reinterpret_cast<void (*)(id, SEL, id)>(objc_msgSend);
|
||||
auto msg_mi = reinterpret_cast<id (*)(id, SEL, id, SEL, id)>(objc_msgSend);
|
||||
|
||||
auto str = [&](const char *s) {
|
||||
return msg_s(cls("NSString"), sel("stringWithUTF8String:"), s);
|
||||
};
|
||||
|
||||
id app = msg(cls("NSApplication"), sel("sharedApplication"));
|
||||
id mainMenu = msg(msg(cls("NSMenu"), sel("alloc")), sel("init"));
|
||||
id editItem = msg(msg(cls("NSMenuItem"), sel("alloc")), sel("init"));
|
||||
id editMenu = msg_id(msg(cls("NSMenu"), sel("alloc")),
|
||||
sel("initWithTitle:"), str("Edit"));
|
||||
|
||||
struct { const char *title; const char *action; const char *key; } items[] = {
|
||||
{"Undo", "undo:", "z"},
|
||||
{"Redo", "redo:", "Z"},
|
||||
{"Cut", "cut:", "x"},
|
||||
{"Copy", "copy:", "c"},
|
||||
{"Paste", "paste:", "v"},
|
||||
{"Select All", "selectAll:", "a"},
|
||||
};
|
||||
|
||||
for (auto &[title, action, key] : items) {
|
||||
id mi = msg_mi(msg(cls("NSMenuItem"), sel("alloc")),
|
||||
sel("initWithTitle:action:keyEquivalent:"),
|
||||
str(title), sel(action), str(key));
|
||||
msg_v(editMenu, sel("addItem:"), mi);
|
||||
}
|
||||
|
||||
msg_v(editItem, sel("setSubmenu:"), editMenu);
|
||||
msg_v(mainMenu, sel("addItem:"), editItem);
|
||||
msg_v(app, sel("setMainMenu:"), mainMenu);
|
||||
}
|
||||
#endif
|
||||
```
|
||||
|
||||
`w.run()`の前に呼び出します。
|
||||
|
||||
```cpp
|
||||
#ifdef __APPLE__
|
||||
setup_macos_edit_menu();
|
||||
#endif
|
||||
w.run();
|
||||
```
|
||||
|
||||
WindowsとLinuxでは、キーボードショートカットはメニューバーを介さずフォーカスのあるコントロールに直接届くので、この対処はmacOS固有です。
|
||||
|
||||
## 6.5 全体のコード
|
||||
|
||||
<details>
|
||||
<summary data-file="CMakeLists.txt">全体のコード（CMakeLists.txt）</summary>
|
||||
|
||||
```cmake
|
||||
cmake_minimum_required(VERSION 3.20)
|
||||
project(translate-app CXX)
|
||||
set(CMAKE_CXX_STANDARD 20)
|
||||
|
||||
include(FetchContent)
|
||||
|
||||
# llama.cpp
|
||||
FetchContent_Declare(llama
|
||||
GIT_REPOSITORY https://github.com/ggml-org/llama.cpp
|
||||
GIT_TAG master
|
||||
GIT_SHALLOW TRUE
|
||||
)
|
||||
FetchContent_MakeAvailable(llama)
|
||||
|
||||
# cpp-httplib
|
||||
FetchContent_Declare(httplib
|
||||
GIT_REPOSITORY https://github.com/yhirose/cpp-httplib
|
||||
GIT_TAG master
|
||||
)
|
||||
FetchContent_MakeAvailable(httplib)
|
||||
|
||||
# nlohmann/json
|
||||
FetchContent_Declare(json
|
||||
URL https://github.com/nlohmann/json/releases/download/v3.11.3/json.tar.xz
|
||||
)
|
||||
FetchContent_MakeAvailable(json)
|
||||
|
||||
# cpp-llamalib
|
||||
FetchContent_Declare(cpp_llamalib
|
||||
GIT_REPOSITORY https://github.com/yhirose/cpp-llamalib
|
||||
GIT_TAG main
|
||||
)
|
||||
FetchContent_MakeAvailable(cpp_llamalib)
|
||||
|
||||
# webview/webview
|
||||
FetchContent_Declare(webview
|
||||
GIT_REPOSITORY https://github.com/webview/webview
|
||||
GIT_TAG master
|
||||
)
|
||||
FetchContent_MakeAvailable(webview)
|
||||
|
||||
# cpp-embedlib
|
||||
FetchContent_Declare(cpp-embedlib
|
||||
GIT_REPOSITORY https://github.com/yhirose/cpp-embedlib
|
||||
GIT_TAG main
|
||||
)
|
||||
FetchContent_MakeAvailable(cpp-embedlib)
|
||||
|
||||
# public/ ディレクトリをバイナリに埋め込む
|
||||
cpp_embedlib_add(WebAssets
|
||||
FOLDER ${CMAKE_CURRENT_SOURCE_DIR}/public
|
||||
NAMESPACE Web
|
||||
)
|
||||
|
||||
find_package(OpenSSL REQUIRED)
|
||||
|
||||
add_executable(translate-app src/main.cpp)
|
||||
|
||||
target_link_libraries(translate-app PRIVATE
|
||||
httplib::httplib
|
||||
nlohmann_json::nlohmann_json
|
||||
cpp-llamalib
|
||||
OpenSSL::SSL OpenSSL::Crypto
|
||||
WebAssets
|
||||
cpp-embedlib-httplib
|
||||
webview::core
|
||||
)
|
||||
|
||||
if(APPLE)
|
||||
target_link_libraries(translate-app PRIVATE
|
||||
"-framework CoreFoundation"
|
||||
"-framework Security"
|
||||
)
|
||||
endif()
|
||||
|
||||
target_compile_definitions(translate-app PRIVATE
|
||||
CPPHTTPLIB_OPENSSL_SUPPORT
|
||||
)
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
<details>
|
||||
<summary data-file="main.cpp">全体のコード（main.cpp）</summary>
|
||||
|
||||
```cpp
|
||||
#include <httplib.h>
|
||||
#include <nlohmann/json.hpp>
|
||||
#include <cpp-llamalib.h>
|
||||
#include <cpp-embedlib-httplib.h>
|
||||
#include "WebAssets.h"
|
||||
#include "webview/webview.h"
|
||||
|
||||
#ifdef __APPLE__
|
||||
#include <objc/objc-runtime.h>
|
||||
#endif
|
||||
|
||||
#include <algorithm>
|
||||
#include <filesystem>
|
||||
#include <fstream>
|
||||
#include <iostream>
|
||||
#include <mutex>
|
||||
#include <thread>
|
||||
|
||||
using json = nlohmann::json;
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// macOS Editメニュー（Cmd+C/V/X/AにはEditメニューが必要）
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
#ifdef __APPLE__
|
||||
void setup_macos_edit_menu() {
|
||||
auto cls = [](const char *n) { return (id)objc_getClass(n); };
|
||||
auto sel = sel_registerName;
|
||||
auto msg = reinterpret_cast<id (*)(id, SEL)>(objc_msgSend);
|
||||
auto msg_s = reinterpret_cast<id (*)(id, SEL, const char *)>(objc_msgSend);
|
||||
auto msg_id = reinterpret_cast<id (*)(id, SEL, id)>(objc_msgSend);
|
||||
auto msg_v = reinterpret_cast<void (*)(id, SEL, id)>(objc_msgSend);
|
||||
auto msg_mi = reinterpret_cast<id (*)(id, SEL, id, SEL, id)>(objc_msgSend);
|
||||
|
||||
auto str = [&](const char *s) {
|
||||
return msg_s(cls("NSString"), sel("stringWithUTF8String:"), s);
|
||||
};
|
||||
|
||||
id app = msg(cls("NSApplication"), sel("sharedApplication"));
|
||||
id mainMenu = msg(msg(cls("NSMenu"), sel("alloc")), sel("init"));
|
||||
id editItem = msg(msg(cls("NSMenuItem"), sel("alloc")), sel("init"));
|
||||
id editMenu = msg_id(msg(cls("NSMenu"), sel("alloc")),
|
||||
sel("initWithTitle:"), str("Edit"));
|
||||
|
||||
struct { const char *title; const char *action; const char *key; } items[] = {
|
||||
{"Undo", "undo:", "z"},
|
||||
{"Redo", "redo:", "Z"},
|
||||
{"Cut", "cut:", "x"},
|
||||
{"Copy", "copy:", "c"},
|
||||
{"Paste", "paste:", "v"},
|
||||
{"Select All", "selectAll:", "a"},
|
||||
};
|
||||
|
||||
for (auto &[title, action, key] : items) {
|
||||
id mi = msg_mi(msg(cls("NSMenuItem"), sel("alloc")),
|
||||
sel("initWithTitle:action:keyEquivalent:"),
|
||||
str(title), sel(action), str(key));
|
||||
msg_v(editMenu, sel("addItem:"), mi);
|
||||
}
|
||||
|
||||
msg_v(editItem, sel("setSubmenu:"), editMenu);
|
||||
msg_v(mainMenu, sel("addItem:"), editItem);
|
||||
msg_v(app, sel("setMainMenu:"), mainMenu);
|
||||
}
|
||||
#endif
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// モデル定義
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
struct ModelInfo {
|
||||
std::string name;
|
||||
std::string params;
|
||||
std::string size;
|
||||
std::string repo;
|
||||
std::string filename;
|
||||
};
|
||||
|
||||
const std::vector<ModelInfo> MODELS = {
|
||||
{
|
||||
.name = "gemma-2-2b-it",
|
||||
.params = "2B",
|
||||
.size = "1.6 GB",
|
||||
.repo = "bartowski/gemma-2-2b-it-GGUF",
|
||||
.filename = "gemma-2-2b-it-Q4_K_M.gguf",
|
||||
},
|
||||
{
|
||||
.name = "gemma-2-9b-it",
|
||||
.params = "9B",
|
||||
.size = "5.8 GB",
|
||||
.repo = "bartowski/gemma-2-9b-it-GGUF",
|
||||
.filename = "gemma-2-9b-it-Q4_K_M.gguf",
|
||||
},
|
||||
{
|
||||
.name = "Llama-3.1-8B-Instruct",
|
||||
.params = "8B",
|
||||
.size = "4.9 GB",
|
||||
.repo = "bartowski/Meta-Llama-3.1-8B-Instruct-GGUF",
|
||||
.filename = "Meta-Llama-3.1-8B-Instruct-Q4_K_M.gguf",
|
||||
},
|
||||
};
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// モデル保存ディレクトリ
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
std::filesystem::path get_models_dir() {
|
||||
#ifdef _WIN32
|
||||
auto env = std::getenv("APPDATA");
|
||||
auto base = env ? std::filesystem::path(env) : std::filesystem::path(".");
|
||||
return base / "translate-app" / "models";
|
||||
#else
|
||||
auto env = std::getenv("HOME");
|
||||
auto base = env ? std::filesystem::path(env) : std::filesystem::path(".");
|
||||
return base / ".translate-app" / "models";
|
||||
#endif
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// モデルダウンロード
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
// progress_cbがfalseを返したらダウンロードを中断する
|
||||
bool download_model(const ModelInfo &model,
|
||||
std::function<bool(int)> progress_cb) {
|
||||
httplib::Client cli("https://huggingface.co");
|
||||
cli.set_follow_location(true); // Hugging FaceはCDNにリダイレクトする
|
||||
cli.set_read_timeout(std::chrono::hours(1)); // 大きなモデルに備えて長めに
|
||||
|
||||
auto url = "/" + model.repo + "/resolve/main/" + model.filename;
|
||||
auto path = get_models_dir() / model.filename;
|
||||
auto tmp_path = std::filesystem::path(path).concat(".tmp");
|
||||
|
||||
std::ofstream ofs(tmp_path, std::ios::binary);
|
||||
if (!ofs) { return false; }
|
||||
|
||||
auto res = cli.Get(url,
|
||||
// content_receiver: チャンクごとにデータを受け取ってファイルに書き込む
|
||||
[&](const char *data, size_t len) {
|
||||
ofs.write(data, len);
|
||||
return ofs.good();
|
||||
},
|
||||
// progress: ダウンロード進捗を通知（falseを返すと中断）
|
||||
[&, last_pct = -1](size_t current, size_t total) mutable {
|
||||
int pct = total ? (int)(current * 100 / total) : 0;
|
||||
if (pct == last_pct) return true; // 同じ値なら通知をスキップ
|
||||
last_pct = pct;
|
||||
return progress_cb(pct);
|
||||
});
|
||||
|
||||
ofs.close();
|
||||
|
||||
if (!res || res->status != 200) {
|
||||
std::filesystem::remove(tmp_path);
|
||||
return false;
|
||||
}
|
||||
|
||||
// ダウンロード完了後にリネーム
|
||||
std::filesystem::rename(tmp_path, path);
|
||||
return true;
|
||||
}
|
||||
|
||||
// -------------------------------------------------------------------------
|
||||
// サーバー
|
||||
// -------------------------------------------------------------------------
|
||||
|
||||
int main() {
|
||||
httplib::Server svr;
|
||||
// モデル保存ディレクトリを作成
|
||||
auto models_dir = get_models_dir();
|
||||
std::filesystem::create_directories(models_dir);
|
||||
|
||||
// デフォルトモデルが未ダウンロードなら自動取得
|
||||
std::string selected_model = MODELS[0].filename;
|
||||
auto path = models_dir / selected_model;
|
||||
if (!std::filesystem::exists(path)) {
|
||||
std::cout << "Downloading " << selected_model << "..." << std::endl;
|
||||
if (!download_model(MODELS[0], [](int pct) {
|
||||
std::cout << "\r" << pct << "%" << std::flush;
|
||||
return true;
|
||||
})) {
|
||||
std::cerr << "\nFailed to download model." << std::endl;
|
||||
return 1;
|
||||
}
|
||||
std::cout << std::endl;
|
||||
}
|
||||
auto llm = llamalib::Llama{path};
|
||||
std::mutex llm_mutex; // モデル切り替え中のアクセスを保護する
|
||||
|
||||
// LLM推論は時間がかかるのでタイムアウトを長めに設定（デフォルトは5秒）
|
||||
svr.set_read_timeout(300);
|
||||
svr.set_write_timeout(300);
|
||||
|
||||
svr.set_logger([](const auto &req, const auto &res) {
|
||||
std::cout << req.method << " " << req.path << " -> " << res.status
|
||||
<< std::endl;
|
||||
});
|
||||
|
||||
svr.Get("/health", [](const httplib::Request &, httplib::Response &res) {
|
||||
res.set_content(json{{"status", "ok"}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
// --- 翻訳エンドポイント（2章） -----------------------------------------
|
||||
|
||||
svr.Post("/translate",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "Invalid JSON"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!input.contains("text") || !input["text"].is_string() ||
|
||||
input["text"].get<std::string>().empty()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'text' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto text = input["text"].get<std::string>();
|
||||
auto target_lang = input.value("target_lang", "ja");
|
||||
|
||||
auto prompt = "Translate the following text to " + target_lang +
|
||||
". Output only the translation, nothing else.\n\n" + text;
|
||||
|
||||
try {
|
||||
std::lock_guard<std::mutex> lock(llm_mutex);
|
||||
auto translation = llm.chat(prompt);
|
||||
res.set_content(json{{"translation", translation}}.dump(),
|
||||
"application/json");
|
||||
} catch (const std::exception &e) {
|
||||
res.status = 500;
|
||||
res.set_content(json{{"error", e.what()}}.dump(), "application/json");
|
||||
}
|
||||
});
|
||||
|
||||
// --- SSEストリーミング翻訳（3章）--------------------------------------
|
||||
|
||||
svr.Post("/translate/stream",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "Invalid JSON"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
if (!input.contains("text") || !input["text"].is_string() ||
|
||||
input["text"].get<std::string>().empty()) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'text' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto text = input["text"].get<std::string>();
|
||||
auto target_lang = input.value("target_lang", "ja");
|
||||
|
||||
auto prompt = "Translate the following text to " + target_lang +
|
||||
". Output only the translation, nothing else.\n\n" + text;
|
||||
|
||||
res.set_chunked_content_provider(
|
||||
"text/event-stream",
|
||||
[&, prompt](size_t, httplib::DataSink &sink) {
|
||||
std::lock_guard<std::mutex> lock(llm_mutex);
|
||||
try {
|
||||
llm.chat(prompt, [&](std::string_view token) {
|
||||
sink.os << "data: "
|
||||
<< json(std::string(token)).dump(
|
||||
-1, ' ', false, json::error_handler_t::replace)
|
||||
<< "\n\n";
|
||||
return sink.os.good(); // 切断されたら推論を中断
|
||||
});
|
||||
sink.os << "data: [DONE]\n\n";
|
||||
} catch (const std::exception &e) {
|
||||
sink.os << "data: " << json({{"error", e.what()}}).dump() << "\n\n";
|
||||
}
|
||||
sink.done();
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
// --- モデル一覧（4章） -------------------------------------------------
|
||||
|
||||
svr.Get("/models",
|
||||
[&](const httplib::Request &, httplib::Response &res) {
|
||||
auto models_dir = get_models_dir();
|
||||
auto arr = json::array();
|
||||
for (const auto &m : MODELS) {
|
||||
auto path = models_dir / m.filename;
|
||||
arr.push_back({
|
||||
{"name", m.name},
|
||||
{"params", m.params},
|
||||
{"size", m.size},
|
||||
{"downloaded", std::filesystem::exists(path)},
|
||||
{"selected", m.filename == selected_model},
|
||||
});
|
||||
}
|
||||
res.set_content(json{{"models", arr}}.dump(), "application/json");
|
||||
});
|
||||
|
||||
// --- モデル選択（4章） -------------------------------------------------
|
||||
|
||||
svr.Post("/models/select",
|
||||
[&](const httplib::Request &req, httplib::Response &res) {
|
||||
auto input = json::parse(req.body, nullptr, false);
|
||||
if (input.is_discarded() || !input.contains("model")) {
|
||||
res.status = 400;
|
||||
res.set_content(json{{"error", "'model' is required"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
auto name = input["model"].get<std::string>();
|
||||
|
||||
auto it = std::find_if(MODELS.begin(), MODELS.end(),
|
||||
[&](const ModelInfo &m) { return m.name == name; });
|
||||
|
||||
if (it == MODELS.end()) {
|
||||
res.status = 404;
|
||||
res.set_content(json{{"error", "Unknown model"}}.dump(),
|
||||
"application/json");
|
||||
return;
|
||||
}
|
||||
|
||||
const auto &model = *it;
|
||||
|
||||
// 常にSSEで応答する（DL済みでも未DLでも同じ形式）
|
||||
res.set_chunked_content_provider(
|
||||
"text/event-stream",
|
||||
[&, model](size_t, httplib::DataSink &sink) {
|
||||
// SSEイベント送信ヘルパー
|
||||
auto send = [&](const json &event) {
|
||||
sink.os << "data: " << event.dump() << "\n\n";
|
||||
};
|
||||
|
||||
// 未ダウンロードならダウンロード（進捗をSSEで通知）
|
||||
auto path = get_models_dir() / model.filename;
|
||||
if (!std::filesystem::exists(path)) {
|
||||
bool ok = download_model(model, [&](int pct) {
|
||||
send({{"status", "downloading"}, {"progress", pct}});
|
||||
return sink.os.good(); // クライアント切断時にダウンロードを中断
|
||||
});
|
||||
if (!ok) {
|
||||
send({{"status", "error"}, {"message", "Download failed"}});
|
||||
sink.done();
|
||||
return true;
|
||||
}
|
||||
}
|
||||
|
||||
// モデルをロードして切り替え
|
||||
send({{"status", "loading"}});
|
||||
{
|
||||
std::lock_guard<std::mutex> lock(llm_mutex);
|
||||
llm = llamalib::Llama{path};
|
||||
selected_model = model.filename;
|
||||
}
|
||||
|
||||
send({{"status", "ready"}});
|
||||
sink.done();
|
||||
return true;
|
||||
});
|
||||
});
|
||||
|
||||
// --- 埋め込みファイル配信（6章） ---------------------------------------
|
||||
// 5章: svr.set_mount_point("/", "./public");
|
||||
httplib::mount(svr, Web::FS);
|
||||
|
||||
// サーバーをバックグラウンドスレッドで起動
|
||||
auto port = svr.bind_to_any_port("127.0.0.1");
|
||||
std::thread server_thread([&]() { svr.listen_after_bind(); });
|
||||
|
||||
std::cout << "Listening on http://127.0.0.1:" << port << std::endl;
|
||||
|
||||
// WebViewでUIを表示
|
||||
webview::webview w(false, nullptr);
|
||||
w.set_title("Translate App");
|
||||
w.set_size(1024, 768, WEBVIEW_HINT_NONE);
|
||||
w.navigate("http://127.0.0.1:" + std::to_string(port));
|
||||
|
||||
#ifdef __APPLE__
|
||||
setup_macos_edit_menu();
|
||||
#endif
|
||||
w.run(); // ウインドウが閉じるまでブロック
|
||||
|
||||
// ウインドウが閉じたらサーバーも停止
|
||||
svr.stop();
|
||||
server_thread.join();
|
||||
}
|
||||
```
|
||||
|
||||
</details>
|
||||
|
||||
5章からの変更点をまとめると:
|
||||
|
||||
- `#include <csignal>` → `#include <thread>`, `<cpp-embedlib-httplib.h>`, `"WebAssets.h"`, `"webview/webview.h"`
|
||||
- `signal_handler`関数を削除
|
||||
- `svr.set_mount_point("/", "./public")` → `httplib::mount(svr, Web::FS)`
|
||||
- `svr.listen("127.0.0.1", 8080)` → `bind_to_any_port` + `listen_after_bind` + WebViewのイベントループ
|
||||
|
||||
ハンドラのコードは1行も変わっていません。5章まで作ってきたREST API・SSEストリーミング・モデル管理がそのまま動きます。
|
||||
|
||||
## 6.6 ビルドと動作確認
|
||||
|
||||
```bash
|
||||
cmake -B build
|
||||
cmake --build build -j
|
||||
```
|
||||
|
||||
起動します。
|
||||
|
||||
```bash
|
||||
./build/translate-app
|
||||
```
|
||||
|
||||
ブラウザは不要です。ウインドウが自動で開きます。5章と同じUIがそのまま表示され、翻訳やモデル切り替えがすべてそのまま動きます。
|
||||
|
||||
ウインドウを閉じるとサーバーも自動で終了します。`Ctrl+C`は不要です。
|
||||
|
||||
### 何が配布に必要か
|
||||
|
||||
配布に必要なのは:
|
||||
|
||||
- `translate-app`バイナリ1つ
|
||||
|
||||
これだけです。`public/`ディレクトリは不要です。HTML・CSS・JavaScriptはバイナリに埋め込まれています。モデルファイルは初回起動時に自動ダウンロードするので、ユーザーに事前準備を求める必要もありません。
|
||||
|
||||
## 次の章へ
|
||||
|
||||
お疲れさまでした！🎉
|
||||
|
||||
1章では`/health`が`{"status":"ok"}`を返すだけでした。それが今、テキストを入力すればリアルタイムで翻訳が流れ、ドロップダウンからモデルを切り替えれば自動でダウンロードが始まり、ウインドウを閉じればサーバーも一緒に終了する―そんなデスクトップアプリになりました。しかもバイナリ1つで配れます。
|
||||
|
||||
6章で変えたのは、静的ファイルの配信方法とサーバーの起動方法だけです。ハンドラのコードは1行も変わっていません。5章までに積み上げてきたREST API・SSEストリーミング・モデル管理が、そのままデスクトップアプリとして動いています。
|
||||
|
||||
次の章では視点を変えて、llama.cpp本家の`llama-server`のコードを読みます。本書のシンプルなサーバーと、プロダクション品質のサーバーを比較して、設計判断の違いとその理由を学びましょう。
|
||||
|
||||
**Next:** [llama.cpp本家のサーバー実装をコードリーディング](../ch07-code-reading)
|
||||
154
docs-src/pages/ja/llm-app/ch07-code-reading.md
Normal file
154
docs-src/pages/ja/llm-app/ch07-code-reading.md
Normal file
@@ -0,0 +1,154 @@
|
||||
---
|
||||
title: "7. llama.cpp本家のサーバー実装をコードリーディング"
|
||||
order: 7
|
||||
|
||||
---
|
||||
|
||||
6章かけてゼロから翻訳デスクトップアプリを作りました。動くものは完成しましたが、あくまで「学習用」の実装です。では「プロダクション品質」のコードはどう違うのか？ llama.cppに同梱されている公式サーバー`llama-server`のソースコードを読んで、比較してみましょう。
|
||||
|
||||
`llama-server`は`llama.cpp/tools/server/`にあります。同じcpp-httplibを使っているので、コードの読み方はこれまでの章と同じです。
|
||||
|
||||
## 7.1 ソースコードの場所
|
||||
|
||||
```ascii
|
||||
llama.cpp/tools/server/
|
||||
├── server.cpp # メインのサーバー実装
|
||||
├── httplib.h # cpp-httplib（同梱版）
|
||||
└── ...
|
||||
```
|
||||
|
||||
ファイルは1つの`server.cpp`にまとまっています。数千行ありますが、構造を知っていれば読むべき箇所は絞れます。
|
||||
|
||||
## 7.2 OpenAI互換API
|
||||
|
||||
ここまで作ってきたサーバーと`llama-server`の最も大きな違いはAPIの設計です。
|
||||
|
||||
**私たちのAPI:**
|
||||
|
||||
```text
|
||||
POST /translate → {"translation": "..."}
|
||||
POST /translate/stream → SSE: data: "token"
|
||||
```
|
||||
|
||||
**llama-serverのAPI:**
|
||||
|
||||
```text
|
||||
POST /v1/chat/completions → OpenAI互換のJSON
|
||||
POST /v1/completions → OpenAI互換のJSON
|
||||
POST /v1/embeddings → テキスト埋め込みベクトル
|
||||
```
|
||||
|
||||
`llama-server`は[OpenAIのAPI仕様](https://platform.openai.com/docs/api-reference)に合わせています。つまり、OpenAIの公式クライアントライブラリ（Pythonの`openai`パッケージなど）がそのまま動きます。
|
||||
|
||||
```python
|
||||
# OpenAIクライアントでllama-serverに接続する例
|
||||
from openai import OpenAI
|
||||
client = OpenAI(base_url="http://localhost:8080/v1", api_key="dummy")
|
||||
|
||||
response = client.chat.completions.create(
|
||||
model="local-model",
|
||||
messages=[{"role": "user", "content": "Hello!"}]
|
||||
)
|
||||
```
|
||||
|
||||
既存のツールやライブラリとの互換性を持たせるかどうかは、大きな設計判断です。私たちは翻訳専用のAPIをシンプルに設計しましたが、汎用のサーバーを作るならOpenAI互換が事実上の標準になっています。
|
||||
|
||||
## 7.3 同時リクエスト処理
|
||||
|
||||
私たちのサーバーはリクエストを1つずつ処理します。翻訳中に別のリクエストが来ると、前の推論が終わるまで待ちます。1人で使うデスクトップアプリなら問題ありませんが、複数人で共有するサーバーでは困ります。
|
||||
|
||||
`llama-server`は**スロット**という仕組みで同時リクエストを処理します。
|
||||
|
||||
|
||||
|
||||
ポイントは、各スロットのトークンを**1つずつ順番に**ではなく、**まとめて1回のバッチ**で推論することです。GPUは並列処理が得意なので、2人分を同時に処理しても1人分とほとんど変わらない時間で済みます。これを「連続バッチ処理（continuous batching）」と呼びます。
|
||||
|
||||
私たちのサーバーではcpp-httplibのスレッドプールが各リクエストに1スレッドを割り当てますが、推論自体は`llm.chat()`の中でシングルスレッドです。`llama-server`はこの推論部分を共有のバッチ処理ループに集約しています。
|
||||
|
||||
## 7.4 SSEフォーマットの違い
|
||||
|
||||
ストリーミングの仕組み自体は同じ（`set_chunked_content_provider` + SSE）ですが、送るデータのフォーマットが違います。
|
||||
|
||||
**私たちの形式:**
|
||||
|
||||
```text
|
||||
data: "去年の"
|
||||
data: "春に"
|
||||
data: [DONE]
|
||||
```
|
||||
|
||||
**llama-server（OpenAI互換）:**
|
||||
|
||||
```text
|
||||
data: {"id":"chatcmpl-xxx","object":"chat.completion.chunk","choices":[{"delta":{"content":"去年の"}}]}
|
||||
data: {"id":"chatcmpl-xxx","object":"chat.completion.chunk","choices":[{"delta":{"content":"春に"}}]}
|
||||
data: [DONE]
|
||||
```
|
||||
|
||||
私たちの形式はトークンだけを送るシンプルなものです。`llama-server`はOpenAI互換のため、1つのトークンにもJSONのラッパーが付きます。冗長に見えますが、`id`でリクエストを識別したり、`finish_reason`で停止理由を返せたりと、クライアントにとって便利な情報が含まれています。
|
||||
|
||||
## 7.5 KVキャッシュの再利用
|
||||
|
||||
私たちのサーバーでは、リクエストのたびにプロンプト全体をゼロから処理しています。翻訳アプリのプロンプトは短い（"Translate the following text to ja..." + 入力テキスト）ので、これで問題ありません。
|
||||
|
||||
`llama-server`は、前のリクエストと共通するプロンプトのprefixがある場合、その部分のKVキャッシュを再利用します。
|
||||
|
||||
|
||||
|
||||
長いシステムプロンプトやfew-shot例を毎回送るチャットボットでは、これだけで応答時間が大幅に短縮されます。数千トークンのシステムプロンプトを毎回処理するのと、キャッシュから一瞬で読むのとでは、体感が全く違います。
|
||||
|
||||
翻訳アプリではシステムプロンプトが1文だけなので効果は限定的ですが、自分のアプリに応用するときは意識したい最適化です。
|
||||
|
||||
## 7.6 構造化出力
|
||||
|
||||
翻訳APIはプレーンテキストを返すので、出力形式を制約する必要がありませんでした。でも、LLMにJSONで返させたい場合はどうでしょう？
|
||||
|
||||
```text
|
||||
プロンプト: 以下の文の感情を分析してJSONで返してください。
|
||||
LLMの出力（期待）: {"sentiment": "positive", "score": 0.8}
|
||||
LLMの出力（現実）: 感情分析の結果は以下の通りです。{"sentiment": ...
|
||||
```
|
||||
|
||||
LLMは指示を無視して余計なテキストを付けることがあります。`llama-server`はこの問題を**文法制約（grammar）**で解決しています。
|
||||
|
||||
```bash
|
||||
curl http://localhost:8080/v1/chat/completions \
|
||||
-d '{
|
||||
"messages": [{"role": "user", "content": "Analyze sentiment..."}],
|
||||
"json_schema": {
|
||||
"type": "object",
|
||||
"properties": {
|
||||
"sentiment": {"type": "string", "enum": ["positive", "negative", "neutral"]},
|
||||
"score": {"type": "number"}
|
||||
},
|
||||
"required": ["sentiment", "score"]
|
||||
}
|
||||
}'
|
||||
```
|
||||
|
||||
`json_schema`を指定すると、LLMのトークン生成時に文法に合わないトークンを除外します。出力が必ず有効なJSONになるので、`json::parse`が失敗する心配がありません。
|
||||
|
||||
LLMをアプリに組み込むとき、出力を確実にパースできるかどうかは信頼性に直結します。翻訳のようなフリーテキスト出力では不要ですが、APIのレスポンスとして構造化データを返す用途では必須の機能です。
|
||||
|
||||
## 7.7 まとめ
|
||||
|
||||
ここまでの違いを整理します。
|
||||
|
||||
| 観点 | 私たちのサーバー | llama-server |
|
||||
|------|-------------|--------------|
|
||||
| API設計 | 翻訳専用 | OpenAI互換 |
|
||||
| 同時リクエスト | 1つずつ処理 | スロット+連続バッチ |
|
||||
| SSEフォーマット | トークンのみ | OpenAI互換JSON |
|
||||
| KVキャッシュ | 毎回クリア | prefixを再利用 |
|
||||
| 構造化出力 | なし | JSON Schema/文法制約 |
|
||||
| コード量 | 約200行 | 数千行 |
|
||||
|
||||
私たちのコードがシンプルなのは、「デスクトップアプリで1人が使う」という前提があるからです。複数人に提供するサーバーや、既存のエコシステムと連携するサーバーを作るなら、`llama-server`の設計が参考になります。
|
||||
|
||||
逆に言えば、200行のコードでも翻訳アプリとしては十分に動きます。「必要な分だけ作る」ことの価値も、このコードリーディングから感じてもらえたら嬉しいです。
|
||||
|
||||
## 次の章へ
|
||||
|
||||
次の章では、ここまで作ったアプリを自分のライブラリに差し替えてカスタマイズするためのポイントをまとめます。
|
||||
|
||||
**Next:** [自分だけのアプリにカスタマイズする](../ch08-customization)
|
||||
120
docs-src/pages/ja/llm-app/ch08-customization.md
Normal file
120
docs-src/pages/ja/llm-app/ch08-customization.md
Normal file
@@ -0,0 +1,120 @@
|
||||
---
|
||||
title: "8. 自分だけのアプリにカスタマイズする"
|
||||
order: 8
|
||||
|
||||
---
|
||||
|
||||
7章までで翻訳デスクトップアプリが完成し、プロダクション品質のコードとの違いも学びました。この章では、ここまで作ったアプリを**自分だけのアプリに作り変える**ためのポイントをまとめます。
|
||||
|
||||
翻訳アプリはあくまで題材です。llama.cppを自分のライブラリに差し替えれば、同じ構成でどんなアプリでも作れます。
|
||||
|
||||
## 8.1 ビルド設定を差し替える
|
||||
|
||||
まず`CMakeLists.txt`で、llama.cpp関連の`FetchContent`を自分のライブラリに置き換えます。
|
||||
|
||||
```cmake
|
||||
# 削除: llama.cpp と cpp-llamalib の FetchContent
|
||||
|
||||
# 追加: 自分のライブラリ
|
||||
FetchContent_Declare(my_lib
|
||||
GIT_REPOSITORY https://github.com/yourname/my-lib
|
||||
GIT_TAG main
|
||||
)
|
||||
FetchContent_MakeAvailable(my_lib)
|
||||
|
||||
target_link_libraries(my-app PRIVATE
|
||||
httplib::httplib
|
||||
nlohmann_json::nlohmann_json
|
||||
my_lib # cpp-llamalib の代わりに自分のライブラリ
|
||||
# ...
|
||||
)
|
||||
```
|
||||
|
||||
ライブラリがCMakeに対応していない場合は、ヘッダーファイルとソースファイルを直接`src/`に置いて`add_executable`に追加すればOKです。cpp-httplibやnlohmann/json、webviewはそのまま残します。
|
||||
|
||||
## 8.2 APIを自分のタスクに合わせる
|
||||
|
||||
翻訳APIのエンドポイントとパラメータを、自分のタスクに合わせて変更します。
|
||||
|
||||
| 翻訳アプリ | 自分のアプリ（例: 画像処理） |
|
||||
|---|---|
|
||||
| `POST /translate` | `POST /process` |
|
||||
| `{"text": "...", "target_lang": "ja"}` | `{"image": "base64...", "filter": "blur"}` |
|
||||
| `POST /translate/stream` | `POST /process/stream` |
|
||||
| `GET /models` | `GET /filters`や`GET /presets` |
|
||||
|
||||
個々のハンドラの中身も書き換えます。例えば`llm.chat()`を呼んでいた箇所を、自分のライブラリのAPIに差し替えるだけです。
|
||||
|
||||
```cpp
|
||||
// Before: LLM翻訳
|
||||
auto translation = llm.chat(prompt);
|
||||
res.set_content(json{{"translation", translation}}.dump(), "application/json");
|
||||
|
||||
// After: 例えば画像処理ライブラリの場合
|
||||
auto result = my_lib::process(input_image, options);
|
||||
res.set_content(json{{"result", result}}.dump(), "application/json");
|
||||
```
|
||||
|
||||
SSEストリーミングも同じです。コールバックで進捗を返す関数があれば、3章と同じパターンで逐次レスポンスを返せます。LLMに限らず、処理に時間がかかるタスクならどれでも使えます。画像処理の進捗、データ変換のステップ、長時間の計算結果など、用途は様々です。
|
||||
|
||||
## 8.3 設計上の注意点
|
||||
|
||||
### 初期化コストが高いライブラリ
|
||||
|
||||
本書ではLLMモデルを`main()`の先頭でロードし、変数に保持しています。これは意図的な設計です。リクエストのたびにモデルをロードすると数秒かかるので、起動時に1回だけロードして使い回しています。大きなデータファイルの読み込みやGPUリソースの確保など、初期化が重いライブラリでも同じアプローチが使えます。
|
||||
|
||||
### スレッド安全性
|
||||
|
||||
cpp-httplibはスレッドプールでリクエストを並行処理します。4章ではモデル切り替え時に`llm`オブジェクトが上書きされる問題を`std::mutex`で保護しました。自分のライブラリを組み込む場合も同じパターンが使えます。ライブラリがスレッドセーフでない場合や、オブジェクトの差し替えが発生する場合は`std::mutex`で保護してください。
|
||||
|
||||
## 8.4 UIをカスタマイズする
|
||||
|
||||
`public/`の3ファイルを編集します。
|
||||
|
||||
- **`index.html`** — 入力フォームの構成を変えます。`<textarea>`を`<input type="file">`にしたり、パラメータの入力欄を追加したり
|
||||
- **`style.css`** — レイアウトやカラーを変更します。2カラムのままでも、1カラムに変えても
|
||||
- **`script.js`** — `fetch()`の送信先URLとリクエストボディ、レスポンスの表示方法を書き換えます
|
||||
|
||||
サーバー側のコードは変えなくても、HTMLを差し替えるだけで全く別のアプリに見えます。静的ファイルなのでサーバーの再起動なしにブラウザをリロードするだけで確認でき、試行錯誤しやすいです。
|
||||
|
||||
本書では素のHTML・CSS・JavaScriptで書きましたが、VueやReactなどのフロントエンドフレームワークやCSSフレームワークを組み合わせれば、さらに使い勝手の良いアプリに仕上げることができます。
|
||||
|
||||
## 8.5 配布するときの注意点
|
||||
|
||||
### ライセンス
|
||||
|
||||
使っているライブラリのライセンスを確認してください。cpp-httplib（MIT）、nlohmann/json（MIT）、webview（MIT）はいずれも商用利用可能です。自分のライブラリや、それが依存するライブラリのライセンスも忘れずに確認しましょう。
|
||||
|
||||
### モデルやデータファイル
|
||||
|
||||
4章で作ったダウンロード機能は、LLMモデルに限らず使えます。大きなデータファイルが必要なアプリなら、同じパターンで初回起動時に自動ダウンロードさせると、バイナリサイズを抑えつつユーザーの手間を省けます。
|
||||
|
||||
データが小さければ、cpp-embedlibでバイナリに埋め込んでしまうのも手です。
|
||||
|
||||
### クロスプラットフォームビルド
|
||||
|
||||
webviewはmacOS・Linux・Windowsに対応しています。各プラットフォーム向けにビルドする場合:
|
||||
|
||||
- **macOS** — 追加の依存なし
|
||||
- **Linux** — `libwebkit2gtk-4.1-dev`が必要
|
||||
- **Windows** — WebView2ランタイムが必要（Windows 11は標準搭載）
|
||||
|
||||
CI（GitHub Actionsなど）でクロスプラットフォームビルドを自動化するのもおすすめです。
|
||||
|
||||
## おわりに
|
||||
|
||||
最後まで読んでくださり、ありがとうございます。🙏
|
||||
|
||||
この本は、1章の`/health`が`{"status":"ok"}`を返すところから始まりました。そこからREST API、SSEストリーミング、Hugging Faceからのモデルダウンロード、ブラウザで動くWeb UI、そしてシングルバイナリのデスクトップアプリへ。7章では`llama-server`のコードを読んで、プロダクション品質のサーバーとの設計の違いを学びました。長い道のりでしたが、ここまで付き合ってくださったことに心から感謝します。
|
||||
|
||||
振り返ると、cpp-httplibのいくつかの主要な機能を実際に使いました。
|
||||
|
||||
- **サーバー**: ルーティング、JSONレスポンス、`set_chunked_content_provider`によるSSEストリーミング、`set_mount_point`による静的ファイル配信
|
||||
- **クライアント**: HTTPS接続、リダイレクト追従、コンテンツレシーバーによる大容量ダウンロード、進捗コールバック
|
||||
- **WebView連携**: `bind_to_any_port` + `listen_after_bind`でバックグラウンドスレッド化
|
||||
|
||||
cpp-httplibにはこの他にも、マルチパートによるファイルアップロード、認証、タイムアウト制御、圧縮、レンジリクエストなど便利な機能があります。詳しくは [A Tour of cpp-httplib](../../tour/) をご覧ください。
|
||||
|
||||
これらのパターンは翻訳アプリに限りません。自分のC++ライブラリにWeb APIを付けたい、ブラウザUIで操作できるようにしたい、配布しやすいデスクトップアプリにしたい―そんなときに、この本がリファレンスになれば嬉しいです。
|
||||
|
||||
あなたのライブラリで、あなただけのアプリを作ってみてください。Happy hacking! 🚀
|
||||
@@ -1,23 +1,26 @@
|
||||
---
|
||||
title: "Building a Desktop LLM App with cpp-httplib"
|
||||
order: 0
|
||||
status: "draft"
|
||||
|
||||
---
|
||||
|
||||
llama.cpp を組み込んだ LLM 翻訳デスクトップアプリを段階的に構築しながら、cpp-httplib のサーバー・クライアント両面の使い方を実践的に学びます。翻訳は一例であり、この部分を差し替えることで要約・コード生成・チャットボットなど自分のアプリに応用できます。
|
||||
自分のC++ライブラリにWeb APIを追加したい、Electronライクなデスクトップアプリをサクッと作りたい―そう思ったことはありませんか？ Rustなら「Tauri + axum」という選択肢がありますが、C++では難しいと諦めていませんか？
|
||||
|
||||
## 依存ライブラリ
|
||||
[cpp-httplib](https://github.com/yhirose/cpp-httplib)と[webview/webview](https://github.com/webview/webview)、そして[cpp-embedlib](https://github.com/yhirose/cpp-embedlib)を組み合わせれば、C++だけで同じアプローチが取れます。しかも配布しやすい、小さなシングルバイナリーのアプリケーションを作れます。
|
||||
|
||||
- [llama.cpp](https://github.com/ggml-org/llama.cpp) — LLM 推論エンジン
|
||||
- [nlohmann/json](https://github.com/nlohmann/json) — JSON パーサー（ヘッダーオンリー）
|
||||
- [webview/webview](https://github.com/webview/webview) — WebView ラッパー（ヘッダーオンリー）
|
||||
- [cpp-httplib](https://github.com/yhirose/cpp-httplib) — HTTP サーバー/クライアント（ヘッダーオンリー）
|
||||
今回は、[llama.cpp](https://github.com/ggml-org/llama.cpp)を組み込んだLLM翻訳アプリを題材に、「REST API → SSEストリーミング → Web UI→デスクトップアプリ」と段階的に構築しながら、そのやり方を学んでいきましょう。もちろん、翻訳はあくまで題材です。llama.cppを自分のライブラリに置き換えれば、同じ構成で自分だけのアプリが作れます。
|
||||
|
||||
## 章立て
|
||||
|
||||
|
||||
1. **llama.cpp を組み込んで REST API を作る** — テキストを POST すると翻訳結果を JSON で返すシンプルな API から始める
|
||||
2. **SSE でトークンストリーミングを追加する** — 翻訳結果をトークン単位で逐次返す LLM API 標準の方式を実装する
|
||||
3. **モデルの取得・管理機能を追加する** — Hugging Face から GGUF モデルを検索・ダウンロードするクライアント機能を実装する
|
||||
4. **Web UI を追加する** — 静的ファイル配信で翻訳 UI をホストし、ブラウザから操作できるようにする
|
||||
5. **WebView でデスクトップアプリ化する** — webview/webview で包み、Electron 的なデスクトップアプリとして動作させる
|
||||
6. **llama.cpp 本家のサーバー実装をコードリーディング** — 自分で作ったものとプロダクション品質のコードを比較して学ぶ
|
||||
C++17の基本文法とHTTP（REST API）の基本がわかれば、すぐに始められます。🚀
|
||||
|
||||
## 目次
|
||||
|
||||
1. **[プロジェクト環境を作る](ch01-setup)** — 依存ライブラリの取得、ビルド設定、雛形コード
|
||||
2. **[llama.cppを組み込んでREST APIを作る](ch02-rest-api)** — JSONで翻訳結果を返すAPIの実装
|
||||
3. **[SSEでトークンストリーミングを追加する](ch03-sse-streaming)** — トークン単位の逐次レスポンス
|
||||
4. **[モデルの取得・管理機能を追加する](ch04-model-management)** — Hugging Faceからのダウンロードと切り替え
|
||||
5. **[Web UIを追加する](ch05-web-ui)** — ブラウザから操作できる翻訳画面
|
||||
6. **[WebViewでデスクトップアプリ化する](ch06-desktop-app)** — シングルバイナリのデスクトップアプリ
|
||||
7. **[llama.cpp本家のサーバー実装をコードリーディング](ch07-code-reading)** — プロダクション品質のコードとの比較
|
||||
8. **[自分だけのアプリにカスタマイズする](ch08-customization)** — 自分のライブラリへの差し替えと応用
|
||||
|
||||
36
docs-src/pages/ja/llm-app/kv-cache.svg
Normal file
36
docs-src/pages/ja/llm-app/kv-cache.svg
Normal file
@@ -0,0 +1,36 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 426 160" font-family="system-ui, sans-serif" font-size="14">
|
||||
<rect x="0" y="0" width="426" height="160" rx="8" fill="#f5f3ef"/>
|
||||
|
||||
<defs>
|
||||
<marker id="arrowhead" markerWidth="7" markerHeight="5" refX="7" refY="2.5" orient="auto">
|
||||
<polygon points="0,0 7,2.5 0,5" fill="#198754"/>
|
||||
</marker>
|
||||
</defs>
|
||||
|
||||
<!-- request 1 (y=16) -->
|
||||
<text x="94" y="35" fill="#333" font-weight="bold" text-anchor="end">リクエスト1:</text>
|
||||
<rect x="106" y="16" width="138" height="30" rx="4" fill="#d1e7dd" stroke="#198754" stroke-width="1"/>
|
||||
<text x="175" y="36" fill="#333" text-anchor="middle">システムプロンプト</text>
|
||||
<text x="256" y="36" fill="#333" text-anchor="middle">+</text>
|
||||
<rect x="270" y="16" width="138" height="30" rx="4" fill="#cfe2ff" stroke="#0d6efd" stroke-width="1"/>
|
||||
<text x="339" y="36" fill="#333" text-anchor="middle">ユーザーの質問A</text>
|
||||
|
||||
<!-- annotation: cache save -->
|
||||
<text x="175" y="64" fill="#198754" font-size="11" text-anchor="middle">KV キャッシュに保存</text>
|
||||
|
||||
<!-- arrow -->
|
||||
<line x1="175" y1="70" x2="175" y2="90" stroke="#198754" stroke-width="1.2" marker-end="url(#arrowhead)"/>
|
||||
<text x="188" y="85" fill="#198754" font-size="11">再利用</text>
|
||||
|
||||
<!-- request 2 (y=96) -->
|
||||
<text x="94" y="115" fill="#333" font-weight="bold" text-anchor="end">リクエスト2:</text>
|
||||
<rect x="106" y="96" width="138" height="30" rx="4" fill="#d1e7dd" stroke="#198754" stroke-width="1" stroke-dasharray="6,3"/>
|
||||
<text x="175" y="116" fill="#333" text-anchor="middle">システムプロンプト</text>
|
||||
<text x="256" y="116" fill="#333" text-anchor="middle">+</text>
|
||||
<rect x="270" y="96" width="138" height="30" rx="4" fill="#cfe2ff" stroke="#0d6efd" stroke-width="1"/>
|
||||
<text x="339" y="116" fill="#333" text-anchor="middle">ユーザーの質問B</text>
|
||||
|
||||
<!-- bottom labels -->
|
||||
<text x="175" y="144" fill="#198754" font-size="11" text-anchor="middle">再計算しない</text>
|
||||
<text x="339" y="144" fill="#0d6efd" font-size="11" text-anchor="middle">ここだけ計算</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.1 KiB |
24
docs-src/pages/ja/llm-app/slots.svg
Normal file
24
docs-src/pages/ja/llm-app/slots.svg
Normal file
@@ -0,0 +1,24 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 440 240" font-family="system-ui, sans-serif" font-size="14">
|
||||
<!-- outer box -->
|
||||
<rect x="0" y="0" width="440" height="240" rx="8" fill="#f5f3ef"/>
|
||||
<text x="20" y="28" font-weight="bold" font-size="16" fill="#333">llama-server</text>
|
||||
|
||||
<!-- slot 0 -->
|
||||
<rect x="20" y="46" width="400" height="32" rx="4" fill="#d1e7dd" stroke="#198754" stroke-width="1"/>
|
||||
<text x="32" y="67" fill="#333">スロット0: ユーザーAのリクエスト</text>
|
||||
|
||||
<!-- slot 1 -->
|
||||
<rect x="20" y="86" width="400" height="32" rx="4" fill="#d1e7dd" stroke="#198754" stroke-width="1"/>
|
||||
<text x="32" y="107" fill="#333">スロット1: ユーザーBのリクエスト</text>
|
||||
|
||||
<!-- slot 2 -->
|
||||
<rect x="20" y="126" width="400" height="32" rx="4" fill="#e9ecef" stroke="#adb5bd" stroke-width="1"/>
|
||||
<text x="32" y="147" fill="#999">スロット2: (空き)</text>
|
||||
|
||||
<!-- slot 3 -->
|
||||
<rect x="20" y="166" width="400" height="32" rx="4" fill="#e9ecef" stroke="#adb5bd" stroke-width="1"/>
|
||||
<text x="32" y="187" fill="#999">スロット3: (空き)</text>
|
||||
|
||||
<!-- arrow + label -->
|
||||
<text x="20" y="224" fill="#333" font-size="13">→ アクティブなスロットをまとめて1回のバッチで推論</text>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.2 KiB |
Reference in New Issue
Block a user