Experiment Visualizer(iOS)実験可視化クライアント

Mobile

概要

Experiment Visualizer は、SwiftUI をフロントエンドに、WKWebView を使って大規模言語モデル(LLM)が生成する HTML をレンダリングする、iOS および macOS 向けのミニマルな可視化クライアントです。アプリは全画面の WebView で可視化コンテンツを表示し、サイドバーに会話履歴を配置して新規作成や削除が可能。OpenRouter の SSE(Server-Sent Events)を利用して HTML をストリーミングで逐次受け取り、受信中は「生成中」のプレースホルダを表示します。設定画面では OpenRouter の API キーやデフォルトモデルを指定でき、チャットのデータはローカル JSON ファイルで永続化されます。ダークテーマ向けのスタイリングやポインタドラッグによる平移サポートなど、対話的な可視化操作にも対応しています。

GitHub

リポジトリの統計情報

  • スター数: 1
  • フォーク数: 0
  • ウォッチャー数: 1
  • コミット数: 6
  • ファイル数: 5
  • メインの言語: Swift

主な特徴

  • SwiftUI と WKWebView を組み合わせ、LLM が生成する HTML を全画面でレンダリング
  • OpenRouter の SSE を使ったストリーミング受信により、コンテンツを逐次追加して表示
  • サイドバーで会話(実験)を管理し、ローカル JSON で永続化
  • ダークテーマ対応の WebView ラッパーとポインタドラッグによる平行移動サポート

技術的なポイント

本プロジェクトは Swift/SwiftUI をコアに据えつつ、WKWebView をラップしたコンポーネントで HTML を表示する構成です。README とディレクトリ名から読み取れる主要な技術要素は以下のとおりです。

  • ストリーミング(SSE)受信と逐次レンダリング: OpenRouter の SSE を利用してサーバから HTML の断片を受け取り、受信した分を逐次 WebView に注入していく仕組みが採られています。これにより長い生成処理でも「生成中…」のプレースホルダ表示から途切れなく内容が追加され、ユーザーはレスポンスを待ちながら中間結果を確認できます。実装上は URLSession によるデータストリーミングやイベントパース(イベント区切りでのバッファ処理)が用いられる想定です。

  • WKWebView の深い統合とダークモード対応: WebView は単なる埋め込みではなく、ダークテーマ用の CSS 注入やユーザー操作(ポインタでのドラッグによる平行移動)をサポートするラッパーとして作られています。WKWebView の evaluateJavaScript を用いた DOM 操作や、ユーザー操作イベントのブリッジ、pointer-events の制御といった実装が考えられます。

  • アーキテクチャと状態管理: ディレクトリ構成から、Stores/ChatStore.swift が状態管理と会話(セッション)管理、ローカル永続化、ストリーミング処理を担っていることが明示されています。SwiftUI 側はこの Store を単一のソース・オブ・トゥルースとして監視し、ビューはリアクティブに更新される設計です。非同期処理には async/await や Combine が利用されている可能性が高く、エラーハンドリングやキャンセル処理(生成中止など)も Store レイヤで扱う設計が自然です。

  • 永続化と設定: 会話データはローカル JSON で保存され、アプリ再起動後も履歴を復元します。設定画面で OpenRouter API Key とデフォルトモデルを保持できるため、外部 API キーの管理と安全な保存(Keychain の活用検討)や、環境切替(テスト/本番)への対応が重要です。

  • クロスプラットフォームと UI: README に iOS と macOS 両対応とあるため、SwiftUI のマルチプラットフォーム機能を活かした UI 構成(ナビゲーションやダブルカラムレイアウトの差異処理)が行われています。マウスやトラックパッド操作のサポート、タッチ固有の操作への対応が考慮されています。

これらの要素により、実験的な可視化ワークフローを迅速に試せる一方で、SSE の耐障害性(再接続や部分受信時の整合性)、API キーの安全な管理、HTML のサニタイズや Web コンテンツのセキュリティ(混在コンテンツや外部リソースのロード制御)など、追加で考慮すべき点も同時に存在します。拡張の余地としては、外部ライブラリを使わずに独自実装で完結させている点を踏まえ、より堅牢なストリームパーサやプラグイン形式の可視化レンダラー導入が挙げられます。

プロジェクトの構成

主要なファイルとディレクトリ:

  • CHANGE_LOG: dir
  • Experiment Visualizer.icon: dir
  • Experiment Visualizer.xcodeproj: dir
  • Experiment Visualizer: dir
  • README.md: file

主要ファイル(README 抜粋からの抜粋):

  • Experiment_VisualizerApp.swift:アプリのエントリポイント
  • ContentView.swift:メイン UI(ツーコラムレイアウト、入力欄、設定への導線)
  • WebView.swift:WKWebView のラッパー(ダークテーマ対応等)
  • Stores/ChatStore.swift:会話状態・永続化・ストリーミングを管理
  • Services/APIClient.swift:OpenRouter 等へのリクエストを担当(想定)

まとめ

SwiftUI × WKWebView で手軽に試せる、ストリーミングHTML可視化の実験的クライアントです。

リポジトリ情報:

READMEの抜粋:

Experiment Visualizer

面向 iOS 与 macOS 的极简教育可视化客户端,使用 SwiftUI + WKWebView 渲染大模型生成的 HTML,可查看历史对话并流式更新内容。配色:背景 #0F1A1B,按钮 #6ECBD3

功能

  • 全屏 WebView 展示可视化 HTML,支持指针拖拽平移
  • 侧边栏历史对话列表,支持新建和删除
  • 流式生成:OpenRouter SSE 实时追加 HTML
  • 生成前显示“正在生成中…”提示
  • 设置界面配置 OpenRouter API Key 与默认模型
  • 本地 JSON 持久化会话与消息

目录结构(核心)

  • Experiment_VisualizerApp.swift:应用入口
  • ContentView.swift:主界面(双栏、输入栏、设置入口)
  • WebView.swift:WKWebView 封装与深色主题包装
  • Stores/ChatStore.swift:状态与会话管理、持久化、流式处理
  • Services/APIClient.swift...