105 lines
5.9 KiB
HTML
105 lines
5.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>图片智能对话系统 - 地瓜机器人</title>
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css">
|
||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">
|
||
<link rel="stylesheet" href="{{ url_for('static', filename='css/chat.css') }}">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<header class="text-center my-4">
|
||
<h1>图片智能对话系统</h1>
|
||
<p class="lead">上传图片，与AI进行多轮对话</p>
|
||
<nav class="mt-3">
|
||
<a href="/imgsearcherApi" class="btn btn-outline-secondary">返回首页</a>
|
||
</nav>
|
||
</header>
|
||
|
||
<div class="row">
|
||
<div class="col-md-12">
|
||
<div class="card mb-4">
|
||
<div class="card-body">
|
||
<h5 class="card-title">上传图片</h5>
|
||
<form id="uploadImageForm" enctype="multipart/form-data">
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label for="chatImageFile" class="form-label">选择图片</label>
|
||
<input class="form-control" type="file" id="chatImageFile" name="file" accept="image/*" required>
|
||
<div class="form-text">支持JPG、PNG、JPEG、GIF格式</div>
|
||
</div>
|
||
</div>
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label for="robotSelect" class="form-label">选择机器人角色（可选）</label>
|
||
<select class="form-select" id="robotSelect" name="robot_id">
|
||
<option value="">默认AI助手</option>
|
||
<!-- 机器人选项将在这里动态添加 -->
|
||
</select>
|
||
<div class="form-text">选择一个机器人角色进行对话</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- 语音音色选择 -->
|
||
<div class="row">
|
||
<div class="col-md-6">
|
||
<div class="mb-3">
|
||
<label for="voiceSelect" class="form-label">选择音色</label>
|
||
<select class="form-select" id="voiceSelect" name="voice">
|
||
<option value="zh-CN-XiaoXiao-Assistant-Audio.wav" selected>小小助手</option>
|
||
<option value="zh-CN-XiaoXiao-Chat-Audio.wav">小小聊天</option>
|
||
<option value="zh-CN-YunYang-CustomerService-Audio.wav">云扬客服</option>
|
||
<option value="zh-CN-Yunxi-Boy-Default-Audio.wav">云希男孩</option>
|
||
<option value="zh-CN-Yunxi-Narrator-Narrative-Audio.wav">云希旁白</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="d-flex justify-content-between">
|
||
<button type="submit" class="btn btn-primary">上传并开始对话</button>
|
||
<a href="/imgsearcherApi/robots" class="btn btn-outline-secondary">管理机器人角色</a>
|
||
</div>
|
||
</form>
|
||
<div id="uploadPreview" class="mt-3 text-center d-none">
|
||
<div class="preview-container">
|
||
<img id="previewImage" class="img-fluid rounded" alt="预览图">
|
||
</div>
|
||
<div id="imageInfo" class="mt-2">
|
||
<div id="imageType" class="badge bg-info"></div>
|
||
<div id="imageDescription" class="text-muted small mt-1"></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="chatContainer" class="card d-none">
|
||
<div class="card-header">
|
||
<h5 class="mb-0">与图片对话</h5>
|
||
</div>
|
||
<div class="card-body">
|
||
<div id="chatMessages" class="chat-messages mb-3"></div>
|
||
<div class="chat-input-container">
|
||
<form id="chatForm">
|
||
<div class="input-group">
|
||
<input type="text" id="messageInput" class="form-control" placeholder="输入您的问题..." required>
|
||
<button class="btn btn-primary" type="submit">
|
||
<i class="bi bi-send"></i> 发送
|
||
</button>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script>
|
||
<script src="{{ url_for('static', filename='js/chat.js') }}"></script>
|
||
</body>
|
||
</html>
|