---
title: "5. Web UIを追加する"
order: 5
---
4章までで、翻訳API・SSEストリーミング・モデル管理と、サーバーの機能は一通り揃いました。でも今のところ操作手段はcurlだけです。この章ではWeb UIを追加して、ブラウザから翻訳できるようにします。
完成するとこんな画面になります。
- テキストを入力すると、自動でトークンが逐次表示される（debounce付き）
- ヘッダーのドロップダウンでモデルと言語を切り替えられる
- 未ダウンロードのモデルを選ぶと、進捗バー付きでダウンロードが始まる（キャンセル可能）
HTML・CSS・JavaScriptのコードは最小限です。CSSフレームワークは使わず、素のCSS（約100行）だけでレイアウトします。C++の本なので、フロントエンドの詳しい解説はしません。「こう書くとこう動く」を見せていきます。
## 5.1 ファイル構成
この章で追加するファイルです。`public/`ディレクトリにHTML・CSS・JavaScriptを置き、サーバーから配信します。
```ascii
translate-app/
├── public/
│ ├── index.html
│ ├── style.css
│ └── script.js
└── src/
└── main.cpp # set_mount_point を追加
```
## 5.2 静的ファイル配信を設定する
cpp-httplibの`set_mount_point`を使うと、ディレクトリをそのままHTTPで配信できます。`public/`ディレクトリを作って、空の`index.html`を置きましょう。
```bash
mkdir public
```
```html
Translate App
Hello!
```
サーバーのコードに`set_mount_point`を1行追加してビルドし直します。
```cpp
// `main()`内、`svr.listen()`の前に追加
svr.set_mount_point("/", "./public");
```
サーバーを起動してブラウザで`http://127.0.0.1:8080`を開くと、「Hello!」が表示されるはずです。静的ファイルなので、`index.html`を編集したらブラウザをリロードするだけで反映されます。サーバーの再起動は不要です。
## 5.3 レイアウトを作る
`index.html`をレイアウトの完成形に書き換えます。
```html
Translate App
```
HTMLのポイントです。
- FaviconはインラインSVG絵文字なので、画像ファイルは不要です
- `