From 4bc5bd3e41352ee748fb8c943b91e8e9ca5909d8 Mon Sep 17 00:00:00 2001 From: JianFeeeee <109188060+JianFeeeee@users.noreply.github.com> Date: Fri, 10 Apr 2026 16:08:33 +0800 Subject: [PATCH] feat: Create TUI-like web interface - Redesign web interface to match TUI layout - Left panel: message history and input - Right panel: config and operation log - Dark theme with terminal style - Add keyboard shortcuts (Ctrl+Enter) - Add real-time status updates - Improve API endpoints - Update documentation --- README.md | 14 +- graph_memory_tui/web/interface.py | 20 +- graph_memory_tui/web/templates/index.html | 444 +++++++++++++++++++--- 3 files changed, 414 insertions(+), 64 deletions(-) diff --git a/README.md b/README.md index 1a1ad9b..bb6767a 100644 --- a/README.md +++ b/README.md @@ -124,10 +124,22 @@ python3 start.py ## API接口 -### Web接口 +### Web界面 启动后访问：`http://localhost:5000` +**界面特点：** +- 🖥️ 与TUI相似的界面设计 +- 📊 左侧消息历史，右侧配置和日志 +- 🎨 深色主题，终端风格 +- ⌨️ 支持键盘快捷键 + +**使用方法：** +1. 在右侧配置区输入API Key +2. 点击"保存配置" +3. 在左侧输入框输入消息 +4. 按 Ctrl+Enter 发送 + ### REST API ```bash diff --git a/graph_memory_tui/web/interface.py b/graph_memory_tui/web/interface.py index 224e913..8a1de43 100644 --- a/graph_memory_tui/web/interface.py +++ b/graph_memory_tui/web/interface.py @@ -4,7 +4,6 @@ Web接口 - 提供浏览器访问 from flask import Flask, render_template, jsonify, request from flask_cors import CORS -import asyncio import json from datetime import datetime from typing import Optional @@ -20,7 +19,9 @@ class WebInterface: self.config = config self.db = db self.port = port - self.app = Flask(__name__) + self.app = Flask(__name__, + template_folder='templates', + static_folder='static') CORS(self.app) self._setup_routes() @@ -35,9 +36,9 @@ class WebInterface: def chat(): data = request.json message = data.get('message', '') - # 这里需要实现聊天逻辑 + # 简单响应，实际应集成完整的聊天逻辑 return jsonify({ - 'response': 'Web interface is ready. Please use TUI for full functionality.', + 'response': f'收到消息: {message}\n\n请使用TUI界面获得完整功能。', 'timestamp': datetime.now().isoformat() }) @@ -74,10 +75,19 @@ class WebInterface: 'model': self.config.model, 'base_url': self.config.base_url }) + + @self.app.route('/api/config', methods=['POST']) + def save_config(): + data = request.json + self.config.api_key = data.get('api_key', '') + self.config.model = data.get('model', 'deepseek-chat') + self.config.base_url = data.get('base_url', 'https://api.deepseek.com') + return jsonify({'status': 'ok', 'message': 'Configuration saved'}) def run(self): """启动Web服务""" - self.app.run(host='0.0.0.0', port=self.port, debug=False) + print(f"Web interface running at http://localhost:{self.port}") + self.app.run(host='0.0.0.0', port=self.port, debug=False, threaded=True) def run_async(self): """异步启动Web服务""" diff --git a/graph_memory_tui/web/templates/index.html b/graph_memory_tui/web/templates/index.html index 4052a09..53c2e2f 100644 --- a/graph_memory_tui/web/templates/index.html +++ b/graph_memory_tui/web/templates/index.html @@ -1,80 +1,408 @@ - + + + Graph Memory TUI - Web Interface - -

Graph Memory TUI - Web Interface

- -
-

Welcome!

-

This is the web interface for Graph Memory TUI.

-

For full functionality, please use the TUI application.

- -
-

API Endpoints

- -
-

POST /api/chat

-

Send a chat message

- {"message": "your message"} +
+

Graph Memory TUI - Web Interface

+
Connected | Database: SQLite
+
+ +
+ +
+
+
+
Assistant
+
欢迎使用 Graph Memory TUI Web界面！ + +这是一个让AI拥有长期记忆的图记忆系统。 + +功能： +• 记忆检索 - 查找历史信息 +• 记忆写入 - 保存重要信息 +• 记忆管理 - 删除、归档记忆 + +请先在右侧配置API Key，然后开始对话。
+
System
+
- -
-

POST /api/memory/recall

-

Recall memories

- {"query_intent": "keywords"} + +
+ +
按 Ctrl+Enter 发送消息
- -
-

POST /api/memory/commit

-

Commit memories

- {"triplets": [...]} +
+ + +
+
+

━━ 配置 ━━

+
+ + +
+
+ + +
+
+ + +
+ +
配置会自动保存到本地
- -
-

GET /api/memory/introspect

-

Get database statistics

+ +
+

━━ 数据库状态 ━━

+
加载中...
+
- -
-

GET /api/config

-

Get current configuration

+ +
+

━━ 操作日志 ━━

+
+ +