zhihao.gu
/
PokemonCardSearch


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596
							<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title>宝可梦卡片搜索</title>
    <style>
        body { font-family: sans-serif; max-width: 1200px; margin: 0 auto; padding: 20px; }
        .container { display: flex; gap: 20px; }
        .upload-section { flex: 1; border-right: 1px solid #ccc; padding-right: 20px; }
        .results-section { flex: 2; }
        .card { border: 1px solid #ddd; padding: 10px; margin-bottom: 10px; display: flex; align-items: center; border-radius: 8px; }
        .card img { max-width: 100px; max-height: 140px; margin-right: 20px; }
        .card-info { font-size: 14px; }
        .similarity { color: green; font-weight: bold; }
    </style>
</head>
<body>
    <h1>🔍 Pokemon Card Search</h1>

    <div class="container">
        <div class="upload-section">
            <h3>图片搜索</h3>
            <input type="file" id="imgInput" accept="image/*">
            <br><br>
            <label>Top N: <input type="number" id="topN" value="5" style="width: 50px;"></label>
            <br><br>
            <button onclick="searchImage()">搜索</button>
            <br><hr><br>
            <h3>文字过滤</h3>
            <input type="text" id="nameFilter" placeholder="卡名 (如 Swadloon)">
            <button onclick="filterData()">查询</button>
        </div>

        <div class="results-section">
            <h3>结果</h3>
            <div id="results"></div>
        </div>
    </div>

    <script>
        async function searchImage() {
            const input = document.getElementById('imgInput');
            const topN = document.getElementById('topN').value;
            if (!input.files[0]) return alert("请选择图片");

            const formData = new FormData();
            formData.append('file', input.files[0]);

            const res = await fetch(`/search/image?top_k=${topN}`, {
                method: 'POST',
                body: formData
            });
            const data = await res.json();
            renderResults(data.results);
        }

        async function filterData() {
            const name = document.getElementById('nameFilter').value;
            const res = await fetch(`/search/filter?card_name=${name}&limit=10`, {
                method: 'POST'
            });
            const data = await res.json();
            renderResults(data.data, false);
        }

        function renderResults(items, isSearch=true) {
            const container = document.getElementById('results');
            container.innerHTML = '';

            if (!items || items.length === 0) {
                container.innerHTML = '<p>无结果</p>';
                return;
            }

            items.forEach(item => {
                const div = document.createElement('div');
                div.className = 'card';

                // 计算显示内容
                let scoreHtml = isSearch ? `<p class="similarity">相似度: ${(item.score).toFixed(4)}</p>` : '';

                div.innerHTML = `
                    <img src="${item.img_url}" alt="${item.card_name}" onerror="this.src=''">
                    <div class="card-info">
                        <h3>${item.card_name} #${item.card_num}</h3>
                        <p>语言: ${item.lang} | Source ID: ${item.source_id}</p>
                        ${scoreHtml}
                        <p style="color:gray; font-size:12px;">ID: ${item.id}</p>
                    </div>
                `;
                container.appendChild(div);
            });
        }
    </script>
</body>
</html>