zhihao.gu
/
raspi_cam_arm


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>树莓派双面拍照</title>
    <style>
        :root {
            --bg: #f3efe6;
            --panel: #fffdf8;
            --line: #d7c8b6;
            --text: #2c241c;
            --muted: #7a6c5d;
            --accent: #a44c21;
            --accent-dark: #7d3818;
        }

        * {
            box-sizing: border-box;
        }

        body {
            margin: 0;
            font-family: "Microsoft YaHei", sans-serif;
            color: var(--text);
            background:
                radial-gradient(circle at top left, #f8d7b8 0, transparent 28%),
                radial-gradient(circle at bottom right, #ead7c5 0, transparent 24%),
                linear-gradient(135deg, #f5f0e7, #ebe2d5);
            min-height: 100vh;
        }

        .page {
            max-width: 1100px;
            margin: 0 auto;
            padding: 40px 20px 60px;
        }

        .header {
            margin-bottom: 24px;
        }

        .header h1 {
            margin: 0 0 10px;
            font-size: 34px;
        }

        .header p {
            margin: 0;
            color: var(--muted);
            line-height: 1.7;
        }

        .toolbar {
            display: flex;
            gap: 12px;
            align-items: center;
            flex-wrap: wrap;
            margin: 28px 0 20px;
        }

        button {
            border: 0;
            border-radius: 12px;
            padding: 14px 22px;
            font-size: 16px;
            cursor: pointer;
            color: #fff;
            background: linear-gradient(135deg, var(--accent), var(--accent-dark));
            box-shadow: 0 10px 24px rgba(164, 76, 33, 0.2);
        }

        button:disabled {
            opacity: 0.65;
            cursor: not-allowed;
        }

        .status {
            min-height: 24px;
            color: var(--muted);
        }

        .result {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: 20px;
            margin-top: 20px;
        }

        .card {
            background: var(--panel);
            border: 1px solid var(--line);
            border-radius: 18px;
            padding: 18px;
            box-shadow: 0 16px 40px rgba(90, 62, 36, 0.08);
        }

        .card h2 {
            margin: 0 0 12px;
            font-size: 20px;
        }

        .image-box {
            aspect-ratio: 1 / 1;
            border-radius: 14px;
            background: #efe5d8;
            border: 1px dashed #c7b39b;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .image-box img {
            width: 100%;
            height: 100%;
            object-fit: contain;
            display: none;
            background: #fff;
        }

        .placeholder {
            color: var(--muted);
            text-align: center;
            padding: 20px;
            line-height: 1.6;
        }

        .link {
            margin-top: 12px;
            word-break: break-all;
            font-size: 14px;
        }

        .link a {
            color: var(--accent-dark);
        }

        .info-card {
            margin-top: 20px;
        }

        .info-box {
            min-height: 180px;
            border-radius: 14px;
            border: 1px dashed #c7b39b;
            background: #f7f1e7;
            padding: 16px;
            white-space: pre-wrap;
            line-height: 1.7;
            overflow: auto;
        }

        @media (max-width: 800px) {
            .result {
                grid-template-columns: 1fr;
            }

            .header h1 {
                font-size: 28px;
            }
        }
    </style>
</head>
<body>
<div class="page">
    <div class="header">
        <h1>树莓派正反面拍照</h1>
        <p>点击按钮后，页面会请求 <code>/capture-pair</code>，等待机械臂流程完成，然后展示 MinIO 图片链接和第一张图的识别结果。</p>
    </div>

    <div class="toolbar">
        <button id="captureBtn">开始拍照</button>
        <div class="status" id="statusText">等待操作</div>
    </div>

    <div class="result">
        <div class="card">
            <h2>图片 1 / front</h2>
            <div class="image-box">
                <img id="frontImage" alt="front">
                <div class="placeholder" id="frontPlaceholder">还没有图片</div>
            </div>
            <div class="link"><a id="frontLink" href="#" target="_blank"></a></div>
        </div>

        <div class="card">
            <h2>图片 2 / back</h2>
            <div class="image-box">
                <img id="backImage" alt="back">
                <div class="placeholder" id="backPlaceholder">还没有图片</div>
            </div>
            <div class="link"><a id="backLink" href="#" target="_blank"></a></div>
        </div>
    </div>

    <div class="card info-card">
        <h2>识别结果</h2>
        <div class="info-box" id="recognizedInfo">还没有识别结果</div>
    </div>
</div>

<script>
    const captureBtn = document.getElementById("captureBtn");
    const statusText = document.getElementById("statusText");
    const frontImage = document.getElementById("frontImage");
    const backImage = document.getElementById("backImage");
    const frontLink = document.getElementById("frontLink");
    const backLink = document.getElementById("backLink");
    const frontPlaceholder = document.getElementById("frontPlaceholder");
    const backPlaceholder = document.getElementById("backPlaceholder");
    const recognizedInfo = document.getElementById("recognizedInfo");

    function setStatus(text) {
        statusText.textContent = text;
    }

    function showImage(img, link, placeholder, url) {
        const finalUrl = `${url}${url.includes("?") ? "&" : "?"}t=${Date.now()}`;
        img.src = finalUrl;
        img.style.display = "block";
        placeholder.style.display = "none";
        link.href = url;
        link.textContent = url;
    }

    captureBtn.addEventListener("click", async () => {
        captureBtn.disabled = true;
        setStatus("正在请求拍照，请等待机械臂流程完成...");

        try {
            const response = await fetch("/capture-pair", { method: "POST" });
            const data = await response.json();

            if (!response.ok) {
                throw new Error(data.detail || "请求失败");
            }

            if (data.card_front_url) {
                showImage(frontImage, frontLink, frontPlaceholder, data.card_front_url);
            }

            if (data.card_back_url) {
                showImage(backImage, backLink, backPlaceholder, data.card_back_url);
            }

            recognizedInfo.textContent = data.recognizedInfoDTO
                ? JSON.stringify(data.recognizedInfoDTO, null, 2)
                : "未获取到识别结果";

            setStatus("拍照完成");
        } catch (error) {
            setStatus(`拍照失败：${error.message}`);
        } finally {
            captureBtn.disabled = false;
        }
    });
</script>
</body>
</html>