Atomgit-河北工业职业技术大学校园AI应用大赛-参与演示博客
本文提供了一份详细的竞赛操作指南，包含12个步骤：1.登录CSDN账号；2.进入活动主页选择方向；3.报名比赛；4.领取企业token并了解参数设置；5.复制代码；6.赛道一基础AIAgent优化代码示例（宇宙难题解密器）；7.赛道二深入代码编辑版本示例（Java关键词连连看游戏）；8.视频录制建议；9-10.视频上传与获取链接；11-12.项目上传与同步组织操作。指南提供了两个完整代码示例（HT
·
前言
为帮助大家更好的参与本次竞赛活动，我这里准备了一套完整的操作指南，希望能在步骤上节约大家的时间，将更多的精力放在创意的方向上。
完整操作步骤
1、首先登录到CSDN
登录后会看到头像，有头像代表登录成功。
2、进入活动主页
活动地址：
https://competition.gitcode.com/competition/1986753013900296193/intro
打开效果，初次打开需要选择方向。这里目的和关注各选一个即可点击开始使用。
3、报名比赛
这里点击【报名参赛】，可以看到报名身份会自动提取昵称，点击【提交报名】即可。
4、领取企业token
直接进入模型库：
选定后可以看到有token限免的模型
例如进入到第一个模型，可以看到领取Token的按钮。
可以进行提问，有免费的token使用。
参数说明：
| 参数名称 | 数值 | 含义解释 |
|---|---|---|
| Max Tokens | 4096 | 限制模型输出文本的最大 tokens 数量，tokens 是文本的最小单位，用于控制生成内容的篇幅 |
| Temperature | 0.6 | 调节输出随机性，值越高输出越多样有创意，越低越保守聚焦高频内容，0.6 为中等随机性 |
| Top P | 0.95 | 从概率和为 95% 的高概率词中选，平衡随机性与合理性，让输出多样且不混乱 |
| Top K | 50 | 选取概率最高的 50 个词再随机选，减少低概率词干扰，使输出更可控流畅 |
| Frequency Penalty | 0.0 | 不惩罚重复词，值越高越抑制重复，避免内容冗余，当前为不抑制状态 |
| Thinking Budget | 32768 | 可能关联计算资源或生成 “思考” 的复杂度限制，影响模型推理深度，为平台自定义参数 |
注：需要根据需求来具体修改。
5、复制代码
在右侧能看到【复制】按钮。
6、基础AIAgent优化代码——赛道一——基础HTML版本
任何AI代码工具均可，这里是属于赛道一，赛道一的要求是：
赛道一：【校园生活助手】
赛道描述： 聚焦校园生活与学习。利用 AI Agent 或应用，为自己、同学或老师打造一个贴心的“私人助理”，解决一个校园中的具体痛点。
示例（供参考）
“摆烂”室友拯救器： 一个能自动提醒室友“今天轮到你打扫卫生”、“记得去上XX课”的趣味性 Agent。
校园活动万事通： 一个汇总了所有社团、讲座、比赛信息的 AI 助手，可以智能推荐和规划活动。
示例AI问题：
请根据这段代码改写成html+js的写法，都写到html当中，我要以【宇宙难题解密器】为主体改写成一个HTML版本的AIAgent应用，需要有对应的输入框与流式回答框，并且对应样式要符合主题。
要求：
1、不能使用国外的css或js连接，会影响请求。
2、要合理的修改content，让其能充分的展示主题AIAgent的特性，添加对应AIAgent的system约束。
3、我要以html的方式来展示返回的数据信息，可以适当润色格式，不要显示有关markdown的样式(类似**--这种)。
4、要保障请求与对应的秘钥正确性，保障可以访问接口并以流式的方式遍历结果。
import os
import requests
import json
API_URL = "https://api.gitcode.com/api/v5/chat/completions"
headers = {
"Authorization": f"Bearer KC9yewXtgfgQ9A9UriJKzAdh",
}
def query(payload):
response = requests.post(API_URL, headers=headers, json=payload, stream=True)
for line in response.iter_lines():
if not line.startswith(b"data:"):
continue
if line.strip() == b"data:[DONE]":
return
yield json.loads(line.decode("utf-8").lstrip("data:").rstrip("/n"))
chunks = query({
"messages": [
{
"role": "user",
"content": "告诉我一个有关宇宙的有趣事实？"
}
],
"model": "hf_mirrors/deepseek-ai/DeepSeek-V3.1-Base",
"stream": True,
"max_tokens": 4096,
"temperature": 0.6,
"top_p": 0.95,
"top_k": 50,
"frequency_penalty": 0,
"thinking_budget": 32768
})
for chunk in chunks:
print(chunk["choices"][0]["delta"]["content"], end="")AI提问操作：
我这里使用的是豆包。
代码结果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>宇宙难题解密器</title>
<style>
:root {
--cosmic-bg: #0a0a2a;
--cosmic-blue: #1a1a72;
--cosmic-purple: #4b0082;
--cosmic-pink: #ff69b4;
--cosmic-cyan: #00ced1;
--star-white: #e6e6fa;
--neon-glow: 0 0 5px var(--cosmic-cyan), 0 0 20px var(--cosmic-cyan);
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background-color: var(--cosmic-bg);
background-image:
radial-gradient(circle at 10% 20%, rgba(10, 10, 42, 0.8) 0%, transparent 20%),
radial-gradient(circle at 80% 40%, rgba(75, 0, 130, 0.5) 0%, transparent 30%),
radial-gradient(circle at 40% 70%, rgba(26, 26, 114, 0.6) 0%, transparent 25%),
radial-gradient(circle at 90% 90%, rgba(255, 105, 180, 0.4) 0%, transparent 20%);
color: var(--star-white);
min-height: 100vh;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}
.stars {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 0;
}
.star {
position: absolute;
background-color: white;
border-radius: 50%;
animation: twinkle 2s infinite ease-in-out;
}
@keyframes twinkle {
0%, 100% { opacity: 0.2; }
50% { opacity: 1; }
}
.container {
width: 100%;
max-width: 800px;
background-color: rgba(10, 10, 42, 0.7);
border: 1px solid var(--cosmic-cyan);
border-radius: 15px;
box-shadow: var(--neon-glow);
overflow: hidden;
position: relative;
z-index: 1;
}
.header {
background: linear-gradient(135deg, var(--cosmic-blue), var(--cosmic-purple));
padding: 20px;
text-align: center;
border-bottom: 1px solid var(--cosmic-cyan);
}
.header h1 {
font-size: 2.5rem;
margin-bottom: 10px;
text-shadow: var(--neon-glow);
background: linear-gradient(90deg, var(--cosmic-cyan), var(--cosmic-pink));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.header p {
font-size: 1.1rem;
opacity: 0.8;
}
.chat-container {
height: 500px;
overflow-y: auto;
padding: 20px;
background-color: rgba(10, 10, 42, 0.5);
scrollbar-width: thin;
scrollbar-color: var(--cosmic-purple) transparent;
}
.chat-container::-webkit-scrollbar {
width: 6px;
}
.chat-container::-webkit-scrollbar-thumb {
background-color: var(--cosmic-purple);
border-radius: 3px;
}
.message {
margin-bottom: 20px;
max-width: 80%;
animation: fadeIn 0.5s ease-out;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
.user-message {
align-self: flex-end;
background: linear-gradient(135deg, var(--cosmic-purple), var(--cosmic-blue));
padding: 15px;
border-radius: 15px 15px 5px 15px;
margin-left: auto;
box-shadow: 0 5px 15px rgba(75, 0, 130, 0.3);
}
.ai-message {
align-self: flex-start;
background: rgba(26, 26, 114, 0.6);
padding: 15px;
border-radius: 15px 15px 15px 5px;
margin-right: auto;
border: 1px solid rgba(0, 206, 209, 0.3);
box-shadow: 0 5px 15px rgba(0, 206, 209, 0.1);
position: relative;
overflow: hidden;
}
.ai-message::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(
transparent 0%,
rgba(0, 206, 209, 0.1) 50%,
transparent 100%
);
transform: translateX(-100%);
animation: scanEffect 3s linear infinite;
}
@keyframes scanEffect {
0% { transform: translateX(-100%); }
100% { transform: translateX(100%); }
}
.input-container {
display: flex;
padding: 20px;
background-color: rgba(10, 10, 42, 0.8);
border-top: 1px solid var(--cosmic-cyan);
}
#user-input {
flex: 1;
padding: 15px;
border: 1px solid var(--cosmic-cyan);
border-radius: 30px;
background-color: rgba(26, 26, 114, 0.3);
color: var(--star-white);
font-size: 1rem;
outline: none;
transition: all 0.3s ease;
}
#user-input:focus {
box-shadow: var(--neon-glow);
border-color: var(--cosmic-pink);
}
#send-button {
margin-left: 10px;
padding: 15px 30px;
border: none;
border-radius: 30px;
background: linear-gradient(90deg, var(--cosmic-cyan), var(--cosmic-pink));
color: white;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 5px 15px rgba(0, 206, 209, 0.3);
}
#send-button:hover {
transform: translateY(-2px);
box-shadow: 0 7px 20px rgba(0, 206, 209, 0.5);
}
#send-button:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.loading {
display: inline-block;
width: 20px;
height: 20px;
border: 3px solid rgba(255,255,255,.3);
border-radius: 50%;
border-top-color: white;
animation: spin 1s ease-in-out infinite;
margin-right: 10px;
}
@keyframes spin {
to { transform: rotate(360deg); }
}
.suggestions {
display: flex;
flex-wrap: wrap;
gap: 10px;
padding: 0 20px 15px;
background-color: rgba(10, 10, 42, 0.8);
}
.suggestion-tag {
padding: 8px 15px;
border: 1px solid var(--cosmic-cyan);
border-radius: 20px;
background-color: rgba(26, 26, 114, 0.3);
color: var(--star-white);
font-size: 0.9rem;
cursor: pointer;
transition: all 0.3s ease;
}
.suggestion-tag:hover {
background-color: var(--cosmic-purple);
border-color: var(--cosmic-pink);
transform: translateY(-2px);
}
@media (max-width: 768px) {
.container {
max-width: 100%;
height: 100vh;
border-radius: 0;
}
.chat-container {
height: calc(100vh - 220px);
}
.header h1 {
font-size: 2rem;
}
}
</style>
</head>
<body>
<div class="stars" id="stars"></div>
<div class="container">
<div class="header">
<h1>宇宙难题解密器</h1>
<p>探索宇宙的奥秘，解答你关于星空的所有疑问</p>
</div>
<div class="chat-container" id="chat-container">
<div class="message ai-message">
<p>你好！我是宇宙难题解密器，一个专注于解答宇宙奥秘的AI助手。你可以问我任何关于宇宙、星系、黑洞、行星或太空探索的问题。我会尽力为你提供准确而有趣的答案！</p>
</div>
</div>
<div class="suggestions">
<div class="suggestion-tag" data-question="黑洞是什么？它们是如何形成的？">黑洞是什么？</div>
<div class="suggestion-tag" data-question="宇宙大爆炸理论是什么？有什么证据支持它？">宇宙大爆炸</div>
<div class="suggestion-tag" data-question="暗物质和暗能量是什么？它们如何影响宇宙？">暗物质和暗能量</div>
<div class="suggestion-tag" data-question="我们如何寻找系外行星？已经发现了多少？">系外行星</div>
</div>
<div class="input-container">
<input type="text" id="user-input" placeholder="输入你的宇宙问题...">
<button id="send-button">发送</button>
</div>
</div>
<script>
// DOM元素
const chatContainer = document.getElementById('chat-container');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');
const suggestionTags = document.querySelectorAll('.suggestion-tag');
// 创建星空背景
function createStars() {
const starsContainer = document.getElementById('stars');
const starCount = 150;
for (let i = 0; i < starCount; i++) {
const star = document.createElement('div');
star.classList.add('star');
star.style.left = `${Math.random() * 100}%`;
star.style.top = `${Math.random() * 100}%`;
star.style.width = `${Math.random() * 3 + 1}px`;
star.style.height = `${Math.random() * 3 + 1}px`;
star.style.animationDelay = `${Math.random() * 5}s`;
starsContainer.appendChild(star);
}
}
// 添加消息到聊天窗口
function addMessage(content, isUser = false) {
const messageDiv = document.createElement('div');
messageDiv.classList.add('message');
messageDiv.classList.add(isUser ? 'user-message' : 'ai-message');
// 直接使用 innerHTML 以支持格式化
messageDiv.innerHTML = `<p>${formatContent(content)}</p>`;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
return messageDiv;
}
// 格式化内容，简单处理换行和加粗
function formatContent(content) {
if (!content) return '';
return content
.replace(/\n/g, '<br>')
.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
}
// AIAgent System 约束配置（核心新增）
const SYSTEM_PROMPT = `
你是宇宙难题解密器，一个专业的宇宙科学AI助手，必须严格遵守以下规则：
1. 身份定位：你是专注于宇宙科学的专家，精通天文学、天体物理学、宇宙学等领域知识。
2. 回答范围：只回答与宇宙相关的问题（包括但不限于星系、黑洞、行星、恒星、宇宙起源、太空探索、暗物质、暗能量等）。
3. 回答风格：
- 专业准确：基于最新的科学研究和观测数据，避免错误信息
- 通俗易懂：用简单明了的语言解释复杂概念，避免过多专业术语堆砌
- 结构清晰：重要内容分点说明，关键信息突出
- 生动有趣：适当加入有趣的科学事实或最新发现，提升可读性
4. 特殊处理：
- 非宇宙相关问题：礼貌拒绝并引导用户提问宇宙相关话题
- 未知问题：坦诚说明目前科学上尚未有明确答案，并解释当前研究进展
- 争议性问题：客观呈现不同学术观点，不偏袒任何一方
5. 格式要求：不使用任何markdown标记，纯文本自然呈现，适当分段提高可读性。
`.trim();
// 发送消息并处理流式响应
async function sendMessage() {
const message = userInput.value.trim();
if (!message) return;
// 添加用户消息
addMessage(message, true);
userInput.value = '';
// 添加AI正在输入的消息
const aiMessageDiv = addMessage('');
const aiMessageP = aiMessageDiv.querySelector('p');
// 禁用按钮并显示加载状态
sendButton.disabled = true;
sendButton.innerHTML = '<div class="loading"></div>思考中...';
// API配置
const API_URL = "https://api.gitcode.com/api/v5/chat/completions";
const API_KEY = "KC9yewXtgfgQ9A9UriJKzAdh";
try {
const response = await fetch(API_URL, {
method: 'POST',
headers: {
"Authorization": `Bearer ${API_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"messages": [
// 新增：System 约束消息（放在最前面，优先级最高）
{ "role": "system", "content": SYSTEM_PROMPT },
// 用户消息
{ "role": "user", "content": message }
],
"model": "hf_mirrors/deepseek-ai/DeepSeek-V3.1-Base",
"stream": true,
"max_tokens": 4096,
"temperature": 0.6
})
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error?.message || '请求失败，请稍后重试。');
}
if (!response.body) {
throw new Error('浏览器不支持流式响应。');
}
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let partialData = '';
let fullContent = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
partialData += decoder.decode(value, { stream: true });
const lines = partialData.split('\n');
// 处理所有完整的行
for (let i = 0; i < lines.length - 1; i++) {
const line = lines[i].trim();
if (!line) continue;
if (line.startsWith('data:')) {
const dataPart = line.substring(5).trim();
if (dataPart === '[DONE]') continue;
try {
const data = JSON.parse(dataPart);
const deltaContent = data.choices?.[0]?.delta?.content || '';
if (deltaContent) {
fullContent += deltaContent;
// 实时更新消息内容
aiMessageP.innerHTML = formatContent(fullContent);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
} catch (e) {
console.error('解析流式数据失败:', e);
}
}
}
// 保留最后一行不完整的数据
partialData = lines[lines.length - 1];
}
} catch (error) {
console.error('请求出错:', error);
aiMessageP.innerHTML = `<strong>❌ 发生错误:</strong> ${error.message}`;
} finally {
// 恢复按钮状态
sendButton.disabled = false;
sendButton.innerHTML = '发送';
}
}
// 事件绑定
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') sendMessage();
});
suggestionTags.forEach(tag => {
tag.addEventListener('click', () => {
userInput.value = tag.getAttribute('data-question');
sendMessage();
});
});
// 页面加载完成后初始化
window.addEventListener('load', () => {
createStars();
userInput.focus();
});
</script>
</body>
</html>实际效果：
如果出现AI问题的解决方案：
复制上方可运行的正确代码，并输入一下的问题。
保障完整的样式与AIAgent内容不变，参考这段可以正常运行的代码修正无法正常访问API的问题。
7、升级AI应用——赛道二——深入代码编辑版本
赛道二的要求是：
赛道描述： 聚焦效率、爱好与创意。利用 AI 的能力，将你的“奇思妙想”变成现实，或为你热爱的领域（如游戏、音乐、设计）开发一个应用。
示例（供参考）：
剧本杀 DM 助手： 输入几个关键词，AI 自动生成一个悬疑故事背景和角色线索，辅助 DM（主持人）推进游戏。
“小巧思”应用： 比如一个“今天吃什么”的智能选择器（结合食堂菜单和天气），或者一个“AI 穿搭建议”工具。
示例AI问题：
请根据这段代码改写成html+js的写法，都写到html当中，我要以【java语言的关键词连连看AI游戏应用】为主体改写成一个HTML版本的AI应用，需要有对应的输入框与流式回答框，并且对应样式要符合主题。
应用流程：
1、完成基础的连连看游戏功能
2、可以设定连连看的难度，根据提示词的数量来确定难度，使用一个下拉菜单进行选择。
3、每一局的时间为1分钟，1分钟后给出得分结果。
4、保障AI提问的接口正确访问
基础要求：
1、不能使用国外的css或js连接，会影响请求。
2、要合理的修改content，让其能充分的展示主题AIAgent的特性，添加对应AIAgent的system约束。
3、我要以html的方式来展示返回的数据信息，可以适当润色格式，不要显示有关markdown的样式(类似**--这种)。
4、要保障请求与对应的秘钥正确性，保障可以访问接口并以流式的方式遍历结果。
import os
import requests
import json
API_URL = "https://api.gitcode.com/api/v5/chat/completions"
headers = {
"Authorization": f"Bearer KC9yewXtgfgQ9A9UriJKzAdh",
}
def query(payload):
response = requests.post(API_URL, headers=headers, json=payload, stream=True)
for line in response.iter_lines():
if not line.startswith(b"data:"):
continue
if line.strip() == b"data:[DONE]":
return
yield json.loads(line.decode("utf-8").lstrip("data:").rstrip("/n"))
chunks = query({
"messages": [
{
"role": "user",
"content": "告诉我一个有关宇宙的有趣事实？"
}
],
"model": "hf_mirrors/deepseek-ai/DeepSeek-V3.1-Base",
"stream": True,
"max_tokens": 4096,
"temperature": 0.6,
"top_p": 0.95,
"top_k": 50,
"frequency_penalty": 0,
"thinking_budget": 32768
})
for chunk in chunks:
print(chunk["choices"][0]["delta"]["content"], end="")AI提问操作：
代码结果：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Java关键词连连看 AI 游戏</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Microsoft YaHei', 'PingFang SC', Arial, sans-serif;
background: linear-gradient(135deg, #1e3c72 0%, #2a5298 50%, #1e3c72 100%);
min-height: 100vh;
padding: 20px;
color: #333;
}
.container {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr 400px;
gap: 20px;
}
/* 游戏区域样式 */
.game-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
}
.game-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #2a5298;
}
.game-title {
font-size: 28px;
font-weight: bold;
color: #2a5298;
display: flex;
align-items: center;
gap: 10px;
}
.game-title::before {
content: '☕';
font-size: 32px;
}
.game-controls {
display: flex;
gap: 15px;
align-items: center;
}
.difficulty-select {
padding: 8px 15px;
border: 2px solid #2a5298;
border-radius: 8px;
font-size: 14px;
background: white;
color: #2a5298;
cursor: pointer;
}
.timer {
font-size: 24px;
font-weight: bold;
color: #e74c3c;
padding: 8px 15px;
background: #fff3cd;
border-radius: 8px;
min-width: 100px;
text-align: center;
}
.score {
font-size: 20px;
font-weight: bold;
color: #27ae60;
padding: 8px 15px;
background: #d4edda;
border-radius: 8px;
}
.game-board {
display: grid;
gap: 10px;
padding: 20px;
background: #f8f9fa;
border-radius: 10px;
margin-bottom: 20px;
}
.game-card {
aspect-ratio: 1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 3px solid #2a5298;
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
font-size: 14px;
font-weight: bold;
color: white;
cursor: pointer;
transition: all 0.3s;
position: relative;
overflow: hidden;
}
.game-card::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
transition: left 0.5s;
}
.game-card:hover::before {
left: 100%;
}
.game-card:hover {
transform: scale(1.05);
box-shadow: 0 5px 15px rgba(42, 82, 152, 0.4);
}
.game-card.selected {
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
border-color: #e74c3c;
transform: scale(1.1);
box-shadow: 0 0 20px rgba(231, 76, 60, 0.6);
}
.game-card.matched {
opacity: 0.3;
cursor: default;
pointer-events: none;
}
.game-card.flipped {
background: linear-gradient(135deg, #4facfe 0%, #00f2fe 100%);
}
.start-btn, .restart-btn {
padding: 12px 30px;
background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 16px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
box-shadow: 0 4px 15px rgba(42, 82, 152, 0.3);
}
.start-btn:hover, .restart-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(42, 82, 152, 0.5);
}
.start-btn:disabled, .restart-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
transform: none;
}
/* AI问答区域样式 */
.ai-section {
background: rgba(255, 255, 255, 0.95);
border-radius: 15px;
padding: 25px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
display: flex;
flex-direction: column;
height: fit-content;
max-height: calc(100vh - 40px);
}
.ai-header {
font-size: 24px;
font-weight: bold;
color: #2a5298;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid #2a5298;
display: flex;
align-items: center;
gap: 10px;
}
.ai-header::before {
content: '🤖';
font-size: 28px;
}
.ai-chat {
flex: 1;
overflow-y: auto;
margin-bottom: 20px;
padding: 15px;
background: #f8f9fa;
border-radius: 10px;
min-height: 300px;
max-height: 500px;
}
.ai-message {
margin-bottom: 15px;
padding: 12px;
background: white;
border-radius: 8px;
border-left: 4px solid #2a5298;
line-height: 1.6;
}
.user-message {
margin-bottom: 15px;
padding: 12px;
background: #e3f2fd;
border-radius: 8px;
border-left: 4px solid #2196f3;
text-align: right;
}
.ai-input-area {
display: flex;
gap: 10px;
}
.ai-input {
flex: 1;
padding: 12px;
border: 2px solid #2a5298;
border-radius: 8px;
font-size: 14px;
outline: none;
}
.ai-input:focus {
border-color: #1e3c72;
box-shadow: 0 0 10px rgba(42, 82, 152, 0.2);
}
.send-btn {
padding: 12px 25px;
background: linear-gradient(135deg, #2a5298 0%, #1e3c72 100%);
color: white;
border: none;
border-radius: 8px;
font-size: 14px;
font-weight: bold;
cursor: pointer;
transition: all 0.3s;
}
.send-btn:hover:not(:disabled) {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(42, 82, 152, 0.4);
}
.send-btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.loading {
display: inline-block;
width: 16px;
height: 16px;
border: 3px solid rgba(42, 82, 152, 0.3);
border-top: 3px solid #2a5298;
border-radius: 50%;
animation: spin 1s linear infinite;
margin-right: 8px;
vertical-align: middle;
}
@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}
.game-result {
margin-top: 20px;
padding: 20px;
background: #fff3cd;
border-radius: 10px;
text-align: center;
display: none;
}
.game-result.show {
display: block;
}
.result-title {
font-size: 24px;
font-weight: bold;
color: #856404;
margin-bottom: 10px;
}
.result-score {
font-size: 32px;
font-weight: bold;
color: #27ae60;
margin: 10px 0;
}
@media (max-width: 1200px) {
.container {
grid-template-columns: 1fr;
}
}
</style>
</head>
<body>
<div class="container">
<!-- 游戏区域 -->
<div class="game-section">
<div class="game-header">
<div class="game-title">Java关键词连连看</div>
<div class="game-controls">
<select id="difficulty" class="difficulty-select">
<option value="easy">简单 (6对)</option>
<option value="medium" selected>中等 (8对)</option>
<option value="hard">困难 (10对)</option>
</select>
<div class="timer" id="timer">01:00</div>
<div class="score">得分: <span id="score">0</span></div>
</div>
</div>
<div id="gameBoard" class="game-board"></div>
<div style="text-align: center;">
<button id="startBtn" class="start-btn">开始游戏</button>
<button id="restartBtn" class="restart-btn" style="display: none; margin-left: 10px;">重新开始</button>
</div>
<div id="gameResult" class="game-result">
<div class="result-title">游戏结束！</div>
<div class="result-score">最终得分: <span id="finalScore">0</span></div>
<div style="margin-top: 15px; color: #856404;">
恭喜完成游戏！可以继续向AI提问Java相关问题。
</div>
</div>
</div>
<!-- AI问答区域 -->
<div class="ai-section">
<div class="ai-header">Java AI 助手</div>
<div class="ai-chat" id="aiChat">
<div class="ai-message">
你好！我是你的 Java 编程助手。在玩连连看的同时，有任何关于 Java 关键词或编程的问题，都可以问我。
</div>
</div>
<div class="ai-input-area">
<input type="text" id="aiInput" class="ai-input" placeholder="输入你的问题..." />
<button id="sendBtn" class="send-btn">发送</button>
</div>
</div>
</div>
<script>
// API 配置
const API_URL = "https://api.gitcode.com/api/v5/chat/completions";
const API_KEY = "KC9yewXtgfgQ9A9UriJKzAdh";
// System Prompt - Java AI Agent 约束
const SYSTEM_PROMPT = `你是 Java 编程专家 AI 助手，专门帮助用户学习和理解 Java 编程语言。请严格遵守以下规则：
1. 身份定位：你是专业的 Java 编程导师，精通 Java 语言的所有特性、关键词、API 和最佳实践。
2. 回答范围：专注于 Java 编程相关问题，包括但不限于：
- Java 关键词解释（如 final, static, abstract, interface 等）
- Java 语法和特性
- 面向对象编程概念
- 集合框架、多线程、IO 等核心 API
- 编程最佳实践和设计模式
3. 回答风格：
- 专业准确：基于 Java 官方文档和最佳实践
- 通俗易懂：用简单明了的语言解释复杂概念
- 结构清晰：重要内容分点说明
- 实用性强：提供代码示例和实际应用场景
4. 格式要求：
- 不使用任何 markdown 标记（如 **、##、等）
- 使用纯文本自然呈现
- 适当分段提高可读性
- 代码示例用清晰的缩进和换行展示
5. 特殊处理：
- 非 Java 相关问题：礼貌引导用户提问 Java 相关话题
- 复杂问题：分步骤详细解释
- 代码问题：提供可运行的代码示例和解释`;
// Java 关键词列表
const JAVA_KEYWORDS = [
'abstract', 'assert', 'boolean', 'break', 'byte', 'case', 'catch', 'char',
'class', 'const', 'continue', 'default', 'do', 'double', 'else', 'enum',
'extends', 'final', 'finally', 'float', 'for', 'if', 'implements', 'import',
'instanceof', 'int', 'interface', 'long', 'native', 'new', 'package', 'private',
'protected', 'public', 'return', 'short', 'static', 'strictfp', 'super', 'switch',
'synchronized', 'this', 'throw', 'throws', 'transient', 'try', 'void', 'volatile', 'while'
];
// 游戏状态
let gameState = {
cards: [],
selectedCards: [],
matchedPairs: 0,
totalPairs: 0,
isPlaying: false,
timer: null,
timeLeft: 60,
score: 0,
difficulty: 'medium'
};
// DOM 元素
const gameBoard = document.getElementById('gameBoard');
const startBtn = document.getElementById('startBtn');
const restartBtn = document.getElementById('restartBtn');
const difficultySelect = document.getElementById('difficulty');
const timerDisplay = document.getElementById('timer');
const scoreDisplay = document.getElementById('score');
const gameResult = document.getElementById('gameResult');
const finalScoreDisplay = document.getElementById('finalScore');
const aiChat = document.getElementById('aiChat');
const aiInput = document.getElementById('aiInput');
const sendBtn = document.getElementById('sendBtn');
// 难度配置
const difficultyConfig = {
easy: { pairs: 6, gridCols: 4 },
medium: { pairs: 8, gridCols: 4 },
hard: { pairs: 10, gridCols: 5 }
};
// 初始化游戏
function initGame() {
const config = difficultyConfig[gameState.difficulty];
gameState.totalPairs = config.pairs;
gameState.matchedPairs = 0;
gameState.selectedCards = [];
gameState.score = 0;
gameState.timeLeft = 60;
// 生成卡片
const keywords = JAVA_KEYWORDS.slice(0, config.pairs * 2);
const shuffled = shuffleArray([...keywords, ...keywords]);
gameState.cards = shuffled.map((keyword, index) => ({
id: index,
keyword: keyword,
flipped: false,
matched: false
}));
renderGameBoard();
updateScore();
}
// 渲染游戏板
function renderGameBoard() {
const config = difficultyConfig[gameState.difficulty];
gameBoard.style.gridTemplateColumns = `repeat(${config.gridCols}, 1fr)`;
gameBoard.innerHTML = '';
gameState.cards.forEach(card => {
const cardElement = document.createElement('div');
cardElement.className = 'game-card';
cardElement.textContent = card.flipped ? card.keyword : '?';
cardElement.dataset.id = card.id;
if (card.matched) {
cardElement.classList.add('matched');
} else if (card.flipped) {
cardElement.classList.add('flipped');
}
if (gameState.selectedCards.includes(card.id)) {
cardElement.classList.add('selected');
}
cardElement.addEventListener('click', () => handleCardClick(card.id));
gameBoard.appendChild(cardElement);
});
}
// 处理卡片点击
function handleCardClick(cardId) {
if (!gameState.isPlaying) return;
const card = gameState.cards.find(c => c.id === cardId);
if (!card || card.flipped || card.matched) return;
if (gameState.selectedCards.length >= 2) return;
card.flipped = true;
gameState.selectedCards.push(cardId);
renderGameBoard();
if (gameState.selectedCards.length === 2) {
setTimeout(checkMatch, 500);
}
}
// 检查匹配
function checkMatch() {
const [id1, id2] = gameState.selectedCards;
const card1 = gameState.cards.find(c => c.id === id1);
const card2 = gameState.cards.find(c => c.id === id2);
if (card1.keyword === card2.keyword) {
card1.matched = true;
card2.matched = true;
gameState.matchedPairs++;
gameState.score += 10;
updateScore();
if (gameState.matchedPairs === gameState.totalPairs) {
endGame(true);
}
} else {
card1.flipped = false;
card2.flipped = false;
}
gameState.selectedCards = [];
renderGameBoard();
}
// 开始游戏
function startGame() {
gameState.difficulty = difficultySelect.value;
initGame();
gameState.isPlaying = true;
startBtn.disabled = true;
restartBtn.style.display = 'none';
gameResult.classList.remove('show');
difficultySelect.disabled = true;
// 开始计时
gameState.timer = setInterval(() => {
gameState.timeLeft--;
updateTimer();
if (gameState.timeLeft <= 0) {
endGame(false);
}
}, 1000);
}
// 结束游戏
function endGame(isWin) {
gameState.isPlaying = false;
clearInterval(gameState.timer);
startBtn.disabled = false;
restartBtn.style.display = 'inline-block';
difficultySelect.disabled = false;
finalScoreDisplay.textContent = gameState.score;
gameResult.classList.add('show');
}
// 更新计时器
function updateTimer() {
const minutes = Math.floor(gameState.timeLeft / 60);
const seconds = gameState.timeLeft % 60;
timerDisplay.textContent = `${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}
// 更新分数
function updateScore() {
scoreDisplay.textContent = gameState.score;
}
// 工具函数：打乱数组
function shuffleArray(array) {
const shuffled = [...array];
for (let i = shuffled.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
}
return shuffled;
}
// AI 问答功能
async function sendMessage() {
const message = aiInput.value.trim();
if (!message) return;
// 添加用户消息
addChatMessage(message, 'user');
aiInput.value = '';
sendBtn.disabled = true;
sendBtn.innerHTML = '<span class="loading"></span>发送中...';
// 添加AI消息占位符
const aiMessageDiv = addChatMessage('', 'ai');
const aiMessageP = aiMessageDiv.querySelector('p') || aiMessageDiv;
try {
const response = await fetch(API_URL, {
method: 'POST',
headers: {
"Authorization": `Bearer ${API_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"messages": [
{ "role": "system", "content": SYSTEM_PROMPT },
{ "role": "user", "content": message }
],
"model": "hf_mirrors/deepseek-ai/DeepSeek-V3.1-Base",
"stream": true,
"max_tokens": 4096,
"temperature": 0.6
})
});
if (!response.ok) {
const errorData = await response.json();
throw new Error(errorData.error?.message || '请求失败，请稍后重试。');
}
if (!response.body) {
throw new Error('浏览器不支持流式响应。');
}
const reader = response.body.getReader();
const decoder = new TextDecoder('utf-8');
let partialData = '';
let fullContent = '';
while (true) {
const { done, value } = await reader.read();
if (done) break;
partialData += decoder.decode(value, { stream: true });
const lines = partialData.split('\n');
for (let i = 0; i < lines.length - 1; i++) {
const line = lines[i].trim();
if (!line) continue;
if (line.startsWith('data:')) {
const dataPart = line.substring(5).trim();
if (dataPart === '[DONE]') continue;
try {
const data = JSON.parse(dataPart);
const deltaContent = data.choices?.[0]?.delta?.content || '';
if (deltaContent) {
fullContent += deltaContent;
// 移除 markdown 标记
const cleanContent = fullContent
.replace(/\*\*(.*?)\*\*/g, '$1')
.replace(/\*(.*?)\*/g, '$1')
.replace(/##\s*(.*?)(?:\n|$)/g, '$1\n')
.replace(/#\s*(.*?)(?:\n|$)/g, '$1\n')
.replace(/```[\s\S]*?```/g, '')
.replace(/`([^`]+)`/g, '$1');
aiMessageP.textContent = cleanContent;
aiChat.scrollTop = aiChat.scrollHeight;
}
} catch (e) {
console.error('解析流式数据失败:', e);
}
}
}
partialData = lines[lines.length - 1];
}
} catch (error) {
console.error('请求失败:', error);
aiMessageP.textContent = `错误: ${error.message}`;
} finally {
sendBtn.disabled = false;
sendBtn.textContent = '发送';
}
}
// 添加聊天消息
function addChatMessage(content, type) {
const messageDiv = document.createElement('div');
messageDiv.className = type === 'user' ? 'user-message' : 'ai-message';
const p = document.createElement('p');
p.textContent = content;
messageDiv.appendChild(p);
aiChat.appendChild(messageDiv);
aiChat.scrollTop = aiChat.scrollHeight;
return messageDiv;
}
// 事件监听
startBtn.addEventListener('click', startGame);
restartBtn.addEventListener('click', () => {
gameResult.classList.remove('show');
startGame();
});
sendBtn.addEventListener('click', sendMessage);
aiInput.addEventListener('keypress', (e) => {
if (e.key === 'Enter') {
sendMessage();
}
});
// 初始化
updateTimer();
</script>
</body>
</html>
实际效果：
如果出现AI问题的解决方案：
复制上方可运行的正确代码，并输入一下的问题。
保障完整的样式与AIAgent内容不变，参考这段可以正常运行的代码修正无法正常访问API的问题。
8、视频录制
随便下载一个录屏工具，录制1~3分钟的视频演示即可。
录制操作，点击操作即可。最后点开视频所在位置。
准备上传到CSDN
9、上传地址
上传地址：https://mp.csdn.net/mp_others/creation/videoUpload
直接点击上传：
上传完毕后，下拉填写一些基础内容，最后点击上传。
10、获取视频链接
这里是可以直接点开的。
复制地址：
11、进入项目组
邀请人: 红目香薰@feng8403000，邀请您成为 GitCode 组织 维护者
邀请链接: https://gitcode.com/invite/link/48219490409541f0bdd8
过期时间: 2025-11-24
本链接已设置无需审核加入，请谨慎传播！
打开后会默认加入到组织：
12、上传项目
回到项目中，直接进入到作品管理，我们能看到给我直接创建了个项目，直接点击进入项目即可。
可执行方案1、上传HTML文件操作：
可执行方案2、创建index.html文件
创建新文件，然后准备上传代码，改文件名即可。
改名字，粘代码，提交：
修改readme.md文件
Ai先生成readme说明。
请根据这段代码返回一段md的readme说明代码，需要可以复制的md代码。
复制代码后修改即可。
必要操作：同步项目到组织
1、点击项目设置与转移项目
2、同步到学习组织
13、创建提交
我们需要在比赛的作品管理中创建提交，并填写自己的：姓名、班级、作品名、演示视频地址。
通过这些信息来找到中奖的你。
提交完毕后等着出结果就行了。
总结
完整的操作完毕了，等着27号上午联系你就行了。
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
15
0- 0
已为社区贡献42条内容
所有评论(0)