| <!DOCTYPE html> |
| <html lang="zh-CN"> |
| <head> |
| <meta charset="UTF-8"> |
| <title>云学习平台</title> |
| <style> |
| body { font-family: system-ui, sans-serif; max-width: 900px; margin: 40px auto; padding: 0 16px; } |
| h1 { color: #2563eb; } |
| section { border: 1px solid #e5e7eb; border-radius: 12px; padding: 20px; margin-bottom: 20px; } |
| input, button { padding: 8px 12px; margin: 4px 0; font-size: 14px; } |
| button { background: #2563eb; color: #fff; border: none; border-radius: 6px; cursor: pointer; } |
| button:hover { background: #1d4ed8; } |
| pre { background: #f3f4f6; padding: 12px; border-radius: 8px; overflow-x: auto; } |
| .row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } |
| </style> |
| </head> |
| <body> |
| <h1>📚 云学习平台</h1> |
|
|
| <section> |
| <h2>1. 注册 / 登录</h2> |
| <div class="row"> |
| <input id="username" placeholder="用户名"> |
| <input id="password" type="password" placeholder="密码"> |
| <button onclick="register()">注册</button> |
| <button onclick="login()">登录</button> |
| <span id="authStatus"></span> |
| </div> |
| </section> |
|
|
| <section> |
| <h2>2. 上传学习资料</h2> |
| <div class="row"> |
| <input type="file" id="uploadFile"> |
| <button onclick="upload()">上传</button> |
| </div> |
| <pre id="uploadResult"></pre> |
| </section> |
|
|
| <section> |
| <h2>3. 我的资料库</h2> |
| <button onclick="listFiles()">刷新列表</button> |
| <pre id="fileList"></pre> |
| </section> |
|
|
| <section> |
| <h2>4. AI 识图搜索</h2> |
| <p>上传一张图片，AI 会识别内容并在你的资料库中查找相关文件。</p> |
| <div class="row"> |
| <input type="file" id="searchImage" accept="image/*"> |
| <button onclick="searchByImage()">识图搜索</button> |
| </div> |
| <pre id="searchResult"></pre> |
| </section> |
|
|
| <script> |
| let token = localStorage.getItem("token") || ""; |
| |
| function authHeaders() { |
| return token ? { "Authorization": "Bearer " + token } : {}; |
| } |
| |
| async function register() { |
| const fd = new FormData(); |
| fd.append("username", document.getElementById("username").value); |
| fd.append("password", document.getElementById("password").value); |
| const r = await fetch("/auth/register", { method: "POST", body: fd }); |
| const j = await r.json(); |
| if (r.ok) { |
| token = j.access_token; |
| localStorage.setItem("token", token); |
| document.getElementById("authStatus").textContent = "✅ 注册成功"; |
| } else { |
| document.getElementById("authStatus").textContent = "❌ " + (j.detail || "注册失败"); |
| } |
| } |
| |
| async function login() { |
| const fd = new FormData(); |
| fd.append("username", document.getElementById("username").value); |
| fd.append("password", document.getElementById("password").value); |
| const r = await fetch("/auth/login", { method: "POST", body: fd }); |
| const j = await r.json(); |
| if (r.ok) { |
| token = j.access_token; |
| localStorage.setItem("token", token); |
| document.getElementById("authStatus").textContent = "✅ 登录成功"; |
| } else { |
| document.getElementById("authStatus").textContent = "❌ " + (j.detail || "登录失败"); |
| } |
| } |
| |
| async function upload() { |
| const f = document.getElementById("uploadFile").files[0]; |
| if (!f) return alert("请选择文件"); |
| const fd = new FormData(); |
| fd.append("file", f); |
| const r = await fetch("/files/upload", { method: "POST", headers: authHeaders(), body: fd }); |
| document.getElementById("uploadResult").textContent = JSON.stringify(await r.json(), null, 2); |
| } |
| |
| async function listFiles() { |
| const r = await fetch("/files/list", { headers: authHeaders() }); |
| document.getElementById("fileList").textContent = JSON.stringify(await r.json(), null, 2); |
| } |
| |
| async function searchByImage() { |
| const f = document.getElementById("searchImage").files[0]; |
| if (!f) return alert("请选择图片"); |
| const fd = new FormData(); |
| fd.append("file", f); |
| document.getElementById("searchResult").textContent = "识别中..."; |
| const r = await fetch("/ai/search-by-image", { method: "POST", headers: authHeaders(), body: fd }); |
| document.getElementById("searchResult").textContent = JSON.stringify(await r.json(), null, 2); |
| } |
| </script> |
| </body> |
| </html> |
