初始化仅前端版本

frontend/components/chat_window.py

@@ -0,0 +1,53 @@
+import streamlit as st
+import requests
+
+
+def render_chat_window(backend_url):
+    st.subheader("💬 流式对话")
+
+    # 聊天历史显示
+    chat_container = st.container()
+    with chat_container:
+        for message in st.session_state.messages:
+            with st.chat_message(message["role"]):
+                st.markdown(message["content"])
+                # 如果有关联图片，也可以在这里显示
+                if "images" in message:
+                    for img_url in message["images"]:
+                        st.image(img_url, width=200)
+
+    # 输入框
+    if prompt := st.chat_input("输入消息..."):
+        # 1. 显示用户消息
+        st.session_state.messages.append({"role": "user", "content": prompt})
+        with st.chat_message("user"):
+            st.markdown(prompt)
+
+        # 2. 调用后端流式接口
+        with st.chat_message("assistant"):
+            message_placeholder = st.empty()
+            full_response = ""
+
+            # 模拟流式接收 (实际需使用 requests stream 或 websocket)
+            # POST /api/chat/stream
+            try:
+                # 伪代码示例：
+                # with requests.post(f"{backend_url}/api/chat/stream", json={"message": prompt}, stream=True) as r:
+                #     for chunk in r.iter_content(chunk_size=None):
+                #         if chunk:
+                #             full_response += chunk.decode('utf-8')
+                #             message_placeholder.markdown(full_response + "▌")
+
+                # 演示用静态延迟
+                import time
+                response_text = "这是一个流式响应的演示。后端正在处理您的请求..."
+                for char in response_text:
+                    full_response += char
+                    message_placeholder.markdown(full_response + "▌")
+                    time.sleep(0.05)
+
+                message_placeholder.markdown(full_response)
+                st.session_state.messages.append({"role": "assistant", "content": full_response})
+
+            except Exception as e:
+                st.error(f"连接后端失败: {e}")

frontend/components/dice_roller.py

@@ -0,0 +1,26 @@
+import streamlit as st
+import random
+
+
+def render_dice_roller():
+    st.subheader("🎲 命运骰子")
+
+    col1, col2 = st.columns(2)
+
+    with col1:
+        d20 = st.button("D20", use_container_width=True)
+        if d20:
+            roll = random.randint(1, 20)
+            st.metric("结果", roll, delta=None)
+
+    with col2:
+        d6 = st.button("D6", use_container_width=True)
+        if d6:
+            roll = random.randint(1, 6)
+            st.metric("结果", roll, delta=None)
+
+    # 自定义骰子
+    sides = st.number_input("面数", min_value=2, max_value=100, value=10)
+    if st.button(f"投掷 D{sides}", use_container_width=True):
+        roll = random.randint(1, sides)
+        st.success(f"🎲 结果是: **{roll}**")

frontend/components/image_gallery.py

@@ -0,0 +1,17 @@
+import streamlit as st
+
+
+def render_image_gallery(backend_url):
+    st.subheader("🖼️ 生成画廊")
+
+    # 这里通常轮询后端获取最新生成的图片
+    # GET /api/images/latest
+
+    if not st.session_state.generated_images:
+        st.info("暂无生成图片，对话中触发绘图后将在此显示。")
+    else:
+        cols = st.columns(2)
+        for idx, img_url in enumerate(st.session_state.generated_images[-4:]):  # 只显示最近4张
+            with cols[idx % 2]:
+                st.image(img_url, use_container_width=True)
+                st.caption(f"Image {idx + 1}")

frontend/components/settings_panel.py

@@ -0,0 +1,30 @@
+import streamlit as st
+import requests
+
+
+def render_settings_panel(backend_url):
+    st.subheader("⚙️ 预设设置")
+
+    # 模拟获取预设列表 (实际应调用后端 API)
+    # GET /api/presets
+    try:
+        # response = requests.get(f"{backend_url}/api/presets")
+        # presets = response.json()
+        presets = ["角色扮演-奇幻", "项目管理", "旅行规划", "自定义"]  # 占位数据
+    except:
+        presets = ["默认预设"]
+
+    selected_preset = st.selectbox("选择预设模板", presets, index=0)
+
+    st.text_area("系统指令 (System)", height=100, placeholder="在此输入系统级指令...")
+
+    st.checkbox("启用状态记忆", value=True)
+    st.checkbox("启用异步生图", value=True)
+    st.checkbox("启用输入预处理", value=False)
+
+    st.info("💡 修改配置后自动生效，无需重启。")
+
+    # 保存按钮 (调用后端更新配置)
+    if st.button("💾 保存配置", use_container_width=True):
+        st.success("配置已保存！")
+        # requests.post(f"{backend_url}/api/config", json={...})

frontend/components/toolbar.py

@@ -0,0 +1,18 @@
+import streamlit as st
+
+
+def render_toolbar(backend_url):
+    col1, col2, col3 = st.columns([1, 2, 1])
+
+    with col1:
+        st.logo("https://streamlit.io/images/brand/streamlit-logo-primary-colormark-darktext.png",
+                size="large")  # 可替换为项目Logo
+
+    with col2:
+        st.title("AI Tavern 工作流引擎")
+
+    with col3:
+        if st.button("🔄 重置会话", use_container_width=True):
+            st.session_state.messages = []
+            st.rerun()
+        # 这里可以添加更多工具栏按钮，如：知识库管理、系统状态等