192 lines
12 KiB
HTML
192 lines
12 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>极简模式 Demo</title>
|
||
<link rel="stylesheet" href="style.css">
|
||
</head>
|
||
<body>
|
||
<div class="container">
|
||
<div class="chat-area">
|
||
<!-- 用户消息 -->
|
||
<div class="message-block user-message">
|
||
<div class="message-header">
|
||
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
|
||
<circle cx="12" cy="7" r="4"></circle>
|
||
</svg>
|
||
<span>用户</span>
|
||
</div>
|
||
<div class="message-text">
|
||
帮我搜索一下最新的AI技术发展趋势
|
||
</div>
|
||
</div>
|
||
|
||
<!-- AI 消息 -->
|
||
<div class="message-block assistant-message">
|
||
<div class="message-header">
|
||
<svg class="icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<rect x="3" y="11" width="18" height="11" rx="2" ry="2"></rect>
|
||
<path d="M7 11V7a5 5 0 0 1 10 0v4"></path>
|
||
</svg>
|
||
<span>AI Assistant</span>
|
||
</div>
|
||
|
||
<!-- 等待动画 -->
|
||
<div class="generating-placeholder" id="generatingPlaceholder">
|
||
<span class="letter">思</span>
|
||
<span class="letter">考</span>
|
||
<span class="letter">中</span>
|
||
<span class="letter">.</span>
|
||
<span class="letter">.</span>
|
||
<span class="letter">.</span>
|
||
</div>
|
||
|
||
<!-- 摘要行 -->
|
||
<div class="summary-line" id="summaryLine" style="display: none;">
|
||
<svg class="summary-icon" width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="12" cy="12" r="10"></circle>
|
||
<polyline points="12 6 12 12 16 14"></polyline>
|
||
</svg>
|
||
<span class="summary-text" id="summaryText">正在思考如何搜索...</span>
|
||
<div class="shimmer-overlay"></div>
|
||
</div>
|
||
|
||
<!-- 展开的详细内容 -->
|
||
<div class="detail-view" id="detailView" style="display: none;">
|
||
<div class="timeline-container">
|
||
<!-- 左侧时间线 -->
|
||
<div class="timeline">
|
||
<!-- 第一个步骤不显示图标，使用摘要行的图标 -->
|
||
<div class="timeline-item timeline-item-first" data-step="0">
|
||
<div class="timeline-line"></div>
|
||
</div>
|
||
<div class="timeline-item" data-step="1" style="display: none;">
|
||
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<circle cx="11" cy="11" r="8"></circle>
|
||
<path d="m21 21-4.35-4.35"></path>
|
||
</svg>
|
||
<div class="timeline-line"></div>
|
||
</div>
|
||
<div class="timeline-item" data-step="2" style="display: none;">
|
||
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
|
||
<path d="M12 6v6l4 2"></path>
|
||
</svg>
|
||
<div class="timeline-line"></div>
|
||
</div>
|
||
<div class="timeline-item" data-step="3" style="display: none;">
|
||
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<polyline points="4 17 10 11 4 5"></polyline>
|
||
<line x1="12" y1="19" x2="20" y2="19"></line>
|
||
</svg>
|
||
<div class="timeline-line"></div>
|
||
</div>
|
||
<div class="timeline-item" data-step="4" style="display: none;">
|
||
<svg class="timeline-icon" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
|
||
<path d="M12 2a10 10 0 1 0 10 10A10 10 0 0 0 12 2z"></path>
|
||
<path d="M12 6v6l4 2"></path>
|
||
</svg>
|
||
<div class="timeline-line"></div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 右侧内容 -->
|
||
<div class="content-area">
|
||
<div class="content-item" data-step="0">
|
||
<div class="content-body">
|
||
<div class="thinking-content" id="thinkingContent0">
|
||
我需要搜索最新的AI技术发展趋势。首先，我应该使用搜索工具来查找相关信息。搜索关键词应该包括"AI技术"、"人工智能"、"2026"、"发展趋势"等。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" data-step="1" style="display: none;">
|
||
<div class="content-header">搜索网页</div>
|
||
<div class="content-body">
|
||
<div class="tool-intent">搜索：AI技术发展趋势 2026</div>
|
||
<div class="tool-result">
|
||
<div class="result-item">
|
||
<div class="result-title">2026年AI技术十大趋势</div>
|
||
<div class="result-url">https://example.com/ai-trends-2026</div>
|
||
</div>
|
||
<div class="result-item">
|
||
<div class="result-title">人工智能最新突破</div>
|
||
<div class="result-url">https://example.com/ai-breakthrough</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" data-step="2" style="display: none;">
|
||
<div class="content-body">
|
||
<div class="thinking-content" id="thinkingContent2">
|
||
搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...
|
||
<button class="show-more-btn" onclick="expandThinking(2)">显示更多</button>
|
||
</div>
|
||
<div class="thinking-content-full" id="thinkingContentFull2" style="display: none;">
|
||
搜索结果显示了一些有价值的信息。现在我需要执行一个命令来获取更详细的数据分析。我将使用curl命令来获取第一个链接的内容，然后进行分析。这将帮助我提供更准确和详细的答案。让我执行这个命令...
|
||
|
||
在执行之前，我需要确保命令的安全性和有效性。curl命令是一个常用的网络请求工具，可以帮助我获取网页内容。我会添加适当的参数来确保请求的稳定性，比如设置超时时间、用户代理等。
|
||
|
||
同时，我还需要考虑如何解析返回的HTML内容，提取出关键信息。可能需要使用一些文本处理工具，如grep、sed或awk来过滤和格式化数据。
|
||
<button class="show-less-btn" onclick="collapseThinking(2)">收起</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" data-step="3" style="display: none;">
|
||
<div class="content-header">执行命令</div>
|
||
<div class="content-body">
|
||
<div class="tool-intent">获取网页内容并分析</div>
|
||
<div class="tool-result">
|
||
<div class="command-block">
|
||
<div class="command-header">
|
||
<span class="command-label">bash</span>
|
||
</div>
|
||
<pre class="command-code">curl -s "https://example.com/ai-trends-2026" | grep -i "trend"</pre>
|
||
<div class="command-output">
|
||
<div class="output-line">Trend 1: 多模态AI模型的普及</div>
|
||
<div class="output-line">Trend 2: AI安全性和可解释性</div>
|
||
<div class="output-line">Trend 3: 边缘AI计算</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="content-item" data-step="4" style="display: none;">
|
||
<div class="content-body">
|
||
<div class="thinking-content" id="thinkingContent4">
|
||
很好，我已经收集到了足够的信息。现在我可以整理这些内容，为用户提供一个清晰、全面的答案。我会按照趋势的重要性和影响力来组织内容。
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 最终输出 -->
|
||
<div class="text-output" id="textOutput" style="display: none;">
|
||
<div class="text-content">
|
||
<p>根据我的搜索和分析，2026年AI技术的主要发展趋势包括：</p>
|
||
<ol>
|
||
<li><strong>多模态AI模型的普及</strong>：能够同时处理文本、图像、音频等多种数据类型的AI模型将成为主流。</li>
|
||
<li><strong>AI安全性和可解释性</strong>：随着AI应用的广泛部署，确保AI系统的安全性和决策的可解释性变得越来越重要。</li>
|
||
<li><strong>边缘AI计算</strong>：将AI计算能力部署到边缘设备，实现更快的响应速度和更好的隐私保护。</li>
|
||
</ol>
|
||
<p>这些趋势将深刻影响各行各业的数字化转型进程。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 控制面板 -->
|
||
<div class="control-panel">
|
||
<button onclick="startDemo()" class="control-btn">开始演示</button>
|
||
<button onclick="resetDemo()" class="control-btn">重置</button>
|
||
<button onclick="toggleSummary()" class="control-btn">切换展开/折叠</button>
|
||
</div>
|
||
</div>
|
||
|
||
<script src="script.js"></script>
|
||
</body>
|
||
</html>
|