修改了文件系统架构
This commit is contained in:
1 parent
dc246b0d91
commit
4a4bd5c365
30 files changed
+29
-5
No files matched your search
@@ -0,0 +1,139 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="zh-CN">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover" />
|
||||
<title>minor · Chatbot</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link
|
||||
href="https://fonts.googleapis.com/css2?family=ZCOOL+KuaiLe&display=swap"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link rel="icon" href="/image/favicon.svg" sizes="any" />
|
||||
<link rel="stylesheet" href="/app.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="bg-scene" id="bgScene" aria-hidden="true">
|
||||
<div class="bg-image" id="bgImageLayer"></div>
|
||||
<div class="bg-vignette" aria-hidden="true"></div>
|
||||
</div>
|
||||
<div class="app-root" id="app">
|
||||
<div class="drawer-backdrop" id="drawerBackdrop" aria-hidden="true"></div>
|
||||
<aside class="expand-rail" id="expandRail" aria-hidden="true">
|
||||
<button type="button" class="rail-btn" id="expandBtn" title="展开侧栏">⟩</button>
|
||||
</aside>
|
||||
<aside class="sidebar" id="sidebar">
|
||||
<div class="sidebar-head">
|
||||
<h2 class="sidebar-title">会话</h2>
|
||||
<button type="button" class="btn btn-primary" id="newSessionBtn">+ 新建会话</button>
|
||||
<button type="button" class="btn btn-danger" id="deleteSessionBtn">删除会话</button>
|
||||
</div>
|
||||
<div class="sidebar-list-wrap">
|
||||
<ul class="session-list" id="sessionList" role="listbox" aria-label="会话列表"></ul>
|
||||
</div>
|
||||
<p class="sidebar-hint">点击切换会话;新建为秒级时间 ID。</p>
|
||||
<div class="sidebar-bg-panel" aria-label="背景与景深">
|
||||
<p class="sidebar-bg-title">页面背景</p>
|
||||
<label class="bg-control">
|
||||
<span class="bg-control-label">景深模糊</span>
|
||||
<input type="range" id="dofRange" min="0" max="24" value="0" step="0.5" />
|
||||
<span class="bg-control-value" id="dofValue">0 px</span>
|
||||
</label>
|
||||
<label class="bg-control">
|
||||
<span class="bg-control-label">暗角</span>
|
||||
<input type="range" id="vignetteRange" min="0" max="100" value="35" step="1" />
|
||||
<span class="bg-control-value" id="vignetteValue">35 %</span>
|
||||
</label>
|
||||
<p class="sidebar-bg-tip">替换 <code>web/image/background.jpg</code> 可换图;设置会保存在本机浏览器。</p>
|
||||
</div>
|
||||
<div class="sidebar-collapse">
|
||||
<button type="button" class="collapse-fab" id="collapseBtn" title="收起侧栏">⟨</button>
|
||||
</div>
|
||||
</aside>
|
||||
<main class="main" id="mainPanel">
|
||||
<header class="main-header">
|
||||
<button
|
||||
type="button"
|
||||
class="menu-btn"
|
||||
id="menuBtn"
|
||||
aria-expanded="false"
|
||||
aria-controls="sidebar"
|
||||
title="会话与设置"
|
||||
>
|
||||
☰
|
||||
</button>
|
||||
<div class="main-header-text" id="mainHeaderText">
|
||||
<h1 class="title">minor · Chatbot</h1>
|
||||
<p class="subtitle">本地多模态对话(Web)</p>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class="header-toggle"
|
||||
id="headerToggleBtn"
|
||||
aria-expanded="true"
|
||||
aria-controls="mainHeaderText"
|
||||
title="收起标题栏"
|
||||
>
|
||||
▴
|
||||
</button>
|
||||
</header>
|
||||
<section class="chat-shell">
|
||||
<div class="chat-placeholder" id="chatPlaceholder">
|
||||
<h3>开始对话</h3>
|
||||
<p>输入文字,或上传<strong>图片</strong> / <strong>音频</strong> 后点击发送。</p>
|
||||
<p class="muted">支持用户音频输入、助手文本/语音/双模输出、会话本地媒体持久化。</p>
|
||||
</div>
|
||||
<div class="chat-messages" id="chatMessages" hidden></div>
|
||||
</section>
|
||||
<footer class="composer">
|
||||
<div class="composer-attachments" id="attachmentPreview"></div>
|
||||
<div class="composer-row">
|
||||
<div class="mm-input" role="group" aria-label="多模态输入">
|
||||
<div class="composer-input-shell">
|
||||
<textarea
|
||||
id="textInput"
|
||||
rows="2"
|
||||
placeholder="输入消息或添加附件,Enter 发送(Shift+Enter 换行)"
|
||||
></textarea>
|
||||
<button type="button" class="mic-btn" id="micBtn" title="使用麦克风录音" aria-pressed="false" aria-label="使用麦克风录音">
|
||||
<img src="/image/microphone.svg" alt="" aria-hidden="true" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="mm-actions">
|
||||
<label class="btn btn-ghost file-btn">
|
||||
图片
|
||||
<input type="file" id="imageInput" accept="image/png,image/jpeg,image/jpg,image/gif,image/webp,image/bmp,.png,.jpg,.jpeg,.gif,.webp,.bmp" multiple hidden />
|
||||
</label>
|
||||
<label class="btn btn-ghost file-btn">
|
||||
音频
|
||||
<input type="file" id="audioInput" accept="audio/*,.wav,.mp3,.m4a,.flac,.ogg" hidden />
|
||||
</label>
|
||||
<label class="output-mode-label" for="outputModeSelect">输出模式</label>
|
||||
<select id="outputModeSelect" class="output-mode-select" aria-label="Agent 输出模式">
|
||||
<option value="text">纯文字</option>
|
||||
<option value="audio">纯语音</option>
|
||||
<option value="both">both</option>
|
||||
</select>
|
||||
<!-- 自动语音输入开关 -->
|
||||
<div class="composer-auto-input">
|
||||
<label class="auto-input-label" for="autoInputCheck">
|
||||
自动语音输入
|
||||
</label>
|
||||
<input type="checkbox" id="autoInputCheck" class="auto-input-check" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="composer-send">
|
||||
<button type="button" class="btn btn-primary" id="sendBtn">发送</button>
|
||||
<button type="button" class="btn btn-secondary" id="clearBtn">清空</button>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</main>
|
||||
</div>
|
||||
<script src="https://cdn.jsdelivr.net/npm/marked/marked.min.js"></script>
|
||||
<script src="https://cdn.jsdelivr.net/npm/dompurify@3.1.6/dist/purify.min.js"></script>
|
||||
<script src="/app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in new issue
Block a user