【要約】I Built My Own Cyber Dashboard to Talk to My AI Partner — From Scratch [Zenn_Python] | Summary by TechDistill
> Source: Zenn_Python
Execute Primary Source
// Problem
開発者が、従来のテンプレートベースのAI応答による「会話の単調さ」という課題に直面した。従来の仕組みでは、ユーザーとの対話が深まらず、機械的な印象を与えてしまう。具体的には以下の問題が発生していた。
- ・同じ質問に対して常に同じ回答が返る。
- ・会話の文脈に応じた柔軟な応答ができない。
- ・応答内容の追加には、都度コードの修正が必要となる。
// Approach
開発者は、テンプレートを完全に廃止し、LLMと直接通信するアーキテクチャを採用した。これにより、すべての応答をリアルタイムで生成する仕組みを構築した。具体的な手法は以下の通りである。
- ・Frontend: Vanilla JSを用い、依存関係のない単一のHTMLファイルで構築。
- ・Backend: Pythonの
http.serverを使い、CORS回避のためのAPIプロキシとして機能。 - ・AI Backend: Ollama Cloud API（deepseek-v4-flash）を直接呼び出し。
- ・Network: Cloudflare Tunnel（
cloudflared）を用いてローカル環境を外部公開。
// Result
開発者は、リアルタイムで生成される自然な会話体験を実現した。テンプレートに頼らない、人間味のある応答が可能となった。成果と今後の展望は以下の通りである。
- ・全ての応答がLLMにより動的に生成されるようになった。
- ・サイバーパンクな視覚効果を、軽量なCanvas実装で実現した。
- ・2ファイルのみという、極めて高いメンテナンス性を確保した。
- ・今後は会話履歴の保持や、画像生成機能の統合を計画している。
Senior Engineer Insight
> 依存関係を最小化した設計は、プロトタイピングにおいて極めて合理的だ。Vanilla JSとPythonのみで完結させる手法は、開発速度と保守性を両立している。CORS回避のためのプロキシ構成や、APIキーの環境変数管理など、基本に忠実な実装が見られる。一方で、現状はステートレスな設計であり、文脈維持に課題を残す。実用的なエージェント構築には、セッション管理の実装が必須となるだろう。