【JavaScript——函数编写】悠然画境（蓝桥杯真题

背景介绍

作为一名人工智能训练师，你需要使用 artDataArray 数组中提供的指定语料进行训练，你可以用其中的词来组成任何句子来进行智能绘画的训练。

准备步骤

开始答题前，需要先打开本题的项目代码文件夹，目录结构如下：

├── css
├── images
├── index.html
├── effect.gif
└── js
    └── index.js

其中:

• index.html 是主页面。
• css 是样式文件夹。
• images 是图片文件夹。
• js/index.js 是待补充的 js 文件。
• effect.gif 是项目最终完成的效果图。

在浏览器中预览 index.html 页面效果如下：

目标效果

请在 js/index.js 文件中的 TODO 部分，完善 generateAndDisplayImages 函数，实现以下目标：

根据函数参数 imageCount 和 selectedText 与已提供 artDataArray 数组中的图片相关词语进行规则匹配，并返回匹配度最高的图片数组。最佳匹配的规则为，文本内容中包含对应图片 tag 的数量最多则为匹配度最高，放在数组前面，如果多张图片匹配度相同，则任意选择匹配到的图片。

函数参数说明

• imageCount 表示图片数量。
• selectedText 表示文本内容。

artDataArray 数组说明

artDataArray 数组中每个元素为对象，包含两个属性：imageurl 和 tags。其中，imageUrl 表示图片路径，tags 表示跟图片相关的词语，词语通过、 进行分隔。

匹配度示例：

注意：测试时请使用已提供数据 tags 中的词语进行组句测试。

示例 1：

如用户输入“一只湖蓝色的知更鸟”，选择生成图片数量为 1，函数的返回值如下：

[
  { imageUrl: "images/img1.png", tags: "知更鸟、湖蓝色、十分可爱、皮克斯渲染" }
];

因为这条 tags 中的词语与文本内容，匹配量最多，匹配到了 “知更鸟”、“湖蓝色”，匹配到是数量为 2，其他 “知更鸟” 相关的图片匹配的数量为 1。

示例 2：

如用户输入“一只湖蓝色的知更鸟”，选择生成图片数量为 3，函数的返回值如下：

[
  { imageUrl: "images/img1.png", tags: "知更鸟、湖蓝色、十分可爱、皮克斯渲染" },
  { imageUrl: "images/img2.png", tags: "知更鸟、个性的眉毛、模糊毛皮" },
  { imageUrl: "images/img3.png", tags: "知更鸟、剪纸风格、个性的眉毛" }
];

最终效果可参考文件夹下面的 gif 图，图片名称为 effect.gif（提示：可以通过 VS Code 或者浏览器预览 gif 图片）。

要求规定

• 请勿修改 js/index.js 文件外的任何内容。
• 请严格按照考试步骤操作，切勿修改考试默认提供项目中的文件名称、文件夹路径、class 名、id 名、图片名等，以免造成无法判题通过。

判分标准

• 本题完全实现题目目标得满分，否则得 0 分。

通关代码✔️

// 获取滑块、生成按钮、图片数量显示元素、右侧面板、错误信息元素
const slider = document.querySelector('.slider');
const generateButton = document.querySelector('.generate-button');
const imageCountSpan = document.getElementById('imageCount');
const rightPanel = document.querySelector('.right-panel');
const errorMessage = document.querySelector('.error-message');
const sliderDots = document.querySelectorAll('.slider-dot');

function updateSliderDots(value) {
  sliderDots.forEach((dot, index) => {
    if (index < value) {
      dot.style.backgroundColor = '#007bff'; // Blue
    } else {
      dot.style.backgroundColor = '#bbb'; // Gray
    }
  });
}

// 初始化图片数量为滑块的值
imageCountSpan.innerText = slider.value;
// 初始化绘画风格和文本
let imageCount = slider.value;
let selectedText = "";

// 监听滑块值变化事件
slider.addEventListener('input', () => {
  imageCount = slider.value;
  // 更新显示的图片数量
  imageCountSpan.innerText = slider.value;
  updateSliderDots(Number(imageCount))
});

// 监听绘画文本输入事件
const textarea = document.querySelector('textarea');
textarea.addEventListener('input', () => {
  selectedText = textarea.value;
  // 如果文本不为空，隐藏错误信息
  if (selectedText) { errorMessage.style.display = 'none'; }
});

// 监听生成按钮点击事件
generateButton.addEventListener('click', () => {
  // 获取生成的图片数量
  // 如果文本为空，显示错误信息并返回
  if (!selectedText) return errorMessage.style.display = 'block';

  // 生成最佳图片的匹配数组
  imgAry = generateAndDisplayImages(imageCount, selectedText);
  console.log(imgAry)
  // 渲染 DOM 
  let str = ``
  imgAry.forEach((el) => {
    str += `
          <img src='${el.imageUrl}' />
        `
  })
  rightPanel.innerHTML = str
});

// 假设生成的绘画数据数组为 artDataArray
const artDataArray = [
  { "imageUrl": "images/img1.jpg", "tags": "知更鸟、湖蓝色、十分可爱、皮克斯渲染" },
  { "imageUrl": "images/img2.jpg", "tags": "知更鸟、个性的眉毛、模糊毛皮" },
  { "imageUrl": "images/img3.jpg", "tags": "知更鸟、剪纸风格、个性的眉毛" },
  { "imageUrl": "images/img4.jpg", "tags": "知更鸟、油画、十分可爱、特殊的羽毛" },
  { "imageUrl": "images/img5.jpg", "tags": "男性、卡通、书、桌子" },
  { "imageUrl": "images/img6.jpg", "tags": "男性、卡通、玩具、眼镜" },
  { "imageUrl": "images/img7.jpg", "tags": "男性、卡通、玩具" },
  { "imageUrl": "images/img8.jpg", "tags": "男性、卡通、书" },
  { "imageUrl": "images/img9.jpg", "tags": "沙滩、遮阳伞、散步" },
  { "imageUrl": "images/img10.jpg", "tags": "沙滩、椰子树、一群人" },
  { "imageUrl": "images/img11.jpg", "tags": "沙滩、遮阳伞、人、包" },
  { "imageUrl": "images/img12.jpg", "tags": "沙滩、回忆、相框" }
]

/**
 * @param {*} imageCount 生成的图片数量
 * @param {*} selectedText 用户输入的文本
 */
function generateAndDisplayImages(imageCount, selectedText) {
  let imgAry = [] // 定义最佳匹配的图片数组
  // TODO：待补充代码 
  imgAry = artDataArray.map(items=>{
  const count = items.tags.split('、').filter(item=>{
     return selectedText.includes(item)
    }).length
  return {...items,weight:count}
   }).sort((a,b)=>{return b.weight-a.weight}).slice(0,imageCount)
  //TODO：END
  return imgAry;
}

代码解析