Spaces:

wunianSky
/

test

Running

App Files Files Community

wunianSky commited on Jun 20

Commit

3d32e4b

verified ·

1 Parent(s): 49087cd

我们平台有三个 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

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +432 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Test
-emoji: 👀
-colorFrom: red
-colorTo: red
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: test
+emoji: 🐳
+colorFrom: purple
+colorTo: pink
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,432 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>