实现 AI 图片理解能力测试

2026-08-18 12:07:01 +08:00 · 2026-07-14 11:07:35 +08:00
parent 31df97237d
commit ce4b00bcd9
14 changed files with 696 additions and 17 deletions
@@ -3429,6 +3429,199 @@ body {
  }
 }

+.ai-vision-test {
+  display: grid;
+  gap: 16px;
+}
+
+.ai-vision-test > header,
+.ai-vision-test > footer,
+.ai-vision-model {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 16px;
+}
+
+.ai-vision-test h2,
+.ai-vision-test h3,
+.ai-vision-test p {
+  margin: 0;
+}
+
+.ai-vision-test h2 {
+  color: #202724;
+  font-size: 15px;
+}
+
+.ai-vision-test header h3 {
+  margin-top: 12px;
+  color: #35403b;
+  font-size: 13px;
+}
+
+.ai-vision-test header p,
+.ai-vision-model,
+.ai-vision-upload small {
+  margin-top: 4px;
+  color: #66706b;
+  font-size: 12px;
+}
+
+.ai-vision-capability {
+  border-radius: 999px;
+  padding: 5px 9px;
+  background: #f1f3f2;
+  color: #66706b;
+  white-space: nowrap;
+  font-size: 12px;
+}
+
+.ai-vision-capability.supported {
+  background: #eaf5f1;
+  color: #2e8b68;
+}
+
+.ai-vision-model {
+  justify-content: flex-start;
+  margin: 0;
+}
+
+.ai-vision-upload {
+  display: flex;
+  min-height: 112px;
+  align-items: center;
+  justify-content: center;
+  gap: 14px;
+  border: 1px dashed #bfc9c4;
+  border-radius: 10px;
+  padding: 14px;
+  background: #f7f9f8;
+  color: #35403b;
+  text-align: center;
+  cursor: pointer;
+}
+
+.ai-vision-upload:hover {
+  border-color: #247a63;
+  background: #f2f8f5;
+}
+
+.ai-vision-upload input {
+  display: none;
+}
+
+.ai-vision-upload.has-image {
+  justify-content: flex-start;
+  text-align: left;
+}
+
+.ai-vision-upload img {
+  width: 112px;
+  height: 82px;
+  flex: 0 0 auto;
+  border-radius: 8px;
+  object-fit: cover;
+}
+
+.ai-vision-upload strong,
+.ai-vision-upload small {
+  display: block;
+}
+
+.ai-vision-prompt {
+  display: grid;
+  gap: 7px;
+  color: #46514c;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.ai-vision-prompt textarea {
+  width: 100%;
+  border: 1px solid #d5ddda;
+  border-radius: 8px;
+  outline: none;
+  padding: 10px;
+  resize: vertical;
+  background: #f4f7f5;
+  color: #202724;
+  font: 13px/1.6 var(--wxex-font);
+}
+
+.ai-vision-prompt textarea:focus {
+  border-color: #247a63;
+  box-shadow: 0 0 0 2px rgba(36, 122, 99, 0.08);
+}
+
+.ai-vision-privacy {
+  color: #66706b;
+  font-size: 12px;
+  line-height: 1.6;
+}
+
+.ai-vision-error {
+  border-left: 3px solid #c85a5a;
+  padding: 9px 11px;
+  background: #fff2f2;
+  color: #a84444;
+  font-size: 12px;
+}
+
+.ai-vision-result {
+  display: grid;
+  gap: 12px;
+  border: 1px solid #dce7e2;
+  border-radius: 9px;
+  padding: 14px;
+  background: #f7faf9;
+}
+
+.ai-vision-result dl {
+  display: grid;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  gap: 12px;
+  margin: 0;
+}
+
+.ai-vision-result dt {
+  color: #929a96;
+  font-size: 11px;
+}
+
+.ai-vision-result dd {
+  margin: 4px 0 0;
+  color: #35403b;
+  font-size: 12px;
+  font-weight: 600;
+}
+
+.ai-vision-result > p {
+  white-space: pre-wrap;
+  color: #3d4742;
+  font-size: 13px;
+  line-height: 1.7;
+}
+
+.ai-vision-test > footer {
+  justify-content: flex-end;
+}
+
+.ai-vision-test > footer button {
+  min-height: 34px;
+  border: 1px solid #d5ddda;
+  border-radius: 7px;
+  padding: 0 13px;
+  background: #fff;
+  color: #46514c;
+  cursor: pointer;
+}
+
+.ai-vision-test > footer button:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
 .report-density-options button:disabled:hover {
  border-color: var(--wxex-border);
  background: var(--wxex-bg-elevated);