CakeCN/hsa
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
CakeCN
2024-12-03 16:21:19 +08:00
commit 4198ca63b1
975 changed files with 333413 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

53
Html/static/binary_search.html Normal file
View File

@@ -0,0 +1,53 @@
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-markdown-css/5.2.0/github-markdown.min.css">
</head>
<body>
<h1>二分查找与二分答案</h1>
<h2>二分查找</h2>
<h3>引入</h3>
<p>二分是一个很简单基础，但很重要的知识点，为以后许多高级的数据结构与算法铺垫。</p>
<p>下面是一个用二分的简单场景：</p>
<p>假设小明从0到1000之间选择了一个数字但不告诉你，你可以不断猜测这个数，每次猜测小明会告知你的猜测得过大还是过小，问最多几次就一定能猜中？</p>
<p>答案是利用二分查找的原理，猜测11次即可。</p>
<ol>
<li>对于0到1000的答案备选区，猜测中位数500，假设过小，</li>
<li>则对于501到1000的答案备选区，猜测750，假设过大</li>
<li>则对于501到749的答案备选区，猜测625，假设过小，</li>
<li>则对于626到749区间......</li>
<li>（688-749）</li>
<li>（718-749）</li>
<li>（734-749）</li>
<li>（742-749）</li>
<li>（746-749）</li>
<li>（748-749）</li>
<li>（749-749）</li>
</ol>
<p>在最差的情况下，第11次的答案备选区就一定长度为1了，也就是必然是答案。</p>
<p>因此如果序列是有序的，就可以通过二分查找快速定位所需要的数据。</p>
<h4>思考题（询问Agent以学习计算方法，或验证你的答案）</h4>
<p>对于上面那个题目，如果问题区间是1到4000，最差情况下需要猜测几次？</p>
<h3>练习：二分查找</h3>
<p>试试对于下面的题目，用代码实现一下二分查找。</p>
<h4>题目：有序数组寻址</h4>
<p>给出一个长度为n的有序数组（从小到大），有q次询问，对于每次询问，输出指定数在数组中的下标。如果不存在则输出-1。</p>
<h5>输入</h5>
<p>第一行一个整数n。(1&lt;=n&lt;=10^5)</p>
<p>第二行n个用空格分开的整数ai。(0&lt;=ai&lt;=10^8)</p>
<p>第三行一个整数q，表示询问的次数。(1&lt;=q&lt;=10^4)</p>
<p>后q行，每行一个整数b，表示询问的数。(0&lt;=b&lt;=10^8)</p>
<h5>输出</h5>
<p>q行，每行一个整数，对应每次询问的返回结果。</p>
<h5>提示：</h5>
<p>完成代码后，通知Agent进行评测。</p>
<p>如果你还不完全会这个算法，询问Agent获取提示并进行学习。</p>
</body>
</html>

162
Html/static/css/index.css Normal file
View File

@@ -0,0 +1,162 @@
/* 左右两侧的页面内容 */
.sidebar {
background-color: #f0f0f0;
padding: 20px;
height: 100%;
}
body {
font-family: Arial, sans-serif;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.chatbox {
flex-grow: 1;
padding: 20px;
height: 75%;
overflow-y: auto;
border: 1px solid #ccc;
background-color: #f9f9f9;
}
.chat-message {
max-width: 70%;
padding: 10px 15px;
border-radius: 20px;
margin-bottom: 10px;
}
.user-message {
background-color: #d1e7dd;
text-align: right;
margin-left: auto;
}
.server-message {
background-color: #f1f1f1;
text-align: left;
margin-right: auto;
}
textarea {
flex-grow: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
resize: none;
}
button {
padding: 10px 20px;
margin-left: 10px;
background-color: #28a745;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
pre {
background-color: #eee;
padding: 10px;
border-radius: 4px;
}
code {
font-family: monospace;
}
/* 让父容器为flex布局 */
.maxcontainer {
display: flex;
flex-grow: 1;
height: 100%;
position: relative;
}
/* 中间的拖拽条 */
.resizer {
width: 5px;
background-color: #ccc;
cursor: ew-resize;
position: relative;
}
.chatbox-header {
padding: 10px;
background-color: #f1f1f1;
display: flex;
justify-content: space-between;
align-items: center;
border-bottom: 1px solid #ddd;
}
.input-area {
display: flex;
gap: 10px;
margin-top: 15px;
padding: 10px;
background-color: #f1f1f1;
border-top: 1px solid #ddd;
}
.slider-container, .language-toggle {
display: flex;
align-items: center;
}
.slider-container input[type="range"] {
width: 70%;
margin-left: 10px;
}
.btn-group-toggle .btn {
padding: 5px 10px;
}
#leftSidebar, .vscode-web, #rightSidebar {
height: 100vh;
overflow: auto;
}
#dragbar, #dragbar2 {
background-color: #ccc;
cursor: col-resize;
}
/* 主容器，使用 grid 布局 */
#maxcontainer {
display: grid;
grid-template-columns: 1fr 5px 3fr 5px 1fr; /* 默认宽度比例 */
height: 100vh;
}
/* 各区域基础样式 */
.sidebar {
overflow: auto; /* 确保内容可以滚动 */
}
.vscode-web {
width: 100%;
height: 100%;
border: none;
}
.resizer {
background-color: #ccc;
cursor: col-resize;
width: 5px; /* 设置拖动条宽度 */
}
.gutter {
background-color: #ccc; /* 分隔条颜色 */
cursor: col-resize;
}#container {
display: grid;
grid-template-columns: 1fr 5px 3fr 5px 1fr; /* 初始比例 */
height: 100vh;
}
#leftSidebar, #vscodeWeb, #rightSidebar {
overflow: auto;
}
#dragbar, #dragbar2 {
background-color: #ccc;
cursor: col-resize;
}

20
Html/static/example.html Normal file
View File

@@ -0,0 +1,20 @@
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h2>这是一个Makedown文件</h2>
<h3>教学目标</h3>
<h3>第一章：什么是计算机</h3>
<h4>例1-1：计算机的组成部分是</h4>
<h3>第二章：什么是算法</h3>
<p><img alt="图片" src="./image/example/p1.png" /></p>
</body>
</html>

BIN
Html/static/image/example/p1.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.9 MiB

83
Html/static/js/chatbox.js Normal file
View File

@@ -0,0 +1,83 @@
var socket;
document.addEventListener('DOMContentLoaded', function() {
const data = window.appData;
console.log(data);
socket = io.connect(`http://172.21.20.148:5500?username=${data.username}&folder=${data.folder}`);
// 监听来自服务器的消息
socket.on('receive_message', function(data) {
// 显示服务器的回复消息
const serverMessage = document.createElement('div');
serverMessage.innerHTML = `<div class="chat-message server-message"><b>服务器:</b> ${marked.parse(data)}</div>`;
document.getElementById('chatbox').appendChild(serverMessage);
// 滚动到最新消息
document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
});
});
// 控制文字大小的滑块
const fontSizeSlider = document.getElementById('fontSizeSlider');
const chatbox = document.getElementById('chatbox');
fontSizeSlider.addEventListener('input', function() {
console.log(fontSizeSlider.value);
chatbox.style.fontSize = fontSizeSlider.value + 'px';
});
// 语言切换按钮
const englishRadio = document.getElementById('english');
const chineseRadio = document.getElementById('chinese');
let language = 'en'; // 默认语言
// 切换语言事件
englishRadio.addEventListener('change', function() {
if (englishRadio.checked) language = 'en';
});
chineseRadio.addEventListener('change', function() {
if (chineseRadio.checked) language = 'zn';
});
function sendMessage() {
const input = document.getElementById('messageInput').value;
if (input.trim() === '') return;
// 创建一个新的消息元素
const newMessage = document.createElement('div');
newMessage.classList.add('chat-message');
newMessage.innerHTML = `<b>${language === 'en' ? 'You:' : '你:'}</b> ${input}`;
chatbox.appendChild(newMessage);
// 清空输入框
document.getElementById('messageInput').value = '';
// 滚动到最新消息
chatbox.scrollTop = chatbox.scrollHeight;
}
// 发送消息
function sendMessage() {
const input = document.getElementById('messageInput').value;
if (input.trim() === '') return;
// 使用 marked.js 解析 markdown
const markdownHtml = marked.parse(input);
// 显示用户发送的消息
const userMessage = document.createElement('div');
userMessage.innerHTML = `<div class="chat-message user-message"><b>你:</b> ${markdownHtml}</div>`;
document.getElementById('chatbox').appendChild(userMessage);
// 发送消息到服务器
socket.emit('send_message', input);
// 清空输入框
document.getElementById('messageInput').value = '';
// 滚动到最新消息
document.getElementById('chatbox').scrollTop = document.getElementById('chatbox').scrollHeight;
}

52
Html/static/twice_split.html Normal file
View File

@@ -0,0 +1,52 @@
<html>
<head>
<style>
img {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<h1>二分查找与二分答案</h1>
<h2>二分查找</h2>
<h3>引入</h3>
<p>二分是一个很简单基础，但很重要的知识点，为以后许多高级的数据结构与算法铺垫。</p>
<p>下面是一个用二分的简单场景：</p>
<p>假设小明从0到1000之间选择了一个数字但不告诉你，你可以不断猜测这个数，每次猜测小明会告知你的猜测得过大还是过小，问最多几次就一定能猜中？</p>
<p>答案是利用二分查找的原理，猜测11次即可。</p>
<ol>
<li>对于0到1000的答案备选区，猜测中位数500，假设过小，</li>
<li>则对于501到1000的答案备选区，猜测750，假设过大</li>
<li>则对于501到749的答案备选区，猜测625，假设过小，</li>
<li>则对于626到749区间......</li>
<li>（688-749）</li>
<li>（718-749）</li>
<li>（734-749）</li>
<li>（742-749）</li>
<li>（746-749）</li>
<li>（748-749）</li>
<li>（749-749）</li>
</ol>
<p>在最差的情况下，第11次的答案备选区就一定长度为1了，也就是必然是答案。</p>
<p>因此如果序列是有序的，就可以通过二分查找快速定位所需要的数据。</p>
<h4>思考题（询问Agent以学习计算方法，或验证你的答案）</h4>
<p>对于上面那个题目，如果问题区间是1到4000，最差情况下需要猜测几次？</p>
<h3>练习：二分查找</h3>
<p>试试对于下面的题目，用代码实现一下二分查找。</p>
<h4>题目：有序数组寻址</h4>
<p>给出一个长度为n的有序数组（从小到大），有q次询问，对于每次询问，输出指定数在数组中的下标。如果不存在则输出-1。</p>
<h5>输入</h5>
<p>第一行一个整数n。(1&lt;=n&lt;=10^5)</p>
<p>第二行n个用空格分开的整数ai。(0&lt;=ai&lt;=10^8)</p>
<p>第三行一个整数q，表示询问的次数。(1&lt;=q&lt;=10^4)</p>
<p>后q行，每行一个整数b，表示询问的数。(0&lt;=b&lt;=10^8)</p>
<h5>输出</h5>
<p>q行，每行一个整数，对应每次询问的返回结果。</p>
<h5>提示：</h5>
<p>完成代码后，通知Agent进行评测。</p>
<p>如果你还不完全会这个算法，询问Agent获取提示并进行学习。</p>
</body>
</html>