我们平台有三个 AI 能力,拍照解题,拍照生成类题,手写文字识别,请参考百度开发平台,阿里云等平台,手写生成一个 AI 平台的首页,其中的开发能力这一块包含三个能力,每一个能力点击后,都会进入一个当前能力的页面,页面包含一些简单的能力介绍以及能力体验功能,三个功能的测试一致,都是上传图片,将图片转换成 base64 字符,调用后端的接口,然后将结果进行渲染展示,在等待后端返回的过程中要有 loading 效果,并且文本展示框要支持 markdown 文本展示以及数学公式文字的渲染展示,后端请求统一采用 post 请求,入参字段为imgBase64,后端的返回里面都包含 code 字段,字段为 0 表示正常,其他值表示异常. 三个能力对应的请求 url 和后端具体返回如下: 拍照解题: 请求url:/ai/api/analysis/img 后端返回格式为 { "code": 0, "msg": null, "data": { "analysis": "e4nz5l" } } 拍照生成类题: 请求url:/ai/api/generate/img 后端返回格式如下,返回值包括题目,答案,解析,以及知识点四个字段,请按顺序进行展示,并标注清楚 { "code": 0, "msg": null, "data": { "answers": [ { "question": "src8my", "answer": "d3pukn", "analysis": "rw3fba", "knowledgePoint": "z728wd" } ] } } 手写文字识别: 请求url:/ai/api/ocr/handwrite 后端返回格式如下: { "code": 0, "msg": null, "data": [ [ [ [ [ 41.0, 162.0 ], [ 70.0, 162.0 ], [ 70.0, 184.0 ], [ 41.0, 184.0 ] ] ], [ [ "田", 0.7661811113357544 ] ] ] ] } - Initial Deployment
3d32e4b
verified
| <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> |