Hugging Face's logo

Spaces:
smf2010
/
forest
Sleeping

App Files Community
1
forest
File size: 4,339 Bytes 
19eaddc
af7871e
 
19eaddc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
af7871e
 
19eaddc
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
af7871e
19eaddc
 
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
 
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            text-align: center;
            background-image: url("https://bing.shangzhenyang.com/api/1080p");
            background-size: cover;
            background-position: center;
            background-repeat: no-repeat;
        }

        h1 {
            font-size: 24px;
        }

        .container {
            border-radius: 15px;
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            height: 100vh;
        }

        .container::after {
            border-radius: 15px;
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(255, 255, 255, 0.3);
            z-index: -1;
        }

        form {
            margin-top: 20px;
        }

        table{
            backdrop-filter: blur(20px);
              -webkit-backdrop-filter: blur(20px);
              -moz-backdrop-filter: blur(20px);
              -o-backdrop-filter: blur(20px);
            background-color: rgba(255, 255, 255, 0.5);
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
            border-radius: 15px;
        }

        input[type="text"] {
            border: none; /* 去掉边框 */
            backdrop-filter: blur(10px);
              -webkit-backdrop-filter: blur(10px);
              -moz-backdrop-filter: blur(10px);
              -o-backdrop-filter: blur(10px);
            width: 100%;
            background-color: rgba(255, 255, 255, 0.5);
            padding: 10px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
            margin-bottom: 10px;
            border-radius: 100px;
            box-sizing: border-box;
        }

        button {
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
            padding: 10px 20px;
            background-color: #3399ff;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .result, .error {
            margin-top: 20px;
            text-align: left;
        }

        .result-container, .error-container {
            text-align: center;
        }

        .error-container {
            color: red;
        }

        .loading {
            display: none;
            border: 3px solid #f3f3f3;
            border-top: 3px solid #3399ff;
            border-radius: 50%;
            width: 20px;
            height: 20px;
            animation: spin 1s linear infinite;
            margin-bottom: 20px;
        }

        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }

        @media screen and (min-width: 768px) {
            form {
                display: flex;
                justify-content: center;
            }

            input[type="text"] {
                width: 300px;
                margin-right: 10px;
                margin-bottom: 0;
            }
        }
    </style>
    <meta charset="UTF-8">
    <title>LNLC</title>
</head>
<body>
    <div class="container">
      <h1>自然语言中文分词向量化余弦模糊匹配程序</h1>
      <form method="POST" action="/">
        <input type="text" name="query" placeholder="请输入要搜索的内容" required>
        <input type="text" name="text" placeholder="请输入要在什么里面搜索内容" required>
        <button type="submit">查找</button>
      </form>

      <div class="loading"></div>

      {% if result %}
      <div class="result-container">
        <h2>匹配结果：</h2>
        <ul>
          {% for sentence, similarity in result %}
          <li>句子：{{ sentence }}，匹配度：{{ similarity * 100 }}%</li>
          {% endfor %}
        </ul>
      </div>
      {% endif %}

      <script type="text/javascript">
          document.querySelector('form').addEventListener('submit', function() {
              document.querySelector('.loading').style.display = 'block';
          });
      </script>
    </div>
</body>
</html>