-
Notifications
You must be signed in to change notification settings - Fork 1
/
module.html
147 lines (129 loc) · 4.78 KB
/
module.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>AgentSquare - Task Specific Modules</title>
<link rel="icon" href="static/img/icon/logo.jpg" type="static/image/icon type">
<link rel="stylesheet" href="static/css/main.css">
<link rel="stylesheet" href="static/css/nav.css">
<style>
/* 简单的样式设置 */
.btn-group {
text-align: center;
margin: 20px 0;
}
/* 修改按钮样式 */
.btn-group button {
background-color: #fff;
border: 2px solid #000;
border-radius: 10px;
color: black;
padding: 10px 20px;
cursor: pointer;
margin: 5px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: bold;
font-family: sans-serif;
}
.btn-group button:hover {
background-color: #f0f0f0;
}
.module-display {
display: none; /* 初始状态下不显示 */
text-align: center;
margin: 20px 0;
}
.module-display img {
max-width: 100%;
height: auto;
margin: 10px 0;
}
</style>
</head>
<body>
<div id="nav">
<div id="icon">
<img src="static/img/icon/logo.jpg" id="nav-icon" alt="AgentSquare">
<a class="nav-button-main" href="index.html"
style="margin-left: 2px; font-size: 22px">AgentSquare
</a>
</div>
<div>
<a class="nav-button" href="index.html">
<img src="static/img/icon/home_icon.png" alt="Home">Home</a>
<a class="nav-button" href="module.html">
<img src="static/img/icon/data_icon.png" alt="New Module">New Module</a>
</div>
</div>
<div class="main-body">
<br><br>
<div class="section">
<h2 style="margin-top: 75px">Task-specific new modules</h2>
<p style="line-height: 150%; margin-left: 50px">
This section shows the details of the new modules that AgentSquare searches for when performing better on a specific task.<br>
Use the following buttons to filter by task and explore the new modules.
</p>
</div>
</div>
<!-- Filter by Task -->
<div class="btn-group">
<button onclick="showModules('Webshop')">Webshop</button>
<button onclick="showModules('ALFWorld')">ALFWorld</button>
<button onclick="showModules('SciWorld')">SciWorld</button>
<button onclick="showModules('M3Tool')">M3Tool</button>
<button onclick="showModules('TravelPlanner')">TravelPlanner</button>
<button onclick="showModules('PDDL')">PDDL</button>
</div>
<!-- 模块显示区域 -->
<div id="Webshop" class="module-display">
<h3>Webshop New Modules</h3>
<img src="static/img/Webshop.jpg" alt="HTSS" style="width: 600px">
<!-- <img src="static/img/moduleB_webshop.png" alt="Module B"> -->
</div>
<div id="ALFWorld" class="module-display">
<h3>ALFWorld New Modules</h3>
<img src="static/img/ALFWorld_1.jpg" alt="TD" style="width: 600px; vertical-align: top">
<img src="static/img/ALFWorld_2.jpg" alt="SF-ToT" style="width: 600px; vertical-align: top">
</div>
<div id="SciWorld" class="module-display">
<h3>SciWorld New Modules</h3>
<img src="static/img/Sciworld.jpg" alt="Hier" style="width: 600px">
<!-- <img src="static/img/moduleB_sciworld.png" alt="Module B"> -->
</div>
<div id="M3Tool" class="module-display">
<h3>M3Tool New Modules</h3>
<img src="static/img/M3Tool.jpg" alt="ToolBF" style="width: 600px">
</div>
<div id="TravelPlanner" class="module-display">
<h3>TravelPlanner New Modules</h3>
<img src="static/img/TravelPlanner.jpg" alt="TH" style="width: 600px">
<!-- <img src="static/img/moduleB_travelplanner.png" alt="Module B"> -->
</div>
<div id="PDDL" class="module-display">
<h3>PDDL New Modules</h3>
<img src="static/img/PDDL_1.jpg" alt="IR" style="width: 600px; vertical-align: top">
<img src="static/img/PDDL_2.jpg" alt="CASRC" style="width: 600px; vertical-align: top">
</div>
<script>
// JavaScript 函数用于切换显示模块
function showModules(task) {
// 隐藏所有模块
const modules = document.getElementsByClassName('module-display');
for (let i = 0; i < modules.length; i++) {
modules[i].style.display = 'none';
}
// 显示选中的模块
document.getElementById(task).style.display = 'block';
}
// 默认显示 Webshop 模块
document.addEventListener('DOMContentLoaded', function () {
showModules('Webshop');
});
</script>
</body>
</html>