xuyunhui
/
identify_Demo


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>KNN 图像分类器 - 图片上传 (CDN)</title>
    <style>
        body {
            font-family: sans-serif;
            padding: 10px;
            display: flex;
            flex-direction: column;
            align-items: flex-start; /* 左对齐 */
        }
        button {
            padding: 8px 15px;
            margin-top: 5px; /* 添加上边距 */
            margin-right: 5px;
            cursor: pointer;
        }
        #image-preview-container {
            margin-top: 15px;
            margin-bottom: 15px;
            min-height: 227px; /* 保持最小高度以便布局 */
            border: 1px dashed #ccc;
            padding: 5px;
            display: flex; /* 使用 flex 布局 */
            justify-content: center; /* 水平居中 */
            align-items: center;    /* 垂直居中 */
            width: 227px;  /* 固定宽度 */
            height: 227px; /* 固定高度 */
            background-color: #f8f8f8;
            overflow: hidden; /* 隐藏超出部分 */
        }
        #image-preview {
            max-width: 100%;
            max-height: 100%;
            display: block;
            object-fit: contain; /* 保持图片比例 */
        }
        #controls-container {
            margin-top: 15px;
        }
        .class-controls {
            margin-bottom: 10px;
            display: flex;
            align-items: center;
        }
        .class-controls span {
            margin-left: 10px;
            font-size: 0.9em;
            color: #555;
            min-width: 150px; /* 给状态文本留出空间 */
        }
        #status {
            margin-top: 15px;
            font-weight: bold;
            color: navy;
        }
    </style>
</head>
<body>
    <h1>KNN 图像分类器 - 图片上传</h1>
    <p>选择一张图片，然后点击按钮进行识别或训练。</p>

    <input type="file" id="file-input" accept="image/*">
    <div id="image-preview-container">
        <img id="image-preview" src="#" alt="图片预览" style="display: none;"/>
         <span id="preview-placeholder">请选择一张图片</span>
    </div>

    <button id="classify-button" disabled>识别图片</button>
    <div id="status">准备就绪。</div>

    <div id="controls-container">
        <h2>训练控件</h2>
        <!-- 训练按钮和状态将由 JS 动态创建 -->
    </div>

    <!-- TensorFlow.js 库 (必须先加载核心库) -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs@latest/dist/tf.min.js"></script>
    <!-- MobileNet 模型 -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/mobilenet@latest/dist/mobilenet.min.js"></script>
    <!-- KNN 分类器 -->
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/knn-classifier@latest/dist/knn-classifier.min.js"></script>

    <!-- 我们的应用逻辑 -->
    <script src="app.js"></script>
</body>
</html>