File size: 22,144 Bytes
3d32e4b |
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 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 285 286 287 288 289 290 291 292 293 294 295 296 297 298 299 300 301 302 303 304 305 306 307 308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 367 368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 386 387 388 389 390 391 392 393 394 395 396 397 398 399 400 401 402 403 404 405 406 407 408 409 410 411 412 413 414 415 416 417 418 419 420 421 422 423 424 425 426 427 428 429 430 431 432 |
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>智能AI开发平台</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/4.3.0/marked.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/3.2.0/es5/tex-mml-chtml.min.js"></script>
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4361ee',
secondary: '#3a0ca3',
accent: '#7209b7',
highlight: '#f72585'
}
}
}
}
</script>
<style>
.hero-pattern {
background-color: #eef1ff;
background-image: radial-gradient(#4361ee 1px, transparent 1px);
background-size: 30px 30px;
}
.upload-area {
transition: all 0.3s ease;
}
.upload-area.dragover {
transform: scale(1.02);
box-shadow: 0 0 20px rgba(67, 97, 238, 0.4);
}
.result-container {
min-height: 200px;
transition: height 0.3s ease;
}
.lds-ripple {
display: inline-block;
position: relative;
width: 80px;
height: 80px;
}
.lds-ripple div {
position: absolute;
border: 4px solid #3a0ca3;
opacity: 1;
border-radius: 50%;
animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.lds-ripple div:nth-child(2) {
animation-delay: -0.5s;
}
@keyframes lds-ripple {
0% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
4.9% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 0;
}
5% {
top: 36px;
left: 36px;
width: 0;
height: 0;
opacity: 1;
}
100% {
top: 0;
left: 0;
width: 72px;
height: 72px;
opacity: 0;
}
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
<!-- 导航栏 -->
<nav class="bg-white shadow-md py-4 px-6 flex justify-between items-center">
<div class="flex items-center">
<i class="fas fa-brain text-primary text-3xl mr-2"></i>
<h1 class="text-2xl font-bold text-gray-800">智能AI开发平台</h1>
</div>
<div class="hidden md:flex space-x-6">
<a href="#" class="font-medium hover:text-primary transition">首页</a>
<a href="#" class="font-medium hover:text-primary transition">产品介绍</a>
<a href="#" class="font-medium hover:text-primary transition">文档中心</a>
<a href="#" class="font-medium hover:text-primary transition">技术支持</a>
</div>
<div>
<button class="px-4 py-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white font-medium hover:opacity-90 transition">控制台</button>
</div>
</nav>
<!-- 英雄区域 -->
<section class="hero-pattern py-16 px-4 md:px-0">
<div class="max-w-7xl mx-auto text-center">
<h1 class="text-4xl md:text-6xl font-bold text-gray-800 leading-tight">
赋能开发者的 <span class="text-primary">AI引擎</span>
</h1>
<p class="mt-6 text-xl text-gray-600 max-w-3xl mx-auto">
提供强大AI能力，帮助开发者快速构建智能应用
</p>
<div class="mt-8 flex justify-center gap-4">
<button class="px-8 py-3 bg-primary text-white rounded-full font-medium hover:bg-opacity-90 transition">
立即体验
</button>
<button class="px-8 py-3 border-2 border-primary text-primary rounded-full font-medium hover:bg-gray-50 transition">
查看文档
</button>
</div>
</div>
</section>
<!-- 核心能力 -->
<section class="py-16 px-4 md:px-8">
<div class="max-w-7xl mx-auto">
<div class="text-center mb-16">
<h2 class="text-3xl font-bold text-gray-800">核心开发能力</h2>
<p class="mt-4 text-gray-600 max-w-2xl mx-auto">
我们提供三大核心AI能力，覆盖多种应用场景，帮助开发者快速实现智能化升级
</p>
</div>
<div class="grid md:grid-cols-3 gap-8">
<!-- 拍照解题 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition transform hover:-translate-y-2">
<div class="p-6">
<div class="w-16 h-16 bg-blue-100 rounded-lg flex items-center justify-center text-primary text-2xl">
<i class="fas fa-calculator"></i>
</div>
<h3 class="mt-4 text-xl font-bold text-gray-800">拍照解题</h3>
<p class="mt-2 text-gray-600">
上传题目照片，智能识别并分步解答数学、物理等题目，给出详细解题过程。
</p>
</div>
<div class="px-6 py-4 bg-gray-50">
<button onclick="openSection('analysis-page')" class="w-full py-3 text-center rounded-lg bg-gradient-to-r from-blue-500 to-primary text-white font-medium hover:opacity-90 transition">
立即体验
</button>
</div>
</div>
<!-- 拍照生成类题 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition transform hover:-translate-y-2">
<div class="p-6">
<div class="w-16 h-16 bg-purple-100 rounded-lg flex items-center justify-center text-accent text-2xl">
<i class="fas fa-clone"></i>
</div>
<h3 class="mt-4 text-xl font-bold text-gray-800">拍照生成类题</h3>
<p class="mt-2 text-gray-600">
根据上传题目照片，智能生成相似题目，帮助巩固知识点，提升学习效率。
</p>
</div>
<div class="px-6 py-4 bg-gray-50">
<button onclick="openSection('generate-page')" class="w-full py-3 text-center rounded-lg bg-gradient-to-r from-purple-500 to-accent text-white font-medium hover:opacity-90 transition">
立即体验
</button>
</div>
</div>
<!-- 手写文字识别 -->
<div class="bg-white rounded-xl shadow-lg overflow-hidden transition transform hover:-translate-y-2">
<div class="p-6">
<div class="w-16 h-16 bg-pink-100 rounded-lg flex items-center justify-center text-highlight text-2xl">
<i class="fas fa-pen-alt"></i>
</div>
<h3 class="mt-4 text-xl font-bold text-gray-800">手写文字识别</h3>
<p class="mt-2 text-gray-600">
准确识别手写文字内容，支持多行、复杂公式识别，并能解析坐标位置。
</p>
</div>
<div class="px-6 py-4 bg-gray-50">
<button onclick="openSection('ocr-page')" class="w-full py-3 text-center rounded-lg bg-gradient-to-r from-pink-500 to-highlight text-white font-medium hover:opacity-90 transition">
立即体验
</button>
</div>
</div>
</div>
</div>
</section>
<!-- 拍照解题体验页面 -->
<section id="analysis-page" class="py-16 px-4 hidden bg-gray-50">
<div class="max-w-4xl mx-auto">
<div class="flex items-center mb-8">
<button onclick="returnToHome()" class="mr-4 p-2 rounded-full hover:bg-gray-200 transition">
<i class="fas fa-arrow-left"></i>
</button>
<h2 class="text-3xl font-bold text-gray-800">拍照解题</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl p-6 shadow-md">
<h3 class="text-xl font-semibold mb-4">功能介绍</h3>
<p class="text-gray-600 mb-4">
上传题目照片，AI将自动识别题目内容，并提供详细解题过程和答案分析。
</p>
<ul class="text-gray-600 space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>支持数学、物理等多种题型识别</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>提供分步解题过程和关键点分析</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-green-500 mt-1 mr-2"></i>
<span>支持公式渲染与可视化解答</span>
</li>
</ul>
<div
id="analysis-upload"
class="upload-area border-2 border-dashed rounded-xl p-8 text-center cursor-pointer hover:bg-blue-50 transition"
ondragover="handleDragOver(event)"
ondragleave="handleDragLeave(event)"
ondrop="handleDrop(event, 'analysis')"
>
<i class="fas fa-cloud-upload-alt text-4xl text-blue-400 mb-3"></i>
<p class="font-medium text-gray-700 mb-2">点击或拖拽图片至此处上传</p>
<p class="text-sm text-gray-500">支持JPG、PNG格式，最大5MB</p>
<input
type="file"
id="analysis-file"
class="hidden"
accept="image/*"
onchange="handleImageUpload(event, 'analysis')"
>
</div>
<div class="mt-4">
<button
onclick="processImage('analysis')"
id="analysis-btn"
class="w-full py-3 rounded-lg bg-gradient-to-r from-blue-500 to-primary text-white font-medium hover:opacity-90 transition disabled:opacity-50"
disabled
>
分析题目
</button>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-md">
<h3 class="text-xl font-semibold mb-4">分析结果</h3>
<div class="mb-4">
<img id="analysis-preview" class="max-w-full rounded-lg border hidden">
</div>
<div id="analysis-loading" class="hidden flex items-center justify-center">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<div id="analysis-result" class="result-container bg-gray-100 rounded-lg p-4 overflow-auto max-h-96"></div>
</div>
</div>
</div>
</section>
<!-- 拍照生成类题体验页面 -->
<section id="generate-page" class="py-16 px-4 hidden bg-gray-50">
<div class="max-w-4xl mx-auto">
<div class="flex items-center mb-8">
<button onclick="returnToHome()" class="mr-4 p-2 rounded-full hover:bg-gray-200 transition">
<i class="fas fa-arrow-left"></i>
</button>
<h2 class="text-3xl font-bold text-gray-800">拍照生成类题</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl p-6 shadow-md">
<h3 class="text-xl font-semibold mb-4">功能介绍</h3>
<p class="text-gray-600 mb-4">
上传题目照片，AI将生成类似题目及答案，帮助用户巩固知识点和提升解题能力。
</p>
<ul class="text-gray-600 space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
<span>智能生成同类型题目及答案</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
<span>提供详细答案解析及知识点</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-purple-500 mt-1 mr-2"></i>
<span>支持多种学科和题型</span>
</li>
</ul>
<div
id="generate-upload"
class="upload-area border-2 border-dashed rounded-xl p-8 text-center cursor-pointer hover:bg-purple-50 transition"
ondragover="handleDragOver(event)"
ondragleave="handleDragLeave(event)"
ondrop="handleDrop(event, 'generate')"
>
<i class="fas fa-cloud-upload-alt text-4xl text-purple-400 mb-3"></i>
<p class="font-medium text-gray-700 mb-2">点击或拖拽图片至此处上传</p>
<p class="text-sm text-gray-500">支持JPG、PNG格式，最大5MB</p>
<input
type="file"
id="generate-file"
class="hidden"
accept="image/*"
onchange="handleImageUpload(event, 'generate')"
>
</div>
<div class="mt-4">
<button
onclick="processImage('generate')"
id="generate-btn"
class="w-full py-3 rounded-lg bg-gradient-to-r from-purple-500 to-accent text-white font-medium hover:opacity-90 transition disabled:opacity-50"
disabled
>
生成类题
</button>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-md">
<h3 class="text-xl font-semibold mb-4">生成结果</h3>
<div class="mb-4">
<img id="generate-preview" class="max-w-full rounded-lg border hidden">
</div>
<div id="generate-loading" class="hidden flex items-center justify-center">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<div id="generate-result" class="result-container bg-gray-100 rounded-lg p-4 overflow-auto max-h-96"></div>
</div>
</div>
</div>
</section>
<!-- 手写文字识别体验页面 -->
<section id="ocr-page" class="py-16 px-4 hidden bg-gray-50">
<div class="max-w-4xl mx-auto">
<div class="flex items-center mb-8">
<button onclick="returnToHome()" class="mr-4 p-2 rounded-full hover:bg-gray-200 transition">
<i class="fas fa-arrow-left"></i>
</button>
<h2 class="text-3xl font-bold text-gray-800">手写文字识别</h2>
</div>
<div class="grid md:grid-cols-2 gap-8">
<div class="bg-white rounded-xl p-6 shadow-md">
<h3 class="text-xl font-semibold mb-4">功能介绍</h3>
<p class="text-gray-600 mb-4">
上传手写内容照片，AI将准确识别手写文字内容，并能识别公式并提供坐标位置。
</p>
<ul class="text-gray-600 space-y-2 mb-6">
<li class="flex items-start">
<i class="fas fa-check-circle text-pink-500 mt-1 mr-2"></i>
<span>支持手写文字、公式识别</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-pink-500 mt-1 mr-2"></i>
<span>提供识别位置坐标和置信度</span>
</li>
<li class="flex items-start">
<i class="fas fa-check-circle text-pink-500 mt-1 mr-2"></i>
<span>支持多行手写文本识别</span>
</li>
</ul>
<div
id="ocr-upload"
class="upload-area border-2 border-dashed rounded-xl p-8 text-center cursor-pointer hover:bg-pink-50 transition"
ondragover="handleDragOver(event)"
ondragleave="handleDragLeave(event)"
ondrop="handleDrop(event, 'ocr')"
>
<i class="fas fa-cloud-upload-alt text-4xl text-pink-400 mb-3"></i>
<p class="font-medium text-gray-700 mb-2">点击或拖拽图片至此处上传</p>
<p class="text-sm text-gray-500">支持JPG、PNG格式，最大5MB</p>
<input
type="file"
id="ocr-file"
class="hidden"
accept="image/*"
onchange="handleImageUpload(event, 'ocr')"
>
</div>
<div class="mt-4">
<button
onclick="processImage('ocr')"
id="ocr-btn"
class="w-full py-3 rounded-lg bg-gradient-to-r from-pink-500 to-highlight text-white font-medium hover:opacity-90 transition disabled:opacity-50"
disabled
>
识别文字
</button>
</div>
</div>
<div class="bg-white rounded-xl p-6 shadow-md">
<h3 class="text-xl font-semibold mb-4">识别结果</h3>
<div class="mb-4">
<img id="ocr-preview" class="max-w-full rounded-lg border hidden">
</div>
<div id="ocr-loading" class="hidden flex items-center justify-center">
<div class="lds-ripple"><div></div><div></div></div>
</div>
<div id="ocr-result" class="result-container bg-gray-100 rounded-lg p-4 overflow-auto max-h-96"></div>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="bg-gray-800 text-white py-12 px-4">
<div class="max-w-7xl mx-auto">
<div class="grid md:grid-cols-4 gap-8">
<div>
<h3 class="text-xl font-bold mb-4">智能AI开发平台</h3>
<p class="text-gray-400">赋能开发者的人工智能平台，提供先进AI能力，助力创新应用开发</p>
<div class="flex space-x-4 mt-6">
<a href="#" class="text-gray-400 hover:text-white"><i class="fab fa-weixin text-xl"></i></a>
<a href="#" class="text-gray-400 hover:text-white
<p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=wunianSky/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html> |