ChatGPT-Web

入力の続きをゴーストテキストで提案するプロトタイプ。Tabと矢印キーで全体・1文字単位を確定します。JavaScript・単一HTMLで、ビルドもサーバーも不要です。

これは過去作品であり、ローカル検証用のプロトタイプです。 継続的なメンテナンスや後方互換性の保証はありません。

セキュリティ上の注意: OpenAI APIキーをブラウザの localStorage に保存し、ブラウザから直接 OpenAI API を呼び出す設計です。APIキーがクライアント側に露出するため、このページを公開ホスティングして使わないでください（自分のPC上のローカル利用のみを想定しています）。

作者の他の制作物はポートフォリオにまとめています。

特徴

• ゴーストテキスト補完 - 入力中にグレーの補完候補をリアルタイム表示
• Tab / 右矢印で確定 - Tab で全体を確定、右矢印で1文字ずつ確定
• モデル切り替え - gpt-4o-mini / gpt-4.1-mini / gpt-5-mini / gpt-5.2 をタブで選択。任意のモデル名を直接入力することも可能（実際に使えるかは利用者のAPIアカウント次第）
• 設定パネル - デバウンス時間、Temperature、最大トークン数、コンテキスト文字数、システムプロンプトを調整可能
• APIキー永続化 - ブラウザの localStorage に平文で保存（ローカル利用前提。上記の注意を参照）
• ステータスインジケーター - API通信状態を緑/赤/青のドットで表示
• ダークテーマ - グラスモーフィズムを取り入れたダークUI
• ビルド不要 - HTMLファイル1つで完結。サーバー不要でブラウザで直接開くだけ

使い方

1. ファイルを開く

# ブラウザで直接開く
start index.html

または手元のHTTPサーバーで配信（localhost のみ。外部公開はしないでください）:

python -m http.server 8000
# http://localhost:8000 にアクセス

2. APIキーを設定

1. 画面上部の「API Key」欄にOpenAI APIキーを入力
2. 「Save」をクリック（localStorage に保存されます）

3. テキストを入力

テキストエリアに文字を入力すると、一定時間（デフォルト700ms）後にゴーストテキストが表示されます。

キー操作

キー	動作
Tab	ゴーストテキスト全体を確定
→ (右矢印)	1文字ずつ確定
← (左矢印)	1文字取り消し
Enter / Escape	ゴーストテキストを破棄

設定項目

各項目はスライダーと数値入力の両方から変更できます。数値入力はスライダーより広い範囲を受け付けます。

項目	スライダー範囲	数値入力の範囲	デフォルト	説明
Debounce	100-2000ms	100-5000ms	700ms	入力後に補完リクエストを送るまでの待機時間
Temperature	0-2	0-2	0.7	応答のランダム性
Max Output Tokens	16-512	1-4096	96	補完テキストの最大長
Max Context Chars	500-10000	100-50000	2000	APIに送信するコンテキストの最大文字数
System Prompt	-	-	(補完指示)	補完の振る舞いを制御するプロンプト

設定値は localStorage に保存され、次回起動時に復元されます。

技術的な仕組み

• API: OpenAI Responses API (https://api.openai.com/v1/responses) をブラウザから直接呼び出し
• ミラーレイヤー方式: 透明な textarea の背面に <pre> 要素を重ねて描画。入力テキストは白、ゴーストテキストはグレーで表示
• デバウンス: 入力が止まってから一定時間後にAPIリクエストを送信。連続入力中のリクエスト乱発を防止
• AbortController: 新しいリクエスト送信時に前のリクエストをキャンセル
• 補完正規化: APIが入力テキストを繰り返す場合に重複部分を自動除去

必要環境

• モダンブラウザ (Chrome / Edge / Firefox / Safari)
• OpenAI APIキー

ファイル構成

ChatGPT-Web/
└── index.html    # アプリケーション全体（HTML + CSS + JavaScript）

ライセンス

MIT License