# 截图展示

通过我们的可视化画廊探索 Speakr 的强大功能。点击任意图片可查看完整尺寸。

## 主界面

### 仪表盘视图

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/Filters.png" alt="带筛选功能的主仪表盘" />
    <p class="caption">带有高级筛选选项的主仪表盘</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/main view no diarization.png" alt="简单转录视图" />
    <p class="caption">简洁的简单转录界面</p>
  </div>
</div>

### 多语言支持

<div class="screenshot-item">
  <img src="../assets/images/screenshots/Multilingual.png" alt="多语言界面" />
  <p class="caption">完整国际化支持，涵盖5种语言</p>
</div>

## 录音与上传

### 新录音界面

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/new recording view.png" alt="录音界面" />
    <p class="caption">直接在浏览器中上传或录制音频</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/live recording view with notes.png" alt="实时录音与笔记" />
    <p class="caption">录音时实时记录笔记</p>
  </div>
</div>

### 录音选项

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/record from tab.png" alt="从标签页录制" />
    <p class="caption">从指定的浏览器标签页录制音频</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/record from screen.png" alt="从屏幕录制" />
    <p class="caption">屏幕共享时捕获系统音频</p>
  </div>
</div>

### 录音后处理

<div class="screenshot-item">
  <img src="../assets/images/screenshots/after recording, finalize tags and settings and notes before uploading or discard.png" alt="录音后选项" />
    <p class="caption">在处理前添加标签、备注和配置设置</p>
</div>

## 转录功能

### 转录视图

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/recording view with simple transcription view and chat visible.png" alt="转录与聊天" />
    <p class="caption">简单转录视图搭配 AI 聊天面板</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/Summary View.png" alt="摘要视图" />
    <p class="caption">AI 生成的摘要及要点</p>
  </div>
</div>

### 说话人识别

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/speaker id modal.png" alt="说话人识别" />
    <p class="caption">识别并标注录音中的说话人</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/edit transcript with ASR.png" alt="ASR 转录编辑器" />
    <p class="caption">基于片段的高级 ASR 转录编辑器</p>
  </div>
</div>

## AI 驱动功能

### 交互式聊天

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/chat view with question.png" alt="AI 聊天界面" />
    <p class="caption">针对录音内容提问并获取智能回答</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/notes tab.png" alt="笔记标签页" />
    <p class="caption">使用 Markdown 笔记整理思路</p>
  </div>
</div>

### 问询模式

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/inquire mode.png" alt="问询模式搜索" />
    <p class="caption">在所有录音中进行语义搜索</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/inquire mode 2.png" alt="问询模式结果" />
    <p class="caption">自然语言搜索及上下文相关结果</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/iinquire mode contextual searches.png" alt="上下文搜索结果" />
    <p class="caption">在多个录音中查找相关内容</p>
  </div>
</div>

## 组织与管理

### 标签与筛选

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/tag selection and stacking.png" alt="标签选择" />
    <p class="caption">多标签选择与智能提示叠加</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/settings Tags that allow custom prompts stackable and custom asr settings.png" alt="标签管理" />
    <p class="caption">创建带有自定义 AI 提示词和 ASR 设置的标签</p>
  </div>
</div>

### 录音管理

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/edit recording modal.png" alt="编辑录音" />
    <p class="caption">编辑录音元数据和设置</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/edit recording tags modal.png" alt="编辑标签" />
    <p class="caption">管理标签以实现更好的组织</p>
  </div>
</div>

## 分享与协作

### 分享录音

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/share recording modal.png" alt="分享弹窗" />
    <p class="caption">生成带有可自定义权限的安全分享链接</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/shared recording.png" alt="已分享录音视图" />
    <p class="caption">简洁的公开分享录音视图</p>
  </div>
</div>

### 管理分享

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/shared transcript modal.png" alt="管理分享" />
    <p class="caption">控制和撤销分享链接</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/settings shared transcripts.png" alt="已分享转录设置" />
    <p class="caption">所有已分享录音的总览</p>
  </div>
</div>

## 用户设置

### 账户配置

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/settings account info.png" alt="账户设置" />
    <p class="caption">个人信息和语言偏好</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/settings custom prompts.png" alt="自定义提示词" />
    <p class="caption">配置个人 AI 摘要提示词</p>
  </div>
</div>

### 说话人管理

<div class="screenshot-item">
  <img src="../assets/images/screenshots/settings speakr management.png" alt="说话人管理" />
  <p class="caption">管理说话人库及使用统计</p>
</div>

## 管理员功能

### 用户管理

<div class="screenshot-item">
  <img src="../assets/images/screenshots/Admin dashboard.png" alt="管理员仪表盘" />
  <p class="caption">管理用户并监控系统使用情况</p>
</div>

### 系统配置

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/Admin system settings.png" alt="系统设置" />
    <p class="caption">配置全局系统参数</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/Admin default prompts.png" alt="默认提示词" />
    <p class="caption">为所有用户设置默认 AI 提示词</p>
  </div>
</div>

### 监控与分析

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/Admin stats.png" alt="系统统计" />
    <p class="caption">监控系统健康状态和使用模式</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/Admin vector store.png" alt="向量存储管理" />
    <p class="caption">管理语义搜索基础设施</p>
  </div>
</div>

## 处理与重新处理

<div class="screenshot-grid">
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/full recording reprocessing.png" alt="完整重新处理" />
    <p class="caption">使用更新的设置重新处理录音</p>
  </div>
  
  <div class="screenshot-item">
    <img src="../assets/images/screenshots/summary reprocessing modal.png" alt="摘要重新处理" />
    <p class="caption">使用新提示词重新生成摘要</p>
  </div>
</div>

---

<style>
.screenshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
  gap: 2rem;
  margin: 2rem 0;
}

.screenshot-item {
  text-align: center;
  margin: 2rem 0;
}

.screenshot-item img {
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: transform 0.2s;
}

.screenshot-item img:hover {
  transform: scale(1.02);
}

.caption {
  margin-top: 0.5rem;
  font-style: italic;
  color: #666;
}

@media (max-width: 768px) {
  .screenshot-grid {
    grid-template-columns: 1fr;
  }
}
</style>