Support Web UI setting

doc/realtime_api.md

@@ -1,28 +1,68 @@
 # Realtime API
 
 - [概要](#概要)
-- [設定方法](#設定方法)
+- [ビルド方法](#ビルド方法)
+- [設定方法① Web UIによる設定（推奨）](#設定方法-web-uiによる設定推奨)
+- [設定方法② SDカードによる設定](#設定方法-sdカードによる設定)
   - [YAMLの設定① (Wi-Fi、APIキー)](#yamlの設定-wi-fiapiキー)
   - [YAMLの設定② (LLM)](#yamlの設定-llm)
   - [YAMLの設定③ (サーボ)](#yamlの設定-サーボ)
-  - [ビルド＆書き込み](#ビルド書き込み)
 - [使い方](#使い方)
   - [リアルタイム会話](#リアルタイム会話)
   - [サーボ動作の停止、再開](#サーボ動作の停止再開)
 - [Function Calling及びMCP](#function-calling及びmcp)
 - [TTSとの組み合わせ (OpenAI Realtimeのみ)](#ttsとの組み合わせ-openai-realtimeのみ)
-  - [設定方法](#設定方法-1)
+  - [設定方法](#設定方法)
 
 ## 概要
 Realtime APIを利用することで、従来よりもリアルタイムに近い応答速度で会話を楽しむことができます。OpenAI Realtime API 及び Gemini Live APIに対応しています。  
 
-## 設定方法
-Realtime APIを有効にするために次の設定を行います。
+## ビルド方法
+下図のように、VSCode(PlatformIO)のGUIで"env:m5stack-xxx-realtime"を選択してビルド＆書き込みを実行します。  
 
-・YAMLファイル（3種類）を作成しSDカードに保存(※)  
-・ビルド＆書き込み
+> Note:  
+> PlatformIOで初めてプロジェクトを開いてビルドするまでの手順は、[基本的な利用方法 2.2.ビルド＆書き込み](basic_usage.md#22-ビルド書き込み)を参照ください。
+
+![](../images/realtime_api_select_env.png)
+
+
+
+## 設定方法① Web UIによる設定（推奨）
+SDカード不要の、Web UIによる設定方法です。次の手順で設定します。
 
-> ※ AtomS3RはSDカード非対応のため、SPIFFSにYAMLファイルを書き込みます。書き込み方法は[こちら](./atoms3r.md)を参照ください。
+① M5Stackの電源ON。
+
+② 初回はWi-Fi未設定のため、次のようなモード選択画面が表示される。  
+　「Config AP」を選択してAPモードで起動する。
+
+- Config AP : APモードで起動しWeb UIで設定を行うモード  
+- Offline : オフラインのまま起動するモード
+
+　![](../images/ap_mode_select.png)
+
+③ APモードで起動すると次のような画面になるので、表示されているSSIDにスマートフォンやPCで接続し、表示されているURL（もしくはQRコード）によりConfigページにアクセスする。
+
+　![](../images/ap_mode_ssid_and_url.png)
+
+④ Configページの各タブで設定を入力し、Saveボタンで保存する。
+> Note:  
+> 全タブ入力後にSaveボタンを1度押せば、全タブの内容が保存されます。
+
+- Wi-Fi：接続先Wi-FiアクセスポイントのSSIDとパスワードの設定
+- AI Service：利用するリアルタイムAPIの選択、及びAPIキーの設定
+- Servo：サーボの種類、ピン番号の設定
+- MCPs(Option)：MCPサーバーの設定（任意）  
+
+　![](../images/config_page.png)
+
+⑤ RestartボタンでM5Stackを再起動すると設定が反映される。
+
+## 設定方法② SDカードによる設定
+従来のようにSDカードのYAMLファイルで設定する方法です。
+以下の3種類のYAMLファイルをSDカードに保存し、M5Stackのスロットに挿入して電源を入れなおすことで反映されます。
+
+> Note:  
+> AtomS3RはSDカード非対応のため、SPIFFSにYAMLファイルを書き込みます。書き込み方法は[こちら](./atoms3r.md)を参照ください。
 
 ### YAMLの設定① (Wi-Fi、APIキー)
 SDカードフォルダ：/yaml  
@@ -61,18 +101,14 @@ SDカードフォルダ：/yaml
 
 サーボの種類、ポート等を[基本的な利用方法 2.1.YAMLによる初期設定](./basic_usage.md#sc_basicconfigyaml)に従い設定します。サーボを使わない場合は省略して問題ありません。
 
-### ビルド＆書き込み
-下図のように、VSCode(Platformio)のGUIで"env:m5stack-xxx-realtime"を選択してビルド＆書き込みを実行します。  
-
-![](../images/realtime_api_select_env.png)
-
 
 ## 使い方
 ### リアルタイム会話
 ① M5Coreを起動してアバターが表示されたあと、吹き出しの文字が"Connecting..."から"Please touch"に変わります。
 
 ② M5Core画面の上部（アバターの額のあたり）をタッチすると吹き出しが"Listening..."に変わり、リアルタイム会話を開始します（もう一度タッチするとリアルタイム会話を停止します）。
 
+> Note:  
 > AtomS3Rは画面自体が物理ボタンになっているため、画面中央を少し強めに押し込んでください。
 
 ③ 30秒以上会話が無い状態が続くとリアルタイム会話を終了し、吹き出しが"Please touch"に戻ります。

doc/realtime_api_en.md

@@ -1,11 +1,12 @@
 # Realtime API
 
 - [Overview](#overview)
-- [How to setup](#how-to-setup)
+- [How to build](#how-to-build)
+- [Setup Method 1: Web UI (Recommended)](#setup-method-1-web-ui-recommended)
+- [Setup Method 2: SD Card](#setup-method-2-sd-card)
   - [YAML① (Wi-Fi、API key)](#yaml-wi-fiapi-key)
   - [YAML② (LLM)](#yaml-llm)
   - [YAML③ (Servo)](#yaml-servo)
-  - [Build and write](#build-and-write)
 - [How to use](#how-to-use)
   - [Real-time conversation](#real-time-conversation)
   - [Stopping and restarting servo operation](#stopping-and-restarting-servo-operation)
@@ -15,11 +16,51 @@
 By using Realtime API, you can enjoy conversations with response speeds closer to real time than ever before.
 Compatible with OpenAI Realtime API and Gemini Live API.
 
-## How to setup
-To enable the Realtime API, do the following:
+## How to build
+As shown below, select "env:m5stack-xxx-realtime" in the VSCode (PlatformIO) GUI, then build and upload the firmware.  
 
-・Create YAML files (3 types) and save them to the SD card
-・Build and write
+> Note:  
+> If this is your first time opening and building the project with PlatformIO, see [Basic Usage 2.2. Build & Flash](basic_usage_en.md#22-build--flash).
+
+![](../images/realtime_api_select_env.png)
+
+
+## Setup Method 1: Web UI (Recommended)
+This method uses the Web UI and does not require an SD card. Follow these steps to configure the device.
+
+① Turn on the M5Stack device.
+
+② Because Wi-Fi is not configured on first startup, a mode selection screen like the one below appears.  
+　Select "Config AP" to start the device in AP mode.
+
+- Config AP: Starts the device in AP mode so you can configure it using the Web UI  
+- Offline: Starts the device in offline mode
+
+　![](../images/ap_mode_select.png)
+
+③ After the device starts in AP mode, a screen like the one below appears. Connect your smartphone or PC to the displayed SSID, then access the Config page using the displayed URL or QR code.
+
+　![](../images/ap_mode_ssid_and_url.png)
+
+④ Enter the settings on each tab of the Config page, then click Save.
+> Note:  
+> After completing all tabs, you only need to click Save once to save the settings from every tab.
+
+- Wi-Fi: SSID and password for the Wi-Fi access point to connect to
+- AI Service: Realtime API selection and API key
+- Servo: Servo type and pin number
+- MCPs (Optional): MCP server settings  
+
+　![](../images/config_page.png)
+
+⑤ Click Restart to restart the M5Stack device and apply the settings.
+
+## Setup Method 2: SD Card
+This is the conventional method of configuring the device with YAML files on an SD card.
+Save the following three YAML files to the SD card, insert it into the M5Stack device, and restart the device to apply the settings.
+
+> Note:  
+> AtomS3R does not support SD cards, so write the YAML files to SPIFFS instead. See [AtomS3R](./atoms3r.md) for instructions.
 
 ### YAML① (Wi-Fi、API key)
 SD card folder：/yaml  
@@ -58,19 +99,15 @@ File name：SC_BasicConfig.yaml
 
 Configure the servo type, port, etc. according to [Basic Usage  2.1.Initial Setup with YAML](./basic_usage_en.md#sc_basicconfigyaml). If you are not using servos, you can omit this.
 
-
-### Build and write
-As shown below, select "env:m5stack-core2(s3)-realtime" in the VSCode (Platformio) GUI and run build and write.  
-
-![](../images/realtime_api_select_env.png)
-
-
 ## How to use
 ### Real-time conversation
 ① After starting M5Core and the avatar is displayed, the text in the speech bubble will change from "Connecting..." to "Please touch."
 
 ② When you touch the top of the M5Core screen (around the avatar's forehead), the speech bubble will change to "Listening..." and real-time conversation will begin (Touch again to stop real-time conversation).
 
+> Note:  
+> On AtomS3R, the screen itself is a physical button, so press the center of the screen a little firmly.
+
 ③ If there is no conversation for more than 30 seconds, the real-time conversation will end and the speech bubble will return to "Please touch."
 
 ### Stopping and restarting servo operation