Add web session analysis platform with follow-up topics

2026-03-09 22:23:00 +08:00
commit 17ce711e49
30 changed files with 10681 additions and 0 deletions
--- a/webapp/static/app.js
+++ b/webapp/static/app.js
@@ -0,0 +1,299 @@
+const state = {
+  userId: null,
+  files: [],
+  sessions: [],
+  currentSessionId: null,
+  currentTaskId: null,
+  pollTimer: null,
+};
+
+function ensureUserId() {
+  const key = "vibe_data_ana_user_id";
+  let userId = localStorage.getItem(key);
+  if (!userId) {
+    userId = `guest_${crypto.randomUUID()}`;
+    localStorage.setItem(key, userId);
+  }
+  state.userId = userId;
+  document.getElementById("user-id").textContent = userId;
+}
+
+async function api(path, options = {}) {
+  const response = await fetch(path, options);
+  const text = await response.text();
+  let data = {};
+  try {
+    data = text ? JSON.parse(text) : {};
+  } catch {
+    data = { raw: text };
+  }
+  if (!response.ok) {
+    throw new Error(data.detail || data.error || response.statusText);
+  }
+  return data;
+}
+
+function setText(id, value) {
+  document.getElementById(id).textContent = value || "";
+}
+
+function renderFiles() {
+  const fileList = document.getElementById("file-list");
+  const picker = document.getElementById("session-file-picker");
+  fileList.innerHTML = "";
+  picker.innerHTML = "";
+
+  if (!state.files.length) {
+    fileList.innerHTML = '<div class="empty">还没有上传文件。</div>';
+    picker.innerHTML = '<div class="empty">先上传文件后才能创建会话。</div>';
+    return;
+  }
+
+  state.files.forEach((file) => {
+    const item = document.createElement("div");
+    item.className = "file-item";
+    item.innerHTML = `<strong>${file.original_name}</strong><div class="hint">${file.id}</div>`;
+    fileList.appendChild(item);
+
+    const label = document.createElement("label");
+    label.className = "checkbox-item";
+    label.innerHTML = `
+      <input type="checkbox" value="${file.id}" />
+      <span>${file.original_name}</span>
+    `;
+    picker.appendChild(label);
+  });
+}
+
+function statusBadge(status) {
+  return `<span class="status ${status}">${status}</span>`;
+}
+
+function renderSessions() {
+  const container = document.getElementById("session-list");
+  container.innerHTML = "";
+  if (!state.sessions.length) {
+    container.innerHTML = '<div class="empty">暂无会话。</div>';
+    return;
+  }
+
+  state.sessions.forEach((session) => {
+    const card = document.createElement("button");
+    card.type = "button";
+    card.className = `session-card ${session.id === state.currentSessionId ? "active" : ""}`;
+    card.innerHTML = `
+      <div><strong>${session.title}</strong></div>
+      <div class="hint">${session.id}</div>
+      <div>${statusBadge(session.status)}</div>
+    `;
+    card.onclick = () => loadSessionDetail(session.id);
+    container.appendChild(card);
+  });
+}
+
+function renderTasks(tasks) {
+  const container = document.getElementById("task-list");
+  container.innerHTML = "";
+  if (!tasks.length) {
+    container.innerHTML = '<div class="empty">当前会话还没有专题任务。</div>';
+    return;
+  }
+
+  tasks.forEach((task) => {
+    const card = document.createElement("button");
+    card.type = "button";
+    card.className = `task-card ${task.id === state.currentTaskId ? "active" : ""}`;
+    card.innerHTML = `
+      <div><strong>${task.query}</strong></div>
+      <div class="hint">${task.created_at}</div>
+      <div>${statusBadge(task.status)}</div>
+    `;
+    card.onclick = () => loadTaskReport(task.id);
+    container.appendChild(card);
+  });
+}
+
+async function refreshFiles() {
+  const data = await api(`/files?user_id=${encodeURIComponent(state.userId)}`);
+  state.files = data.files || [];
+  renderFiles();
+}
+
+async function refreshSessions(selectSessionId = null) {
+  const data = await api(`/sessions?user_id=${encodeURIComponent(state.userId)}`);
+  state.sessions = data.sessions || [];
+  renderSessions();
+  if (selectSessionId) {
+    await loadSessionDetail(selectSessionId);
+  } else if (state.currentSessionId) {
+    const exists = state.sessions.some((session) => session.id === state.currentSessionId);
+    if (exists) {
+      await loadSessionDetail(state.currentSessionId, false);
+    }
+  }
+}
+
+async function loadSessionDetail(sessionId, renderReport = true) {
+  const data = await api(`/sessions/${sessionId}?user_id=${encodeURIComponent(state.userId)}`);
+  state.currentSessionId = sessionId;
+  document.getElementById("detail-title").textContent = data.session.title;
+  document.getElementById("detail-meta").textContent = `${data.session.id} · ${data.session.status}`;
+  renderSessions();
+  renderTasks(data.tasks || []);
+
+  const latestDoneTask = (data.tasks || []).slice().reverse().find((task) => task.status === "succeeded");
+  if (renderReport && latestDoneTask) {
+    await loadTaskReport(latestDoneTask.id);
+  } else if (!latestDoneTask) {
+    setText("report-title", "暂无已完成专题");
+    setText("report-content", "当前会话还没有可展示的报告。");
+    document.getElementById("artifact-gallery").innerHTML = "";
+  }
+}
+
+async function loadTaskReport(taskId) {
+  state.currentTaskId = taskId;
+  renderSessions();
+  const taskData = await api(`/tasks/${taskId}?user_id=${encodeURIComponent(state.userId)}`);
+  setText("report-title", taskData.task.query);
+
+  if (taskData.task.status !== "succeeded") {
+    setText("report-content", `当前任务状态为 ${taskData.task.status}。\n错误信息：${taskData.task.error_message || "暂无"}`);
+    document.getElementById("artifact-gallery").innerHTML = "";
+    return;
+  }
+
+  const reportData = await api(`/tasks/${taskId}/report/content?user_id=${encodeURIComponent(state.userId)}`);
+  setText("report-content", reportData.content || "");
+
+  const artifactData = await api(`/tasks/${taskId}/artifacts?user_id=${encodeURIComponent(state.userId)}`);
+  renderArtifacts(artifactData.artifacts || []);
+}
+
+function renderArtifacts(artifacts) {
+  const gallery = document.getElementById("artifact-gallery");
+  gallery.innerHTML = "";
+  const images = artifacts.filter((item) => item.is_image);
+  if (!images.length) {
+    gallery.innerHTML = '<div class="empty">当前任务没有图片产物。</div>';
+    return;
+  }
+  images.forEach((artifact) => {
+    const card = document.createElement("div");
+    card.className = "artifact-card";
+    card.innerHTML = `
+      <img src="${artifact.url}" alt="${artifact.name}" />
+      <div><a href="${artifact.url}" target="_blank" rel="noreferrer">${artifact.name}</a></div>
+    `;
+    gallery.appendChild(card);
+  });
+}
+
+async function handleUpload(event) {
+  event.preventDefault();
+  const input = document.getElementById("upload-input");
+  if (!input.files.length) {
+    setText("upload-status", "请选择至少一个文件。");
+    return;
+  }
+
+  const formData = new FormData();
+  formData.append("user_id", state.userId);
+  Array.from(input.files).forEach((file) => formData.append("files", file));
+  setText("upload-status", "上传中...");
+  await api("/files/upload", { method: "POST", body: formData });
+  setText("upload-status", "文件上传完成。");
+  input.value = "";
+  await refreshFiles();
+}
+
+async function handleCreateSession(event) {
+  event.preventDefault();
+  const checked = Array.from(document.querySelectorAll("#session-file-picker input:checked"));
+  const fileIds = checked.map((item) => item.value);
+  if (!fileIds.length) {
+    setText("session-status", "请至少选择一个文件。");
+    return;
+  }
+
+  const payload = {
+    user_id: state.userId,
+    title: document.getElementById("session-title").value.trim(),
+    query: document.getElementById("session-query").value.trim(),
+    file_ids: fileIds,
+  };
+  setText("session-status", "会话创建中...");
+  const data = await api("/sessions", {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify(payload),
+  });
+  setText("session-status", "会话已创建，正在执行首个专题。");
+  document.getElementById("session-form").reset();
+  await refreshSessions(data.session.id);
+}
+
+async function handleFollowup() {
+  if (!state.currentSessionId) {
+    setText("detail-meta", "请先选择一个会话。");
+    return;
+  }
+  const query = document.getElementById("followup-query").value.trim();
+  if (!query) {
+    return;
+  }
+  await api(`/sessions/${state.currentSessionId}/topics`, {
+    method: "POST",
+    headers: { "Content-Type": "application/json" },
+    body: JSON.stringify({ user_id: state.userId, query }),
+  });
+  document.getElementById("followup-query").value = "";
+  await refreshSessions(state.currentSessionId);
+}
+
+async function handleCloseSession() {
+  if (!state.currentSessionId) {
+    return;
+  }
+  await api(`/sessions/${state.currentSessionId}/close?user_id=${encodeURIComponent(state.userId)}`, {
+    method: "POST",
+  });
+  await refreshSessions(state.currentSessionId);
+}
+
+function startPolling() {
+  if (state.pollTimer) {
+    clearInterval(state.pollTimer);
+  }
+  state.pollTimer = setInterval(() => {
+    refreshSessions().catch((error) => console.error(error));
+  }, 8000);
+}
+
+async function bootstrap() {
+  ensureUserId();
+  document.getElementById("upload-form").addEventListener("submit", (event) => {
+    handleUpload(event).catch((error) => setText("upload-status", error.message));
+  });
+  document.getElementById("session-form").addEventListener("submit", (event) => {
+    handleCreateSession(event).catch((error) => setText("session-status", error.message));
+  });
+  document.getElementById("submit-followup").onclick = () => {
+    handleFollowup().catch((error) => setText("detail-meta", error.message));
+  };
+  document.getElementById("close-session").onclick = () => {
+    handleCloseSession().catch((error) => setText("detail-meta", error.message));
+  };
+  document.getElementById("refresh-sessions").onclick = () => {
+    refreshSessions().catch((error) => console.error(error));
+  };
+
+  await refreshFiles();
+  await refreshSessions();
+  startPolling();
+}
+
+bootstrap().catch((error) => {
+  console.error(error);
+  setText("detail-meta", error.message);
+});
--- a/webapp/static/index.html
+++ b/webapp/static/index.html
@@ -0,0 +1,88 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vibe Data Analysis</title>
+    <link rel="stylesheet" href="/static/style.css" />
+  </head>
+  <body>
+    <main class="app-shell">
+      <section class="hero">
+        <div>
+          <p class="eyebrow">Vibe Data Analysis</p>
+          <h1>在线数据分析会话</h1>
+          <p class="subtle">
+            上传文件，发起分析，会话结束后继续追问新的专题，不中断当前上下文。
+          </p>
+        </div>
+        <div class="identity-card">
+          <span>当前访客标识</span>
+          <code id="user-id"></code>
+        </div>
+      </section>
+
+      <section class="panel-grid">
+        <section class="panel">
+          <h2>1. 上传文件</h2>
+          <form id="upload-form" class="stack-form">
+            <input id="upload-input" type="file" multiple />
+            <button type="submit">上传并登记</button>
+          </form>
+          <div id="upload-status" class="hint"></div>
+          <div id="file-list" class="file-list"></div>
+        </section>
+
+        <section class="panel">
+          <h2>2. 新建分析会话</h2>
+          <form id="session-form" class="stack-form">
+            <input id="session-title" type="text" placeholder="会话标题，例如：工单健康度" required />
+            <textarea id="session-query" rows="5" placeholder="输入首个分析专题，例如：请先整体评估工单健康度，并指出最需要关注的问题。" required></textarea>
+            <div id="session-file-picker" class="checkbox-list"></div>
+            <button type="submit">创建会话并开始分析</button>
+          </form>
+          <div id="session-status" class="hint"></div>
+        </section>
+      </section>
+
+      <section class="layout">
+        <aside class="sidebar panel">
+          <div class="sidebar-header">
+            <h2>会话列表</h2>
+            <button id="refresh-sessions" type="button">刷新</button>
+          </div>
+          <div id="session-list" class="session-list"></div>
+        </aside>
+
+        <section class="content panel">
+          <div class="content-header">
+            <div>
+              <h2 id="detail-title">未选择会话</h2>
+              <p id="detail-meta" class="hint">选择左侧会话查看分析结果与后续专题。</p>
+            </div>
+            <button id="close-session" type="button" class="ghost">结束当前会话</button>
+          </div>
+
+          <div class="followup-box">
+            <textarea id="followup-query" rows="4" placeholder="如果还有新的专题想继续分析，在这里输入。"></textarea>
+            <button id="submit-followup" type="button">继续分析该专题</button>
+          </div>
+
+          <div class="tasks-area">
+            <div class="tasks-column">
+              <h3>专题任务</h3>
+              <div id="task-list" class="task-list"></div>
+            </div>
+            <div class="report-column">
+              <h3>报告展示</h3>
+              <div id="report-title" class="report-title">暂无报告</div>
+              <pre id="report-content" class="report-content">选择一个已完成任务查看报告。</pre>
+              <div id="artifact-gallery" class="artifact-gallery"></div>
+            </div>
+          </div>
+        </section>
+      </section>
+    </main>
+    <script src="/static/app.js"></script>
+  </body>
+  </html>
--- a/webapp/static/style.css
+++ b/webapp/static/style.css
@@ -0,0 +1,278 @@
+:root {
+  --bg: #f4efe7;
+  --panel: #fffaf2;
+  --line: #d8cdbd;
+  --text: #1f1a17;
+  --muted: #6e645a;
+  --accent: #b04a2f;
+  --accent-soft: #f2d5c4;
+  --success: #2f7d62;
+  --warning: #aa6a1f;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  font-family: "IBM Plex Sans", "Noto Sans SC", sans-serif;
+  color: var(--text);
+  background:
+    radial-gradient(circle at top left, #fff7ec 0, transparent 28rem),
+    linear-gradient(180deg, #efe5d7 0%, var(--bg) 100%);
+}
+
+.app-shell {
+  max-width: 1440px;
+  margin: 0 auto;
+  padding: 24px;
+}
+
+.hero,
+.panel,
+.content,
+.sidebar {
+  border: 1px solid var(--line);
+  background: rgba(255, 250, 242, 0.96);
+  backdrop-filter: blur(10px);
+  border-radius: 20px;
+  box-shadow: 0 12px 40px rgba(93, 67, 39, 0.08);
+}
+
+.hero {
+  display: flex;
+  justify-content: space-between;
+  gap: 24px;
+  padding: 24px 28px;
+  margin-bottom: 20px;
+}
+
+.eyebrow {
+  margin: 0 0 10px;
+  color: var(--accent);
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  font-size: 12px;
+}
+
+h1,
+h2,
+h3,
+p {
+  margin-top: 0;
+}
+
+.subtle,
+.hint {
+  color: var(--muted);
+}
+
+.identity-card {
+  min-width: 220px;
+  padding: 16px;
+  border-radius: 16px;
+  background: linear-gradient(135deg, var(--accent-soft), #f8e7dc);
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.panel-grid,
+.layout,
+.tasks-area {
+  display: grid;
+  gap: 20px;
+}
+
+.panel-grid {
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  margin-bottom: 20px;
+}
+
+.layout {
+  grid-template-columns: 340px minmax(0, 1fr);
+}
+
+.tasks-area {
+  grid-template-columns: 320px minmax(0, 1fr);
+}
+
+.panel,
+.content,
+.sidebar {
+  padding: 20px;
+}
+
+.stack-form {
+  display: grid;
+  gap: 12px;
+}
+
+input,
+textarea,
+button {
+  font: inherit;
+}
+
+input,
+textarea {
+  width: 100%;
+  padding: 12px 14px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: #fffdf9;
+}
+
+button {
+  border: 0;
+  border-radius: 999px;
+  padding: 12px 18px;
+  background: var(--accent);
+  color: #fff;
+  cursor: pointer;
+  transition: transform 120ms ease, opacity 120ms ease;
+}
+
+button:hover {
+  transform: translateY(-1px);
+  opacity: 0.95;
+}
+
+button.ghost {
+  background: transparent;
+  color: var(--accent);
+  border: 1px solid var(--accent-soft);
+}
+
+.file-list,
+.checkbox-list,
+.session-list,
+.task-list,
+.artifact-gallery {
+  display: grid;
+  gap: 10px;
+}
+
+.file-item,
+.session-card,
+.task-card,
+.artifact-card {
+  padding: 12px 14px;
+  border-radius: 14px;
+  border: 1px solid var(--line);
+  background: #fffdf8;
+}
+
+.checkbox-item {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  padding: 10px 12px;
+  border-radius: 12px;
+  border: 1px solid var(--line);
+  background: #fffdf8;
+}
+
+.sidebar-header,
+.content-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: start;
+  gap: 16px;
+}
+
+.followup-box {
+  margin: 20px 0;
+  display: grid;
+  gap: 12px;
+}
+
+.session-card.active,
+.task-card.active {
+  border-color: var(--accent);
+  background: #fff3eb;
+}
+
+.status {
+  display: inline-flex;
+  padding: 4px 10px;
+  border-radius: 999px;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.status.queued {
+  background: #f1ead7;
+  color: #7b6114;
+}
+
+.status.running {
+  background: #e6edf9;
+  color: #1e5dab;
+}
+
+.status.succeeded,
+.status.open {
+  background: #dff1ea;
+  color: var(--success);
+}
+
+.status.failed,
+.status.closed {
+  background: #f8dfda;
+  color: #a03723;
+}
+
+.report-title {
+  margin-bottom: 10px;
+  color: var(--muted);
+}
+
+.report-content {
+  min-height: 360px;
+  max-height: 720px;
+  overflow: auto;
+  padding: 16px;
+  border-radius: 16px;
+  background: #1d1a18;
+  color: #f8f2ea;
+  line-height: 1.6;
+  white-space: pre-wrap;
+}
+
+.artifact-gallery {
+  margin-top: 16px;
+  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
+}
+
+.artifact-card img {
+  width: 100%;
+  height: 180px;
+  object-fit: cover;
+  border-radius: 12px;
+  background: #ede3d7;
+}
+
+.artifact-card a {
+  color: var(--accent);
+  text-decoration: none;
+}
+
+.empty {
+  color: var(--muted);
+  font-style: italic;
+}
+
+@media (max-width: 1024px) {
+  .panel-grid,
+  .layout,
+  .tasks-area,
+  .hero {
+    grid-template-columns: 1fr;
+  }
+
+  .hero {
+    flex-direction: column;
+  }
+}