init

2025-11-01 14:51:19 +08:00
parent be7bc940a8
commit b2d7ccd8fd
4 changed files with 154 additions and 0 deletions
--- a/16
+++ b/16
@@ -0,0 +1,16 @@
+# 使用官方Nginx镜像作为基础镜像
+FROM nginx:alpine
+
+# 设置工作目录
+WORKDIR /usr/share/nginx/html
+
+# 复制应用文件到容器中
+COPY index.html .
+COPY styles.css .
+COPY app.js .
+
+# 暴露80端口
+EXPOSE 80
+
+# 启动Nginx
+CMD ["nginx", "-g", "daemon off;"]
--- a/app.js
+++ b/app.js
@@ -0,0 +1,38 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const imageInput = document.getElementById('imageInput');
+    const previewImage = document.getElementById('previewImage');
+    const recognizeBtn = document.getElementById('recognizeBtn');
+    const resultText = document.getElementById('resultText');
+
+    // 图片选择事件
+    imageInput.addEventListener('change', function() {
+        const file = this.files[0];
+        if (file) {
+            const reader = new FileReader();
+            reader.onload = function(e) {
+                previewImage.src = e.target.result;
+            }
+            reader.readAsDataURL(file);
+        }
+    });
+
+    // 识别按钮点击事件
+    recognizeBtn.addEventListener('click', function() {
+        if (!imageInput.files[0]) {
+            alert('请先选择一张图片');
+            return;
+        }
+
+        // 这里可以添加实际的识别逻辑
+        // 目前使用模拟识别结果
+        const fakeResults = [
+            '这是一只猫',
+            '这是一只狗',
+            '这是一朵花',
+            '这是一辆车'
+        ];
+        const randomResult = fakeResults[Math.floor(Math.random() * fakeResults.length)];
+        
+        resultText.textContent = randomResult;
+    });
+});
--- a/index.html
+++ b/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>图片识别应用</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="container">
+        <h1>图片识别应用</h1>
+        <div class="upload-section">
+            <input type="file" id="imageInput" accept="image/*">
+            <button id="recognizeBtn">识别图片</button>
+        </div>
+        <div class="result-section">
+            <div class="image-preview">
+                <img id="previewImage" src="#" alt="图片预览">
+            </div>
+            <div class="recognition-result">
+                <h2>识别结果：</h2>
+                <p id="resultText">请选择图片进行识别</p>
+            </div>
+        </div>
+    </div>
+    <script src="app.js"></script>
+</body>
+</html>
--- a/styles.css
+++ b/styles.css
@@ -0,0 +1,72 @@
+body {
+    font-family: Arial, sans-serif;
+    margin: 0;
+    padding: 0;
+    background-color: #f5f5f5;
+}
+
+.container {
+    max-width: 800px;
+    margin: 20px auto;
+    padding: 20px;
+    background-color: white;
+    border-radius: 8px;
+    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
+}
+
+h1 {
+    color: #333;
+    text-align: center;
+}
+
+.upload-section {
+    display: flex;
+    gap: 10px;
+    margin-bottom: 20px;
+}
+
+#imageInput {
+    flex: 1;
+    padding: 8px;
+    border: 1px solid #ddd;
+    border-radius: 4px;
+}
+
+#recognizeBtn {
+    padding: 8px 16px;
+    background-color: #007bff;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+}
+
+#recognizeBtn:hover {
+    background-color: #0056b3;
+}
+
+.result-section {
+    display: flex;
+    gap: 20px;
+}
+
+.image-preview {
+    flex: 1;
+}
+
+#previewImage {
+    max-width: 100%;
+    height: auto;
+    border-radius: 4px;
+}
+
+.recognition-result {
+    flex: 1;
+}
+
+#resultText {
+    background-color: #f8f9fa;
+    padding: 10px;
+    border-radius: 4px;
+    min-height: 100px;
+}