304 lines
8.8 KiB
Markdown
304 lines
8.8 KiB
Markdown
# 截图展示
|
||
|
||
通过我们的可视化画廊探索 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>
|