1/cat-dog.html at main · bowenvh67/1 · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>猫狗识别 - Xingbowen</title>
    <link rel="stylesheet" href="styles.css" />
    <style>
        .tool {
            margin-top: 10px;
            padding: 18px;
            border: 1px solid #e0e0e0;
            border-radius: 10px;
            background: #fff;
        }
        .tool h1 {
            font-size: 1.6em;
            margin-bottom: 10px;
            color: #222;
        }
        .hint {
            color: #666;
            font-size: 0.95em;
            margin-bottom: 14px;
        }
        .row {
            display: flex;
            gap: 18px;
            flex-wrap: wrap;
            align-items: flex-start;
        }
        .panel {
            flex: 1;
            min-width: 280px;
        }
        .btn {
            display: inline-block;
            padding: 10px 14px;
            border: 1px solid #e0e0e0;
            background: #f7f7f7;
            border-radius: 8px;
            cursor: pointer;
            font-size: 14px;
        }
        .btn:disabled {
            opacity: 0.6;
            cursor: not-allowed;
        }
        .file {
            display: block;
            margin: 10px 0;
        }
        .result {
            margin-top: 10px;
            padding: 12px;
            background: #fafafa;
            border: 1px solid #eee;
            border-radius: 8px;
            color: #333;
            line-height: 1.7;
        }
        .badge {
            display: inline-block;
            padding: 2px 8px;
            border-radius: 999px;
            border: 1px solid #e0e0e0;
            background: #fff;
            font-size: 12px;
            color: #444;
            margin-left: 6px;
        }
        .canvasWrap {
            position: relative;
            width: 100%;
            max-width: 520px;
        }
        canvas {
            width: 100%;
            height: auto;
            border-radius: 10px;
            border: 1px solid #e0e0e0;
            background: #fff;
        }
        .topbar {
            display: flex;
            gap: 10px;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            margin-bottom: 12px;
        }
        .linkBack {
            color: #0066cc;
            text-decoration: none;
            font-size: 14px;
        }
        .linkBack:hover { text-decoration: underline; }
    </style>
</head>
<body>
    <div class="container">
        <div class="tool">
            <div class="topbar">
                <h1>猫狗识别（本地运行，无需上传服务器）</h1>
                <a class="linkBack" href="index.html">← 返回主页</a>
            </div>
            <div class="hint">
                选择一张图片后点击“开始识别”。模型在浏览器里运行：如果检测到 <strong>cat</strong> 或 <strong>dog</strong>，会给出结论和置信度。
            </div>

            <div class="row">
                <div class="panel">
                    <input id="file" class="file" type="file" accept="image/*" />
                    <button id="btn" class="btn" disabled>加载模型中…</button>
                    <div id="status" class="result">状态：正在加载模型，请稍等。</div>
                    <div id="out" class="result">结果：等待图片。</div>
                </div>

                <div class="panel">
                    <div class="canvasWrap">
                        <canvas id="canvas"></canvas>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- TensorFlow.js + coco-ssd -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@4.16.0/dist/tf.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/coco-ssd@2.2.3/dist/coco-ssd.min.js"></script>
    <script src="cat-dog.js"></script>
</body>
</html>